1// Excerpted from vendor/twbs/bootstrap/scss/mixins/_buttons.scss (button size code on lines 97-110 excluded)
2// /*!
3// * Bootstrap v4.1.3 (https://getbootstrap.com/)
4// * Copyright 2011-2018 The Bootstrap Authors
5// * Copyright 2011-2018 Twitter, Inc.
6// * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
7// */
8@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
9	color: color-yiq($background);
10	@include gradient-bg($background);
11	border-color: $border;
12	@include box-shadow($btn-box-shadow);
13
14	@include hover {
15		color: color-yiq($hover-background);
16		@include gradient-bg($hover-background);
17		border-color: $hover-border;
18	}
19
20	&:focus,
21	&.focus {
22		color: color-yiq($hover-background);
23		@include gradient-bg($hover-background);
24		border-color: $hover-border;
25		// Avoid using mixin so we can pass custom focus shadow properly
26		@if $enable-shadows {
27			box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
28		} @else {
29			box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
30		}
31	}
32
33	// Disabled comes first so active can properly restyle
34	&.disabled,
35	&:disabled {
36		color: color-yiq($background);
37		background-color: $background;
38		border-color: $border;
39	}
40
41	&:not(:disabled):not(.disabled):active,
42	&:not(:disabled):not(.disabled).active,
43	.show > &.dropdown-toggle {
44		color: color-yiq($active-background);
45		background-color: $active-background;
46		@if $enable-gradients {
47			background-image: none; // Remove the gradient for the pressed/active state
48		}
49		border-color: $active-border;
50
51		&:focus {
52			// Avoid using mixin so we can pass custom focus shadow properly
53			@if $enable-shadows {
54				box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
55			} @else {
56				box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
57			}
58		}
59	}
60}
61
62@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
63	color: $color;
64	background-color: transparent;
65	background-image: none;
66	border-color: $color;
67
68	&:hover {
69		color: $color-hover;
70		background-color: $active-background;
71		border-color: $active-border;
72	}
73
74	&:focus,
75	&.focus {
76		box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
77	}
78
79	&.disabled,
80	&:disabled {
81		color: $color;
82		background-color: transparent;
83	}
84
85	&:not(:disabled):not(.disabled):active,
86	&:not(:disabled):not(.disabled).active,
87	.show > &.dropdown-toggle {
88		color: color-yiq($active-background);
89		background-color: $active-background;
90		border-color: $active-border;
91
92		&:focus {
93			// Avoid using mixin so we can pass custom focus shadow properly
94			@if $enable-shadows and $btn-active-box-shadow != none {
95				box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
96			} @else {
97				box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
98			}
99		}
100	}
101}
102// From mixins/_buttons.scss end