zartui 0.1.113 → 2.0.1

package/lib/tabs/index.css

@@ -1 +1 @@
-.zt-tab{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;padding:0 4px;color:#646566;font-size:14px;line-height:20px;cursor:pointer}.zt-tab--active{color:rgba(0,0,0,.6);font-weight:700}.zt-tab--disabled{color:#c8c9cc;cursor:not-allowed}.zt-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.zt-tab__text-wrapper{position:relative}.zt-tabs{position:relative}.zt-tabs__wrap{overflow:hidden}.zt-tabs__wrap--page-top{position:fixed}.zt-tabs__wrap--content-bottom{top:auto;bottom:0}.zt-tabs__wrap--scrollable .zt-tab{-webkit-box-flex:1;-webkit-flex:1 0 auto;flex:1 0 auto;padding:0 12px}.zt-tabs__wrap--scrollable .zt-tabs__nav{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__wrap--scrollable .zt-tabs__nav::-webkit-scrollbar{display:none}.zt-tabs__nav{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;background-color:#fff;-webkit-user-select:none;user-select:none}.zt-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:15px}.zt-tabs__nav--line.zt-tabs__nav--complete{padding-right:8px;padding-left:8px}.zt-tabs__nav--card{box-sizing:border-box;height:30px;margin:0 16px;border-radius:2px}.zt-tabs__nav--card::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:1px solid rgba(0,0,0,.2);-webkit-transform:scale(.5);transform:scale(.5)}.zt-tabs__nav--card .zt-tab{color:#000}.zt-tabs__nav--card .zt-tab:not(:last-child)::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:0;right:0;bottom:0;border-right:1px solid rgba(0,0,0,.2);-webkit-transform:scaleX(.5);transform:scaleX(.5)}.zt-tabs__nav--card .zt-tab.zt-tab--active{color:#fff;background-color:#0091fa;border:1px solid #0091fa}.zt-tabs__nav--card .zt-tab--disabled{color:#c8c9cc}.zt-tabs__line{position:absolute;bottom:15px;left:0;z-index:1;width:40px;height:3px;background-color:#0091fa}.zt-tabs__track{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;width:100%;height:100%;will-change:left}.zt-tabs__content--animated{overflow:hidden}.zt-tabs--line .zt-tabs__wrap{height:44px}.zt-tabs--card>.zt-tabs__wrap{height:30px}
+.zt-tab{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;padding:0 16px;color:rgba(45,75,115,.6);font-size:14px;line-height:20px;cursor:pointer}.zt-tab--active{color:#2d4b73;font-weight:700;font-size:16px}.zt-tab--disabled{color:#c8c9cc;cursor:not-allowed}.zt-tab__text--ellipsis{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.zt-tab__text-wrapper{position:relative}.zt-tabs{position:relative}.zt-tabs__wrap{overflow:hidden}.zt-tabs__wrap--page-top{position:fixed}.zt-tabs__wrap--content-bottom{top:auto;bottom:0}.zt-tabs__wrap--scrollable .zt-tab{-webkit-box-flex:1;-webkit-flex:1 0 auto;flex:1 0 auto;padding:0 12px}.zt-tabs__wrap--scrollable .zt-tabs__nav{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.zt-tabs__wrap--scrollable .zt-tabs__nav::-webkit-scrollbar{display:none}.zt-tabs__nav{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;background-color:#f5faff;-webkit-user-select:none;user-select:none}.zt-tabs__nav--line{box-sizing:content-box;height:100%;padding-bottom:15px}.zt-tabs__nav--line.zt-tabs__nav--complete{padding-right:8px;padding-left:8px}.zt-tabs__nav--card{-webkit-box-flex:1;-webkit-flex:1;flex:1;margin:0 60px;-webkit-justify-content:space-around;justify-content:space-around;-webkit-box-align:center;-webkit-align-items:center;align-items:center;box-sizing:border-box;height:32px;background:rgba(45,75,115,.04);box-shadow:inset 4px 4px 8px 0 rgba(45,75,115,.1);border-radius:16px}.zt-tabs__nav--card .zt-tab{color:#000}.zt-tabs__nav--card .zt-tab.zt-tab--active{height:24px;color:#fff;font-size:14px;background-image:-webkit-linear-gradient(top,#3cafff 0,#0091fa 100%);background-image:linear-gradient(180deg,#3cafff 0,#0091fa 100%);box-shadow:0 2px 4px 0 rgba(0,145,250,.24);border-radius:14px}.zt-tabs__nav--card .zt-tab--disabled{color:#c8c9cc}.zt-tabs__line{position:absolute;bottom:15px;left:0;z-index:1;width:12px;height:4px;background-color:#0091fa;border-radius:2px}.zt-tabs__track{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;width:100%;height:100%;will-change:left}.zt-tabs__content--animated{overflow:hidden}.zt-tabs--line .zt-tabs__wrap{height:44px}.zt-tabs--card>.zt-tabs__wrap{height:32px}

package/lib/tabs/index.js

@@ -219,11 +219,10 @@ var _default2 = createComponent({
         }
 
         var title = titles[_this4.currentIndex].$el;
-        var lineWidth = _this4.lineWidth,
-            lineHeight = _this4.lineHeight;
+        var lineHeight = _this4.lineHeight;
         var left = title.offsetLeft + title.offsetWidth / 2;
         var lineStyle = {
-          width: (0, _utils.addUnit)(title.offsetWidth),
+          // width: addUnit(title.offsetWidth),
           backgroundColor: _this4.color,
           transform: "translateX(" + left + "px) translateX(-50%)"
         };
@@ -422,7 +421,6 @@ var _default2 = createComponent({
 
     var Wrap = h("div", {
       "ref": "wrap",
-      "style": wrapStyle,
       "class": [bem('wrap', {
         scrollable: scrollable
       }), (_ref = {}, _ref[_constant.BORDER_TOP_BOTTOM] = type === 'line' && this.border, _ref)]

package/lib/tabs/index.less

@@ -4,12 +4,11 @@
 .zt-tab {
   position: relative;
   display: flex;
-  flex: 1;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: 0 @padding-base;
-  color: @tab-text-color;
+  padding: 0 @padding-md;
+  color: @text-color-1;
   font-size: @tab-font-size;
   line-height: @tab-line-height;
   cursor: pointer;
@@ -17,6 +16,7 @@
   &--active {
     color: @tab-active-text-color;
     font-weight: @font-weight-bold;
+    font-size: 16px;
   }
 
   &--disabled {
@@ -74,7 +74,8 @@
   &__nav {
     position: relative;
     display: flex;
-    background-color: @tabs-nav-background-color;
+    justify-content: flex-start;
+    background-color: #f5faff;
     user-select: none;
 
     &--line {
@@ -89,26 +90,27 @@
     }
 
     &--card {
+      flex: 1;
+      margin: 0 60px;
+      justify-content: space-around;
+      align-items: center;
       box-sizing: border-box;
       height: @tabs-card-height;
-      margin: 0 @padding-md;
-      border-radius: @border-radius-sm;
+      background: rgba(45,75,115,0.04);
+      box-shadow: inset 4px 4px 8px 0 rgba(45,75,115,0.10);
+      border-radius: 16px;
 
-      &::after {
-        .hairline-surround(rgba(0, 0, 0, 0.2))
-      }
 
       .zt-tab {
         color: @black;
 
-        &:not(:last-child)::after {
-          .hairline-right(rgba(0, 0, 0, 0.2))
-        }
-
         &.zt-tab--active {
+          height: 24px;
           color: @white;
-          background-color: @tabs-default-color;
-          border: @border-width-base solid @tabs-default-color;
+          font-size: @tab-font-size;
+          background-image: linear-gradient(180deg, #3CAFFF 0%, #0091FA 100%);
+          box-shadow: 0 2px 4px 0 rgba(0,145,250,0.24);
+          border-radius: 14px;
         }
 
         &--disabled {
@@ -126,6 +128,7 @@
     width: @tabs-bottom-bar-width;
     height: @tabs-bottom-bar-height;
     background-color: @tabs-bottom-bar-color;
+    border-radius: 2px;
   }
 
   &__track {

package/lib/toast/index.css

@@ -1 +1 @@
-.zt-toast{position:fixed;top:50%;left:50%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:content-box;width:88px;max-width:70%;min-height:84px;padding:16px;color:#fff;font-size:14px;line-height:20px;white-space:pre-wrap;text-align:center;word-break:break-all;background-color:rgba(0,0,0,.8);border-radius:4px;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.zt-toast--unclickable{overflow:hidden}.zt-toast--unclickable *{pointer-events:none}.zt-toast--html,.zt-toast--text{width:-webkit-fit-content;width:fit-content;min-width:96px;min-height:0;padding:8px 12px}.zt-toast--html .zt-toast__text,.zt-toast--text .zt-toast__text{margin-top:0}.zt-toast--top{top:20%}.zt-toast--bottom{top:auto;bottom:20%}.zt-toast__icon{font-size:36px}.zt-toast__loading{padding:4px;color:#fff}.zt-toast__text{margin-top:4px}.zt-toast--fail svg,.zt-toast--success svg{width:36px;height:36px}
+.zt-toast{position:fixed;top:50%;left:50%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:content-box;width:88px;max-width:70%;min-height:84px;padding:16px;color:#fff;font-size:14px;line-height:20px;white-space:pre-wrap;text-align:center;word-break:break-all;background-color:rgba(45,75,115,.8);border-radius:8px;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.zt-toast--unclickable{overflow:hidden}.zt-toast--unclickable *{pointer-events:none}.zt-toast--html,.zt-toast--text{width:-webkit-fit-content;width:fit-content;min-width:96px;min-height:0;padding:8px 12px}.zt-toast--html .zt-toast__text,.zt-toast--text .zt-toast__text{margin-top:0}.zt-toast--top{top:20%}.zt-toast--bottom{top:auto;bottom:20%}.zt-toast__icon{font-size:36px}.zt-toast__loading{padding:4px;color:#fff}.zt-toast__text{margin-top:4px}.zt-toast--fail svg,.zt-toast--success svg{width:36px;height:36px}

package/lib/uploader/index.css

@@ -1 +1 @@
-.zt-uploader{position:relative;display:inline-block}.zt-uploader__wrapper{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.zt-uploader__wrapper--disabled{opacity:.4}.zt-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.zt-uploader__input-wrapper{position:relative}.zt-uploader__input:disabled{cursor:not-allowed}.zt-uploader__upload{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:80px;height:80px;margin:0 8px 8px 0;background-color:#f5f5fa}.zt-uploader__upload:active{background-color:rgba(0,0,0,.04)}.zt-uploader__upload--readonly:active{background-color:#f5f5fa}.zt-uploader__upload-icon{color:#dcdee0;font-size:24px}.zt-uploader__upload-text{margin-top:8px;color:#969799;font-size:12px}.zt-uploader__preview{position:relative;margin:0 8px 8px 0;cursor:pointer}.zt-uploader__preview-image{display:block;width:80px;height:80px;overflow:hidden}.zt-uploader__preview-delete{position:absolute;top:0;right:0;width:14px;height:14px;background-color:rgba(0,0,0,.7);border-radius:0 0 0 12px}.zt-uploader__preview-delete-icon{position:absolute;top:-2px;right:-2px;color:#fff;font-size:16px;-webkit-transform:scale(.5);transform:scale(.5)}.zt-uploader__preview-cover{position:absolute;top:0;right:0;bottom:0;left:0}.zt-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#fff;background-color:rgba(50,50,51,.88)}.zt-uploader__mask-icon{font-size:22px}.zt-uploader__mask-message{margin-top:6px;padding:0 4px;font-size:12px;line-height:14px}.zt-uploader__loading{width:22px;height:22px;color:#fff}.zt-uploader__file{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;width:80px;height:80px;background-color:#f5f5fa}.zt-uploader__file-icon{color:#646566;font-size:20px}.zt-uploader__file-name{box-sizing:border-box;width:100%;margin-top:8px;padding:0 4px;color:#646566;font-size:12px;text-align:center}
+.zt-uploader{position:relative;display:inline-block}.zt-uploader__wrapper{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.zt-uploader__wrapper--disabled{opacity:.4}.zt-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.zt-uploader__input-wrapper{position:relative}.zt-uploader__input:disabled{cursor:not-allowed}.zt-uploader__upload{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:80px;height:80px;margin:0 8px 8px 0;background-color:#f5f5fa}.zt-uploader__upload:active{background-color:rgba(0,0,0,.04)}.zt-uploader__upload--readonly:active{background-color:#f5f5fa}.zt-uploader__upload-icon{color:#dcdee0;font-size:24px}.zt-uploader__upload-text{margin-top:8px;color:#969799;font-size:12px}.zt-uploader__preview{position:relative;margin:0 8px 8px 0;cursor:pointer}.zt-uploader__preview-image{display:block;width:80px;height:80px;overflow:hidden}.zt-uploader__preview-delete{position:absolute;top:0;right:0;width:14px;height:14px;background-color:rgba(0,0,0,.7);border-radius:0 0 0 12px}.zt-uploader__preview-delete-icon{position:absolute;top:-2px;right:-2px;color:#fff;font-size:16px;-webkit-transform:scale(.5);transform:scale(.5)}.zt-uploader__preview-cover{position:absolute;top:0;right:0;bottom:0;left:0}.zt-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#fff;background-color:rgba(50,50,51,.88)}.zt-uploader__mask-icon{font-size:22px}.zt-uploader__mask-message{margin-top:6px;padding:0 4px;font-size:12px;line-height:14px}.zt-uploader__loading{width:22px;height:22px;color:#fff}.zt-uploader__file{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;width:80px;height:80px;background-color:#f5faff}.zt-uploader__file-icon{color:#646566;font-size:20px}.zt-uploader__file-name{box-sizing:border-box;width:100%;margin-top:8px;padding:0 4px;color:#646566;font-size:12px;text-align:center}