fix: rename css package

packages/zanui-css/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/zenui",
+  "version": "0.0.1",
+  "description": "wap component style",
+  "main": "./lib/index.js",
+  "author": "niunai",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/zanui-css/src/button.pcss

@@ -0,0 +1,67 @@
+@import "./common/var.pcss";
+
+@component-namespace z {
+  @component button {
+    position: relative;
+    display: block;
+    height: 45px;
+    border-radius: 4px;
+    border: 0;
+    box-sizing: border-box;
+    font-size: 16px;
+    text-align: center;
+    appearance: none;
+    outline: 0;
+    overflow: hidden;
+
+    &::after {
+      content: " ";
+      position: absolute 0 0 0 0;
+      background-color: #000;
+      opacity: 0;
+    }
+
+    &:not(.is-disabled):active::after {
+      opacity: .3;
+    }
+
+    @modifier default {
+      color: $button-default-color;
+      background-color: $button-default-background-color;
+      border: 1px solid $button-default-border-color;
+    }
+
+    @modifier primary {
+      color: $button-primary-color;
+      background-color: $button-primary-background-color;
+      border: 1px solid $button-primary-border-color;
+    }
+
+    @modifier danger {
+      color: $button-danger-color;
+      background-color: $button-danger-background-color;
+      border: 1px solid $button-danger-border-color;
+    }
+
+    @modifier large {
+      display: block;
+      width: 100%;
+    }
+
+    @modifier normal {
+      display: inline-block;
+      padding: 0 12px;
+    }
+
+    @modifier small {
+      display: inline-block;
+      font-size: 14px;
+      padding: 0 12px;
+      height: 33px;
+    }
+
+    @when disabled {
+      opacity: .6;
+    }
+  }
+}

packages/zanui-css/src/cell.pcss

@@ -0,0 +1,66 @@
+@import "./common/var.pcss";
+@import "./mixins/border_retina.pcss";
+
+@component-namespace z {
+  @component cell-group {
+    padding-left: 10px;
+    position: relative;
+
+    &::after {
+      @mixin border-retina (top, bottom);
+    }
+  }
+
+  @component cell {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    padding: 10px 10px 10px 0;
+    box-sizing: border-box;
+    line-height: 22px;
+    background-color: $c-white;
+    color: #333;
+    font-size: 14px;
+    text-decoration: none;
+
+    &::after {
+      @mixin border-retina (bottom);
+    }
+
+    &:last-child {
+      &::after {
+        border-bottom: 0;
+      }
+    }
+
+    @descendent title {
+      float: left;
+      overflow: hidden;
+    }
+
+    @descendent label {
+      display: block;
+      font-size: 12px;
+      line-height: 1.2;
+      color: #666;
+    }
+
+    @descendent value {
+      float: right;
+      overflow: hidden;
+
+      @when link {
+        margin-right: 20px;
+      }
+    }
+
+    .zui-icon-arrow {
+      position: absolute;
+      top: 50%;
+      right: 10px;
+      transform: translateY(-50%);
+      color: #999;
+      font-size: 12px;
+    }
+  }
+}

packages/zanui-css/src/common/var.pcss

@@ -0,0 +1,96 @@
+/* UI标准色 */
+$c-white: #fff;
+$c-black: #333;
+$c-green: #06bf04;
+$c-green-wx: #4b0;
+$c-red: #ed5050;
+$c-gray: #c9c9c9;
+$c-gray-light: #e5e5e5;
+$c-gray-darker: #666;
+$c-gray-dark: #999;
+$c-yellow: #f09000;
+$c-yellow-light: #fcff00;
+$c-orange: #f60;
+$c-orange-dark: #f15a0c;
+$c-blue: #38f;
+
+$c-background: #f8f8f8;
+
+/* 按钮颜色 */
+$button-primary-color: $c-white;
+$button-primary-background-color: $c-green-wx;
+$button-primary-border-color: #0a0;
+$button-default-color: $c-black;
+$button-default-background-color: $c-white;
+$button-default-border-color: #bbb;
+$button-danger-color: $c-white;
+$button-danger-background-color: #f44;
+$button-danger-border-color: #e33;
+
+:root{
+
+  /* z-index
+ -------------------------- */
+  --index-normal: 1;
+  --index-top: 1000;
+  --index-popper: 2000;
+
+  /* Link
+  -------------------------- */
+  --link-color: #475669;
+  --link-hover-color: var(--color-primary);
+
+  /* Border
+  -------------------------- */
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-color-base: var(--color-grey);
+  --border-color-hover: #8492a6;
+  --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
+  --border-radius-base: 4px;
+  --border-radius-small: 2px;
+  --border-radius-circle: 100%;
+  --shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light);
+
+  /* Box-shadow
+  -------------------------- */
+  --box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+  --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
+
+  /* Fill
+  -------------------------- */
+  --fill-base: var(--color-white);
+
+  /* Font
+  -------------------------- */
+  --font-size-base: 14px;
+  --font-color-base: #1f2d3d;
+  --font-color-disabled-base: #bbb;
+
+  /* Size
+  -------------------------- */
+  --size-base: 14px;
+
+
+  /* Disable base
+  -------------------------- */
+  --disabled-fill-base: #EFF2F7;
+  --disabled-color-base: #bbb;
+  --disabled-border-base: #D3DCE6;
+
+  /* Icon
+  -------------------------- */
+  --icon-color: #666;
+
+  /* Button
+  -------------------------- */
+
+  --button-default-color: #656b79;
+  --button-default-background-color: #f6f8fa;
+  --button-default-plain-color: #5a5a5a;
+  --button-default-box-shadow: 0 0 1px #b8bbbf;
+  --button-primary-color: #fff;
+  --button-primary-background-color: #06BF04;
+  --button-danger-color: #fff;
+  --button-danger-background-color: #ef4f4f;
+}

