Merge pull request #3 from AmyFoxFN/scroll-enhance

update switch UI

Author: AmyFoxFN

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

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)

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>