Merge branch 'master' into dev/badge_search

# Conflicts: # components.json # packages/zanui-css/src/index.css # src/index.js
2025-10-19 01:54:48 +00:00 · 2017-03-01 14:54:32 +08:00
parent 6808b06372 d4950678e6
commit 5b34ea74ec
152 changed files with 76771 additions and 19323 deletions
--- a/packages/zanui-css/package.json
+++ b/packages/zanui-css/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@youzan/zanui-css",
-  "version": "0.0.1",
+  "version": "0.0.7",
  "description": "zanui css.",
  "main": "lib/index.css",
  "style": "lib/index.css",
--- a/packages/zanui-css/src/button.css
+++ b/packages/zanui-css/src/button.css
@@ -1,6 +1,6 @@
-@import "./common/var.pcss";
+@import "./common/var.css";

-@component-namespace z {
+@component-namespace zan {
  @b button {
    position: relative;
    padding: 0;
@@ -53,6 +53,7 @@
    }

    @m normal {
+      padding: 0 10px;
      font-size: 14px;
    }

--- a/packages/zanui-css/src/button_group.css
+++ b/packages/zanui-css/src/button_group.css
@@ -2,19 +2,19 @@
  display: inline-block;
  box-sizing: border-box;
  padding-right: 10px;
-  &::last-child {
+  &:last-child {
    padding-right: 0;
  }
-  .z-button {
+  .zan-button {
    width: 100%;
  }
 }

-@component-namespace z {
+@component-namespace zan {
  @b button-group {
    font-size: 0;

-    > .z-button {
+    > .zan-button {
      margin-right: 10px;
      &::last-child {
        margin-right: 0;
@@ -23,6 +23,7 @@
  }
  @b button-1 {
    @mixin button-wrap;
+    padding-right: 0;
    width: 100%;
  }
  @b button-2 {
--- a/packages/zanui-css/src/card.css
+++ b/packages/zanui-css/src/card.css
@@ -0,0 +1,88 @@
+@import "./mixins/ellipsis.css";
+
+@component-namespace zan {
+  @b card {
+    padding: 5px 15px;
+    background: #FAFAFA;
+    overflow: hidden;
+    position: relative;
+    margin-top: 10px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    @e img {
+      float: left;
+      width: 90px;
+      height: 90px;
+      border: 0;
+    }
+
+    @e content {
+      margin-left: 100px;
+      display: table;
+
+      @when center {
+        display: table;
+        height: 90px;
+
+        .zan-card__info {
+          display: table-cell;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    @e row {
+      overflow: hidden;
+      padding-right: 80px;
+      position: relative;
+    }
+
+    @e title {
+      line-height: 20px;
+      color: #333;
+      max-height: 40px;
+      margin-bottom: 5px;
+      @mixin multi-ellipsis 2;
+    }
+
+    @e desc {
+      font-size: 12px;
+      color: #666;
+      max-height: 20px;
+      @mixin multi-ellipsis 1;
+    }
+
+    @e price {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 80px;
+      text-align: right;
+      font-size: 14px;
+      color: #333;
+    }
+
+    @e num {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 80px;
+      text-align: right;
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e footer {
+      position: absolute;
+      right: 15px;
+      bottom: 5px;
+
+      .zan-button {
+        margin-left: 5px;
+      }
+    }
+  }
+}
--- a/packages/zanui-css/src/cell.css
+++ b/packages/zanui-css/src/cell.css
@@ -1,7 +1,7 @@
-@import "./common/var.pcss";
-@import "./mixins/border_retina.pcss";
+@import "./common/var.css";
+@import "./mixins/border_retina.css";

-@component-namespace z {
+@component-namespace zan {
  @b cell-group {
    padding-left: 10px;
    position: relative;
@@ -19,7 +19,7 @@
    box-sizing: border-box;
    line-height: 22px;
    background-color: $c-white;
-    color: #333;
+    color: $c-black;
    font-size: 14px;
    text-decoration: none;

@@ -42,7 +42,7 @@
      display: block;
      font-size: 12px;
      line-height: 1.2;
-      color: #666;
+      color: $c-gray-darker;
    }

    @e value {
@@ -52,14 +52,18 @@
      @when link {
        margin-right: 20px;
      }
+
+      @when alone {
+        float: left;
+      }
    }

-    .zui-icon-arrow {
+    .zan-icon-arrow {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
-      color: #999;
+      color: $c-gray-dark;
      font-size: 12px;
    }
  }
--- a/packages/zanui-css/src/checkbox.css
+++ b/packages/zanui-css/src/checkbox.css
@@ -0,0 +1,44 @@
+@import "./common/var.css";
+
+@component-namespace zan {
+  @b checkbox {
+    @when disabled {
+      .zan-icon {
+        color: #d1dbe5;
+      }
+    }
+
+    @e input {
+      position: relative;
+      height: 22px;
+      margin-right: 15px;
+    }
+
+    @e control {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 22px;
+      height: 22px;
+      opacity: 0;
+      margin: 0;
+    }
+
+    @e label {
+      line-height: 22px;
+    }
+
+    .zan-icon {
+      font-size: 22px;
+      line-height: 1;
+    }
+
+    .zan-icon-checked {
+      color: $c-green;
+    }
+
+    .zan-icon-check {
+      color: $c-gray-dark;
+    }
+  }
+}
--- a/packages/zanui-css/src/common/var.pcss
+++ b/packages/zanui-css/src/common/var.pcss
@@ -33,7 +33,7 @@ $button-disabled-border-color: #cacaca;

 :root{

-  /* z-index
+  /* zan-index
 -------------------------- */
  --index-normal: 1;
  --index-top: 1000;
--- a/packages/zanui-css/src/dialog.css
+++ b/packages/zanui-css/src/dialog.css
@@ -1,6 +1,6 @@
-@import "./mixins/border_retina.pcss";
+@import "./mixins/border_retina.css";

-@component-namespace z {
+@component-namespace zan {
  @b dialog-wrapper {
    position: absolute;
  }
@@ -52,11 +52,11 @@
      overflow: hidden;

      @when twobtn {
-        .z-dialog__btn {
+        .zan-dialog__btn {
          width: 50%;
        }

-        .z-dialog__cancel {
+        .zan-dialog__cancel {
          &::after {
            @mixin border-retina (right);
          }
--- a/packages/zanui-css/src/field.css
+++ b/packages/zanui-css/src/field.css
@@ -1,42 +1,42 @@
-@import "./common/var.pcss";
-@import "./mixins/border_retina.pcss";
+@import "./common/var.css";
+@import "./mixins/border_retina.css";

-@component-namespace z {
+@component-namespace zan {
  @b field {
    width: 100%;
    overflow: hidden;

    @when textarea {
-      .z-field__control {
+      .zan-field__control {
        min-height: 60px;
      }
    }

    @when nolabel {
-      .z-cell__title {
+      .zan-cell__title {
        display: none;
      }

-      .z-cell__value {
+      .zan-cell__value {
        width: 100%;
        padding-left: 0;
      }
    }

-    .z-cell__title,
-    .z-cell__value {
+    .zan-cell__title,
+    .zan-cell__value {
      float: none;
      box-sizing: border-box;
    }

-    .z-cell__title {
+    .zan-cell__title {
      width: 90px;
      position: absolute;
      top: 10px;
      left: 0;
    }

-    .z-cell__value {
+    .zan-cell__value {
      width: 100%;
      padding-left: 90px;
    }
--- a/packages/zanui-css/src/icon.css
+++ b/packages/zanui-css/src/icon.css
@@ -9,10 +9,10 @@
       url('https://b.yzcdn.cn/zui/font/zuiicon-b37948cf5d.ttf') format('truetype')
 }

-.zui-icon {
+.zan-icon {
    display: inline-block;
 }
-.zui-icon::before {
+.zan-icon::before {
  font-family: "zuiicon" !important;
  font-style: normal;
  font-weight: normal;
@@ -39,7 +39,7 @@

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  -mozan-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
@@ -47,20 +47,20 @@
 /* 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'; } /* '' */
+.zan-icon-album:before { content: '\e800'; } /* '' */
+.zan-icon-arrow:before { content: '\e801'; } /* '' */
+.zan-icon-camera:before { content: '\e802'; } /* '' */
+.zan-icon-certificate:before { content: '\e803'; } /* '' */
+.zan-icon-check:before { content: '\e804'; } /* '' */
+.zan-icon-checked:before { content: '\e805'; } /* '' */
+.zan-icon-close:before { content: '\e806'; } /* '' */
+.zan-icon-gift:before { content: '\e807'; } /* '' */
+.zan-icon-home:before { content: '\e808'; } /* '' */
+.zan-icon-location:before { content: '\e809'; } /* '' */
+.zan-icon-message:before { content: '\e80a'; } /* '' */
+.zan-icon-send:before { content: '\e80b'; } /* '' */
+.zan-icon-shopping-cart:before { content: '\e80c'; } /* '' */
+.zan-icon-sign:before { content: '\e80d'; } /* '' */
+.zan-icon-store:before { content: '\e80e'; } /* '' */
+.zan-icon-topay:before { content: '\e80f'; } /* '' */
+.zan-icon-tosend:before { content: '\e810'; } /* '' */
--- a/packages/zanui-css/src/index.css
+++ b/packages/zanui-css/src/index.css
@@ -4,6 +4,7 @@
@import './button.css';
@import './button_group.css';
@import './cell.css';
+@import './card.css';
@import './dialog.css';
@import './field.css';
@import './icon.css';
@@ -14,4 +15,7 @@
@import './switch.css';
@import './badge.css';
@import './search.css';
-
+@import './panel.css';
+@import './steps.css';
+@import './tag.css';
+@import './checkbox.css';
--- a/packages/zanui-css/src/loading.css
+++ b/packages/zanui-css/src/loading.css
@@ -19,7 +19,7 @@
  }
 }

-@component-namespace z {
+@component-namespace zan {
  @b loading { 
    height: 30px;
    width: 30px;
--- a/packages/zanui-css/src/mixins/border_retina.pcss
+++ b/packages/zanui-css/src/mixins/border_retina.pcss
--- a/packages/zanui-css/src/mixins/ellipsis.css
+++ b/packages/zanui-css/src/mixins/ellipsis.css
@@ -0,0 +1,7 @@
+@define-mixin multi-ellipsis $lines {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+}
--- a/packages/zanui-css/src/panel.css
+++ b/packages/zanui-css/src/panel.css
@@ -0,0 +1,36 @@
+@component-namespace zan {
+  @b panel {
+    background: #fff;
+    border-top: 1px solid #E5E5E5;
+    border-bottom: 1px solid #E5E5E5;
+
+    @e header {
+      padding: 10px 15px;
+      position: relative;
+      border-bottom: 1px solid #E5E5E5;
+    }
+
+    @e title {
+      font-size: 14px;
+      color: #333;
+    }
+
+    @e desc {
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e status {
+      font-size: 14px;
+      position: absolute;
+      top: 10px;
+      right: 15px;
+      color: #FF4444;
+    }
+
+    @e footer {
+      border-top: 1px solid #E5E5E5;
+      padding: 10px 15px;
+    }
+  }
+}
--- a/packages/zanui-css/src/picker.css
+++ b/packages/zanui-css/src/picker.css
@@ -1,4 +1,4 @@
-@component-namespace z {
+@component-namespace zan {
  @b picker {
    overflow: hidden;

@@ -11,26 +11,26 @@
      overflow: hidden;

      @m 1 {
-        .z-picker-column {
+        .zan-picker-column {
          width: 100%;
        }
      }

      @m 2 {
-        .z-picker-column {
+        .zan-picker-column {
          width: 50%;
        }
      }

      @m 3 {
-        .z-picker-column {
+        .zan-picker-column {
          width: 33.333%;
        }
      }
    }
  }

-  .z-picker-center-highlight {
+  .zan-picker-center-highlight {
    box-sizing: border-box;
    position: absolute;
    left: 0;
@@ -40,26 +40,26 @@
    pointer-events: none;
  }

-  .z-picker-center-highlight:before,
-  .z-picker-center-highlight:after {
+  .zan-picker-center-highlight:before,
+  .zan-picker-center-highlight:after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #eaeaea;
    display: block;
-    z-index: 15;
+    zan-index: 15;
    transform: scaleY(0.5);
  }

-  .z-picker-center-highlight:before {
+  .zan-picker-center-highlight:before {
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
  }

-  .z-picker-center-highlight:after {
+  .zan-picker-center-highlight:after {
    left: 0;
    bottom: 0;
    right: auto;
--- a/packages/zanui-css/src/popup.css
+++ b/packages/zanui-css/src/popup.css
@@ -1,4 +1,4 @@
-@component-namespace z {
+@component-namespace zan {
  @b modal {
    position: fixed;
    width: 100%;
--- a/packages/zanui-css/src/radio.css
+++ b/packages/zanui-css/src/radio.css
@@ -1,5 +1,44 @@
-@component-namespace z {
-  @b radio {
+@import "./common/var.css";

+@component-namespace zan {
+  @b radio {
+    @when disabled {
+      .zan-icon {
+        color: #d1dbe5;
+      }
+    }
+
+    @e input {
+      position: relative;
+      height: 22px;
+      margin-right: 15px;
+    }
+
+    @e control {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 22px;
+      height: 22px;
+      opacity: 0;
+      margin: 0;
+    }
+
+    @e label {
+      line-height: 22px;
+    }
+
+    .zan-icon {
+      font-size: 22px;
+      line-height: 1;
+    }
+
+    .zan-icon-checked {
+      color: $c-green;
+    }
+
+    .zan-icon-check {
+      color: $c-gray-dark;
+    }
  }
 }
--- a/packages/zanui-css/src/steps.css
+++ b/packages/zanui-css/src/steps.css
@@ -0,0 +1,5 @@
+@component-namespace zan {
+  @b steps {
+    color: red;
+  }
+}
--- a/packages/zanui-css/src/switch.css
+++ b/packages/zanui-css/src/switch.css
@@ -1,4 +1,4 @@
-@component-namespace z {
+@component-namespace zan {
  @component switch { 
    height: 29px;
    width: 49px;
--- a/packages/zanui-css/src/tag.css
+++ b/packages/zanui-css/src/tag.css
@@ -0,0 +1,66 @@
+@import "./common/var.css";
+@import "./mixins/border_retina.css";
+
+@component-namespace zan {
+  @b tag {
+    position: relative;
+    display: inline-block;
+    line-height: 14px;
+    padding: 1px 5px;
+    border-radius: 2px;
+    font-size: 10px;
+    background: $c-gray;
+    color: $c-white;
+
+    &::after {
+      @mixin border-retina (top, right, bottom, left), $c-gray;
+      border-radius: 4px;
+    }
+
+    @m success {
+      background: $c-green;
+
+      &::after {
+        border-color: $c-green;
+      }
+      @when plain {
+        color: $c-green;
+      }
+    }
+
+    @m danger {
+      background: $button-danger-background-color;
+
+      &::after {
+        border-color: $button-danger-background-color;
+      }
+      @when plain {
+        color: $button-danger-background-color;
+      }
+    }
+
+    @m primary {
+      background: $c-blue;
+
+      &::after {
+        border-color: $c-blue;
+      }
+      @when plain {
+        color: $c-blue;
+      }
+    }
+
+    @when plain {
+      background: $c-white;
+      color: $c-gray;
+    }
+
+    @when mark {
+      border-radius: 0 8px 8px 0;
+
+      &::after {
+        border-radius: 0 16px 16px 0;
+      }
+    }
+  }
+}