vant components

2017-04-19 17:46:40 +08:00
parent 06e333eb3e
commit 5e7ea19b1a
42 changed files with 2382 additions and 2 deletions
@@ -0,0 +1,59 @@
+@import './mixins/border_retina.css';
+
+@component-namespace van {
+  @b switch { 
+    height: 31px;
+    width: 51px;
+    display: inline-block;
+    position: relative;
+    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: 28px;
+      height: 28px;
+      border-radius: 13.5px;
+      background-color: #fff;
+      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);
+      left: 1px;
+      top: 1px;
+      z-index: 2;
+      &::after {
+        @mixin border-retina (top, right, bottom, left), rgba(0, 0, 0, .1);
+        border-radius: 27px;
+      }
+    }
+
+    @e loading {
+      width: 16px;
+      height: 16px;
+      position: relative;
+      left: 50%;
+      top: 50%;
+      transform: translate3d(-50%, -50%, 0);
+    }
+
+    @m on {
+      background-color: #44db5e;
+      &::after { border-color: #44db5e; }
+      .van-switch__node {
+        transform: translateX(20px);
+      }
+    }
+
+    @m off {
+      background-color: #fff;
+      border-color: rgba(0, 0, 0, .1);
+    }
+
+    @m disabled {
+      opacity: .4;
+    }
+  }
+}