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.
Files changed (87) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +5 -5
  3. package/_accordion.scss +146 -118
  4. package/_alert.scss +71 -57
  5. package/_badge.scss +38 -29
  6. package/_breadcrumb.scss +40 -28
  7. package/_button-group.scss +142 -139
  8. package/_buttons.scss +186 -111
  9. package/_card.scss +234 -216
  10. package/_carousel.scss +229 -229
  11. package/_close.scss +40 -40
  12. package/_containers.scss +41 -41
  13. package/_dropdown.scss +248 -240
  14. package/_forms.scss +9 -9
  15. package/_functions.scss +302 -302
  16. package/_grid.scss +33 -33
  17. package/_helpers.scss +10 -9
  18. package/_list-group.scss +191 -174
  19. package/_maps.scss +54 -0
  20. package/_mixins.scss +43 -43
  21. package/_modal.scss +237 -209
  22. package/_nav.scss +172 -139
  23. package/_navbar.scss +276 -335
  24. package/_offcanvas.scss +143 -83
  25. package/_pagination.scss +109 -64
  26. package/_placeholders.scss +51 -51
  27. package/_popover.scss +196 -158
  28. package/_progress.scss +59 -48
  29. package/_reboot.scss +610 -625
  30. package/_root.scss +73 -54
  31. package/_spinners.scss +85 -69
  32. package/_tables.scss +164 -151
  33. package/_toasts.scss +70 -51
  34. package/_tooltip.scss +120 -115
  35. package/_transitions.scss +27 -27
  36. package/_type.scss +106 -104
  37. package/_utilities.scss +647 -630
  38. package/_variables.scss +1633 -1639
  39. package/bootstrap-grid.scss +64 -67
  40. package/bootstrap-reboot.scss +9 -13
  41. package/bootstrap-utilities.scss +15 -18
  42. package/bootstrap.scss +51 -53
  43. package/forms/_floating-labels.scss +74 -63
  44. package/forms/_form-check.scss +175 -152
  45. package/forms/_form-control.scss +194 -219
  46. package/forms/_form-range.scss +91 -91
  47. package/forms/_form-select.scss +71 -70
  48. package/forms/_form-text.scss +11 -11
  49. package/forms/_input-group.scss +129 -121
  50. package/forms/_labels.scss +36 -36
  51. package/forms/_validation.scss +12 -12
  52. package/helpers/_clearfix.scss +3 -3
  53. package/helpers/_color-bg.scss +10 -0
  54. package/helpers/_colored-links.scss +12 -12
  55. package/helpers/_position.scss +36 -30
  56. package/helpers/_ratio.scss +26 -26
  57. package/helpers/_stacks.scss +15 -15
  58. package/helpers/_stretched-link.scss +15 -15
  59. package/helpers/_text-truncation.scss +7 -7
  60. package/helpers/_visually-hidden.scss +8 -8
  61. package/helpers/_vr.scss +8 -8
  62. package/mixins/_alert.scss +15 -11
  63. package/mixins/_backdrop.scss +14 -14
  64. package/mixins/_banner.scss +9 -0
  65. package/mixins/_border-radius.scss +78 -78
  66. package/mixins/_box-shadow.scss +18 -18
  67. package/mixins/_breakpoints.scss +127 -127
  68. package/mixins/_buttons.scss +70 -133
  69. package/mixins/_caret.scss +64 -64
  70. package/mixins/_clearfix.scss +9 -9
  71. package/mixins/_color-scheme.scss +7 -7
  72. package/mixins/_container.scss +11 -9
  73. package/mixins/_forms.scss +152 -144
  74. package/mixins/_gradients.scss +47 -47
  75. package/mixins/_grid.scss +151 -150
  76. package/mixins/_image.scss +16 -16
  77. package/mixins/_list-group.scss +24 -24
  78. package/mixins/_lists.scss +7 -7
  79. package/mixins/_pagination.scss +10 -31
  80. package/mixins/_reset-text.scss +17 -17
  81. package/mixins/_table-variants.scss +24 -21
  82. package/mixins/_transition.scss +26 -26
  83. package/mixins/_utilities.scss +97 -89
  84. package/mixins/_visually-hidden.scss +29 -29
  85. package/package.json +1 -1
  86. package/utilities/_api.scss +47 -47
  87. package/vendor/_rfs.scss +354 -354
@@ -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
- // State params to generate pseudo-classes
24
- $state: if(map-has-key($utility, state), map-get($utility, state), ());
25
-
26
- $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
27
-
28
- // Don't prefix if value key is null (eg. with shadow class)
29
- $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
30
-
31
- @if map-get($utility, rfs) {
32
- // Inside the media query
33
- @if $is-rfs-media-query {
34
- $val: rfs-value($value);
35
-
36
- // Do not render anything if fluid and non fluid values are the same
37
- $value: if($val == rfs-fluid-value($value), null, $val);
38
- }
39
- @else {
40
- $value: rfs-fluid-value($value);
41
- }
42
- }
43
-
44
- $is-css-var: map-get($utility, css-var);
45
- $is-local-vars: map-get($utility, local-vars);
46
- $is-rtl: map-get($utility, rtl);
47
-
48
- @if $value != null {
49
- @if $is-rtl == false {
50
- /* rtl:begin:remove */
51
- }
52
-
53
- @if $is-css-var {
54
- .#{$property-class + $infix + $property-class-modifier} {
55
- --#{$variable-prefix}#{$property-class}: #{$value};
56
- }
57
-
58
- @each $pseudo in $state {
59
- .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
60
- --#{$variable-prefix}#{$property-class}: #{$value};
61
- }
62
- }
63
- } @else {
64
- .#{$property-class + $infix + $property-class-modifier} {
65
- @each $property in $properties {
66
- @if $is-local-vars {
67
- @each $local-var, $value in $is-local-vars {
68
- --#{$variable-prefix}#{$local-var}: #{$value};
69
- }
70
- }
71
- #{$property}: $value if($enable-important-utilities, !important, null);
72
- }
73
- }
74
-
75
- @each $pseudo in $state {
76
- .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
77
- @each $property in $properties {
78
- #{$property}: $value if($enable-important-utilities, !important, null);
79
- }
80
- }
81
- }
82
- }
83
-
84
- @if $is-rtl == false {
85
- /* rtl:end:remove */
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://hugogiraudel.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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bootstrap-scss",
3
- "version": "5.1.1",
3
+ "version": "5.2.0",
4
4
  "description": "Bootstrap's SCSS files (only)",
5
5
  "main": "bootstrap.scss",
6
6
  "repository": {
@@ -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
+ }