packages/zanui-css/src/dialog.pcss

@@ -0,0 +1,95 @@
+@import "./mixins/border_retina.pcss";
+
+@component-namespace z {
+  @component dialog-wrapper {
+    position: absolute;
+  }
+
+  @component dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    background-color: #fff;
+    width: 85%;
+    border-radius: 4px;
+    font-size: 16px;
+    overflow: hidden;
+    backface-visibility: hidden;
+    transition: .2s;
+
+    @descendent header {
+      padding: 15px 0 0;
+    }
+
+    @descendent content {
+      padding: 15px 20px;
+      min-height: 36px;
+      position: relative;
+
+      &::after {
+        @mixin border-retina (bottom);
+      }
+    }
+
+    @descendent title {
+      text-align: center;
+      padding-left: 0;
+      margin-bottom: 0;
+      font-size: 16px;
+      color: #333;
+    }
+
+    @descendent message {
+      color: #999;
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    @descendent footer {
+      font-size: 14px;
+      overflow: hidden;
+    }
+
+    .is-twobtn {
+      .z-dialog-btn {
+        width: 50%;
+      }
+
+      .z-dialog-cancel {
+        &::after {
+          @mixin border-retina (right);
+        }
+      }
+    }
+
+    @descendent btn {
+      line-height: 40px;
+      border: 0;
+      background-color: #fff;
+      float: left;
+      box-sizing: border-box;
+      text-align: center;
+      position: relative;
+    }
+
+    @descendent cancel {
+      color: #333;
+    }
+
+    @descendent confirm {
+      color: #00C000;
+      width: 100%;
+    }
+  }
+}
+
+.dialog-bounce-enter {
+  opacity: 0;
+  transform: translate3d(-50%, -50%, 0) scale(0.7);
+}
+.dialog-bounce-leave-active {
+  opacity: 0;
+  transform: translate3d(-50%, -50%, 0) scale(0.9);
+}

packages/zanui-css/src/field.pcss

@@ -0,0 +1,54 @@
+@import "./common/var.pcss";
+@import "./mixins/border_retina.pcss";
+
+@component-namespace z {
+  @component field {
+    width: 100%;
+    overflow: hidden;
+
+    @when textarea {
+      .z-field-control {
+        min-height: 60px;
+      }
+    }
+
+    @when nolabel {
+      .z-cell-title {
+        display: none;
+      }
+
+      .z-cell-value {
+        width: 100%;
+        padding-left: 0;
+      }
+    }
+
+    .z-cell-title,
+    .z-cell-value {
+      float: none;
+      box-sizing: border-box;
+    }
+
+    .z-cell-title {
+      width: 90px;
+      position: absolute;
+      top: 10px;
+      left: 0;
+    }
+
+    .z-cell-value {
+      width: 100%;
+      padding-left: 90px;
+    }
+
+    @descendent control {
+      border: 0;
+      font-size: 14px;
+      line-height: 22px;
+      display: block;
+      width: 100%;
+      resize: none;
+      outline: 0;
+    }
+  }
+}

packages/zanui-css/src/icon.pcss

