| 1 |
efrain |
1 |
// stylelint-disable selector-no-qualifying-type
|
|
|
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: 1 1 auto;
|
|
|
13 |
|
|
|
14 |
// Bring the hover, focused, and "active" buttons to the front to overlay
|
|
|
15 |
// the borders properly
|
|
|
16 |
@include hover() {
|
|
|
17 |
z-index: 1;
|
|
|
18 |
}
|
|
|
19 |
&:focus,
|
|
|
20 |
&:active,
|
|
|
21 |
&.active {
|
|
|
22 |
z-index: 1;
|
|
|
23 |
}
|
|
|
24 |
}
|
|
|
25 |
}
|
|
|
26 |
|
|
|
27 |
// Optional: Group multiple button groups together for a toolbar
|
|
|
28 |
.btn-toolbar {
|
|
|
29 |
display: flex;
|
|
|
30 |
flex-wrap: wrap;
|
|
|
31 |
justify-content: flex-start;
|
|
|
32 |
|
|
|
33 |
.input-group {
|
|
|
34 |
width: auto;
|
|
|
35 |
}
|
|
|
36 |
}
|
|
|
37 |
|
|
|
38 |
.btn-group {
|
|
|
39 |
// Prevent double borders when buttons are next to each other
|
|
|
40 |
> .btn:not(:first-child),
|
|
|
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-group:not(:last-child) > .btn {
|
|
|
48 |
@include border-right-radius(0);
|
|
|
49 |
}
|
|
|
50 |
|
|
|
51 |
> .btn:not(:first-child),
|
|
|
52 |
> .btn-group:not(:first-child) > .btn {
|
|
|
53 |
@include border-left-radius(0);
|
|
|
54 |
}
|
|
|
55 |
}
|
|
|
56 |
|
|
|
57 |
// Sizing
|
|
|
58 |
//
|
|
|
59 |
// Remix the default button sizing classes into new ones for easier manipulation.
|
|
|
60 |
|
|
|
61 |
.btn-group-sm > .btn { @extend .btn-sm; }
|
|
|
62 |
.btn-group-lg > .btn { @extend .btn-lg; }
|
|
|
63 |
|
|
|
64 |
|
|
|
65 |
//
|
|
|
66 |
// Split button dropdowns
|
|
|
67 |
//
|
|
|
68 |
|
|
|
69 |
.dropdown-toggle-split {
|
|
|
70 |
padding-right: $btn-padding-x * .75;
|
|
|
71 |
padding-left: $btn-padding-x * .75;
|
|
|
72 |
|
|
|
73 |
&::after,
|
|
|
74 |
.dropup &::after,
|
|
|
75 |
.dropright &::after {
|
|
|
76 |
margin-left: 0;
|
|
|
77 |
}
|
|
|
78 |
|
|
|
79 |
.dropleft &::before {
|
|
|
80 |
margin-right: 0;
|
|
|
81 |
}
|
|
|
82 |
}
|
|
|
83 |
|
|
|
84 |
.btn-sm + .dropdown-toggle-split {
|
|
|
85 |
padding-right: $btn-padding-x-sm * .75;
|
|
|
86 |
padding-left: $btn-padding-x-sm * .75;
|
|
|
87 |
}
|
|
|
88 |
|
|
|
89 |
.btn-lg + .dropdown-toggle-split {
|
|
|
90 |
padding-right: $btn-padding-x-lg * .75;
|
|
|
91 |
padding-left: $btn-padding-x-lg * .75;
|
|
|
92 |
}
|
|
|
93 |
|
|
|
94 |
|
|
|
95 |
// The clickable button for toggling the menu
|
|
|
96 |
// Set the same inset shadow as the :active state
|
|
|
97 |
.btn-group.show .dropdown-toggle {
|
|
|
98 |
@include box-shadow($btn-active-box-shadow);
|
|
|
99 |
|
|
|
100 |
// Show no shadow for `.btn-link` since it has no other button styles.
|
|
|
101 |
&.btn-link {
|
|
|
102 |
@include box-shadow(none);
|
|
|
103 |
}
|
|
|
104 |
}
|
|
|
105 |
|
|
|
106 |
|
|
|
107 |
//
|
|
|
108 |
// Vertical button groups
|
|
|
109 |
//
|
|
|
110 |
|
|
|
111 |
.btn-group-vertical {
|
|
|
112 |
flex-direction: column;
|
|
|
113 |
align-items: flex-start;
|
|
|
114 |
justify-content: center;
|
|
|
115 |
|
|
|
116 |
> .btn,
|
|
|
117 |
> .btn-group {
|
|
|
118 |
width: 100%;
|
|
|
119 |
}
|
|
|
120 |
|
|
|
121 |
> .btn:not(:first-child),
|
|
|
122 |
> .btn-group:not(:first-child) {
|
|
|
123 |
margin-top: -$btn-border-width;
|
|
|
124 |
}
|
|
|
125 |
|
|
|
126 |
// Reset rounded corners
|
|
|
127 |
> .btn:not(:last-child):not(.dropdown-toggle),
|
|
|
128 |
> .btn-group:not(:last-child) > .btn {
|
|
|
129 |
@include border-bottom-radius(0);
|
|
|
130 |
}
|
|
|
131 |
|
|
|
132 |
> .btn:not(:first-child),
|
|
|
133 |
> .btn-group:not(:first-child) > .btn {
|
|
|
134 |
@include border-top-radius(0);
|
|
|
135 |
}
|
|
|
136 |
}
|
|
|
137 |
|
|
|
138 |
|
|
|
139 |
// Checkbox and radio options
|
|
|
140 |
//
|
|
|
141 |
// In order to support the browser's form validation feedback, powered by the
|
|
|
142 |
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
|
|
|
143 |
// `display: none;` or `visibility: hidden;` as that also hides the popover.
|
|
|
144 |
// Simply visually hiding the inputs via `opacity` would leave them clickable in
|
|
|
145 |
// certain cases which is prevented by using `clip` and `pointer-events`.
|
|
|
146 |
// This way, we ensure a DOM element is visible to position the popover from.
|
|
|
147 |
//
|
|
|
148 |
// See https://github.com/twbs/bootstrap/pull/12794 and
|
|
|
149 |
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
|
|
150 |
|
|
|
151 |
.btn-group-toggle {
|
|
|
152 |
> .btn,
|
|
|
153 |
> .btn-group > .btn {
|
|
|
154 |
margin-bottom: 0; // Override default `<label>` value
|
|
|
155 |
|
|
|
156 |
input[type="radio"],
|
|
|
157 |
input[type="checkbox"] {
|
|
|
158 |
position: absolute;
|
|
|
159 |
clip: rect(0, 0, 0, 0);
|
|
|
160 |
pointer-events: none;
|
|
|
161 |
}
|
|
|
162 |
}
|
|
|
163 |
}
|