Merge branch 'master' of gitlab.qima-inc.com:fe/oxygen

packages/zanui-css/src/cell.pcss

@@ -2,7 +2,7 @@
 @import "./mixins/border_retina.pcss";
 
 @component-namespace z {
-  @component cell-group {
+  @b cell-group {
     padding-left: 10px;
     position: relative;
 
@@ -11,7 +11,7 @@
     }
   }
 
-  @component cell {
+  @b cell {
     display: block;
     overflow: hidden;
     position: relative;
@@ -33,19 +33,19 @@
       }
     }
 
-    @descendent title {
+    @empty-cells: show title {
       float: left;
       overflow: hidden;
     }
 
-    @descendent label {
+    @e label {
       display: block;
       font-size: 12px;
       line-height: 1.2;
       color: #666;
     }
 
-    @descendent value {
+    @e value {
       float: right;
       overflow: hidden;
 

packages/zanui-css/src/field.pcss

@@ -2,46 +2,46 @@
 @import "./mixins/border_retina.pcss";
 
 @component-namespace z {
-  @component field {
+  @b field {
     width: 100%;
     overflow: hidden;
 
     @when textarea {
-      .z-field-control {
+      .z-field__control {
         min-height: 60px;
       }
     }
 
     @when nolabel {
-      .z-cell-title {
+      .z-cell__title {
         display: none;
       }
 
-      .z-cell-value {
+      .z-cell__value {
         width: 100%;
         padding-left: 0;
       }
     }
 
-    .z-cell-title,
-    .z-cell-value {
+    .z-cell__title,
+    .z-cell__value {
       float: none;
       box-sizing: border-box;
     }
 
-    .z-cell-title {
+    .z-cell__title {
       width: 90px;
       position: absolute;
       top: 10px;
       left: 0;
     }
 
-    .z-cell-value {
+    .z-cell__value {
       width: 100%;
       padding-left: 90px;
     }
 
-    @descendent control {
+    @e control {
       border: 0;
       font-size: 14px;
       line-height: 22px;

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,110 @@
+@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 3 {
+        .z-picker-column {
+          width: 33.333%;
+        }
+      }
+    }
+  }
+
+  .z-picker-center-highlight {
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    top: 50%;
+    margin-top: -18px;
+    pointer-events: none;
+  }
+
+  .z-picker-center-highlight:before,
+  .z-picker-center-highlight:after {
+    content: '';
+    position: absolute;
+    height: 1px;
+    width: 100%;
+    background-color: #eaeaea;
+    display: block;
+    z-index: 15;
+    transform: scaleY(0.5);
+  }
+
+  .z-picker-center-highlight:before {
+    left: 0;
+    top: 0;
+    bottom: auto;
+    right: auto;
+  }
+
+  .z-picker-center-highlight:after {
+    left: 0;
+    bottom: 0;
+    right: auto;
+    top: auto;
+  }
+
+  @b picker-column {
+    font-size: 18px;
+    overflow: hidden;
+    position: relative;
+    max-height: 100%;
+    float: left;
+    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;
+  }
+}

packages/zanui-css/src/radio.pcss

@@ -0,0 +1,5 @@
+@component-namespace z {
+  @b radio {
+
+  }
+}

packages/zanui-css/src/switch.pcss

@@ -17,28 +17,23 @@
       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);
       @when on {
         left: 0;
+        transition: all .5s ease-in-out;
       }
 
       @when off {
-        right: 0;
+        left: 20px;
+        transition: all .5s ease-in-out;
       }
-
     }
 
     @when on {
       background-color: #44db5e;
       border-color: #44db5e;
-      @descendent node {
-        left: 0;
-      }
     }
 
     @when off {
       background-color: #fff;
       border-color: rgba(0, 0, 0, .1);
-      @descendent node {
-        right: 0;
-      }
     }
 
     @when loading {
@@ -46,8 +41,13 @@
     }
 
     @when disabled {
-      background-color: #f2f2f2;
-      border-color: rgba(0, 0, 0, .1);
+      @when off {
+        background-color: #f2f2f2;
+        border-color: rgba(0, 0, 0, .1);
+      }
+      @when on {
+        background-color: #a6e7b1;
+      }
     }
   }
 }