smartxml: Allow Fragments to refresh their node references using their initial paths
[fnpeditor.git] / libs / bootstrap / less / button-groups.less
1 //
2 // Button groups
3 // --------------------------------------------------
4
5
6 // Make the div behave like a button
7 .btn-group {
8   position: relative;
9   display: inline-block;
10   .ie7-inline-block();
11   font-size: 0; // remove as part 1 of font-size inline-block hack
12   vertical-align: middle; // match .btn alignment given font-size hack above
13   white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
14   .ie7-restore-left-whitespace();
15 }
16
17 // Space out series of button groups
18 .btn-group + .btn-group {
19   margin-left: 5px;
20 }
21
22 // Optional: Group multiple button groups together for a toolbar
23 .btn-toolbar {
24   font-size: 0; // Hack to remove whitespace that results from using inline-block
25   margin-top: @baseLineHeight / 2;
26   margin-bottom: @baseLineHeight / 2;
27   > .btn + .btn,
28   > .btn-group + .btn,
29   > .btn + .btn-group {
30     margin-left: 5px;
31   }
32 }
33
34 // Float them, remove border radius, then re-add to first and last elements
35 .btn-group > .btn {
36   position: relative;
37   .border-radius(0);
38 }
39 .btn-group > .btn + .btn {
40   margin-left: -1px;
41 }
42 .btn-group > .btn,
43 .btn-group > .dropdown-menu,
44 .btn-group > .popover {
45   font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
46 }
47
48 // Reset fonts for other sizes
49 .btn-group > .btn-mini {
50   font-size: @fontSizeMini;
51 }
52 .btn-group > .btn-small {
53   font-size: @fontSizeSmall;
54 }
55 .btn-group > .btn-large {
56   font-size: @fontSizeLarge;
57 }
58
59 // 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
60 .btn-group > .btn:first-child {
61   margin-left: 0;
62   .border-top-left-radius(@baseBorderRadius);
63   .border-bottom-left-radius(@baseBorderRadius);
64 }
65 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
66 .btn-group > .btn:last-child,
67 .btn-group > .dropdown-toggle {
68   .border-top-right-radius(@baseBorderRadius);
69   .border-bottom-right-radius(@baseBorderRadius);
70 }
71 // Reset corners for large buttons
72 .btn-group > .btn.large:first-child {
73   margin-left: 0;
74   .border-top-left-radius(@borderRadiusLarge);
75   .border-bottom-left-radius(@borderRadiusLarge);
76 }
77 .btn-group > .btn.large:last-child,
78 .btn-group > .large.dropdown-toggle {
79   .border-top-right-radius(@borderRadiusLarge);
80   .border-bottom-right-radius(@borderRadiusLarge);
81 }
82
83 // On hover/focus/active, bring the proper btn to front
84 .btn-group > .btn:hover,
85 .btn-group > .btn:focus,
86 .btn-group > .btn:active,
87 .btn-group > .btn.active {
88   z-index: 2;
89 }
90
91 // On active and open, don't show outline
92 .btn-group .dropdown-toggle:active,
93 .btn-group.open .dropdown-toggle {
94   outline: 0;
95 }
96
97
98
99 // Split button dropdowns
100 // ----------------------
101
102 // Give the line between buttons some depth
103 .btn-group > .btn + .dropdown-toggle {
104   padding-left: 8px;
105   padding-right: 8px;
106   .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
107   *padding-top: 5px;
108   *padding-bottom: 5px;
109 }
110 .btn-group > .btn-mini + .dropdown-toggle {
111   padding-left: 5px;
112   padding-right: 5px;
113   *padding-top: 2px;
114   *padding-bottom: 2px;
115 }
116 .btn-group > .btn-small + .dropdown-toggle {
117   *padding-top: 5px;
118   *padding-bottom: 4px;
119 }
120 .btn-group > .btn-large + .dropdown-toggle {
121   padding-left: 12px;
122   padding-right: 12px;
123   *padding-top: 7px;
124   *padding-bottom: 7px;
125 }
126
127 .btn-group.open {
128
129   // The clickable button for toggling the menu
130   // Remove the gradient and set the same inset shadow as the :active state
131   .dropdown-toggle {
132     background-image: none;
133     .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
134   }
135
136   // Keep the hover's background when dropdown is open
137   .btn.dropdown-toggle {
138     background-color: @btnBackgroundHighlight;
139   }
140   .btn-primary.dropdown-toggle {
141     background-color: @btnPrimaryBackgroundHighlight;
142   }
143   .btn-warning.dropdown-toggle {
144     background-color: @btnWarningBackgroundHighlight;
145   }
146   .btn-danger.dropdown-toggle {
147     background-color: @btnDangerBackgroundHighlight;
148   }
149   .btn-success.dropdown-toggle {
150     background-color: @btnSuccessBackgroundHighlight;
151   }
152   .btn-info.dropdown-toggle {
153     background-color: @btnInfoBackgroundHighlight;
154   }
155   .btn-inverse.dropdown-toggle {
156     background-color: @btnInverseBackgroundHighlight;
157   }
158 }
159
160
161 // Reposition the caret
162 .btn .caret {
163   margin-top: 8px;
164   margin-left: 0;
165 }
166 // Carets in other button sizes
167 .btn-large .caret {
168   margin-top: 6px;
169 }
170 .btn-large .caret {
171   border-left-width:  5px;
172   border-right-width: 5px;
173   border-top-width:   5px;
174 }
175 .btn-mini .caret,
176 .btn-small .caret {
177   margin-top: 8px;
178 }
179 // Upside down carets for .dropup
180 .dropup .btn-large .caret {
181   border-bottom-width: 5px;
182 }
183
184
185
186 // Account for other colors
187 .btn-primary,
188 .btn-warning,
189 .btn-danger,
190 .btn-info,
191 .btn-success,
192 .btn-inverse {
193   .caret {
194     border-top-color: @white;
195     border-bottom-color: @white;
196   }
197 }
198
199
200
201 // Vertical button groups
202 // ----------------------
203
204 .btn-group-vertical {
205   display: inline-block; // makes buttons only take up the width they need
206   .ie7-inline-block();
207 }
208 .btn-group-vertical > .btn {
209   display: block;
210   float: none;
211   max-width: 100%;
212   .border-radius(0);
213 }
214 .btn-group-vertical > .btn + .btn {
215   margin-left: 0;
216   margin-top: -1px;
217 }
218 .btn-group-vertical > .btn:first-child {
219   .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
220 }
221 .btn-group-vertical > .btn:last-child {
222   .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
223 }
224 .btn-group-vertical > .btn-large:first-child {
225   .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
226 }
227 .btn-group-vertical > .btn-large:last-child {
228   .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
229 }