bootstrap-scss 5.2.0 → 5.2.1
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/README.md +1 -1
- package/_accordion.scss +7 -4
- package/_alert.scss +71 -71
- package/_badge.scss +38 -38
- package/_breadcrumb.scss +40 -40
- package/_button-group.scss +1 -1
- package/_buttons.scss +23 -8
- package/_card.scss +234 -234
- package/_carousel.scss +229 -229
- package/_close.scss +40 -40
- package/_containers.scss +41 -41
- package/_dropdown.scss +2 -1
- package/_forms.scss +9 -9
- package/_functions.scss +1 -1
- package/_grid.scss +33 -33
- package/_helpers.scss +10 -10
- package/_list-group.scss +6 -5
- package/_maps.scss +54 -54
- package/_mixins.scss +43 -43
- package/_modal.scss +1 -1
- package/_nav.scss +2 -2
- package/_navbar.scss +2 -0
- package/_offcanvas.scss +5 -4
- package/_pagination.scss +1 -1
- package/_placeholders.scss +51 -51
- package/_popover.scss +5 -5
- 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 +3 -2
- package/_tooltip.scss +120 -120
- package/_transitions.scss +27 -27
- package/_type.scss +106 -106
- package/_utilities.scss +647 -647
- package/_variables.scss +17 -16
- 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 +1 -0
- 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 +7 -4
- 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 +2 -2
- 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 +10 -10
- 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 +1 -1
- package/mixins/_visually-hidden.scss +29 -29
- package/package.json +1 -1
- package/utilities/_api.scss +47 -47
- package/vendor/_rfs.scss +354 -354
@@ -1,78 +1,78 @@
|
|
1
|
-
// stylelint-disable property-disallowed-list
|
2
|
-
// Single side border-radius
|
3
|
-
|
4
|
-
// Helper function to replace negative values with 0
|
5
|
-
@function valid-radius($radius) {
|
6
|
-
$return: ();
|
7
|
-
@each $value in $radius {
|
8
|
-
@if type-of($value) == number {
|
9
|
-
$return: append($return, max($value, 0));
|
10
|
-
} @else {
|
11
|
-
$return: append($return, $value);
|
12
|
-
}
|
13
|
-
}
|
14
|
-
@return $return;
|
15
|
-
}
|
16
|
-
|
17
|
-
// scss-docs-start border-radius-mixins
|
18
|
-
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
|
19
|
-
@if $enable-rounded {
|
20
|
-
border-radius: valid-radius($radius);
|
21
|
-
}
|
22
|
-
@else if $fallback-border-radius != false {
|
23
|
-
border-radius: $fallback-border-radius;
|
24
|
-
}
|
25
|
-
}
|
26
|
-
|
27
|
-
@mixin border-top-radius($radius: $border-radius) {
|
28
|
-
@if $enable-rounded {
|
29
|
-
border-top-left-radius: valid-radius($radius);
|
30
|
-
border-top-right-radius: valid-radius($radius);
|
31
|
-
}
|
32
|
-
}
|
33
|
-
|
34
|
-
@mixin border-end-radius($radius: $border-radius) {
|
35
|
-
@if $enable-rounded {
|
36
|
-
border-top-right-radius: valid-radius($radius);
|
37
|
-
border-bottom-right-radius: valid-radius($radius);
|
38
|
-
}
|
39
|
-
}
|
40
|
-
|
41
|
-
@mixin border-bottom-radius($radius: $border-radius) {
|
42
|
-
@if $enable-rounded {
|
43
|
-
border-bottom-right-radius: valid-radius($radius);
|
44
|
-
border-bottom-left-radius: valid-radius($radius);
|
45
|
-
}
|
46
|
-
}
|
47
|
-
|
48
|
-
@mixin border-start-radius($radius: $border-radius) {
|
49
|
-
@if $enable-rounded {
|
50
|
-
border-top-left-radius: valid-radius($radius);
|
51
|
-
border-bottom-left-radius: valid-radius($radius);
|
52
|
-
}
|
53
|
-
}
|
54
|
-
|
55
|
-
@mixin border-top-start-radius($radius: $border-radius) {
|
56
|
-
@if $enable-rounded {
|
57
|
-
border-top-left-radius: valid-radius($radius);
|
58
|
-
}
|
59
|
-
}
|
60
|
-
|
61
|
-
@mixin border-top-end-radius($radius: $border-radius) {
|
62
|
-
@if $enable-rounded {
|
63
|
-
border-top-right-radius: valid-radius($radius);
|
64
|
-
}
|
65
|
-
}
|
66
|
-
|
67
|
-
@mixin border-bottom-end-radius($radius: $border-radius) {
|
68
|
-
@if $enable-rounded {
|
69
|
-
border-bottom-right-radius: valid-radius($radius);
|
70
|
-
}
|
71
|
-
}
|
72
|
-
|
73
|
-
@mixin border-bottom-start-radius($radius: $border-radius) {
|
74
|
-
@if $enable-rounded {
|
75
|
-
border-bottom-left-radius: valid-radius($radius);
|
76
|
-
}
|
77
|
-
}
|
78
|
-
// scss-docs-end border-radius-mixins
|
1
|
+
// stylelint-disable property-disallowed-list
|
2
|
+
// Single side border-radius
|
3
|
+
|
4
|
+
// Helper function to replace negative values with 0
|
5
|
+
@function valid-radius($radius) {
|
6
|
+
$return: ();
|
7
|
+
@each $value in $radius {
|
8
|
+
@if type-of($value) == number {
|
9
|
+
$return: append($return, max($value, 0));
|
10
|
+
} @else {
|
11
|
+
$return: append($return, $value);
|
12
|
+
}
|
13
|
+
}
|
14
|
+
@return $return;
|
15
|
+
}
|
16
|
+
|
17
|
+
// scss-docs-start border-radius-mixins
|
18
|
+
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
|
19
|
+
@if $enable-rounded {
|
20
|
+
border-radius: valid-radius($radius);
|
21
|
+
}
|
22
|
+
@else if $fallback-border-radius != false {
|
23
|
+
border-radius: $fallback-border-radius;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
@mixin border-top-radius($radius: $border-radius) {
|
28
|
+
@if $enable-rounded {
|
29
|
+
border-top-left-radius: valid-radius($radius);
|
30
|
+
border-top-right-radius: valid-radius($radius);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
@mixin border-end-radius($radius: $border-radius) {
|
35
|
+
@if $enable-rounded {
|
36
|
+
border-top-right-radius: valid-radius($radius);
|
37
|
+
border-bottom-right-radius: valid-radius($radius);
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
@mixin border-bottom-radius($radius: $border-radius) {
|
42
|
+
@if $enable-rounded {
|
43
|
+
border-bottom-right-radius: valid-radius($radius);
|
44
|
+
border-bottom-left-radius: valid-radius($radius);
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
@mixin border-start-radius($radius: $border-radius) {
|
49
|
+
@if $enable-rounded {
|
50
|
+
border-top-left-radius: valid-radius($radius);
|
51
|
+
border-bottom-left-radius: valid-radius($radius);
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
@mixin border-top-start-radius($radius: $border-radius) {
|
56
|
+
@if $enable-rounded {
|
57
|
+
border-top-left-radius: valid-radius($radius);
|
58
|
+
}
|
59
|
+
}
|
60
|
+
|
61
|
+
@mixin border-top-end-radius($radius: $border-radius) {
|
62
|
+
@if $enable-rounded {
|
63
|
+
border-top-right-radius: valid-radius($radius);
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
@mixin border-bottom-end-radius($radius: $border-radius) {
|
68
|
+
@if $enable-rounded {
|
69
|
+
border-bottom-right-radius: valid-radius($radius);
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
@mixin border-bottom-start-radius($radius: $border-radius) {
|
74
|
+
@if $enable-rounded {
|
75
|
+
border-bottom-left-radius: valid-radius($radius);
|
76
|
+
}
|
77
|
+
}
|
78
|
+
// scss-docs-end border-radius-mixins
|
package/mixins/_box-shadow.scss
CHANGED
@@ -1,18 +1,18 @@
|
|
1
|
-
@mixin box-shadow($shadow...) {
|
2
|
-
@if $enable-shadows {
|
3
|
-
$result: ();
|
4
|
-
|
5
|
-
@each $value in $shadow {
|
6
|
-
@if $value != null {
|
7
|
-
$result: append($result, $value, "comma");
|
8
|
-
}
|
9
|
-
@if $value == none and length($shadow) > 1 {
|
10
|
-
@warn "The keyword 'none' must be used as a single argument.";
|
11
|
-
}
|
12
|
-
}
|
13
|
-
|
14
|
-
@if (length($result) > 0) {
|
15
|
-
box-shadow: $result;
|
16
|
-
}
|
17
|
-
}
|
18
|
-
}
|
1
|
+
@mixin box-shadow($shadow...) {
|
2
|
+
@if $enable-shadows {
|
3
|
+
$result: ();
|
4
|
+
|
5
|
+
@each $value in $shadow {
|
6
|
+
@if $value != null {
|
7
|
+
$result: append($result, $value, "comma");
|
8
|
+
}
|
9
|
+
@if $value == none and length($shadow) > 1 {
|
10
|
+
@warn "The keyword 'none' must be used as a single argument.";
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@if (length($result) > 0) {
|
15
|
+
box-shadow: $result;
|
16
|
+
}
|
17
|
+
}
|
18
|
+
}
|
package/mixins/_breakpoints.scss
CHANGED
@@ -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, 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
|
+
// 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
|
+
}
|
package/mixins/_buttons.scss
CHANGED
@@ -1,70 +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
|
-
--#{$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
|
+
// 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
|