176 lines
3.8 KiB
Plaintext
176 lines
3.8 KiB
Plaintext
// 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.@{prefix}-btn-has-text {
|
|
min-width: 50px;
|
|
}
|
|
|
|
.@{prefix}-primary {
|
|
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 .@{prefix}-txt {
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.@{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;
|
|
}
|