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