123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- @charset "utf-8";
-
- $btn-height: 30px !default;
- $btn-padding-horizontal: 18px !default;
- $btn-font-size: 12px !default;
- $btn-radius: 2px !default;
- $btn-color: #288ad6 !default;
- $btn-bg: #fff !default;
- $btn-border: #288ad6 !default;
- $disabled-btn-color: #999 !default;
- $disabled-btn-bg: #f5f5f5 !default;
- $disabled-btn-border: #e6e6e6 !default;
- .ui-btn {
- @include inline-block;
- @include button-size(($btn-height - $btn-font-size)/2 - 1, $btn-padding-horizontal, $btn-font-size, $btn-radius);
- @include button-variant($btn-color, $btn-bg, $btn-border);
- width: auto;
- line-height: 1;
- border: 1px solid;
- cursor: pointer;
- text-align: center;
- vertical-align: middle;
- *overflow: visible;
- user-select: none;
- transition: all .2s ease-in-out;
-
-
- &.is-active,
- &:active {
- outline: 0;
- box-shadow: inset 0 3px 5px rgba(0, 0, 0, .08);
- }
-
-
- &.is-disabled,
- &[disabled] {
- color: $disabled-btn-color;
- background-color: $disabled-btn-bg;
- border-color: $disabled-btn-border;
- &.is-hover,
- &:hover {
- cursor: not-allowed;
- color: $disabled-btn-color;
- background-color: $disabled-btn-bg;
- border-color: $disabled-btn-border;
- }
- &.is-active,
- &:active {
- box-shadow: none;
- }
- }
- }
- a.ui-btn {
- text-decoration: none;
- &:hover {
- text-decoration: none;
- }
- }
- input.ui-btn,
- button.ui-btn {
- *padding: ($btn-height - $btn-font-size)/2 - 2 $btn-padding-horizontal - 1 ($btn-height - $btn-font-size)/2 - 3;
- }
- .ui-btn {
- &.ext-primary {
- @include button-variant($primary-text-color, $primary-color, $primary-color);
- }
- }
- .ui-btn {
- &.ext-success {
- @include button-variant($success-text-color, $success-color, $success-color);
- }
- }
- .ui-btn {
- &.ext-info {
- @include button-variant($info-text-color, $info-color, $info-color);
- }
- }
- .ui-btn {
- &.ext-warning {
- @include button-variant($warning-text-color, $warning-color, $warning-color);
- }
- }
- .ui-btn {
- &.ext-danger {
- @include button-variant($danger-text-color, $danger-color, $danger-color);
- }
- }
- .ui-btn {
- &.ext-block {
- display: block;
- text-align: center;
- }
- }
|