// Button
.@{prefix}-btn {
border: 1px solid mix(rgb(red(@btn-border-right), green(@btn-border-right), blue(@btn-border-right)), @panel-bg, 30%);
border-color: @btn-border-top @btn-border-right @btn-border-bottom @btn-border-left;
position: relative;
text-shadow: @text-shadow;
.inline-block();
.border-radius(3px);
.box-shadow(@btn-box-shadow);
.vertical-gradient(@btn-bg, @btn-bg-hlight);
&:hover, &:focus {
color: @btn-text;
.vertical-gradient(darken(@btn-bg, 5%), darken(@btn-bg-hlight, 5%));
border-color: @btn-border-hover;
}
&.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
cursor: default;
.box-shadow(none);
.opacity(@btn-box-disabled-opacity);
}
&.@{prefix}-active, &.@{prefix}-active:hover {
.vertical-gradient(darken(@btn-bg, 10%), darken(@btn-bg-hlight, 5%));
.box-shadow(@btn-box-shadow-active);
border-color: darken(@btn-bg, 20%);
}
&:active {
.vertical-gradient(darken(@btn-bg, 7%), darken(@btn-bg-hlight, 5%));
.box-shadow(@btn-box-shadow-active);
border-color: @btn-border-active;
}
}
.@{prefix}-btn button {
padding: @btn-padding;
font-size: @font-size;
line-height: @line-height;
*line-height: @line-height - 4px;
cursor: pointer;
color: @btn-text;
text-align: center;
// Fixes for default inner padding of button
overflow: visible; // IE7
-webkit-appearance: none; // WebKit
&::-moz-focus-inner { // Gecko
border: 0;
padding: 0;
}
}
.@{prefix}-btn i {
text-shadow: 1px 1px @btn-text-shadow;
}
.@{prefix}-primary {
min-width: 50px;
color: @btn-primary-text;
border: 1px solid transparent;
border-color: @btn-primary-border;
.vertical-gradient(@btn-primary-bg, @btn-primary-bg-hlight);
&:hover, &:focus {
.vertical-gradient(darken(@btn-primary-bg, 5%), darken(@btn-primary-bg-hlight, 5%));
border-color: @btn-primary-border-hover;
}
&.@{prefix}-disabled button, &.@{prefix}-disabled:hover button {
cursor: default;
.box-shadow(none);
.opacity(@btn-box-disabled-opacity);
}
&.@{prefix}-active, &.@{prefix}-active:hover, &:not(.@{prefix}-disabled):active {
.vertical-gradient(darken(@btn-primary-bg, 10%), darken(@btn-primary-bg-hlight, 10%));
.box-shadow(@btn-box-shadow-active);
}
}
.@{prefix}-primary button, .@{prefix}-primary button i {
color: @btn-primary-text;
text-shadow: 1px 1px @btn-primary-text-shadow;
}
.@{prefix}-btn-large button {
padding: 9px 14px;
font-size: @font-size + 2px;
line-height: normal;
.border-radius(5px);
}
.@{prefix}-btn-large i {
margin-top: 2px;
}
.@{prefix}-btn-small button {
padding: 1px 5px;
font-size: @font-size - 2px;
*padding-bottom: 2px;
}
.@{prefix}-btn-small i {
line-height: 20px;
vertical-align: top;
*line-height: 18px;
}
.@{prefix}-btn .@{prefix}-caret {
margin-top: 8px;
margin-left: 0;
}
.@{prefix}-btn-small .@{prefix}-caret {
margin-top: 8px;
margin-left: 0;
}
.@{prefix}-caret {
.inline-block();
width: 0; height: 0;
vertical-align: top;
border-top: 4px solid @btn-caret-border;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
}
.@{prefix}-disabled .@{prefix}-caret {
border-top-color: @text-disabled;
}
.@{prefix}-caret.@{prefix}-up {
border-bottom: 4px solid @btn-caret-border;
border-top: 0;
}
.@{prefix}-btn-flat {
border: 0;
background: transparent;
.border-radius(0);
.box-shadow(none);
filter: none;
}
.@{prefix}-btn-flat:hover, .@{prefix}-btn-flat.@{prefix}-active, .@{prefix}-btn-flat:focus, .@{prefix}-btn-flat:active {
border: 0;
background: @menubar-bg-active;
filter: none;
.box-shadow(none);
}
.@{prefix}-btn-has-text .@{prefix}-ico {
padding-right: 5px;
}
// RTL
.@{prefix}-rtl .@{prefix}-btn button {
direction: rtl;
}
|