bootstrap 4.5.3 → 4.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of bootstrap might be problematic. Click here for more details.

Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/assets/javascripts/bootstrap/alert.js +44 -39
  4. data/assets/javascripts/bootstrap/button.js +43 -38
  5. data/assets/javascripts/bootstrap/carousel.js +135 -107
  6. data/assets/javascripts/bootstrap/collapse.js +97 -76
  7. data/assets/javascripts/bootstrap/dropdown.js +103 -85
  8. data/assets/javascripts/bootstrap/modal.js +168 -147
  9. data/assets/javascripts/bootstrap/popover.js +74 -37
  10. data/assets/javascripts/bootstrap/scrollspy.js +75 -54
  11. data/assets/javascripts/bootstrap/tab.js +67 -56
  12. data/assets/javascripts/bootstrap/toast.js +71 -48
  13. data/assets/javascripts/bootstrap/tooltip.js +144 -117
  14. data/assets/javascripts/bootstrap/util.js +16 -19
  15. data/assets/javascripts/bootstrap-sprockets.js +6 -6
  16. data/assets/javascripts/bootstrap.js +834 -895
  17. data/assets/javascripts/bootstrap.min.js +3 -3
  18. data/assets/stylesheets/_bootstrap-grid.scss +4 -3
  19. data/assets/stylesheets/_bootstrap-reboot.scss +3 -3
  20. data/assets/stylesheets/_bootstrap.scss +3 -3
  21. data/assets/stylesheets/bootstrap/_breadcrumb.scss +1 -3
  22. data/assets/stylesheets/bootstrap/_card.scss +5 -5
  23. data/assets/stylesheets/bootstrap/_carousel.scss +6 -3
  24. data/assets/stylesheets/bootstrap/_custom-forms.scss +10 -8
  25. data/assets/stylesheets/bootstrap/_dropdown.scss +1 -1
  26. data/assets/stylesheets/bootstrap/_forms.scss +10 -10
  27. data/assets/stylesheets/bootstrap/_functions.scss +47 -1
  28. data/assets/stylesheets/bootstrap/_images.scss +1 -1
  29. data/assets/stylesheets/bootstrap/_input-group.scss +22 -3
  30. data/assets/stylesheets/bootstrap/_jumbotron.scss +1 -1
  31. data/assets/stylesheets/bootstrap/_modal.scss +2 -2
  32. data/assets/stylesheets/bootstrap/_nav.scss +1 -4
  33. data/assets/stylesheets/bootstrap/_navbar.scss +10 -2
  34. data/assets/stylesheets/bootstrap/_pagination.scss +2 -2
  35. data/assets/stylesheets/bootstrap/_popover.scss +9 -9
  36. data/assets/stylesheets/bootstrap/_print.scss +0 -9
  37. data/assets/stylesheets/bootstrap/_progress.scss +1 -1
  38. data/assets/stylesheets/bootstrap/_reboot.scss +8 -8
  39. data/assets/stylesheets/bootstrap/_root.scss +0 -1
  40. data/assets/stylesheets/bootstrap/_spinners.scss +13 -4
  41. data/assets/stylesheets/bootstrap/_tooltip.scss +4 -4
  42. data/assets/stylesheets/bootstrap/_type.scss +1 -1
  43. data/assets/stylesheets/bootstrap/_variables.scss +20 -14
  44. data/assets/stylesheets/bootstrap/mixins/_forms.scss +20 -3
  45. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +2 -2
  46. data/assets/stylesheets/bootstrap/mixins/_grid.scss +11 -11
  47. data/assets/stylesheets/bootstrap/mixins/_image.scss +1 -1
  48. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +1 -1
  49. data/assets/stylesheets/bootstrap/utilities/_embed.scss +1 -1
  50. data/assets/stylesheets/bootstrap/utilities/_spacing.scss +1 -1
  51. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +126 -102
  52. data/lib/bootstrap/version.rb +2 -2
  53. metadata +2 -2
@@ -75,7 +75,7 @@
75
75
  $g: green($color);
