Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/_button-group.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // scss-lint:disable QualifyingElement
2
3 // Make the div behave like a button
4 .btn-group,
5 .btn-group-vertical {
6 position: relative;
7 display: inline-flex;
8 vertical-align: middle; // match .btn alignment given font-size hack above
9
10 > .btn {
11 position: relative;
12 flex: 0 1 auto;
13 margin-bottom: 0;
14
15 // Bring the hover, focused, and "active" buttons to the front to overlay
16 // the borders properly
17 @include hover {
18 z-index: 2;
19 }
20 &:focus,
21 &:active,
22 &.active {
23 z-index: 2;
24 }
25 }
26
27 // Prevent double borders when buttons are next to each other
28 .btn + .btn,
29 .btn + .btn-group,
30 .btn-group + .btn,
31 .btn-group + .btn-group {
32 margin-left: -$input-btn-border-width;
33 }
34 }
35
36 // Optional: Group multiple button groups together for a toolbar
37 .btn-toolbar {
38 display: flex;
39 flex-wrap: wrap;
40 justify-content: flex-start;
41
42 .input-group {
43 width: auto;
44 }
45 }
46
47 .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
48 border-radius: 0;
49 }
50
51 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
52 .btn-group > .btn:first-child {
53 margin-left: 0;
54
55 &:not(:last-child):not(.dropdown-toggle) {
56 @include border-right-radius(0);
57 }
58 }
59 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
60 .btn-group > .btn:last-child:not(:first-child),
61 .btn-group > .dropdown-toggle:not(:first-child) {
62 @include border-left-radius(0);
63 }
64
65 // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
66 .btn-group > .btn-group {
67 float: left;
68 }
69 .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
70 border-radius: 0;
71 }
72 .btn-group > .btn-group:first-child:not(:last-child) {
73 > .btn:last-child,
74 > .dropdown-toggle {
75 @include border-right-radius(0);
76 }
77 }
78 .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
79 @include border-left-radius(0);
80 }
81
82
83 // Sizing
84 //
85 // Remix the default button sizing classes into new ones for easier manipulation.
86
87 .btn-group-sm > .btn { @extend .btn-sm; }
88 .btn-group-lg > .btn { @extend .btn-lg; }
89
90
91 //
92 // Split button dropdowns
93 //
94
95 .btn + .dropdown-toggle-split {
96 padding-right: $input-btn-padding-x * .75;
97 padding-left: $input-btn-padding-x * .75;
98
99 &::after {
100 margin-left: 0;
101 }
102 }
103
104 .btn-sm + .dropdown-toggle-split {
105 padding-right: $input-btn-padding-x-sm * .75;
106 padding-left: $input-btn-padding-x-sm * .75;
107 }
108
109 .btn-lg + .dropdown-toggle-split {
110 padding-right: $input-btn-padding-x-lg * .75;
111 padding-left: $input-btn-padding-x-lg * .75;
112 }
113
114
115 // The clickable button for toggling the menu
116 // Set the same inset shadow as the :active state
117 .btn-group.show .dropdown-toggle {
118 @include box-shadow($btn-active-box-shadow);
119
120 // Show no shadow for `.btn-link` since it has no other button styles.
121 &.btn-link {
122 @include box-shadow(none);
123 }
124 }
125
126
127 //
128 // Vertical button groups
129 //
130
131 .btn-group-vertical {
132 display: inline-flex;
133 flex-direction: column;
134 align-items: flex-start;
135 justify-content: center;
136
137 .btn,
138 .btn-group {
139 width: 100%;
140 }
141
142 > .btn + .btn,
143 > .btn + .btn-group,
144 > .btn-group + .btn,
145 > .btn-group + .btn-group {
146 margin-top: -$input-btn-border-width;
147 margin-left: 0;
148 }
149 }
150
151 .btn-group-vertical > .btn {
152 &:not(:first-child):not(:last-child) {
153 border-radius: 0;
154 }
155 &:first-child:not(:last-child) {
156 @include border-bottom-radius(0);
157 }
158 &:last-child:not(:first-child) {
159 @include border-top-radius(0);
160 }
161 }
162 .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
163 border-radius: 0;
164 }
165 .btn-group-vertical > .btn-group:first-child:not(:last-child) {
166 > .btn:last-child,
167 > .dropdown-toggle {
168 @include border-bottom-radius(0);
169 }
170 }
171 .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
172 @include border-top-radius(0);
173 }
174
175
176 // Checkbox and radio options
177 //
178 // In order to support the browser's form validation feedback, powered by the
179 // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
180 // `display: none;` or `visibility: hidden;` as that also hides the popover.
181 // Simply visually hiding the inputs via `opacity` would leave them clickable in
182 // certain cases which is prevented by using `clip` and `pointer-events`.
183 // This way, we ensure a DOM element is visible to position the popover from.
184 //
185 // See https://github.com/twbs/bootstrap/pull/12794 and
186 // https://github.com/twbs/bootstrap/pull/14559 for more information.
187
188 [data-toggle="buttons"] {
189 > .btn,
190 > .btn-group > .btn {
191 input[type="radio"],
192 input[type="checkbox"] {
193 position: absolute;
194 clip: rect(0,0,0,0);
195 pointer-events: none;
196 }
197 }
198 }