bootstrap-scss 5.2.0 → 5.2.2
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -1
- package/_accordion.scss +149 -146
- package/_alert.scss +71 -71
- package/_badge.scss +38 -38
- package/_breadcrumb.scss +40 -40
- package/_button-group.scss +142 -142
- package/_buttons.scss +207 -186
- package/_card.scss +234 -234
- package/_carousel.scss +229 -229
- package/_close.scss +40 -40
- package/_containers.scss +41 -41
- package/_dropdown.scss +249 -248
- package/_forms.scss +9 -9
- package/_functions.scss +302 -302
- package/_grid.scss +33 -33
- package/_helpers.scss +10 -10
- package/_list-group.scss +192 -191
- package/_maps.scss +54 -54
- package/_mixins.scss +43 -43
- package/_modal.scss +237 -237
- package/_nav.scss +172 -172
- package/_navbar.scss +278 -276
- package/_offcanvas.scss +144 -143
- package/_pagination.scss +109 -109
- package/_placeholders.scss +51 -51
- package/_popover.scss +196 -196
- package/_progress.scss +59 -59
- package/_reboot.scss +610 -610
- package/_root.scss +73 -73
- package/_spinners.scss +85 -85
- package/_tables.scss +164 -164
- package/_toasts.scss +73 -70
- package/_tooltip.scss +120 -120
- package/_transitions.scss +27 -27
- package/_type.scss +106 -106
- package/_utilities.scss +647 -647
- package/_variables.scss +1634 -1633
- package/bootstrap-grid.scss +64 -64
- package/bootstrap-reboot.scss +9 -9
- package/bootstrap-utilities.scss +15 -15
- package/bootstrap.scss +51 -51
- package/forms/_floating-labels.scss +75 -74
- package/forms/_form-check.scss +175 -175
- package/forms/_form-control.scss +194 -194
- package/forms/_form-range.scss +91 -91
- package/forms/_form-select.scss +71 -71
- package/forms/_form-text.scss +11 -11
- package/forms/_input-group.scss +132 -129
- package/forms/_labels.scss +36 -36
- package/forms/_validation.scss +12 -12
- package/helpers/_clearfix.scss +3 -3
- package/helpers/_color-bg.scss +10 -10
- package/helpers/_colored-links.scss +12 -12
- package/helpers/_position.scss +36 -36
- 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 -15
- package/mixins/_backdrop.scss +14 -14
- package/mixins/_banner.scss +9 -9
- 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 -70
- package/mixins/_caret.scss +64 -64
- package/mixins/_clearfix.scss +9 -9
- package/mixins/_color-scheme.scss +7 -7
- package/mixins/_container.scss +11 -11
- package/mixins/_forms.scss +152 -152
- package/mixins/_gradients.scss +47 -47
- package/mixins/_grid.scss +151 -151
- package/mixins/_image.scss +16 -16
- package/mixins/_list-group.scss +24 -24
- package/mixins/_lists.scss +7 -7
- package/mixins/_pagination.scss +10 -10
- package/mixins/_reset-text.scss +17 -17
- package/mixins/_table-variants.scss +24 -24
- package/mixins/_transition.scss +26 -26
- package/mixins/_utilities.scss +97 -97
- 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,97 +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
|
-
// 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 (
|
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
|
+
// 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 (e.g. 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://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
|
-
}
|
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
|
+
}
|