bootstrap 4.3.0 → 5.0.0.alpha1

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