|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 |
- /* #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 */
|