bootstrap 4.2.1 → 4.5.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (101) 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 +7 -7
  6. data/assets/javascripts/bootstrap.js +1054 -893
  7. data/assets/javascripts/bootstrap.min.js +4 -4
  8. data/assets/javascripts/bootstrap/alert.js +35 -57
  9. data/assets/javascripts/bootstrap/button.js +95 -69
  10. data/assets/javascripts/bootstrap/carousel.js +109 -165
  11. data/assets/javascripts/bootstrap/collapse.js +58 -114
  12. data/assets/javascripts/bootstrap/dropdown.js +138 -191
  13. data/assets/javascripts/bootstrap/modal.js +170 -176
  14. data/assets/javascripts/bootstrap/popover.js +31 -87
  15. data/assets/javascripts/bootstrap/scrollspy.js +54 -114
  16. data/assets/javascripts/bootstrap/tab.js +62 -81
  17. data/assets/javascripts/bootstrap/toast.js +80 -117
  18. data/assets/javascripts/bootstrap/tooltip.js +269 -157
  19. data/assets/javascripts/bootstrap/util.js +34 -9
  20. data/assets/stylesheets/_bootstrap-grid.scss +4 -4
  21. data/assets/stylesheets/_bootstrap-reboot.scss +4 -4
  22. data/assets/stylesheets/_bootstrap.scss +4 -4
  23. data/assets/stylesheets/bootstrap/_badge.scss +3 -2
  24. data/assets/stylesheets/bootstrap/_breadcrumb.scss +4 -1
  25. data/assets/stylesheets/bootstrap/_button-group.scss +1 -1
  26. data/assets/stylesheets/bootstrap/_buttons.scss +13 -11
  27. data/assets/stylesheets/bootstrap/_card.scss +49 -73
  28. data/assets/stylesheets/bootstrap/_carousel.scss +7 -8
  29. data/assets/stylesheets/bootstrap/_close.scss +3 -7
  30. data/assets/stylesheets/bootstrap/_code.scss +6 -6
  31. data/assets/stylesheets/bootstrap/_custom-forms.scss +40 -24
  32. data/assets/stylesheets/bootstrap/_dropdown.scss +24 -23
  33. data/assets/stylesheets/bootstrap/_forms.scss +38 -25
  34. data/assets/stylesheets/bootstrap/_functions.scss +62 -7
  35. data/assets/stylesheets/bootstrap/_grid.scss +32 -11
  36. data/assets/stylesheets/bootstrap/_images.scss +3 -3
  37. data/assets/stylesheets/bootstrap/_input-group.scss +4 -5
  38. data/assets/stylesheets/bootstrap/_jumbotron.scss +1 -0
  39. data/assets/stylesheets/bootstrap/_list-group.scss +62 -29
  40. data/assets/stylesheets/bootstrap/_mixins.scss +9 -3
  41. data/assets/stylesheets/bootstrap/_modal.scss +65 -11
  42. data/assets/stylesheets/bootstrap/_nav.scss +6 -3
  43. data/assets/stylesheets/bootstrap/_navbar.scss +48 -23
  44. data/assets/stylesheets/bootstrap/_pagination.scss +3 -7
  45. data/assets/stylesheets/bootstrap/_popover.scss +54 -67
  46. data/assets/stylesheets/bootstrap/_print.scss +3 -3
  47. data/assets/stylesheets/bootstrap/_progress.scss +19 -6
  48. data/assets/stylesheets/bootstrap/_reboot.scss +51 -33
  49. data/assets/stylesheets/bootstrap/_root.scss +1 -0
  50. data/assets/stylesheets/bootstrap/_spinners.scss +3 -0
  51. data/assets/stylesheets/bootstrap/_tables.scss +6 -8
  52. data/assets/stylesheets/bootstrap/_toasts.scss +7 -4
  53. data/assets/stylesheets/bootstrap/_tooltip.scss +1 -1
  54. data/assets/stylesheets/bootstrap/_transitions.scss +0 -2
  55. data/assets/stylesheets/bootstrap/_type.scss +17 -17
  56. data/assets/stylesheets/bootstrap/_utilities.scss +2 -0
  57. data/assets/stylesheets/bootstrap/_variables.scss +168 -119
  58. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +5 -3
  59. data/assets/stylesheets/bootstrap/mixins/_badge.scss +7 -1
  60. data/assets/stylesheets/bootstrap/mixins/_border-radius.scss +51 -10
  61. data/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +16 -1
  62. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +14 -15
  63. data/assets/stylesheets/bootstrap/mixins/_caret.scss +12 -12
  64. data/assets/stylesheets/bootstrap/mixins/_deprecate.scss +10 -0
  65. data/assets/stylesheets/bootstrap/mixins/_float.scss +6 -3
  66. data/assets/stylesheets/bootstrap/mixins/_forms.scss +40 -60
  67. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +29 -15
  68. data/assets/stylesheets/bootstrap/mixins/_grid.scss +25 -7
  69. data/assets/stylesheets/bootstrap/mixins/_hover.scss +4 -4
  70. data/assets/stylesheets/bootstrap/mixins/_image.scss +3 -3
  71. data/assets/stylesheets/bootstrap/mixins/_list-group.scss +1 -1
  72. data/assets/stylesheets/bootstrap/mixins/_lists.scss +1 -1
  73. data/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +2 -1
  74. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +1 -1
  75. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +2 -2
  76. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +3 -2
  77. data/assets/stylesheets/bootstrap/mixins/_size.scss +1 -0
  78. data/assets/stylesheets/bootstrap/mixins/_table-row.scss +1 -1
  79. data/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +7 -4
  80. data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +1 -3
  81. data/assets/stylesheets/bootstrap/mixins/_transition.scss +17 -7
  82. data/assets/stylesheets/bootstrap/mixins/_visibility.scss +1 -0
  83. data/assets/stylesheets/bootstrap/utilities/_background.scss +2 -2
  84. data/assets/stylesheets/bootstrap/utilities/_borders.scss +13 -1
  85. data/assets/stylesheets/bootstrap/utilities/_display.scss +6 -18
  86. data/assets/stylesheets/bootstrap/utilities/_float.scss +5 -3
  87. data/assets/stylesheets/bootstrap/utilities/_interactions.scss +5 -0
  88. data/assets/stylesheets/bootstrap/utilities/_stretched-link.scss +19 -0
  89. data/assets/stylesheets/bootstrap/utilities/_text.scss +8 -3
  90. data/assets/stylesheets/bootstrap/utilities/_visibility.scss +4 -2
  91. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +204 -0
  92. data/bootstrap.gemspec +1 -1
  93. data/lib/bootstrap/version.rb +2 -2
  94. data/tasks/updater/js.rb +1 -1
  95. data/tasks/updater/network.rb +2 -2
  96. data/test/dummy_rails/app/assets/config/manifest.js +3 -0
  97. data/test/dummy_rails/app/assets/stylesheets/.browserslistrc +1 -0
  98. data/test/gemfiles/rails_6_0.gemfile +7 -0
  99. data/test/support/dummy_rails_integration.rb +3 -1
  100. data/test/test_helper.rb +18 -13
  101. metadata +14 -5
