| ffc9d555 |
// BUTTON STYLES
// -------------
// Base styles
// --------------------------------------------------
// Core
.btn {
|
| 2483f917 |
display: inline-block;
padding: 4pt 10pt 4pt;
margin-bottom: 0; // For input.btn
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @zenburnFg;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: @btnBackground;
border: 1pt solid @btnBorder;
|
| 814f2384 |
border-bottom-color: var(--zenburn-green-1);
|
| 2483f917 |
border-radius: 4pt;
&:active { @btnBackgroundHighlight; }
|
| ffc9d555 |
}
// Hover state
.btn:hover {
|
| 57047cb9 |
color: @zenburnFgDark;
text-decoration: none;
background-color: @bodyBackgroundLight;
|
| ffc9d555 |
}
// Focus state for keyboard and accessibility
.btn:focus {
|
| 57047cb9 |
.tab-focus();
|
| ffc9d555 |
}
// Active state
.btn.active,
.btn:active {
|
| 57047cb9 |
background-color: @bodyBackgroundLight;
outline: 0;
|
| ffc9d555 |
}
// Disabled state
.btn.disabled,
.btn[disabled] {
|
| 57047cb9 |
cursor: default;
background-color: @grayLighter;
.opacity(65);
|
| ffc9d555 |
}
// Button Sizes
// --------------------------------------------------
// Large
.btn-large {
|
| 57047cb9 |
padding: 9pt 14pt;
font-size: @baseFontSize + 2pt;
line-height: normal;
border-radius: 5pt;
|
| ffc9d555 |
}
.btn-large [class^="icon-"] {
|
| 57047cb9 |
margin-top: 1pt;
|
| ffc9d555 |
}
// Small
.btn-small {
|
| 57047cb9 |
padding: 5pt 9pt;
font-size: @baseFontSize - 2pt;
line-height: @baseLineHeight - 2pt;
|
| ffc9d555 |
}
.btn-small [class^="icon-"] {
|
| 57047cb9 |
margin-top: -1pt;
|
| ffc9d555 |
}
// Mini
.btn-mini {
|
| 57047cb9 |
padding: 2pt 6pt;
font-size: @baseFontSize - 2pt;
line-height: @baseLineHeight - 4pt;
|
| ffc9d555 |
}
// Alternate buttons
// --------------------------------------------------
// Set text color
// -------------------------
|
| 000a9e60 |
.btn-primary, .btn-primary:hover,
.btn-warning, .btn-warning:hover,
.btn-danger, .btn-danger:hover,
.btn-success, .btn-success:hover,
.btn-info, .btn-info:hover,
.btn-inverse, .btn-inverse:hover {
|
| 57047cb9 |
color: @zenburnFg;
|
| ffc9d555 |
}
// Provide *some* extra contrast for those who can get it
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
|
| 57047cb9 |
color: @zenburnFgLight;
|
| ffc9d555 |
}
// Set the backgrounds
// -------------------------
.btn {
|
| 57047cb9 |
// reset here as of 2.0.3 due to Recess property order
|
| b8469a43 |
border-color: @bodyBackgroundLight;
|
| ffc9d555 |
}
.btn-primary {
|
| 35e3eb92 |
background-color: @btnPrimaryBackground;
&:active {@btnPrimaryBackgroundHighlight;}
|
| ffc9d555 |
}
// Warning appears are orange
.btn-warning {
|
| 35e3eb92 |
background-color: @btnWarningBackground;
&:active {@btnWarningBackgroundHighlight;}
|
| ffc9d555 |
}
// Danger and error appear as red
.btn-danger {
|
| 35e3eb92 |
background-color: @btnDangerBackground;
&:active {@btnDangerBackgroundHighlight;}
|
| ffc9d555 |
}
// Success appears as green
.btn-success {
|
| 35e3eb92 |
background-color: @btnSuccessBackground;
&:active {@btnSuccessBackgroundHighlight;}
|
| ffc9d555 |
}
// Info appears as a neutral blue
.btn-info {
|
| 35e3eb92 |
background-color: @btnInfoBackground;
&:active {@btnInfoBackgroundHighlight;}
|
| ffc9d555 |
}
// Inverse appears as dark gray
.btn-inverse {
|
| 35e3eb92 |
background-color: @btnInverseBackground;
&:active {@btnInverseBackgroundHighlight;}
|
| ffc9d555 |
}
|