6 // --------------------------------------------------
10 display: inline-block;
12 padding: 4px 10px 4px;
13 margin-bottom: 0; // For input.btn
14 font-size: @baseFontSize;
15 line-height: @baseLineHeight;
20 text-shadow: 0 1px 1px rgba(255,255,255,.75);
21 vertical-align: middle;
23 .buttonBackground(@btnBackground, @btnBackgroundHighlight);
24 border: 1px solid @btnBorder;
25 *border: 0; // Remove the border to prevent IE7's black border on input:focus
26 border-bottom-color: darken(@btnBorder, 10%);
28 .ie7-restore-left-whitespace(); // Give IE7 some love
29 .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
33 .buttonBackground(@btnBackgroundHighlight,@btnBackground);
39 text-decoration: none;
40 background-color: darken(@white, 10%);
41 *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
42 background-position: 0 -15px;
44 // transition is only when going to hover, otherwise the background
45 // behind the gradient (there for IE<=9 fallback) gets mismatched
46 .transition(background-position .1s linear);
49 // Focus state for keyboard and accessibility
57 background-color: darken(@gray, 10%);
58 background-color: darken(@gray, 15%) e("\9");
59 background-image: none;
60 color: @grayLighter !important;
61 text-shadow: 0 1px 1px rgba(0,0,0,.75);
63 .box-shadow(~"inset 0 1px 3px rgba(0,0,0,.5)");
70 background-color: darken(@white, 10%);
71 background-image: none;
78 // --------------------------------------------------
83 font-size: @baseFontSize + 2px;
87 .btn-large [class^="icon-"] {
94 font-size: @baseFontSize - 2px;
95 line-height: @baseLineHeight - 2px;
97 .btn-small [class^="icon-"] {
104 font-size: @baseFontSize - 2px;
105 line-height: @baseLineHeight - 4px;
109 // Alternate buttonshttp://suga.site/sugar7/forecast_james_pro.html#
110 // --------------------------------------------------
113 // -------------------------
127 text-shadow: 0 -1px 0 rgba(0,0,0,.25);
129 // Provide *some* extra contrast for those who can get it
136 .btn-invisible.active {
137 color: rgba(255,255,255,.75);
140 // Set the backgrounds
141 // -------------------------
144 .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
146 // Warning appears are orange
148 .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
150 // Danger and error appear as red
152 .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
154 // Success appears as green
156 .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
158 // Info appears as a neutral blue
160 .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
162 // Inverse appears as dark gray
164 .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
167 // invisible appears as no button
170 border: 1px solid transparent;
173 .btn-invisible:hover {
174 border: 1px solid lighten(@btnBorder, 1%);
175 *border: 0; // Remove the border to prevent IE7's black border on input:focus
176 border-top-color: darken(@btnBorder, 5%);
181 // Cross-browser Jank
182 // --------------------------------------------------
185 input[type="submit"].btn {
187 // Firefox 3.6 only I believe
188 &::-moz-focus-inner {
193 // IE7 has some default padding on button controls
195 *padding-bottom: 2px;
198 *padding-bottom: 7px;
202 *padding-bottom: 3px;
206 *padding-bottom: 1px;