element-sim 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-sim",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-sim.common.js",
   "files": [

package/packages/theme-chalk/src/button.scss

@@ -12,7 +12,7 @@
   background: $--button-default-background-color;
   border: $--border-base;
   border-color: $--button-default-border-color;
-  color: $--button-default-font-color;
+  color: $--color-primary;
   -webkit-appearance: none;
   text-align: center;
   box-sizing: border-box;
@@ -20,11 +20,6 @@
   margin: 0;
   transition: .1s;
   font-weight: $--button-font-weight;
-  @include utils-user-select(none);
-  & + & {
-    margin-left: 10px;
-  }
-
   @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
 
   &:hover,
@@ -110,7 +105,7 @@
       right: -1px;
       bottom: -1px;
       border-radius: inherit;
-      background-color: rgba(255,255,255,.35);
+      background-color: rgba(255,255,255,.5);
     }
   }
   @include when(round) {
@@ -137,22 +132,37 @@
     @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
   }
   @include m(medium) {
+    min-width: 96px;
     @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
     @include when(circle) {
       padding: $--button-medium-padding-vertical;
     }
+    @include utils-user-select(none);
+    & + & {
+      margin-left: 20px;
+    }
   }
   @include m(small) {
+    min-width: 76px;
     @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
     @include when(circle) {
       padding: $--button-small-padding-vertical;
     }
+    @include utils-user-select(none);
+    & + & {
+      margin-left: 16px;
+    }
   }
   @include m(mini) {
+    min-width: 60px;
     @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);
     @include when(circle) {
       padding: $--button-mini-padding-vertical;
     }
+    @include utils-user-select(none);
+    & + & {
+      margin-left: 12px;
+    }
   }
   @include m(text) {
     border-color: transparent;

package/packages/theme-chalk/src/common/var.scss

@@ -20,7 +20,7 @@ $--color-primary: #2163FC !default;
 /// color|1|Background Color|4
 $--color-white: #FFFFFF !default;
 /// color|1|Background Color|4
-$--color-black: #000000 !default;
+$--color-black: #1D2129 !default;
 $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
 $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
 $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
@@ -49,25 +49,27 @@ $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
 $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
 $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
 /// color|1|Font Color|2
-$--color-text-primary: #303133 !default;
+$--color-text-primary: #272E3B !default;
 /// color|1|Font Color|2
-$--color-text-regular: #606266 !default;
+$--color-text-regular: #4E5969 !default;
 /// color|1|Font Color|2
-$--color-text-secondary: #909399 !default;
+$--color-text-secondary: #6B7785 !default;
 /// color|1|Font Color|2
-$--color-text-placeholder: #C0C4CC !default;
+$--color-text-placeholder: #A9AEB8 !default;
+/// color|1|Font Color|2
+$--color-text-gray: #A9AEB8 !default;
 /// color|1|Border Color|3
-$--border-color-base: #DCDFE6 !default;
+$--border-color-base: #C9CDD4 !default;
 /// color|1|Border Color|3
-$--border-color-light: #E4E7ED !default;
+$--border-color-light: #E5E6EB !default;
 /// color|1|Border Color|3
-$--border-color-lighter: #EBEEF5 !default;
+$--border-color-lighter: #F2F3F5 !default;
 /// color|1|Border Color|3
-$--border-color-extra-light: #F2F6FC !default;
+$--border-color-extra-light: #F7F8FA !default;
 
 // Background
 /// color|1|Background Color|4
-$--background-color-base: #F5F7FA !default;
+$--background-color-base: #F2F3F5 !default;
 
 /* Link
 -------------------------- */
@@ -81,7 +83,7 @@ $--border-style-base: solid !default;
 $--border-color-hover: $--color-text-placeholder !default;
 $--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
 /// borderRadius|1|Radius|0
-$--border-radius-base: 4px !default;
+$--border-radius-base: 2px !default;
 /// borderRadius|1|Radius|0
 $--border-radius-small: 2px !default;
 /// borderRadius|1|Radius|0
@@ -527,15 +529,15 @@ $--button-medium-padding-vertical: 10px !default;
 $--button-medium-padding-horizontal: 20px !default;
 
 /// fontSize||Font|1
-$--button-small-font-size: 12px !default;
-$--button-small-border-radius: #{$--border-radius-base - 1} !default;
+$--button-small-font-size: $--font-size-base !default;
+$--button-small-border-radius: $--border-radius-base !default;
 /// padding||Spacing|3
 $--button-small-padding-vertical: 9px !default;
 /// padding||Spacing|3
 $--button-small-padding-horizontal: 15px !default;
 /// fontSize||Font|1
-$--button-mini-font-size: 12px !default;
-$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
+$--button-mini-font-size: $--font-size-small !default;
+$--button-mini-border-radius: $--border-radius-base !default;
 /// padding||Spacing|3
 $--button-mini-padding-vertical: 7px !default;
 /// padding||Spacing|3

package/packages/theme-chalk/src/mixins/_button.scss

@@ -61,8 +61,8 @@
     &:focus,
     &:active {
       color: $--color-white;
-      background-color: mix($background-color, $--color-white);
-      border-color: mix($border-color, $--color-white);
+      background-color: mix($background-color, $--color-white, 40%);
+      border-color: mix($border-color, $--color-white, 40%);
     }
   }