bootstrap 5.0.1 → 5.0.2

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.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/assets/javascripts/bootstrap-sprockets.js +7 -7
  4. data/assets/javascripts/bootstrap.js +332 -311
  5. data/assets/javascripts/bootstrap.min.js +2 -2
  6. data/assets/javascripts/bootstrap/alert.js +18 -17
  7. data/assets/javascripts/bootstrap/base-component.js +34 -25
  8. data/assets/javascripts/bootstrap/button.js +18 -19
  9. data/assets/javascripts/bootstrap/carousel.js +67 -52
  10. data/assets/javascripts/bootstrap/collapse.js +15 -6
  11. data/assets/javascripts/bootstrap/dom/data.js +2 -2
  12. data/assets/javascripts/bootstrap/dom/event-handler.js +2 -2
  13. data/assets/javascripts/bootstrap/dom/manipulator.js +2 -2
  14. data/assets/javascripts/bootstrap/dom/selector-engine.js +2 -2
  15. data/assets/javascripts/bootstrap/dropdown.js +61 -44
  16. data/assets/javascripts/bootstrap/modal.js +171 -108
  17. data/assets/javascripts/bootstrap/offcanvas.js +144 -95
  18. data/assets/javascripts/bootstrap/popover.js +35 -20
  19. data/assets/javascripts/bootstrap/scrollspy.js +14 -5
  20. data/assets/javascripts/bootstrap/tab.js +18 -10
  21. data/assets/javascripts/bootstrap/toast.js +17 -15
  22. data/assets/javascripts/bootstrap/tooltip.js +20 -21
  23. data/assets/stylesheets/_bootstrap-grid.scss +1 -1
  24. data/assets/stylesheets/_bootstrap-reboot.scss +1 -1
  25. data/assets/stylesheets/_bootstrap.scss +1 -1
  26. data/assets/stylesheets/bootstrap/_card.scss +5 -5
  27. data/assets/stylesheets/bootstrap/_carousel.scss +2 -2
  28. data/assets/stylesheets/bootstrap/_dropdown.scss +4 -4
  29. data/assets/stylesheets/bootstrap/_functions.scss +61 -3
  30. data/assets/stylesheets/bootstrap/_images.scss +1 -1
  31. data/assets/stylesheets/bootstrap/_modal.scss +4 -4
  32. data/assets/stylesheets/bootstrap/_offcanvas.scss +4 -2
  33. data/assets/stylesheets/bootstrap/_popover.scss +10 -10
  34. data/assets/stylesheets/bootstrap/_tables.scss +1 -1
  35. data/assets/stylesheets/bootstrap/_toasts.scss +1 -1
  36. data/assets/stylesheets/bootstrap/_tooltip.scss +4 -4
  37. data/assets/stylesheets/bootstrap/_variables.scss +22 -18
  38. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +1 -1
  39. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +3 -1
  40. data/assets/stylesheets/bootstrap/forms/_form-check.scss +1 -1
  41. data/assets/stylesheets/bootstrap/forms/_form-range.scss +1 -1
  42. data/assets/stylesheets/bootstrap/forms/_form-select.scss +3 -0
  43. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +1 -1
  44. data/assets/stylesheets/bootstrap/mixins/_grid.scss +16 -9
  45. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +55 -13
  46. data/lib/bootstrap/version.rb +2 -2
  47. metadata +2 -2
@@ -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
 
@@ -110,8 +110,8 @@
110
110
  @include border-top-radius($modal-content-inner-border-radius);
111
111
 
112
112
  .btn-close {
113
- padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
114
- margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
113
+ padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
114
+ margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
115
115
  }
116
116
  }
117
117
 
@@ -138,7 +138,7 @@
138
138
  flex-shrink: 0;
139
139
  align-items: center; // vertically center
140
140
  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
141
- padding: $modal-inner-padding - $modal-footer-margin-between / 2;
141
+ padding: $modal-inner-padding - $modal-footer-margin-between * .5;
142
142
  border-top: $modal-footer-border-width solid $modal-footer-border-color;
143
143
  @include border-bottom-radius($modal-content-inner-border-radius);
144
144
 
@@ -146,7 +146,7 @@
146
146
  // This solution is far from ideal because of the universal selector usage,
147
147
  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
148
148
  > * {
149
- margin: $modal-footer-margin-between / 2;
149
+ margin: $modal-footer-margin-between * .5;
150
150
  }