@@ -0,0 +1,66 @@
+/* DO NOT EDIT! Generated by fount */
+
+@font-face {
+  font-family: 'zuiicon';
+  src: url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.eot');
+  src: url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.eot?#iefix') format('embedded-opentype'),
+       url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.woff2') format('woff2'),
+       url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.woff') format('woff'),
+       url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype')
+}
+
+.zui-icon {
+    display: inline-block;
+}
+.zui-icon::before {
+  font-family: "zuiicon" !important;
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  text-align: center;
+
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  /* margin-left: .2em; */
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+/* DO NOT EDIT! Generated by fount */
+
+
+.zui-icon-album:before { content: '\e800'; } /* '' */
+.zui-icon-arrow:before { content: '\e801'; } /* '' */
+.zui-icon-camera:before { content: '\e802'; } /* '' */
+.zui-icon-certificate:before { content: '\e803'; } /* '' */
+.zui-icon-check:before { content: '\e804'; } /* '' */
+.zui-icon-checked:before { content: '\e805'; } /* '' */
+.zui-icon-close:before { content: '\e806'; } /* '' */
+.zui-icon-gift:before { content: '\e807'; } /* '' */
+.zui-icon-home:before { content: '\e808'; } /* '' */
+.zui-icon-location:before { content: '\e809'; } /* '' */
+.zui-icon-message:before { content: '\e80a'; } /* '' */
+.zui-icon-send:before { content: '\e80b'; } /* '' */
+.zui-icon-shopping-cart:before { content: '\e80c'; } /* '' */
+.zui-icon-sign:before { content: '\e80d'; } /* '' */
+.zui-icon-store:before { content: '\e80e'; } /* '' */
+.zui-icon-topay:before { content: '\e80f'; } /* '' */
+.zui-icon-tosend:before { content: '\e810'; } /* '' */

packages/zanui-css/src/index.pcss

@@ -0,0 +1,10 @@
+/**
+  css组件库入口，组装成css组件库
+ */
+@import './button.pcss';
+@import './cell.pcss';
+@import './dialog.pcss';
+@import './field.pcss';
+@import './icon.pcss';
+@import './popup.pcss';
+@import './switch.pcss';

packages/zanui-css/src/mixins/border_retina.pcss

@@ -0,0 +1,20 @@
+$border-poses: top, right, bottom, left;
+
+@define-mixin border-retina $poses: $border-poses, $border-retina-color: #e5e5e5 {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  transform: scale(.5);
+  transform-origin: left top;
+  -webkit-perspective: 1000;
+  -webkit-backface-visibility: hidden;
+  pointer-events: none;
+
+  @each $pos in $poses {
+    border-$(pos): 1px solid $border-retina-color;
+  }
+}

packages/zanui-css/src/popup.pcss

@@ -0,0 +1,75 @@
+.v-modal {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.701961);
+}
+
+@component-namespace z {
+  @component popup {
+    position: fixed;
+    background-color: #fff;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    backface-visibility: hidden;
+    transition: .2s ease-out;
+
+    @modifier top {
+      top: 0;
+      right: auto;
+      bottom: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+    }
+
+    @modifier right {
+      top: 50%;
+      right: 0;
+      bottom: auto;
+      left: auto;
+      transform: translate3d(0, -50%, 0);
+    }
+
+    @modifier bottom {
+      top: auto;
+      bottom: 0;
+      right: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+    }
+
+    @modifier left {
+      top: 50%;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      transform: translate3d(0, -50%, 0);
+    }
+  }
+}
+
+.popup-slide-top-enter,
+.popup-slide-top-leave-active {
+  transform: translate3d(-50%, -100%, 0);
+}
+
+.popup-slide-right-enter,
+.popup-slide-right-leave-active {
+  transform: translate3d(100%, -50%, 0);
+}
+
+.popup-slide-bottom-enter,
+.popup-slide-bottom-leave-active {
+  transform: translate3d(-50%, 100%, 0);
+}
+
+.popup-slide-left-enter, .popup-slide-left-leave-active {
+  transform: translate3d(-100%, -50%, 0);
+}
+
+.popup-fade-enter, .popup-fade-leave-active {
+  opacity: 0;
+}

packages/zanui-css/src/switch.pcss

@@ -0,0 +1,53 @@
+@component-namespace z {
+  @component switch { 
+    height: 29px;
+    width: 49px;
+    display: inline-block;
+    border-radius: 16px;
+    position: relative;
+    border: 1px solid;
+
+    @descendent node {
+      width: 27px;
+      height: 27px;
+      border-radius: 100%;
+      background-color: #fff;
+      border: .5px solid rgba(0, 0, 0, .1);
+      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);
+      @when on {
+        left: 0;
+      }
+
+      @when off {
+        right: 0;
+      }
+
+    }
+
+    @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 {
+        /* TODO */
+    }
+
+    @when disabled {
+      background-color: #f2f2f2;
+      border-color: rgba(0, 0, 0, .1);
+    }
+  }
+}