bootstrap-scss 4.5.1 → 4.6.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|