151
151
  }
152
152
 
@@ -21,8 +21,10 @@
21
21
  padding: $offcanvas-padding-y $offcanvas-padding-x;
22
22
 
23
23
  .btn-close {
24
- padding: ($offcanvas-padding-y / 2) ($offcanvas-padding-x / 2);
25
- margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto;
24
+ padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
25
+ margin-top: $offcanvas-padding-y * -.5;
26
+ margin-right: $offcanvas-padding-x * -.5;
27
+ margin-bottom: $offcanvas-padding-y * -.5;
26
28
  }
27
29
  }
28
30
 
@@ -40,13 +40,13 @@
40
40
 
41
41
  &::before {
42
42
  bottom: 0;
43
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
43
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
44
44
  border-top-color: $popover-arrow-outer-color;
45
45
  }
46
46
 
47
47
  &::after {
48
48
  bottom: $popover-border-width;
49
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
49
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
50
50
  border-top-color: $popover-arrow-color;
51
51
  }
52
52
  }
@@ -60,13 +60,13 @@
60
60
 
61
61
  &::before {
62
62
  left: 0;
63
- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
63
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
64
64
  border-right-color: $popover-arrow-outer-color;
65
65
  }
66
66
 
67
67
  &::after {
68
68
  left: $popover-border-width;
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-color;
71
71
  }
72
72
  }
@@ -78,13 +78,13 @@
78
78
 
79
79
  &::before {
80
80
  top: 0;
81
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
81
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
82
82
  border-bottom-color: $popover-arrow-outer-color;
83
83
  }
84
84
 
85
85
  &::after {
86
86
  top: $popover-border-width;
87
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
87
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
88
88
  border-bottom-color: $popover-arrow-color;
89
89
  }
90
90
  }
@@ -96,7 +96,7 @@
96
96
  left: 50%;
97
97
  display: block;
98
98
  width: $popover-arrow-width;
99
- margin-left: -$popover-arrow-width / 2;
99
+ margin-left: -$popover-arrow-width * .5;
100
100
  content: "";
101
101
  border-bottom: $popover-border-width solid $popover-header-bg;
102
102
  }
@@ -110,13 +110,13 @@
110
110
 
111
111
  &::before {
112
112
  right: 0;
113
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
113
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
114
114
  border-left-color: $popover-arrow-outer-color;
115
115
  }
116
116
 
117
117
  &::after {
118
118
  right: $popover-border-width;
119
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
119
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
120
120
  border-left-color: $popover-arrow-color;
121
121
  }
122
122
  }
@@ -144,7 +144,7 @@
144
144
  @include font-size($font-size-base);
145
145
  color: $popover-header-color;
146
146
  background-color: $popover-header-bg;
147
- border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
147
+ border-bottom: $popover-border-width solid $popover-border-color;
148
148
  @include border-top-radius($popover-inner-border-radius);
149
149
 
