bootstrap 4.3.1 → 5.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (179) hide show
  1. checksums.yaml +4 -4
  2. data/.github/workflows/ci.yml +55 -0
  3. data/CHANGELOG.md +2 -14
  4. data/README.md +28 -5
  5. data/assets/javascripts/bootstrap/alert.js +54 -163
  6. data/assets/javascripts/bootstrap/base-component.js +83 -0
  7. data/assets/javascripts/bootstrap/button.js +44 -152
  8. data/assets/javascripts/bootstrap/carousel.js +289 -569
  9. data/assets/javascripts/bootstrap/collapse.js +170 -349
  10. data/assets/javascripts/bootstrap/dom/data.js +62 -0
  11. data/assets/javascripts/bootstrap/dom/event-handler.js +236 -0
  12. data/assets/javascripts/bootstrap/dom/manipulator.js +71 -0
  13. data/assets/javascripts/bootstrap/dom/selector-engine.js +103 -0
  14. data/assets/javascripts/bootstrap/dropdown.js +303 -496
  15. data/assets/javascripts/bootstrap/modal.js +229 -559
  16. data/assets/javascripts/bootstrap/offcanvas.js +245 -0
  17. data/assets/javascripts/bootstrap/popover.js +61 -226
  18. data/assets/javascripts/bootstrap/scrollspy.js +217 -317
  19. data/assets/javascripts/bootstrap/tab.js +220 -212
  20. data/assets/javascripts/bootstrap/toast.js +145 -229
  21. data/assets/javascripts/bootstrap/tooltip.js +421 -782
  22. data/assets/javascripts/bootstrap/util/backdrop.js +139 -0
  23. data/assets/javascripts/bootstrap/util/component-functions.js +41 -0
  24. data/assets/javascripts/bootstrap/util/config.js +67 -0
  25. data/assets/javascripts/bootstrap/util/focustrap.js +113 -0
  26. data/assets/javascripts/bootstrap/util/index.js +281 -0
  27. data/assets/javascripts/bootstrap/util/sanitizer.js +110 -0
  28. data/assets/javascripts/bootstrap/util/scrollbar.js +112 -0
  29. data/assets/javascripts/bootstrap/util/swipe.js +134 -0
  30. data/assets/javascripts/bootstrap/util/template-factory.js +150 -0
  31. data/assets/javascripts/bootstrap-global-this-define.js +6 -0
  32. data/assets/javascripts/bootstrap-global-this-undefine.js +2 -0
  33. data/assets/javascripts/bootstrap-sprockets.js +23 -7
  34. data/assets/javascripts/bootstrap.js +3690 -3639
  35. data/assets/javascripts/bootstrap.min.js +4 -4
  36. data/assets/stylesheets/_bootstrap-grid.scss +53 -20
  37. data/assets/stylesheets/_bootstrap-reboot.scss +5 -7
  38. data/assets/stylesheets/_bootstrap.scss +21 -13
  39. data/assets/stylesheets/bootstrap/_accordion.scss +158 -0
  40. data/assets/stylesheets/bootstrap/_alert.scss +32 -15
  41. data/assets/stylesheets/bootstrap/_badge.scss +15 -31
  42. data/assets/stylesheets/bootstrap/_breadcrumb.scss +23 -24
  43. data/assets/stylesheets/bootstrap/_button-group.scss +27 -48
  44. data/assets/stylesheets/bootstrap/_buttons.scss +139 -69
  45. data/assets/stylesheets/bootstrap/_card.scss +91 -141
  46. data/assets/stylesheets/bootstrap/_carousel.scss +86 -39
  47. data/assets/stylesheets/bootstrap/_close.scss +51 -29
  48. data/assets/stylesheets/bootstrap/_containers.scss +41 -0
  49. data/assets/stylesheets/bootstrap/_dropdown.scss +131 -72
  50. data/assets/stylesheets/bootstrap/_forms.scss +9 -330
  51. data/assets/stylesheets/bootstrap/_functions.scss +244 -28
  52. data/assets/stylesheets/bootstrap/_grid.scss +18 -31
  53. data/assets/stylesheets/bootstrap/_helpers.scss +12 -0
  54. data/assets/stylesheets/bootstrap/_images.scss +3 -3
  55. data/assets/stylesheets/bootstrap/_list-group.scss +101 -53
  56. data/assets/stylesheets/bootstrap/_maps.scss +174 -0
  57. data/assets/stylesheets/bootstrap/_mixins.scss +13 -18
  58. data/assets/stylesheets/bootstrap/_modal.scss +120 -112
  59. data/assets/stylesheets/bootstrap/_nav.scss +113 -24
  60. data/assets/stylesheets/bootstrap/_navbar.scss +145 -150
  61. data/assets/stylesheets/bootstrap/_offcanvas.scss +146 -0
  62. data/assets/stylesheets/bootstrap/_pagination.scss +74 -38
  63. data/assets/stylesheets/bootstrap/_placeholders.scss +51 -0
  64. data/assets/stylesheets/bootstrap/_popover.scss +99 -74
  65. data/assets/stylesheets/bootstrap/_progress.scss +40 -15
  66. data/assets/stylesheets/bootstrap/_reboot.scss +342 -215
  67. data/assets/stylesheets/bootstrap/_root.scss +174 -9
  68. data/assets/stylesheets/bootstrap/_spinners.scss +52 -22
  69. data/assets/stylesheets/bootstrap/_tables.scss +101 -115
  70. data/assets/stylesheets/bootstrap/_toasts.scss +54 -25
  71. data/assets/stylesheets/bootstrap/_tooltip.scss +67 -63
  72. data/assets/stylesheets/bootstrap/_transitions.scss +8 -1
  73. data/assets/stylesheets/bootstrap/_type.scss +42 -61
  74. data/assets/stylesheets/bootstrap/_utilities.scss +806 -17
  75. data/assets/stylesheets/bootstrap/_variables-dark.scss +85 -0
  76. data/assets/stylesheets/bootstrap/_variables.scss +1235 -615
  77. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +19 -0
  78. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +94 -0
  79. data/assets/stylesheets/bootstrap/forms/_form-check.scss +188 -0
  80. data/assets/stylesheets/bootstrap/forms/_form-control.scss +214 -0
  81. data/assets/stylesheets/bootstrap/forms/_form-range.scss +91 -0
  82. data/assets/stylesheets/bootstrap/forms/_form-select.scss +80 -0
  83. data/assets/stylesheets/bootstrap/forms/_form-text.scss +11 -0
  84. data/assets/stylesheets/bootstrap/forms/_input-group.scss +132 -0
  85. data/assets/stylesheets/bootstrap/forms/_labels.scss +36 -0
  86. data/assets/stylesheets/bootstrap/forms/_validation.scss +12 -0
  87. data/assets/stylesheets/bootstrap/helpers/_color-bg.scss +8 -0
  88. data/assets/stylesheets/bootstrap/helpers/_colored-links.scss +30 -0
  89. data/assets/stylesheets/bootstrap/helpers/_focus-ring.scss +5 -0
  90. data/assets/stylesheets/bootstrap/helpers/_icon-link.scss +25 -0
  91. data/assets/stylesheets/bootstrap/helpers/_position.scss +36 -0
  92. data/assets/stylesheets/bootstrap/helpers/_ratio.scss +26 -0
  93. data/assets/stylesheets/bootstrap/helpers/_stacks.scss +15 -0
  94. data/assets/stylesheets/bootstrap/helpers/_stretched-link.scss +15 -0
  95. data/assets/stylesheets/bootstrap/helpers/_text-truncation.scss +7 -0
  96. data/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss +8 -0
  97. data/assets/stylesheets/bootstrap/helpers/_vr.scss +8 -0
  98. data/assets/stylesheets/bootstrap/mixins/_alert.scss +11 -6
  99. data/assets/stylesheets/bootstrap/mixins/_backdrop.scss +14 -0
  100. data/assets/stylesheets/bootstrap/mixins/_banner.scss +7 -0
  101. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +37 -22
  102. data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +7 -9
  103. data/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +20 -16
  104. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +60 -97
  105. data/assets/stylesheets/bootstrap/mixins/_caret.scss +34 -27
  106. data/assets/stylesheets/bootstrap/mixins/_clearfix.scss +2 -0
  107. data/assets/stylesheets/bootstrap/mixins/_color-mode.scss +21 -0
  108. data/assets/stylesheets/bootstrap/mixins/_color-scheme.scss +7 -0
  109. data/assets/stylesheets/bootstrap/mixins/_container.scss +11 -0
  110. data/assets/stylesheets/bootstrap/mixins/_forms.scss +77 -116
  111. data/assets/stylesheets/bootstrap/mixins/_gradients.scss +13 -11
  112. data/assets/stylesheets/bootstrap/mixins/_grid.scss +133 -33
  113. data/assets/stylesheets/bootstrap/mixins/_image.scss +0 -20
  114. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +7 -2
  115. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +7 -19
  116. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +2 -2
  117. data/assets/stylesheets/bootstrap/mixins/_table-variants.scss +24 -0
  118. data/assets/stylesheets/bootstrap/mixins/_transition.scss +18 -8
  119. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +97 -0
  120. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +33 -0
  121. data/assets/stylesheets/bootstrap/utilities/_api.scss +47 -0
  122. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +276 -132
  123. data/bootstrap.gemspec +4 -6
  124. data/lib/bootstrap/version.rb +2 -2
  125. data/tasks/updater/js.rb +31 -7
  126. data/tasks/updater/network.rb +10 -4
  127. data/tasks/updater/scss.rb +1 -1
  128. data/tasks/updater.rb +2 -2
  129. data/test/dummy_rails/app/assets/config/manifest.js +3 -0
  130. data/test/dummy_rails/app/assets/javascripts/application.js +4 -3
  131. data/test/dummy_rails/app/assets/stylesheets/.browserslistrc +1 -0
  132. data/test/dummy_rails/app/views/layouts/application.html.erb +3 -1
  133. data/test/dummy_rails/app/views/pages/root.html +89 -0
  134. data/test/dummy_rails/config/application.rb +0 -3
  135. data/test/gemfiles/rails_5_2.gemfile +8 -0
  136. data/test/gemfiles/rails_6_0.gemfile +7 -0
  137. data/test/gemfiles/rails_6_1.gemfile +7 -0
  138. data/test/gemfiles/rails_7_0.gemfile +7 -0
  139. data/test/support/dummy_rails_integration.rb +3 -1
  140. data/test/test_helper.rb +18 -12
  141. metadata +86 -84
  142. data/.travis.yml +0 -17
  143. data/assets/javascripts/bootstrap/util.js +0 -171
  144. data/assets/stylesheets/bootstrap/_code.scss +0 -48
  145. data/assets/stylesheets/bootstrap/_custom-forms.scss +0 -507
  146. data/assets/stylesheets/bootstrap/_input-group.scss +0 -193
  147. data/assets/stylesheets/bootstrap/_jumbotron.scss +0 -17
  148. data/assets/stylesheets/bootstrap/_media.scss +0 -8
  149. data/assets/stylesheets/bootstrap/_print.scss +0 -141
  150. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -21
  151. data/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -17
  152. data/assets/stylesheets/bootstrap/mixins/_float.scss +0 -14
  153. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -66
  154. data/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -37
  155. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -10
  156. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -33
  157. data/assets/stylesheets/bootstrap/mixins/_size.scss +0 -7
  158. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -39
  159. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -16
  160. data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -11
  161. data/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -8
  162. data/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  163. data/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  164. data/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -75
  165. data/assets/stylesheets/bootstrap/utilities/_display.scss +0 -26
  166. data/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -39
  167. data/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -51
  168. data/assets/stylesheets/bootstrap/utilities/_float.scss +0 -11
  169. data/assets/stylesheets/bootstrap/utilities/_overflow.scss +0 -5
  170. data/assets/stylesheets/bootstrap/utilities/_position.scss +0 -32
  171. data/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  172. data/assets/stylesheets/bootstrap/utilities/_shadows.scss +0 -6
  173. data/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -20
  174. data/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -73
  175. data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss +0 -19
  176. data/assets/stylesheets/bootstrap/utilities/_text.scss +0 -72
  177. data/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -13
  178. data/test/dummy_rails/app/views/pages/root.html.slim +0 -58
  179. /data/assets/stylesheets/bootstrap/{utilities → helpers}/_clearfix.scss +0 -0
