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/_button-group.scss
CHANGED
|
@@ -1,142 +1,142 @@
|
|
|
1
|
-
// Make the div behave like a button
|
|
2
|
-
.btn-group,
|
|
3
|
-
.btn-group-vertical {
|
|
4
|
-
position: relative;
|
|
5
|
-
display: inline-flex;
|
|
6
|
-
vertical-align: middle; // match .btn alignment given font-size hack above
|
|
7
|
-
|
|
8
|
-
> .btn {
|
|
9
|
-
position: relative;
|
|
10
|
-
flex: 1 1 auto;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
// Bring the hover, focused, and "active" buttons to the front to overlay
|
|
14
|
-
// the borders properly
|
|
15
|
-
> .btn-check:checked + .btn,
|
|
16
|
-
> .btn-check:focus + .btn,
|
|
17
|
-
> .btn:hover,
|
|
18
|
-
> .btn:focus,
|
|
19
|
-
> .btn:active,
|
|
20
|
-
> .btn.active {
|
|
21
|
-
z-index: 1;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
// Optional: Group multiple button groups together for a toolbar
|
|
26
|
-
.btn-toolbar {
|
|
27
|
-
display: flex;
|
|
28
|
-
flex-wrap: wrap;
|
|
29
|
-
justify-content: flex-start;
|
|
30
|
-
|
|
31
|
-
.input-group {
|
|
32
|
-
width: auto;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.btn-group {
|
|
37
|
-
@include border-radius($btn-border-radius);
|
|
38
|
-
|
|
39
|
-
// Prevent double borders when buttons are next to each other
|
|
40
|
-
> :not(.btn-check:first-child) + .btn,
|
|
41
|
-
> .btn-group:not(:first-child) {
|
|
42
|
-
margin-left: -$btn-border-width;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// Reset rounded corners
|
|
46
|
-
> .btn:not(:last-child):not(.dropdown-toggle),
|
|
47
|
-
> .btn.dropdown-toggle-split:first-child,
|
|
48
|
-
> .btn-group:not(:last-child) > .btn {
|
|
49
|
-
@include border-end-radius(0);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// The left radius should be 0 if the button is:
|
|
53
|
-
// - the "third or more" child
|
|
54
|
-
// - the second child and the previous element isn't `.btn-check` (making it the first child visually)
|
|
55
|
-
// - part of a btn-group which isn't the first child
|
|
56
|
-
> .btn:nth-child(n + 3),
|
|
57
|
-
> :not(.btn-check) + .btn,
|
|
58
|
-
> .btn-group:not(:first-child) > .btn {
|
|
59
|
-
@include border-start-radius(0);
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
// Sizing
|
|
64
|
-
//
|
|
65
|
-
// Remix the default button sizing classes into new ones for easier manipulation.
|
|
66
|
-
|
|
67
|
-
.btn-group-sm > .btn { @extend .btn-sm; }
|
|
68
|
-
.btn-group-lg > .btn { @extend .btn-lg; }
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
//
|
|
72
|
-
// Split button dropdowns
|
|
73
|
-
//
|
|
74
|
-
|
|
75
|
-
.dropdown-toggle-split {
|
|
76
|
-
padding-right: $btn-padding-x * .75;
|
|
77
|
-
padding-left: $btn-padding-x * .75;
|
|
78
|
-
|
|
79
|
-
&::after,
|
|
80
|
-
.dropup &::after,
|
|
81
|
-
.dropend &::after {
|
|
82
|
-
margin-left: 0;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.dropstart &::before {
|
|
86
|
-
margin-right: 0;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.btn-sm + .dropdown-toggle-split {
|
|
91
|
-
padding-right: $btn-padding-x-sm * .75;
|
|
92
|
-
padding-left: $btn-padding-x-sm * .75;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.btn-lg + .dropdown-toggle-split {
|
|
96
|
-
padding-right: $btn-padding-x-lg * .75;
|
|
97
|
-
padding-left: $btn-padding-x-lg * .75;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
// The clickable button for toggling the menu
|
|
102
|
-
// Set the same inset shadow as the :active state
|
|
103
|
-
.btn-group.show .dropdown-toggle {
|
|
104
|
-
@include box-shadow($btn-active-box-shadow);
|
|
105
|
-
|
|
106
|
-
// Show no shadow for `.btn-link` since it has no other button styles.
|
|
107
|
-
&.btn-link {
|
|
108
|
-
@include box-shadow(none);
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
//
|
|
114
|
-
// Vertical button groups
|
|
115
|
-
//
|
|
116
|
-
|
|
117
|
-
.btn-group-vertical {
|
|
118
|
-
flex-direction: column;
|
|
119
|
-
align-items: flex-start;
|
|
120
|
-
justify-content: center;
|
|
121
|
-
|
|
122
|
-
> .btn,
|
|
123
|
-
> .btn-group {
|
|
124
|
-
width: 100%;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
> .btn:not(:first-child),
|
|
128
|
-
> .btn-group:not(:first-child) {
|
|
129
|
-
margin-top: -$btn-border-width;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
// Reset rounded corners
|
|
133
|
-
> .btn:not(:last-child):not(.dropdown-toggle),
|
|
134
|
-
> .btn-group:not(:last-child) > .btn {
|
|
135
|
-
@include border-bottom-radius(0);
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
> .btn ~ .btn,
|
|
139
|
-
> .btn-group:not(:first-child) > .btn {
|
|
140
|
-
@include border-top-radius(0);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
1
|
+
// Make the div behave like a button
|
|
2
|
+
.btn-group,
|
|
3
|
+
.btn-group-vertical {
|
|
4
|
+
position: relative;
|
|
5
|
+
display: inline-flex;
|
|
6
|
+
vertical-align: middle; // match .btn alignment given font-size hack above
|
|
7
|
+
|
|
8
|
+
> .btn {
|
|
9
|
+
position: relative;
|
|
10
|
+
flex: 1 1 auto;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// Bring the hover, focused, and "active" buttons to the front to overlay
|
|
14
|
+
// the borders properly
|
|
15
|
+
> .btn-check:checked + .btn,
|
|
16
|
+
> .btn-check:focus + .btn,
|
|
17
|
+
> .btn:hover,
|
|
18
|
+
> .btn:focus,
|
|
19
|
+
> .btn:active,
|
|
20
|
+
> .btn.active {
|
|
21
|
+
z-index: 1;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// Optional: Group multiple button groups together for a toolbar
|
|
26
|
+
.btn-toolbar {
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-wrap: wrap;
|
|
29
|
+
justify-content: flex-start;
|
|
30
|
+
|
|
31
|
+
.input-group {
|
|
32
|
+
width: auto;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.btn-group {
|
|
37
|
+
@include border-radius($btn-border-radius);
|
|
38
|
+
|
|
39
|
+
// Prevent double borders when buttons are next to each other
|
|
40
|
+
> :not(.btn-check:first-child) + .btn,
|
|
41
|
+
> .btn-group:not(:first-child) {
|
|
42
|
+
margin-left: -$btn-border-width;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Reset rounded corners
|
|
46
|
+
> .btn:not(:last-child):not(.dropdown-toggle),
|
|
47
|
+
> .btn.dropdown-toggle-split:first-child,
|
|
48
|
+
> .btn-group:not(:last-child) > .btn {
|
|
49
|
+
@include border-end-radius(0);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// The left radius should be 0 if the button is:
|
|
53
|
+
// - the "third or more" child
|
|
54
|
+
// - the second child and the previous element isn't `.btn-check` (making it the first child visually)
|
|
55
|
+
// - part of a btn-group which isn't the first child
|
|
56
|
+
> .btn:nth-child(n + 3),
|
|
57
|
+
> :not(.btn-check) + .btn,
|
|
58
|
+
> .btn-group:not(:first-child) > .btn {
|
|
59
|
+
@include border-start-radius(0);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Sizing
|
|
64
|
+
//
|
|
65
|
+
// Remix the default button sizing classes into new ones for easier manipulation.
|
|
66
|
+
|
|
67
|
+
.btn-group-sm > .btn { @extend .btn-sm; }
|
|
68
|
+
.btn-group-lg > .btn { @extend .btn-lg; }
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
//
|
|
72
|
+
// Split button dropdowns
|
|
73
|
+
//
|
|
74
|
+
|
|
75
|
+
.dropdown-toggle-split {
|
|
76
|
+
padding-right: $btn-padding-x * .75;
|
|
77
|
+
padding-left: $btn-padding-x * .75;
|
|
78
|
+
|
|
79
|
+
&::after,
|
|
80
|
+
.dropup &::after,
|
|
81
|
+
.dropend &::after {
|
|
82
|
+
margin-left: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.dropstart &::before {
|
|
86
|
+
margin-right: 0;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.btn-sm + .dropdown-toggle-split {
|
|
91
|
+
padding-right: $btn-padding-x-sm * .75;
|
|
92
|
+
padding-left: $btn-padding-x-sm * .75;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.btn-lg + .dropdown-toggle-split {
|
|
96
|
+
padding-right: $btn-padding-x-lg * .75;
|
|
97
|
+
padding-left: $btn-padding-x-lg * .75;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
// The clickable button for toggling the menu
|
|
102
|
+
// Set the same inset shadow as the :active state
|
|
103
|
+
.btn-group.show .dropdown-toggle {
|
|
104
|
+
@include box-shadow($btn-active-box-shadow);
|
|
105
|
+
|
|
106
|
+
// Show no shadow for `.btn-link` since it has no other button styles.
|
|
107
|
+
&.btn-link {
|
|
108
|
+
@include box-shadow(none);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
//
|
|
114
|
+
// Vertical button groups
|
|
115
|
+
//
|
|
116
|
+
|
|
117
|
+
.btn-group-vertical {
|
|
118
|
+
flex-direction: column;
|
|
119
|
+
align-items: flex-start;
|
|
120
|
+
justify-content: center;
|
|
121
|
+
|
|
122
|
+
> .btn,
|
|
123
|
+
> .btn-group {
|
|
124
|
+
width: 100%;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
> .btn:not(:first-child),
|
|
128
|
+
> .btn-group:not(:first-child) {
|
|
129
|
+
margin-top: -$btn-border-width;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// Reset rounded corners
|
|
133
|
+
> .btn:not(:last-child):not(.dropdown-toggle),
|
|
134
|
+
> .btn-group:not(:last-child) > .btn {
|
|
135
|
+
@include border-bottom-radius(0);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
> .btn ~ .btn,
|
|
139
|
+
> .btn-group:not(:first-child) > .btn {
|
|
140
|
+
@include border-top-radius(0);
|
|
141
|
+
}
|
|
142
|
+
}
|