picker component

packages/zanui-css/src/index.pcss

@@ -8,4 +8,5 @@
 @import './field.pcss';
 @import './icon.pcss';
 @import './popup.pcss';
+@import './picker.pcss';
 @import './switch.pcss';

packages/zanui-css/src/picker.pcss

@@ -0,0 +1,73 @@
+@component-namespace z {
+  @b picker {
+    overflow: hidden;
+
+    @e toolbar {
+      height: 40px;
+    }
+
+    @e columns {
+      position: relative;
+      overflow: hidden;
+
+      @m 1 {
+        .z-picker-column {
+          width: 100%;
+        }
+      }
+
+      @m 2 {
+        .z-picker-column {
+          width: 50%;
+        }
+      }
+
+      @m 2 {
+        .z-picker-column {
+          width: 33.333%;
+        }
+      }
+    }
+  }
+
+  @b picker-column {
+    font-size: 18px;
+    overflow: hidden;
+    position: relative;
+    max-height: 100%;
+    text-align: center;
+
+    @e item {
+      height: 44px;
+      line-height: 44px;
+      padding: 0 10px;
+      white-space: nowrap;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #707274;
+      left: 0;
+      top: 0;
+      width: 100%;
+      box-sizing: border-box;
+      transition-duration: .3s;
+      backface-visibility: hidden;
+
+      @m selected {
+        color: #000;
+        transform: translate3d(0, 0, 0) rotateX(0);
+      }
+    }
+  }
+
+  .picker-column-wrapper {
+    transition-duration: 0.3s;
+    transition-timing-function: ease-out;
+    backface-visibility: hidden;
+  }
+
+  .picker-column-wrapper.dragging,
+  .picker-column-wrapper.dragging .picker-item {
+    transition-duration: 0s;
+  }
+}