150
150
  &:empty {
@@ -4,7 +4,7 @@
4
4
 
5
5
  .table {
6
6
  --#{$variable-prefix}table-bg: #{$table-bg};
7
- --#{$variable-prefix}table-accent-bg: #{$table-bg};
7
+ --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
8
8
  --#{$variable-prefix}table-striped-color: #{$table-striped-color};
9
9
  --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
10
10
  --#{$variable-prefix}table-active-color: #{$table-active-color};
@@ -40,7 +40,7 @@
40
40
  @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
41
41
 
42
42
  .btn-close {
43
- margin-right: $toast-padding-x / -2;
43
+ margin-right: $toast-padding-x * -.5;
44
44
  margin-left: $toast-padding-x;
45
45
  }
46
46
  }
@@ -37,7 +37,7 @@
37
37
 
38
38
  &::before {
39
39
  top: -1px;
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: -1px;
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: -1px;
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: -1px;
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
  }
@@ -250,8 +250,8 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
250
250
  $spacer: 1rem !default;
251
251
  $spacers: (
252
252
  0: 0,
253
- 1: $spacer / 4,
254
- 2: $spacer / 2,
253
+ 1: $spacer * .25,
254
+ 2: $spacer * .5,
255
255
  3: $spacer,
256
256
  4: $spacer * 1.5,
257
257
  5: $spacer * 3,
@@ -350,7 +350,7 @@ $gutters: $spacers !default;
350
350
 
351
351
  // Container padding
352
352
 
353
- $container-padding-x: $grid-gutter-width / 2 !default;
353
+ $container-padding-x: $grid-gutter-width * .5 !default;
354
354
 
355
355
 
356
356
  // Components
@@ -422,8 +422,8 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberati
422
422
  $font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
423
423
  $font-family-code: var(--#{$variable-prefix}font-monospace) !default;
424
424
 
425
- // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
426
- // $font-size-base effects the font size of the body text
425
+ // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
426
+ // $font-size-base affects the font size of the body text
427
427
  $font-size-root: null !default;
428
428
  $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
429
429
  $font-size-sm: $font-size-base * .875 !default;
@@ -461,7 +461,7 @@ $font-sizes: (
461
461
  // scss-docs-end font-sizes
462
462
 
463
463
  // scss-docs-start headings-variables
464
- $headings-margin-bottom: $spacer / 2 !default;
464
+ $headings-margin-bottom: $spacer * .5 !default;
465
465
  $headings-font-family: null !default;
466
466
  $headings-font-style: null !default;
467
467
  $headings-font-weight: 500 !default;
@@ -535,6 +535,7 @@ $table-cell-vertical-align: top !default;
535
535
 
536
536
  $table-color: $body-color !default;
537
537
  $table-bg: transparent !default;
538
+ $table-accent-bg: transparent !default;
538
539
 
539
540
  $table-th-font-weight: null !default;
540
541
 
@@ -717,7 +718,7 @@ $input-height-border: $input-border-width * 2 !default;
717
718
 
718
719
  $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
719
720
  $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
720
- $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
721
+ $input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
721
722
 
722
723
  $input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
723
724
  $input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
@@ -825,6 +826,8 @@ $form-select-font-size-sm: $input-font-size-sm !default;
825
826
  $form-select-padding-y-lg: $input-padding-y-lg !default;
826
827
  $form-select-padding-x-lg: $input-padding-x-lg !default;
827
828
  $form-select-font-size-lg: $input-font-size-lg !default;
829
+
830
+ $form-select-transition: $input-transition !default;
828
831
  // scss-docs-end form-select-variables
829
832
 
830
833
  // scss-docs-start form-range-variables
@@ -856,6 +859,7 @@ $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default
856
859
 
857
860
  // scss-docs-start form-floating-variables
858
861
  $form-floating-height: add(3.5rem, $input-height-border) !default;
862
+ $form-floating-line-height: 1.25 !default;
859
863
  $form-floating-padding-x: $input-padding-x !default;
860
864
  $form-floating-padding-y: 1rem !default;
861
865
  $form-floating-input-padding-t: 1.625rem !default;
@@ -939,7 +943,7 @@ $nav-pills-link-active-bg: $component-active-bg !default;
939
943
  // Navbar
940
944
 
941
945
  // scss-docs-start navbar-variables
942
- $navbar-padding-y: $spacer / 2 !default;
946
+ $navbar-padding-y: $spacer * .5 !default;
943
947
  $navbar-padding-x: null !default;
944
948
 
945
949
  $navbar-nav-link-padding-x: .5rem !default;
@@ -948,7 +952,7 @@ $navbar-brand-font-size: $font-size-lg !default;
948
952
  // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
949
953
  $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
950
954
  $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
951
- $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
955
+ $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
952
956
  $navbar-brand-margin-end: 1rem !default;
953
957
 
954
958
  $navbar-toggler-padding-y: .25rem !default;
@@ -998,7 +1002,7 @@ $dropdown-border-radius: $border-radius !default;
998
1002
  $dropdown-border-width: $border-width !default;
999
1003
  $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
1000
1004
  $dropdown-divider-bg: $dropdown-border-color !default;
1001
- $dropdown-divider-margin-y: $spacer / 2 !default;
1005
+ $dropdown-divider-margin-y: $spacer * .5 !default;
1002
1006
  $dropdown-box-shadow: $box-shadow !default;
1003
1007
 
1004
1008
  $dropdown-link-color: $gray-900 !default;
@@ -1010,7 +1014,7 @@ $dropdown-link-active-bg: $component-active-bg !default;
1010
1014
 
1011
1015
  $dropdown-link-disabled-color: $gray-500 !default;
1012
1016
 
1013
- $dropdown-item-padding-y: $spacer / 4 !default;
1017
+ $dropdown-item-padding-y: $spacer * .25 !default;
1014
1018
  $dropdown-item-padding-x: $spacer !default;
1015
1019
 
1016
1020
  $dropdown-header-color: $gray-600 !default;
@@ -1079,12 +1083,12 @@ $pagination-border-radius-lg: $border-radius-lg !default;
1079
1083
  // scss-docs-start card-variables
1080
1084
  $card-spacer-y: $spacer !default;
1081
1085
  $card-spacer-x: $spacer !default;
1082
- $card-title-spacer-y: $spacer / 2 !default;
1086
+ $card-title-spacer-y: $spacer * .5 !default;
1083
1087
  $card-border-width: $border-width !default;
1084
1088
  $card-border-radius: $border-radius !default;
1085
1089
  $card-border-color: rgba($black, .125) !default;
1086
1090
  $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
1087
- $card-cap-padding-y: $card-spacer-y / 2 !default;
1091
+ $card-cap-padding-y: $card-spacer-y * .5 !default;
1088
1092
  $card-cap-padding-x: $card-spacer-x !default;
1089
1093
  $card-cap-bg: rgba($black, .03) !default;
1090
1094
  $card-cap-color: null !default;
@@ -1092,7 +1096,7 @@ $card-height: null !default;
1092
1096
  $card-color: null !default;
1093
1097
  $card-bg: $white !default;
1094
1098
  $card-img-overlay-padding: $spacer !default;
1095
- $card-group-margin: $grid-gutter-width / 2 !default;
1099
+ $card-group-margin: $grid-gutter-width * .5 !default;
1096
1100
  // scss-docs-end card-variables
1097
1101
 
1098
1102
  // Accordion
@@ -1140,8 +1144,8 @@ $tooltip-color: $white !default;
1140
1144
  $tooltip-bg: $black !default;
1141
1145
  $tooltip-border-radius: $border-radius !default;
1142
1146
  $tooltip-opacity: .9 !default;
1143
- $tooltip-padding-y: $spacer / 4 !default;
1144
- $tooltip-padding-x: $spacer / 2 !default;
1147
+ $tooltip-padding-y: $spacer * .25 !default;
1148
+ $tooltip-padding-x: $spacer * .5 !default;
1145
1149
  $tooltip-margin: 0 !default;
1146
1150
 
1147
1151
  $tooltip-arrow-width: .8rem !default;
@@ -1157,7 +1161,7 @@ $form-feedback-tooltip-font-size: $tooltip-font-size !default;
1157
1161
  $form-feedback-tooltip-line-height: null !default;
1158
1162
  $form-feedback-tooltip-opacity: $tooltip-opacity !default;
1159
1163
  $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
1160
- // scss-docs-start tooltip-feedback-variables
1164
+ // scss-docs-end tooltip-feedback-variables
1161
1165
 
1162
1166
 
1163
1167
  // Popovers
@@ -1307,7 +1311,7 @@ $list-group-border-color: rgba($black, .125) !default;
1307
1311
  $list-group-border-width: $border-width !default;
1308
1312
  $list-group-border-radius: $border-radius !default;
1309
1313
 
1310
- $list-group-item-padding-y: $spacer / 2 !default;
1314
+ $list-group-item-padding-y: $spacer * .5 !default;
1311
1315
  $list-group-item-padding-x: $spacer !default;
1312
1316
  $list-group-item-bg-scale: -80% !default;
1313
1317
  $list-group-item-color-scale: 40% !default;
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Bootstrap Utilities v5.0.1 (https://getbootstrap.com/)
2
+ * Bootstrap Utilities v5.0.2 (https://getbootstrap.com/)
3
3
  * Copyright 2011-2021 The Bootstrap Authors
4
4
  * Copyright 2011-2021 Twitter, Inc.
5
5
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -4,7 +4,7 @@
4
4
  > .form-control,
5
5
  > .form-select {
6
6
  height: $form-floating-height;
7
- padding: $form-floating-padding-y $form-floating-padding-x;
7
+ line-height: $form-floating-line-height;
8
8
  }
9
9
 
10
10
  > label {
@@ -21,6 +21,8 @@
21
21
 
22
22
  // stylelint-disable no-duplicate-selectors
23
23
  > .form-control {
24
+ padding: $form-floating-padding-y $form-floating-padding-x;
25
+
24
26
  &::placeholder {
25
27
  color: transparent;
26
28
  }
@@ -17,7 +17,7 @@
17
17
  .form-check-input {
18
18
  width: $form-check-input-width;
19
19
  height: $form-check-input-width;
20
- margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
20
+ margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
21
21
  vertical-align: top;
22
22
  background-color: $form-check-input-bg;
23
23
  background-repeat: no-repeat;
@@ -27,7 +27,7 @@
27
27
  &::-webkit-slider-thumb {
28
28
  width: $form-range-thumb-width;
29
29
  height: $form-range-thumb-height;
30
- margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific
30
+ margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
31
31
  @include gradient-bg($form-range-thumb-bg);
32
32
  border: $form-range-thumb-border;
33
33
  @include border-radius($form-range-thumb-border-radius);
@@ -7,6 +7,8 @@
7
7
  display: block;
8
8
  width: 100%;
9
9
  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
10
+ // stylelint-disable-next-line property-no-vendor-prefix
11
+ -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
10
12
  font-family: $form-select-font-family;
11
13
  @include font-size($form-select-font-size);
12
14
  font-weight: $form-select-font-weight;
@@ -20,6 +22,7 @@
20
22
  border: $form-select-border-width solid $form-select-border-color;
21
23
  @include border-radius($form-select-border-radius, 0);
22
24
  @include box-shadow($form-select-box-shadow);
25
+ @include transition($form-select-transition);
23
26
  appearance: none;
24
27
 
25
28
  &:focus {
@@ -11,7 +11,7 @@
11
11
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
12
12
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
13
13
  $hover-color: color-contrast($hover-background),
14
- $active-background: if($color == $color-contrast-light, shade-color($background,$btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
14
+ $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
15
15
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
16
16
  $active-color: color-contrast($active-background),
17
17
  $disabled-background: $background,
@@ -1,4 +1,4 @@
1
- /// Grid system
1
+ // Grid system
2
2
  //
3
3
  // Generate semantic grid columns with these mixins.
4
4
 
@@ -8,8 +8,8 @@
8
8
  display: flex;
9
9
  flex-wrap: wrap;
10
10
  margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
11
- margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
12
- margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
11
+ margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
12
+ margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
13
13
  }
14
14
 
15
15
  @mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -21,15 +21,16 @@
21
21
  flex-shrink: 0;
22
22
  width: 100%;
23
23
  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
24
- padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
25
- padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
24
+ padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
25
+ padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
26
26
  margin-top: var(--#{$variable-prefix}gutter-y);
27
27
  }
28
28
 
29
29
  @mixin make-col($size: false, $columns: $grid-columns) {
30
30
  @if $size {
31
31
  flex: 0 0 auto;
32
- width: percentage($size / $columns);
32
+ width: percentage(divide($size, $columns));
33
+
33
34
  } @else {
34
35
  flex: 1 1 0;
35
36
  max-width: 100%;
@@ -42,7 +43,7 @@
42
43
  }
43
44
 
44
45
  @mixin make-col-offset($size, $columns: $grid-columns) {
45
- $num: $size / $columns;
46
+ $num: divide($size, $columns);
46
47
  margin-left: if($num == 0, 0, percentage($num));
47
48
  }
48
49
 
@@ -54,7 +55,7 @@
54
55
  @mixin row-cols($count) {
55
56
  > * {
56
57
  flex: 0 0 auto;
57
- width: 100% / $count;
58
+ width: divide(100%, $count);
58
59
  }
59
60
  }
60
61
 
@@ -65,8 +66,8 @@
65
66
 
66
67
  @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
67
68
  @each $breakpoint in map-keys($breakpoints) {
69
+ // .row-cols defaults must all appear before .col overrides so they can be overridden.
68
70
  $infix: breakpoint-infix($breakpoint, $breakpoints);
69
-
70
71
  @include media-breakpoint-up($breakpoint, $breakpoints) {
71
72
  // Provide basic `.col-{bp}` classes for equal-width flexbox columns
72
73
  .col#{$infix} {
@@ -84,7 +85,13 @@
84
85
  }
85
86
  }
86
87
  }
88
+ }
89
+ }
87
90
 
91
+ @each $breakpoint in map-keys($breakpoints) {
92
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
93
+
94
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
88
95
  .col#{$infix}-auto {
89
96
  @include make-col-auto();
90
97
  }