| | |
| | | // nvue下hover-class无效
|
| | | $u-button-before-top:50% !default;
|
| | | $u-button-before-left:50% !default;
|
| | | $u-button-before-width:100% !default;
|
| | | $u-button-before-height:100% !default;
|
| | | $u-button-before-transform:translate(-50%, -50%) !default;
|
| | | $u-button-before-opacity:0 !default;
|
| | | $u-button-before-background-color:#000 !default;
|
| | | $u-button-before-border-color:#000 !default;
|
| | | $u-button-active-before-opacity:.15 !default;
|
| | | $u-button-icon-margin-left:4px !default;
|
| | | $u-button-plain-u-button-info-color:$u-info;
|
| | | $u-button-plain-u-button-success-color:$u-success;
|
| | | $u-button-plain-u-button-error-color:$u-error;
|
| | | $u-button-plain-u-button-warning-color:$u-error;
|
| | |
|
| | | // nvue下hover-class无效 |
| | | $u-button-before-top:50% !default; |
| | | $u-button-before-left:50% !default; |
| | | $u-button-before-width:100% !default; |
| | | $u-button-before-height:100% !default; |
| | | $u-button-before-transform:translate(-50%, -50%) !default; |
| | | $u-button-before-opacity:0 !default; |
| | | $u-button-before-background-color:#000 !default; |
| | | $u-button-before-border-color:#000 !default; |
| | | $u-button-active-before-opacity:.15 !default; |
| | | $u-button-icon-margin-left:4px !default; |
| | | $u-button-plain-u-button-info-color:$u-info; |
| | | $u-button-plain-u-button-success-color:$u-success; |
| | | $u-button-plain-u-button-error-color:$u-error; |
| | | $u-button-plain-u-button-warning-color:$u-error; |
| | | |
| | | .u-button { |
| | | width: 100%; |
| | | |
| | |
| | | white-space: nowrap; |
| | | line-height: 1; |
| | | } |
| | | |
| | | &:before {
|
| | | position: absolute;
|
| | | top:$u-button-before-top;
|
| | | left:$u-button-before-left;
|
| | | width:$u-button-before-width;
|
| | | height:$u-button-before-height;
|
| | | border: inherit;
|
| | | border-radius: inherit;
|
| | | transform:$u-button-before-transform;
|
| | | opacity:$u-button-before-opacity;
|
| | | content: " ";
|
| | | background-color:$u-button-before-background-color;
|
| | | border-color:$u-button-before-border-color;
|
| | | }
|
| | | |
| | | &--active {
|
| | | &:before {
|
| | | opacity: .15
|
| | | }
|
| | | }
|
| | | |
| | | &__icon+&__text:not(:empty),
|
| | | &__loading-text {
|
| | | margin-left:$u-button-icon-margin-left;
|
| | | }
|
| | | |
| | | &--plain {
|
| | | &.u-button--primary {
|
| | | color: $u-primary;
|
| | | }
|
| | | }
|
| | | |
| | | &--plain {
|
| | | &.u-button--info {
|
| | | color:$u-button-plain-u-button-info-color;
|
| | | }
|
| | | }
|
| | | |
| | | &--plain {
|
| | | &.u-button--success {
|
| | | color:$u-button-plain-u-button-success-color;
|
| | | }
|
| | | }
|
| | | |
| | | &--plain {
|
| | | &.u-button--error {
|
| | | color:$u-button-plain-u-button-error-color;
|
| | | }
|
| | | }
|
| | | |
| | | &--plain {
|
| | | &.u-button--warning {
|
| | | color:$u-button-plain-u-button-warning-color;
|
| | | }
|
| | | }
|
| | | }
|
| | | |
| | | &:before { |
| | | position: absolute; |
| | | top:$u-button-before-top; |
| | | left:$u-button-before-left; |
| | | width:$u-button-before-width; |
| | | height:$u-button-before-height; |
| | | border: inherit; |
| | | border-radius: inherit; |
| | | transform:$u-button-before-transform; |
| | | opacity:$u-button-before-opacity; |
| | | content: " "; |
| | | background-color:$u-button-before-background-color; |
| | | border-color:$u-button-before-border-color; |
| | | } |
| | | |
| | | &--active { |
| | | &:before { |
| | | opacity: .15 |
| | | } |
| | | } |
| | | |
| | | &__icon+&__text:not(:empty), |
| | | &__loading-text { |
| | | margin-left:$u-button-icon-margin-left; |
| | | } |
| | | |
| | | &--plain { |
| | | &.u-button--primary { |
| | | color: $u-primary; |
| | | } |
| | | } |
| | | |
| | | &--plain { |
| | | &.u-button--info { |
| | | color:$u-button-plain-u-button-info-color; |
| | | } |
| | | } |
| | | |
| | | &--plain { |
| | | &.u-button--success { |
| | | color:$u-button-plain-u-button-success-color; |
| | | } |
| | | } |
| | | |
| | | &--plain { |
| | | &.u-button--error { |
| | | color:$u-button-plain-u-button-error-color; |
| | | } |
| | | } |
| | | |
| | | &--plain { |
| | | &.u-button--warning { |
| | | color:$u-button-plain-u-button-warning-color; |
| | | } |
| | | } |
| | | } |