#

whycq

2024-10-26 b4109c203742424cc795bdca9ca1e00d5602e241

 uni_modules/uni-scss/styles/setting/_styles.scss

New file
@@ -0,0 +1,167 @@
/* #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 */