| New file | 
|  |  |  | 
|---|
|  |  |  | /* #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 */ | 
|---|