font-size: 14px;
font-weight: bold;
line-height: 20px;
+ color: #555555;
text-align: center;
vertical-align: middle;
cursor: pointer;
+ background-color: #eee;
border: 0;
border-radius: 4px;
+ -webkit-transition: all 0.075s ease-in-out;
+ -moz-transition: all 0.075s ease-in-out;
+ -o-transition: all 0.075s ease-in-out;
+ transition: all 0.075s ease-in-out;
}
.btn:focus {
.btn:hover {
text-decoration: none;
+ background-color: #ddd;
}
.btn:active,
.btn.active {
outline: 0;
- -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn.disabled,
box-shadow: none;
}
-.btn-default {
- padding: 6px 12px;
- color: #5a5a5a;
- background-color: #fff;
- border: 1px solid #ccc;
-}
-
-.btn-default:hover {
- color: #fff;
- background-color: #999;
- border-color: #999;
-}
-
-/*
-// Core
-.btn {
- display: inline-block;
- padding: 6px 12px;
- margin-bottom: 0; // For input.btn
- font-size: @font-size-base;
- line-height: @line-height-base;
- text-align: center;
- vertical-align: middle;
- cursor: pointer;
- white-space: nowrap;
- .buttonBackground(@btn-background, @btn-background-highlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
- border: 1px solid @btn-border;
- border-bottom-color: darken(@btn-border, 10%);
- border-radius: @border-radius-base;
- .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
-
- // Hover state
- &:hover {
- color: @grayDark;
- text-decoration: none;
- background-position: 0 -15px;
-
- // transition is only when going to hover, otherwise the background
- // behind the gradient (there for IE<=9 fallback) gets mismatched
- .transition(background-position .1s linear);
- }
-
- // Focus state for keyboard and accessibility
- &:focus {
- .tab-focus();
- }
-
- // Active state
- &.active,
- &:active {
- background-image: none;
- outline: 0;
- .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
- }
-
- // Disabled state
- &.disabled,
- &[disabled] {
- cursor: default;
- background-image: none;
- .opacity(65);
- .box-shadow(none);
- }
-
-}
-*/
-
.btn-large {
padding: 11px 19px;
font-size: 17.5px;
<tbody>
<tr>
<td><button type="button" class="btn btn-default">Default</button></td>
- <td><code>btn btn-default</code></td>
+ <td><code>btn</code></td>
<td>Standard gray button with gradient</td>
</tr>
<tr>
<tbody>
<tr>
<td><button type="button" class="btn btn-default">Default</button></td>
- <td><code>btn btn-default</code></td>
+ <td><code>btn</code></td>
<td>Standard gray button with gradient</td>
</tr>
<tr>
font-weight: bold;
line-height: @line-height-base;
text-align: center;
+ color: @gray;
vertical-align: middle;
cursor: pointer;
+ background-color: #eee;
border: 0;
border-radius: @border-radius-base;
- //.transition(all .075s ease-in-out);
+ .transition(all .075s ease-in-out);
&:focus {
.tab-focus();
&:hover {
text-decoration: none;
+ background-color: #ddd;
}
&:active,
&.active {
outline: 0;
- .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+ .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.1)");
}
&.disabled,
}
-// Default button visuals
-.btn-default {
- padding: 6px 12px;
- color: #5a5a5a;
- background-color: #fff;
- border: 1px solid #ccc;
-
- &:hover {
- color: #fff;
- background-color: #999;
- border-color: #999;
- }
-}
-
-/*
-// Core
-.btn {
- display: inline-block;
- padding: 6px 12px;
- margin-bottom: 0; // For input.btn
- font-size: @font-size-base;
- line-height: @line-height-base;
- text-align: center;
- vertical-align: middle;
- cursor: pointer;
- white-space: nowrap;
- .buttonBackground(@btn-background, @btn-background-highlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
- border: 1px solid @btn-border;
- border-bottom-color: darken(@btn-border, 10%);
- border-radius: @border-radius-base;
- .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
-
- // Hover state
- &:hover {
- color: @grayDark;
- text-decoration: none;
- background-position: 0 -15px;
-
- // transition is only when going to hover, otherwise the background
- // behind the gradient (there for IE<=9 fallback) gets mismatched
- .transition(background-position .1s linear);
- }
-
- // Focus state for keyboard and accessibility
- &:focus {
- .tab-focus();
- }
-
- // Active state
- &.active,
- &:active {
- background-image: none;
- outline: 0;
- .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
- }
-
- // Disabled state
- &.disabled,
- &[disabled] {
- cursor: default;
- background-image: none;
- .opacity(65);
- .box-shadow(none);
- }
-
-}
-*/
// Button Sizes
// -------------------------