bootstrap-scss 4.5.1 → 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.
- package/LICENSE +2 -2
- package/README.md +7 -7
- package/_alert.scss +1 -0
- package/_breadcrumb.scss +1 -3
- package/_card.scss +9 -9
- package/_carousel.scss +6 -3
- package/_custom-forms.scss +15 -12
- package/_dropdown.scss +2 -2
- package/_forms.scss +10 -10
- package/_functions.scss +50 -1
- package/_images.scss +1 -1
- package/_input-group.scss +22 -3
- package/_jumbotron.scss +1 -1
- package/_list-group.scss +1 -1
- package/_modal.scss +2 -2
- package/_nav.scss +1 -4
- package/_navbar.scss +10 -2
- package/_pagination.scss +2 -2
- package/_popover.scss +9 -9
- package/_print.scss +0 -9
- package/_progress.scss +1 -1
- package/_reboot.scss +16 -12
- package/_root.scss +0 -1
- package/_spinners.scss +15 -6
- package/_tooltip.scss +4 -4
- package/_type.scss +1 -1
- package/_variables.scss +22 -14
- package/bootstrap-grid.scss +4 -3
- package/bootstrap-reboot.scss +3 -3
- package/bootstrap.scss +3 -3
- package/mixins/_border-radius.scss +1 -1
- package/mixins/_forms.scss +20 -3
- package/mixins/_grid-framework.scss +2 -2
- package/mixins/_grid.scss +22 -13
- package/mixins/_image.scss +1 -1
- package/mixins/_screen-reader.scss +2 -2
- package/mixins/_transition.scss +1 -1
- package/package.json +1 -1
- package/utilities/_borders.scss +1 -1
- package/utilities/_embed.scss +1 -1
- package/utilities/_spacing.scss +1 -1
- package/utilities/_text.scss +2 -2
- package/vendor/_rfs.scss +126 -102
package/_reboot.scss
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
// stylelint-disable
|
1
|
+
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
2
2
|
|
3
3
|
// Reboot
|
4
4
|
//
|
@@ -278,10 +278,14 @@ caption {
|
|
278
278
|
caption-side: bottom;
|
279
279
|
}
|
280
280
|
|
281
|
+
// 1. Removes font-weight bold by inheriting
|
282
|
+
// 2. Matches default `<td>` alignment by inheriting `text-align`.
|
283
|
+
// 3. Fix alignment for Safari
|
284
|
+
|
281
285
|
th {
|
282
|
-
|
283
|
-
|
284
|
-
text-align:
|
286
|
+
font-weight: $table-th-font-weight; // 1
|
287
|
+
text-align: inherit; // 2
|
288
|
+
text-align: -webkit-match-parent; // 3
|
285
289
|
}
|
286
290
|
|
287
291
|
|
@@ -299,17 +303,17 @@ label {
|
|
299
303
|
//
|
300
304
|
// Details at https://github.com/twbs/bootstrap/issues/24093
|
301
305
|
button {
|
302
|
-
// stylelint-disable-next-line property-
|
306
|
+
// stylelint-disable-next-line property-disallowed-list
|
303
307
|
border-radius: 0;
|
304
308
|
}
|
305
309
|
|
306
|
-
//
|
307
|
-
//
|
308
|
-
//
|
309
|
-
//
|
310
|
-
|
311
|
-
|
312
|
-
outline:
|
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;
|
313
317
|
}
|
314
318
|
|
315
319
|
input,
|
package/_root.scss
CHANGED
package/_spinners.scss
CHANGED
@@ -10,12 +10,12 @@
|
|
10
10
|
display: inline-block;
|
11
11
|
width: $spinner-width;
|
12
12
|
height: $spinner-height;
|
13
|
-
vertical-align:
|
13
|
+
vertical-align: $spinner-vertical-align;
|
14
14
|
border: $spinner-border-width solid currentColor;
|
15
15
|
border-right-color: transparent;
|
16
|
-
// stylelint-disable-next-line property-
|
16
|
+
// stylelint-disable-next-line property-disallowed-list
|
17
17
|
border-radius: 50%;
|
18
|
-
animation:
|
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:
|
45
|
+
vertical-align: $spinner-vertical-align;
|
46
46
|
background-color: currentColor;
|
47
|
-
// stylelint-disable-next-line property-
|
47
|
+
// stylelint-disable-next-line property-disallowed-list
|
48
48
|
border-radius: 50%;
|
49
49
|
opacity: 0;
|
50
|
-
animation:
|
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
|
+
}
|
package/_tooltip.scss
CHANGED
@@ -37,7 +37,7 @@
|
|
37
37
|
|
38
38
|
&::before {
|
39
39
|
top: 0;
|
40
|
-
border-width: $tooltip-arrow-height ($tooltip-arrow-width
|
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
|
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
|
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
|
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
|
}
|
package/_type.scss
CHANGED
package/_variables.scss
CHANGED
@@ -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
|
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;
|
@@ -363,6 +363,7 @@ $table-border-color: $border-color !default;
|
|
363
363
|
|
364
364
|
$table-head-bg: $gray-200 !default;
|
365
365
|
$table-head-color: $gray-700 !default;
|
366
|
+
$table-th-font-weight: null !default;
|
366
367
|
|
367
368
|
$table-dark-color: $white !default;
|
368
369
|
$table-dark-bg: $gray-800 !default;
|
@@ -494,7 +495,7 @@ $input-height-border: $input-border-width * 2 !default;
|
|
494
495
|
|
495
496
|
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
|
496
497
|
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
|
497
|
-
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y
|
498
|
+
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
|
498
499
|
|
499
500
|
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
|
500
501
|
$input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
|
@@ -564,7 +565,7 @@ $custom-radio-indicator-border-radius: 50% !default;
|
|
564
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;
|
565
566
|
|
566
567
|
$custom-switch-width: $custom-control-indicator-size * 1.75 !default;
|
567
|
-
$custom-switch-indicator-border-radius: $custom-control-indicator-size
|
568
|
+
$custom-switch-indicator-border-radius: $custom-control-indicator-size * .5 !default;
|
568
569
|
$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
|
569
570
|
|
570
571
|
$custom-select-padding-y: $input-padding-y !default;
|
@@ -582,7 +583,7 @@ $custom-select-disabled-bg: $gray-200 !default;
|
|
582
583
|
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
583
584
|
$custom-select-indicator-color: $gray-800 !default;
|
584
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;
|
585
|
-
$custom-select-background: escape-svg($custom-select-indicator)
|
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)
|
586
587
|
|
587
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;
|
588
589
|
$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
|
@@ -709,12 +710,12 @@ $nav-pills-link-active-color: $component-active-color !default;
|
|
709
710
|
$nav-pills-link-active-bg: $component-active-bg !default;
|
710
711
|
|
711
712
|
$nav-divider-color: $gray-200 !default;
|
712
|
-
$nav-divider-margin-y: $spacer
|
713
|
+
$nav-divider-margin-y: $spacer * .5 !default;
|
713
714
|
|
714
715
|
|
715
716
|
// Navbar
|
716
717
|
|
717
|
-
$navbar-padding-y: $spacer
|
718
|
+
$navbar-padding-y: $spacer * .5 !default;
|
718
719
|
$navbar-padding-x: $spacer !default;
|
719
720
|
|
720
721
|
$navbar-nav-link-padding-x: .5rem !default;
|
@@ -723,13 +724,15 @@ $navbar-brand-font-size: $font-size-lg !default;
|
|
723
724
|
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
|
724
725
|
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
|
725
726
|
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
|
726
|
-
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height)
|
727
|
+
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
|
727
728
|
|
728
729
|
$navbar-toggler-padding-y: .25rem !default;
|
729
730
|
$navbar-toggler-padding-x: .75rem !default;
|
730
731
|
$navbar-toggler-font-size: $font-size-lg !default;
|
731
732
|
$navbar-toggler-border-radius: $btn-border-radius !default;
|
732
733
|
|
734
|
+
$navbar-nav-scroll-max-height: 75vh !default;
|
735
|
+
|
733
736
|
$navbar-dark-color: rgba($white, .5) !default;
|
734
737
|
$navbar-dark-hover-color: rgba($white, .75) !default;
|
735
738
|
$navbar-dark-active-color: $white !default;
|
@@ -755,6 +758,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
|
|
755
758
|
// Dropdown menu container and contents.
|
756
759
|
|
757
760
|
$dropdown-min-width: 10rem !default;
|
761
|
+
$dropdown-padding-x: 0 !default;
|
758
762
|
$dropdown-padding-y: .5rem !default;
|
759
763
|
$dropdown-spacer: .125rem !default;
|
760
764
|
$dropdown-font-size: $font-size-base !default;
|
@@ -770,12 +774,12 @@ $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
|
|
770
774
|
|
771
775
|
$dropdown-link-color: $gray-900 !default;
|
772
776
|
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
|
773
|
-
$dropdown-link-hover-bg: $gray-
|
777
|
+
$dropdown-link-hover-bg: $gray-200 !default;
|
774
778
|
|
775
779
|
$dropdown-link-active-color: $component-active-color !default;
|
776
780
|
$dropdown-link-active-bg: $component-active-bg !default;
|
777
781
|
|
778
|
-
$dropdown-link-disabled-color: $gray-
|
782
|
+
$dropdown-link-disabled-color: $gray-500 !default;
|
779
783
|
|
780
784
|
$dropdown-item-padding-y: .25rem !default;
|
781
785
|
$dropdown-item-padding-x: 1.5rem !default;
|
@@ -814,6 +818,9 @@ $pagination-disabled-color: $gray-600 !default;
|
|
814
818
|
$pagination-disabled-bg: $white !default;
|
815
819
|
$pagination-disabled-border-color: $gray-300 !default;
|
816
820
|
|
821
|
+
$pagination-border-radius-sm: $border-radius-sm !default;
|
822
|
+
$pagination-border-radius-lg: $border-radius-lg !default;
|
823
|
+
|
817
824
|
|
818
825
|
// Jumbotron
|
819
826
|
|
@@ -838,7 +845,7 @@ $card-bg: $white !default;
|
|
838
845
|
|
839
846
|
$card-img-overlay-padding: 1.25rem !default;
|
840
847
|
|
841
|
-
$card-group-margin: $grid-gutter-width
|
848
|
+
$card-group-margin: $grid-gutter-width * .5 !default;
|
842
849
|
$card-deck-margin: $card-group-margin !default;
|
843
850
|
|
844
851
|
$card-columns-count: 3 !default;
|
@@ -1094,9 +1101,10 @@ $carousel-transition: transform $carousel-transition-duration eas
|
|
1094
1101
|
|
1095
1102
|
// Spinners
|
1096
1103
|
|
1097
|
-
$spinner-width:
|
1098
|
-
$spinner-height:
|
1099
|
-
$spinner-
|
1104
|
+
$spinner-width: 2rem !default;
|
1105
|
+
$spinner-height: $spinner-width !default;
|
1106
|
+
$spinner-vertical-align: -.125em !default;
|
1107
|
+
$spinner-border-width: .25em !default;
|
1100
1108
|
|
1101
1109
|
$spinner-width-sm: 1rem !default;
|
1102
1110
|
$spinner-height-sm: $spinner-width-sm !default;
|
package/bootstrap-grid.scss
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
/*!
|
2
|
-
* Bootstrap Grid v4.
|
3
|
-
* Copyright 2011-
|
4
|
-
* Copyright 2011-
|
2
|
+
* Bootstrap Grid v4.6.1 (https://getbootstrap.com/)
|
3
|
+
* Copyright 2011-2021 The Bootstrap Authors
|
4
|
+
* Copyright 2011-2021 Twitter, Inc.
|
5
5
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
6
6
|
*/
|
7
7
|
|
@@ -19,6 +19,7 @@ html {
|
|
19
19
|
@import "functions";
|
20
20
|
@import "variables";
|
21
21
|
|
22
|
+
@import "mixins/deprecate";
|
22
23
|
@import "mixins/breakpoints";
|
23
24
|
@import "mixins/grid-framework";
|
24
25
|
@import "mixins/grid";
|
package/bootstrap-reboot.scss
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
/*!
|
2
|
-
* Bootstrap Reboot v4.
|
3
|
-
* Copyright 2011-
|
4
|
-
* Copyright 2011-
|
2
|
+
* Bootstrap Reboot v4.6.1 (https://getbootstrap.com/)
|
3
|
+
* Copyright 2011-2021 The Bootstrap Authors
|
4
|
+
* Copyright 2011-2021 Twitter, Inc.
|
5
5
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
6
6
|
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
7
7
|
*/
|
package/bootstrap.scss
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
/*!
|
2
|
-
* Bootstrap v4.
|
3
|
-
* Copyright 2011-
|
4
|
-
* Copyright 2011-
|
2
|
+
* Bootstrap v4.6.1 (https://getbootstrap.com/)
|
3
|
+
* Copyright 2011-2021 The Bootstrap Authors
|
4
|
+
* Copyright 2011-2021 Twitter, Inc.
|
5
5
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
6
6
|
*/
|
7
7
|
|
package/mixins/_forms.scss
CHANGED
@@ -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,
|
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 {
|
package/mixins/_grid.scss
CHANGED
@@ -4,18 +4,27 @@
|
|
4
4
|
|
5
5
|
@mixin make-container($gutter: $grid-gutter-width) {
|
6
6
|
width: 100%;
|
7
|
-
padding-right: $gutter
|
8
|
-
padding-left: $gutter
|
7
|
+
padding-right: $gutter * .5;
|
8
|
+
padding-left: $gutter * .5;
|
9
9
|
margin-right: auto;
|
10
10
|
margin-left: auto;
|
11
11
|
}
|
12
12
|
|
13
13
|
@mixin make-row($gutter: $grid-gutter-width) {
|
14
14
|
display: flex;
|
15
|
-
flex: 1 0 100%;
|
16
15
|
flex-wrap: wrap;
|
17
|
-
margin-right: -$gutter
|
18
|
-
margin-left: -$gutter
|
16
|
+
margin-right: -$gutter * .5;
|
17
|
+
margin-left: -$gutter * .5;
|
18
|
+
}
|
19
|
+
|
20
|
+
// For each breakpoint, define the maximum width of the container in a media query
|
21
|
+
@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
22
|
+
@each $breakpoint, $container-max-width in $max-widths {
|
23
|
+
@include media-breakpoint-up($breakpoint, $breakpoints) {
|
24
|
+
max-width: $container-max-width;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
@include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
|
19
28
|
}
|
20
29
|
|
21
30
|
@mixin make-col-ready($gutter: $grid-gutter-width) {
|
@@ -24,16 +33,16 @@
|
|
24
33
|
// always setting `width: 100%;`. This works because we use `flex` values
|
25
34
|
// later on to override this initial width.
|
26
35
|
width: 100%;
|
27
|
-
padding-right: $gutter
|
28
|
-
padding-left: $gutter
|
36
|
+
padding-right: $gutter * .5;
|
37
|
+
padding-left: $gutter * .5;
|
29
38
|
}
|
30
39
|
|
31
40
|
@mixin make-col($size, $columns: $grid-columns) {
|
32
|
-
flex: 0 0 percentage($size
|
41
|
+
flex: 0 0 percentage(divide($size, $columns));
|
33
42
|
// Add a `max-width` to ensure content within each column does not blow out
|
34
43
|
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
35
44
|
// do not appear to require this.
|
36
|
-
max-width: percentage($size
|
45
|
+
max-width: percentage(divide($size, $columns));
|
37
46
|
}
|
38
47
|
|
39
48
|
@mixin make-col-auto() {
|
@@ -43,7 +52,7 @@
|
|
43
52
|
}
|
44
53
|
|
45
54
|
@mixin make-col-offset($size, $columns: $grid-columns) {
|
46
|
-
$num: $size
|
55
|
+
$num: divide($size, $columns);
|
47
56
|
margin-left: if($num == 0, 0, percentage($num));
|
48
57
|
}
|
49
58
|
|
@@ -53,8 +62,8 @@
|
|
53
62
|
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
|
54
63
|
// style grid.
|
55
64
|
@mixin row-cols($count) {
|
56
|
-
|
57
|
-
flex: 0 0 100
|
58
|
-
max-width: 100
|
65
|
+
> * {
|
66
|
+
flex: 0 0 divide(100%, $count);
|
67
|
+
max-width: divide(100%, $count);
|
59
68
|
}
|
60
69
|
}
|
package/mixins/_image.scss
CHANGED
@@ -26,7 +26,7 @@
|
|
26
26
|
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
|
27
27
|
// but doesn't convert dppx=>dpi.
|
28
28
|
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
|
29
|
-
// Compatibility info: https://caniuse.com
|
29
|
+
// Compatibility info: https://caniuse.com/css-media-resolution
|
30
30
|
@media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
|
31
31
|
only screen and (min-resolution: 2dppx) { // Standardized
|
32
32
|
background-image: url($file-2x);
|
@@ -1,7 +1,7 @@
|
|
1
1
|
// Only display content to screen readers
|
2
2
|
//
|
3
|
-
// See: https://a11yproject.com/posts/how-to-hide-content/
|
4
|
-
// See: https://
|
3
|
+
// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
|
4
|
+
// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
|
5
5
|
|
6
6
|
@mixin sr-only() {
|
7
7
|
position: absolute;
|
package/mixins/_transition.scss
CHANGED
package/package.json
CHANGED
package/utilities/_borders.scss
CHANGED
package/utilities/_embed.scss
CHANGED
@@ -33,7 +33,7 @@
|
|
33
33
|
|
34
34
|
.embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
|
35
35
|
&::before {
|
36
|
-
padding-top: percentage($embed-responsive-aspect-ratio-y
|
36
|
+
padding-top: percentage(divide($embed-responsive-aspect-ratio-y, $embed-responsive-aspect-ratio-x));
|
37
37
|
}
|
38
38
|
}
|
39
39
|
}
|
package/utilities/_spacing.scss
CHANGED
@@ -30,7 +30,7 @@
|
|
30
30
|
|
31
31
|
// Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
|
32
32
|
@each $size, $length in $spacers {
|
33
|
-
@if $size != 0 {
|
33
|
+
@if "#{$size}" != "0" {
|
34
34
|
.m#{$infix}-n#{$size} { margin: -$length !important; }
|
35
35
|
.mt#{$infix}-n#{$size},
|
36
36
|
.my#{$infix}-n#{$size} {
|
package/utilities/_text.scss
CHANGED
@@ -63,8 +63,8 @@
|
|
63
63
|
.text-decoration-none { text-decoration: none !important; }
|
64
64
|
|
65
65
|
.text-break {
|
66
|
-
word-break: break-word !important; //
|
67
|
-
|
66
|
+
word-break: break-word !important; // Deprecated, but avoids issues with flex containers
|
67
|
+
word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy
|
68
68
|
}
|
69
69
|
|
70
70
|
// Reset
|