UNPKG

3.18 kBSCSSView Raw
1// Button variants
2//
3// Easily pump out default styles, as well as :hover, :focus, :active,
4// and disabled options for all buttons
5
6@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%)) {
7 color: color-yiq($background);
8 @include gradient-bg($background);
9 border-color: $border;
10 @include box-shadow($btn-box-shadow);
11
12 @include hover {
13 color: color-yiq($hover-background);
14 @include gradient-bg($hover-background);
15 border-color: $hover-border;
16 }
17
18 &:focus,
19 &.focus {
20 // Avoid using mixin so we can pass custom focus shadow properly
21 @if $enable-shadows {
22 box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
23 } @else {
24 box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
25 }
26 }
27
28 // Disabled comes first so active can properly restyle
29 &.disabled,
30 &:disabled {
31 color: color-yiq($background);
32 background-color: $background;
33 border-color: $border;
34 }
35
36 &:not(:disabled):not(.disabled):active,
37 &:not(:disabled):not(.disabled).active,
38 .show > &.dropdown-toggle {
39 color: color-yiq($active-background);
40 background-color: $active-background;
41 @if $enable-gradients {
42 background-image: none; // Remove the gradient for the pressed/active state
43 }
44 border-color: $active-border;
45
46 &:focus {
47 // Avoid using mixin so we can pass custom focus shadow properly
48 @if $enable-shadows {
49 box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
50 } @else {
51 box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
52 }
53 }
54 }
55}
56
57@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
58 color: $color;
59 background-color: transparent;
60 background-image: none;
61 border-color: $color;
62
63 &:hover {
64 color: $color-hover;
65 background-color: $active-background;
66 border-color: $active-border;
67 }
68
69 &:focus,
70 &.focus {
71 box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
72 }
73
74 &.disabled,
75 &:disabled {
76 color: $color;
77 background-color: transparent;
78 }
79
80 &:not(:disabled):not(.disabled):active,
81 &:not(:disabled):not(.disabled).active,
82 .show > &.dropdown-toggle {
83 color: color-yiq($active-background);
84 background-color: $active-background;
85 border-color: $active-border;
86
87 &:focus {
88 // Avoid using mixin so we can pass custom focus shadow properly
89 @if $enable-shadows and $btn-active-box-shadow != none {
90 box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
91 } @else {
92 box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
93 }
94 }
95 }
96}
97
98// Button sizes
99@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
100 padding: $padding-y $padding-x;
101 font-size: $font-size;
102 line-height: $line-height;
103 // Manually declare to provide an override to the browser default
104 @if $enable-rounded {
105 border-radius: $border-radius;
106 } @else {
107 border-radius: 0;
108 }
109}