bootstrap 4.6.2 → 5.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (149) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +2 -1
  3. data/README.md +7 -4
  4. data/assets/javascripts/bootstrap/alert.js +192 -115
  5. data/assets/javascripts/bootstrap/base-component.js +63 -0
  6. data/assets/javascripts/bootstrap/button.js +96 -179
  7. data/assets/javascripts/bootstrap/carousel.js +472 -359
  8. data/assets/javascripts/bootstrap/collapse.js +379 -225
  9. data/assets/javascripts/bootstrap/dom/data.js +68 -0
  10. data/assets/javascripts/bootstrap/dom/event-handler.js +322 -0
  11. data/assets/javascripts/bootstrap/dom/manipulator.js +88 -0
  12. data/assets/javascripts/bootstrap/dom/selector-engine.js +85 -0
  13. data/assets/javascripts/bootstrap/dropdown.js +472 -355
  14. data/assets/javascripts/bootstrap/modal.js +612 -438
  15. data/assets/javascripts/bootstrap/offcanvas.js +671 -0
  16. data/assets/javascripts/bootstrap/popover.js +138 -167
  17. data/assets/javascripts/bootstrap/scrollspy.js +250 -192
  18. data/assets/javascripts/bootstrap/tab.js +241 -144
  19. data/assets/javascripts/bootstrap/toast.js +223 -157
  20. data/assets/javascripts/bootstrap/tooltip.js +651 -487
  21. data/assets/javascripts/bootstrap-global-this-define.js +6 -0
  22. data/assets/javascripts/bootstrap-global-this-undefine.js +2 -0
  23. data/assets/javascripts/bootstrap-sprockets.js +8 -1
  24. data/assets/javascripts/bootstrap.js +3277 -2590
  25. data/assets/javascripts/bootstrap.min.js +3 -3
  26. data/assets/stylesheets/_bootstrap-grid.scss +53 -18
  27. data/assets/stylesheets/_bootstrap-reboot.scss +6 -3
  28. data/assets/stylesheets/_bootstrap.scss +18 -10
  29. data/assets/stylesheets/bootstrap/_accordion.scss +118 -0
  30. data/assets/stylesheets/bootstrap/_alert.scss +15 -10
  31. data/assets/stylesheets/bootstrap/_badge.scss +2 -27
  32. data/assets/stylesheets/bootstrap/_breadcrumb.scss +3 -17
  33. data/assets/stylesheets/bootstrap/_button-group.scss +21 -45
  34. data/assets/stylesheets/bootstrap/_buttons.scss +29 -60
  35. data/assets/stylesheets/bootstrap/_card.scss +20 -91
  36. data/assets/stylesheets/bootstrap/_carousel.scss +64 -35
  37. data/assets/stylesheets/bootstrap/_close.scss +30 -30
  38. data/assets/stylesheets/bootstrap/_containers.scss +41 -0
  39. data/assets/stylesheets/bootstrap/_dropdown.scss +84 -36
  40. data/assets/stylesheets/bootstrap/_forms.scss +9 -347
  41. data/assets/stylesheets/bootstrap/_functions.scss +84 -69
  42. data/assets/stylesheets/bootstrap/_grid.scss +3 -54
  43. data/assets/stylesheets/bootstrap/_helpers.scss +7 -0
  44. data/assets/stylesheets/bootstrap/_images.scss +1 -1
  45. data/assets/stylesheets/bootstrap/_list-group.scss +28 -8
  46. data/assets/stylesheets/bootstrap/_mixins.scss +8 -13
  47. data/assets/stylesheets/bootstrap/_modal.scss +45 -57
  48. data/assets/stylesheets/bootstrap/_nav.scss +20 -6
  49. data/assets/stylesheets/bootstrap/_navbar.scss +45 -71
  50. data/assets/stylesheets/bootstrap/_offcanvas.scss +77 -0
  51. data/assets/stylesheets/bootstrap/_pagination.scss +10 -20
  52. data/assets/stylesheets/bootstrap/_popover.scss +24 -36
  53. data/assets/stylesheets/bootstrap/_progress.scss +5 -4
  54. data/assets/stylesheets/bootstrap/_reboot.scss +316 -179
  55. data/assets/stylesheets/bootstrap/_root.scss +5 -8
  56. data/assets/stylesheets/bootstrap/_spinners.scss +11 -7
  57. data/assets/stylesheets/bootstrap/_tables.scss +79 -114
  58. data/assets/stylesheets/bootstrap/_toasts.scss +20 -15
  59. data/assets/stylesheets/bootstrap/_tooltip.scss +21 -21
  60. data/assets/stylesheets/bootstrap/_transitions.scss +2 -7
  61. data/assets/stylesheets/bootstrap/_type.scss +38 -59
  62. data/assets/stylesheets/bootstrap/_utilities.scss +594 -18
  63. data/assets/stylesheets/bootstrap/_variables.scss +800 -485
  64. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +18 -0
  65. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +61 -0
  66. data/assets/stylesheets/bootstrap/forms/_form-check.scss +152 -0
  67. data/assets/stylesheets/bootstrap/forms/_form-control.scss +219 -0
  68. data/assets/stylesheets/bootstrap/forms/_form-range.scss +91 -0
  69. data/assets/stylesheets/bootstrap/forms/_form-select.scss +67 -0
  70. data/assets/stylesheets/bootstrap/forms/_form-text.scss +11 -0
  71. data/assets/stylesheets/bootstrap/forms/_input-group.scss +121 -0
  72. data/assets/stylesheets/bootstrap/forms/_labels.scss +36 -0
  73. data/assets/stylesheets/bootstrap/forms/_validation.scss +12 -0
  74. data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +12 -0
  75. data/assets/stylesheets/bootstrap/helpers/_position.scss +30 -0
  76. data/assets/stylesheets/bootstrap/helpers/_ratio.scss +26 -0
  77. data/assets/stylesheets/bootstrap/helpers/_stretched-link.scss +15 -0
  78. data/assets/stylesheets/bootstrap/helpers/_text-truncation.scss +7 -0
  79. data/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss +8 -0
  80. data/assets/stylesheets/bootstrap/mixins/_alert.scss +3 -5
  81. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +10 -8
  82. data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +7 -9
  83. data/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +14 -10
  84. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +71 -48
  85. data/assets/stylesheets/bootstrap/mixins/_caret.scss +10 -8
  86. data/assets/stylesheets/bootstrap/mixins/_clearfix.scss +2 -0
  87. data/assets/stylesheets/bootstrap/mixins/_color-scheme.scss +7 -0
  88. data/assets/stylesheets/bootstrap/mixins/_container.scss +9 -0
  89. data/assets/stylesheets/bootstrap/mixins/_forms.scss +39 -97
  90. data/assets/stylesheets/bootstrap/mixins/_gradients.scss +13 -11
  91. data/assets/stylesheets/bootstrap/mixins/_grid.scss +90 -34
  92. data/assets/stylesheets/bootstrap/mixins/_image.scss +1 -21
  93. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +5 -2
  94. data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
  95. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +17 -8
  96. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +3 -3
  97. data/assets/stylesheets/bootstrap/mixins/_table-variants.scss +21 -0
  98. data/assets/stylesheets/bootstrap/mixins/_transition.scss +1 -1
  99. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +68 -0
  100. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +29 -0
  101. data/assets/stylesheets/bootstrap/utilities/_api.scss +47 -0
  102. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +214 -130
  103. data/bootstrap.gemspec +1 -3
  104. data/lib/bootstrap/version.rb +2 -2
  105. data/tasks/updater/js.rb +19 -16
  106. data/test/dummy_rails/app/assets/javascripts/application.js +4 -3
  107. data/test/dummy_rails/app/views/layouts/application.html.erb +3 -1
  108. data/test/dummy_rails/app/views/pages/root.html +89 -0
  109. data/test/dummy_rails/config/application.rb +0 -3
  110. data/test/gemfiles/rails_6_1.gemfile +7 -0
  111. metadata +45 -73
  112. data/assets/javascripts/bootstrap/util.js +0 -189
  113. data/assets/stylesheets/bootstrap/_code.scss +0 -48
  114. data/assets/stylesheets/bootstrap/_custom-forms.scss +0 -526
  115. data/assets/stylesheets/bootstrap/_input-group.scss +0 -211
  116. data/assets/stylesheets/bootstrap/_jumbotron.scss +0 -17
  117. data/assets/stylesheets/bootstrap/_media.scss +0 -8
  118. data/assets/stylesheets/bootstrap/_print.scss +0 -132
  119. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -23
  120. data/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -17
  121. data/assets/stylesheets/bootstrap/mixins/_float.scss +0 -14
  122. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -80
  123. data/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -37
  124. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -11
  125. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -34
  126. data/assets/stylesheets/bootstrap/mixins/_size.scss +0 -7
  127. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -39
  128. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -17
  129. data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -11
  130. data/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -8
  131. data/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  132. data/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  133. data/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -75
  134. data/assets/stylesheets/bootstrap/utilities/_display.scss +0 -26
  135. data/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -39
  136. data/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -51
  137. data/assets/stylesheets/bootstrap/utilities/_float.scss +0 -11
  138. data/assets/stylesheets/bootstrap/utilities/_interactions.scss +0 -5
  139. data/assets/stylesheets/bootstrap/utilities/_overflow.scss +0 -5
  140. data/assets/stylesheets/bootstrap/utilities/_position.scss +0 -32
  141. data/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  142. data/assets/stylesheets/bootstrap/utilities/_shadows.scss +0 -6
  143. data/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -20
  144. data/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -73
  145. data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss +0 -19
  146. data/assets/stylesheets/bootstrap/utilities/_text.scss +0 -72
  147. data/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -13
  148. data/test/dummy_rails/app/views/pages/root.html.slim +0 -58
  149. /data/assets/stylesheets/bootstrap/{utilities → helpers}/_clearfix.scss +0 -0
