bootstrap-scss 5.1.1 → 5.2.0
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 +5 -5
- package/_accordion.scss +146 -118
- package/_alert.scss +71 -57
- package/_badge.scss +38 -29
- package/_breadcrumb.scss +40 -28
- package/_button-group.scss +142 -139
- package/_buttons.scss +186 -111
- package/_card.scss +234 -216
- package/_carousel.scss +229 -229
- package/_close.scss +40 -40
- package/_containers.scss +41 -41
- package/_dropdown.scss +248 -240
- package/_forms.scss +9 -9
- package/_functions.scss +302 -302
- package/_grid.scss +33 -33
- package/_helpers.scss +10 -9
- package/_list-group.scss +191 -174
- package/_maps.scss +54 -0
- package/_mixins.scss +43 -43
- package/_modal.scss +237 -209
- package/_nav.scss +172 -139
- package/_navbar.scss +276 -335
- package/_offcanvas.scss +143 -83
- package/_pagination.scss +109 -64
- package/_placeholders.scss +51 -51
- package/_popover.scss +196 -158
- package/_progress.scss +59 -48
- package/_reboot.scss +610 -625
- package/_root.scss +73 -54
- package/_spinners.scss +85 -69
- package/_tables.scss +164 -151
- package/_toasts.scss +70 -51
- package/_tooltip.scss +120 -115
- package/_transitions.scss +27 -27
- package/_type.scss +106 -104
- package/_utilities.scss +647 -630
- package/_variables.scss +1633 -1639
- package/bootstrap-grid.scss +64 -67
- package/bootstrap-reboot.scss +9 -13
- package/bootstrap-utilities.scss +15 -18
- package/bootstrap.scss +51 -53
- package/forms/_floating-labels.scss +74 -63
- package/forms/_form-check.scss +175 -152
- package/forms/_form-control.scss +194 -219
- package/forms/_form-range.scss +91 -91
- package/forms/_form-select.scss +71 -70
- package/forms/_form-text.scss +11 -11
- package/forms/_input-group.scss +129 -121
- package/forms/_labels.scss +36 -36
- package/forms/_validation.scss +12 -12
- package/helpers/_clearfix.scss +3 -3
- package/helpers/_color-bg.scss +10 -0
- package/helpers/_colored-links.scss +12 -12
- package/helpers/_position.scss +36 -30
- package/helpers/_ratio.scss +26 -26
- package/helpers/_stacks.scss +15 -15
- package/helpers/_stretched-link.scss +15 -15
- package/helpers/_text-truncation.scss +7 -7
- package/helpers/_visually-hidden.scss +8 -8
- package/helpers/_vr.scss +8 -8
- package/mixins/_alert.scss +15 -11
- package/mixins/_backdrop.scss +14 -14
- package/mixins/_banner.scss +9 -0
- package/mixins/_border-radius.scss +78 -78
- package/mixins/_box-shadow.scss +18 -18
- package/mixins/_breakpoints.scss +127 -127
- package/mixins/_buttons.scss +70 -133
- package/mixins/_caret.scss +64 -64
- package/mixins/_clearfix.scss +9 -9
- package/mixins/_color-scheme.scss +7 -7
- package/mixins/_container.scss +11 -9
- package/mixins/_forms.scss +152 -144
- package/mixins/_gradients.scss +47 -47
- package/mixins/_grid.scss +151 -150
- package/mixins/_image.scss +16 -16
- package/mixins/_list-group.scss +24 -24
- package/mixins/_lists.scss +7 -7
- package/mixins/_pagination.scss +10 -31
- package/mixins/_reset-text.scss +17 -17
- package/mixins/_table-variants.scss +24 -21
- package/mixins/_transition.scss +26 -26
- package/mixins/_utilities.scss +97 -89
- package/mixins/_visually-hidden.scss +29 -29
- package/package.json +1 -1
- package/utilities/_api.scss +47 -47
- package/vendor/_rfs.scss +354 -354
package/mixins/_utilities.scss
CHANGED
@@ -1,89 +1,97 @@
|
|
1
|
-
// Utility generator
|
2
|
-
// Used to generate utilities & print utilities
|
3
|
-
@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
|
4
|
-
$values: map-get($utility, values);
|
5
|
-
|
6
|
-
// If the values are a list or string, convert it into a map
|
7
|
-
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
|
8
|
-
$values: zip($values, $values);
|
9
|
-
}
|
10
|
-
|
11
|
-
@each $key, $value in $values {
|
12
|
-
$properties: map-get($utility, property);
|
13
|
-
|
14
|
-
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
|
15
|
-
@if type-of($properties) == "string" {
|
16
|
-
$properties: append((), $properties);
|
17
|
-
}
|
18
|
-
|
19
|
-
// Use custom class if present
|
20
|
-
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
|
21
|
-
$property-class: if($property-class == null, "", $property-class);
|
22
|
-
|
23
|
-
//
|
24
|
-
$
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
$
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
$
|
38
|
-
|
39
|
-
|
40
|
-
$value: rfs-fluid-value($value);
|
41
|
-
}
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
}
|
1
|
+
// Utility generator
|
2
|
+
// Used to generate utilities & print utilities
|
3
|
+
@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
|
4
|
+
$values: map-get($utility, values);
|
5
|
+
|
6
|
+
// If the values are a list or string, convert it into a map
|
7
|
+
@if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
|
8
|
+
$values: zip($values, $values);
|
9
|
+
}
|
10
|
+
|
11
|
+
@each $key, $value in $values {
|
12
|
+
$properties: map-get($utility, property);
|
13
|
+
|
14
|
+
// Multiple properties are possible, for example with vertical or horizontal margins or paddings
|
15
|
+
@if type-of($properties) == "string" {
|
16
|
+
$properties: append((), $properties);
|
17
|
+
}
|
18
|
+
|
19
|
+
// Use custom class if present
|
20
|
+
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
|
21
|
+
$property-class: if($property-class == null, "", $property-class);
|
22
|
+
|
23
|
+
// Use custom CSS variable name if present, otherwise default to `class`
|
24
|
+
$css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
|
25
|
+
|
26
|
+
// State params to generate pseudo-classes
|
27
|
+
$state: if(map-has-key($utility, state), map-get($utility, state), ());
|
28
|
+
|
29
|
+
$infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
|
30
|
+
|
31
|
+
// Don't prefix if value key is null (eg. with shadow class)
|
32
|
+
$property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
|
33
|
+
|
34
|
+
@if map-get($utility, rfs) {
|
35
|
+
// Inside the media query
|
36
|
+
@if $is-rfs-media-query {
|
37
|
+
$val: rfs-value($value);
|
38
|
+
|
39
|
+
// Do not render anything if fluid and non fluid values are the same
|
40
|
+
$value: if($val == rfs-fluid-value($value), null, $val);
|
41
|
+
}
|
42
|
+
@else {
|
43
|
+
$value: rfs-fluid-value($value);
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
$is-css-var: map-get($utility, css-var);
|
48
|
+
$is-local-vars: map-get($utility, local-vars);
|
49
|
+
$is-rtl: map-get($utility, rtl);
|
50
|
+
|
51
|
+
@if $value != null {
|
52
|
+
@if $is-rtl == false {
|
53
|
+
/* rtl:begin:remove */
|
54
|
+
}
|
55
|
+
|
56
|
+
@if $is-css-var {
|
57
|
+
.#{$property-class + $infix + $property-class-modifier} {
|
58
|
+
--#{$prefix}#{$css-variable-name}: #{$value};
|
59
|
+
}
|
60
|
+
|
61
|
+
@each $pseudo in $state {
|
62
|
+
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
63
|
+
--#{$prefix}#{$css-variable-name}: #{$value};
|
64
|
+
}
|
65
|
+
}
|
66
|
+
} @else {
|
67
|
+
.#{$property-class + $infix + $property-class-modifier} {
|
68
|
+
@each $property in $properties {
|
69
|
+
@if $is-local-vars {
|
70
|
+
@each $local-var, $variable in $is-local-vars {
|
71
|
+
--#{$prefix}#{$local-var}: #{$variable};
|
72
|
+
}
|
73
|
+
}
|
74
|
+
#{$property}: $value if($enable-important-utilities, !important, null);
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
@each $pseudo in $state {
|
79
|
+
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
80
|
+
@each $property in $properties {
|
81
|
+
@if $is-local-vars {
|
82
|
+
@each $local-var, $variable in $is-local-vars {
|
83
|
+
--#{$prefix}#{$local-var}: #{$variable};
|
84
|
+
}
|
85
|
+
}
|
86
|
+
#{$property}: $value if($enable-important-utilities, !important, null);
|
87
|
+
}
|
88
|
+
}
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
92
|
+
@if $is-rtl == false {
|
93
|
+
/* rtl:end:remove */
|
94
|
+
}
|
95
|
+
}
|
96
|
+
}
|
97
|
+
}
|
@@ -1,29 +1,29 @@
|
|
1
|
-
// stylelint-disable declaration-no-important
|
2
|
-
|
3
|
-
// Hide content visually while keeping it accessible to assistive technologies
|
4
|
-
//
|
5
|
-
// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
|
6
|
-
// See: https://
|
7
|
-
|
8
|
-
@mixin visually-hidden() {
|
9
|
-
position: absolute !important;
|
10
|
-
width: 1px !important;
|
11
|
-
height: 1px !important;
|
12
|
-
padding: 0 !important;
|
13
|
-
margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
|
14
|
-
overflow: hidden !important;
|
15
|
-
clip: rect(0, 0, 0, 0) !important;
|
16
|
-
white-space: nowrap !important;
|
17
|
-
border: 0 !important;
|
18
|
-
}
|
19
|
-
|
20
|
-
// Use to only display content when it's focused, or one of its child elements is focused
|
21
|
-
// (i.e. when focus is within the element/container that the class was applied to)
|
22
|
-
//
|
23
|
-
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
24
|
-
|
25
|
-
@mixin visually-hidden-focusable() {
|
26
|
-
&:not(:focus):not(:focus-within) {
|
27
|
-
@include visually-hidden();
|
28
|
-
}
|
29
|
-
}
|
1
|
+
// stylelint-disable declaration-no-important
|
2
|
+
|
3
|
+
// Hide content visually while keeping it accessible to assistive technologies
|
4
|
+
//
|
5
|
+
// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
|
6
|
+
// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
|
7
|
+
|
8
|
+
@mixin visually-hidden() {
|
9
|
+
position: absolute !important;
|
10
|
+
width: 1px !important;
|
11
|
+
height: 1px !important;
|
12
|
+
padding: 0 !important;
|
13
|
+
margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
|
14
|
+
overflow: hidden !important;
|
15
|
+
clip: rect(0, 0, 0, 0) !important;
|
16
|
+
white-space: nowrap !important;
|
17
|
+
border: 0 !important;
|
18
|
+
}
|
19
|
+
|
20
|
+
// Use to only display content when it's focused, or one of its child elements is focused
|
21
|
+
// (i.e. when focus is within the element/container that the class was applied to)
|
22
|
+
//
|
23
|
+
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
24
|
+
|
25
|
+
@mixin visually-hidden-focusable() {
|
26
|
+
&:not(:focus):not(:focus-within) {
|
27
|
+
@include visually-hidden();
|
28
|
+
}
|
29
|
+
}
|
package/package.json
CHANGED
package/utilities/_api.scss
CHANGED
@@ -1,47 +1,47 @@
|
|
1
|
-
// Loop over each breakpoint
|
2
|
-
@each $breakpoint in map-keys($grid-breakpoints) {
|
3
|
-
|
4
|
-
// Generate media query if needed
|
5
|
-
@include media-breakpoint-up($breakpoint) {
|
6
|
-
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
7
|
-
|
8
|
-
// Loop over each utility property
|
9
|
-
@each $key, $utility in $utilities {
|
10
|
-
// The utility can be disabled with `false`, thus check if the utility is a map first
|
11
|
-
// Only proceed if responsive media queries are enabled or if it's the base media query
|
12
|
-
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
|
13
|
-
@include generate-utility($utility, $infix);
|
14
|
-
}
|
15
|
-
}
|
16
|
-
}
|
17
|
-
}
|
18
|
-
|
19
|
-
// RFS rescaling
|
20
|
-
@media (min-width: $rfs-mq-value) {
|
21
|
-
@each $breakpoint in map-keys($grid-breakpoints) {
|
22
|
-
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
23
|
-
|
24
|
-
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
|
25
|
-
// Loop over each utility property
|
26
|
-
@each $key, $utility in $utilities {
|
27
|
-
// The utility can be disabled with `false`, thus check if the utility is a map first
|
28
|
-
// Only proceed if responsive media queries are enabled or if it's the base media query
|
29
|
-
@if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
|
30
|
-
@include generate-utility($utility, $infix, true);
|
31
|
-
}
|
32
|
-
}
|
33
|
-
}
|
34
|
-
}
|
35
|
-
}
|
36
|
-
|
37
|
-
|
38
|
-
// Print utilities
|
39
|
-
@media print {
|
40
|
-
@each $key, $utility in $utilities {
|
41
|
-
// The utility can be disabled with `false`, thus check if the utility is a map first
|
42
|
-
// Then check if the utility needs print styles
|
43
|
-
@if type-of($utility) == "map" and map-get($utility, print) == true {
|
44
|
-
@include generate-utility($utility, "-print");
|
45
|
-
}
|
46
|
-
}
|
47
|
-
}
|
1
|
+
// Loop over each breakpoint
|
2
|
+
@each $breakpoint in map-keys($grid-breakpoints) {
|
3
|
+
|
4
|
+
// Generate media query if needed
|
5
|
+
@include media-breakpoint-up($breakpoint) {
|
6
|
+
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
7
|
+
|
8
|
+
// Loop over each utility property
|
9
|
+
@each $key, $utility in $utilities {
|
10
|
+
// The utility can be disabled with `false`, thus check if the utility is a map first
|
11
|
+
// Only proceed if responsive media queries are enabled or if it's the base media query
|
12
|
+
@if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
|
13
|
+
@include generate-utility($utility, $infix);
|
14
|
+
}
|
15
|
+
}
|
16
|
+
}
|
17
|
+
}
|
18
|
+
|
19
|
+
// RFS rescaling
|
20
|
+
@media (min-width: $rfs-mq-value) {
|
21
|
+
@each $breakpoint in map-keys($grid-breakpoints) {
|
22
|
+
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
23
|
+
|
24
|
+
@if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
|
25
|
+
// Loop over each utility property
|
26
|
+
@each $key, $utility in $utilities {
|
27
|
+
// The utility can be disabled with `false`, thus check if the utility is a map first
|
28
|
+
// Only proceed if responsive media queries are enabled or if it's the base media query
|
29
|
+
@if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
|
30
|
+
@include generate-utility($utility, $infix, true);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
|
37
|
+
|
38
|
+
// Print utilities
|
39
|
+
@media print {
|
40
|
+
@each $key, $utility in $utilities {
|
41
|
+
// The utility can be disabled with `false`, thus check if the utility is a map first
|
42
|
+
// Then check if the utility needs print styles
|
43
|
+
@if type-of($utility) == "map" and map-get($utility, print) == true {
|
44
|
+
@include generate-utility($utility, "-print");
|
45
|
+
}
|
46
|
+
}
|
47
|
+
}
|