@@ -75,7 +75,7 @@
75
75
  .active.carousel-item-right {
76
76
  z-index: 0;
77
77
  opacity: 0;
78
- @include transition(0s $carousel-transition-duration opacity);
78
+ @include transition(opacity 0s $carousel-transition-duration);
79
79
  }
80
80
  }
81
81
 
@@ -101,7 +101,7 @@
101
101
  @include transition($carousel-control-transition);
102
102
 
103
103
  // Hover/focus state
104
- @include hover-focus {
104
+ @include hover-focus() {
105
105
  color: $carousel-control-color;
106
106
  text-decoration: none;
107
107
  outline: 0;
@@ -111,13 +111,13 @@
111
111
  .carousel-control-prev {
112
112
  left: 0;
113
113
  @if $enable-gradients {
114
- background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
114
+ background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
115
115
  }
116
116
  }
117
117
  .carousel-control-next {
118
118
  right: 0;
119
119
  @if $enable-gradients {
120
- background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
120
+ background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
121
121
  }
122
122
  }
123
123
 
@@ -127,14 +127,13 @@
127
127
  display: inline-block;
128
128
  width: $carousel-control-icon-width;
129
129
  height: $carousel-control-icon-width;
130
- background: transparent no-repeat center center;
131
- background-size: 100% 100%;
130
+ background: no-repeat 50% / 100% 100%;
132
131
  }
133
132
  .carousel-control-prev-icon {
134
- background-image: $carousel-control-prev-icon-bg;
133
+ background-image: escape-svg($carousel-control-prev-icon-bg);
135
134
  }
136
135
  .carousel-control-next-icon {
137
- background-image: $carousel-control-next-icon-bg;
136
+ background-image: escape-svg($carousel-control-next-icon-bg);
138
137
  }
139
138
 
140
139
 
@@ -1,6 +1,6 @@
1
1
  .close {
2
2
  float: right;
3
- font-size: $close-font-size;
3
+ @include font-size($close-font-size);
4
4
  font-weight: $close-font-weight;
5
5
  line-height: 1;
6
6
  color: $close-color;
@@ -8,18 +8,15 @@
8
8
  opacity: .5;
9
9
 
10
10
  // Override <a>'s hover style
11
- @include hover {
11
+ @include hover() {
12
12
  color: $close-color;
13
13
  text-decoration: none;
14
14
  }
15
15
 
16
16
  &:not(:disabled):not(.disabled) {
17
- @include hover-focus {
17
+ @include hover-focus() {
18
18
  opacity: .75;
19
19
  }
20
-
21
- // Opinionated: add "hand" cursor to non-disabled .close elements
22
- cursor: pointer;
23
20
  }
24
21
  }
25
22
 
@@ -33,7 +30,6 @@ button.close {
33
30
  padding: 0;
34
31
  background-color: transparent;
35
32
  border: 0;
36
- appearance: none;
37
33
  }
38
34
 
39
35
  // Future-proof disabling of clicks on `<a>` elements
@@ -1,8 +1,8 @@
1
1
  // Inline code
2
2
  code {
3
- font-size: $code-font-size;
3
+ @include font-size($code-font-size);
4
4
  color: $code-color;
5
- word-break: break-word;
5
+ word-wrap: break-word;
6
6
 
7
7
  // Streamline the style when inside anchors to avoid broken underline and more
8
8
  a > & {
@@ -13,7 +13,7 @@ code {
13
13
  // User input typically entered via keyboard
14
14
  kbd {
15
15
  padding: $kbd-padding-y $kbd-padding-x;
16
- font-size: $kbd-font-size;
16
+ @include font-size($kbd-font-size);
17
17
  color: $kbd-color;
18
18
  background-color: $kbd-bg;
19
19
  @include border-radius($border-radius-sm);
@@ -21,7 +21,7 @@ kbd {
21
21
 
22
22
  kbd {
23
23
  padding: 0;
24
- font-size: 100%;
24
+ @include font-size(100%);
25
25
  font-weight: $nested-kbd-font-weight;
26
26
  @include box-shadow(none);
27
27
  }
@@ -30,12 +30,12 @@ kbd {
30
30
  // Blocks of code
31
31
  pre {
32
32
  display: block;
33
- font-size: $code-font-size;
33
+ @include font-size($code-font-size);
34
34
  color: $pre-color;
35
35
 
36
36
  // Account for some code outputs that place code tags in pre tags
37
37
  code {
38
- font-size: inherit;
38
+ @include font-size(inherit);
39
39
  color: inherit;
40
40
  word-break: normal;
41
41
  }
@@ -9,6 +9,7 @@
9
9
 
10
10
  .custom-control {
11
11
  position: relative;
12
+ z-index: 1;
12
13
  display: block;
13
14
  min-height: $font-size-base * $line-height-base;
14
15
  padding-left: $custom-control-gutter + $custom-control-indicator-size;
@@ -21,7 +22,10 @@
21
22
 
22
23
  .custom-control-input {
23
24
  position: absolute;
25
+ left: 0;
24
26
  z-index: -1; // Put the input behind the label so it doesn't overlay text
27
+ width: $custom-control-indicator-size;
28
+ height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
25
29
  opacity: 0;
26
30
 
27
31
  &:checked ~ .custom-control-label::before {
@@ -51,6 +55,8 @@
51
55
  @include box-shadow($custom-control-indicator-active-box-shadow);
52
56
  }
53
57
 
58
+ // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
59
+ &[disabled],
54
60
  &:disabled {
55
61
  ~ .custom-control-label {
56
62
  color: $custom-control-label-disabled-color;
@@ -69,7 +75,9 @@
69
75
  .custom-control-label {
70
76
  position: relative;
71
77
  margin-bottom: 0;
78
+ color: $custom-control-label-color;
72
79
  vertical-align: top;
80
+ cursor: $custom-control-cursor;
73
81
 
74
82
  // Background-color and (when enabled) gradient
75
83
  &::before {
@@ -95,9 +103,7 @@
95
103
  width: $custom-control-indicator-size;
96
104
  height: $custom-control-indicator-size;
97
105
  content: "";
98
- background-repeat: no-repeat;
99
- background-position: center center;
100
- background-size: $custom-control-indicator-bg-size;
106
+ background: no-repeat 50% / #{$custom-control-indicator-bg-size};
101
107
  }
102
108
  }
103
109
 
@@ -113,7 +119,7 @@
113
119
 
114
120
  .custom-control-input:checked ~ .custom-control-label {
115
121
  &::after {
116
- background-image: $custom-checkbox-indicator-icon-checked;
122
+ background-image: escape-svg($custom-checkbox-indicator-icon-checked);
117
123
  }
118
124
  }
119
125
 
@@ -124,16 +130,16 @@
124
130
  @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
125
131
  }
126
132
  &::after {
127
- background-image: $custom-checkbox-indicator-icon-indeterminate;
133
+ background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
128
134
  }
129
135
  }
130
136
 
131
137
  .custom-control-input:disabled {
132
138
  &:checked ~ .custom-control-label::before {
133
- background-color: $custom-control-indicator-checked-disabled-bg;
139
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
134
140
  }
135
141
  &:indeterminate ~ .custom-control-label::before {
136
- background-color: $custom-control-indicator-checked-disabled-bg;
142
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
137
143
  }
138
144
  }
139
145
  }
@@ -144,18 +150,19 @@
144
150
 
145
151
  .custom-radio {
146
152
  .custom-control-label::before {
153
+ // stylelint-disable-next-line property-blacklist
147
154
  border-radius: $custom-radio-indicator-border-radius;
148
155
  }
149
156
 
150
157
  .custom-control-input:checked ~ .custom-control-label {
151
158
  &::after {
152
- background-image: $custom-radio-indicator-icon-checked;
159
+ background-image: escape-svg($custom-radio-indicator-icon-checked);
153
160
  }
154
161
  }
155
162
 
156
163
  .custom-control-input:disabled {
157
164
  &:checked ~ .custom-control-label::before {
158
- background-color: $custom-control-indicator-checked-disabled-bg;
165
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
159
166
  }
160
167
  }
161
168
  }
@@ -173,15 +180,17 @@
173
180
  left: -($custom-switch-width + $custom-control-gutter);
174
181
  width: $custom-switch-width;
175
182
  pointer-events: all;
183
+ // stylelint-disable-next-line property-blacklist
176
184
  border-radius: $custom-switch-indicator-border-radius;
177
185
  }
178
186
 
179
187
  &::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});
188
+ top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
189
+ left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
182
190
  width: $custom-switch-indicator-size;
183
191
  height: $custom-switch-indicator-size;
184
192
  background-color: $custom-control-indicator-border-color;
193
+ // stylelint-disable-next-line property-blacklist
185
194
  border-radius: $custom-switch-indicator-border-radius;
186
195
  @include transition(transform .15s ease-in-out, $custom-forms-transition);
187
196
  }
@@ -196,7 +205,7 @@
196
205
 
197
206
  .custom-control-input:disabled {
198
207
  &:checked ~ .custom-control-label::before {
199
- background-color: $custom-control-indicator-checked-disabled-bg;
208
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
200
209
  }
201
210
  }
202
211
  }
@@ -213,18 +222,15 @@
213
222
  width: 100%;
214
223
  height: $custom-select-height;
215
224
  padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
225
+ font-family: $custom-select-font-family;
226
+ @include font-size($custom-select-font-size);
216
227
  font-weight: $custom-select-font-weight;
217
228
  line-height: $custom-select-line-height;
218
229
  color: $custom-select-color;
219
230
  vertical-align: middle;
220
- background: $custom-select-background;
221
- background-color: $custom-select-bg;
231
+ background: $custom-select-bg $custom-select-background;
222
232
  border: $custom-select-border-width solid $custom-select-border-color;
223
- @if $enable-rounded {
224
- border-radius: $custom-select-border-radius;
225
- } @else {
226
- border-radius: 0;
227
- }
233
+ @include border-radius($custom-select-border-radius, 0);
228
234
  @include box-shadow($custom-select-box-shadow);
229
235
  appearance: none;
230
236
 
@@ -232,8 +238,9 @@
232
238
  border-color: $custom-select-focus-border-color;
233
239
  outline: 0;
234
240
  @if $enable-shadows {
235
- box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
241
+ @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
236
242
  } @else {
243
+ // Avoid using mixin so we can pass custom focus shadow properly
237
244
  box-shadow: $custom-select-focus-box-shadow;
238
245
  }
239
246
 
@@ -262,7 +269,13 @@
262
269
 
263
270
  // Hides the default caret in IE11
264
271
  &::-ms-expand {
265
- opacity: 0;
272
+ display: none;
273
+ }
274
+
275
+ // Remove outline from select box in FF
276
+ &:-moz-focusring {
277
+ color: transparent;
278
+ text-shadow: 0 0 0 $custom-select-color;
266
279
  }
267
280
  }
268
281
 
@@ -271,7 +284,7 @@
271
284
  padding-top: $custom-select-padding-y-sm;
272
285
  padding-bottom: $custom-select-padding-y-sm;
273
286
  padding-left: $custom-select-padding-x-sm;
274
- font-size: $custom-select-font-size-sm;
287
+ @include font-size($custom-select-font-size-sm);
275
288
  }
276
289
 
277
290
  .custom-select-lg {
@@ -279,7 +292,7 @@
279
292
  padding-top: $custom-select-padding-y-lg;
280
293
  padding-bottom: $custom-select-padding-y-lg;
281
294
  padding-left: $custom-select-padding-x-lg;
282
- font-size: $custom-select-font-size-lg;
295
+ @include font-size($custom-select-font-size-lg);
283
296
  }
284
297
 
285
298
 
@@ -308,6 +321,8 @@
308
321
  box-shadow: $custom-file-focus-box-shadow;
309
322
  }
310
323
 
324
+ // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
325
+ &[disabled] ~ .custom-file-label,
311
326
  &:disabled ~ .custom-file-label {
312
327
  background-color: $custom-file-disabled-bg;
313
328
  }
@@ -331,6 +346,7 @@
331
346
  z-index: 1;
332
347
  height: $custom-file-height;
333
348
  padding: $custom-file-padding-y $custom-file-padding-x;
349
+ font-family: $custom-file-font-family;
334
350
  font-weight: $custom-file-font-weight;
335
351
  line-height: $custom-file-line-height;
336
352
  color: $custom-file-color;
@@ -365,7 +381,7 @@
365
381
 
366
382
  .custom-range {
367
383
  width: 100%;
368
- height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2});
384
+ height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
369
385
  padding: 0; // Need to reset padding
370
386
  background-color: transparent;
371
387
  appearance: none;
@@ -7,8 +7,10 @@
7
7
  }
8
8
 
9
9
  .dropdown-toggle {
10
+ white-space: nowrap;
11
+
10
12
  // Generate the caret automatically
11
- @include caret;
13
+ @include caret();
12
14
  }
13
15
 
14
16
  // The dropdown menu
@@ -22,8 +24,8 @@
22
24
  min-width: $dropdown-min-width;
23
25
  padding: $dropdown-padding-y 0;
24
26
  margin: $dropdown-spacer 0 0; // override default ul
25
- font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
26
- color: $body-color;
27
+ @include font-size($dropdown-font-size);
28
+ color: $dropdown-color;
27
29
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
28
30
  list-style: none;
29
31
  background-color: $dropdown-bg;
@@ -33,17 +35,6 @@
33
35
  @include box-shadow($dropdown-box-shadow);
34
36
  }
