]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | // scss-lint:disable QualifyingElement |
2 | ||
3 | // | |
4 | // Base styles | |
5 | // | |
6 | ||
7 | .btn { | |
8 | display: inline-block; | |
9 | font-weight: $btn-font-weight; | |
10 | line-height: $btn-line-height; | |
11 | text-align: center; | |
12 | white-space: nowrap; | |
13 | vertical-align: middle; | |
14 | user-select: none; | |
15 | border: $input-btn-border-width solid transparent; | |
16 | @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius); | |
17 | @include transition($btn-transition); | |
18 | ||
19 | // Share hover and focus styles | |
20 | @include hover-focus { | |
21 | text-decoration: none; | |
22 | } | |
23 | &:focus, | |
24 | &.focus { | |
25 | outline: 0; | |
26 | box-shadow: $btn-focus-box-shadow; | |
27 | } | |
28 | ||
29 | // Disabled comes first so active can properly restyle | |
30 | &.disabled, | |
31 | &:disabled { | |
32 | cursor: $cursor-disabled; | |
33 | opacity: .65; | |
34 | @include box-shadow(none); | |
35 | } | |
36 | ||
37 | &:active, | |
38 | &.active { | |
39 | background-image: none; | |
40 | @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); | |
41 | } | |
42 | } | |
43 | ||
44 | // Future-proof disabling of clicks on `<a>` elements | |
45 | a.btn.disabled, | |
46 | fieldset[disabled] a.btn { | |
47 | pointer-events: none; | |
48 | } | |
49 | ||
50 | ||
51 | // | |
52 | // Alternate buttons | |
53 | // | |
54 | ||
55 | .btn-primary { | |
56 | @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); | |
57 | } | |
58 | .btn-secondary { | |
59 | @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border); | |
60 | } | |
61 | .btn-info { | |
62 | @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border); | |
63 | } | |
64 | .btn-success { | |
65 | @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border); | |
66 | } | |
67 | .btn-warning { | |
68 | @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); | |
69 | } | |
70 | .btn-danger { | |
71 | @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); | |
72 | } | |
73 | ||
74 | // Remove all backgrounds | |
75 | .btn-outline-primary { | |
76 | @include button-outline-variant($btn-primary-bg); | |
77 | } | |
78 | .btn-outline-secondary { | |
79 | @include button-outline-variant($btn-secondary-border); | |
80 | } | |
81 | .btn-outline-info { | |
82 | @include button-outline-variant($btn-info-bg); | |
83 | } | |
84 | .btn-outline-success { | |
85 | @include button-outline-variant($btn-success-bg); | |
86 | } | |
87 | .btn-outline-warning { | |
88 | @include button-outline-variant($btn-warning-bg); | |
89 | } | |
90 | .btn-outline-danger { | |
91 | @include button-outline-variant($btn-danger-bg); | |
92 | } | |
93 | ||
94 | ||
95 | // | |
96 | // Link buttons | |
97 | // | |
98 | ||
99 | // Make a button look and behave like a link | |
100 | .btn-link { | |
101 | font-weight: $font-weight-normal; | |
102 | color: $link-color; | |
103 | border-radius: 0; | |
104 | ||
105 | &, | |
106 | &:active, | |
107 | &.active, | |
108 | &:disabled { | |
109 | background-color: transparent; | |
110 | @include box-shadow(none); | |
111 | } | |
112 | &, | |
113 | &:focus, | |
114 | &:active { | |
115 | border-color: transparent; | |
116 | } | |
117 | @include hover { | |
118 | border-color: transparent; | |
119 | } | |
120 | @include hover-focus { | |
121 | color: $link-hover-color; | |
122 | text-decoration: $link-hover-decoration; | |
123 | background-color: transparent; | |
124 | } | |
125 | &:disabled { | |
126 | color: $btn-link-disabled-color; | |
127 | ||
128 | @include hover-focus { | |
129 | text-decoration: none; | |
130 | } | |
131 | } | |
132 | } | |
133 | ||
134 | ||
135 | // | |
136 | // Button Sizes | |
137 | // | |
138 | ||
139 | .btn-lg { | |
140 | // line-height: ensure even-numbered height of button next to large input | |
141 | @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg); | |
142 | } | |
143 | .btn-sm { | |
144 | // line-height: ensure proper height of button next to small input | |
145 | @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm); | |
146 | } | |
147 | ||
148 | ||
149 | // | |
150 | // Block button | |
151 | // | |
152 | ||
153 | .btn-block { | |
154 | display: block; | |
155 | width: 100%; | |
156 | } | |
157 | ||
158 | // Vertically space out multiple block buttons | |
159 | .btn-block + .btn-block { | |
160 | margin-top: $btn-block-spacing-y; | |
161 | } | |
162 | ||
163 | // Specificity overrides | |
164 | input[type="submit"], | |
165 | input[type="reset"], | |
166 | input[type="button"] { | |
167 | &.btn-block { | |
168 | width: 100%; | |
169 | } | |
170 | } |