| // 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%; | |
| 	 | |
| 	&__text { | |
| 		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; | |
| 		} | |
| 	} | |
| }
 |