zartui 1.0.2 → 2.0.2

package/lib/step/index.css

@@ -1 +1 @@
-.zt-step{position:relative;-webkit-box-flex:1;-webkit-flex:1;flex:1}.zt-step__circle{display:block;width:18px;height:18px;line-height:18px;border-radius:50%;text-align:center}.zt-step__line{position:absolute;background-color:rgba(0,0,0,.1);-webkit-transition:background-color .3s;transition:background-color .3s}.zt-step--horizontal{float:left}.zt-step--horizontal .zt-step__circle-container{position:absolute;top:10px;left:calc(50% - 10px);z-index:1;background-color:#fff;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.zt-step--horizontal .zt-step__title{display:inline-block;margin-top:26px;font-size:14px;width:100%;text-align:center}@media (max-width:321px){.zt-step--horizontal .zt-step__title{font-size:13px}}.zt-step--horizontal .zt-step__line{top:10px;left:calc(50% + 10px + 4px);width:calc(100% - 20px - 8px);height:1px}.zt-step--horizontal .zt-step__icon{display:block;font-size:12px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.zt-step--vertical{display:block;float:none;padding:10px 16px 10px 8px;line-height:18px}.zt-step--vertical .zt-step__circle-container{position:absolute;top:20px;left:0;z-index:1;font-size:12px;line-height:1;-webkit-transform:translate(-100%,-50%);transform:translate(-100%,-50%)}.zt-step--vertical .zt-step__line{left:-10px;top:34px;height:calc(100% - 28px);width:1px}.zt-step--vertical .zt-step__icon{display:block;font-size:12px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.zt-step:last-child .zt-step__line{width:0}.zt-step__icon,.zt-step__title{-webkit-transition:color .3s;transition:color .3s}
+.zt-step{position:relative;-webkit-box-flex:1;-webkit-flex:1;flex:1}.zt-step__circle{display:block;width:20px;height:20px;line-height:20px;border-radius:50%;text-align:center;font-size:14px}.zt-step__line{position:absolute;background-color:rgba(0,0,0,.1);-webkit-transition:background-color .3s;transition:background-color .3s}.zt-step--horizontal{float:left}.zt-step--horizontal .zt-step__circle-container{position:absolute;top:10px;left:calc(50% - 10px);z-index:1;background-color:#fff;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.zt-step--horizontal .zt-step__title{display:inline-block;margin-top:26px;font-size:14px;width:100%;text-align:center;color:#2d4b73}@media (max-width:321px){.zt-step--horizontal .zt-step__title{font-size:13px}}.zt-step--horizontal .zt-step__line{top:10px;left:calc(50% + 10px + 4px);width:calc(100% - 20px - 8px);height:1px}.zt-step--horizontal .zt-step__icon{display:block;font-size:14px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.zt-step--vertical{display:block;float:none;padding:10px 16px 10px 8px;line-height:18px}.zt-step--vertical .zt-step__circle-container{position:absolute;top:20px;left:0;z-index:1;font-size:14px;line-height:1;-webkit-transform:translate(-100%,-50%);transform:translate(-100%,-50%)}.zt-step--vertical .zt-step__line{left:-10px;top:34px;height:calc(100% - 28px);width:1px}.zt-step--vertical .zt-step__icon{display:block;font-size:14px;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.zt-step:last-child .zt-step__line{width:0}.zt-step__icon,.zt-step__title{-webkit-transition:color .3s;transition:color .3s}

package/lib/step/index.js

@@ -32,14 +32,12 @@ var _default = createComponent({
       if (this.active) {
         return {
           background: "" + (this.parent.activeBgColor || 'rgba(0,145,250,0.20)'),
-          border: "1px solid " + (this.parent.activeBorderColor || '#0091FA'),
           'font-weight': 'bold',
           color: "" + (this.parent.activeColor || '#0091FA')
         };
       } else {
         return {
-          background: "" + (this.parent.inactiveBgColor || 'rgba(0,0,0,0.20)'),
-          border: "1px solid " + (this.parent.inactiveBorderColor || 'rgba(0,0,0,0)'),
+          background: "" + (this.parent.inactiveBgColor || 'rgba(45,75,115,0.20)'),
           'font-weight': 'normal',
           color: "" + (this.parent.inactiveColor || '#FFFFFF')
         };
@@ -48,11 +46,11 @@ var _default = createComponent({
     titleStyle: function titleStyle() {
       if (this.active) {
         return {
-          color: this.parent.titleActiveColor || 'rgba(0,0,0,1)'
+          color: this.parent.titleActiveColor || 'rgba(45, 75, 115, 1)'
         };
       } else {
         return {
-          color: this.parent.titleInactiveColor || 'rgba(0,0,0,0.4)'
+          color: this.parent.titleInactiveColor || 'rgba(45, 75, 115, 0.6)'
         };
       }
     }

package/lib/step/index.less

@@ -11,6 +11,7 @@
     line-height: @step-circle-size;
     border-radius: 50%;
     text-align: center;
+    font-size: @step-icon-size;
   }
 
   &__line {
@@ -37,6 +38,7 @@
       font-size: @step-horizontal-title-font-size;
       width: 100%;
       text-align: center;
+      color: #2D4B73;
       @media (max-width: 321px) {
         font-size: @step-horizontal-title-font-size - 1px;
       }
@@ -67,7 +69,7 @@
     .zt-step__circle-container {
       position: absolute;
       top: 20px;
-      left: 0px;
+      left: 0;
       z-index: 1;
       font-size: @step-icon-size;
       line-height: 1;

package/lib/stepper/index.css

@@ -1 +1 @@
-.zt-stepper{font-size:0;-webkit-user-select:none;user-select:none}.zt-stepper__minus__box,.zt-stepper__plus__box{width:16px;height:16px;margin-left:6px}.zt-stepper__minus__box::before,.zt-stepper__plus__box::before{width:40%;height:1px}.zt-stepper__minus__box::after,.zt-stepper__plus__box::after{width:1px;height:40%}.zt-stepper__minus__box::after,.zt-stepper__minus__box::before,.zt-stepper__plus__box::after,.zt-stepper__plus__box::before{position:absolute;top:50%;left:50%;background-color:currentColor;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);content:''}.zt-stepper__minus,.zt-stepper__plus{position:relative;box-sizing:border-box;width:30px;height:30px;margin:0;padding:0;color:#000;vertical-align:middle;background-color:#fff;border:1px solid rgba(0,0,0,.4);cursor:pointer;margin-right:12px;border-radius:2px}.zt-stepper__minus:active,.zt-stepper__plus:active{background-color:rgba(0,0,0,.1)}.zt-stepper__minus--disabled,.zt-stepper__plus--disabled{color:rgba(0,0,0,.2);border-color:rgba(0,0,0,.2);cursor:not-allowed}.zt-stepper__minus--disabled:active,.zt-stepper__plus--disabled:active{background-color:#f5f5fa}.zt-stepper__minus__box::after{display:none}.zt-stepper__minus{margin-right:12px}.zt-stepper__input{box-sizing:border-box;width:60px;height:30px;border:1px solid rgba(0,0,0,.4);padding:0;color:#000;font-weight:700;font-size:14px;line-height:normal;text-align:center;vertical-align:middle;background-color:#fff;border-radius:2px;-webkit-appearance:none;margin-right:12px;caret-color:#0e97fa}.zt-stepper__input:disabled{color:#c8c9cc;background-color:rgba(0,0,0,.04);-webkit-text-fill-color:#c8c9cc;opacity:1}.zt-stepper__input:read-only{cursor:default}.zt-stepper--round .zt-stepper__input{background-color:transparent}.zt-stepper--round .zt-stepper__minus,.zt-stepper--round .zt-stepper__plus{border-radius:100%}.zt-stepper--round .zt-stepper__minus:active,.zt-stepper--round .zt-stepper__plus:active{opacity:.7}.zt-stepper--round .zt-stepper__minus--disabled,.zt-stepper--round .zt-stepper__minus--disabled:active,.zt-stepper--round .zt-stepper__plus--disabled,.zt-stepper--round .zt-stepper__plus--disabled:active{opacity:.3}
+.zt-stepper{font-size:0;-webkit-user-select:none;user-select:none}.zt-stepper__minus__box,.zt-stepper__plus__box{width:16px;height:16px;margin-left:6px}.zt-stepper__minus__box::before,.zt-stepper__plus__box::before{width:40%;height:1px}.zt-stepper__minus__box::after,.zt-stepper__plus__box::after{width:1px;height:40%}.zt-stepper__minus__box::after,.zt-stepper__minus__box::before,.zt-stepper__plus__box::after,.zt-stepper__plus__box::before{position:absolute;top:50%;left:50%;background-color:currentColor;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);content:''}.zt-stepper__minus,.zt-stepper__plus{position:relative;box-sizing:border-box;width:30px;height:30px;margin:0;padding:0;color:#000;vertical-align:middle;background-color:#fff;border:1px solid rgba(0,0,0,.4);cursor:pointer;margin-right:12px;border-radius:2px}.zt-stepper__minus:active,.zt-stepper__plus:active{background-color:rgba(0,0,0,.1)}.zt-stepper__minus--disabled,.zt-stepper__plus--disabled{color:rgba(0,0,0,.2);border-color:rgba(0,0,0,.2);cursor:not-allowed}.zt-stepper__minus--disabled:active,.zt-stepper__plus--disabled:active{background-color:#f5faff}.zt-stepper__minus__box::after{display:none}.zt-stepper__minus{margin-right:12px}.zt-stepper__input{box-sizing:border-box;width:60px;height:30px;border:1px solid rgba(0,0,0,.4);padding:0;color:#000;font-weight:700;font-size:14px;line-height:normal;text-align:center;vertical-align:middle;background-color:#fff;border-radius:2px;-webkit-appearance:none;margin-right:12px;caret-color:#0e97fa}.zt-stepper__input:disabled{color:#c8c9cc;background-color:rgba(0,0,0,.04);-webkit-text-fill-color:#c8c9cc;opacity:1}.zt-stepper__input:read-only{cursor:default}.zt-stepper--round .zt-stepper__input{background-color:transparent}.zt-stepper--round .zt-stepper__minus,.zt-stepper--round .zt-stepper__plus{border-radius:100%}.zt-stepper--round .zt-stepper__minus:active,.zt-stepper--round .zt-stepper__plus:active{opacity:.7}.zt-stepper--round .zt-stepper__minus--disabled,.zt-stepper--round .zt-stepper__minus--disabled:active,.zt-stepper--round .zt-stepper__plus--disabled,.zt-stepper--round .zt-stepper__plus--disabled:active{opacity:.3}

package/lib/steps/index.css

@@ -1 +1 @@
-.zt-steps{overflow:hidden;background-color:#fff;margin:12px;border:0 solid rgba(0,0,0,.1);box-shadow:0 4px 8px 0 rgba(0,0,0,.1);border-radius:4px}.zt-steps--horizontal{padding:8px 0}.zt-steps--horizontal .zt-steps__items{position:relative;display:-webkit-box;display:-webkit-flex;display:flex}.zt-steps--vertical{padding:0 0 0 36px}
+.zt-steps{overflow:hidden;background-color:#fff;margin:16px;border:0 solid rgba(0,0,0,.1);box-shadow:0 8px 16px 0 rgba(45,75,115,.1);border-radius:8px}.zt-steps--horizontal{padding:8px 0}.zt-steps--horizontal .zt-steps__items{position:relative;display:-webkit-box;display:-webkit-flex;display:flex}.zt-steps--vertical{padding:0 0 0 36px}

package/lib/steps/index.less

@@ -3,10 +3,10 @@
 .zt-steps {
   overflow: hidden;
   background-color: @steps-background-color;
-  margin: 12px;
+  margin: 16px;
   border: 0 solid rgba(0,0,0,0.10);
-  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
-  border-radius: 4px;
+  box-shadow: 0 8px 16px 0 rgba(45,75,115,0.10);
+  border-radius: 8px;
 
   &--horizontal {
     padding: 8px 0;

package/lib/style/reset.css

@@ -1 +1 @@
-a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;font:inherit;font-size:100%;vertical-align:baseline;border:0}html{line-height:1;-webkit-tap-highlight-color:transparent}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,td,th{font-weight:400;vertical-align:middle}blockquote,q{quotes:none}blockquote::after,blockquote::before,q::after,q::before{content:'';content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}*{box-sizing:content-box}body{color:rgba(0,0,0,.6);background-color:#f5f5fa}a{text-decoration:none;background:0 0}button,input[type=email],input[type=number],input[type=password],input[type=search],input[type=text],select,textarea{margin:0;font-family:inherit;-webkit-appearance:none}
+a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;font:inherit;font-size:100%;vertical-align:baseline;border:0}html{line-height:1;-webkit-tap-highlight-color:transparent}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,td,th{font-weight:400;vertical-align:middle}blockquote,q{quotes:none}blockquote::after,blockquote::before,q::after,q::before{content:'';content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}*{box-sizing:content-box}body{color:rgba(0,0,0,.6);background-color:#f5faff}a{text-decoration:none;background:0 0}button,input[type=email],input[type=number],input[type=password],input[type=search],input[type=text],select,textarea{margin:0;font-family:inherit;-webkit-appearance:none}

package/lib/style/var.less

@@ -1,6 +1,7 @@
 // Color Palette
 @black: #000;
 @white: #fff;
+@white-1: rgba(255,255,255,0.50);
 @gray-1: #F5F5FA;
 @gray-2: #f2f3f5;
 @gray-3: #ebedf0;
@@ -9,10 +10,14 @@
 @gray-6: #969799;
 @gray-7: #646566;
 @gray-8: #323233;
+@gray-9: #F5FAFF;
 @red: #E62314;
+@red-1: #ff5a5a;
 @blue: #0091FA;
+@blue-1: #3caafa;
 @cyan: #00C8F0;
 @orange: #FF9623;
+@orange-1: #FFAF00;
 @yellow: #FFCD23;
 @orange-dark: #ed6a0c;
 @orange-light: #fffbe8;
@@ -20,6 +25,7 @@
 @orange-a2: rgba(255,205,35,0.20);
 @green: #28CD78;
 @green-1: #00AF91;
+@green-2: #00E173;
 @gray-a04: rgba(0,0,0,0.04);
 @gray-a1: rgba(0,0,0,0.1);
 @gray-a2: rgba(0,0,0,0.2);
@@ -27,20 +33,29 @@
 @gray-a6: rgba(0,0,0,0.6);
 @gray-a8: rgba(0,0,0,0.8);
 
+
 // Gradient Colors
 @gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
 @gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+@gradient-white: linear-gradient(134deg, #E1E6EB 0%, #E5EDF5 100%);
+@gradient-white-1:linear-gradient(135deg, #E6EBF0 0%, #FFF 100%);
 
 // Component Colors
 @text-color: rgba(0,0,0,0.6);
+@text-color-1: rgba(45, 75, 115, 0.6);
+@text-color-2: rgba(45, 75, 115, 0.8);
+@text-color-3: #2d4b73;
+@text-color-4: rgba(45, 75, 115, 0.4);
+@text-color-5: rgba(45, 75, 115, 0.2);
 @active-color: @gray-a04;
 @active-opacity: 0.7;
 @disabled-opacity: 0.4;
-@background-color: @gray-1;
+@background-color: @gray-9;
 @background-color-light: #fafafa;
 @text-link-color: #576b95;
 
 // Padding
+@padding-xxs: 2px;
 @padding-base: 4px;
 @padding-xs: @padding-base * 2;
 @padding-sm: @padding-base * 3;
@@ -75,6 +90,10 @@
 
 // Border
 @border-color: rgba(0, 0, 0, 0.1);
+@border-color-1: rgba(45, 75, 115, 0.1);
+@border-color-2: rgba(45, 75, 115, 0.08);
+@border-color-3: rgba(45,75,115,0.13);
+@border-color-4: rgba(45,75,115,0.2);
 @border-width-base: 1px;
 @border-radius-sm: 2px;
 @border-radius-md: 4px;
@@ -89,7 +108,7 @@
 @action-sheet-description-font-size: @font-size-md;
 @action-sheet-description-line-height: @line-height-md;
 @action-sheet-item-background: @white;
-@action-sheet-item-font-size: @font-size-lg;
+@action-sheet-item-font-size: @font-size-md;
 @action-sheet-item-line-height: @line-height-xl;
 @action-sheet-item-text-color: @text-color;
 @action-sheet-item-disabled-text-color: @gray-a2;
@@ -100,7 +119,7 @@
 @action-sheet-close-icon-color: @gray-a4;
 @action-sheet-close-icon-active-color: @gray-6;
 @action-sheet-close-icon-padding: 0 @padding-md;
-@action-sheet-cancel-text-color: @black;
+@action-sheet-cancel-text-color: @text-color-3;
 @action-sheet-cancel-padding-top: @padding-sm;
 @action-sheet-cancel-padding-color: @background-color;
 @action-sheet-loading-icon-size: 20px;
@@ -140,38 +159,54 @@
 @badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
 
 // Button
-@button-mini-height: 28px;
-@button-mini-font-size: @font-size-md;
-@button-small-height: 32px;
+@button-mini-height: 24px;
+@button-mini-padding: 0 @padding-sm;
+@button-mini-font-size: @font-size-sm;
+@button-small-height: 28px;
+@button-small-padding: 0 @padding-sm;
 @button-small-font-size: @font-size-md;
+@button-medium-height: 36px;
+@button-medium-padding: 0 @padding-md;
+@button-medium-font-size: @font-size-md;
+@button-normal-padding: 0 @padding-lg;
 @button-normal-font-size: @font-size-lg;
 @button-large-height: 50px;
 @button-default-height: 44px;
-@button-default-line-height: 1.2;
+@button-default-line-height: calc(
+        var(@button-normal-font-size) * 2 - 8px
+);
 @button-default-font-size: @font-size-lg;
-@button-default-color: @text-color;
-@button-default-background-color: @white;
-@button-default-border-color: @border-color;
+@button-default-color: @text-color-3;
+@button-default-background-color: @gray-9;
+@button-default-border-color: @border-color-4;
 @button-primary-color: @white;
-@button-primary-background-color: @blue;
-@button-primary-border-color: @blue;
-@button-info-color: @white;
-@button-info-background-color: @cyan;
-@button-info-border-color: @cyan;
+@button-primary-background-color: linear-gradient(
+        -45deg,
+        #3cafff 0%,
+        @blue 100%
+);
+@button-primary-light-background: rgba(1, 144, 250, 0.1);
+@button-primary-border-color: @blue-1;
 @button-danger-color: @white;
-@button-danger-background-color: @red;
-@button-danger-border-color: @red;
+@button-danger-background-color: @red-1;
+@button-danger-border-color: @red-1;
 @button-warning-color: @white;
-@button-warning-background-color: @orange;
-@button-warning-border-color: @orange;
+@button-warning-background-color: @orange-1;
+@button-warning-border-color: @orange-1;
 @button-success-color: @white;
-@button-success-background-color: @green;
-@button-success-border-color: @green;
+@button-success-background-color: @green-2;
+@button-success-border-color: @green-2;
 @button-border-width: @border-width-base;
-@button-border-radius: @border-radius-md;
+@button-border-radius: 22px;
 @button-round-border-radius: @border-radius-max;
-@button-plain-background-color: @white;
+@button-plain-background-color: transparent;
 @button-disabled-opacity: @disabled-opacity;
+@button-icon-mini-size: 16px;
+@button-icon-small-size: 20px;
+@button-icon-medium-size: 20px;
+@button-icon-normal-size: 24px;
+@button-loading-icon-size: 20px;
+@button-inner-block-horizontal-margin: 16px;
 
 // Calendar
 @calendar-background-color: @white;
@@ -236,15 +271,15 @@
 
 // Cell
 @cell-font-size: @font-size-lg;
-@cell-line-height: 24px;
-@cell-vertical-padding: 10px;
+@cell-line-height: 20px;
+@cell-vertical-padding: 12px;
 @cell-horizontal-padding: @padding-md;
-@cell-text-color: @text-color;
+@cell-text-color: #2D4B73;
 @cell-background-color: @white;
 @cell-border-color: @border-color;
 @cell-active-color: @active-color;
 @cell-required-color: @red;
-@cell-label-color: @black;
+@cell-label-color: #2D4B73;
 @cell-label-font-size: @font-size-md;
 @cell-label-line-height: @line-height-sm;
 @cell-label-margin-top: 10px;
@@ -266,16 +301,19 @@
 @cell-group-inset-title-padding: @padding-md @padding-md @padding-xs @padding-xl;
 
 // Checkbox
-@checkbox-size: 24px;
-@checkbox-padding: 10px 0;
-@checkbox-border-color: @gray-5;
+@checkbox-size: 20px;
+@checkbox-padding: 14px 0;
+@checkbox-border-color: @border-color-3;
 @checkbox-transition-duration: @animation-duration-fast;
 @checkbox-label-margin: @padding-xs;
 @checkbox-label-color: @text-color;
 @checkbox-checked-icon-color: @blue;
-@checkbox-disabled-icon-color: @gray-5;
+@checkbox-checked-border-color: @border-color-2;
+@checkbox-disabled-icon-color: @gradient-white;
 @checkbox-disabled-label-color: @gray-5;
 @checkbox-disabled-background-color: @border-color;
+@checkbox-disabled-border-color: @white-1;
+
 
 // Circle
 @circle-size: 100px;
@@ -438,9 +476,10 @@
 @field-text-area-min-height: 60px;
 @field-word-limit-color: @gray-7;
 @field-word-limit-font-size: @font-size-sm;
-@field-word-limit-line-height: 16px;
+@field-word-limit-line-height: 20px;
 @field-disabled-text-color: @gray-5;
 @field-zt-icon-size: 20px;
+@field-zt-icon-color: rgba(45, 75, 115, .4);
 
 // GridItem
 @grid-item-content-padding: @padding-md @padding-xs;
@@ -507,14 +546,14 @@
 // ImagePreview
 @image-preview-index-text-color: @white;
 @image-preview-index-font-size: @font-size-md;
-@image-preview-index-line-height: @line-height-md;
 @image-preview-index-text-shadow: 0 1px 1px @gray-8;
-@image-preview-index-background: rgba(0, 0, 0, 0.6);
-@image-preview-index-padding:@padding-base @padding-xs;
+@image-preview-index-background: rgba(45,75,115,0.80);
+@image-preview-index-padding: @padding-base @padding-xs;
 @image-preview-index-line-height:@line-height-xl;
 @image-preview-index-height:24px;
-@image-preview-index-bottom:8px;
-@image-preview-index-left:40px;
+@image-preview-index-width:37px;
+@image-preview-index-bottom:12px;
+@image-preview-index-left:34px;
 @image-preview-index-z-index:10;
 @image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
 @image-preview-close-icon-size: 22px;
@@ -527,10 +566,10 @@
 @image-preview-title-height:48px;
 @image-preview-title-width:100%;
 @image-preview-title-line-height:48px;
-@image-preview-title-font-size:18px;
-@image-preview-title-padding-left:70px;
+@image-preview-title-font-size:14px;
+@image-preview-title-padding-left:60px;
 @image-preview-title-z-index:9;
-@image-preview-title-background:rgba(0, 0, 0, 0.4);
+@image-preview-title-background:rgba(45,75,115,0.50);
 
 
 // List
@@ -542,7 +581,7 @@
 @loading-text-color: @gray-a6;
 @loading-text-font-size: @font-size-md;
 @loading-text-line-height: @line-height-md;
-@loading-spinner-color: @gray-6;
+@loading-spinner-color: rgba(45,75,115,0.40);
 @loading-spinner-size: 36px;
 @loading-spinner-animation-duration: 0.7s;
 
@@ -635,12 +674,12 @@
 @picker-title-font-size: @font-size-md;
 @picker-title-line-height: @line-height-md;
 @picker-action-padding: 0 @padding-md;
-@picker-action-font-size: @font-size-lg;
+@picker-action-font-size: @font-size-md;
 @picker-confirm-action-font-weight: @base-font-weight;
 @picker-confirm-action-color: @blue;
 @picker-cancel-action-font-weight: @plain-font-weight;
 @picker-cancel-action-color: @black;
-@picker-option-font-size: @font-size-lg;
+@picker-option-font-size: @font-size-md;
 @picker-option-text-color: @black;
 @picker-option-disabled-opacity: 0.3;
 @picker-loading-icon-color: @blue;
@@ -668,12 +707,13 @@
 // Popup
 @popup-background-color: @white;
 @popup-transition: transform @animation-duration-base;
-@popup-round-border-radius: 8px;
-@popup-close-icon-size: 20px;
-@popup-close-icon-color: @gray-5;
+@popup-round-border-radius: 16px;
+@popup-close-icon-size: 24px;
+@popup-close-icon-color: rgba(45, 75, 115, 0.6);
 @popup-close-icon-active-color: @gray-6;
 @popup-close-icon-margin: 16px;
 @popup-close-icon-z-index: 1;
+@popup-close-icon-z-margin-top: 12px;
 
 // Progress
 @progress-height: 4px;
@@ -691,16 +731,17 @@
 @pull-refresh-head-text-color: @gray-6;
 
 // Radio
-@radio-size: 24px;
-@radio-padding: 10px 0;
-@radio-border-color: @gray-5;
+@radio-size: 20px;
+@radio-padding: 14px 0;
+@radio-border-color: @border-color-3;
 @radio-transition-duration: @animation-duration-fast;
 @radio-label-margin: @padding-xs;
 @radio-label-color: @text-color;
 @radio-checked-icon-color: @blue;
 @radio-disabled-icon-color: @gray-5;
 @radio-disabled-label-color: @gray-5;
-@radio-disabled-background-color: @border-color;
+@radio-disabled-border-color: @border-color-2;
+@radio-disabled-background-color: @gradient-white;
 
 // Rate
 @rate-icon-size: 20px;
@@ -728,18 +769,21 @@
 
 // Search
 @search-padding: 8px @padding-md;
-@search-background-color: @white;
-@search-content-background-color: @gray-a04;
+@search-background-color: @gray-9;
+@search-content-background-color: rgba(45,75,115,0.04);
+@search-content-box-shadow: inset 4px 4px 8px 0 rgba(45,75,115,0.10);
+@search-content-border-color: linear-gradient(#fff, rgba(255, 255, 255, 0.4));
 @search-input-height: 20px;
-@search-label-padding: 4px 0 4px 8px;
+@search-label-padding: 8px 0 8px 12px;
 @search-label-color: @text-color;
 @search-label-font-size: @font-size-md;
 @search-left-icon-color: @gray-6;
-@search-action-padding: 0 @padding-md;
+@search-action-padding: 0 @padding-md 0 @padding-sm;
 @search-action-text-color: @blue;
 @search-action-font-size: @font-size-lg;
 @search-action-height: 28px;
 @search-input-caret-color: #0091FA;
+@search-cell-padding: 8px 12px;
 
 // Sidebar
 @sidebar-width: 80px;
@@ -779,8 +823,8 @@
 
 // Step
 @step-line-color: @border-color;
-@step-icon-size: 12px;
-@step-circle-size: 18px;
+@step-icon-size: 14px;
+@step-circle-size: 20px;
 @step-horizontal-title-font-size: @font-size-md;
 
 // Steps
@@ -884,7 +928,7 @@
 
 // Tab
 @tab-text-color: @gray-7;
-@tab-active-text-color: @text-color;
+@tab-active-text-color: @text-color-3;
 @tab-disabled-text-color: @gray-5;
 @tab-font-size: @font-size-md;
 @tab-line-height: @line-height-md;
@@ -892,10 +936,10 @@
 // Tabs
 @tabs-default-color: #0091FA;
 @tabs-line-height: 44px;
-@tabs-card-height: 30px;
+@tabs-card-height: 32px;
 @tabs-nav-background-color: @white;
-@tabs-bottom-bar-width: 40px;
-@tabs-bottom-bar-height: 3px;
+@tabs-bottom-bar-width: 12px;
+@tabs-bottom-bar-height: 4px;
 @tabs-bottom-bar-color: #0091FA;
 
 // Tag
@@ -922,8 +966,8 @@
 @toast-text-color: @white;
 @toast-loading-icon-color: @white;
 @toast-line-height: @line-height-md;
-@toast-border-radius: @border-radius-md;
-@toast-background-color: fade(@black, 80%);
+@toast-border-radius: @border-radius-lg;
+@toast-background-color: @text-color-2;
 @toast-icon-size: 36px;
 @toast-text-min-width: 96px;
 @toast-text-padding: @padding-xs @padding-sm;

package/lib/switch-cell/index.css

@@ -1 +1 @@
-.zt-switch-cell{padding-top:9px;padding-bottom:9px}.zt-switch-cell--large{padding-top:11px;padding-bottom:11px}.zt-switch-cell .zt-switch{float:right}
+.zt-switch-cell{padding-top:11px;padding-bottom:11px}.zt-switch-cell--large{padding-top:11px;padding-bottom:11px}.zt-switch-cell .zt-switch{float:right}

package/lib/tabs/Title.js

@@ -24,7 +24,11 @@ var _default = createComponent({
     disabled: Boolean,
     scrollable: Boolean,
     activeColor: String,
-    inactiveColor: String
+    inactiveColor: String,
+    maxWidth: {
+      type: String,
+      default: '112px'
+    }
   },
   computed: {
     style: function style() {
@@ -51,6 +55,7 @@ var _default = createComponent({
         style.color = titleColor;
       }
 
+      style.maxWidth = this.maxWidth;
       return style;
     }
   },

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}