]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | // scss-lint:disable PropertyCount |
2 | ||
3 | // Embedded icons from Open Iconic. | |
4 | // Released under MIT and copyright 2014 Waybury. | |
5 | // https://useiconic.com/open | |
6 | ||
7 | ||
8 | // Checkboxes and radios | |
9 | // | |
10 | // Base class takes care of all the key behavioral aspects. | |
11 | ||
12 | .custom-control { | |
13 | position: relative; | |
14 | display: inline-flex; | |
15 | min-height: (1rem * $line-height-base); | |
16 | padding-left: $custom-control-gutter; | |
17 | margin-right: $custom-control-spacer-x; | |
18 | cursor: pointer; | |
19 | } | |
20 | ||
21 | .custom-control-input { | |
22 | position: absolute; | |
23 | z-index: -1; // Put the input behind the label so it doesn't overlay text | |
24 | opacity: 0; | |
25 | ||
26 | &:checked ~ .custom-control-indicator { | |
27 | color: $custom-control-checked-indicator-color; | |
28 | background-color: $custom-control-checked-indicator-bg; | |
29 | @include box-shadow($custom-control-checked-indicator-box-shadow); | |
30 | } | |
31 | ||
32 | &:focus ~ .custom-control-indicator { | |
33 | // the mixin is not used here to make sure there is feedback | |
34 | box-shadow: $custom-control-focus-indicator-box-shadow; | |
35 | } | |
36 | ||
37 | &:active ~ .custom-control-indicator { | |
38 | color: $custom-control-active-indicator-color; | |
39 | background-color: $custom-control-active-indicator-bg; | |
40 | @include box-shadow($custom-control-active-indicator-box-shadow); | |
41 | } | |
42 | ||
43 | &:disabled { | |
44 | ~ .custom-control-indicator { | |
45 | cursor: $custom-control-disabled-cursor; | |
46 | background-color: $custom-control-disabled-indicator-bg; | |
47 | } | |
48 | ||
49 | ~ .custom-control-description { | |
50 | color: $custom-control-disabled-description-color; | |
51 | cursor: $custom-control-disabled-cursor; | |
52 | } | |
53 | } | |
54 | } | |
55 | ||
56 | // Custom indicator | |
57 | // | |
58 | // Generates a shadow element to create our makeshift checkbox/radio background. | |
59 | ||
60 | .custom-control-indicator { | |
61 | position: absolute; | |
62 | top: (($line-height-base - $custom-control-indicator-size) / 2); | |
63 | left: 0; | |
64 | display: block; | |
65 | width: $custom-control-indicator-size; | |
66 | height: $custom-control-indicator-size; | |
67 | pointer-events: none; | |
68 | user-select: none; | |
69 | background-color: $custom-control-indicator-bg; | |
70 | background-repeat: no-repeat; | |
71 | background-position: center center; | |
72 | background-size: $custom-control-indicator-bg-size; | |
73 | @include box-shadow($custom-control-indicator-box-shadow); | |
74 | } | |
75 | ||
76 | // Checkboxes | |
77 | // | |
78 | // Tweak just a few things for checkboxes. | |
79 | ||
80 | .custom-checkbox { | |
81 | .custom-control-indicator { | |
82 | @include border-radius($custom-checkbox-radius); | |
83 | } | |
84 | ||
85 | .custom-control-input:checked ~ .custom-control-indicator { | |
86 | background-image: $custom-checkbox-checked-icon; | |
87 | } | |
88 | ||
89 | .custom-control-input:indeterminate ~ .custom-control-indicator { | |
90 | background-color: $custom-checkbox-indeterminate-bg; | |
91 | background-image: $custom-checkbox-indeterminate-icon; | |
92 | @include box-shadow($custom-checkbox-indeterminate-box-shadow); | |
93 | } | |
94 | } | |
95 | ||
96 | // Radios | |
97 | // | |
98 | // Tweak just a few things for radios. | |
99 | ||
100 | .custom-radio { | |
101 | .custom-control-indicator { | |
102 | border-radius: $custom-radio-radius; | |
103 | } | |
104 | ||
105 | .custom-control-input:checked ~ .custom-control-indicator { | |
106 | background-image: $custom-radio-checked-icon; | |
107 | } | |
108 | } | |
109 | ||
110 | ||
111 | // Layout options | |
112 | // | |
113 | // By default radios and checkboxes are `inline-block` with no additional spacing | |
114 | // set. Use these optional classes to tweak the layout. | |
115 | ||
116 | .custom-controls-stacked { | |
117 | display: flex; | |
118 | flex-direction: column; | |
119 | ||
120 | .custom-control { | |
121 | margin-bottom: $custom-control-spacer-y; | |
122 | ||
123 | + .custom-control { | |
124 | margin-left: 0; | |
125 | } | |
126 | } | |
127 | } | |
128 | ||
129 | ||
130 | // Select | |
131 | // | |
132 | // Replaces the browser default select with a custom one, mostly pulled from | |
133 | // http://primercss.io. | |
134 | // | |
135 | ||
136 | .custom-select { | |
137 | display: inline-block; | |
138 | max-width: 100%; | |
139 | $select-border-width: ($border-width * 2); | |
140 | height: calc(#{$input-height} + #{$select-border-width}); | |
141 | padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; | |
142 | line-height: $custom-select-line-height; | |
143 | color: $custom-select-color; | |
144 | vertical-align: middle; | |
145 | background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; | |
146 | background-size: $custom-select-bg-size; | |
147 | border: $custom-select-border-width solid $custom-select-border-color; | |
148 | @include border-radius($custom-select-border-radius); | |
149 | // Use vendor prefixes as `appearance` isn't part of the CSS spec. | |
150 | -moz-appearance: none; | |
151 | -webkit-appearance: none; | |
152 | ||
153 | &:focus { | |
154 | border-color: $custom-select-focus-border-color; | |
155 | outline: none; | |
156 | @include box-shadow($custom-select-focus-box-shadow); | |
157 | ||
158 | &::-ms-value { | |
159 | // For visual consistency with other platforms/browsers, | |
160 | // supress the default white text on blue background highlight given to | |
161 | // the selected option text when the (still closed) <select> receives focus | |
162 | // in IE and (under certain conditions) Edge. | |
163 | // See https://github.com/twbs/bootstrap/issues/19398. | |
164 | color: $input-color; | |
165 | background-color: $input-bg; | |
166 | } | |
167 | } | |
168 | ||
169 | &:disabled { | |
170 | color: $custom-select-disabled-color; | |
171 | cursor: $cursor-disabled; | |
172 | background-color: $custom-select-disabled-bg; | |
173 | } | |
174 | ||
175 | // Hides the default caret in IE11 | |
176 | &::-ms-expand { | |
177 | opacity: 0; | |
178 | } | |
179 | } | |
180 | ||
181 | .custom-select-sm { | |
182 | padding-top: $custom-select-padding-y; | |
183 | padding-bottom: $custom-select-padding-y; | |
184 | font-size: $custom-select-sm-font-size; | |
185 | ||
186 | // &:not([multiple]) { | |
187 | // height: 26px; | |
188 | // min-height: 26px; | |
189 | // } | |
190 | } | |
191 | ||
192 | ||
193 | // File | |
194 | // | |
195 | // Custom file input. | |
196 | ||
197 | .custom-file { | |
198 | position: relative; | |
199 | display: inline-block; | |
200 | max-width: 100%; | |
201 | height: $custom-file-height; | |
202 | margin-bottom: 0; | |
203 | cursor: pointer; | |
204 | } | |
205 | ||
206 | .custom-file-input { | |
207 | min-width: $custom-file-width; | |
208 | max-width: 100%; | |
209 | height: $custom-file-height; | |
210 | margin: 0; | |
211 | filter: alpha(opacity = 0); | |
212 | opacity: 0; | |
213 | ||
214 | &:focus ~ .custom-file-control { | |
215 | @include box-shadow($custom-file-focus-box-shadow); | |
216 | } | |
217 | } | |
218 | ||
219 | .custom-file-control { | |
220 | position: absolute; | |
221 | top: 0; | |
222 | right: 0; | |
223 | left: 0; | |
224 | z-index: 5; | |
225 | height: $custom-file-height; | |
226 | padding: $custom-file-padding-x $custom-file-padding-y; | |
227 | line-height: $custom-file-line-height; | |
228 | color: $custom-file-color; | |
229 | pointer-events: none; | |
230 | user-select: none; | |
231 | background-color: $custom-file-bg; | |
232 | border: $custom-file-border-width solid $custom-file-border-color; | |
233 | @include border-radius($custom-file-border-radius); | |
234 | @include box-shadow($custom-file-box-shadow); | |
235 | ||
236 | @each $lang, $text in map-get($custom-file-text, placeholder) { | |
237 | &:lang(#{$lang})::after { | |
238 | content: $text; | |
239 | } | |
240 | } | |
241 | ||
242 | &::before { | |
243 | position: absolute; | |
244 | top: -$custom-file-border-width; | |
245 | right: -$custom-file-border-width; | |
246 | bottom: -$custom-file-border-width; | |
247 | z-index: 6; | |
248 | display: block; | |
249 | height: $custom-file-height; | |
250 | padding: $custom-file-padding-x $custom-file-padding-y; | |
251 | line-height: $custom-file-line-height; | |
252 | color: $custom-file-button-color; | |
253 | background-color: $custom-file-button-bg; | |
254 | border: $custom-file-border-width solid $custom-file-border-color; | |
255 | @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); | |
256 | } | |
257 | ||
258 | @each $lang, $text in map-get($custom-file-text, button-label) { | |
259 | &:lang(#{$lang})::before { | |
260 | content: $text; | |
261 | } | |
262 | } | |
263 | } |