35
37
 
36
- @each $breakpoint in map-keys($grid-breakpoints) {
37
- @include media-breakpoint-up($breakpoint) {
38
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
39
-
40
- .dropdown-menu#{$infix}-right {
41
- right: 0;
42
- left: auto;
43
- }
44
- }
45
- }
46
-
47
38
  @each $breakpoint in map-keys($grid-breakpoints) {
48
39
  @include media-breakpoint-up($breakpoint) {
49
40
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@@ -52,6 +43,11 @@
52
43
  right: auto;
53
44
  left: 0;
54
45
  }
46
+
47
+ .dropdown-menu#{$infix}-right {
48
+ right: 0;
49
+ left: auto;
50
+ }
55
51
  }
56
52
  }
57
53
 
@@ -118,7 +114,7 @@
118
114
 
119
115
  // Dividers (basically an `<hr>`) within the dropdown
120
116
  .dropdown-divider {
121
- @include nav-divider($dropdown-divider-bg);
117
+ @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
122
118
  }
123
119
 
124
120
  // Links, buttons, and more within the dropdown menu
@@ -132,19 +128,24 @@
132
128
  font-weight: $font-weight-normal;
133
129
  color: $dropdown-link-color;
134
130
  text-align: inherit; // For `<button>`s
131
+ text-decoration: if($link-decoration == none, null, none);
135
132
  white-space: nowrap; // prevent links from randomly breaking onto new lines
