1//
2// Buttons
3// --------------------------------------------------
4
5
6// Base styles
7// --------------------------------------------------
8
9// Core
10.btn {
11  display: inline-block;
12  .ie7-inline-block();
13  padding: 4px 12px;
14  margin-bottom: 0; // For input.btn
15  font-size: @baseFontSize;
16  line-height: @baseLineHeight;
17  text-align: center;
18  vertical-align: middle;
19  cursor: pointer;
20  .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
21  border: 1px solid @btnBorder;
22  *border: 0; // Remove the border to prevent IE7's black border on input:focus
23  border-bottom-color: darken(@btnBorder, 10%);
24  .border-radius(@baseBorderRadius);
25  .ie7-restore-left-whitespace(); // Give IE7 some love
26  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
27
28  // Hover/focus state
29  &:hover,
30  &:focus {
31    color: @grayDark;
32    text-decoration: none;
33    background-position: 0 -15px;
34
35    // transition is only when going to hover/focus, otherwise the background
36    // behind the gradient (there for IE<=9 fallback) gets mismatched
37    .transition(background-position .1s linear);
38  }
39
40  // Focus state for keyboard and accessibility
41  &:focus {
42    .tab-focus();
43  }
44
45  // Active state
46  &.active,
47  &:active {
48    background-image: none;
49    outline: 0;
50    .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
51  }
52
53  // Disabled state
54  &.disabled,
55  &[disabled] {
56    cursor: default;
57    background-image: none;
58    .opacity(65);
59    .box-shadow(none);
60  }
61
62}
63
64
65
66// Button Sizes
67// --------------------------------------------------
68
69// Large
70.btn-large {
71  padding: @paddingLarge;
72  font-size: @fontSizeLarge;
73  .border-radius(@borderRadiusLarge);
74}
75.btn-large [class^="icon-"],
76.btn-large [class*=" icon-"] {
77  margin-top: 4px;
78}
79
80// Small
81.btn-small {
82  padding: @paddingSmall;
83  font-size: @fontSizeSmall;
84  .border-radius(@borderRadiusSmall);
85}
86.btn-small [class^="icon-"],
87.btn-small [class*=" icon-"] {
88  margin-top: 0;
89}
90.btn-mini [class^="icon-"],
91.btn-mini [class*=" icon-"] {
92  margin-top: -1px;
93}
94
95// Mini
96.btn-mini {
97  padding: @paddingMini;
98  font-size: @fontSizeMini;
99  .border-radius(@borderRadiusSmall);
100}
101
102
103// Block button
104// -------------------------
105
106.btn-block {
107  display: block;
108  width: 100%;
109  padding-left: 0;
110  padding-right: 0;
111  .box-sizing(border-box);
112}
113
114// Vertically space out multiple block buttons
115.btn-block + .btn-block {
116  margin-top: 5px;
117}
118
119// Specificity overrides
120input[type="submit"],
121input[type="reset"],
122input[type="button"] {
123  &.btn-block {
124    width: 100%;
125  }
126}
127
128
129
130// Alternate buttons
131// --------------------------------------------------
132
133// Provide *some* extra contrast for those who can get it
134.btn-primary.active,
135.btn-warning.active,
136.btn-danger.active,
137.btn-success.active,
138.btn-info.active,
139.btn-inverse.active {
140  color: rgba(255,255,255,.75);
141}
142
143// Set the backgrounds
144// -------------------------
145.btn-primary {
146  .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
147}
148// Warning appears are orange
149.btn-warning {
150  .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
151}
152// Danger and error appear as red
153.btn-danger {
154  .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
155}
156// Success appears as green
157.btn-success {
158  .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
159}
160// Info appears as a neutral blue
161.btn-info {
162  .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
163}
164// Inverse appears as dark gray
165.btn-inverse {
166  .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
167}
168
169
170// Cross-browser Jank
171// --------------------------------------------------
172
173button.btn,
174input[type="submit"].btn {
175
176  // Firefox 3.6 only I believe
177  &::-moz-focus-inner {
178    padding: 0;
179    border: 0;
180  }
181
182  // IE7 has some default padding on button controls
183  *padding-top: 3px;
184  *padding-bottom: 3px;
185
186  &.btn-large {
187    *padding-top: 7px;
188    *padding-bottom: 7px;
189  }
190  &.btn-small {
191    *padding-top: 3px;
192    *padding-bottom: 3px;
193  }
194  &.btn-mini {
195    *padding-top: 1px;
196    *padding-bottom: 1px;
197  }
198}
199
200
201// Link buttons
202// --------------------------------------------------
203
204// Make a button look and behave like a link
205.btn-link,
206.btn-link:active,
207.btn-link[disabled] {
208  background-color: transparent;
209  background-image: none;
210  .box-shadow(none);
211}
212.btn-link {
213  border-color: transparent;
214  cursor: pointer;
215  color: @linkColor;
216  .border-radius(0);
217}
218.btn-link:hover,
219.btn-link:focus {
220  color: @linkColorHover;
221  text-decoration: underline;
222  background-color: transparent;
223}
224.btn-link[disabled]:hover,
225.btn-link[disabled]:focus {
226  color: @grayDark;
227  text-decoration: none;
228}
229