168 lines
3.2 KiB
SCSS
168 lines
3.2 KiB
SCSS
/* #ifndef APP-NVUE */
|
|
|
|
$-color-white:#fff;
|
|
$-color-black:#000;
|
|
@mixin base-style($color) {
|
|
color: #fff;
|
|
background-color: $color;
|
|
border-color: mix($-color-black, $color, 8%);
|
|
&:not([hover-class]):active {
|
|
background: mix($-color-black, $color, 10%);
|
|
border-color: mix($-color-black, $color, 20%);
|
|
color: $-color-white;
|
|
outline: none;
|
|
}
|
|
}
|
|
@mixin is-color($color) {
|
|
@include base-style($color);
|
|
&[loading] {
|
|
@include base-style($color);
|
|
&::before {
|
|
margin-right:5px;
|
|
}
|
|
}
|
|
&[disabled] {
|
|
&,
|
|
&[loading],
|
|
&:not([hover-class]):active {
|
|
color: $-color-white;
|
|
border-color: mix(darken($color,10%), $-color-white);
|
|
background-color: mix($color, $-color-white);
|
|
}
|
|
}
|
|
|
|
}
|
|
@mixin base-plain-style($color) {
|
|
color:$color;
|
|
background-color: mix($-color-white, $color, 90%);
|
|
border-color: mix($-color-white, $color, 70%);
|
|
&:not([hover-class]):active {
|
|
background: mix($-color-white, $color, 80%);
|
|
color: $color;
|
|
outline: none;
|
|
border-color: mix($-color-white, $color, 50%);
|
|
}
|
|
}
|
|
@mixin is-plain($color){
|
|
&[plain] {
|
|
@include base-plain-style($color);
|
|
&[loading] {
|
|
@include base-plain-style($color);
|
|
&::before {
|
|
margin-right:5px;
|
|
}
|
|
}
|
|
&[disabled] {
|
|
&,
|
|
&:active {
|
|
color: mix($-color-white, $color, 40%);
|
|
background-color: mix($-color-white, $color, 90%);
|
|
border-color: mix($-color-white, $color, 80%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.uni-btn {
|
|
margin: 5px;
|
|
color: #393939;
|
|
border:1px solid #ccc;
|
|
font-size: 16px;
|
|
font-weight: 200;
|
|
background-color: #F9F9F9;
|
|
// TODO 暂时处理边框隐藏一边的问题
|
|
overflow: visible;
|
|
&::after{
|
|
border: none;
|
|
}
|
|
|
|
&:not([type]),&[type=default] {
|
|
color: #999;
|
|
&[loading] {
|
|
background: none;
|
|
&::before {
|
|
margin-right:5px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&[disabled]{
|
|
color: mix($-color-white, #999, 60%);
|
|
&,
|
|
&[loading],
|
|
&:active {
|
|
color: mix($-color-white, #999, 60%);
|
|
background-color: mix($-color-white,$-color-black , 98%);
|
|
border-color: mix($-color-white, #999, 85%);
|
|
}
|
|
}
|
|
|
|
&[plain] {
|
|
color: #999;
|
|
background: none;
|
|
border-color: $uni-border-1;
|
|
&:not([hover-class]):active {
|
|
background: none;
|
|
color: mix($-color-white, $-color-black, 80%);
|
|
border-color: mix($-color-white, $-color-black, 90%);
|
|
outline: none;
|
|
}
|
|
&[disabled]{
|
|
&,
|
|
&[loading],
|
|
&:active {
|
|
background: none;
|
|
color: mix($-color-white, #999, 60%);
|
|
border-color: mix($-color-white, #999, 85%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not([hover-class]):active {
|
|
color: mix($-color-white, $-color-black, 50%);
|
|
}
|
|
|
|
&[size=mini] {
|
|
font-size: 16px;
|
|
font-weight: 200;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
|
|
|
|
&.uni-btn-small {
|
|
font-size: 14px;
|
|
}
|
|
&.uni-btn-mini {
|
|
font-size: 12px;
|
|
}
|
|
|
|
&.uni-btn-radius {
|
|
border-radius: 999px;
|
|
}
|
|
&[type=primary] {
|
|
@include is-color($uni-primary);
|
|
@include is-plain($uni-primary)
|
|
}
|
|
&[type=success] {
|
|
@include is-color($uni-success);
|
|
@include is-plain($uni-success)
|
|
}
|
|
&[type=error] {
|
|
@include is-color($uni-error);
|
|
@include is-plain($uni-error)
|
|
}
|
|
&[type=warning] {
|
|
@include is-color($uni-warning);
|
|
@include is-plain($uni-warning)
|
|
}
|
|
&[type=info] {
|
|
@include is-color($uni-info);
|
|
@include is-plain($uni-info)
|
|
}
|
|
}
|
|
/* #endif */
|