ソースを参照

style(button): add sass param

richard1015 3 年 前
コミット
8df7d2bc99

+ 1 - 2
src/packages/__VUE/button/demo.vue

@@ -93,9 +93,8 @@ export default createDemo({
   flex-wrap: wrap;
   flex-wrap: wrap;
 }
 }
 .nut-button {
 .nut-button {
-  margin-right: 15px;
+  margin-right: 5px;
   &:last-child {
   &:last-child {
-    margin-bottom: 0;
     margin-right: 0;
     margin-right: 0;
   }
   }
 }
 }

+ 5 - 5
src/packages/__VUE/button/index.scss

@@ -126,21 +126,21 @@
   }
   }
 
 
   &--normal {
   &--normal {
-    padding: 0 18px;
+    padding: $button-default-padding;
     font-size: $button-default-font-size;
     font-size: $button-default-font-size;
   }
   }
 
 
   &--small {
   &--small {
     height: $button-small-height;
     height: $button-small-height;
     line-height: $button-small-line-height;
     line-height: $button-small-line-height;
-    padding: 0 $padding-xs;
-    font-size: $font-size-1;
+    padding: $button-small-padding;
+    font-size: $button-small-font-size;
   }
   }
   &--mini {
   &--mini {
     height: $button-mini-height;
     height: $button-mini-height;
     line-height: 1.2;
     line-height: 1.2;
-    padding: 0 $padding-xs;
-    font-size: $font-size-1;
+    padding: $button-mini-padding;
+    font-size: $button-mini-font-size;
   }
   }
 
 
   &--block {
   &--block {

+ 5 - 3
src/packages/styles/variables.scss

@@ -16,9 +16,6 @@ $disable-color: #cccccc !default;
 $white: #fff !default;
 $white: #fff !default;
 $black: #000 !default;
 $black: #000 !default;
 
 
-// padding
-$padding-xs: 12px !default;
-
 $font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif !default;
 $font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif !default;
 
 
 // ---- Animation ----
 // ---- Animation ----
@@ -44,6 +41,9 @@ $button-border-width: 1px !default;
 $button-default-bg-color: $white !default;
 $button-default-bg-color: $white !default;
 $button-default-border-color: rgba(204, 204, 204, 1) !default;
 $button-default-border-color: rgba(204, 204, 204, 1) !default;
 $button-default-color: rgba(102, 102, 102, 1) !default;
 $button-default-color: rgba(102, 102, 102, 1) !default;
+$button-default-padding: 0 18px !default;
+$button-mini-padding: 0 12px !default;
+$button-small-padding: 0 12px !default;
 $button-small-height: 28px !default;
 $button-small-height: 28px !default;
 $button-mini-height: 24px !default;
 $button-mini-height: 24px !default;
 $button-default-height: 38px !default;
 $button-default-height: 38px !default;
@@ -54,6 +54,8 @@ $button-block-height: 48px !default;
 $button-default-line-height: 36px !default;
 $button-default-line-height: 36px !default;
 $button-block-line-height: 46px !default;
 $button-block-line-height: 46px !default;
 $button-default-font-size: $font-size-2 !default;
 $button-default-font-size: $font-size-2 !default;
+$button-small-font-size: $font-size-1 !default;
+$button-mini-font-size: $font-size-1 !default;
 $button-disabled-opacity: 0.68 !default;
 $button-disabled-opacity: 0.68 !default;
 $button-primary-color: $white !default;
 $button-primary-color: $white !default;
 $button-primary-border-color: $primary-color !default;
 $button-primary-border-color: $primary-color !default;