corrade-nucleus-nucleons – Blame information for rev
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
1 | office | 1 | // |
2 | // Button groups |
||
3 | // -------------------------------------------------- |
||
4 | |||
5 | // Make the div behave like a button |
||
6 | .btn-group, |
||
7 | .btn-group-vertical { |
||
8 | position: relative; |
||
9 | display: inline-block; |
||
10 | vertical-align: middle; // match .btn alignment given font-size hack above |
||
11 | > .btn { |
||
12 | position: relative; |
||
13 | float: left; |
||
14 | // Bring the "active" button to the front |
||
15 | &:hover, |
||
16 | &:focus, |
||
17 | &:active, |
||
18 | &.active { |
||
19 | z-index: 2; |
||
20 | } |
||
21 | } |
||
22 | } |
||
23 | |||
24 | // Prevent double borders when buttons are next to each other |
||
25 | .btn-group { |
||
26 | .btn + .btn, |
||
27 | .btn + .btn-group, |
||
28 | .btn-group + .btn, |
||
29 | .btn-group + .btn-group { |
||
30 | margin-left: -1px; |
||
31 | } |
||
32 | } |
||
33 | |||
34 | // Optional: Group multiple button groups together for a toolbar |
||
35 | .btn-toolbar { |
||
36 | margin-left: -5px; // Offset the first child's margin |
||
37 | &:extend(.clearfix all); |
||
38 | |||
39 | .btn, |
||
40 | .btn-group, |
||
41 | .input-group { |
||
42 | float: left; |
||
43 | } |
||
44 | > .btn, |
||
45 | > .btn-group, |
||
46 | > .input-group { |
||
47 | margin-left: 5px; |
||
48 | } |
||
49 | } |
||
50 | |||
51 | .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { |
||
52 | border-radius: 0; |
||
53 | } |
||
54 | |||
55 | // 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 |
||
56 | .btn-group > .btn:first-child { |
||
57 | margin-left: 0; |
||
58 | &:not(:last-child):not(.dropdown-toggle) { |
||
59 | .border-right-radius(0); |
||
60 | } |
||
61 | } |
||
62 | // Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it |
||
63 | .btn-group > .btn:last-child:not(:first-child), |
||
64 | .btn-group > .dropdown-toggle:not(:first-child) { |
||
65 | .border-left-radius(0); |
||
66 | } |
||
67 | |||
68 | // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) |
||
69 | .btn-group > .btn-group { |
||
70 | float: left; |
||
71 | } |
||
72 | .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { |
||
73 | border-radius: 0; |
||
74 | } |
||
75 | .btn-group > .btn-group:first-child:not(:last-child) { |
||
76 | > .btn:last-child, |
||
77 | > .dropdown-toggle { |
||
78 | .border-right-radius(0); |
||
79 | } |
||
80 | } |
||
81 | .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { |
||
82 | .border-left-radius(0); |
||
83 | } |
||
84 | |||
85 | // On active and open, don't show outline |
||
86 | .btn-group .dropdown-toggle:active, |
||
87 | .btn-group.open .dropdown-toggle { |
||
88 | outline: 0; |
||
89 | } |
||
90 | |||
91 | |||
92 | // Sizing |
||
93 | // |
||
94 | // Remix the default button sizing classes into new ones for easier manipulation. |
||
95 | |||
96 | .btn-group-xs > .btn { &:extend(.btn-xs); } |
||
97 | .btn-group-sm > .btn { &:extend(.btn-sm); } |
||
98 | .btn-group-lg > .btn { &:extend(.btn-lg); } |
||
99 | |||
100 | |||
101 | // Split button dropdowns |
||
102 | // ---------------------- |
||
103 | |||
104 | // Give the line between buttons some depth |
||
105 | .btn-group > .btn + .dropdown-toggle { |
||
106 | padding-left: 8px; |
||
107 | padding-right: 8px; |
||
108 | } |
||
109 | .btn-group > .btn-lg + .dropdown-toggle { |
||
110 | padding-left: 12px; |
||
111 | padding-right: 12px; |
||
112 | } |
||
113 | |||
114 | // The clickable button for toggling the menu |
||
115 | // Remove the gradient and set the same inset shadow as the :active state |
||
116 | .btn-group.open .dropdown-toggle { |
||
117 | .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); |
||
118 | |||
119 | // Show no shadow for `.btn-link` since it has no other button styles. |
||
120 | &.btn-link { |
||
121 | .box-shadow(none); |
||
122 | } |
||
123 | } |
||
124 | |||
125 | |||
126 | // Reposition the caret |
||
127 | .btn .caret { |
||
128 | margin-left: 0; |
||
129 | } |
||
130 | // Carets in other button sizes |
||
131 | .btn-lg .caret { |
||
132 | border-width: @caret-width-large @caret-width-large 0; |
||
133 | border-bottom-width: 0; |
||
134 | } |
||
135 | // Upside down carets for .dropup |
||
136 | .dropup .btn-lg .caret { |
||
137 | border-width: 0 @caret-width-large @caret-width-large; |
||
138 | } |
||
139 | |||
140 | |||
141 | // Vertical button groups |
||
142 | // ---------------------- |
||
143 | |||
144 | .btn-group-vertical { |
||
145 | > .btn, |
||
146 | > .btn-group, |
||
147 | > .btn-group > .btn { |
||
148 | display: block; |
||
149 | float: none; |
||
150 | width: 100%; |
||
151 | max-width: 100%; |
||
152 | } |
||
153 | |||
154 | // Clear floats so dropdown menus can be properly placed |
||
155 | > .btn-group { |
||
156 | &:extend(.clearfix all); |
||
157 | > .btn { |
||
158 | float: none; |
||
159 | } |
||
160 | } |
||
161 | |||
162 | > .btn + .btn, |
||
163 | > .btn + .btn-group, |
||
164 | > .btn-group + .btn, |
||
165 | > .btn-group + .btn-group { |
||
166 | margin-top: -1px; |
||
167 | margin-left: 0; |
||
168 | } |
||
169 | } |
||
170 | |||
171 | .btn-group-vertical > .btn { |
||
172 | &:not(:first-child):not(:last-child) { |
||
173 | border-radius: 0; |
||
174 | } |
||
175 | &:first-child:not(:last-child) { |
||
176 | .border-top-radius(@btn-border-radius-base); |
||
177 | .border-bottom-radius(0); |
||
178 | } |
||
179 | &:last-child:not(:first-child) { |
||
180 | .border-top-radius(0); |
||
181 | .border-bottom-radius(@btn-border-radius-base); |
||
182 | } |
||
183 | } |
||
184 | .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { |
||
185 | border-radius: 0; |
||
186 | } |
||
187 | .btn-group-vertical > .btn-group:first-child:not(:last-child) { |
||
188 | > .btn:last-child, |
||
189 | > .dropdown-toggle { |
||
190 | .border-bottom-radius(0); |
||
191 | } |
||
192 | } |
||
193 | .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { |
||
194 | .border-top-radius(0); |
||
195 | } |
||
196 | |||
197 | |||
198 | // Justified button groups |
||
199 | // ---------------------- |
||
200 | |||
201 | .btn-group-justified { |
||
202 | display: table; |
||
203 | width: 100%; |
||
204 | table-layout: fixed; |
||
205 | border-collapse: separate; |
||
206 | > .btn, |
||
207 | > .btn-group { |
||
208 | float: none; |
||
209 | display: table-cell; |
||
210 | width: 1%; |
||
211 | } |
||
212 | > .btn-group .btn { |
||
213 | width: 100%; |
||
214 | } |
||
215 | |||
216 | > .btn-group .dropdown-menu { |
||
217 | left: auto; |
||
218 | } |
||
219 | } |
||
220 | |||
221 | |||
222 | // Checkbox and radio options |
||
223 | // |
||
224 | // In order to support the browser's form validation feedback, powered by the |
||
225 | // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use |
||
226 | // `display: none;` or `visibility: hidden;` as that also hides the popover. |
||
227 | // Simply visually hiding the inputs via `opacity` would leave them clickable in |
||
228 | // certain cases which is prevented by using `clip` and `pointer-events`. |
||
229 | // This way, we ensure a DOM element is visible to position the popover from. |
||
230 | // |
||
231 | // See https://github.com/twbs/bootstrap/pull/12794 and |
||
232 | // https://github.com/twbs/bootstrap/pull/14559 for more information. |
||
233 | |||
234 | [data-toggle="buttons"] { |
||
235 | > .btn, |
||
236 | > .btn-group > .btn { |
||
237 | input[type="radio"], |
||
238 | input[type="checkbox"] { |
||
239 | position: absolute; |
||
240 | clip: rect(0,0,0,0); |
||
241 | pointer-events: none; |
||
242 | } |
||
243 | } |
||
244 | } |