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,159 @@
+@import './common/var.css';
+@import './mixins/ellipsis.css';
+@import './icon.css';
+
+@component-namespace van {
+  @b steps {
+    overflow: hidden;
+    padding: 0 10px;
+    background-color: #fff;
+
+    @m 4 {
+      .van-step {
+        width: 33.2%;
+      }
+    }
+
+    @m 3 {
+      .van-step {
+        width: 50%;
+      }
+    }
+
+    @e icon {
+      float: left;
+      margin-right: 10px;
+    }
+
+    .van-icon {
+      font-size: 40px;
+      line-height: 1;
+    }
+
+    @e message {
+      display: table;
+      height: 40px;
+      margin: 15px 0;
+
+      .van-steps__message-wrapper {
+        display: table-cell;
+        vertical-align: middle;
+      }
+    }
+
+    @e title {
+      font-size: 14px;
+      color: $c-black;
+    }
+
+    @e desc {
+      font-size: 12px;
+      line-height: 1.5;
+      color: $c-gray-dark;
+      max-height: 18px;
+      @mixin multi-ellipsis 1;
+    }
+
+    @e items {
+      margin: 0 0 10px;
+      overflow: hidden;
+      position: relative;
+      padding-bottom: 20px;
+
+      @m alone {
+        padding-top: 10px;
+      }
+    }
+  }
+
+  @b step {
+    font-size: 14px;
+    float: left;
+    position: relative;
+    color: $c-gray-dark;
+
+    @m finish {
+      color: $c-black;
+
+      .van-step__circle,
+      .van-step__line {
+        background-color: $c-green;
+      }
+    }
+
+    @m process {
+      color: $c-black;
+
+      .van-step__circle-container {
+        top: 24px;
+      }
+
+      .van-icon {
+        font-size: 12px;
+        color: $c-green;
+        line-height: 1;
+        display: block;
+      }
+    }
+
+    &:first-child {
+      .van-step__title {
+        transform: none;
+        margin-left: 0;
+      }
+    }
+
+    &:last-child {
+      position: absolute;
+      right: 10px;
+      width: auto;
+
+      .van-step__title {
+        transform: none;
+        margin-left: 0;
+      }
+
+      .van-step__circle-container {
+        left: auto;
+        right: -9px;
+      }
+
+      .van-step__line {
+        width: 0;
+      }
+    }
+
+    .van-step__circle-container {
+      position: absolute;
+      top: 28px;
+      left: -8px;
+      padding: 0 8px;
+      background-color: #fff;
+      z-index: 1;
+    }
+
+    @e circle {
+      display: block;
+      width: 5px;
+      height: 5px;
+      background-color: #888;
+      border-radius: 50%;
+    }
+
+    @e title {
+      font-size: 12px;
+      transform: translate3d(-50%, 0, 0);
+      display: inline-block;
+      margin-left: 3px;
+    }
+
+    @e line {
+      position: absolute;
+      left: 0px;
+      top: 30px;
+      width: 100%;
+      height: 1px;
+      background-color: $c-gray-light;
+    }
+  }
+}