|
0
|
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 }
|