@@ -1,48 +0,0 @@
1
- // Inline code
2
- code {
3
- @include font-size($code-font-size);
4
- color: $code-color;
5
- word-wrap: break-word;
6
-
7
- // Streamline the style when inside anchors to avoid broken underline and more
8
- a > & {
9
- color: inherit;
10
- }
11
- }
12
-
13
- // User input typically entered via keyboard
14
- kbd {
15
- padding: $kbd-padding-y $kbd-padding-x;
16
- @include font-size($kbd-font-size);
17
- color: $kbd-color;
18
- background-color: $kbd-bg;
19
- @include border-radius($border-radius-sm);
20
- @include box-shadow($kbd-box-shadow);
21
-
22
- kbd {
23
- padding: 0;
24
- @include font-size(100%);
25
- font-weight: $nested-kbd-font-weight;
26
- @include box-shadow(none);
27
- }
28
- }
29
-
30
- // Blocks of code
31
- pre {
32
- display: block;
33
- @include font-size($code-font-size);
34
- color: $pre-color;
35
-
36
- // Account for some code outputs that place code tags in pre tags
37
- code {
38
- @include font-size(inherit);
39
- color: inherit;
40
- word-break: normal;
41
- }
42
- }
43
-
44
- // Enable scrollable blocks of code
45
- .pre-scrollable {
46
- max-height: $pre-scrollable-max-height;
47
- overflow-y: scroll;
48
- }
@@ -1,526 +0,0 @@
1
- // Embedded icons from Open Iconic.
2
- // Released under MIT and copyright 2014 Waybury.
3
- // https://useiconic.com/open
4
-
5
-
6
- // Checkboxes and radios
7
- //
8
- // Base class takes care of all the key behavioral aspects.
9
-
10
- .custom-control {
11
- position: relative;
12
- z-index: 1;
13
- display: block;
14
- min-height: $font-size-base * $line-height-base;
15
- padding-left: $custom-control-gutter + $custom-control-indicator-size;
16
- print-color-adjust: exact; // Keep themed appearance for print
17
- }
18
-
19
- .custom-control-inline {
20
- display: inline-flex;
21
- margin-right: $custom-control-spacer-x;
22
- }
23
-
24
- .custom-control-input {
25
- position: absolute;
26
- left: 0;
27
- z-index: -1; // Put the input behind the label so it doesn't overlay text
28
- width: $custom-control-indicator-size;
29
- height: ($font-size-base * $line-height-base + $custom-control-indicator-size) * .5;
30
- opacity: 0;
31
-
32
- &:checked ~ .custom-control-label::before {
33
- color: $custom-control-indicator-checked-color;
34
- border-color: $custom-control-indicator-checked-border-color;
35
- @include gradient-bg($custom-control-indicator-checked-bg);
36
- @include box-shadow($custom-control-indicator-checked-box-shadow);
37
- }
38
-
39
- &:focus ~ .custom-control-label::before {
40
- // the mixin is not used here to make sure there is feedback
41
- @if $enable-shadows {
42
- box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
43
- } @else {
44
- box-shadow: $custom-control-indicator-focus-box-shadow;
45
- }
46
- }
47
-
48
- &:focus:not(:checked) ~ .custom-control-label::before {
49
- border-color: $custom-control-indicator-focus-border-color;
50
- }
51
-
52
- &:not(:disabled):active ~ .custom-control-label::before {
53
- color: $custom-control-indicator-active-color;
54
- background-color: $custom-control-indicator-active-bg;
55
- border-color: $custom-control-indicator-active-border-color;
56
- @include box-shadow($custom-control-indicator-active-box-shadow);
57
- }
58
-
59
- // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
60
- &[disabled],
61
- &:disabled {
62
- ~ .custom-control-label {
63
- color: $custom-control-label-disabled-color;
64
-
65
- &::before {
66
- background-color: $custom-control-indicator-disabled-bg;
67
- }
68
- }
69
- }
70
- }
71
-
72
- // Custom control indicators
73
- //
74
- // Build the custom controls out of pseudo-elements.
75
-
76
- .custom-control-label {
77
- position: relative;
78
- margin-bottom: 0;
79
- color: $custom-control-label-color;
80
- vertical-align: top;
81
- cursor: $custom-control-cursor;
82
-
83
- // Background-color and (when enabled) gradient
84
- &::before {
85
- position: absolute;
86
- top: ($font-size-base * $line-height-base - $custom-control-indicator-size) * .5;
87
- left: -($custom-control-gutter + $custom-control-indicator-size);
88
- display: block;
89
- width: $custom-control-indicator-size;
90
- height: $custom-control-indicator-size;
91
- pointer-events: none;
92
- content: "";
93
- background-color: $custom-control-indicator-bg;
94
- border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
95
- @include box-shadow($custom-control-indicator-box-shadow);
96
- }
97
-
98
- // Foreground (icon)
99
- &::after {
100
- position: absolute;
101
- top: ($font-size-base * $line-height-base - $custom-control-indicator-size) * .5;
102
- left: -($custom-control-gutter + $custom-control-indicator-size);
103
- display: block;
104
- width: $custom-control-indicator-size;
105
- height: $custom-control-indicator-size;
106
- content: "";
107
- background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
108
- }
109
- }
110
-
111
-
112
- // Checkboxes
113
- //
114
- // Tweak just a few things for checkboxes.
115
-
116
- .custom-checkbox {
117
- .custom-control-label::before {
118
- @include border-radius($custom-checkbox-indicator-border-radius);
119
- }
120
-
121
- .custom-control-input:checked ~ .custom-control-label {
122
- &::after {
123
- background-image: escape-svg($custom-checkbox-indicator-icon-checked);
124
- }
125
- }
126
-
127
- .custom-control-input:indeterminate ~ .custom-control-label {
128
- &::before {
129
- border-color: $custom-checkbox-indicator-indeterminate-border-color;
130
- @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
131
- @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
132
- }
133
- &::after {
134
- background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
135
- }
136
- }
137
-
138
- .custom-control-input:disabled {
139
- &:checked ~ .custom-control-label::before {
140
- @include gradient-bg($custom-control-indicator-checked-disabled-bg);
141
- }
142
- &:indeterminate ~ .custom-control-label::before {
143
- @include gradient-bg($custom-control-indicator-checked-disabled-bg);
144
- }
145
- }
146
- }
147
-
148
- // Radios
149
- //
150
- // Tweak just a few things for radios.
151
-
152
- .custom-radio {
153
- .custom-control-label::before {
154
- // stylelint-disable-next-line property-disallowed-list
155
- border-radius: $custom-radio-indicator-border-radius;
156
- }
157
-
158
- .custom-control-input:checked ~ .custom-control-label {
159
- &::after {
160
- background-image: escape-svg($custom-radio-indicator-icon-checked);
161
- }
162
- }
163
-
164
- .custom-control-input:disabled {
165
- &:checked ~ .custom-control-label::before {
166
- @include gradient-bg($custom-control-indicator-checked-disabled-bg);
167
- }
168
- }
169
- }
170
-
171
-
172
- // switches
173
- //
174
- // Tweak a few things for switches
175
-
176
- .custom-switch {
177
- padding-left: $custom-switch-width + $custom-control-gutter;
178
-
179
- .custom-control-label {
180
- &::before {
181
- left: -($custom-switch-width + $custom-control-gutter);
182
- width: $custom-switch-width;
183
- pointer-events: all;
184
- // stylelint-disable-next-line property-disallowed-list
185
- border-radius: $custom-switch-indicator-border-radius;
186
- }
187
-
188
- &::after {
189
- top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) * .5, $custom-control-indicator-border-width * 2);
190
- left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
191
- width: $custom-switch-indicator-size;
192
- height: $custom-switch-indicator-size;
193
- background-color: $custom-control-indicator-border-color;
194
- // stylelint-disable-next-line property-disallowed-list
195
- border-radius: $custom-switch-indicator-border-radius;
196
- @include transition(transform .15s ease-in-out, $custom-forms-transition);
197
- }
198
- }
199
-
200
- .custom-control-input:checked ~ .custom-control-label {
201
- &::after {
202
- background-color: $custom-control-indicator-bg;
203
- transform: translateX($custom-switch-width - $custom-control-indicator-size);
204
- }
205
- }
206
-
207
- .custom-control-input:disabled {
208
- &:checked ~ .custom-control-label::before {
209
- @include gradient-bg($custom-control-indicator-checked-disabled-bg);
210
- }
211
- }
212
- }
213
-
214
-
215
- // Select
216
- //
217
- // Replaces the browser default select with a custom one, mostly pulled from
218
- // https://primer.github.io/.
219
- //
220
-
221
- .custom-select {
222
- display: inline-block;
223
- width: 100%;
224
- height: $custom-select-height;
225
- padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
226
- font-family: $custom-select-font-family;
227
- @include font-size($custom-select-font-size);
228
- font-weight: $custom-select-font-weight;
229
- line-height: $custom-select-line-height;
230
- color: $custom-select-color;
231
- vertical-align: middle;
232
- background: $custom-select-bg $custom-select-background;
233
- border: $custom-select-border-width solid $custom-select-border-color;
234
- @include border-radius($custom-select-border-radius, 0);
235
- @include box-shadow($custom-select-box-shadow);
236
- appearance: none;
237
-
238
- &:focus {
239
- border-color: $custom-select-focus-border-color;
240
- outline: 0;
241
- @if $enable-shadows {
242
- @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
243
- } @else {
244
- // Avoid using mixin so we can pass custom focus shadow properly
245
- box-shadow: $custom-select-focus-box-shadow;
246
- }
247
-
248
- &::-ms-value {
249
- // For visual consistency with other platforms/browsers,
250
- // suppress the default white text on blue background highlight given to
251
- // the selected option text when the (still closed) <select> receives focus
252
- // in IE and (under certain conditions) Edge.
253
- // See https://github.com/twbs/bootstrap/issues/19398.
254
- color: $input-color;
255
- background-color: $input-bg;
256
- }
257
- }
258
-
259
- &[multiple],
260
- &[size]:not([size="1"]) {
261
- height: auto;
262
- padding-right: $custom-select-padding-x;
263
- background-image: none;
264
- }
265
-
266
- &:disabled {
267
- color: $custom-select-disabled-color;
268
- background-color: $custom-select-disabled-bg;
269
- }
270
-
271
- // Hides the default caret in IE11
272
- &::-ms-expand {
273
- display: none;
274
- }
275
-
276
- // Remove outline from select box in FF
277
- &:-moz-focusring {
278
- color: transparent;
279
- text-shadow: 0 0 0 $custom-select-color;
280
- }
281
- }
282
-
283
- .custom-select-sm {
284
- height: $custom-select-height-sm;
285
- padding-top: $custom-select-padding-y-sm;
286
- padding-bottom: $custom-select-padding-y-sm;
287
- padding-left: $custom-select-padding-x-sm;
288
- @include font-size($custom-select-font-size-sm);
289
- }
290
-
291
- .custom-select-lg {
292
- height: $custom-select-height-lg;
293
- padding-top: $custom-select-padding-y-lg;
294
- padding-bottom: $custom-select-padding-y-lg;
295
- padding-left: $custom-select-padding-x-lg;
296
- @include font-size($custom-select-font-size-lg);
297
- }
298
-
299
-
300
- // File
301
- //
302
- // Custom file input.
303
-
304
- .custom-file {
305
- position: relative;
306
- display: inline-block;
307
- width: 100%;
308
- height: $custom-file-height;
309
- margin-bottom: 0;
310
- }
311
-
312
- .custom-file-input {
313
- position: relative;
314
- z-index: 2;
315
- width: 100%;
316
- height: $custom-file-height;
317
- margin: 0;
318
- overflow: hidden;
319
- opacity: 0;
320
-
321
- &:focus ~ .custom-file-label {
322
- border-color: $custom-file-focus-border-color;
323
- box-shadow: $custom-file-focus-box-shadow;
324
- }
325
-
326
- // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
327
- &[disabled] ~ .custom-file-label,
328
- &:disabled ~ .custom-file-label {
329
- background-color: $custom-file-disabled-bg;
330
- }
331
-
332
- @each $lang, $value in $custom-file-text {
333
- &:lang(#{$lang}) ~ .custom-file-label::after {
334
- content: $value;
335
- }
336
- }
337
-
338
- ~ .custom-file-label[data-browse]::after {
339
- content: attr(data-browse);
340
- }
341
- }
342
-
343
- .custom-file-label {
344
- position: absolute;
345
- top: 0;
346
- right: 0;
347
- left: 0;
348
- z-index: 1;
349
- height: $custom-file-height;
350
- padding: $custom-file-padding-y $custom-file-padding-x;
351
- overflow: hidden;
352
- font-family: $custom-file-font-family;
353
- font-weight: $custom-file-font-weight;
354
- line-height: $custom-file-line-height;
355
- color: $custom-file-color;
356
- background-color: $custom-file-bg;
357
- border: $custom-file-border-width solid $custom-file-border-color;
358
- @include border-radius($custom-file-border-radius);
359
- @include box-shadow($custom-file-box-shadow);
360
-
361
- &::after {
362
- position: absolute;
363
- top: 0;
364
- right: 0;
365
- bottom: 0;
366
- z-index: 3;
367
- display: block;
368
- height: $custom-file-height-inner;
369
- padding: $custom-file-padding-y $custom-file-padding-x;
370
- line-height: $custom-file-line-height;
371
- color: $custom-file-button-color;
372
- content: "Browse";
373
- @include gradient-bg($custom-file-button-bg);
374
- border-left: inherit;
375
- @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
376
- }
377
- }
378
-
379
- // Range
380
- //
381
- // Style range inputs the same across browsers. Vendor-specific rules for pseudo
382
- // elements cannot be mixed. As such, there are no shared styles for focus or
383
- // active states on prefixed selectors.
384
-
385
- .custom-range {
386
- width: 100%;
387
- height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
388
- padding: 0; // Need to reset padding
389
- background-color: transparent;
390
- appearance: none;
391
-
392
- &:focus {
393
- outline: 0;
394
-
395
- // Pseudo-elements must be split across multiple rulesets to have an effect.
396
- // No box-shadow() mixin for focus accessibility.
397
- &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
398
- &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
399
- &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
400
- }
401
-
402
- &::-moz-focus-outer {
403
- border: 0;
404
- }
405
-
406
- &::-webkit-slider-thumb {
407
- width: $custom-range-thumb-width;
408
- height: $custom-range-thumb-height;
409
- margin-top: ($custom-range-track-height - $custom-range-thumb-height) * .5; // Webkit specific
410
- @include gradient-bg($custom-range-thumb-bg);
411
- border: $custom-range-thumb-border;
412
- @include border-radius($custom-range-thumb-border-radius);
413
- @include box-shadow($custom-range-thumb-box-shadow);
414
- @include transition($custom-forms-transition);
415
- appearance: none;
416
-
417
- &:active {
418
- @include gradient-bg($custom-range-thumb-active-bg);
419
- }
420
- }
421
-
422
- &::-webkit-slider-runnable-track {
423
- width: $custom-range-track-width;
424
- height: $custom-range-track-height;
425
- color: transparent; // Why?
426
- cursor: $custom-range-track-cursor;
427
- background-color: $custom-range-track-bg;
428
- border-color: transparent;
429
- @include border-radius($custom-range-track-border-radius);
430
- @include box-shadow($custom-range-track-box-shadow);
431
- }
432
-
433
- &::-moz-range-thumb {
434
- width: $custom-range-thumb-width;
435
- height: $custom-range-thumb-height;
436
- @include gradient-bg($custom-range-thumb-bg);
437
- border: $custom-range-thumb-border;
438
- @include border-radius($custom-range-thumb-border-radius);
439
- @include box-shadow($custom-range-thumb-box-shadow);
440
- @include transition($custom-forms-transition);
441
- appearance: none;
442
-
443
- &:active {
444
- @include gradient-bg($custom-range-thumb-active-bg);
445
- }
446
- }
447
-
448
- &::-moz-range-track {
449
- width: $custom-range-track-width;
450
- height: $custom-range-track-height;
451
- color: transparent;
452
- cursor: $custom-range-track-cursor;
453
- background-color: $custom-range-track-bg;
454
- border-color: transparent; // Firefox specific?
455
- @include border-radius($custom-range-track-border-radius);
456
- @include box-shadow($custom-range-track-box-shadow);
457
- }
458
-
459
- &::-ms-thumb {
460
- width: $custom-range-thumb-width;
461
- height: $custom-range-thumb-height;
462
- margin-top: 0; // Edge specific
463
- margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
464
- margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
465
- @include gradient-bg($custom-range-thumb-bg);
466
- border: $custom-range-thumb-border;
467
- @include border-radius($custom-range-thumb-border-radius);
468
- @include box-shadow($custom-range-thumb-box-shadow);
469
- @include transition($custom-forms-transition);
470
- appearance: none;
471
-
472
- &:active {
473
- @include gradient-bg($custom-range-thumb-active-bg);
474
- }
475
- }
476
-
477
- &::-ms-track {
478
- width: $custom-range-track-width;
479
- height: $custom-range-track-height;
480
- color: transparent;
481
- cursor: $custom-range-track-cursor;
482
- background-color: transparent;
483
- border-color: transparent;
484
- border-width: $custom-range-thumb-height * .5;
485
- @include box-shadow($custom-range-track-box-shadow);
486
- }
487
-
488
- &::-ms-fill-lower {
489
- background-color: $custom-range-track-bg;
490
- @include border-radius($custom-range-track-border-radius);
491
- }
492
-
493
- &::-ms-fill-upper {
494
- margin-right: 15px; // arbitrary?
495
- background-color: $custom-range-track-bg;
496
- @include border-radius($custom-range-track-border-radius);
497
- }
498
-
499
- &:disabled {
500
- &::-webkit-slider-thumb {
501
- background-color: $custom-range-thumb-disabled-bg;
502
- }
503
-
504
- &::-webkit-slider-runnable-track {
505
- cursor: default;
506
- }
507
-
508
- &::-moz-range-thumb {
509
- background-color: $custom-range-thumb-disabled-bg;
510
- }
511
-
512
- &::-moz-range-track {
513
- cursor: default;
514
- }
515
-
516
- &::-ms-thumb {
517
- background-color: $custom-range-thumb-disabled-bg;
518
- }
519
- }
520
- }
521
-
522
- .custom-control-label::before,
523
- .custom-file-label,
524
- .custom-select {
525
- @include transition($custom-forms-transition);
526
- }