From bbf787218ffaeaeb3d2318c0699cb611e2985c14 Mon Sep 17 00:00:00 2001
From: jiangruowei <jiangruowei@youzan.com>
Date: Thu, 2 Mar 2017 17:21:20 +0800
Subject: [PATCH] feat: ui tweaks

---
 packages/switch/src/switch.vue    | 15 ++++++-------
 packages/zanui-css/src/switch.css | 36 ++++++++++++++++++-------------
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/packages/switch/src/switch.vue b/packages/switch/src/switch.vue
index d33794c62..3b9df45f9 100644
--- a/packages/switch/src/switch.vue
+++ b/packages/switch/src/switch.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="zan-switch" :class="switchState" @click="toggleState">
-    <div class="zan-switch__node" :class="switchState">
+  <div class="zan-switch" :class="switchStates" @click="toggleState">
+    <div class="zan-switch__node">
       <zan-loading v-if="loading" class="zan-switch__loading"></zan-loading>
     </div>
+    <div class="zan-switch__bg"></div>
   </div>
 </template>
 
@@ -40,13 +41,11 @@ export default {
     }
   },
   computed: {
-    switchState: function() {
-      let switchState = this.checked ? ['is-on'] : ['is-off'];
+    switchStates: function() {
+      let switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'),
+        'zan-switch--' + (this.disabled ? 'disabled' : '')];
 
-      if (this.disabled) switchState.push('is-disabled');
-      if (this.loading) switchState.push('is-loading');
-
-      return switchState;
+      return switchStates;
     }
   },
   methods: {
diff --git a/packages/zanui-css/src/switch.css b/packages/zanui-css/src/switch.css
index 2cf0b1ccf..95af020f1 100644
--- a/packages/zanui-css/src/switch.css
+++ b/packages/zanui-css/src/switch.css
@@ -1,28 +1,31 @@
+@import "./mixins/border_retina.css";
+
 @component-namespace zan {
   @b switch { 
     height: 29px;
     width: 49px;
     display: inline-block;
-    border-radius: 16px;
     position: relative;
-    border: 1px solid;
+    background: #fff;
+    border-radius: 16px;
+    &::after{
+      @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
+      border-width: 3px;
+      border-radius: 32px;
+    }
 
     @e node {
       width: 27px;
       height: 27px;
       border-radius: 100%;
       background-color: #fff;
-      border: .5px solid rgba(0, 0, 0, .1);
       position: absolute;
       box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
-      @when on {
-        left: 20px;
-        transition: all .5s ease-in-out;
-      }
-
-      @when off {
-        left: 0;
-        transition: all .5s ease-in-out;
+      left: 0;
+      top: 1px;
+      &::after {
+        @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
+        border-radius: 100%;
       }
     }
 
@@ -35,17 +38,20 @@
       transform: translate3d(-50%, -50%, 0);
     }
 
-    @when on {
+    @m on {
       background-color: #44db5e;
-      border-color: #44db5e;
+      &::after { border-color: #44db5e; }
+      .zan-switch__node {
+        transform: translateX(20px);
+      }
     }
 
-    @when off {
+    @m off {
       background-color: #fff;
       border-color: rgba(0, 0, 0, .1);
     }
 
-    @when disabled {
+    @m disabled {
       opacity: .4;
     }
   }