You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
3.2 KiB
167 lines
3.2 KiB
/* #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 */
|
|
|