76
76
  $b: blue($color);
77
77
 
78
- $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
78
+ $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * .001;
79
79
 
80
80
  @if ($yiq >= $yiq-contrasted-threshold) {
81
81
  @return $dark;
@@ -140,5 +140,51 @@
140
140
  @return $value1 - $value2;
141
141
  }
142
142
 
143
+ @if type-of($value2) != number {
144
+ $value2: unquote("(") + $value2 + unquote(")");
145
+ }
146
+
143
147
  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
144
148
  }
149
+
150
+ @function divide($dividend, $divisor, $precision: 10) {
151
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
152
+ $dividend: abs($dividend);
153
+ $divisor: abs($divisor);
154
+ @if $dividend == 0 {
155
+ @return 0;
156
+ }
157
+ @if $divisor == 0 {
158
+ @error "Cannot divide by 0";
159
+ }
160
+ $remainder: $dividend;
161
+ $result: 0;
162
+ $factor: 10;
163
+ @while ($remainder > 0 and $precision >= 0) {
164
+ $quotient: 0;
165
+ @while ($remainder >= $divisor) {
166
+ $remainder: $remainder - $divisor;
167
+ $quotient: $quotient + 1;
168
+ }
169
+ $result: $result * 10 + $quotient;
170
+ $factor: $factor * .1;
171
+ $remainder: $remainder * 10;
172
+ $precision: $precision - 1;
173
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
174
+ $result: $result + 1;
175
+ }
176
+ }
177
+ $result: $result * $factor * $sign;
178
+ $dividend-unit: unit($dividend);
179
+ $divisor-unit: unit($divisor);
180
+ $unit-map: (
181
+ "px": 1px,
182
+ "rem": 1rem,
183
+ "em": 1em,
184
+ "%": 1%
185
+ );
186
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
187
+ $result: $result * map-get($unit-map, $dividend-unit);
188
+ }
189
+ @return $result;
190
+ }
@@ -32,7 +32,7 @@
32
32
  }
33
33
 
34
34
  .figure-img {
35
- margin-bottom: $spacer / 2;
35
+ margin-bottom: $spacer * .5;
36
36
  line-height: 1;
37
37
  }
38
38
 
@@ -42,7 +42,6 @@
42
42
 
43
43
  > .form-control,
44
44
  > .custom-select {
45
- &:not(:last-child) { @include border-right-radius(0); }
46
45
  &:not(:first-child) { @include border-left-radius(0); }
47
46
  }
48
47
 
@@ -56,6 +55,24 @@
56
55
  &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
57
56
  &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
58
57
  }
58
+
59
+ &:not(.has-validation) {
60
+ > .form-control:not(:last-child),
61
+ > .custom-select:not(:last-child),
62
+ > .custom-file:not(:last-child) .custom-file-label,
63
+ > .custom-file:not(:last-child) .custom-file-label::after {
64
+ @include border-right-radius(0);
65
+ }
66
+ }
67
+
68
+ &.has-validation {
69
+ > .form-control:nth-last-child(n + 3),
70
+ > .custom-select:nth-last-child(n + 3),
71
+ > .custom-file:nth-last-child(n + 3) .custom-file-label,
72
+ > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
73
+ @include border-right-radius(0);
74
+ }
75
+ }
59
76
  }
60
77
 
61
78
 
@@ -175,8 +192,10 @@
175
192
 
176
193
  .input-group > .input-group-prepend > .btn,
177
194
  .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,
195
+ .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
196
+ .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
197
+ .input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
198
+ .input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
180
199
  .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
181
200
  .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
182
201
  @include border-right-radius(0);
