corrade-nucleus-nucleons – Blame information for rev 24
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
20 | 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 | &:focus { |
||
22 | // Remove focus outline when dropdown JS adds it after closing the menu |
||
23 | outline: none; |
||
24 | } |
||
25 | } |
||
26 | } |
||
27 | |||
28 | // Prevent double borders when buttons are next to each other |
||
29 | .btn-group { |
||
30 | .btn + .btn, |
||
31 | .btn + .btn-group, |
||
32 | .btn-group + .btn, |
||
33 | .btn-group + .btn-group { |
||
34 | margin-left: -1px; |
||
35 | } |
||
36 | } |
||
37 | |||
38 | // Optional: Group multiple button groups together for a toolbar |
||
39 | .btn-toolbar { |
||
40 | margin-left: -5px; // Offset the first child's margin |
||
41 | &:extend(.clearfix all); |
||
42 | |||
43 | .btn-group, |
||
44 | .input-group { |
||
45 | float: left; |
||
46 | } |
||
47 | > .btn, |
||
48 | > .btn-group, |
||
49 | > .input-group { |
||
50 | margin-left: 5px; |
||
51 | } |
||
52 | } |
||
53 | |||
54 | .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { |
||
55 | border-radius: 0; |
||
56 | } |
||
57 | |||
58 | // 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 |
||
59 | .btn-group > .btn:first-child { |
||
60 | margin-left: 0; |
||
61 | &:not(:last-child):not(.dropdown-toggle) { |
||
62 | .border-right-radius(0); |
||
63 | } |
||
64 | } |
||
65 | // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it |
||
66 | .btn-group > .btn:last-child:not(:first-child), |
||
67 | .btn-group > .dropdown-toggle:not(:first-child) { |
||
68 | .border-left-radius(0); |
||
69 | } |
||
70 | |||
71 | // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) |
||
72 | .btn-group > .btn-group { |
||
73 | float: left; |
||
74 | } |
||
75 | .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { |
||
76 | border-radius: 0; |
||
77 | } |
||
78 | .btn-group > .btn-group:first-child { |
||
79 | > .btn:last-child, |
||
80 | > .dropdown-toggle { |
||
81 | .border-right-radius(0); |
||
82 | } |
||
83 | } |
||
84 | .btn-group > .btn-group:last-child > .btn:first-child { |
||
85 | .border-left-radius(0); |
||
86 | } |
||
87 | |||
88 | // On active and open, don't show outline |
||
89 | .btn-group .dropdown-toggle:active, |
||
90 | .btn-group.open .dropdown-toggle { |
||
91 | outline: 0; |
||
92 | } |
||
93 | |||
94 | |||
95 | // Sizing |
||
96 | // |
||
97 | // Remix the default button sizing classes into new ones for easier manipulation. |
||
98 | |||
99 | .btn-group-xs > .btn { &:extend(.btn-xs); } |
||
100 | .btn-group-sm > .btn { &:extend(.btn-sm); } |
||
101 | .btn-group-lg > .btn { &:extend(.btn-lg); } |
||
102 | |||
103 | |||
104 | // Split button dropdowns |
||
105 | // ---------------------- |
||
106 | |||
107 | // Give the line between buttons some depth |
||
108 | .btn-group > .btn + .dropdown-toggle { |
||
109 | padding-left: 8px; |
||
110 | padding-right: 8px; |
||
111 | } |
||
112 | .btn-group > .btn-lg + .dropdown-toggle { |
||
113 | padding-left: 12px; |
||
114 | padding-right: 12px; |
||
115 | } |
||
116 | |||
117 | // The clickable button for toggling the menu |
||
118 | // Remove the gradient and set the same inset shadow as the :active state |
||
119 | .btn-group.open .dropdown-toggle { |
||
120 | .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); |
||
121 | |||
122 | // Show no shadow for `.btn-link` since it has no other button styles. |
||
123 | &.btn-link { |
||
124 | .box-shadow(none); |
||
125 | } |
||
126 | } |
||
127 | |||
128 | |||
129 | // Reposition the caret |
||
130 | .btn .caret { |
||
131 | margin-left: 0; |
||
132 | } |
||
133 | // Carets in other button sizes |
||
134 | .btn-lg .caret { |
||
135 | border-width: @caret-width-large @caret-width-large 0; |
||
136 | border-bottom-width: 0; |
||
137 | } |
||
138 | // Upside down carets for .dropup |
||
139 | .dropup .btn-lg .caret { |
||
140 | border-width: 0 @caret-width-large @caret-width-large; |
||
141 | } |
||
142 | |||
143 | |||
144 | // Vertical button groups |
||
145 | // ---------------------- |
||
146 | |||
147 | .btn-group-vertical { |
||
148 | > .btn, |
||
149 | > .btn-group, |
||
150 | > .btn-group > .btn { |
||
151 | display: block; |
||
152 | float: none; |
||
153 | width: 100%; |
||
154 | max-width: 100%; |
||
155 | } |
||
156 | |||
157 | // Clear floats so dropdown menus can be properly placed |
||
158 | > .btn-group { |
||
159 | &:extend(.clearfix all); |
||
160 | > .btn { |
||
161 | float: none; |
||
162 | } |
||
163 | } |
||
164 | |||
165 | > .btn + .btn, |
||
166 | > .btn + .btn-group, |
||
167 | > .btn-group + .btn, |
||
168 | > .btn-group + .btn-group { |
||
169 | margin-top: -1px; |
||
170 | margin-left: 0; |
||
171 | } |
||
172 | } |
||
173 | |||
174 | .btn-group-vertical > .btn { |
||
175 | &:not(:first-child):not(:last-child) { |
||
176 | border-radius: 0; |
||
177 | } |
||
178 | &:first-child:not(:last-child) { |
||
179 | border-top-right-radius: @border-radius-base; |
||
180 | .border-bottom-radius(0); |
||
181 | } |
||
182 | &:last-child:not(:first-child) { |
||
183 | border-bottom-left-radius: @border-radius-base; |
||
184 | .border-top-radius(0); |
||
185 | } |
||
186 | } |
||
187 | .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { |
||
188 | border-radius: 0; |
||
189 | } |
||
190 | .btn-group-vertical > .btn-group:first-child:not(:last-child) { |
||
191 | > .btn:last-child, |
||
192 | > .dropdown-toggle { |
||
193 | .border-bottom-radius(0); |
||
194 | } |
||
195 | } |
||
196 | .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { |
||
197 | .border-top-radius(0); |
||
198 | } |
||
199 | |||
200 | |||
201 | |||
202 | // Justified button groups |
||
203 | // ---------------------- |
||
204 | |||
205 | .btn-group-justified { |
||
206 | display: table; |
||
207 | width: 100%; |
||
208 | table-layout: fixed; |
||
209 | border-collapse: separate; |
||
210 | > .btn, |
||
211 | > .btn-group { |
||
212 | float: none; |
||
213 | display: table-cell; |
||
214 | width: 1%; |
||
215 | } |
||
216 | > .btn-group .btn { |
||
217 | width: 100%; |
||
218 | } |
||
219 | } |
||
220 | |||
221 | |||
222 | // Checkbox and radio options |
||
223 | [data-toggle="buttons"] > .btn > input[type="radio"], |
||
224 | [data-toggle="buttons"] > .btn > input[type="checkbox"] { |
||
225 | display: none; |
||
226 | } |