← Back to branch summary

~ubuntu-branches/ubuntu/saucy/fonts-font-awesome/saucy-proposed

« back to all changes in this revision

Viewing changes to docs/assets/less/twbs-222/button-groups.less

  • Committer: Package Import Robot
  • Author(s): Mike Gabriel
  • Date: 2013-04-08 00:34:25 UTC
  • Revision ID: package-import@ubuntu.com-20130408003425-hsmm3w17jtim9el6
Tags: upstream-3.0.2
Import upstream version 3.0.2

Show diffs side-by-side

added added

removed removed

Lines of Context:
docs/assets/less/twbs-222/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-mini .caret,
 
168
.btn-small .caret,
 
169
.btn-large .caret {
 
170
  margin-top: 6px;
 
171
}
 
172
.btn-large .caret {
 
173
  border-left-width:  5px;
 
174
  border-right-width: 5px;
 
175
  border-top-width:   5px;
 
176
}
 
177
// Upside down carets for .dropup
 
178
.dropup .btn-large .caret {
 
179
  border-bottom-width: 5px;
 
180
}
 
181
 
 
182
 
 
183
 
 
184
// Account for other colors
 
185
.btn-primary,
 
186
.btn-warning,
 
187
.btn-danger,
 
188
.btn-info,
 
189
.btn-success,
 
190
.btn-inverse {
 
191
  .caret {
 
192
    border-top-color: @white;
 
193
    border-bottom-color: @white;
 
194
  }
 
195
}
 
196
 
 
197
 
 
198
 
 
199
// Vertical button groups
 
200
// ----------------------
 
201
 
 
202
.btn-group-vertical {
 
203
  display: inline-block; // makes buttons only take up the width they need
 
204
  .ie7-inline-block();
 
205
}
 
206
.btn-group-vertical > .btn {
 
207
  display: block;
 
208
  float: none;
 
209
  max-width: 100%;
 
210
  .border-radius(0);
 
211
}
 
212
.btn-group-vertical > .btn + .btn {
 
213
  margin-left: 0;
 
214
  margin-top: -1px;
 
215
}
 
216
.btn-group-vertical > .btn:first-child {
 
217
  .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
 
218
}
 
219
.btn-group-vertical > .btn:last-child {
 
220
  .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
 
221
}
 
222
.btn-group-vertical > .btn-large:first-child {
 
223
  .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
 
224
}
 
225
.btn-group-vertical > .btn-large:last-child {
 
226
  .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
 
227
}