123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262 |
- @charset "UTF-8";
- @import "common/var";
- @import "mixins/button";
- @import "mixins/mixins";
- @import "mixins/utils";
- @include b(button) {
- display: inline-block;
- line-height: 1;
- white-space: nowrap;
- cursor: pointer;
- background: $--button-default-background-color;
- border: $--border-base;
- border-color: $--button-default-border-color;
- color: $--button-default-font-color;
- -webkit-appearance: none;
- text-align: center;
- box-sizing: border-box;
- outline: none;
- margin: 0;
- transition: .1s;
- font-weight: $--button-font-weight;
- @include utils-user-select(none);
- & + & {
- margin-left: 10px;
- }
- @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
- &:hover,
- &:focus {
- color: $--color-primary;
- border-color: $--color-primary-light-7;
- background-color: $--color-primary-light-9;
- }
- &:active {
- color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
- border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
- outline: none;
- }
- &::-moz-focus-inner {
- border: 0;
- }
- & [class*="el-icon-"] {
- & + span {
- margin-left: 5px;
- }
- }
- @include when(plain) {
- &:hover,
- &:focus {
- background: $--color-white;
- border-color: $--color-primary;
- color: $--color-primary;
- }
- &:active {
- background: $--color-white;
- border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
- color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
- outline: none;
- }
- }
- @include when(active) {
- color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
- border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
- }
- @include when(disabled) {
- &,
- &:hover,
- &:focus {
- color: $--button-disabled-font-color;
- cursor: not-allowed;
- background-image: none;
- background-color: $--button-disabled-background-color;
- border-color: $--button-disabled-border-color;
- }
- &.el-button--text {
- background-color: transparent;
- }
- &.is-plain {
- &,
- &:hover,
- &:focus {
- background-color: $--color-white;
- border-color: $--button-disabled-border-color;
- color: $--button-disabled-font-color;
- }
- }
- }
- @include when(loading) {
- position: relative;
- pointer-events: none;
- &:before {
- pointer-events: none;
- content: '';
- position: absolute;
- left: -1px;
- top: -1px;
- right: -1px;
- bottom: -1px;
- border-radius: inherit;
- background-color: rgba(255,255,255,.35);
- }
- }
- @include when(round) {
- border-radius: 20px;
- padding: 12px 23px;
- }
- @include when(circle) {
- border-radius: 50%;
- padding: $--button-padding-vertical;
- }
- @include m(primary) {
- @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
- }
- @include m(success) {
- @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
- }
- @include m(warning) {
- @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
- }
- @include m(danger) {
- @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
- }
- @include m(info) {
- @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
- }
- @include m(medium) {
- @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
- @include when(circle) {
- padding: $--button-medium-padding-vertical;
- }
- }
- @include m(small) {
- @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
- @include when(circle) {
- padding: $--button-small-padding-vertical;
- }
- }
- @include m(mini) {
- @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);
- @include when(circle) {
- padding: $--button-mini-padding-vertical;
- }
- }
- @include m(text) {
- border-color: transparent;
- color: $--color-primary;
- background: transparent;
- padding-left: 0;
- padding-right: 0;
- &:hover,
- &:focus {
- color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
- border-color: transparent;
- background-color: transparent;
- }
- &:active {
- color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
- border-color: transparent;
- background-color: transparent;
- }
- &.is-disabled,
- &.is-disabled:hover,
- &.is-disabled:focus {
- border-color: transparent;
- }
- }
- }
- @include b(button-group) {
- @include utils-clearfix;
- display: inline-block;
- vertical-align: middle;
- & > .el-button {
- float: left;
- position: relative;
- & + .el-button {
- margin-left: 0;
- }
- &.is-disabled {
- z-index: 1;
- }
- &:first-child {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- &:last-child {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- &:first-child:last-child {
- border-top-right-radius: $--button-border-radius;
- border-bottom-right-radius: $--button-border-radius;
- border-top-left-radius: $--button-border-radius;
- border-bottom-left-radius: $--button-border-radius;
- &.is-round {
- border-radius: 20px;
- }
- &.is-circle {
- border-radius: 50%;
- }
- }
- &:not(:first-child):not(:last-child) {
- border-radius: 0;
- }
- &:not(:last-child) {
- margin-right: -1px;
- }
- &:not(.is-disabled) {
- &:hover,
- &:focus,
- &:active {
- z-index: 1;
- }
- }
- @include when(active) {
- z-index: 1;
- }
- }
-
- & > .el-dropdown {
- & > .el-button {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- border-left-color: rgba($--color-white, 0.5);
- }
- }
- @each $type in (primary, success, warning, danger, info) {
- .el-button--#{$type} {
- &:first-child {
- border-right-color: rgba($--color-white, 0.5);
- }
- &:last-child {
- border-left-color: rgba($--color-white, 0.5);
- }
- &:not(:first-child):not(:last-child) {
- border-left-color: rgba($--color-white, 0.5);
- border-right-color: rgba($--color-white, 0.5);
- }
- }
- }
- }
|