bootstrap-scss 5.2.1 → 5.2.3
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 +22 -22
- package/README.md +84 -84
- package/_accordion.scss +149 -149
- package/_button-group.scss +142 -142
- package/_buttons.scss +207 -201
- package/_carousel.scss +0 -3
- package/_dropdown.scss +249 -249
- package/_functions.scss +302 -302
- package/_list-group.scss +192 -192
- package/_modal.scss +237 -237
- package/_nav.scss +172 -172
- package/_navbar.scss +278 -278
- package/_offcanvas.scss +144 -144
- package/_pagination.scss +109 -109
- package/_popover.scss +196 -196
- package/_toasts.scss +73 -71
- package/_variables.scss +1634 -1634
- package/bootstrap-utilities.scss +3 -0
- package/forms/_floating-labels.scss +75 -75
- package/forms/_input-group.scss +132 -132
- package/mixins/_banner.scss +9 -9
- package/mixins/_forms.scss +152 -152
- package/mixins/_table-variants.scss +2 -2
- package/mixins/_utilities.scss +97 -97
- package/package.json +26 -26
package/bootstrap-utilities.scss
CHANGED
@@ -1,75 +1,75 @@
|
|
1
|
-
.form-floating {
|
2
|
-
position: relative;
|
3
|
-
|
4
|
-
> .form-control,
|
5
|
-
> .form-control-plaintext,
|
6
|
-
> .form-select {
|
7
|
-
height: $form-floating-height;
|
8
|
-
line-height: $form-floating-line-height;
|
9
|
-
}
|
10
|
-
|
11
|
-
> label {
|
12
|
-
position: absolute;
|
13
|
-
top: 0;
|
14
|
-
left: 0;
|
15
|
-
width: 100%;
|
16
|
-
height: 100%; // allow textareas
|
17
|
-
padding: $form-floating-padding-y $form-floating-padding-x;
|
18
|
-
overflow: hidden;
|
19
|
-
text-align: start;
|
20
|
-
text-overflow: ellipsis;
|
21
|
-
white-space: nowrap;
|
22
|
-
pointer-events: none;
|
23
|
-
border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
|
24
|
-
transform-origin: 0 0;
|
25
|
-
@include transition($form-floating-transition);
|
26
|
-
}
|
27
|
-
|
28
|
-
> .form-control,
|
29
|
-
> .form-control-plaintext {
|
30
|
-
padding: $form-floating-padding-y $form-floating-padding-x;
|
31
|
-
|
32
|
-
&::placeholder {
|
33
|
-
color: transparent;
|
34
|
-
}
|
35
|
-
|
36
|
-
&:focus,
|
37
|
-
&:not(:placeholder-shown) {
|
38
|
-
padding-top: $form-floating-input-padding-t;
|
39
|
-
padding-bottom: $form-floating-input-padding-b;
|
40
|
-
}
|
41
|
-
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
42
|
-
&:-webkit-autofill {
|
43
|
-
padding-top: $form-floating-input-padding-t;
|
44
|
-
padding-bottom: $form-floating-input-padding-b;
|
45
|
-
}
|
46
|
-
}
|
47
|
-
|
48
|
-
> .form-select {
|
49
|
-
padding-top: $form-floating-input-padding-t;
|
50
|
-
padding-bottom: $form-floating-input-padding-b;
|
51
|
-
}
|
52
|
-
|
53
|
-
> .form-control:focus,
|
54
|
-
> .form-control:not(:placeholder-shown),
|
55
|
-
> .form-control-plaintext,
|
56
|
-
> .form-select {
|
57
|
-
~ label {
|
58
|
-
opacity: $form-floating-label-opacity;
|
59
|
-
transform: $form-floating-label-transform;
|
60
|
-
}
|
61
|
-
}
|
62
|
-
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
63
|
-
> .form-control:-webkit-autofill {
|
64
|
-
~ label {
|
65
|
-
opacity: $form-floating-label-opacity;
|
66
|
-
transform: $form-floating-label-transform;
|
67
|
-
}
|
68
|
-
}
|
69
|
-
|
70
|
-
> .form-control-plaintext {
|
71
|
-
~ label {
|
72
|
-
border-width: $input-border-width 0; // Required to properly position label text - as explained above
|
73
|
-
}
|
74
|
-
}
|
75
|
-
}
|
1
|
+
.form-floating {
|
2
|
+
position: relative;
|
3
|
+
|
4
|
+
> .form-control,
|
5
|
+
> .form-control-plaintext,
|
6
|
+
> .form-select {
|
7
|
+
height: $form-floating-height;
|
8
|
+
line-height: $form-floating-line-height;
|
9
|
+
}
|
10
|
+
|
11
|
+
> label {
|
12
|
+
position: absolute;
|
13
|
+
top: 0;
|
14
|
+
left: 0;
|
15
|
+
width: 100%;
|
16
|
+
height: 100%; // allow textareas
|
17
|
+
padding: $form-floating-padding-y $form-floating-padding-x;
|
18
|
+
overflow: hidden;
|
19
|
+
text-align: start;
|
20
|
+
text-overflow: ellipsis;
|
21
|
+
white-space: nowrap;
|
22
|
+
pointer-events: none;
|
23
|
+
border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
|
24
|
+
transform-origin: 0 0;
|
25
|
+
@include transition($form-floating-transition);
|
26
|
+
}
|
27
|
+
|
28
|
+
> .form-control,
|
29
|
+
> .form-control-plaintext {
|
30
|
+
padding: $form-floating-padding-y $form-floating-padding-x;
|
31
|
+
|
32
|
+
&::placeholder {
|
33
|
+
color: transparent;
|
34
|
+
}
|
35
|
+
|
36
|
+
&:focus,
|
37
|
+
&:not(:placeholder-shown) {
|
38
|
+
padding-top: $form-floating-input-padding-t;
|
39
|
+
padding-bottom: $form-floating-input-padding-b;
|
40
|
+
}
|
41
|
+
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
42
|
+
&:-webkit-autofill {
|
43
|
+
padding-top: $form-floating-input-padding-t;
|
44
|
+
padding-bottom: $form-floating-input-padding-b;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
> .form-select {
|
49
|
+
padding-top: $form-floating-input-padding-t;
|
50
|
+
padding-bottom: $form-floating-input-padding-b;
|
51
|
+
}
|
52
|
+
|
53
|
+
> .form-control:focus,
|
54
|
+
> .form-control:not(:placeholder-shown),
|
55
|
+
> .form-control-plaintext,
|
56
|
+
> .form-select {
|
57
|
+
~ label {
|
58
|
+
opacity: $form-floating-label-opacity;
|
59
|
+
transform: $form-floating-label-transform;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
63
|
+
> .form-control:-webkit-autofill {
|
64
|
+
~ label {
|
65
|
+
opacity: $form-floating-label-opacity;
|
66
|
+
transform: $form-floating-label-transform;
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
> .form-control-plaintext {
|
71
|
+
~ label {
|
72
|
+
border-width: $input-border-width 0; // Required to properly position label text - as explained above
|
73
|
+
}
|
74
|
+
}
|
75
|
+
}
|
package/forms/_input-group.scss
CHANGED
@@ -1,132 +1,132 @@
|
|
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: 5;
|
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: 5;
|
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)#{$validation-messages} {
|
124
|
-
margin-left: -$input-border-width;
|
125
|
-
@include border-start-radius(0);
|
126
|
-
}
|
127
|
-
|
128
|
-
> .form-floating:not(:first-child) > .form-control,
|
129
|
-
> .form-floating:not(:first-child) > .form-select {
|
130
|
-
@include border-start-radius(0);
|
131
|
-
}
|
132
|
-
}
|
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: 5;
|
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: 5;
|
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)#{$validation-messages} {
|
124
|
+
margin-left: -$input-border-width;
|
125
|
+
@include border-start-radius(0);
|
126
|
+
}
|
127
|
+
|
128
|
+
> .form-floating:not(:first-child) > .form-control,
|
129
|
+
> .form-floating:not(:first-child) > .form-select {
|
130
|
+
@include border-start-radius(0);
|
131
|
+
}
|
132
|
+
}
|
package/mixins/_banner.scss
CHANGED
@@ -1,9 +1,9 @@
|
|
1
|
-
@mixin bsBanner($file) {
|
2
|
-
/*!
|
3
|
-
* Bootstrap #{$file} v5.2.
|
4
|
-
* Copyright 2011-2022 The Bootstrap Authors
|
5
|
-
* Copyright 2011-2022 Twitter, Inc.
|
6
|
-
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
7
|
-
*/
|
8
|
-
}
|
9
|
-
|
1
|
+
@mixin bsBanner($file) {
|
2
|
+
/*!
|
3
|
+
* Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/)
|
4
|
+
* Copyright 2011-2022 The Bootstrap Authors
|
5
|
+
* Copyright 2011-2022 Twitter, Inc.
|
6
|
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
7
|
+
*/
|
8
|
+
}
|
9
|
+
|