浏览代码

style(progress、tabbar、tabbaritem、tabs): add sass param

richard1015 3 年之前
父节点
当前提交
9b96977300

+ 21 - 17
src/packages/__VUE/progress/index.scss

@@ -4,13 +4,13 @@
   display: flex;
   .nut-progress-outer {
     flex: 1;
-    background-color: #f3f3f3;
-    border-radius: 12px;
+    background-color: $progress-outer-background-color;
+    border-radius: $progress-outer-border-radius;
     height: 10px;
     .nut-progress-inner {
       width: 30%;
       height: 100%;
-      border-radius: 12px;
+      border-radius: $progress-outer-border-radius;
       background: $progress-inner-background-color;
       -webkit-transition: all 0.4s;
       transition: all 0.4s;
@@ -30,7 +30,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        border-radius: 10px;
+        border-radius: $progress-outer-border-radius;
         animation: progressActive 2s ease-in-out infinite;
       }
     }
@@ -49,26 +49,30 @@
       }
     }
     &.nut-progress-small {
-      height: 5px;
+      height: $progress-small-height;
       .nut-progress-text {
-        font-size: 7px;
-        line-height: 10px;
-        padding: 2px 4px;
-        top: -100%;
+        font-size: $progress-small-text-font-size;
+        line-height: $progress-small-text-line-height;
+        padding: $progress-small-text-padding;
+        top: $progress-small-text-top;
       }
     }
     &.nut-progress-base {
-      height: 10px;
+      height: $progress-base-height;
       .nut-progress-text {
-        font-size: 9px;
-        line-height: 13px;
+        font-size: $progress-base-text-font-size;
+        line-height: $progress-base-text-line-height;
+        padding: $progress-base-text-padding;
+        top: $progress-base-text-top;
       }
     }
     &.nut-progress-large {
-      height: 15px;
+      height: $progress-large-height;
       .nut-progress-text {
-        font-size: 13px;
-        line-height: 18px;
+        font-size: $progress-large-text-font-size;
+        line-height: $progress-large-text-line-height;
+        padding: $progress-large-text-padding;
+        top: $progress-large-text-top;
       }
     }
   }
@@ -82,9 +86,9 @@
     min-width: 35px;
   }
   .nut-progress-insidetext {
-    padding: 3px 5px 3px 6px;
+    padding: $progress-insidetext-padding;
     background: $progress-insidetext-background;
-    border-radius: 5px;
+    border-radius: $progress-insidetext-border-radius;
     position: absolute;
     transition: all 0.4s;
     top: -42%;

+ 3 - 2
src/packages/__VUE/tabbar/index.scss

@@ -1,7 +1,8 @@
 .nut-tabbar {
   border: 0px;
-  border-bottom: 1px solid $tabbar-border-color;
-  border-top: 1px solid $tabbar-border-color;
+  box-shadow: $tabbar-box-shadow;
+  border-bottom: $tabbar-border-bottom;
+  border-top: $tabbar-border-top;
   width: 100%;
   display: flex;
   padding: 7px 0;

+ 4 - 3
src/packages/__VUE/tabbaritem/index.scss

@@ -35,14 +35,14 @@
 
     &_num {
       line-height: 1;
-      font-size: $font-size-0;
+      font-size: $tabbar-item-text-font-size;
       color: $white;
       padding: 1px 2px 2px 3px;
     }
 
     &_nums {
       line-height: 1;
-      font-size: $font-size-0;
+      font-size: $tabbar-item-text-font-size;
       color: $white;
       padding: 2px 1px 2px 2px;
     }
@@ -52,7 +52,8 @@
       background-position: center center;
     }
     &_nav-word {
-      font-size: $font-size-0;
+      font-size: $tabbar-item-text-font-size;
+      line-height: $tabbar-item-text-line-height;
       display: block;
     }
     &_big-word {

+ 1 - 0
src/packages/__VUE/tabs/index.scss

@@ -149,6 +149,7 @@
       }
       &.active {
         font-weight: 600;
+        color: $tabs-titles-item-active-color;
         .nut-tabs__titles-item__line {
           content: ' ';
           width: $tabs-horizontal-titles-item-active-line-width;

+ 27 - 1
src/packages/styles/variables.scss

@@ -260,7 +260,12 @@ $rate-icon-void-color: $disable-color !default;
 
 // tabbar
 $tabbar-active-color: $primary-color !default;
-$tabbar-border-color: #eee !default;
+$tabbar-unactive-color: $primary-color !default;
+$tabbar-border-top: 1px solid #eee !default;
+$tabbar-border-bottom: 1px solid #eee !default;
+$tabbar-box-shadow: none !default;
+$tabbar-item-text-font-size: $font-size-0 !default;
+$tabbar-item-text-line-height: initial !default;
 
 //infiniteloading
 $infiniteloading-bottom-color: #c8c8c8 !default;
@@ -371,6 +376,26 @@ $popover-disable-color: rgba(154, 155, 157, 1) !default;
 //progress
 $progress-inner-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 $progress-insidetext-background: $primary-color !default;
+$progress-outer-background-color: #f3f3f3 !default;
+$progress-outer-border-radius: 12px !default;
+$progress-insidetext-border-radius: 5px !default;
+$progress-insidetext-padding: 3px 5px 3px 6px !default;
+$progress-insidetext-top: -42% !default;
+$progress-small-height: 5px !default;
+$progress-small-text-font-size: 7px !default;
+$progress-small-text-line-height: 10px !default;
+$progress-small-text-padding: 2px 4px !default;
+$progress-small-text-top: -100% !default;
+$progress-base-height: 10px !default;
+$progress-base-text-font-size: 9px !default;
+$progress-base-text-line-height: 13px !default;
+$progress-base-text-padding: $progress-insidetext-padding !default;
+$progress-base-text-top: $progress-insidetext-top !default;
+$progress-large-height: 15px !default;
+$progress-large-text-font-size: 13px !default;
+$progress-large-text-line-height: 18px !default;
+$progress-large-text-padding: $progress-insidetext-padding !default;
+$progress-large-text-top: $progress-insidetext-top !default;
 
 //pagination
 $pagination-color: $primary-color !default;
@@ -390,6 +415,7 @@ $tabs-titles-item-large-font-size: $font-size-3 !default;
 $tabs-titles-item-font-size: $font-size-2 !default;
 $tabs-titles-item-small-font-size: $font-size-1 !default;
 $tabs-titles-item-color: $title-color !default;
+$tabs-titles-item-active-color: $title-color !default;
 $tabs-titles-background-color: $help-color !default;
 $tabs-horizontal-tab-line-color: linear-gradient(90deg, $primary-color 0%, rgba($primary-color, 0.15) 100%) !default;
 $tabs-horizontal-titles-height: 46px !default;