From 1de5dfa970132ffad65c88128487eea0d64f3284 Mon Sep 17 00:00:00 2001
From: funanamy <funanamy@didichuxing.com>
Date: Wed, 8 Nov 2017 15:28:00 +0800
Subject: [PATCH] update switch UI

---
 example/components/input-option/input-option.vue   |  6 +++---
 example/components/select-option/select-option.vue |  6 +++---
 example/components/switch-option/switch-option.vue | 14 ++++++++------
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/example/components/input-option/input-option.vue b/example/components/input-option/input-option.vue
index a9374d34f..943eb5247 100644
--- a/example/components/input-option/input-option.vue
+++ b/example/components/input-option/input-option.vue
@@ -37,15 +37,15 @@
     height: 100%
     justify-content space-between
     align-items stretch
-    padding-left: 15px
     .name
       flex: 0 0 auto
-      width: 8rem
+      width: 120px
+      padding-left: 10px
       display inline-flex
       align-items center
     input
       flex: 1 1 auto
-      padding-left: 0.8rem
+      padding-left: 10px
       background-color: $color-white
       border-left: 1px solid rgba(0, 0, 0, .1)
       box-shadow: 0 0 1px 1px #eee inset
diff --git a/example/components/select-option/select-option.vue b/example/components/select-option/select-option.vue
index fb700dd7d..5e1217c98 100644
--- a/example/components/select-option/select-option.vue
+++ b/example/components/select-option/select-option.vue
@@ -43,15 +43,15 @@
     height: 100%
     justify-content space-between
     align-items stretch
-    padding-left: 15px
     .name
       flex: 0 0 auto
-      width: 8rem
+      width: 120px
       display inline-flex
+      padding-left: 10px
       align-items center
     select
       flex: 1 1 auto
-      padding-left: 0.8rem
+      padding-left: 10rem
       background-color: $color-white
       border: none
       border-left: 1px solid rgba(0, 0, 0, .1)
diff --git a/example/components/switch-option/switch-option.vue b/example/components/switch-option/switch-option.vue
index 6a9e562a0..4491171d4 100644
--- a/example/components/switch-option/switch-option.vue
+++ b/example/components/switch-option/switch-option.vue
@@ -54,8 +54,8 @@
       margin-top: 5px
       display: inline-block
       position: relative
-      height: 31px
-      width: 51px
+      height: 22px
+      width: 36px
       background-color: $color-white
       border-radius: 1000px
       border: 2px solid rgba(0, 0, 0, .1)
@@ -67,8 +67,8 @@
       .switch-circle
         position: absolute
         display: inline-block
-        height: 27px
-        width: 27px
+        height: 20px
+        width: 20px
         background: white
         border-radius: 50%
         border: 1px solid rgba(0, 0, 0, .1)
@@ -77,7 +77,9 @@
         left: 0
         transition: all 0.3s
         &.active
-          left: 21px
-          transition: all 0.4s ease 0.1s
+          left: 14px
+          border: 1px solid $color-white
+          box-shadow: -1px 1px 1px $color-dark-orange
+          transition: all 0.3s ease 0.05s
 
 </style>