@zat-design/sisyphus-react 3.1.4 → 3.1.5-beta.10

package/es/ProTree/style/index.less

@@ -1,59 +1,73 @@
 .pro-tree {
   height: 100%; // tree auto css
-  .ant-spin-nested-loading{
+
+  .ant-spin-nested-loading {
     height: 100%; // tree auto css
-    .ant-spin-container{
+
+    .ant-spin-container {
       height: 100%; // tree auto css
     }
   }
+
   &-placeholder {
     color: #939499;
   }
-  .pro-tree-search{
-    margin-bottom: var(--zaui-space-size-sm);
+
+  .pro-tree-search {
+     margin-bottom: calc(var(--zaui-space-size-sm; 8px) * var(--zaui-size; 1));
   }
+
   &-content {
-    display: flex; // tree auto css
+    display       : flex; // tree auto css
     flex-direction: column; // tree auto css
-    height: 100%;
+    height        : 100%;
+
     // overflow-y: scroll;
-    .pro-tree-header-box, .pro-tree-footer-box{
-      display: inline-flex;
+    .pro-tree-header-box,
+    .pro-tree-footer-box {
+      display       : inline-flex;
       flex-direction: column;
     }
-    .pro-tree-tree-warp{
-      height: 100%;
-      flex: 1 1;
+
+    .pro-tree-tree-warp {
+      height    : 100%;
+      flex      : 1 1;
       overflow-y: auto;
       overflow-x: auto;
     }
-    .tree-title-box{
-      display: flex;
-      padding-top: 10px;
+
+    .tree-title-box {
+      display        : flex;
+      padding-top    : 10px;
       justify-content: space-between;
-      .tree-title-text{
-        font-size: var(--zaui-font-size-lg);
+
+      .tree-title-text {
+        font-size    : var(--zaui-font-size-lg);
         margin-bottom: var(--zaui-space-size-xs);
-        font-weight: 500;
-        padding-left: 2px;
+        font-weight  : 500;
+        padding-left : 2px;
       }
-      .expand-button{
+
+      .expand-button {
         padding-left: var(--zaui-space-size-sm);
-        display: flex;
-        align-items: baseline;
-        &.expand{
-          .expand-icon{
-            .anticon-caret-down{
+        display     : flex;
+        align-items : baseline;
+        cursor      : pointer;
+        &.expand {
+          .expand-icon {
+            .anticon-caret-down {
               transform: rotate(180deg);
             }
           }
         }
-        .expand-icon{
-          font-size: 12px;
+
+        .expand-icon {
+          font-size   : var(--zaui-font-size-sm, 12px);
           margin-right: var(--zaui-space-size-xs);
         }
       }
     }
+
     .ant-tree-checkbox {
       margin-top: 11px;
     }
@@ -61,37 +75,42 @@
     .ant-tree-switcher {
       line-height: 44px;
     }
-    .ant-tree-switcher-leaf-line{
+
+    .ant-tree-switcher-leaf-line {
       display: none;
     }
 
     .ant-tree-treenode {
       align-items: flex-start;
-      width: 100%;
-      padding: 0;
-      color: var(--zaui-text);
-      font-size: var(--zaui-font-size);
+      width      : 100%;
+      padding    : 0;
+      color      : var(--zaui-text);
+      font-size  : var(--zaui-font-size);
     }
 
     .ant-tree-node-content-wrapper {
-      min-height: var(--zaui-font-size-xxl);
+      min-height : var(--zaui-font-size-xxl);
       line-height: var(--zaui-font-size-xxl);
     }
 
     .ant-tree-node-content-wrapper {
       width: 100%;
-      .ant-tree-title{
+
+      .ant-tree-title {
         display: block;
-        width: 100%;
+        width  : 100%;
       }
     }
+
     // 只读状态下，是否隐藏未勾选行
-    .hide-disable-node{
-      .ant-tree-treenode.ant-tree-treenode-disabled{
+    .hide-disable-node {
+      .ant-tree-treenode.ant-tree-treenode-disabled {
         display: none;
       }
-      .ant-tree-treenode-checkbox-indeterminate, .ant-tree-treenode-checkbox-checked{
-        &.ant-tree-treenode-disabled{
+
+      .ant-tree-treenode-checkbox-indeterminate,
+      .ant-tree-treenode-checkbox-checked {
+        &.ant-tree-treenode-disabled {
           display: flex;
         }
       }
@@ -99,173 +118,203 @@
   }
 
   &-tree-node {
-    display: flex;
+    display       : flex;
     flex-direction: row;
-    padding: 9px var(--zaui-space-size-sm);
-    margin-left: -8px;
-    border-radius: var(--zaui-space-size-xs);
-    &:hover{
+    padding       : 9px var(--zaui-space-size-sm);
+    margin-left   : -8px;
+    border-radius : var(--zaui-space-size-xs);
+
+    &:hover {
       background: #F7F9FC;
     }
+
     &:last-child {
       flex: 1;
     }
-    &.checked{
+
+    &.checked {
       position: relative;
-      z-index: 1;
-      color: var(--zaui-brand);
-      .brand-bg-opa-ten{
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0px;
-        left:0px;
+      z-index : 1;
+      color   : var(--zaui-brand);
+
+      .brand-bg-opa-ten {
+        position        : absolute;
+        width           : 100%;
+        height          : 100%;
+        top             : 0px;
+        left            : 0px;
         background-color: var(--zaui-brand);
-        opacity: 0.1;
-        z-index: 0;
-        border-radius: var(--zaui-space-size-xs);
+        opacity         : 0.1;
+        z-index         : -1;
+        border-radius   : var(--zaui-space-size-xs);
       }
     }
-    .tree-node-show-text{
-      display: flex;
+
+    .tree-node-show-text {
+      display       : flex;
       flex-direction: row;
-      width: 100%;
-      .tree-node-show-text-label{
-        flex: 1;
+      width         : 100%;
+
+      .tree-node-show-text-label {
+        flex    : 1;
         overflow: hidden;
-        span{
+
+        span {
           width: 100%;
         }
-        span.ellipse{
-          display: block;
+
+        span.ellipse {
+          display      : block;
           text-overflow: ellipsis;
-          overflow: hidden;
-          height: 20px;
-          word-break: keep-all;
-          white-space: nowrap;
+          overflow     : hidden;
+          height       : 20px;
+          word-break   : keep-all;
+          white-space  : nowrap;
         }
       }
     }
-    .operate-tree-node-btns{
+
+    .operate-tree-node-btns {
       display: flex;
       z-index: 3;
-      .icon-item{
+
+      .icon-item {
         transition-delay: 10s;
-        width: 100%;
-        margin-left: var(--zaui-space-size-xs);
+        width           : 100%;
+        margin-left     : var(--zaui-space-size-xs);
       }
-      .icon-add{
-        font-size: 12px;
+
+      .icon-add {
+        font-size: var(--zaui-font-size-sm, 12px);
       }
-      .svg-icon-expand{
+
+      .svg-icon-expand {
         margin-bottom: -2px;
       }
     }
-    .operate-tree-node-btns-absolute{
-      visibility:visible;
-      position: absolute;
-      right: 0px;
+
+    .operate-tree-node-btns-absolute {
+      visibility: visible;
+      position  : absolute;
+      right     : 0px;
     }
   }
+
   &-tree-node-tag {
-    display: flex;
-    align-items: center;
+    display        : flex;
+    align-items    : center;
     justify-content: center;
-    height: 20px;
-    margin-right: var(--zaui-space-size-sm);
-    padding: 0 var(--zaui-space-size-xs);
-    font-weight: 400;
-    line-height: 24px;
-    white-space: nowrap;
-    border-radius: 2px;
+    height         : 20px;
+    margin-right   : var(--zaui-space-size-sm);
+    padding        : 0 var(--zaui-space-size-xs);
+    font-weight    : 400;
+    line-height    : 24px;
+    white-space    : nowrap;
+    border-radius  : var(--zaui-border-radius-card);
 
     span {
-      font-size: 12px;
+      font-size  : var(--zaui-font-size-sm, 12px);
       line-height: 20px;
-      text-align: center;
-      transform: scale(0.83, 0.83);
+      text-align : center;
+      transform  : scale(0.83, 0.83);
     }
   }
+
   // 连接线、箭头宽度
-  .ant-tree-show-line .ant-tree-indent-unit{
+  .ant-tree-show-line .ant-tree-indent-unit {
     width: 20px;
   }
-  .ant-tree-switcher{
-    width: 20px;
+
+  .ant-tree-switcher {
+    width     : 20px;
     align-self: flex-start;
     margin-top: -4px;
   }
-  .ant-tree-show-line .ant-tree-indent-unit::before{
+
+  .ant-tree-show-line .ant-tree-indent-unit::before {
     right: 9px;
   }
+
   // 底部样式
-  .pro-tree-footer-box{
-    z-index: 4;
-    padding: var(--zaui-space-size-md) var(--zaui-space-size-md) var(--zaui-space-size-md) var(--zaui-space-size-sm);
-    position: relative;
-    box-shadow:0 -20px 5px -21px rgba(151,151,151,0.32);
+  .pro-tree-footer-box {
+    z-index   : 4;
+    padding   : var(--zaui-space-size-md) var(--zaui-space-size-md) var(--zaui-space-size-md) var(--zaui-space-size-sm);
+    position  : relative;
+    box-shadow: 0 -20px 5px -21px rgba(151, 151, 151, 0.32);
   }
+
   // 去除antd白色背景
-  .ant-tree-show-line .ant-tree-switcher, .ant-tree{
+  .ant-tree-show-line .ant-tree-switcher,
+  .ant-tree {
     background-color: transparent;
   }
-  .empty-tree{
-    color: #939599;
-    height: 100%;
-    text-align: center;
-    display: flex;
-    align-items: center;
+
+  .empty-tree {
+    color          : #939599;
+    height         : 100%;
+    text-align     : center;
+    display        : flex;
+    align-items    : center;
     justify-content: center;
   }
 }
+
 // 操作按钮样式
-.pro-tree-operate-container{
+.pro-tree-operate-container {
   padding-top: 0px;
-  min-width: 120px;
-  .ant-popover-inner-content{
+  min-width  : 120px;
+
+  .ant-popover-inner-content {
     padding: 0px;
-    width: 100%;
+    width  : 100%;
   }
-  .ant-popover-arrow{
+
+  .ant-popover-arrow {
     display: none;
   }
-  .pro-tree-operate-btn-popover{
-    .icon-item{
-      position: relative;
-      z-index: 1;
-      cursor: pointer;
+
+  .pro-tree-operate-btn-popover {
+    .icon-item {
+      position    : relative;
+      z-index     : 1;
+      cursor      : pointer;
       padding-left: var(--zaui-space-size-md);
-      width: 100%;
-      height: 32px;
-      line-height: 32px;
+      width       : 100%;
+      height      : 32px;
+      line-height : 32px;
     }
-    .icon-item:hover{
-      &:after{
-        position: absolute;
-        display: block;
-        z-index: 0;
-        left:0;
-        top:0;
-        content: '';
-        width: 120px;
-        height: 32px;
+
+    .icon-item:hover {
+      &:after {
+        position        : absolute;
+        display         : block;
+        z-index         : 0;
+        left            : 0;
+        top             : 0;
+        content         : '';
+        width           : 120px;
+        height          : 32px;
         background-color: var(--zaui-brand);
-        opacity: 0.08;
+        opacity         : 0.08;
       }
     }
   }
 }
-.ant-tree .ant-tree-treenode-disabled{
-  .ant-tree-node-content-wrapper{
+
+.ant-tree .ant-tree-treenode-disabled {
+  .ant-tree-node-content-wrapper {
     color: var(--zaui-text);
   }
-  .pro-tree-tree-node.checked{
+
+  .pro-tree-tree-node.checked {
     color: var(--zaui-text);
   }
-  .pro-tree-tree-node.checked .brand-bg-opa-ten{
+
+  .pro-tree-tree-node.checked .brand-bg-opa-ten {
     background-color: inherit;
   }
 }
+
 // 中意全局样式覆盖
 // .pro-form.pro-form-view .ant-form-item * {
 //   line-height: 1!important;
@@ -274,16 +323,19 @@
 // }
 // 重置ant-form view模式样式ant-tree样式
 .pro-form.pro-form-view .ant-form-item .pro-tree * {
-  line-height: 1!important;
-  height: auto!important;
-  min-height: auto!important;
+  line-height: 1 !important;
+  height     : auto !important;
+  min-height : auto !important;
 }
-.pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-checkbox{
+
+.pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-checkbox {
   margin-top: var(--zaui-space-size-sm);
 }
-.pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-switcher{
+
+.pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-switcher {
   padding-top: var(--zaui-font-size-sm);
 }
+
 .pro-form.pro-form-view .ant-form-item .pro-tree .ant-tree-checkbox * {
-  height: 16px!important;
-}
+  height: 16px !important;
+}

package/es/ProTreeModal/style/index.less

@@ -11,7 +11,7 @@
     display       : flex;
     flex-direction: row;
     height        : 482px;
-    margin-bottom : var(--zaui-space-size-md, 16px);
+    margin-bottom : calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
 
     .ant-tree-checkbox {
       margin-top: 2px;
@@ -28,7 +28,6 @@
       padding-bottom: var(--zaui-font-size-sm, 12px);
       color         : var(--zaui-text);
       font-size     : var(--zaui-font-size, 14px);
-      font-family   : PingFangSC-Regular, PingFang SC;
       line-height   : var(--zaui-font-size-xxl, 20px);
     }
 
@@ -49,7 +48,6 @@
     height        : 100%;
     color         : var(--zaui-text);
     font-size     : var(--zaui-font-size, 14px);
-    font-family   : PingFangSC-Regular, PingFang SC;
     line-height   : var(--zaui-font-size-xxl, 20px);
     border        : 1px solid #e6e6e6;
     border-radius : var(--zaui-border-radius, 4px);
@@ -132,7 +130,7 @@
     flex-direction : row;
     align-items    : center;
     justify-content: space-between;
-    margin-bottom  : var(--zaui-font-size-sm, 12px);
+    margin-bottom  : calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1));
     line-height    : var(--zaui-font-size-xxl, 20px);
     cursor         : pointer;
 
@@ -194,7 +192,6 @@
     margin-right   : var(--zaui-space-size-sm, 8px);
     padding        : 0 var(--zaui-space-size-xs);
     font-weight    : 400;
-    font-family    : PingFangSC-Regular, PingFang SC;
     line-height    : var(--zaui-font-size-lg-title);
     white-space    : nowrap;
     border-radius  : var(--zaui-border-radius-card);
@@ -216,7 +213,6 @@
   color          : #939599;
   font-weight    : 400;
   font-size      : var(--zaui-font-size, 14px);
-  font-family    : PingFangSC-Regular, PingFang SC;
 }
 
 .pro-transfer-right {

package/es/ProUpload/style/index.less

@@ -7,6 +7,7 @@
       background   : #F8F9FA;
       border-radius: var(--zaui-border-radius, 4px);
       padding      : var(--zaui-space-size-sm, 8px);
+
       .ant-upload.ant-upload-drag {
         background-color: var(--zaui-base-bg, #fff);
       }
@@ -27,17 +28,14 @@
             align-items: center;
 
             .icon-upload {
-              display      : inline-block;
-              // width: 34px;
-              // height: 26px;
-              font-size    : 30px;
-              color        : #C5C7CD;
-              // background: #c5c7cd;
+              display  : inline-block;
+              font-size: 30px;
+              color    : #C5C7CD;
             }
 
             .dragger-txt {
               margin-left: 9px;
-              font-size  : 14px;
+              font-size  : var(--zaui-font-size, 14px);
 
 
               color      : rgba(0, 0, 0, 0.85);
@@ -50,9 +48,9 @@
           }
 
           .file-ext {
-            text-align : center;
-            margin-top : 10px;
-            font-size  : 12x;
+            text-align: center;
+            margin-top: 10px;
+            font-size : var(--zaui-font-size-sm, 12px);
 
 
             color      : #939599;
@@ -88,11 +86,11 @@
             }
 
             .file-name {
-              display           : box;
-              overflow          : hidden;
+              display   : box;
+              overflow  : hidden;
               line-clamp: 1;
               box-orient: vertical;
-              word-break        : break-all;
+              word-break: break-all;
             }
 
             .file-ext {
@@ -133,6 +131,7 @@
       width  : 100%;
       display: block;
     }
+
     .pro-upload-button-inner {
       display: flex;
 
@@ -145,10 +144,10 @@
     .upload-tip-txt {
       margin-left: 10px;
       line-height: 32px;
-      font-size  : 12px;
+      font-size  : var(--zaui-font-size-sm, 12px);
 
 
-      color      : #939599;
+      color: #939599;
     }
   }
 
@@ -182,20 +181,20 @@
     }
 
     .file-item-image {
-      position     : relative;
-      overflow     : hidden;
+      position        : relative;
+      overflow        : hidden;
       // height       : 100%;
-      height       : 126px;
-      width: 126px ;
-      border       : 1px dashed #d9d9d9;
-      overflow     : hidden;
-      border-radius: 8px;
+      height          : 126px;
+      width           : 126px;
+      border          : 1px dashed #d9d9d9;
+      overflow        : hidden;
+      border-radius   : 8px;
 
       .file-type-icon-img {
-        position: absolute;
-        width: 30px;
-        top: 50%;
-        left: 50%;
+        position : absolute;
+        width    : 30px;
+        top      : 50%;
+        left     : 50%;
         transform: translate(-50%, -50%);
 
       }
@@ -238,10 +237,9 @@
 
         .action-item {
           color    : #fff;
-          font-size: 12px;
+          font-size: var(--zaui-font-size-sm, 12px);
           opacity  : 0.8;
 
-          // cursor: pointer;
           .action-icon {
             margin-right: 10px;
             transform   : translate(0, 3px);
@@ -276,29 +274,33 @@
     .ant-space-item {
       display: inline-flex;
     }
-    .pro-upload-image-footer{
+
+    .pro-upload-image-footer {
       margin-top: -8px;
     }
   }
+
   .file-actions {
     .file-action-item {
       padding-top: var(--zaui-space-size-xs, 4px) !important;
     }
+
     .action-icon {
-      display: inline-flex;
-      align-items: center;
-      color: inherit;
-      font-style: normal;
-      text-align: center;
+      display       : inline-flex;
+      align-items   : center;
+      color         : inherit;
+      font-style    : normal;
+      text-align    : center;
       text-transform: none;
       vertical-align: -0.15em;
       text-rendering: optimizeLegibility;
+
       span {
-        display: inline-flex;
-        align-items: center;
-        color: inherit;
-        font-style: normal;
-        text-align: center;
+        display       : inline-flex;
+        align-items   : center;
+        color         : inherit;
+        font-style    : normal;
+        text-align    : center;
         text-transform: none;
         vertical-align: -0.15em;
         text-rendering: optimizeLegibility;