@@ -1,5 +1,5 @@
1
1
  .jumbotron {
2
- padding: $jumbotron-padding ($jumbotron-padding / 2);
2
+ padding: $jumbotron-padding ($jumbotron-padding * .5);
3
3
  margin-bottom: $jumbotron-padding;
4
4
  color: $jumbotron-color;
5
5
  background-color: $jumbotron-bg;
@@ -175,7 +175,7 @@
175
175
  flex-wrap: wrap;
176
176
  align-items: center; // vertically center
177
177
  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
178
- padding: $modal-inner-padding - $modal-footer-margin-between / 2;
178
+ padding: $modal-inner-padding - $modal-footer-margin-between * .5;
179
179
  border-top: $modal-footer-border-width solid $modal-footer-border-color;
180
180
  @include border-bottom-radius($modal-content-inner-border-radius);
181
181
 
@@ -183,7 +183,7 @@
183
183
  // This solution is far from ideal because of the universal selector usage,
184
184
  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
185
185
  > * {
186
- margin: $modal-footer-margin-between / 2;
186
+ margin: $modal-footer-margin-between * .5;
187
187
  }
188
188
  }
189
189
 
@@ -35,11 +35,8 @@
35
35
  .nav-tabs {
36
36
  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
37
37
 
38
- .nav-item {
39
- margin-bottom: -$nav-tabs-border-width;
40
- }
41
-
42
38
  .nav-link {
39
+ margin-bottom: -$nav-tabs-border-width;
43
40
  border: $nav-tabs-border-width solid transparent;
44
41
  @include border-top-radius($nav-tabs-border-radius);
45
42
 
@@ -136,8 +136,12 @@
136
136
  height: 1.5em;
137
137
  vertical-align: middle;
138
138
  content: "";
139
- background: no-repeat center center;
140
- background-size: 100% 100%;
139
+ background: 50% / 100% 100% no-repeat;
140
+ }
141
+
142
+ .navbar-nav-scroll {
143
+ max-height: $navbar-nav-scroll-max-height;
144
+ overflow-y: auto;
141
145
  }
142
146
 
143
147
  // Generate series of `.navbar-expand-*` responsive classes for configuring
@@ -199,6 +203,10 @@
199
203
  }
200
204
  }
201
205
 
206
+ .navbar-nav-scroll {
207
+ overflow: visible;
208
+ }
209
+
202
210
  .navbar-collapse {
203
211
  display: flex !important; // stylelint-disable-line declaration-no-important
204
212
 
@@ -66,9 +66,9 @@
66
66
  //
67
67
 
68
68
  .pagination-lg {
69
- @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
69
+ @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $pagination-border-radius-lg);
70
70
  }
71
71
 
72
72
  .pagination-sm {
73
- @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
73
+ @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $pagination-border-radius-sm);
74
74
  }
@@ -43,13 +43,13 @@
43
43
 
44
44
  &::before {
45
45
  bottom: 0;
46
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
46
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
47
47
  border-top-color: $popover-arrow-outer-color;
48
48
  }
49
49
 
50
50
  &::after {
51
51
  bottom: $popover-border-width;
52
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
52
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
53
53
  border-top-color: $popover-arrow-color;
54
54
  }
55
55
  }
@@ -66,13 +66,13 @@
66
66
 
67
67
  &::before {
68
68
  left: 0;
69
- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
69
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
70
70
  border-right-color: $popover-arrow-outer-color;
71
71
  }
72
72
 
73
73
  &::after {
74
74
  left: $popover-border-width;
75
- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
75
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
76
76
  border-right-color: $popover-arrow-color;
77
77
  }
78
78
  }
@@ -86,13 +86,13 @@
86
86
 
87
87
  &::before {
88
88
  top: 0;
89
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
89
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
90
90
  border-bottom-color: $popover-arrow-outer-color;
91
91
  }
92
92
 
93
93
  &::after {
94
94
  top: $popover-border-width;
95
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
95
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
96
96
  border-bottom-color: $popover-arrow-color;
97
97
  }
98
98
  }
@@ -104,7 +104,7 @@
104
104
  left: 50%;
105
105
  display: block;
106
106
  width: $popover-arrow-width;
107
- margin-left: -$popover-arrow-width / 2;
107
+ margin-left: -$popover-arrow-width * .5;
108
108
  content: "";
109
109
  border-bottom: $popover-border-width solid $popover-header-bg;
