123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- // 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;
- }
|