@zat-design/sisyphus-react 3.2.1 → 3.2.2-beta.1

package/es/style/theme/antd.less

@@ -1,6 +1,6 @@
 @import './index';
 
-@zat-disabled-color : #BCBCBC;
+@zat-disabled-color: #bcbcbc;
 
 /* antd 默认样式重置 */
 
@@ -21,12 +21,12 @@
 
     // label 超过130px换行
     .ant-form-item-label {
-      flex         : 0 0 @zaui-form-label-width;
-      overflow     : initial;
-      line-height  : 1;
-      text-align   : @zaui-form-align;
-      white-space  : pre-wrap;
+      flex: 0 0 @zaui-form-label-width;
       padding-right: @zaui-space-size-sm;
+      overflow: initial;
+      line-height: 1;
+      white-space: pre-wrap;
+      text-align: @zaui-form-align;
 
       .ant-form-item-required {
         &::after {
@@ -34,12 +34,12 @@
         }
       }
 
-      &>label {
+      & > label {
         word-break: break-word;
 
         &::after {
-          margin : 0;
           display: none;
+          margin: 0;
         }
       }
 
@@ -48,21 +48,21 @@
       }
 
       &.ant-form-item-label-left {
-        &>.ant-form-item-required::before {
+        & > .ant-form-item-required::before {
           display: none;
         }
 
-        &>.ant-form-item-required::after {
-          margin-top : 1px;
-          color      : #ff4d4f;
-          font-size  : var(--zaui-font-size, 14px);
+        & > .ant-form-item-required::after {
+          margin-top: 1px;
+          color: #ff4d4f;
+          font-size: var(--zaui-font-size, 14px);
           line-height: 1;
-          content    : '*';
+          content: '*';
         }
       }
 
       &:not(.ant-form-item-label-left) {
-        &>.ant-form-item-required::after {
+        & > .ant-form-item-required::after {
           display: none;
         }
       }
@@ -74,8 +74,8 @@
   }
 
   // 字体颜色
-  .ant-form-item-label>label,
-  .ant-picker-input>input,
+  .ant-form-item-label > label,
+  .ant-picker-input > input,
   .ant-input,
   .ant-input-number,
   .ant-select,
@@ -93,7 +93,7 @@
 .ant-select-disabled,
 .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector,
 .ant-input-number-disabled,
-.ant-picker-input>input[disabled],
+.ant-picker-input > input[disabled],
 .ant-select-disabled.ant-select-multiple .ant-select-selection-item {
   .set-disabled-color();
 }
@@ -126,19 +126,19 @@
     }
   }
 
-  .ant-table-thead>tr>th {
-    background   : @zaui-table-header-bg;
+  .ant-table-thead > tr > th {
+    background: @zaui-table-header-bg;
     border-bottom: none;
 
     .ant-dropdown-trigger {
       .anticon-down {
-        width       : 0;
-        height      : 0;
-        margin      : 0 0 1px 4px;
-        border-top  : 6px solid #909090;
+        width: 0;
+        height: 0;
+        margin: 0 0 1px 4px;
+        border-top: 6px solid #909090;
         border-right: 5px solid transparent;
-        border-left : 5px solid transparent;
-        transition  : transform 0.8s;
+        border-left: 5px solid transparent;
+        transition: transform 0.8s;
 
         svg {
           display: none;
@@ -153,15 +153,15 @@
     }
 
     tr.ant-table-row:hover td {
-      background-color: @zaui-table-hover-bg  !important;
+      background-color: @zaui-table-hover-bg !important;
     }
 
-    &>tr>td {
+    & > tr > td {
       border-bottom: none;
     }
 
     tr.ant-table-row-selected {
-      &:hover>td {
+      &:hover > td {
         background: @zaui-table-selected-hover-bg;
       }
 
@@ -171,13 +171,13 @@
     }
   }
 
-  .ant-table-thead>tr>th,
+  .ant-table-thead > tr > th,
   .ant-table-footer {
     .set-text-color();
     .set-text-size();
   }
 
-  .ant-table-tbody>tr>td {
+  .ant-table-tbody > tr > td {
     .set-text-size();
 
     .ant-btn {
@@ -206,12 +206,20 @@
     }
   }
 
-  &.ant-table-scroll-horizontal table {
+  & table {
+    .ant-table-thead > tr > th,
+    .ant-table-tbody > tr > td,
+    .ant-table tfoot > tr > th,
+    .ant-table tfoot > tr > td {
+      padding: calc(5px + var(--zaui-size) * 8px) 16px;
+    }
+  }
 
-    .ant-table-thead>tr>th,
-    .ant-table-tbody>tr>td,
-    .ant-table tfoot>tr>th,
-    .ant-table tfoot>tr>td {
+  &.ant-table-scroll-horizontal table {
+    .ant-table-thead > tr > th,
+    .ant-table-tbody > tr > td,
+    .ant-table tfoot > tr > th,
+    .ant-table tfoot > tr > td {
       padding: calc(5px + var(--zaui-size) * 8px) 16px;
     }
 
@@ -226,17 +234,17 @@
         }
       }
 
-      .ant-table-row:hover>td {
+      .ant-table-row:hover > td {
         background-color: @zaui-table-strip-bg;
       }
 
       tr.ant-table-row-selected {
-        &:hover>td {
-          background: @zaui-table-selected-bg  !important;
+        &:hover > td {
+          background: @zaui-table-selected-bg !important;
         }
 
         td {
-          background: @zaui-table-selected-bg  !important;
+          background: @zaui-table-selected-bg !important;
         }
       }
 
@@ -258,7 +266,7 @@
           & td,
           & td.ant-table-cell-fix-right,
           & td.ant-table-cell-fix-left {
-            background-color: #fff;
+            background-color: #fff !important;
           }
 
           & td {
@@ -267,10 +275,10 @@
         }
 
         .ant-table-row:nth-child(odd) {
-          background-color: @zaui-table-strip-bg;
+          background-color: @zaui-table-strip-bg !important;
 
           & td {
-            background-color: @zaui-table-strip-bg;
+            background-color: @zaui-table-strip-bg !important;
           }
         }
       }
@@ -279,21 +287,20 @@
 
   .ant-table-cell {
     .ant-btn-link {
-      padding    : 0;
-      height     : auto;
+      height: auto;
+      padding: 0;
       user-select: text;
     }
 
     a {
+      color: var(--zaui-brand, #006aff);
       user-select: text;
-      color      : var(--zaui-brand, #006aFF);
     }
   }
 
   &.ant-table-fixed-header {
     .ant-table-tbody {
       .ant-table-row:nth-child(even) {
-
         td {
           background: #ffffff !important;
         }
@@ -318,15 +325,15 @@
   .ant-tabs-nav-list {
     &.ant-tabs-card {
       .ant-tabs-tab {
-        padding     : 8px var(--zaui-space-size-md, 16px);
         margin-right: 10px;
+        padding: 8px var(--zaui-space-size-md, 16px);
       }
     }
 
     .ant-tabs-tab {
       .set-text-size();
-      padding    : 12px var(--zaui-space-size-md, 16px);
       margin-left: 0;
+      padding: 12px var(--zaui-space-size-md, 16px);
     }
   }
 
@@ -339,6 +346,11 @@
   }
 
   &.ant-tabs-card {
+    .ant-tabs-tab {
+      margin-right: 10px !important;
+      padding: 8px calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1)) !important;
+    }
+
     .ant-tabs-nav .ant-tabs-tab-btn {
       font-size: var(--zaui-font-size, 14px);
     }
@@ -351,8 +363,8 @@
   font-size: @zaui-font-size;
 
   .ant-btn-primary {
-    color       : #fff;
-    background  : @zaui-brand;
+    color: #fff;
+    background: @zaui-brand;
     border-color: @zaui-brand;
   }
 
@@ -360,24 +372,24 @@
   &.ant-btn-primary[disabled]:hover,
   &.ant-btn-primary[disabled]:focus,
   &.ant-btn-primary[disabled]:active {
-    color       : #fff;
-    text-shadow : none;
-    background  : @zaui-brand;
+    color: #fff;
+    text-shadow: none;
+    background: @zaui-brand;
     border-color: @zaui-brand;
-    box-shadow  : none;
-    opacity     : 0.6;
+    box-shadow: none;
+    opacity: 0.6;
   }
 
   &.ant-btn-link[disabled],
   &.ant-btn-link[disabled]:hover,
   &.ant-btn-link[disabled]:focus,
   &.ant-btn-link[disabled]:active {
-    color       : @zat-disabled-color;
-    text-shadow : none;
-    background  : none;
+    color: @zat-disabled-color;
+    text-shadow: none;
+    background: none;
     border-color: none;
-    box-shadow  : none;
-    opacity     : 0.6;
+    box-shadow: none;
+    opacity: 0.6;
   }
 
   &.ant-btn-link {
@@ -404,22 +416,22 @@
 
 // 分页
 .ant-pagination {
-  color    : @zaui-text  !important;
-  font-size: @zaui-font-size  !important;
+  color: @zaui-text !important;
+  font-size: @zaui-font-size !important;
 
   &.ant-table-pagination {
     margin: @zaui-height-size-md 0;
   }
 
   .ant-pagination-item {
-    min-width       : 32px;
-    height          : 32px;
-    margin-right    : 8px;
-    font-size       : @zaui-font-size;
-    line-height     : 32px;
+    min-width: 32px;
+    height: 32px;
+    margin-right: 8px;
+    font-size: @zaui-font-size;
+    line-height: 32px;
     background-color: #f7f9fa;
-    border          : 0;
-    border-radius   : @zaui-border-radius;
+    border: 0;
+    border-radius: @zaui-border-radius;
 
     a {
       .set-text-color();
@@ -435,8 +447,8 @@
   }
 
   .ant-pagination-item-active a {
-    color        : #fff;
-    background   : @zaui-brand;
+    color: #fff;
+    background: @zaui-brand;
     border-radius: @zaui-border-radius;
   }
 
@@ -449,12 +461,12 @@
   .ant-pagination-next,
   .ant-pagination-jump-prev,
   .ant-pagination-jump-next {
-    min-width       : 32px;
-    height          : 32px;
-    line-height     : 30px;
+    min-width: 32px;
+    height: 32px;
+    line-height: 30px;
     background-color: #f7f9fa;
-    border          : 0;
-    border-radius   : @zaui-border-radius;
+    border: 0;
+    border-radius: @zaui-border-radius;
   }
 
   .ant-pagination-prev,
@@ -473,27 +485,27 @@
 
   .ant-pagination-prev .ant-pagination-item-link,
   .ant-pagination-next .ant-pagination-item-link {
-    min-width       : 32px;
-    height          : 32px;
-    line-height     : 32px;
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
     background-color: #fafafa;
-    border          : 0;
-    border-radius   : @zaui-border-radius;
+    border: 0;
+    border-radius: @zaui-border-radius;
   }
 
   .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
     .set-text-color();
     .set-text-size();
-    width  : 100%;
-    height : 32px;
+    width: 100%;
+    height: 32px;
     padding: 0 12px;
   }
 
   .ant-select:not(.ant-select-customize-input) .ant-select-selector {
-    position        : relative;
+    position: relative;
     background-color: #fafafa;
-    border          : 0;
-    border-radius   : @zaui-border-radius;
+    border: 0;
+    border-radius: @zaui-border-radius;
   }
 
   .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon,
@@ -504,7 +516,6 @@
 
 // ant-descriptions
 .ant-descriptions {
-
   .ant-descriptions-item-label,
   .ant-descriptions-item-content {
     .set-text-color();
@@ -523,8 +534,8 @@
 
 // ant-menu
 .ant-menu {
-  color    : @zaui-text  !important;
-  font-size: @zaui-font-size  !important;
+  color: @zaui-text !important;
+  font-size: @zaui-font-size !important;
 
   .ant-menu-item a {
     .set-text-color();
@@ -544,13 +555,13 @@
 .ant-select {
   .ant-select-arrow {
     .anticon-down {
-      width         : 0;
-      height        : 0;
+      width: 0;
+      height: 0;
       vertical-align: middle;
-      border-top    : 6px solid #909090;
-      border-right  : 5px solid transparent;
-      border-left   : 5px solid transparent;
-      transition    : transform 0.3s;
+      border-top: 6px solid #909090;
+      border-right: 5px solid transparent;
+      border-left: 5px solid transparent;
+      transition: transform 0.3s;
 
       svg {
         display: none;
@@ -561,22 +572,22 @@
   // 多选样式重置
   &.ant-select-multiple {
     .ant-select-selection-item {
-      align-items  : center;
+      align-items: center;
       padding-right: 7px;
-      background   : #f2f3f5;
+      background: #f2f3f5;
 
       .ant-select-selection-item-remove {
-        display        : flex;
-        align-items    : center;
+        display: flex;
+        align-items: center;
         justify-content: center;
-        width          : 14px;
-        height         : 14px;
-        background     : #e0e1e7;
-        border-radius  : 100%;
+        width: 14px;
+        height: 14px;
+        background: #e0e1e7;
+        border-radius: 100%;
 
         .anticon-close {
           margin-top: 2px;
-          color     : #4e5969;
+          color: #4e5969;
         }
       }
     }
@@ -619,7 +630,6 @@
     padding-bottom: 20px;
   }
 
-
   &.ant-input-textarea-show-count.ant-input-textarea-in-form-item {
     &::after {
       background: transparent;
@@ -632,13 +642,13 @@
     }
 
     &::after {
-      position     : absolute;
-      right        : 16px;
-      bottom       : 1px;
+      position: absolute;
+      right: 16px;
+      bottom: 1px;
+      width: calc(100% - 18px);
       margin-bottom: 0;
-      background   : #fff;
-      width        : calc(100% - 18px);
-      text-align   : right;
+      text-align: right;
+      background: #fff;
     }
   }
 }
@@ -647,28 +657,27 @@
 .ant-space {
   &.ant-space-vertical {
     display: flex;
-    width  : 100%;
+    width: 100%;
   }
 }
 
 // Cascader级联选择
 .ant-cascader {
   .ant-cascader-menu {
-    height    : auto;
+    height: auto;
     max-height: 326px;
   }
 }
 
 .ant-select-dropdown {
-
   // tree select 样式重置
   .ant-select-tree .ant-select-tree-node-content-wrapper {
-    min-height : 0px;
+    min-height: 0px;
     line-height: initial;
   }
 
   .ant-select-tree .ant-select-tree-treenode {
-    padding-top   : 4px;
+    padding-top: 4px;
     padding-bottom: 4px;
   }