110
110
  }
@@ -121,13 +121,13 @@
121
121
 
122
122
  &::before {
123
123
  right: 0;
124
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
124
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
125
125
  border-left-color: $popover-arrow-outer-color;
126
126
  }
127
127
 
128
128
  &::after {
129
129
  right: $popover-border-width;
130
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
130
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
131
131
  border-left-color: $popover-arrow-color;
132
132
  }
133
133
  }
@@ -55,15 +55,6 @@
55
55
  page-break-inside: avoid;
56
56
  }
57
57
 
58
- //
59
- // Printing Tables:
60
- // https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
61
- //
62
-
63
- thead {
64
- display: table-header-group;
65
- }
66
-
67
58
  tr,
68
59
  img {
69
60
  page-break-inside: avoid;
@@ -36,7 +36,7 @@
36
36
 
37
37
  @if $enable-transitions {
38
38
  .progress-bar-animated {
39
- animation: progress-bar-stripes $progress-bar-animation-timing;
39
+ animation: $progress-bar-animation-timing progress-bar-stripes;
40
40
 
41
41
  @if $enable-prefers-reduced-motion-media-query {
42
42
  @media (prefers-reduced-motion: reduce) {
@@ -1,4 +1,4 @@
1
- // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
1
+ // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
2
2
 
3
3
  // Reboot
4
4
  //
@@ -307,13 +307,13 @@ button {
307
307
  border-radius: 0;
308
308
  }
309
309
 
310
- // Work around a Firefox/IE bug where the transparent `button` background
311
- // results in a loss of the default `button` focus styles.
312
- //
313
- // Credit: https://github.com/suitcss/base/
314
- button:focus {
315
- outline: 1px dotted;
316
- outline: 5px auto -webkit-focus-ring-color;
310
+ // Explicitly remove focus outline in Chromium when it shouldn't be
311
+ // visible (e.g. as result of mouse click or touch tap). It already
312
+ // should be doing this automatically, but seems to currently be
313
+ // confused and applies its very visible two-tone outline anyway.
314
+
315
+ button:focus:not(:focus-visible) {
316
+ outline: 0;
317
317
  }
318
318
 
319
319
  input,
@@ -1,4 +1,3 @@
1
- // Do not forget to update getting-started/theming.md!
2
1
  :root {
3
2
  // Custom variable values only support SassScript inside `#{}`.
4
3
  @each $color, $value in $colors {
@@ -10,12 +10,12 @@
10
10
  display: inline-block;
11
11
  width: $spinner-width;
12
12
  height: $spinner-height;
13
- vertical-align: text-bottom;
13
+ vertical-align: $spinner-vertical-align;
14
14
  border: $spinner-border-width solid currentColor;
15
15
  border-right-color: transparent;
16
16
  // stylelint-disable-next-line property-disallowed-list
17
17
  border-radius: 50%;
18
- animation: spinner-border .75s linear infinite;
18
+ animation: .75s linear infinite spinner-border;
19
19
  }
20
20
 
21
21
  .spinner-border-sm {
@@ -42,15 +42,24 @@
42
42
  display: inline-block;
43
43
  width: $spinner-width;
44
44
  height: $spinner-height;
45
- vertical-align: text-bottom;
45
+ vertical-align: $spinner-vertical-align;
46
46
  background-color: currentColor;
47
47
  // stylelint-disable-next-line property-disallowed-list
48
48
  border-radius: 50%;
49
49
  opacity: 0;
50
- animation: spinner-grow .75s linear infinite;
50
+ animation: .75s linear infinite spinner-grow;
51
51
  }
52
52
 
53
53
  .spinner-grow-sm {
54
54
  width: $spinner-width-sm;
55
55
  height: $spinner-height-sm;
56
56
  }
57
+
58
+ @if $enable-prefers-reduced-motion-media-query {
59
+ @media (prefers-reduced-motion: reduce) {
60
+ .spinner-border,
61
+ .spinner-grow {
62
+ animation-duration: 1.5s;
63
+ }
64
+ }
65
+ }
@@ -37,7 +37,7 @@
37
37
 
38
38
  &::before {
39
39
  top: 0;
40
- border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
40
+ border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
41
41
  border-top-color: $tooltip-arrow-color;
42
42
  }
43
43
  }
@@ -53,7 +53,7 @@
53
53
 
54
54
  &::before {
55
55
  right: 0;
56
- border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
56
+ border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
57
57
  border-right-color: $tooltip-arrow-color;
58
58
  }
59
59
  }
@@ -67,7 +67,7 @@
67
67
 
68
68
  &::before {
69
69
  bottom: 0;
70
- border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
70
+ border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
71
71
  border-bottom-color: $tooltip-arrow-color;
72
72
  }
73
73
  }
@@ -83,7 +83,7 @@
83
83
 
84
84
  &::before {
85
85
  left: 0;
86
- border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
86
+ border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
87
87
  border-left-color: $tooltip-arrow-color;
88
88
  }
89
89
  }
@@ -1,4 +1,4 @@
1
- // stylelint-disable declaration-no-important, selector-list-comma-newline-after
1
+ // stylelint-disable selector-list-comma-newline-after
2
2
 
3
3
  //
4
4
  // Headings
@@ -274,7 +274,7 @@ $embed-responsive-aspect-ratios: join(
274
274
  // Font, line-height, and color for body text, headings, and more.
275
275
 
276
276
  // stylelint-disable value-keyword-case
277
- $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
277
+ $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
278
278
  $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
279
279
  $font-family-base: $font-family-sans-serif !default;
280
280
  // stylelint-enable value-keyword-case
@@ -299,7 +299,7 @@ $h4-font-size: $font-size-base * 1.5 !default;
299
299
  $h5-font-size: $font-size-base * 1.25 !default;
300
300
  $h6-font-size: $font-size-base !default;
301
301
 
302
- $headings-margin-bottom: $spacer / 2 !default;
302
+ $headings-margin-bottom: $spacer * .5 !default;
303
303
  $headings-font-family: null !default;
304
304
  $headings-font-weight: 500 !default;
305
305
  $headings-line-height: 1.2 !default;
@@ -495,7 +495,7 @@ $input-height-border: $input-border-width * 2 !default;
495
495
 
496
496
  $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
497
497
  $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
498
- $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
498
+ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
499
499
 
500
500
  $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
501
501
  $input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
@@ -565,7 +565,7 @@ $custom-radio-indicator-border-radius: 50% !default;
565
565
  $custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
566
566
 
567
567
  $custom-switch-width: $custom-control-indicator-size * 1.75 !default;
568
- $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
568
+ $custom-switch-indicator-border-radius: $custom-control-indicator-size * .5 !default;
569
569
  $custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
570
570
 
571
571
  $custom-select-padding-y: $input-padding-y !default;
@@ -583,7 +583,7 @@ $custom-select-disabled-bg: $gray-200 !default;
583
583
  $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
584
584
  $custom-select-indicator-color: $gray-800 !default;
585
585
  $custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
586
- $custom-select-background: escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
586
+ $custom-select-background: escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
587
587
 
588
588
  $custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
589
589
  $custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
@@ -710,12 +710,12 @@ $nav-pills-link-active-color: $component-active-color !default;
710
710
  $nav-pills-link-active-bg: $component-active-bg !default;
711
711
 
712
712
  $nav-divider-color: $gray-200 !default;
713
- $nav-divider-margin-y: $spacer / 2 !default;
713
+ $nav-divider-margin-y: $spacer * .5 !default;
714
714
 
715
715
 
716
716
  // Navbar
717
717
 
718
- $navbar-padding-y: $spacer / 2 !default;
718
+ $navbar-padding-y: $spacer * .5 !default;
719
719
  $navbar-padding-x: $spacer !default;
720
720
 
721
721
  $navbar-nav-link-padding-x: .5rem !default;
@@ -724,13 +724,15 @@ $navbar-brand-font-size: $font-size-lg !default;
724
724
  // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
725
725
  $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
726
726
  $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
727
- $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
727
+ $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
728
728
 
729
729
  $navbar-toggler-padding-y: .25rem !default;
730
730
  $navbar-toggler-padding-x: .75rem !default;
731
731
  $navbar-toggler-font-size: $font-size-lg !default;
732
732
  $navbar-toggler-border-radius: $btn-border-radius !default;
733
733
 
734
+ $navbar-nav-scroll-max-height: 75vh !default;
735
+
734
736
  $navbar-dark-color: rgba($white, .5) !default;
735
737
  $navbar-dark-hover-color: rgba($white, .75) !default;
736
738
  $navbar-dark-active-color: $white !default;
@@ -772,12 +774,12 @@ $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
772
774
 
773
775
  $dropdown-link-color: $gray-900 !default;
774
776
  $dropdown-link-hover-color: darken($gray-900, 5%) !default;
775
- $dropdown-link-hover-bg: $gray-100 !default;
777
+ $dropdown-link-hover-bg: $gray-200 !default;
776
778
 
777
779
  $dropdown-link-active-color: $component-active-color !default;
778
780
  $dropdown-link-active-bg: $component-active-bg !default;
779
781
 
780
- $dropdown-link-disabled-color: $gray-600 !default;
782
+ $dropdown-link-disabled-color: $gray-500 !default;
781
783
 
782
784
  $dropdown-item-padding-y: .25rem !default;
783
785
  $dropdown-item-padding-x: 1.5rem !default;
@@ -816,6 +818,9 @@ $pagination-disabled-color: $gray-600 !default;
816
818
  $pagination-disabled-bg: $white !default;
817
819
  $pagination-disabled-border-color: $gray-300 !default;
818
820
 
821
+ $pagination-border-radius-sm: $border-radius-sm !default;
822
+ $pagination-border-radius-lg: $border-radius-lg !default;
823
+
819
824
 
820
825
  // Jumbotron
821
826
 
@@ -840,7 +845,7 @@ $card-bg: $white !default;
840
845
 
841
846
  $card-img-overlay-padding: 1.25rem !default;
842
847
 
843
- $card-group-margin: $grid-gutter-width / 2 !default;
848
+ $card-group-margin: $grid-gutter-width * .5 !default;
844
849
  $card-deck-margin: $card-group-margin !default;
845
850
 
846
851
  $card-columns-count: 3 !default;
@@ -1096,9 +1101,10 @@ $carousel-transition: transform $carousel-transition-duration eas
1096
1101
 
1097
1102
  // Spinners
1098
1103
 
1099
- $spinner-width: 2rem !default;
1100
- $spinner-height: $spinner-width !default;
1101
- $spinner-border-width: .25em !default;
1104
+ $spinner-width: 2rem !default;
1105
+ $spinner-height: $spinner-width !default;
1106
+ $spinner-vertical-align: -.125em !default;
1107
+ $spinner-border-width: .25em !default;
1102
1108
 
1103
1109
  $spinner-width-sm: 1rem !default;
1104
1110
  $spinner-height-sm: $spinner-width-sm !default;
@@ -64,6 +64,13 @@
64
64
  color: color-yiq($color);
65
65
  background-color: rgba($color, $form-feedback-tooltip-opacity);
66
66
  @include border-radius($form-feedback-tooltip-border-radius);
67
+
68
+ // See https://github.com/twbs/bootstrap/pull/31557
69
+ // Align tooltip to form elements
70
+ .form-row > .col > &,
71
+ .form-row > [class*="col-"] > & {
72
+ left: $form-grid-gutter-width * .5;
73
+ }
67
74
  }
68
75
 
69
76
  @include form-validation-state-selector($state) {
@@ -78,7 +85,7 @@
78
85
  border-color: $color;
79
86
 
80
87
  @if $enable-validation-icons {
81
- padding-right: $input-height-inner;
88
+ padding-right: $input-height-inner !important; // stylelint-disable-line declaration-no-important
82
89
  background-image: escape-svg($icon);
83
90
  background-repeat: no-repeat;
84
91
  background-position: right $input-height-inner-quarter center;
@@ -92,6 +99,16 @@
92
99
  }
93
100
  }
94
101
 
102
+ // stylelint-disable-next-line selector-no-qualifying-type
103
+ select.form-control {
104
+ @include form-validation-state-selector($state) {
105
+ @if $enable-validation-icons {
106
+ padding-right: $input-padding-x * 4 !important; // stylelint-disable-line declaration-no-important
107
+ background-position: right $input-padding-x * 2 center;
108
+ }
109
+ }
110
+ }
111
+
95
112
  // stylelint-disable-next-line selector-no-qualifying-type
96
113
  textarea.form-control {
97
114
  @include form-validation-state-selector($state) {
@@ -107,8 +124,8 @@
107
124
  border-color: $color;
108
125
 
109
126
  @if $enable-validation-icons {
110
- padding-right: $custom-select-feedback-icon-padding-right;
111
- background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
127
+ padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important
128
+ background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
112
129
  }
113
130
 
114
131
  &:focus {
@@ -8,8 +8,8 @@
8
8
  %grid-column {
9
9
  position: relative;
10
10
  width: 100%;
11
- padding-right: $gutter / 2;
12
- padding-left: $gutter / 2;
11
+ padding-right: $gutter * .5;
12
+ padding-left: $gutter * .5;
13
13
  }
14
14
 
15
15
  @each $breakpoint in map-keys($breakpoints) {
@@ -4,8 +4,8 @@
4
4
 
5
5
  @mixin make-container($gutter: $grid-gutter-width) {
6
6
  width: 100%;
7
- padding-right: $gutter / 2;
8
- padding-left: $gutter / 2;
7
+ padding-right: $gutter * .5;
8
+ padding-left: $gutter * .5;
9
9
  margin-right: auto;
10
10
  margin-left: auto;
11
11
  }
@@ -13,8 +13,8 @@
13
13
  @mixin make-row($gutter: $grid-gutter-width) {
14
14
  display: flex;
15
15
  flex-wrap: wrap;
16
- margin-right: -$gutter / 2;
17
- margin-left: -$gutter / 2;
16
+ margin-right: -$gutter * .5;
17
+ margin-left: -$gutter * .5;
18
18
  }
19
19
 
20
20
  // For each breakpoint, define the maximum width of the container in a media query
@@ -33,16 +33,16 @@
33
33
  // always setting `width: 100%;`. This works because we use `flex` values
34
34
  // later on to override this initial width.
35
35
  width: 100%;
36
- padding-right: $gutter / 2;
37
- padding-left: $gutter / 2;
36
+ padding-right: $gutter * .5;
37
+ padding-left: $gutter * .5;
38
38
  }
39
39
 
40
40
  @mixin make-col($size, $columns: $grid-columns) {
41
- flex: 0 0 percentage($size / $columns);
41
+ flex: 0 0 percentage(divide($size, $columns));
42
42
  // Add a `max-width` to ensure content within each column does not blow out
43
43
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
44
44
  // do not appear to require this.
45
- max-width: percentage($size / $columns);
45
+ max-width: percentage(divide($size, $columns));
46
46
  }
47
47
 
48
48
  @mixin make-col-auto() {
@@ -52,7 +52,7 @@
52
52
  }
53
53
 
54
54
  @mixin make-col-offset($size, $columns: $grid-columns) {
55
- $num: $size / $columns;
55
+ $num: divide($size, $columns);
56
56
  margin-left: if($num == 0, 0, percentage($num));
57
57
  }
58
58
 
@@ -63,7 +63,7 @@
63
63
  // style grid.
64
64
  @mixin row-cols($count) {
65
65
  > * {
66
- flex: 0 0 100% / $count;
67
- max-width: 100% / $count;
66
+ flex: 0 0 divide(100%, $count);
67
+ max-width: divide(100%, $count);
68
68
  }
69
69
  }