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
package/mixins/_grid.scss CHANGED
@@ -1,150 +1,151 @@
1
- // Grid system
2
- //
3
- // Generate semantic grid columns with these mixins.
4
-
5
- @mixin make-row($gutter: $grid-gutter-width) {
6
- --#{$variable-prefix}gutter-x: #{$gutter};
7
- --#{$variable-prefix}gutter-y: 0;
8
- display: flex;
9
- flex-wrap: wrap;
10
- margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
11
- margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
12
- margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
13
- }
14
-
15
- @mixin make-col-ready($gutter: $grid-gutter-width) {
16
- // Add box sizing if only the grid is loaded
17
- box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
18
- // Prevent columns from becoming too narrow when at smaller grid tiers by
19
- // always setting `width: 100%;`. This works because we set the width
20
- // later on to override this initial width.
21
- flex-shrink: 0;
22
- width: 100%;
23
- max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
24
- padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
25
- padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
26
- margin-top: var(--#{$variable-prefix}gutter-y);
27
- }
28
-
29
- @mixin make-col($size: false, $columns: $grid-columns) {
30
- @if $size {
31
- flex: 0 0 auto;
32
- width: percentage(divide($size, $columns));
33
-
34
- } @else {
35
- flex: 1 1 0;
36
- max-width: 100%;
37
- }
38
- }
39
-
40
- @mixin make-col-auto() {
41
- flex: 0 0 auto;
42
- width: auto;
43
- }
44
-
45
- @mixin make-col-offset($size, $columns: $grid-columns) {
46
- $num: divide($size, $columns);
47
- margin-left: if($num == 0, 0, percentage($num));
48
- }
49
-
50
- // Row columns
51
- //
52
- // Specify on a parent element(e.g., .row) to force immediate children into NN
53
- // numberof columns. Supports wrapping to new lines, but does not do a Masonry
54
- // style grid.
55
- @mixin row-cols($count) {
56
- > * {
57
- flex: 0 0 auto;
58
- width: divide(100%, $count);
59
- }
60
- }
61
-
62
- // Framework grid generation
63
- //
64
- // Used only by Bootstrap to generate the correct number of grid classes given
65
- // any value of `$grid-columns`.
66
-
67
- @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
68
- @each $breakpoint in map-keys($breakpoints) {
69
- $infix: breakpoint-infix($breakpoint, $breakpoints);
70
-
71
- @include media-breakpoint-up($breakpoint, $breakpoints) {
72
- // Provide basic `.col-{bp}` classes for equal-width flexbox columns
73
- .col#{$infix} {
74
- flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
75
- }
76
-
77
- .row-cols#{$infix}-auto > * {
78
- @include make-col-auto();
79
- }
80
-
81
- @if $grid-row-columns > 0 {
82
- @for $i from 1 through $grid-row-columns {
83
- .row-cols#{$infix}-#{$i} {
84
- @include row-cols($i);
85
- }
86
- }
87
- }
88
-
89
- .col#{$infix}-auto {
90
- @include make-col-auto();
91
- }
92
-
93
- @if $columns > 0 {
94
- @for $i from 1 through $columns {
95
- .col#{$infix}-#{$i} {
96
- @include make-col($i, $columns);
97
- }
98
- }
99
-
100
- // `$columns - 1` because offsetting by the width of an entire row isn't possible
101
- @for $i from 0 through ($columns - 1) {
102
- @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
103
- .offset#{$infix}-#{$i} {
104
- @include make-col-offset($i, $columns);
105
- }
106
- }
107
- }
108
- }
109
-
110
- // Gutters
111
- //
112
- // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
113
- @each $key, $value in $gutters {
114
- .g#{$infix}-#{$key},
115
- .gx#{$infix}-#{$key} {
116
- --#{$variable-prefix}gutter-x: #{$value};
117
- }
118
-
119
- .g#{$infix}-#{$key},
120
- .gy#{$infix}-#{$key} {
121
- --#{$variable-prefix}gutter-y: #{$value};
122
- }
123
- }
124
- }
125
- }
126
- }
127
-
128
- @mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
129
- @each $breakpoint in map-keys($breakpoints) {
130
- $infix: breakpoint-infix($breakpoint, $breakpoints);
131
-
132
- @include media-breakpoint-up($breakpoint, $breakpoints) {
133
- @if $columns > 0 {
134
- @for $i from 1 through $columns {
135
- .g-col#{$infix}-#{$i} {
136
- grid-column: auto / span $i;
137
- }
138
- }
139
-
140
- // Start with `1` because `0` is and invalid value.
141
- // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
142
- @for $i from 1 through ($columns - 1) {
143
- .g-start#{$infix}-#{$i} {
144
- grid-column-start: $i;
145
- }
146
- }
147
- }
148
- }
149
- }
150
- }
1
+ // Grid system
2
+ //
3
+ // Generate semantic grid columns with these mixins.
4
+
5
+ @mixin make-row($gutter: $grid-gutter-width) {
6
+ --#{$prefix}gutter-x: #{$gutter};
7
+ --#{$prefix}gutter-y: 0;
8
+ display: flex;
9
+ flex-wrap: wrap;
10
+ // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
11
+ margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
12
+ margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
13
+ margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
14
+ }
15
+
16
+ @mixin make-col-ready() {
17
+ // Add box sizing if only the grid is loaded
18
+ box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
19
+ // Prevent columns from becoming too narrow when at smaller grid tiers by
20
+ // always setting `width: 100%;`. This works because we set the width
21
+ // later on to override this initial width.
22
+ flex-shrink: 0;
23
+ width: 100%;
24
+ max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
25
+ padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
26
+ padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
27
+ margin-top: var(--#{$prefix}gutter-y);
28
+ }
29
+
30
+ @mixin make-col($size: false, $columns: $grid-columns) {
31
+ @if $size {
32
+ flex: 0 0 auto;
33
+ width: percentage(divide($size, $columns));
34
+
35
+ } @else {
36
+ flex: 1 1 0;
37
+ max-width: 100%;
38
+ }
39
+ }
40
+
41
+ @mixin make-col-auto() {
42
+ flex: 0 0 auto;
43
+ width: auto;
44
+ }
45
+
46
+ @mixin make-col-offset($size, $columns: $grid-columns) {
47
+ $num: divide($size, $columns);
48
+ margin-left: if($num == 0, 0, percentage($num));
49
+ }
50
+
51
+ // Row columns
52
+ //
53
+ // Specify on a parent element(e.g., .row) to force immediate children into NN
54
+ // number of columns. Supports wrapping to new lines, but does not do a Masonry
55
+ // style grid.
56
+ @mixin row-cols($count) {
57
+ > * {
58
+ flex: 0 0 auto;
59
+ width: divide(100%, $count);
60
+ }
61
+ }
62
+
63
+ // Framework grid generation
64
+ //
65
+ // Used only by Bootstrap to generate the correct number of grid classes given
66
+ // any value of `$grid-columns`.
67
+
68
+ @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
69
+ @each $breakpoint in map-keys($breakpoints) {
70
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
71
+
72
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
73
+ // Provide basic `.col-{bp}` classes for equal-width flexbox columns
74
+ .col#{$infix} {
75
+ flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
76
+ }
77
+
78
+ .row-cols#{$infix}-auto > * {
79
+ @include make-col-auto();
80
+ }
81
+
82
+ @if $grid-row-columns > 0 {
83
+ @for $i from 1 through $grid-row-columns {
84
+ .row-cols#{$infix}-#{$i} {
85
+ @include row-cols($i);
86
+ }
87
+ }
88
+ }
89
+
90
+ .col#{$infix}-auto {
91
+ @include make-col-auto();
92
+ }
93
+
94
+ @if $columns > 0 {
95
+ @for $i from 1 through $columns {
96
+ .col#{$infix}-#{$i} {
97
+ @include make-col($i, $columns);
98
+ }
99
+ }
100
+
101
+ // `$columns - 1` because offsetting by the width of an entire row isn't possible
102
+ @for $i from 0 through ($columns - 1) {
103
+ @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
104
+ .offset#{$infix}-#{$i} {
105
+ @include make-col-offset($i, $columns);
106
+ }
107
+ }
108
+ }
109
+ }
110
+
111
+ // Gutters
112
+ //
113
+ // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
114
+ @each $key, $value in $gutters {
115
+ .g#{$infix}-#{$key},
116
+ .gx#{$infix}-#{$key} {
117
+ --#{$prefix}gutter-x: #{$value};
118
+ }
119
+
120
+ .g#{$infix}-#{$key},
121
+ .gy#{$infix}-#{$key} {
122
+ --#{$prefix}gutter-y: #{$value};
123
+ }
124
+ }
125
+ }
126
+ }
127
+ }
128
+
129
+ @mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
130
+ @each $breakpoint in map-keys($breakpoints) {
131
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
132
+
133
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
134
+ @if $columns > 0 {
135
+ @for $i from 1 through $columns {
136
+ .g-col#{$infix}-#{$i} {
137
+ grid-column: auto / span $i;
138
+ }
139
+ }
140
+
141
+ // Start with `1` because `0` is and invalid value.
142
+ // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
143
+ @for $i from 1 through ($columns - 1) {
144
+ .g-start#{$infix}-#{$i} {
145
+ grid-column-start: $i;
146
+ }
147
+ }
148
+ }
149
+ }
150
+ }
151
+ }
@@ -1,16 +1,16 @@
1
- // Image Mixins
2
- // - Responsive image
3
- // - Retina image
4
-
5
-
6
- // Responsive image
7
- //
8
- // Keep images from scaling beyond the width of their parents.
9
-
10
- @mixin img-fluid {
11
- // Part 1: Set a maximum relative to the parent
12
- max-width: 100%;
13
- // Part 2: Override the height to auto, otherwise images will be stretched
14
- // when setting a width and height attribute on the img element.
15
- height: auto;
16
- }
1
+ // Image Mixins
2
+ // - Responsive image
3
+ // - Retina image
4
+
5
+
6
+ // Responsive image
7
+ //
8
+ // Keep images from scaling beyond the width of their parents.
9
+
10
+ @mixin img-fluid {
11
+ // Part 1: Set a maximum relative to the parent
12
+ max-width: 100%;
13
+ // Part 2: Override the height to auto, otherwise images will be stretched
14
+ // when setting a width and height attribute on the img element.
15
+ height: auto;
16
+ }
@@ -1,24 +1,24 @@
1
- // List Groups
2
-
3
- // scss-docs-start list-group-mixin
4
- @mixin list-group-item-variant($state, $background, $color) {
5
- .list-group-item-#{$state} {
6
- color: $color;
7
- background-color: $background;
8
-
9
- &.list-group-item-action {
10
- &:hover,
11
- &:focus {
12
- color: $color;
13
- background-color: shade-color($background, 10%);
14
- }
15
-
16
- &.active {
17
- color: $white;
18
- background-color: $color;
19
- border-color: $color;
20
- }
21
- }
22
- }
23
- }
24
- // scss-docs-end list-group-mixin
1
+ // List Groups
2
+
3
+ // scss-docs-start list-group-mixin
4
+ @mixin list-group-item-variant($state, $background, $color) {
5
+ .list-group-item-#{$state} {
6
+ color: $color;
7
+ background-color: $background;
8
+
9
+ &.list-group-item-action {
10
+ &:hover,
11
+ &:focus {
12
+ color: $color;
13
+ background-color: shade-color($background, 10%);
14
+ }
15
+
16
+ &.active {
17
+ color: $white;
18
+ background-color: $color;
19
+ border-color: $color;
20
+ }
21
+ }
22
+ }
23
+ }
24
+ // scss-docs-end list-group-mixin
@@ -1,7 +1,7 @@
1
- // Lists
2
-
3
- // Unstyled keeps list items block level, just removes default browser padding and list-style
4
- @mixin list-unstyled {
5
- padding-left: 0;
6
- list-style: none;
7
- }
1
+ // Lists
2
+
3
+ // Unstyled keeps list items block level, just removes default browser padding and list-style
4
+ @mixin list-unstyled {
5
+ padding-left: 0;
6
+ list-style: none;
7
+ }
@@ -1,31 +1,10 @@
1
- // Pagination
2
-
3
- // scss-docs-start pagination-mixin
4
- @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
5
- .page-link {
6
- padding: $padding-y $padding-x;
7
- @include font-size($font-size);
8
- }
9
-
10
- .page-item {
11
- @if $pagination-margin-start == (-$pagination-border-width) {
12
- &:first-child {
13
- .page-link {
14
- @include border-start-radius($border-radius);
15
- }
16
- }
17
-
18
- &:last-child {
19
- .page-link {
20
- @include border-end-radius($border-radius);
21
- }
22
- }
23
- } @else {
24
- //Add border-radius to all pageLinks in case they have left margin
25
- .page-link {
26
- @include border-radius($border-radius);
27
- }
28
- }
29
- }
30
- }
31
- // scss-docs-end pagination-mixin
1
+ // Pagination
2
+
3
+ // scss-docs-start pagination-mixin
4
+ @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
5
+ --#{$prefix}pagination-padding-x: #{$padding-x};
6
+ --#{$prefix}pagination-padding-y: #{$padding-y};
7
+ @include rfs($font-size, --#{$prefix}pagination-font-size);
8
+ --#{$prefix}pagination-border-radius: #{$border-radius};
9
+ }
10
+ // scss-docs-end pagination-mixin
@@ -1,17 +1,17 @@
1
- @mixin reset-text {
2
- font-family: $font-family-base;
3
- // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
4
- font-style: normal;
5
- font-weight: $font-weight-normal;
6
- line-height: $line-height-base;
7
- text-align: left; // Fallback for where `start` is not supported
8
- text-align: start;
9
- text-decoration: none;
10
- text-shadow: none;
11
- text-transform: none;
12
- letter-spacing: normal;
13
- word-break: normal;
14
- word-spacing: normal;
15
- white-space: normal;
16
- line-break: auto;
17
- }
1
+ @mixin reset-text {
2
+ font-family: $font-family-base;
3
+ // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
4
+ font-style: normal;
5
+ font-weight: $font-weight-normal;
6
+ line-height: $line-height-base;
7
+ text-align: left; // Fallback for where `start` is not supported
8
+ text-align: start;
9
+ text-decoration: none;
10
+ text-shadow: none;
11
+ text-transform: none;
12
+ letter-spacing: normal;
13
+ word-break: normal;
14
+ white-space: normal;
15
+ word-spacing: normal;
16
+ line-break: auto;
17
+ }
@@ -1,21 +1,24 @@
1
- // scss-docs-start table-variant
2
- @mixin table-variant($state, $background) {
3
- .table-#{$state} {
4
- $color: color-contrast(opaque($body-bg, $background));
5
- $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
6
- $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
7
- $active-bg: mix($color, $background, percentage($table-active-bg-factor));
8
-
9
- --#{$variable-prefix}table-bg: #{$background};
10
- --#{$variable-prefix}table-striped-bg: #{$striped-bg};
11
- --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
12
- --#{$variable-prefix}table-active-bg: #{$active-bg};
13
- --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
14
- --#{$variable-prefix}table-hover-bg: #{$hover-bg};
15
- --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
16
-
17
- color: $color;
18
- border-color: mix($color, $background, percentage($table-border-factor));
19
- }
20
- }
21
- // scss-docs-end table-variant
1
+ // scss-docs-start table-variant
2
+ @mixin table-variant($state, $background) {
3
+ .table-#{$state} {
4
+ $color: color-contrast(opaque($body-bg, $background));
5
+ $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
6
+ $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
7
+ $active-bg: mix($color, $background, percentage($table-active-bg-factor));
8
+ $border-color: mix($color, $background, percentage($table-border-factor));
9
+
10
+ --#{$prefix}table-color: #{$color};
11
+ --#{$prefix}table-bg: #{$background};
12
+ --#{$prefix}table-border-color: #{$border-color};
13
+ --#{$prefix}table-striped-bg: #{$striped-bg};
14
+ --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
15
+ --#{$prefix}table-active-bg: #{$active-bg};
16
+ --#{$prefix}table-active-color: #{color-contrast($active-bg)};
17
+ --#{$prefix}table-hover-bg: #{$hover-bg};
18
+ --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
19
+
20
+ color: var(--#{$prefix}table-color);
21
+ border-color: var(--#{$prefix}table-border-color);
22
+ }
23
+ }
24
+ // scss-docs-end table-variant
@@ -1,26 +1,26 @@
1
- // stylelint-disable property-disallowed-list
2
- @mixin transition($transition...) {
3
- @if length($transition) == 0 {
4
- $transition: $transition-base;
5
- }
6
-
7
- @if length($transition) > 1 {
8
- @each $value in $transition {
9
- @if $value == null or $value == none {
10
- @warn "The keyword 'none' or 'null' must be used as a single argument.";
11
- }
12
- }
13
- }
14
-
15
- @if $enable-transitions {
16
- @if nth($transition, 1) != null {
17
- transition: $transition;
18
- }
19
-
20
- @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
21
- @media (prefers-reduced-motion: reduce) {
22
- transition: none;
23
- }
24
- }
25
- }
26
- }
1
+ // stylelint-disable property-disallowed-list
2
+ @mixin transition($transition...) {
3
+ @if length($transition) == 0 {
4
+ $transition: $transition-base;
5
+ }
6
+
7
+ @if length($transition) > 1 {
8
+ @each $value in $transition {
9
+ @if $value == null or $value == none {
10
+ @warn "The keyword 'none' or 'null' must be used as a single argument.";
11
+ }
12
+ }
13
+ }
14
+
15
+ @if $enable-transitions {
16
+ @if nth($transition, 1) != null {
17
+ transition: $transition;
18
+ }
19
+
20
+ @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
21
+ @media (prefers-reduced-motion: reduce) {
22
+ transition: none;
23
+ }
24
+ }
25
+ }
26
+ }