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.
- 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 -151
- 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 -1639
- 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 -70
- 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 -150
- 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/mixins/_forms.scss
CHANGED
@@ -1,144 +1,152 @@
|
|
1
|
-
// This mixin uses an `if()` technique to be compatible with Dart Sass
|
2
|
-
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
|
3
|
-
|
4
|
-
// scss-docs-start form-validation-mixins
|
5
|
-
@mixin form-validation-state-selector($state) {
|
6
|
-
@if ($state == "valid" or $state == "invalid") {
|
7
|
-
.was-validated #{if(&, "&", "")}:#{$state},
|
8
|
-
#{if(&, "&", "")}.is-#{$state} {
|
9
|
-
@content;
|
10
|
-
}
|
11
|
-
} @else {
|
12
|
-
#{if(&, "&", "")}.is-#{$state} {
|
13
|
-
@content;
|
14
|
-
}
|
15
|
-
}
|
16
|
-
}
|
17
|
-
|
18
|
-
@mixin form-validation-state(
|
19
|
-
$state,
|
20
|
-
$color,
|
21
|
-
$icon,
|
22
|
-
$tooltip-color: color-contrast($color),
|
23
|
-
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
|
24
|
-
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
|
25
|
-
) {
|
26
|
-
.#{$state}-feedback {
|
27
|
-
display: none;
|
28
|
-
width: 100%;
|
29
|
-
margin-top: $form-feedback-margin-top;
|
30
|
-
@include font-size($form-feedback-font-size);
|
31
|
-
font-style: $form-feedback-font-style;
|
32
|
-
color: $color;
|
33
|
-
}
|
34
|
-
|
35
|
-
.#{$state}-tooltip {
|
36
|
-
position: absolute;
|
37
|
-
top: 100%;
|
38
|
-
z-index: 5;
|
39
|
-
display: none;
|
40
|
-
max-width: 100%; // Contain to parent when possible
|
41
|
-
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
|
42
|
-
margin-top: .1rem;
|
43
|
-
@include font-size($form-feedback-tooltip-font-size);
|
44
|
-
line-height: $form-feedback-tooltip-line-height;
|
45
|
-
color: $tooltip-color;
|
46
|
-
background-color: $tooltip-bg-color;
|
47
|
-
@include border-radius($form-feedback-tooltip-border-radius);
|
48
|
-
}
|
49
|
-
|
50
|
-
@include form-validation-state-selector($state) {
|
51
|
-
~ .#{$state}-feedback,
|
52
|
-
~ .#{$state}-tooltip {
|
53
|
-
display: block;
|
54
|
-
}
|
55
|
-
}
|
56
|
-
|
57
|
-
.form-control {
|
58
|
-
@include form-validation-state-selector($state) {
|
59
|
-
border-color: $color;
|
60
|
-
|
61
|
-
@if $enable-validation-icons {
|
62
|
-
padding-right: $input-height-inner;
|
63
|
-
background-image: escape-svg($icon);
|
64
|
-
background-repeat: no-repeat;
|
65
|
-
background-position: right $input-height-inner-quarter center;
|
66
|
-
background-size: $input-height-inner-half $input-height-inner-half;
|
67
|
-
}
|
68
|
-
|
69
|
-
&:focus {
|
70
|
-
border-color: $color;
|
71
|
-
box-shadow: $focus-box-shadow;
|
72
|
-
}
|
73
|
-
}
|
74
|
-
}
|
75
|
-
|
76
|
-
// stylelint-disable-next-line selector-no-qualifying-type
|
77
|
-
textarea.form-control {
|
78
|
-
@include form-validation-state-selector($state) {
|
79
|
-
@if $enable-validation-icons {
|
80
|
-
padding-right: $input-height-inner;
|
81
|
-
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
|
82
|
-
}
|
83
|
-
}
|
84
|
-
}
|
85
|
-
|
86
|
-
.form-select {
|
87
|
-
@include form-validation-state-selector($state) {
|
88
|
-
border-color: $color;
|
89
|
-
|
90
|
-
@if $enable-validation-icons {
|
91
|
-
&:not([multiple]):not([size]),
|
92
|
-
&:not([multiple])[size="1"] {
|
93
|
-
padding-right: $form-select-feedback-icon-padding-end;
|
94
|
-
background-image: escape-svg($form-select-indicator), escape-svg($icon);
|
95
|
-
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
|
96
|
-
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
|
97
|
-
}
|
98
|
-
}
|
99
|
-
|
100
|
-
&:focus {
|
101
|
-
border-color: $color;
|
102
|
-
box-shadow: $focus-box-shadow;
|
103
|
-
}
|
104
|
-
}
|
105
|
-
}
|
106
|
-
|
107
|
-
.form-
|
108
|
-
@include form-validation-state-selector($state) {
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
color: $color;
|
121
|
-
}
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
}
|
144
|
-
|
1
|
+
// This mixin uses an `if()` technique to be compatible with Dart Sass
|
2
|
+
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
|
3
|
+
|
4
|
+
// scss-docs-start form-validation-mixins
|
5
|
+
@mixin form-validation-state-selector($state) {
|
6
|
+
@if ($state == "valid" or $state == "invalid") {
|
7
|
+
.was-validated #{if(&, "&", "")}:#{$state},
|
8
|
+
#{if(&, "&", "")}.is-#{$state} {
|
9
|
+
@content;
|
10
|
+
}
|
11
|
+
} @else {
|
12
|
+
#{if(&, "&", "")}.is-#{$state} {
|
13
|
+
@content;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
@mixin form-validation-state(
|
19
|
+
$state,
|
20
|
+
$color,
|
21
|
+
$icon,
|
22
|
+
$tooltip-color: color-contrast($color),
|
23
|
+
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
|
24
|
+
$focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
|
25
|
+
) {
|
26
|
+
.#{$state}-feedback {
|
27
|
+
display: none;
|
28
|
+
width: 100%;
|
29
|
+
margin-top: $form-feedback-margin-top;
|
30
|
+
@include font-size($form-feedback-font-size);
|
31
|
+
font-style: $form-feedback-font-style;
|
32
|
+
color: $color;
|
33
|
+
}
|
34
|
+
|
35
|
+
.#{$state}-tooltip {
|
36
|
+
position: absolute;
|
37
|
+
top: 100%;
|
38
|
+
z-index: 5;
|
39
|
+
display: none;
|
40
|
+
max-width: 100%; // Contain to parent when possible
|
41
|
+
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
|
42
|
+
margin-top: .1rem;
|
43
|
+
@include font-size($form-feedback-tooltip-font-size);
|
44
|
+
line-height: $form-feedback-tooltip-line-height;
|
45
|
+
color: $tooltip-color;
|
46
|
+
background-color: $tooltip-bg-color;
|
47
|
+
@include border-radius($form-feedback-tooltip-border-radius);
|
48
|
+
}
|
49
|
+
|
50
|
+
@include form-validation-state-selector($state) {
|
51
|
+
~ .#{$state}-feedback,
|
52
|
+
~ .#{$state}-tooltip {
|
53
|
+
display: block;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
.form-control {
|
58
|
+
@include form-validation-state-selector($state) {
|
59
|
+
border-color: $color;
|
60
|
+
|
61
|
+
@if $enable-validation-icons {
|
62
|
+
padding-right: $input-height-inner;
|
63
|
+
background-image: escape-svg($icon);
|
64
|
+
background-repeat: no-repeat;
|
65
|
+
background-position: right $input-height-inner-quarter center;
|
66
|
+
background-size: $input-height-inner-half $input-height-inner-half;
|
67
|
+
}
|
68
|
+
|
69
|
+
&:focus {
|
70
|
+
border-color: $color;
|
71
|
+
box-shadow: $focus-box-shadow;
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
75
|
+
|
76
|
+
// stylelint-disable-next-line selector-no-qualifying-type
|
77
|
+
textarea.form-control {
|
78
|
+
@include form-validation-state-selector($state) {
|
79
|
+
@if $enable-validation-icons {
|
80
|
+
padding-right: $input-height-inner;
|
81
|
+
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
|
82
|
+
}
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
.form-select {
|
87
|
+
@include form-validation-state-selector($state) {
|
88
|
+
border-color: $color;
|
89
|
+
|
90
|
+
@if $enable-validation-icons {
|
91
|
+
&:not([multiple]):not([size]),
|
92
|
+
&:not([multiple])[size="1"] {
|
93
|
+
padding-right: $form-select-feedback-icon-padding-end;
|
94
|
+
background-image: escape-svg($form-select-indicator), escape-svg($icon);
|
95
|
+
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
|
96
|
+
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
|
97
|
+
}
|
98
|
+
}
|
99
|
+
|
100
|
+
&:focus {
|
101
|
+
border-color: $color;
|
102
|
+
box-shadow: $focus-box-shadow;
|
103
|
+
}
|
104
|
+
}
|
105
|
+
}
|
106
|
+
|
107
|
+
.form-control-color {
|
108
|
+
@include form-validation-state-selector($state) {
|
109
|
+
@if $enable-validation-icons {
|
110
|
+
width: add($form-color-width, $input-height-inner);
|
111
|
+
}
|
112
|
+
}
|
113
|
+
}
|
114
|
+
|
115
|
+
.form-check-input {
|
116
|
+
@include form-validation-state-selector($state) {
|
117
|
+
border-color: $color;
|
118
|
+
|
119
|
+
&:checked {
|
120
|
+
background-color: $color;
|
121
|
+
}
|
122
|
+
|
123
|
+
&:focus {
|
124
|
+
box-shadow: $focus-box-shadow;
|
125
|
+
}
|
126
|
+
|
127
|
+
~ .form-check-label {
|
128
|
+
color: $color;
|
129
|
+
}
|
130
|
+
}
|
131
|
+
}
|
132
|
+
.form-check-inline .form-check-input {
|
133
|
+
~ .#{$state}-feedback {
|
134
|
+
margin-left: .5em;
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
.input-group .form-control,
|
139
|
+
.input-group .form-select {
|
140
|
+
@include form-validation-state-selector($state) {
|
141
|
+
@if $state == "valid" {
|
142
|
+
z-index: 1;
|
143
|
+
} @else if $state == "invalid" {
|
144
|
+
z-index: 2;
|
145
|
+
}
|
146
|
+
&:focus {
|
147
|
+
z-index: 3;
|
148
|
+
}
|
149
|
+
}
|
150
|
+
}
|
151
|
+
}
|
152
|
+
// scss-docs-end form-validation-mixins
|
package/mixins/_gradients.scss
CHANGED
@@ -1,47 +1,47 @@
|
|
1
|
-
// Gradients
|
2
|
-
|
3
|
-
// scss-docs-start gradient-bg-mixin
|
4
|
-
@mixin gradient-bg($color: null) {
|
5
|
-
background-color: $color;
|
6
|
-
|
7
|
-
@if $enable-gradients {
|
8
|
-
background-image: var(--#{$
|
9
|
-
}
|
10
|
-
}
|
11
|
-
// scss-docs-end gradient-bg-mixin
|
12
|
-
|
13
|
-
// scss-docs-start gradient-mixins
|
14
|
-
// Horizontal gradient, from left to right
|
15
|
-
//
|
16
|
-
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
17
|
-
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
|
18
|
-
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
|
19
|
-
}
|
20
|
-
|
21
|
-
// Vertical gradient, from top to bottom
|
22
|
-
//
|
23
|
-
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
24
|
-
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
|
25
|
-
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
|
26
|
-
}
|
27
|
-
|
28
|
-
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
|
29
|
-
background-image: linear-gradient($deg, $start-color, $end-color);
|
30
|
-
}
|
31
|
-
|
32
|
-
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
|
33
|
-
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
34
|
-
}
|
35
|
-
|
36
|
-
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
|
37
|
-
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
38
|
-
}
|
39
|
-
|
40
|
-
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
|
41
|
-
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
42
|
-
}
|
43
|
-
|
44
|
-
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
|
45
|
-
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
46
|
-
}
|
47
|
-
// scss-docs-end gradient-mixins
|
1
|
+
// Gradients
|
2
|
+
|
3
|
+
// scss-docs-start gradient-bg-mixin
|
4
|
+
@mixin gradient-bg($color: null) {
|
5
|
+
background-color: $color;
|
6
|
+
|
7
|
+
@if $enable-gradients {
|
8
|
+
background-image: var(--#{$prefix}gradient);
|
9
|
+
}
|
10
|
+
}
|
11
|
+
// scss-docs-end gradient-bg-mixin
|
12
|
+
|
13
|
+
// scss-docs-start gradient-mixins
|
14
|
+
// Horizontal gradient, from left to right
|
15
|
+
//
|
16
|
+
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
17
|
+
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
|
18
|
+
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
|
19
|
+
}
|
20
|
+
|
21
|
+
// Vertical gradient, from top to bottom
|
22
|
+
//
|
23
|
+
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
24
|
+
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
|
25
|
+
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
|
26
|
+
}
|
27
|
+
|
28
|
+
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
|
29
|
+
background-image: linear-gradient($deg, $start-color, $end-color);
|
30
|
+
}
|
31
|
+
|
32
|
+
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
|
33
|
+
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
|
34
|
+
}
|
35
|
+
|
36
|
+
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
|
37
|
+
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
|
38
|
+
}
|
39
|
+
|
40
|
+
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
|
41
|
+
background-image: radial-gradient(circle, $inner-color, $outer-color);
|
42
|
+
}
|
43
|
+
|
44
|
+
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
|
45
|
+
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
|
46
|
+
}
|
47
|
+
// scss-docs-end gradient-mixins
|