136
133
  background-color: transparent; // For `<button>`s
137
134
  border: 0; // For `<button>`s
138
135
 
139
- &:first-child {
140
- @include border-top-radius($dropdown-inner-border-radius);
141
- }
136
+ // Prevent dropdown overflow if there's no padding
137
+ // See https://github.com/twbs/bootstrap/pull/27703
138
+ @if $dropdown-padding-y == 0 {
139
+ &:first-child {
140
+ @include border-top-radius($dropdown-inner-border-radius);
141
+ }
142
142
 
143
- &:last-child {
144
- @include border-bottom-radius($dropdown-inner-border-radius);
143
+ &:last-child {
144
+ @include border-bottom-radius($dropdown-inner-border-radius);
145
+ }
145
146
  }
146
147
 
147
- @include hover-focus {
148
+ @include hover-focus() {
148
149
  color: $dropdown-link-hover-color;
149
150
  text-decoration: none;
150
151
  @include gradient-bg($dropdown-link-hover-bg);
@@ -176,9 +177,9 @@
176
177
  // Dropdown section headers
177
178
  .dropdown-header {
178
179
  display: block;
179
- padding: $dropdown-padding-y $dropdown-item-padding-x;
180
+ padding: $dropdown-header-padding;
180
181
  margin-bottom: 0; // for use with heading elements
181
- font-size: $font-size-sm;
182
+ @include font-size($font-size-sm);
182
183
  color: $dropdown-header-color;
183
184
  white-space: nowrap; // as with > li > a
184
185
  }
@@ -9,7 +9,8 @@
9
9
  width: 100%;
10
10
  height: $input-height;
11
11
  padding: $input-padding-y $input-padding-x;
12
- font-size: $input-font-size;
12
+ font-family: $input-font-family;
13
+ @include font-size($input-font-size);
13
14
  font-weight: $input-font-weight;
14
15
  line-height: $input-line-height;
15
16
  color: $input-color;
@@ -18,13 +19,7 @@
18
19
  border: $input-border-width solid $input-border-color;
19
20
 
20
21
  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
21
- @if $enable-rounded {
22
- // Manually use the if/else instead of the mixin to account for iOS override
23
- border-radius: $input-border-radius;
24
- } @else {
25
- // Otherwise undo the iOS default
26
- border-radius: 0;
27
- }
22
+ @include border-radius($input-border-radius, 0);
28
23
 
29
24
  @include box-shadow($input-box-shadow);
30
25
  @include transition($input-transition);
@@ -35,8 +30,14 @@
35
30
  border: 0;
36
31
  }
37
32
 
33
+ // Remove select outline from select box in FF
34
+ &:-moz-focusring {
35
+ color: transparent;
36
+ text-shadow: 0 0 0 $input-color;
37
+ }
38
+
38
39
  // Customize the `:focus` state to imitate native WebKit styles.
39
- @include form-control-focus();
40
+ @include form-control-focus($ignore-warning: true);
40
41
 
41
42
  // Placeholder
42
43
  &::placeholder {
@@ -58,6 +59,15 @@
58
59
  }
59
60
  }
60
61
 
62
+ input[type="date"],
63
+ input[type="time"],
64
+ input[type="datetime-local"],
65
+ input[type="month"] {
66
+ &.form-control {
67
+ appearance: none; // Fix appearance for date inputs in Safari
68
+ }
69
+ }
70
+
61
71
  select.form-control {
62
72
  &:focus::-ms-value {
63
73
  // Suppress the nested default white text on blue background highlight given to
@@ -85,24 +95,24 @@ select.form-control {
85
95
  // For use with horizontal and inline forms, when you need the label (or legend)
86
96
  // text to align with the form controls.
87
97
  .col-form-label {
88
- padding-top: calc(#{$input-padding-y} + #{$input-border-width});
89
- padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
98
+ padding-top: add($input-padding-y, $input-border-width);
99
+ padding-bottom: add($input-padding-y, $input-border-width);
90
100
  margin-bottom: 0; // Override the `<label>/<legend>` default
91
- font-size: inherit; // Override the `<legend>` default
101
+ @include font-size(inherit); // Override the `<legend>` default
92
102
  line-height: $input-line-height;
93
103
  }
94
104
 
95
105
  .col-form-label-lg {
96
- padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
97
- padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
98
- font-size: $input-font-size-lg;
106
+ padding-top: add($input-padding-y-lg, $input-border-width);
107
+ padding-bottom: add($input-padding-y-lg, $input-border-width);
108
+ @include font-size($input-font-size-lg);
99
109
  line-height: $input-line-height-lg;
100
110
  }
101
111
 
102
112
  .col-form-label-sm {
103
- padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
104
- padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
105
- font-size: $input-font-size-sm;
113
+ padding-top: add($input-padding-y-sm, $input-border-width);
114
+ padding-bottom: add($input-padding-y-sm, $input-border-width);
115
+ @include font-size($input-font-size-sm);
106
116
  line-height: $input-line-height-sm;
107
117
  }
108
118
 
@@ -115,9 +125,9 @@ select.form-control {
115
125
  .form-control-plaintext {
116
126
  display: block;
117
127
  width: 100%;
118
- padding-top: $input-padding-y;
119
- padding-bottom: $input-padding-y;
128
+ padding: $input-padding-y 0;
120
129
  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
130
+ @include font-size($input-font-size);
121
131
  line-height: $input-line-height;
122
132
  color: $input-plaintext-color;
123
133
  background-color: transparent;
@@ -142,7 +152,7 @@ select.form-control {
142
152
  .form-control-sm {
143
153
  height: $input-height-sm;
144
154
  padding: $input-padding-y-sm $input-padding-x-sm;
145
- font-size: $input-font-size-sm;
155
+ @include font-size($input-font-size-sm);
146
156
  line-height: $input-line-height-sm;
147
157
  @include border-radius($input-border-radius-sm);
148
158
  }
@@ -150,7 +160,7 @@ select.form-control {
150
160
  .form-control-lg {
151
161
  height: $input-height-lg;
152
162
  padding: $input-padding-y-lg $input-padding-x-lg;
153
- font-size: $input-font-size-lg;
163
+ @include font-size($input-font-size-lg);
154
164
  line-height: $input-line-height-lg;
155
165
  @include border-radius($input-border-radius-lg);
156
166
  }
@@ -163,7 +173,6 @@ select.form-control {
163
173
  }
164
174
  }
165
175
 
166
- // stylelint-disable-next-line no-duplicate-selectors
167
176
  textarea.form-control {
168
177
  height: auto;
169
178
  }
@@ -216,6 +225,8 @@ textarea.form-control {
216
225
  margin-top: $form-check-input-margin-y;
217
226
  margin-left: -$form-check-input-gutter;
218
227
 
228
+ // Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
229
+ &[disabled] ~ .form-check-label,
219
230
  &:disabled ~ .form-check-label {
220
231
  color: $text-muted;
221
232
  }
@@ -248,8 +259,9 @@ textarea.form-control {
248
259
  // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
249
260
  // server side validation.
250
261
 
251
- @include form-validation-state("valid", $form-feedback-valid-color);
252
- @include form-validation-state("invalid", $form-feedback-invalid-color);
262
+ @each $state, $data in $form-validation-states {
263
+ @include form-validation-state($state, map-get($data, color), map-get($data, icon));
264
+ }
253
265
 
254
266
  // Inline forms
255
267
  //
@@ -318,6 +330,7 @@ textarea.form-control {
318
330
  }
319
331
  .form-check-input {
320
332
  position: relative;
333
+ flex-shrink: 0;
321
334
  margin-top: 0;
322
335
  margin-right: $form-check-input-margin-x;
323
336
  margin-left: 0;