bootstrap 4.5.3 → 5.2.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (171) hide show
  1. checksums.yaml +4 -4
  2. data/.github/workflows/ci.yml +55 -0
  3. data/README.md +28 -5
  4. data/assets/javascripts/bootstrap/alert.js +54 -133
  5. data/assets/javascripts/bootstrap/base-component.js +99 -0
  6. data/assets/javascripts/bootstrap/button.js +44 -183
  7. data/assets/javascripts/bootstrap/carousel.js +308 -450
  8. data/assets/javascripts/bootstrap/collapse.js +180 -243
  9. data/assets/javascripts/bootstrap/dom/data.js +66 -0
  10. data/assets/javascripts/bootstrap/dom/event-handler.js +283 -0
  11. data/assets/javascripts/bootstrap/dom/manipulator.js +84 -0
  12. data/assets/javascripts/bootstrap/dom/selector-engine.js +85 -0
  13. data/assets/javascripts/bootstrap/dropdown.js +320 -387
  14. data/assets/javascripts/bootstrap/modal.js +238 -478
  15. data/assets/javascripts/bootstrap/offcanvas.js +297 -0
  16. data/assets/javascripts/bootstrap/popover.js +58 -163
  17. data/assets/javascripts/bootstrap/scrollspy.js +223 -228
  18. data/assets/javascripts/bootstrap/tab.js +251 -166
  19. data/assets/javascripts/bootstrap/toast.js +147 -149
  20. data/assets/javascripts/bootstrap/tooltip.js +434 -646
  21. data/assets/javascripts/bootstrap/util/backdrop.js +165 -0
  22. data/assets/javascripts/bootstrap/util/component-functions.js +46 -0
  23. data/assets/javascripts/bootstrap/util/config.js +79 -0
  24. data/assets/javascripts/bootstrap/util/focustrap.js +129 -0
  25. data/assets/javascripts/bootstrap/util/index.js +350 -0
  26. data/assets/javascripts/bootstrap/util/sanitizer.js +122 -0
  27. data/assets/javascripts/bootstrap/util/scrollbar.js +138 -0
  28. data/assets/javascripts/bootstrap/util/swipe.js +155 -0
  29. data/assets/javascripts/bootstrap/util/template-factory.js +177 -0
  30. data/assets/javascripts/bootstrap-global-this-define.js +6 -0
  31. data/assets/javascripts/bootstrap-global-this-undefine.js +2 -0
  32. data/assets/javascripts/bootstrap-sprockets.js +24 -8
  33. data/assets/javascripts/bootstrap.js +4037 -3206
  34. data/assets/javascripts/bootstrap.min.js +3 -3
  35. data/assets/stylesheets/_bootstrap-grid.scss +56 -21
  36. data/assets/stylesheets/_bootstrap-reboot.scss +4 -7
  37. data/assets/stylesheets/_bootstrap.scss +20 -13
  38. data/assets/stylesheets/bootstrap/_accordion.scss +149 -0
  39. data/assets/stylesheets/bootstrap/_alert.scss +33 -14
  40. data/assets/stylesheets/bootstrap/_badge.scss +15 -31
  41. data/assets/stylesheets/bootstrap/_breadcrumb.scss +23 -27
  42. data/assets/stylesheets/bootstrap/_button-group.scss +25 -46
  43. data/assets/stylesheets/bootstrap/_buttons.scss +136 -71
  44. data/assets/stylesheets/bootstrap/_card.scss +61 -113
  45. data/assets/stylesheets/bootstrap/_carousel.scss +64 -35
  46. data/assets/stylesheets/bootstrap/_close.scss +30 -30
  47. data/assets/stylesheets/bootstrap/_containers.scss +41 -0
  48. data/assets/stylesheets/bootstrap/_dropdown.scss +128 -71
  49. data/assets/stylesheets/bootstrap/_forms.scss +9 -347
  50. data/assets/stylesheets/bootstrap/_functions.scss +181 -23
  51. data/assets/stylesheets/bootstrap/_grid.scss +13 -53
  52. data/assets/stylesheets/bootstrap/_helpers.scss +10 -0
  53. data/assets/stylesheets/bootstrap/_images.scss +1 -1
  54. data/assets/stylesheets/bootstrap/_list-group.scss +72 -34
  55. data/assets/stylesheets/bootstrap/_maps.scss +54 -0
  56. data/assets/stylesheets/bootstrap/_mixins.scss +9 -13
  57. data/assets/stylesheets/bootstrap/_modal.scss +107 -110
  58. data/assets/stylesheets/bootstrap/_nav.scss +72 -23
  59. data/assets/stylesheets/bootstrap/_navbar.scss +127 -173
  60. data/assets/stylesheets/bootstrap/_offcanvas.scss +144 -0
  61. data/assets/stylesheets/bootstrap/_pagination.scss +72 -37
  62. data/assets/stylesheets/bootstrap/_placeholders.scss +51 -0
  63. data/assets/stylesheets/bootstrap/_popover.scss +99 -73
  64. data/assets/stylesheets/bootstrap/_progress.scss +26 -14
  65. data/assets/stylesheets/bootstrap/_reboot.scss +326 -200
  66. data/assets/stylesheets/bootstrap/_root.scss +62 -9
  67. data/assets/stylesheets/bootstrap/_spinners.scss +51 -22
  68. data/assets/stylesheets/bootstrap/_tables.scss +94 -115
  69. data/assets/stylesheets/bootstrap/_toasts.scss +54 -27
  70. data/assets/stylesheets/bootstrap/_tooltip.scss +68 -63
  71. data/assets/stylesheets/bootstrap/_transitions.scss +8 -1
  72. data/assets/stylesheets/bootstrap/_type.scss +40 -59
  73. data/assets/stylesheets/bootstrap/_utilities.scss +647 -18
  74. data/assets/stylesheets/bootstrap/_variables.scss +1018 -526
  75. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +18 -0
  76. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +75 -0
  77. data/assets/stylesheets/bootstrap/forms/_form-check.scss +175 -0
  78. data/assets/stylesheets/bootstrap/forms/_form-control.scss +194 -0
  79. data/assets/stylesheets/bootstrap/forms/_form-range.scss +91 -0
  80. data/assets/stylesheets/bootstrap/forms/_form-select.scss +71 -0
  81. data/assets/stylesheets/bootstrap/forms/_form-text.scss +11 -0
  82. data/assets/stylesheets/bootstrap/forms/_input-group.scss +132 -0
  83. data/assets/stylesheets/bootstrap/forms/_labels.scss +36 -0
  84. data/assets/stylesheets/bootstrap/forms/_validation.scss +12 -0
  85. data/assets/stylesheets/bootstrap/helpers/_color-bg.scss +10 -0
  86. data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +12 -0
  87. data/assets/stylesheets/bootstrap/helpers/_position.scss +36 -0
  88. data/assets/stylesheets/bootstrap/helpers/_ratio.scss +26 -0
  89. data/assets/stylesheets/bootstrap/helpers/_stacks.scss +15 -0
  90. data/assets/stylesheets/bootstrap/helpers/_stretched-link.scss +15 -0
  91. data/assets/stylesheets/bootstrap/helpers/_text-truncation.scss +7 -0
  92. data/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss +8 -0
  93. data/assets/stylesheets/bootstrap/helpers/_vr.scss +8 -0
  94. data/assets/stylesheets/bootstrap/mixins/_alert.scss +8 -6
  95. data/assets/stylesheets/bootstrap/mixins/_backdrop.scss +14 -0
  96. data/assets/stylesheets/bootstrap/mixins/_banner.scss +9 -0
  97. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +10 -8
  98. data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +7 -9
  99. data/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +20 -16
  100. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +60 -100
  101. data/assets/stylesheets/bootstrap/mixins/_caret.scss +10 -8
  102. data/assets/stylesheets/bootstrap/mixins/_clearfix.scss +2 -0
  103. data/assets/stylesheets/bootstrap/mixins/_color-scheme.scss +7 -0
  104. data/assets/stylesheets/bootstrap/mixins/_container.scss +11 -0
  105. data/assets/stylesheets/bootstrap/mixins/_forms.scss +48 -74
  106. data/assets/stylesheets/bootstrap/mixins/_gradients.scss +13 -11
  107. data/assets/stylesheets/bootstrap/mixins/_grid.scss +119 -37
  108. data/assets/stylesheets/bootstrap/mixins/_image.scss +1 -21
  109. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +5 -2
  110. data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
  111. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +7 -19
  112. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +3 -3
  113. data/assets/stylesheets/bootstrap/mixins/_table-variants.scss +24 -0
  114. data/assets/stylesheets/bootstrap/mixins/_transition.scss +1 -1
  115. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +97 -0
  116. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +29 -0
  117. data/assets/stylesheets/bootstrap/utilities/_api.scss +47 -0
  118. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +278 -128
  119. data/bootstrap.gemspec +3 -5
  120. data/lib/bootstrap/version.rb +2 -2
  121. data/tasks/updater/js.rb +31 -7
  122. data/tasks/updater/network.rb +9 -3
  123. data/tasks/updater.rb +2 -2
  124. data/test/dummy_rails/app/assets/javascripts/application.js +4 -3
  125. data/test/dummy_rails/app/views/layouts/application.html.erb +3 -1
  126. data/test/dummy_rails/app/views/pages/root.html +89 -0
  127. data/test/dummy_rails/config/application.rb +0 -3
  128. data/test/gemfiles/rails_5_2.gemfile +8 -0
  129. data/test/gemfiles/rails_6_1.gemfile +7 -0
  130. data/test/gemfiles/rails_7_0.gemfile +7 -0
  131. data/test/test_helper.rb +3 -2
  132. metadata +70 -78
  133. data/.travis.yml +0 -31
  134. data/assets/javascripts/bootstrap/util.js +0 -192
  135. data/assets/stylesheets/bootstrap/_code.scss +0 -48
  136. data/assets/stylesheets/bootstrap/_custom-forms.scss +0 -524
  137. data/assets/stylesheets/bootstrap/_input-group.scss +0 -192
  138. data/assets/stylesheets/bootstrap/_jumbotron.scss +0 -17
  139. data/assets/stylesheets/bootstrap/_media.scss +0 -8
  140. data/assets/stylesheets/bootstrap/_print.scss +0 -141
  141. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -23
  142. data/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -17
  143. data/assets/stylesheets/bootstrap/mixins/_float.scss +0 -14
  144. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -80
  145. data/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -37
  146. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -11
  147. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -34
  148. data/assets/stylesheets/bootstrap/mixins/_size.scss +0 -7
  149. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -39
  150. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -17
  151. data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -11
  152. data/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -8
  153. data/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  154. data/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  155. data/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -75
  156. data/assets/stylesheets/bootstrap/utilities/_display.scss +0 -26
  157. data/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -39
  158. data/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -51
  159. data/assets/stylesheets/bootstrap/utilities/_float.scss +0 -11
  160. data/assets/stylesheets/bootstrap/utilities/_interactions.scss +0 -5
  161. data/assets/stylesheets/bootstrap/utilities/_overflow.scss +0 -5
  162. data/assets/stylesheets/bootstrap/utilities/_position.scss +0 -32
  163. data/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  164. data/assets/stylesheets/bootstrap/utilities/_shadows.scss +0 -6
  165. data/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -20
  166. data/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -73
  167. data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss +0 -19
  168. data/assets/stylesheets/bootstrap/utilities/_text.scss +0 -72
  169. data/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -13
  170. data/test/dummy_rails/app/views/pages/root.html.slim +0 -58
  171. /data/assets/stylesheets/bootstrap/{utilities → helpers}/_clearfix.scss +0 -0
