bootstrap-scss 5.1.3 → 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 -155
  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 -1641
  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 -72
  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 -151
  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,127 +1,127 @@
1
- // Breakpoint viewport sizes and media queries.
2
- //
3
- // Breakpoints are defined as a map of (name: minimum width), order from small to large:
4
- //
5
- // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
6
- //
7
- // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
8
-
9
- // Name of the next breakpoint, or null for the last breakpoint.
10
- //
11
- // >> breakpoint-next(sm)
12
- // md
13
- // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
14
- // md
15
- // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
16
- // md
17
- @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
18
- $n: index($breakpoint-names, $name);
19
- @if not $n {
20
- @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
21
- }
22
- @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
23
- }
24
-
25
- // Minimum breakpoint width. Null for the smallest (first) breakpoint.
26
- //
27
- // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
28
- // 576px
29
- @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
30
- $min: map-get($breakpoints, $name);
31
- @return if($min != 0, $min, null);
32
- }
33
-
34
- // Maximum breakpoint width.
35
- // The maximum value is reduced by 0.02px to work around the limitations of
36
- // `min-` and `max-` prefixes and viewports with fractional widths.
37
- // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
38
- // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
39
- // See https://bugs.webkit.org/show_bug.cgi?id=178261
40
- //
41
- // >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
42
- // 767.98px
43
- @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
44
- $max: map-get($breakpoints, $name);
45
- @return if($max and $max > 0, $max - .02, null);
46
- }
47
-
48
- // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
49
- // Useful for making responsive utilities.
50
- //
51
- // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
52
- // "" (Returns a blank string)
53
- // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
54
- // "-sm"
55
- @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
56
- @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
57
- }
58
-
59
- // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
60
- // Makes the @content apply to the given breakpoint and wider.
61
- @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
62
- $min: breakpoint-min($name, $breakpoints);
63
- @if $min {
64
- @media (min-width: $min) {
65
- @content;
66
- }
67
- } @else {
68
- @content;
69
- }
70
- }
71
-
72
- // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
73
- // Makes the @content apply to the given breakpoint and narrower.
74
- @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
75
- $max: breakpoint-max($name, $breakpoints);
76
- @if $max {
77
- @media (max-width: $max) {
78
- @content;
79
- }
80
- } @else {
81
- @content;
82
- }
83
- }
84
-
85
- // Media that spans multiple breakpoint widths.
86
- // Makes the @content apply between the min and max breakpoints
87
- @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
88
- $min: breakpoint-min($lower, $breakpoints);
89
- $max: breakpoint-max($upper, $breakpoints);
90
-
91
- @if $min != null and $max != null {
92
- @media (min-width: $min) and (max-width: $max) {
93
- @content;
94
- }
95
- } @else if $max == null {
96
- @include media-breakpoint-up($lower, $breakpoints) {
97
- @content;
98
- }
99
- } @else if $min == null {
100
- @include media-breakpoint-down($upper, $breakpoints) {
101
- @content;
102
- }
103
- }
104
- }
105
-
106
- // Media between the breakpoint's minimum and maximum widths.
107
- // No minimum for the smallest breakpoint, and no maximum for the largest one.
108
- // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
109
- @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
110
- $min: breakpoint-min($name, $breakpoints);
111
- $next: breakpoint-next($name, $breakpoints);
112
- $max: breakpoint-max($next);
113
-
114
- @if $min != null and $max != null {
115
- @media (min-width: $min) and (max-width: $max) {
116
- @content;
117
- }
118
- } @else if $max == null {
119
- @include media-breakpoint-up($name, $breakpoints) {
120
- @content;
121
- }
122
- } @else if $min == null {
123
- @include media-breakpoint-down($next, $breakpoints) {
124
- @content;
125
- }
126
- }
127
- }
1
+ // Breakpoint viewport sizes and media queries.
2
+ //
3
+ // Breakpoints are defined as a map of (name: minimum width), order from small to large:
4
+ //
5
+ // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
6
+ //
7
+ // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
8
+
9
+ // Name of the next breakpoint, or null for the last breakpoint.
10
+ //
11
+ // >> breakpoint-next(sm)
12
+ // md
13
+ // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
14
+ // md
15
+ // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
16
+ // md
17
+ @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
18
+ $n: index($breakpoint-names, $name);
19
+ @if not $n {
20
+ @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
21
+ }
22
+ @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
23
+ }
24
+
25
+ // Minimum breakpoint width. Null for the smallest (first) breakpoint.
26
+ //
27
+ // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
28
+ // 576px
29
+ @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
30
+ $min: map-get($breakpoints, $name);
31
+ @return if($min != 0, $min, null);
32
+ }
33
+
34
+ // Maximum breakpoint width.
35
+ // The maximum value is reduced by 0.02px to work around the limitations of
36
+ // `min-` and `max-` prefixes and viewports with fractional widths.
37
+ // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
38
+ // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
39
+ // See https://bugs.webkit.org/show_bug.cgi?id=178261
40
+ //
41
+ // >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
42
+ // 767.98px
43
+ @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
44
+ $max: map-get($breakpoints, $name);
45
+ @return if($max and $max > 0, $max - .02, null);
46
+ }
47
+
48
+ // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
49
+ // Useful for making responsive utilities.
50
+ //
51
+ // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
52
+ // "" (Returns a blank string)
53
+ // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
54
+ // "-sm"
55
+ @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
56
+ @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
57
+ }
58
+
59
+ // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
60
+ // Makes the @content apply to the given breakpoint and wider.
61
+ @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
62
+ $min: breakpoint-min($name, $breakpoints);
63
+ @if $min {
64
+ @media (min-width: $min) {
65
+ @content;
66
+ }
67
+ } @else {
68
+ @content;
69
+ }
70
+ }
71
+
72
+ // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
73
+ // Makes the @content apply to the given breakpoint and narrower.
74
+ @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
75
+ $max: breakpoint-max($name, $breakpoints);
76
+ @if $max {
77
+ @media (max-width: $max) {
78
+ @content;
79
+ }
80
+ } @else {
81
+ @content;
82
+ }
83
+ }
84
+
85
+ // Media that spans multiple breakpoint widths.
86
+ // Makes the @content apply between the min and max breakpoints
87
+ @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
88
+ $min: breakpoint-min($lower, $breakpoints);
89
+ $max: breakpoint-max($upper, $breakpoints);
90
+
91
+ @if $min != null and $max != null {
92
+ @media (min-width: $min) and (max-width: $max) {
93
+ @content;
94
+ }
95
+ } @else if $max == null {
96
+ @include media-breakpoint-up($lower, $breakpoints) {
97
+ @content;
98
+ }
99
+ } @else if $min == null {
100
+ @include media-breakpoint-down($upper, $breakpoints) {
101
+ @content;
102
+ }
103
+ }
104
+ }
105
+
106
+ // Media between the breakpoint's minimum and maximum widths.
107
+ // No minimum for the smallest breakpoint, and no maximum for the largest one.
108
+ // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
109
+ @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
110
+ $min: breakpoint-min($name, $breakpoints);
111
+ $next: breakpoint-next($name, $breakpoints);
112
+ $max: breakpoint-max($next, $breakpoints);
113
+
114
+ @if $min != null and $max != null {
115
+ @media (min-width: $min) and (max-width: $max) {
116
+ @content;
117
+ }
118
+ } @else if $max == null {
119
+ @include media-breakpoint-up($name, $breakpoints) {
120
+ @content;
121
+ }
122
+ } @else if $min == null {
123
+ @include media-breakpoint-down($next, $breakpoints) {
124
+ @content;
125
+ }
126
+ }
127
+ }
@@ -1,133 +1,70 @@
1
- // Button variants
2
- //
3
- // Easily pump out default styles, as well as :hover, :focus, :active,
4
- // and disabled options for all buttons
5
-
6
- // scss-docs-start btn-variant-mixin
7
- @mixin button-variant(
8
- $background,
9
- $border,
10
- $color: color-contrast($background),
11
- $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
12
- $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
13
- $hover-color: color-contrast($hover-background),
14
- $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
15
- $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
16
- $active-color: color-contrast($active-background),
17
- $disabled-background: $background,
18
- $disabled-border: $border,
19
- $disabled-color: color-contrast($disabled-background)
20
- ) {
21
- color: $color;
22
- @include gradient-bg($background);
23
- border-color: $border;
24
- @include box-shadow($btn-box-shadow);
25
-
26
- &:hover {
27
- color: $hover-color;
28
- @include gradient-bg($hover-background);
29
- border-color: $hover-border;
30
- }
31
-
32
- .btn-check:focus + &,
33
- &:focus {
34
- color: $hover-color;
35
- @include gradient-bg($hover-background);
36
- border-color: $hover-border;
37
- @if $enable-shadows {
38
- @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
39
- } @else {
40
- // Avoid using mixin so we can pass custom focus shadow properly
41
- box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
42
- }
43
- }
44
-
45
- .btn-check:checked + &,
46
- .btn-check:active + &,
47
- &:active,
48
- &.active,
49
- .show > &.dropdown-toggle {
50
- color: $active-color;
51
- background-color: $active-background;
52
- // Remove CSS gradients if they're enabled
53
- background-image: if($enable-gradients, none, null);
54
- border-color: $active-border;
55
-
56
- &:focus {
57
- @if $enable-shadows {
58
- @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
59
- } @else {
60
- // Avoid using mixin so we can pass custom focus shadow properly
61
- box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
62
- }
63
- }
64
- }
65
-
66
- &:disabled,
67
- &.disabled {
68
- color: $disabled-color;
69
- background-color: $disabled-background;
70
- // Remove CSS gradients if they're enabled
71
- background-image: if($enable-gradients, none, null);
72
- border-color: $disabled-border;
73
- }
74
- }
75
- // scss-docs-end btn-variant-mixin
76
-
77
- // scss-docs-start btn-outline-variant-mixin
78
- @mixin button-outline-variant(
79
- $color,
80
- $color-hover: color-contrast($color),
81
- $active-background: $color,
82
- $active-border: $color,
83
- $active-color: color-contrast($active-background)
84
- ) {
85
- color: $color;
86
- border-color: $color;
87
-
88
- &:hover {
89
- color: $color-hover;
90
- background-color: $active-background;
91
- border-color: $active-border;
92
- }
93
-
94
- .btn-check:focus + &,
95
- &:focus {
96
- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
97
- }
98
-
99
- .btn-check:checked + &,
100
- .btn-check:active + &,
101
- &:active,
102
- &.active,
103
- &.dropdown-toggle.show {
104
- color: $active-color;
105
- background-color: $active-background;
106
- border-color: $active-border;
107
-
108
- &:focus {
109
- @if $enable-shadows {
110
- @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
111
- } @else {
112
- // Avoid using mixin so we can pass custom focus shadow properly
113
- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
114
- }
115
- }
116
- }
117
-
118
- &:disabled,
119
- &.disabled {
120
- color: $color;
121
- background-color: transparent;
122
- }
123
- }
124
- // scss-docs-end btn-outline-variant-mixin
125
-
126
- // scss-docs-start btn-size-mixin
127
- @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
128
- padding: $padding-y $padding-x;
129
- @include font-size($font-size);
130
- // Manually declare to provide an override to the browser default
131
- @include border-radius($border-radius, 0);
132
- }
133
- // scss-docs-end btn-size-mixin
1
+ // Button variants
2
+ //
3
+ // Easily pump out default styles, as well as :hover, :focus, :active,
4
+ // and disabled options for all buttons
5
+
6
+ // scss-docs-start btn-variant-mixin
7
+ @mixin button-variant(
8
+ $background,
9
+ $border,
10
+ $color: color-contrast($background),
11
+ $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
12
+ $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
13
+ $hover-color: color-contrast($hover-background),
14
+ $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
15
+ $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
16
+ $active-color: color-contrast($active-background),
17
+ $disabled-background: $background,
18
+ $disabled-border: $border,
19
+ $disabled-color: color-contrast($disabled-background)
20
+ ) {
21
+ --#{$prefix}btn-color: #{$color};
22
+ --#{$prefix}btn-bg: #{$background};
23
+ --#{$prefix}btn-border-color: #{$border};
24
+ --#{$prefix}btn-hover-color: #{$hover-color};
25
+ --#{$prefix}btn-hover-bg: #{$hover-background};
26
+ --#{$prefix}btn-hover-border-color: #{$hover-border};
27
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
28
+ --#{$prefix}btn-active-color: #{$active-color};
29
+ --#{$prefix}btn-active-bg: #{$active-background};
30
+ --#{$prefix}btn-active-border-color: #{$active-border};
31
+ --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
32
+ --#{$prefix}btn-disabled-color: #{$disabled-color};
33
+ --#{$prefix}btn-disabled-bg: #{$disabled-background};
34
+ --#{$prefix}btn-disabled-border-color: #{$disabled-border};
35
+ }
36
+ // scss-docs-end btn-variant-mixin
37
+
38
+ // scss-docs-start btn-outline-variant-mixin
39
+ @mixin button-outline-variant(
40
+ $color,
41
+ $color-hover: color-contrast($color),
42
+ $active-background: $color,
43
+ $active-border: $color,
44
+ $active-color: color-contrast($active-background)
45
+ ) {
46
+ --#{$prefix}btn-color: #{$color};
47
+ --#{$prefix}btn-border-color: #{$color};
48
+ --#{$prefix}btn-hover-color: #{$color-hover};
49
+ --#{$prefix}btn-hover-bg: #{$active-background};
50
+ --#{$prefix}btn-hover-border-color: #{$active-border};
51
+ --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
52
+ --#{$prefix}btn-active-color: #{$active-color};
53
+ --#{$prefix}btn-active-bg: #{$active-background};
54
+ --#{$prefix}btn-active-border-color: #{$active-border};
55
+ --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
56
+ --#{$prefix}btn-disabled-color: #{$color};
57
+ --#{$prefix}btn-disabled-bg: transparent;
58
+ --#{$prefix}btn-disabled-border-color: #{$color};
59
+ --#{$prefix}gradient: none;
60
+ }
61
+ // scss-docs-end btn-outline-variant-mixin
62
+
63
+ // scss-docs-start btn-size-mixin
64
+ @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
65
+ --#{$prefix}btn-padding-y: #{$padding-y};
66
+ --#{$prefix}btn-padding-x: #{$padding-x};
67
+ @include rfs($font-size, --#{$prefix}btn-font-size);
68
+ --#{$prefix}btn-border-radius: #{$border-radius};
69
+ }
70
+ // scss-docs-end btn-size-mixin
@@ -1,64 +1,64 @@
1
- // scss-docs-start caret-mixins
2
- @mixin caret-down {
3
- border-top: $caret-width solid;
4
- border-right: $caret-width solid transparent;
5
- border-bottom: 0;
6
- border-left: $caret-width solid transparent;
7
- }
8
-
9
- @mixin caret-up {
10
- border-top: 0;
11
- border-right: $caret-width solid transparent;
12
- border-bottom: $caret-width solid;
13
- border-left: $caret-width solid transparent;
14
- }
15
-
16
- @mixin caret-end {
17
- border-top: $caret-width solid transparent;
18
- border-right: 0;
19
- border-bottom: $caret-width solid transparent;
20
- border-left: $caret-width solid;
21
- }
22
-
23
- @mixin caret-start {
24
- border-top: $caret-width solid transparent;
25
- border-right: $caret-width solid;
26
- border-bottom: $caret-width solid transparent;
27
- }
28
-
29
- @mixin caret($direction: down) {
30
- @if $enable-caret {
31
- &::after {
32
- display: inline-block;
33
- margin-left: $caret-spacing;
34
- vertical-align: $caret-vertical-align;
35
- content: "";
36
- @if $direction == down {
37
- @include caret-down();
38
- } @else if $direction == up {
39
- @include caret-up();
40
- } @else if $direction == end {
41
- @include caret-end();
42
- }
43
- }
44
-
45
- @if $direction == start {
46
- &::after {
47
- display: none;
48
- }
49
-
50
- &::before {
51
- display: inline-block;
52
- margin-right: $caret-spacing;
53
- vertical-align: $caret-vertical-align;
54
- content: "";
55
- @include caret-start();
56
- }
57
- }
58
-
59
- &:empty::after {
60
- margin-left: 0;
61
- }
62
- }
63
- }
64
- // scss-docs-end caret-mixins
1
+ // scss-docs-start caret-mixins
2
+ @mixin caret-down {
3
+ border-top: $caret-width solid;
4
+ border-right: $caret-width solid transparent;
5
+ border-bottom: 0;
6
+ border-left: $caret-width solid transparent;
7
+ }
8
+
9
+ @mixin caret-up {
10
+ border-top: 0;
11
+ border-right: $caret-width solid transparent;
12
+ border-bottom: $caret-width solid;
13
+ border-left: $caret-width solid transparent;
14
+ }
15
+
16
+ @mixin caret-end {
17
+ border-top: $caret-width solid transparent;
18
+ border-right: 0;
19
+ border-bottom: $caret-width solid transparent;
20
+ border-left: $caret-width solid;
21
+ }
22
+
23
+ @mixin caret-start {
24
+ border-top: $caret-width solid transparent;
25
+ border-right: $caret-width solid;
26
+ border-bottom: $caret-width solid transparent;
27
+ }
28
+
29
+ @mixin caret($direction: down) {
30
+ @if $enable-caret {
31
+ &::after {
32
+ display: inline-block;
33
+ margin-left: $caret-spacing;
34
+ vertical-align: $caret-vertical-align;
35
+ content: "";
36
+ @if $direction == down {
37
+ @include caret-down();
38
+ } @else if $direction == up {
39
+ @include caret-up();
40
+ } @else if $direction == end {
41
+ @include caret-end();
42
+ }
43
+ }
44
+
45
+ @if $direction == start {
46
+ &::after {
47
+ display: none;
48
+ }
49
+
50
+ &::before {
51
+ display: inline-block;
52
+ margin-right: $caret-spacing;
53
+ vertical-align: $caret-vertical-align;
54
+ content: "";
55
+ @include caret-start();
56
+ }
57
+ }
58
+
59
+ &:empty::after {
60
+ margin-left: 0;
61
+ }
62
+ }
63
+ }
64
+ // scss-docs-end caret-mixins
@@ -1,9 +1,9 @@
1
- // scss-docs-start clearfix
2
- @mixin clearfix() {
3
- &::after {
4
- display: block;
5
- clear: both;
6
- content: "";
7
- }
8
- }
9
- // scss-docs-end clearfix
1
+ // scss-docs-start clearfix
2
+ @mixin clearfix() {
3
+ &::after {
4
+ display: block;
5
+ clear: both;
6
+ content: "";
7
+ }
8
+ }
9
+ // scss-docs-end clearfix
@@ -1,7 +1,7 @@
1
- // scss-docs-start mixin-color-scheme
2
- @mixin color-scheme($name) {
3
- @media (prefers-color-scheme: #{$name}) {
4
- @content;
5
- }
6
- }
7
- // scss-docs-end mixin-color-scheme
1
+ // scss-docs-start mixin-color-scheme
2
+ @mixin color-scheme($name) {
3
+ @media (prefers-color-scheme: #{$name}) {
4
+ @content;
5
+ }
6
+ }
7
+ // scss-docs-end mixin-color-scheme
@@ -1,9 +1,11 @@
1
- // Container mixins
2
-
3
- @mixin make-container($gutter: $container-padding-x) {
4
- width: 100%;
5
- padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
6
- padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
7
- margin-right: auto;
8
- margin-left: auto;
9
- }
1
+ // Container mixins
2
+
3
+ @mixin make-container($gutter: $container-padding-x) {
4
+ --#{$prefix}gutter-x: #{$gutter};
5
+ --#{$prefix}gutter-y: 0;
6
+ width: 100%;
7
+ padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
8
+ padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
9
+ margin-right: auto;
10
+ margin-left: auto;
11
+ }