feat: checkbox & swich styles animation

demo/components/checkboxDemo.vue

@@ -24,6 +24,11 @@
             v-model="isChecked"
             style="width: 120px;"
           />
+          <n-checkbox
+            v-model="isChecked"
+            disabled
+            style="width: 120px;"
+          />
           <div style="width: 120px;">
             isChecked: {{ isChecked }}
           </div>
@@ -39,6 +44,11 @@
   v-model="isChecked"
   style="width: 120px;"
 />
+<n-checkbox
+  v-model="isChecked"
+  disabled
+  style="width: 120px;"
+/>
 <div style="width: 120px;">
   isChecked: {{ isChecked }}
 </div></textarea>

demo/components/switchDemo.vue

@@ -14,17 +14,27 @@
           Basic Usage
         </div>
         <div class="n-doc-section__view">
-          <n-switch v-model="isActive" />
-          <div style="margin-left: 14px;">
+          <n-switch
+            v-model="isActive"
+          />
+          <div style="margin: 0 14px;">
             active: {{ isActive }}
           </div>
+          <n-switch
+            v-model="isActive"
+            disabled
+          />
         </div>
         <div class="n-doc-section__source">
           <textarea v-pre>
 <n-switch v-model="isActive" />
-<div style="margin-left: 14px;">
+<div style="margin: 0 14px;">
   active: {{ isActive }}
 </div>
+<n-switch
+  v-model="isActive"
+  disabled
+/>
 <script>
 export default {
   data () {

demo/demo.vue

@@ -2,7 +2,7 @@
   <div class="demo">
     <n-nimbus-service-layout
       icon="md-contacts"
-      name="NAIVE UI (0.1.55)"
+      name="NAIVE UI (0.1.56)"
       :padding-body="false"
       :items="items"
     >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/Checkbox/src/main.vue

@@ -5,7 +5,7 @@
   >
     <div
       class="n-checkbox__checkbox"
-      :class="{'is-checked':checked}"
+      :class="{'is-checked':checked, 'n-checkbox__checkbox--disabled': disabled}"
     >
       <div
         class="n-checkbox-checkbox__inner"
@@ -29,11 +29,20 @@ export default {
     event: 'change'
   },
   props: {
-    checked: Boolean
+    checked: {
+      type: Boolean,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
   },
   methods: {
     handleClick () {
-      this.$emit('change', !this.checked)
+      if (!this.disabled) {
+        this.$emit('change', !this.checked)
+      }
     }
   }
 }

packages/common/Switch/src/main.vue

@@ -4,8 +4,8 @@
     @click="handleClick"
   >
     <div
-      class="rail"
-      :class="{ active: active }"
+      class="n-switch__rail"
+      :class="{ 'n-switch__rail--active': active, 'n-switch__rail--disabled': disabled }"
     />
   </div>
 </template>
@@ -21,11 +21,17 @@ export default {
     active: {
       type: Boolean,
       required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
     handleClick () {
-      this.$emit('change', !this.active)
+      if (!this.disabled) {
+        this.$emit('change', !this.active)
+      }
     }
   }
 }

styles/Checkbox.scss

@@ -17,14 +17,31 @@
       height: 14px;
       width: 14px;
       box-sizing: border-box;
-      border: 1px solid #63E2B7;
+      box-shadow: inset 0 0 0 1px $checkbox-border-color;
       background-color: transparent;
       border-radius: 4px;
       position: relative;
-      
+      transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
+    }
+    &:hover {
+      box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
     }
     &.is-checked {
-      background-color: #63E2B7;
+      background-color: $checkbox-background--active;
+    }
+    &.n-checkbox__checkbox--disabled {
+      cursor: not-allowed;
+      background-color: rgba(255,255,255,.4);
+      &:hover {
+        box-shadow: none;
+      }
+      .n-checkbox-checkbox__inner {
+        &::after {
+          border: 1.5px solid rgba(255,255,255,.4);
+          border-left: 0;
+          border-top: 0;
+        }
+      }
     }
     .n-checkbox-checkbox__inner {
       &::after {
@@ -34,15 +51,18 @@
         border-left: 0;
         border-top: 0;
         height: 8px;
-        left: 4px;
+        left: 5px;
         position: absolute;
-        top: 0px;
-        transform: rotate(45deg) scaleY(0);
+        top: 1px;
+        opacity: 0;
+        transform: rotate(45deg) scale(.5);
         width: 3px;
         transform-origin: center;
+        transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
       }
       &.is-checked::after {
-        transform: rotate(45deg) scaleY(1);
+        opacity: 1;
+        transform: rotate(45deg) scale(1);
       }
     }
   }

styles/Switch.scss

@@ -5,7 +5,7 @@
   & {
     display: inline-block;
   }
-  .rail {
+  .n-switch__rail {
     position: relative;
     height: 14px;
     width: 28px;
@@ -32,7 +32,7 @@
       background-image: linear-gradient(52deg,rgba(120,205,104,1) 0%,rgba(20,166,165,1) 100%);
       opacity: 0;
     }
-    &.active {
+    &.n-switch__rail--active {
       background-color: rgba(97, 196, 118, .27);
       &::before {
         left: 12px;
@@ -43,5 +43,9 @@
         opacity: 1;
       }
     }
+    &.n-switch__rail--disabled {
+      cursor: not-allowed;
+      opacity: .5;
+    }
   }
 }

styles/Table.scss

@@ -4,7 +4,7 @@
 @include b(table) {
   width: 100%;
   border-radius: 12px;
-  font-size: $small-font-size;
+  font-size: $table-font-size;
   overflow: hidden;
   box-shadow: $table-box-shadow;
   padding-bottom: 8px;

styles/theme/default.scss

@@ -70,6 +70,19 @@ $pagination-border-radius: 4px;
 $pagination-color--active: $main-color;
 $pagination-bagkround-color--active: rgba(99,226,183,0.3);
 
+/**
+ * n-table
+ */
+$table-font-size: 13px;
+
+/**
+ * n-checkbox
+ */
+$checkbox-background: transparent;
+$checkbox-background--active: $main-color;
+$checkbox-border-color: rgba(255, 255, 255, .4);
+$checkbox-border-color--active: $main-color;
+
 $amazing-font-size: 20px;
 $huge-font-size: 18px;
 $large-font-size: 16px;