@@ -1,524 +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
- 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) / 2;
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) / 2;
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-color solid $custom-control-indicator-border-width;
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) / 2;
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: no-repeat 50% / #{$custom-control-indicator-bg-size};
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) / 2, $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
- opacity: 0;
319
-
320
- &:focus ~ .custom-file-label {
321
- border-color: $custom-file-focus-border-color;
322
- box-shadow: $custom-file-focus-box-shadow;
323
- }
324
-
325
- // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
326
- &[disabled] ~ .custom-file-label,
327
- &:disabled ~ .custom-file-label {
328
- background-color: $custom-file-disabled-bg;
329
- }
330
-
331
- @each $lang, $value in $custom-file-text {
332
- &:lang(#{$lang}) ~ .custom-file-label::after {
333
- content: $value;
334
- }
335
- }
336
-
337
- ~ .custom-file-label[data-browse]::after {
338
- content: attr(data-browse);
339
- }
340
- }
341
-
342
- .custom-file-label {
343
- position: absolute;
344
- top: 0;
345
- right: 0;
346
- left: 0;
347
- z-index: 1;
348
- height: $custom-file-height;
349
- padding: $custom-file-padding-y $custom-file-padding-x;
350
- font-family: $custom-file-font-family;
351
- font-weight: $custom-file-font-weight;
352
- line-height: $custom-file-line-height;
353
- color: $custom-file-color;
354
- background-color: $custom-file-bg;
355
- border: $custom-file-border-width solid $custom-file-border-color;
356
- @include border-radius($custom-file-border-radius);
357
- @include box-shadow($custom-file-box-shadow);
358
-
359
- &::after {
360
- position: absolute;
361
- top: 0;
362
- right: 0;
363
- bottom: 0;
364
- z-index: 3;
365
- display: block;
366
- height: $custom-file-height-inner;
367
- padding: $custom-file-padding-y $custom-file-padding-x;
368
- line-height: $custom-file-line-height;
369
- color: $custom-file-button-color;
370
- content: "Browse";
371
- @include gradient-bg($custom-file-button-bg);
372
- border-left: inherit;
373
- @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
374
- }
375
- }
376
-
377
- // Range
378
- //
379
- // Style range inputs the same across browsers. Vendor-specific rules for pseudo
380
- // elements cannot be mixed. As such, there are no shared styles for focus or
381
- // active states on prefixed selectors.
382
-
383
- .custom-range {
384
- width: 100%;
385
- height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
386
- padding: 0; // Need to reset padding
387
- background-color: transparent;
388
- appearance: none;
389
-
390
- &:focus {
391
- outline: none;
392
-
393
- // Pseudo-elements must be split across multiple rulesets to have an effect.
394
- // No box-shadow() mixin for focus accessibility.
395
- &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
396
- &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
397
- &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
398
- }
399
-
400
- &::-moz-focus-outer {
401
- border: 0;
402
- }
403
-
404
- &::-webkit-slider-thumb {
405
- width: $custom-range-thumb-width;
406
- height: $custom-range-thumb-height;
407
- margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
408
- @include gradient-bg($custom-range-thumb-bg);
409
- border: $custom-range-thumb-border;
410
- @include border-radius($custom-range-thumb-border-radius);
411
- @include box-shadow($custom-range-thumb-box-shadow);
412
- @include transition($custom-forms-transition);
413
- appearance: none;
414
-
415
- &:active {
416
- @include gradient-bg($custom-range-thumb-active-bg);
417
- }
418
- }
419
-
420
- &::-webkit-slider-runnable-track {
421
- width: $custom-range-track-width;
422
- height: $custom-range-track-height;
423
- color: transparent; // Why?
424
- cursor: $custom-range-track-cursor;
425
- background-color: $custom-range-track-bg;
426
- border-color: transparent;
427
- @include border-radius($custom-range-track-border-radius);
428
- @include box-shadow($custom-range-track-box-shadow);
429
- }
430
-
431
- &::-moz-range-thumb {
432
- width: $custom-range-thumb-width;
433
- height: $custom-range-thumb-height;
434
- @include gradient-bg($custom-range-thumb-bg);
435
- border: $custom-range-thumb-border;
436
- @include border-radius($custom-range-thumb-border-radius);
437
- @include box-shadow($custom-range-thumb-box-shadow);
438
- @include transition($custom-forms-transition);
439
- appearance: none;
440
-
441
- &:active {
442
- @include gradient-bg($custom-range-thumb-active-bg);
443
- }
444
- }
445
-
446
- &::-moz-range-track {
447
- width: $custom-range-track-width;
448
- height: $custom-range-track-height;
449
- color: transparent;
450
- cursor: $custom-range-track-cursor;
451
- background-color: $custom-range-track-bg;
452
- border-color: transparent; // Firefox specific?
453
- @include border-radius($custom-range-track-border-radius);
454
- @include box-shadow($custom-range-track-box-shadow);
455
- }
456
-
457
- &::-ms-thumb {
458
- width: $custom-range-thumb-width;
459
- height: $custom-range-thumb-height;
460
- margin-top: 0; // Edge specific
461
- margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
462
- margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
463
- @include gradient-bg($custom-range-thumb-bg);
464
- border: $custom-range-thumb-border;
465
- @include border-radius($custom-range-thumb-border-radius);
466
- @include box-shadow($custom-range-thumb-box-shadow);
467
- @include transition($custom-forms-transition);
468
- appearance: none;
469
-
470
- &:active {
471
- @include gradient-bg($custom-range-thumb-active-bg);
472
- }
473
- }
474
-
475
- &::-ms-track {
476
- width: $custom-range-track-width;
477
- height: $custom-range-track-height;
478
- color: transparent;
479
- cursor: $custom-range-track-cursor;
480
- background-color: transparent;
481
- border-color: transparent;
482
- border-width: $custom-range-thumb-height / 2;
483
- @include box-shadow($custom-range-track-box-shadow);
484
- }
485
-
486
- &::-ms-fill-lower {
487
- background-color: $custom-range-track-bg;
488
- @include border-radius($custom-range-track-border-radius);
489
- }
490
-
491
- &::-ms-fill-upper {
492
- margin-right: 15px; // arbitrary?
493
- background-color: $custom-range-track-bg;
494
- @include border-radius($custom-range-track-border-radius);
495
- }
496
-
497
- &:disabled {
498
- &::-webkit-slider-thumb {
499
- background-color: $custom-range-thumb-disabled-bg;
500
- }
501
-
502
- &::-webkit-slider-runnable-track {
503
- cursor: default;
504
- }
505
-
506
- &::-moz-range-thumb {
507
- background-color: $custom-range-thumb-disabled-bg;
508
- }
509
-
510
- &::-moz-range-track {
511
- cursor: default;
512
- }
513
-
514
- &::-ms-thumb {
515
- background-color: $custom-range-thumb-disabled-bg;
516
- }
517
- }
518
- }
519
-
520
- .custom-control-label::before,
521
- .custom-file-label,
522
- .custom-select {
523
- @include transition($custom-forms-transition);
524
- }
@@ -1,192 +0,0 @@
1
- // stylelint-disable selector-no-qualifying-type
2
-
3
- //
4
- // Base styles
5
- //
6
-
7
- .input-group {
8
- position: relative;
9
- display: flex;
10
- flex-wrap: wrap; // For form validation feedback
11
- align-items: stretch;
12
- width: 100%;
13
-
14
- > .form-control,
15
- > .form-control-plaintext,
16
- > .custom-select,
17
- > .custom-file {
18
- position: relative; // For focus state's z-index
19
- flex: 1 1 auto;
20
- width: 1%;
21
- min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
22
- margin-bottom: 0;
23
-
24
- + .form-control,
25
- + .custom-select,
26
- + .custom-file {
27
- margin-left: -$input-border-width;
28
- }
29
- }
30
-
31
- // Bring the "active" form control to the top of surrounding elements
32
- > .form-control:focus,
33
- > .custom-select:focus,
34
- > .custom-file .custom-file-input:focus ~ .custom-file-label {
35
- z-index: 3;
36
- }
37
-
38
- // Bring the custom file input above the label
39
- > .custom-file .custom-file-input:focus {
40
- z-index: 4;
41
- }
42
-
43
- > .form-control,
44
- > .custom-select {
45
- &:not(:last-child) { @include border-right-radius(0); }
46
- &:not(:first-child) { @include border-left-radius(0); }
47
- }
48
-
49
- // Custom file inputs have more complex markup, thus requiring different
50
- // border-radius overrides.
51
- > .custom-file {
52
- display: flex;
53
- align-items: center;
54
-
55
- &:not(:last-child) .custom-file-label,
56
- &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
57
- &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
58
- }
59
- }
60
-
61
-
62
- // Prepend and append
63
- //
64
- // While it requires one extra layer of HTML for each, dedicated prepend and
65
- // append elements allow us to 1) be less clever, 2) simplify our selectors, and
66
- // 3) support HTML5 form validation.
67
-
68
- .input-group-prepend,
69
- .input-group-append {
70
- display: flex;
71
-
72
- // Ensure buttons are always above inputs for more visually pleasing borders.
73
- // This isn't needed for `.input-group-text` since it shares the same border-color
74
- // as our inputs.
75
- .btn {
76
- position: relative;
77
- z-index: 2;
78
-
79
- &:focus {
80
- z-index: 3;
81
- }
82
- }
83
-
84
- .btn + .btn,
85
- .btn + .input-group-text,
86
- .input-group-text + .input-group-text,
87
- .input-group-text + .btn {
88
- margin-left: -$input-border-width;
89
- }
90
- }
91
-
92
- .input-group-prepend { margin-right: -$input-border-width; }
93
- .input-group-append { margin-left: -$input-border-width; }
94
-
95
-
96
- // Textual addons
97
- //
98
- // Serves as a catch-all element for any text or radio/checkbox input you wish
99
- // to prepend or append to an input.
100
-
101
- .input-group-text {
102
- display: flex;
103
- align-items: center;
104
- padding: $input-padding-y $input-padding-x;
105
- margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
106
- @include font-size($input-font-size); // Match inputs
107
- font-weight: $font-weight-normal;
108
- line-height: $input-line-height;
109
- color: $input-group-addon-color;
110
- text-align: center;
111
- white-space: nowrap;
112
- background-color: $input-group-addon-bg;
113
- border: $input-border-width solid $input-group-addon-border-color;
114
- @include border-radius($input-border-radius);
115
-
116
- // Nuke default margins from checkboxes and radios to vertically center within.
117
- input[type="radio"],
118
- input[type="checkbox"] {
119
- margin-top: 0;
120
- }
121
- }
122
-
123
-
124
- // Sizing
125
- //
126
- // Remix the default form control sizing classes into new ones for easier
127
- // manipulation.
128
-
129
- .input-group-lg > .form-control:not(textarea),
130
- .input-group-lg > .custom-select {
131
- height: $input-height-lg;
132
- }
133
-
134
- .input-group-lg > .form-control,
135
- .input-group-lg > .custom-select,
136
- .input-group-lg > .input-group-prepend > .input-group-text,
137
- .input-group-lg > .input-group-append > .input-group-text,
138
- .input-group-lg > .input-group-prepend > .btn,
139
- .input-group-lg > .input-group-append > .btn {
140
- padding: $input-padding-y-lg $input-padding-x-lg;
141
- @include font-size($input-font-size-lg);
142
- line-height: $input-line-height-lg;
143
- @include border-radius($input-border-radius-lg);
144
- }
145
-
146
- .input-group-sm > .form-control:not(textarea),
147
- .input-group-sm > .custom-select {
148
- height: $input-height-sm;
149
- }
150
-
151
- .input-group-sm > .form-control,
152
- .input-group-sm > .custom-select,
153
- .input-group-sm > .input-group-prepend > .input-group-text,
154
- .input-group-sm > .input-group-append > .input-group-text,
155
- .input-group-sm > .input-group-prepend > .btn,
156
- .input-group-sm > .input-group-append > .btn {
157
- padding: $input-padding-y-sm $input-padding-x-sm;
158
- @include font-size($input-font-size-sm);
159
- line-height: $input-line-height-sm;
160
- @include border-radius($input-border-radius-sm);
161
- }
162
-
163
- .input-group-lg > .custom-select,
164
- .input-group-sm > .custom-select {
165
- padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
166
- }
167
-
168
-
169
- // Prepend and append rounded corners
170
- //
171
- // These rulesets must come after the sizing ones to properly override sm and lg
172
- // border-radius values when extending. They're more specific than we'd like
173
- // with the `.input-group >` part, but without it, we cannot override the sizing.
174
-
175
-
176
- .input-group > .input-group-prepend > .btn,
177
- .input-group > .input-group-prepend > .input-group-text,
178
- .input-group > .input-group-append:not(:last-child) > .btn,
179
- .input-group > .input-group-append:not(:last-child) > .input-group-text,
180
- .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
181
- .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
182
- @include border-right-radius(0);
183
- }
184
-
185
- .input-group > .input-group-append > .btn,
186
- .input-group > .input-group-append > .input-group-text,
187
- .input-group > .input-group-prepend:not(:first-child) > .btn,
188
- .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
189
- .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
190
- .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
191
- @include border-left-radius(0);
192
- }