@@ -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
- }
@@ -1,193 +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
- // Add width 1% and flex-basis auto to ensure that button will not wrap out
21
- // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
22
- width: 1%;
23
- margin-bottom: 0;
24
-
25
- + .form-control,
26
- + .custom-select,
27
- + .custom-file {
28
- margin-left: -$input-border-width;
29
- }
30
- }
31
-
32
- // Bring the "active" form control to the top of surrounding elements
33
- > .form-control:focus,
34
- > .custom-select:focus,
35
- > .custom-file .custom-file-input:focus ~ .custom-file-label {
36
- z-index: 3;
37
- }
38
-
39
- // Bring the custom file input above the label
40
- > .custom-file .custom-file-input:focus {
41
- z-index: 4;
42
- }
43
-
44
- > .form-control,
45
- > .custom-select {
46
- &:not(:last-child) { @include border-right-radius(0); }
47
- &:not(:first-child) { @include border-left-radius(0); }
48
- }
49
-
50
- // Custom file inputs have more complex markup, thus requiring different
51
- // border-radius overrides.
52
- > .custom-file {
53
- display: flex;
54
- align-items: center;
55
-
56
- &:not(:last-child) .custom-file-label,
57
- &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
58
- &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
59
- }
60
- }
61
-
62
-
63
- // Prepend and append
64
- //
65
- // While it requires one extra layer of HTML for each, dedicated prepend and
66
- // append elements allow us to 1) be less clever, 2) simplify our selectors, and
67
- // 3) support HTML5 form validation.
68
-
69
- .input-group-prepend,
70
- .input-group-append {
71
- display: flex;
72
-
73
- // Ensure buttons are always above inputs for more visually pleasing borders.
74
- // This isn't needed for `.input-group-text` since it shares the same border-color
75
- // as our inputs.
76
- .btn {
77
- position: relative;
78
- z-index: 2;
79
-
80
- &:focus {
81
- z-index: 3;
82
- }
83
- }
84
-
85
- .btn + .btn,
86
- .btn + .input-group-text,
87
- .input-group-text + .input-group-text,
88
- .input-group-text + .btn {
89
- margin-left: -$input-border-width;
90
- }
91
- }
92
-
93
- .input-group-prepend { margin-right: -$input-border-width; }
94
- .input-group-append { margin-left: -$input-border-width; }
95
-
96
-
97
- // Textual addons
98
- //
99
- // Serves as a catch-all element for any text or radio/checkbox input you wish
100
- // to prepend or append to an input.
101
-
102
- .input-group-text {
103
- display: flex;
104
- align-items: center;
105
- padding: $input-padding-y $input-padding-x;
106
- margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
107
- @include font-size($input-font-size); // Match inputs
108
- font-weight: $font-weight-normal;
109
- line-height: $input-line-height;
110
- color: $input-group-addon-color;
111
- text-align: center;
112
- white-space: nowrap;
113
- background-color: $input-group-addon-bg;
114
- border: $input-border-width solid $input-group-addon-border-color;
115
- @include border-radius($input-border-radius);
116
-
117
- // Nuke default margins from checkboxes and radios to vertically center within.
118
- input[type="radio"],
119
- input[type="checkbox"] {
120
- margin-top: 0;
121
- }
122
- }
123
-
124
-
125
- // Sizing
126
- //
127
- // Remix the default form control sizing classes into new ones for easier
128
- // manipulation.
129
-
130
- .input-group-lg > .form-control:not(textarea),
131
- .input-group-lg > .custom-select {
132
- height: $input-height-lg;
133
- }
134
-
135
- .input-group-lg > .form-control,
136
- .input-group-lg > .custom-select,
137
- .input-group-lg > .input-group-prepend > .input-group-text,
138
- .input-group-lg > .input-group-append > .input-group-text,
139
- .input-group-lg > .input-group-prepend > .btn,
140
- .input-group-lg > .input-group-append > .btn {
141
- padding: $input-padding-y-lg $input-padding-x-lg;
142
- @include font-size($input-font-size-lg);
143
- line-height: $input-line-height-lg;
144
- @include border-radius($input-border-radius-lg);
145
- }
146
-
147
- .input-group-sm > .form-control:not(textarea),
148
- .input-group-sm > .custom-select {
149
- height: $input-height-sm;
150
- }
151
-
152
- .input-group-sm > .form-control,
153
- .input-group-sm > .custom-select,
154
- .input-group-sm > .input-group-prepend > .input-group-text,
155
- .input-group-sm > .input-group-append > .input-group-text,
156
- .input-group-sm > .input-group-prepend > .btn,
157
- .input-group-sm > .input-group-append > .btn {
158
- padding: $input-padding-y-sm $input-padding-x-sm;
159
- @include font-size($input-font-size-sm);
160
- line-height: $input-line-height-sm;
161
- @include border-radius($input-border-radius-sm);
162
- }
163
-
164
- .input-group-lg > .custom-select,
165
- .input-group-sm > .custom-select {
166
- padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
167
- }
168
-
169
-
170
- // Prepend and append rounded corners
171
- //
172
- // These rulesets must come after the sizing ones to properly override sm and lg
173
- // border-radius values when extending. They're more specific than we'd like
174
- // with the `.input-group >` part, but without it, we cannot override the sizing.
175
-
176
-
177
- .input-group > .input-group-prepend > .btn,
178
- .input-group > .input-group-prepend > .input-group-text,
179
- .input-group > .input-group-append:not(:last-child) > .btn,
180
- .input-group > .input-group-append:not(:last-child) > .input-group-text,
181
- .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
182
- .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
183
- @include border-right-radius(0);
184
- }
185
-
186
- .input-group > .input-group-append > .btn,
187
- .input-group > .input-group-append > .input-group-text,
188
- .input-group > .input-group-prepend:not(:first-child) > .btn,
189
- .input-group > .input-group-prepend:not(:first-child) > .input-group-text,
190
- .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
191
- .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
192
- @include border-left-radius(0);
193
- }
@@ -1,17 +0,0 @@
1
- .jumbotron {
2
- padding: $jumbotron-padding ($jumbotron-padding / 2);
3
- margin-bottom: $jumbotron-padding;
4
- color: $jumbotron-color;
5
- background-color: $jumbotron-bg;
6
- @include border-radius($border-radius-lg);
7
-
8
- @include media-breakpoint-up(sm) {
9
- padding: ($jumbotron-padding * 2) $jumbotron-padding;
10
- }
11
- }
12
-
13
- .jumbotron-fluid {
14
- padding-right: 0;
15
- padding-left: 0;
16
- @include border-radius(0);
17
- }