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.
- package/LICENSE +2 -2
- package/README.md +5 -5
- package/_accordion.scss +146 -118
- package/_alert.scss +71 -57
- package/_badge.scss +38 -29
- package/_breadcrumb.scss +40 -28
- package/_button-group.scss +142 -139
- package/_buttons.scss +186 -111
- package/_card.scss +234 -216
- package/_carousel.scss +229 -229
- package/_close.scss +40 -40
- package/_containers.scss +41 -41
- package/_dropdown.scss +248 -240
- package/_forms.scss +9 -9
- package/_functions.scss +302 -302
- package/_grid.scss +33 -33
- package/_helpers.scss +10 -9
- package/_list-group.scss +191 -174
- package/_maps.scss +54 -0
- package/_mixins.scss +43 -43
- package/_modal.scss +237 -209
- package/_nav.scss +172 -139
- package/_navbar.scss +276 -335
- package/_offcanvas.scss +143 -83
- package/_pagination.scss +109 -64
- package/_placeholders.scss +51 -51
- package/_popover.scss +196 -158
- package/_progress.scss +59 -48
- package/_reboot.scss +610 -625
- package/_root.scss +73 -54
- package/_spinners.scss +85 -69
- package/_tables.scss +164 -155
- package/_toasts.scss +70 -51
- package/_tooltip.scss +120 -115
- package/_transitions.scss +27 -27
- package/_type.scss +106 -104
- package/_utilities.scss +647 -630
- package/_variables.scss +1633 -1641
- package/bootstrap-grid.scss +64 -67
- package/bootstrap-reboot.scss +9 -13
- package/bootstrap-utilities.scss +15 -18
- package/bootstrap.scss +51 -53
- package/forms/_floating-labels.scss +74 -63
- package/forms/_form-check.scss +175 -152
- package/forms/_form-control.scss +194 -219
- package/forms/_form-range.scss +91 -91
- package/forms/_form-select.scss +71 -72
- package/forms/_form-text.scss +11 -11
- package/forms/_input-group.scss +129 -121
- package/forms/_labels.scss +36 -36
- package/forms/_validation.scss +12 -12
- package/helpers/_clearfix.scss +3 -3
- package/helpers/_color-bg.scss +10 -0
- package/helpers/_colored-links.scss +12 -12
- package/helpers/_position.scss +36 -30
- 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 -11
- package/mixins/_backdrop.scss +14 -14
- package/mixins/_banner.scss +9 -0
- 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 -133
- package/mixins/_caret.scss +64 -64
- package/mixins/_clearfix.scss +9 -9
- package/mixins/_color-scheme.scss +7 -7
- package/mixins/_container.scss +11 -9
- package/mixins/_forms.scss +152 -144
- 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 -31
- package/mixins/_reset-text.scss +17 -17
- package/mixins/_table-variants.scss +24 -21
- package/mixins/_transition.scss +26 -26
- package/mixins/_utilities.scss +97 -89
- package/mixins/_visually-hidden.scss +29 -29
- package/package.json +1 -1
- package/utilities/_api.scss +47 -47
- package/vendor/_rfs.scss +354 -354
package/forms/_form-select.scss
CHANGED
@@ -1,72 +1,71 @@
|
|
1
|
-
// Select
|
2
|
-
//
|
3
|
-
// Replaces the browser default select with a custom one, mostly pulled from
|
4
|
-
// https://primer.github.io/.
|
5
|
-
|
6
|
-
.form-select {
|
7
|
-
display: block;
|
8
|
-
width: 100%;
|
9
|
-
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
|
10
|
-
|
11
|
-
-
|
12
|
-
font-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
color: $form-select-
|
17
|
-
background-
|
18
|
-
background-
|
19
|
-
background-
|
20
|
-
background-
|
21
|
-
|
22
|
-
|
23
|
-
@include
|
24
|
-
@include
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
&[
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
color: $form-select-disabled-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
padding-
|
60
|
-
padding-
|
61
|
-
|
62
|
-
@include
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
padding-
|
68
|
-
padding-
|
69
|
-
|
70
|
-
@include
|
71
|
-
|
72
|
-
}
|
1
|
+
// Select
|
2
|
+
//
|
3
|
+
// Replaces the browser default select with a custom one, mostly pulled from
|
4
|
+
// https://primer.github.io/.
|
5
|
+
|
6
|
+
.form-select {
|
7
|
+
display: block;
|
8
|
+
width: 100%;
|
9
|
+
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
|
10
|
+
-moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
|
11
|
+
font-family: $form-select-font-family;
|
12
|
+
@include font-size($form-select-font-size);
|
13
|
+
font-weight: $form-select-font-weight;
|
14
|
+
line-height: $form-select-line-height;
|
15
|
+
color: $form-select-color;
|
16
|
+
background-color: $form-select-bg;
|
17
|
+
background-image: escape-svg($form-select-indicator);
|
18
|
+
background-repeat: no-repeat;
|
19
|
+
background-position: $form-select-bg-position;
|
20
|
+
background-size: $form-select-bg-size;
|
21
|
+
border: $form-select-border-width solid $form-select-border-color;
|
22
|
+
@include border-radius($form-select-border-radius, 0);
|
23
|
+
@include box-shadow($form-select-box-shadow);
|
24
|
+
@include transition($form-select-transition);
|
25
|
+
appearance: none;
|
26
|
+
|
27
|
+
&:focus {
|
28
|
+
border-color: $form-select-focus-border-color;
|
29
|
+
outline: 0;
|
30
|
+
@if $enable-shadows {
|
31
|
+
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
|
32
|
+
} @else {
|
33
|
+
// Avoid using mixin so we can pass custom focus shadow properly
|
34
|
+
box-shadow: $form-select-focus-box-shadow;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
&[multiple],
|
39
|
+
&[size]:not([size="1"]) {
|
40
|
+
padding-right: $form-select-padding-x;
|
41
|
+
background-image: none;
|
42
|
+
}
|
43
|
+
|
44
|
+
&:disabled {
|
45
|
+
color: $form-select-disabled-color;
|
46
|
+
background-color: $form-select-disabled-bg;
|
47
|
+
border-color: $form-select-disabled-border-color;
|
48
|
+
}
|
49
|
+
|
50
|
+
// Remove outline from select box in FF
|
51
|
+
&:-moz-focusring {
|
52
|
+
color: transparent;
|
53
|
+
text-shadow: 0 0 0 $form-select-color;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
.form-select-sm {
|
58
|
+
padding-top: $form-select-padding-y-sm;
|
59
|
+
padding-bottom: $form-select-padding-y-sm;
|
60
|
+
padding-left: $form-select-padding-x-sm;
|
61
|
+
@include font-size($form-select-font-size-sm);
|
62
|
+
@include border-radius($form-select-border-radius-sm);
|
63
|
+
}
|
64
|
+
|
65
|
+
.form-select-lg {
|
66
|
+
padding-top: $form-select-padding-y-lg;
|
67
|
+
padding-bottom: $form-select-padding-y-lg;
|
68
|
+
padding-left: $form-select-padding-x-lg;
|
69
|
+
@include font-size($form-select-font-size-lg);
|
70
|
+
@include border-radius($form-select-border-radius-lg);
|
71
|
+
}
|
package/forms/_form-text.scss
CHANGED
@@ -1,11 +1,11 @@
|
|
1
|
-
//
|
2
|
-
// Form text
|
3
|
-
//
|
4
|
-
|
5
|
-
.form-text {
|
6
|
-
margin-top: $form-text-margin-top;
|
7
|
-
@include font-size($form-text-font-size);
|
8
|
-
font-style: $form-text-font-style;
|
9
|
-
font-weight: $form-text-font-weight;
|
10
|
-
color: $form-text-color;
|
11
|
-
}
|
1
|
+
//
|
2
|
+
// Form text
|
3
|
+
//
|
4
|
+
|
5
|
+
.form-text {
|
6
|
+
margin-top: $form-text-margin-top;
|
7
|
+
@include font-size($form-text-font-size);
|
8
|
+
font-style: $form-text-font-style;
|
9
|
+
font-weight: $form-text-font-weight;
|
10
|
+
color: $form-text-color;
|
11
|
+
}
|
package/forms/_input-group.scss
CHANGED
@@ -1,121 +1,129 @@
|
|
1
|
-
//
|
2
|
-
// Base styles
|
3
|
-
//
|
4
|
-
|
5
|
-
.input-group {
|
6
|
-
position: relative;
|
7
|
-
display: flex;
|
8
|
-
flex-wrap: wrap; // For form validation feedback
|
9
|
-
align-items: stretch;
|
10
|
-
width: 100%;
|
11
|
-
|
12
|
-
> .form-control,
|
13
|
-
> .form-select
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
> .form-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
//
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
}
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
//
|
43
|
-
//
|
44
|
-
|
45
|
-
.
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
//
|
64
|
-
//
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
.input-group-lg > .
|
69
|
-
.input-group-lg > .
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
.input-group-sm > .
|
78
|
-
.input-group-sm > .
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
//
|
93
|
-
//
|
94
|
-
//
|
95
|
-
|
96
|
-
//
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
}
|
1
|
+
//
|
2
|
+
// Base styles
|
3
|
+
//
|
4
|
+
|
5
|
+
.input-group {
|
6
|
+
position: relative;
|
7
|
+
display: flex;
|
8
|
+
flex-wrap: wrap; // For form validation feedback
|
9
|
+
align-items: stretch;
|
10
|
+
width: 100%;
|
11
|
+
|
12
|
+
> .form-control,
|
13
|
+
> .form-select,
|
14
|
+
> .form-floating {
|
15
|
+
position: relative; // For focus state's z-index
|
16
|
+
flex: 1 1 auto;
|
17
|
+
width: 1%;
|
18
|
+
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
|
19
|
+
}
|
20
|
+
|
21
|
+
// Bring the "active" form control to the top of surrounding elements
|
22
|
+
> .form-control:focus,
|
23
|
+
> .form-select:focus,
|
24
|
+
> .form-floating:focus-within {
|
25
|
+
z-index: 3;
|
26
|
+
}
|
27
|
+
|
28
|
+
// Ensure buttons are always above inputs for more visually pleasing borders.
|
29
|
+
// This isn't needed for `.input-group-text` since it shares the same border-color
|
30
|
+
// as our inputs.
|
31
|
+
.btn {
|
32
|
+
position: relative;
|
33
|
+
z-index: 2;
|
34
|
+
|
35
|
+
&:focus {
|
36
|
+
z-index: 3;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
|
42
|
+
// Textual addons
|
43
|
+
//
|
44
|
+
// Serves as a catch-all element for any text or radio/checkbox input you wish
|
45
|
+
// to prepend or append to an input.
|
46
|
+
|
47
|
+
.input-group-text {
|
48
|
+
display: flex;
|
49
|
+
align-items: center;
|
50
|
+
padding: $input-group-addon-padding-y $input-group-addon-padding-x;
|
51
|
+
@include font-size($input-font-size); // Match inputs
|
52
|
+
font-weight: $input-group-addon-font-weight;
|
53
|
+
line-height: $input-line-height;
|
54
|
+
color: $input-group-addon-color;
|
55
|
+
text-align: center;
|
56
|
+
white-space: nowrap;
|
57
|
+
background-color: $input-group-addon-bg;
|
58
|
+
border: $input-border-width solid $input-group-addon-border-color;
|
59
|
+
@include border-radius($input-border-radius);
|
60
|
+
}
|
61
|
+
|
62
|
+
|
63
|
+
// Sizing
|
64
|
+
//
|
65
|
+
// Remix the default form control sizing classes into new ones for easier
|
66
|
+
// manipulation.
|
67
|
+
|
68
|
+
.input-group-lg > .form-control,
|
69
|
+
.input-group-lg > .form-select,
|
70
|
+
.input-group-lg > .input-group-text,
|
71
|
+
.input-group-lg > .btn {
|
72
|
+
padding: $input-padding-y-lg $input-padding-x-lg;
|
73
|
+
@include font-size($input-font-size-lg);
|
74
|
+
@include border-radius($input-border-radius-lg);
|
75
|
+
}
|
76
|
+
|
77
|
+
.input-group-sm > .form-control,
|
78
|
+
.input-group-sm > .form-select,
|
79
|
+
.input-group-sm > .input-group-text,
|
80
|
+
.input-group-sm > .btn {
|
81
|
+
padding: $input-padding-y-sm $input-padding-x-sm;
|
82
|
+
@include font-size($input-font-size-sm);
|
83
|
+
@include border-radius($input-border-radius-sm);
|
84
|
+
}
|
85
|
+
|
86
|
+
.input-group-lg > .form-select,
|
87
|
+
.input-group-sm > .form-select {
|
88
|
+
padding-right: $form-select-padding-x + $form-select-indicator-padding;
|
89
|
+
}
|
90
|
+
|
91
|
+
|
92
|
+
// Rounded corners
|
93
|
+
//
|
94
|
+
// These rulesets must come after the sizing ones to properly override sm and lg
|
95
|
+
// border-radius values when extending. They're more specific than we'd like
|
96
|
+
// with the `.input-group >` part, but without it, we cannot override the sizing.
|
97
|
+
|
98
|
+
// stylelint-disable-next-line no-duplicate-selectors
|
99
|
+
.input-group {
|
100
|
+
&:not(.has-validation) {
|
101
|
+
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
|
102
|
+
> .dropdown-toggle:nth-last-child(n + 3),
|
103
|
+
> .form-floating:not(:last-child) > .form-control,
|
104
|
+
> .form-floating:not(:last-child) > .form-select {
|
105
|
+
@include border-end-radius(0);
|
106
|
+
}
|
107
|
+
}
|
108
|
+
|
109
|
+
&.has-validation {
|
110
|
+
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
|
111
|
+
> .dropdown-toggle:nth-last-child(n + 4),
|
112
|
+
> .form-floating:nth-last-child(n + 3) > .form-control,
|
113
|
+
> .form-floating:nth-last-child(n + 3) > .form-select {
|
114
|
+
@include border-end-radius(0);
|
115
|
+
}
|
116
|
+
}
|
117
|
+
|
118
|
+
$validation-messages: "";
|
119
|
+
@each $state in map-keys($form-validation-states) {
|
120
|
+
$validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
|
121
|
+
}
|
122
|
+
|
123
|
+
> :not(:first-child):not(.dropdown-menu):not(.form-floating)#{$validation-messages},
|
124
|
+
> .form-floating:not(:first-child) > .form-control,
|
125
|
+
> .form-floating:not(:first-child) > .form-select {
|
126
|
+
margin-left: -$input-border-width;
|
127
|
+
@include border-start-radius(0);
|
128
|
+
}
|
129
|
+
}
|
package/forms/_labels.scss
CHANGED
@@ -1,36 +1,36 @@
|
|
1
|
-
//
|
2
|
-
// Labels
|
3
|
-
//
|
4
|
-
|
5
|
-
.form-label {
|
6
|
-
margin-bottom: $form-label-margin-bottom;
|
7
|
-
@include font-size($form-label-font-size);
|
8
|
-
font-style: $form-label-font-style;
|
9
|
-
font-weight: $form-label-font-weight;
|
10
|
-
color: $form-label-color;
|
11
|
-
}
|
12
|
-
|
13
|
-
// For use with horizontal and inline forms, when you need the label (or legend)
|
14
|
-
// text to align with the form controls.
|
15
|
-
.col-form-label {
|
16
|
-
padding-top: add($input-padding-y, $input-border-width);
|
17
|
-
padding-bottom: add($input-padding-y, $input-border-width);
|
18
|
-
margin-bottom: 0; // Override the `<legend>` default
|
19
|
-
@include font-size(inherit); // Override the `<legend>` default
|
20
|
-
font-style: $form-label-font-style;
|
21
|
-
font-weight: $form-label-font-weight;
|
22
|
-
line-height: $input-line-height;
|
23
|
-
color: $form-label-color;
|
24
|
-
}
|
25
|
-
|
26
|
-
.col-form-label-lg {
|
27
|
-
padding-top: add($input-padding-y-lg, $input-border-width);
|
28
|
-
padding-bottom: add($input-padding-y-lg, $input-border-width);
|
29
|
-
@include font-size($input-font-size-lg);
|
30
|
-
}
|
31
|
-
|
32
|
-
.col-form-label-sm {
|
33
|
-
padding-top: add($input-padding-y-sm, $input-border-width);
|
34
|
-
padding-bottom: add($input-padding-y-sm, $input-border-width);
|
35
|
-
@include font-size($input-font-size-sm);
|
36
|
-
}
|
1
|
+
//
|
2
|
+
// Labels
|
3
|
+
//
|
4
|
+
|
5
|
+
.form-label {
|
6
|
+
margin-bottom: $form-label-margin-bottom;
|
7
|
+
@include font-size($form-label-font-size);
|
8
|
+
font-style: $form-label-font-style;
|
9
|
+
font-weight: $form-label-font-weight;
|
10
|
+
color: $form-label-color;
|
11
|
+
}
|
12
|
+
|
13
|
+
// For use with horizontal and inline forms, when you need the label (or legend)
|
14
|
+
// text to align with the form controls.
|
15
|
+
.col-form-label {
|
16
|
+
padding-top: add($input-padding-y, $input-border-width);
|
17
|
+
padding-bottom: add($input-padding-y, $input-border-width);
|
18
|
+
margin-bottom: 0; // Override the `<legend>` default
|
19
|
+
@include font-size(inherit); // Override the `<legend>` default
|
20
|
+
font-style: $form-label-font-style;
|
21
|
+
font-weight: $form-label-font-weight;
|
22
|
+
line-height: $input-line-height;
|
23
|
+
color: $form-label-color;
|
24
|
+
}
|
25
|
+
|
26
|
+
.col-form-label-lg {
|
27
|
+
padding-top: add($input-padding-y-lg, $input-border-width);
|
28
|
+
padding-bottom: add($input-padding-y-lg, $input-border-width);
|
29
|
+
@include font-size($input-font-size-lg);
|
30
|
+
}
|
31
|
+
|
32
|
+
.col-form-label-sm {
|
33
|
+
padding-top: add($input-padding-y-sm, $input-border-width);
|
34
|
+
padding-bottom: add($input-padding-y-sm, $input-border-width);
|
35
|
+
@include font-size($input-font-size-sm);
|
36
|
+
}
|
package/forms/_validation.scss
CHANGED
@@ -1,12 +1,12 @@
|
|
1
|
-
// Form validation
|
2
|
-
//
|
3
|
-
// Provide feedback to users when form field values are valid or invalid. Works
|
4
|
-
// primarily for client-side validation via scoped `:invalid` and `:valid`
|
5
|
-
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
6
|
-
// server-side validation.
|
7
|
-
|
8
|
-
// scss-docs-start form-validation-states-loop
|
9
|
-
@each $state, $data in $form-validation-states {
|
10
|
-
@include form-validation-state($state, $data...);
|
11
|
-
}
|
12
|
-
// scss-docs-end form-validation-states-loop
|
1
|
+
// Form validation
|
2
|
+
//
|
3
|
+
// Provide feedback to users when form field values are valid or invalid. Works
|
4
|
+
// primarily for client-side validation via scoped `:invalid` and `:valid`
|
5
|
+
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
6
|
+
// server-side validation.
|
7
|
+
|
8
|
+
// scss-docs-start form-validation-states-loop
|
9
|
+
@each $state, $data in $form-validation-states {
|
10
|
+
@include form-validation-state($state, $data...);
|
11
|
+
}
|
12
|
+
// scss-docs-end form-validation-states-loop
|
package/helpers/_clearfix.scss
CHANGED
@@ -1,3 +1,3 @@
|
|
1
|
-
.clearfix {
|
2
|
-
@include clearfix();
|
3
|
-
}
|
1
|
+
.clearfix {
|
2
|
+
@include clearfix();
|
3
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
// stylelint-disable function-name-case
|
2
|
+
|
3
|
+
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
|
4
|
+
@each $color, $value in $theme-colors {
|
5
|
+
$color-rgb: to-rgb($value);
|
6
|
+
.text-bg-#{$color} {
|
7
|
+
color: color-contrast($value) if($enable-important-utilities, !important, null);
|
8
|
+
background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
|
9
|
+
}
|
10
|
+
}
|
@@ -1,12 +1,12 @@
|
|
1
|
-
@each $color, $value in $theme-colors {
|
2
|
-
.link-#{$color} {
|
3
|
-
color: $value;
|
4
|
-
|
5
|
-
@if $link-shade-percentage != 0 {
|
6
|
-
&:hover,
|
7
|
-
&:focus {
|
8
|
-
color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
|
9
|
-
}
|
10
|
-
}
|
11
|
-
}
|
12
|
-
}
|
1
|
+
@each $color, $value in $theme-colors {
|
2
|
+
.link-#{$color} {
|
3
|
+
color: $value !important; // stylelint-disable-line declaration-no-important
|
4
|
+
|
5
|
+
@if $link-shade-percentage != 0 {
|
6
|
+
&:hover,
|
7
|
+
&:focus {
|
8
|
+
color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
|
9
|
+
}
|
10
|
+
}
|
11
|
+
}
|
12
|
+
}
|
package/helpers/_position.scss
CHANGED
@@ -1,30 +1,36 @@
|
|
1
|
-
// Shorthand
|
2
|
-
|
3
|
-
.fixed-top {
|
4
|
-
position: fixed;
|
5
|
-
top: 0;
|
6
|
-
right: 0;
|
7
|
-
left: 0;
|
8
|
-
z-index: $zindex-fixed;
|
9
|
-
}
|
10
|
-
|
11
|
-
.fixed-bottom {
|
12
|
-
position: fixed;
|
13
|
-
right: 0;
|
14
|
-
bottom: 0;
|
15
|
-
left: 0;
|
16
|
-
z-index: $zindex-fixed;
|
17
|
-
}
|
18
|
-
|
19
|
-
// Responsive sticky top
|
20
|
-
@each $breakpoint in map-keys($grid-breakpoints) {
|
21
|
-
@include media-breakpoint-up($breakpoint) {
|
22
|
-
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
23
|
-
|
24
|
-
.sticky#{$infix}-top {
|
25
|
-
position: sticky;
|
26
|
-
top: 0;
|
27
|
-
z-index: $zindex-sticky;
|
28
|
-
}
|
29
|
-
|
30
|
-
}
|
1
|
+
// Shorthand
|
2
|
+
|
3
|
+
.fixed-top {
|
4
|
+
position: fixed;
|
5
|
+
top: 0;
|
6
|
+
right: 0;
|
7
|
+
left: 0;
|
8
|
+
z-index: $zindex-fixed;
|
9
|
+
}
|
10
|
+
|
11
|
+
.fixed-bottom {
|
12
|
+
position: fixed;
|
13
|
+
right: 0;
|
14
|
+
bottom: 0;
|
15
|
+
left: 0;
|
16
|
+
z-index: $zindex-fixed;
|
17
|
+
}
|
18
|
+
|
19
|
+
// Responsive sticky top and bottom
|
20
|
+
@each $breakpoint in map-keys($grid-breakpoints) {
|
21
|
+
@include media-breakpoint-up($breakpoint) {
|
22
|
+
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
23
|
+
|
24
|
+
.sticky#{$infix}-top {
|
25
|
+
position: sticky;
|
26
|
+
top: 0;
|
27
|
+
z-index: $zindex-sticky;
|
28
|
+
}
|
29
|
+
|
30
|
+
.sticky#{$infix}-bottom {
|
31
|
+
position: sticky;
|
32
|
+
bottom: 0;
|
33
|
+
z-index: $zindex-sticky;
|
34
|
+
}
|
35
|
+
}
|
36
|
+
}
|