@zat-design/sisyphus-react 3.0.13

package/es/style/theme/antd.less

@@ -0,0 +1,647 @@
+@import './index';
+
+@zat-table-zebra-bg   : #f7f9fc;
+@zat-disabled-color   : #BCBCBC;
+@zat-table-selected-bg: rgb(230, 244, 255);
+
+/* antd 默认样式重置 */
+
+// 表单
+.ant-form,
+.ant-drawer,
+.ant-modal {
+  .ant-input-textarea-show-count.ant-input-textarea-in-form-item {
+    &::after {
+      background: transparent;
+    }
+  }
+
+  .ant-form-item {
+    &.ant-form-item-with-help {
+      transition: none;
+    }
+
+    // label 超过112px换行
+    .ant-form-item-label {
+      width             : @zaui-form-label-width;
+      max-width         : @zaui-form-label-width;
+      // margin-right   : @zaui-height-size-md;
+      overflow          : initial;
+      line-height       : 1;
+      // text-align  : @zaui-form-align;
+      white-space       : pre-wrap;
+
+      &>label {
+        word-break: break-word;
+      }
+
+      & .ant-form-item-required::before {
+        display: inline-block;
+      }
+
+      &.ant-form-item-label-left {
+        &>.ant-form-item-required::before {
+          display: none;
+        }
+
+        &>.ant-form-item-required::after {
+          margin-top : 1px;
+          color      : #ff4d4f;
+          font-size  : 14px;
+          font-family: SimSun, sans-serif;
+          line-height: 1;
+          content    : '*';
+        }
+      }
+
+      &:not(.ant-form-item-label-left) {
+        &>.ant-form-item-required::after {
+          display: none;
+        }
+      }
+    }
+
+    .ant-form-item-explain-error {
+      .set-text-size();
+    }
+  }
+
+  // 字体颜色
+  .ant-form-item-label>label,
+  .ant-picker-input>input,
+  .ant-input,
+  .ant-input-number,
+  .ant-select,
+  .ant-select-dropdown {
+    .set-text-color();
+    .set-text-size();
+  }
+
+  .ant-form-item {
+    margin-bottom: @zaui-height-border;
+  }
+}
+
+.ant-input[disabled],
+.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-select-disabled.ant-select-multiple .ant-select-selection-item {
+  .set-disabled-color();
+}
+
+// ant-table
+.ant-table {
+
+  // 空态图白色
+  .ant-table-placeholder {
+    td {
+      background: #ffffff !important;
+    }
+  }
+
+  .set-text-size();
+  color: @zaui-text;
+
+  .ant-table-thead {
+    .ant-table-cell {
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  .ant-table-thead>tr>th {
+    background   : @zat-table-zebra-bg;
+    border-bottom: none;
+
+    .ant-dropdown-trigger {
+      .anticon-down {
+        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;
+
+        svg {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .ant-table-tbody {
+    .ant-table-row:nth-child(even) {
+      background-color: @zat-table-zebra-bg;
+    }
+
+    tr.ant-table-row:hover td {
+      background-color: @zat-table-zebra-bg  !important;
+    }
+
+    &>tr>td {
+      border-bottom: none;
+    }
+
+    tr.ant-table-row-selected {
+      &:hover>td {
+        background: @zat-table-selected-bg  !important;
+      }
+
+      td {
+        background: @zat-table-selected-bg  !important;
+      }
+    }
+  }
+
+  .ant-table-thead>tr>th,
+  .ant-table-footer {
+    .set-text-color();
+    .set-text-size();
+  }
+
+  .ant-table-tbody>tr>td {
+    .set-text-size();
+
+    .ant-btn {
+      .set-text-size();
+    }
+  }
+
+  // 表格空显示-
+  .ant-table-content {
+    .ant-table-tbody {
+      .ant-table-cell:empty:before {
+        content: '-';
+      }
+    }
+
+    .ant-table-cell-fix-right {
+      &.ant-table-cell:empty:before {
+        content: none;
+      }
+    }
+  }
+
+  &.ant-table-scroll-horizontal {
+    table .ant-table-tbody .ant-table-row:nth-child(even) td {
+      background: @zat-table-zebra-bg;
+    }
+  }
+
+  &.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;
+    }
+
+    // 偶数行背景色设置
+    .ant-table-tbody {
+      .ant-table-row:nth-child(even) {
+        background-color: @zat-table-zebra-bg;
+
+        & td.ant-table-cell-fix-right,
+        & td.ant-table-cell-fix-left {
+          background-color: @zat-table-zebra-bg;
+        }
+      }
+
+      .ant-table-row:hover>td {
+        background-color: @zat-table-zebra-bg;
+      }
+
+      tr.ant-table-row-selected {
+        &:hover>td {
+          background: @zat-table-selected-bg  !important;
+        }
+
+        td {
+          background: @zat-table-selected-bg  !important;
+        }
+      }
+
+      tr td {
+        border-bottom: none;
+      }
+    }
+  }
+
+  // 开启scroll时，会新增一行tr影响偶数行底色
+  &.ant-table-scroll-horizontal {
+    table {
+      .ant-table-tbody {
+        .ant-table-row:nth-child(even) {
+          &:hover td {
+            background-color: @zat-table-zebra-bg  !important;
+          }
+
+          & td,
+          & td.ant-table-cell-fix-right,
+          & td.ant-table-cell-fix-left {
+            background-color: #fff;
+          }
+
+          & td {
+            background-color: #fff;
+          }
+        }
+
+        .ant-table-row:nth-child(odd) {
+          background-color: @zat-table-zebra-bg;
+
+          & td {
+            background-color: @zat-table-zebra-bg;
+          }
+        }
+      }
+    }
+  }
+
+  .ant-table-cell {
+    .ant-btn-link {
+      padding    : 0;
+      height     : auto;
+      user-select: text;
+    }
+
+    a {
+      user-select: text;
+      color      : var(--zaui-brand, #006aFF);
+    }
+  }
+
+  &.ant-table-fixed-header {
+    .ant-table-tbody {
+      .ant-table-row:nth-child(even) {
+        background-color: #ffffff;
+
+        td {
+          background: #ffffff !important;
+        }
+      }
+
+      .ant-table-row:nth-child(odd) {
+        background-color: @zat-table-zebra-bg;
+
+        td {
+          background: @zat-table-zebra-bg  !important;
+        }
+      }
+    }
+  }
+}
+
+// ant-tabs
+.ant-tabs {
+  overflow: inherit !important;
+  .set-text-color();
+
+  .ant-tabs-nav-list {
+    &.ant-tabs-card {
+      .ant-tabs-tab {
+        padding     : 8px var(--zaui-space-size-md, 16px);
+        margin-right: 10px;
+      }
+    }
+
+    .ant-tabs-tab {
+      .set-text-size();
+      padding    : 12px var(--zaui-space-size-md, 16px);
+      margin-left: 0;
+    }
+  }
+
+  .ant-tabs-nav {
+    margin-bottom: @zaui-height-border;
+  }
+
+  .ant-tabs-nav .ant-tabs-tab-btn {
+    font-size: var(--zaui-font-size-lg, 16px);
+  }
+
+  &.ant-tabs-card {
+    .ant-tabs-nav .ant-tabs-tab-btn {
+      font-size: var(--zaui-font-size, 14px);
+    }
+  }
+}
+
+// 按钮
+.ant-btn {
+  .set-text-color();
+  font-size: @zaui-font-size;
+
+  .ant-btn-primary {
+    color       : #fff;
+    background  : @zaui-brand;
+    border-color: @zaui-brand;
+  }
+
+  &.ant-btn-primary[disabled],
+  &.ant-btn-primary[disabled]:hover,
+  &.ant-btn-primary[disabled]:focus,
+  &.ant-btn-primary[disabled]:active {
+    color       : #fff;
+    text-shadow : none;
+    background  : @zaui-brand;
+    border-color: @zaui-brand;
+    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;
+    border-color: none;
+    box-shadow  : none;
+    opacity     : 0.6;
+  }
+
+  &.ant-btn-link {
+    .set-brand-color();
+  }
+}
+
+// 分割线
+.ant-divider {
+  .ant-divider-inner-text {
+    .set-text-color();
+    .set-text-size();
+  }
+}
+
+// 卡片
+.ant-card {
+  margin-bottom: @zaui-space-size-md;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// 分页
+.ant-pagination {
+  color    : @zaui-text  !important;
+  font-size: @zaui-font-size  !important;
+
+  &.ant-table-pagination {
+    margin: @zaui-height-border 0;
+  }
+
+  .ant-pagination-item {
+    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;
+
+    a {
+      .set-text-color();
+
+      &:hover {
+        .set-brand-color();
+      }
+    }
+  }
+
+  .ant-pagination-options-size-changer.ant-select-show-arrow {
+    margin-right: 5px;
+  }
+
+  .ant-pagination-item-active a {
+    color        : #fff;
+    background   : @zaui-brand;
+    border-radius: @zaui-border-radius;
+  }
+
+  .ant-pagination-item-active:focus-visible a,
+  .ant-pagination-item-active:hover a {
+    color: #fff;
+  }
+
+  .ant-pagination-prev,
+  .ant-pagination-next,
+  .ant-pagination-jump-prev,
+  .ant-pagination-jump-next {
+    min-width       : 32px;
+    height          : 32px;
+    line-height     : 30px;
+    background-color: #f7f9fa;
+    border          : 0;
+    border-radius   : @zaui-border-radius;
+  }
+
+  .ant-pagination-prev,
+  .ant-pagination-next {
+    svg {
+      .set-text-color();
+      .set-text-size();
+    }
+
+    &:hover {
+      svg {
+        color: @zaui-brand;
+      }
+    }
+  }
+
+  .ant-pagination-prev .ant-pagination-item-link,
+  .ant-pagination-next .ant-pagination-item-link {
+    min-width       : 32px;
+    height          : 32px;
+    line-height     : 32px;
+    background-color: #fafafa;
+    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;
+    padding: 0 12px;
+  }
+
+  .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    position        : relative;
+    background-color: #fafafa;
+    border          : 0;
+    border-radius   : @zaui-border-radius;
+  }
+
+  .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon,
+  .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon {
+    color: @zaui-brand;
+  }
+}
+
+// ant-descriptions
+.ant-descriptions {
+
+  .ant-descriptions-item-label,
+  .ant-descriptions-item-content {
+    .set-text-color();
+    .set-text-size();
+  }
+}
+
+// ant-breadcrumb
+.ant-breadcrumb {
+  .set-text-size();
+
+  .ant-breadcrumb-link {
+    .set-lg-text-size();
+  }
+}
+
+// ant-menu
+.ant-menu {
+  color    : @zaui-text  !important;
+  font-size: @zaui-font-size  !important;
+
+  .ant-menu-item a {
+    .set-text-color();
+  }
+
+  .ant-menu-item-selected a,
+  .ant-menu-item-selected a:hover {
+    .set-brand-color();
+  }
+}
+
+.ant-btn-primary {
+  color: #fff;
+}
+
+// 下拉框三角样式替换
+.ant-select {
+  .ant-select-arrow {
+    .anticon-down {
+      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;
+
+      svg {
+        display: none;
+      }
+    }
+  }
+
+  // 多选样式重置
+  &.ant-select-multiple {
+    .ant-select-selection-item {
+      align-items  : center;
+      padding-right: 7px;
+      background   : #f2f3f5;
+
+      .ant-select-selection-item-remove {
+        display        : flex;
+        align-items    : center;
+        justify-content: center;
+        width          : 14px;
+        height         : 14px;
+        background     : #e0e1e7;
+        border-radius  : 100%;
+
+        .anticon-close {
+          margin-top: 2px;
+          color     : #4e5969;
+        }
+      }
+    }
+  }
+}
+
+// 表格样式重置
+.ant-form {
+  .pro-form-control {
+    .ant-btn-primary {
+      margin-right: @zaui-height-size-md;
+    }
+
+    .ant-btn-default {
+      margin-left: 0;
+    }
+  }
+}
+
+// 弹窗
+.ant-modal {
+  .ant-modal-header {
+    border-bottom: none;
+  }
+
+  .ant-modal-footer {
+    border-top: none;
+  }
+}
+
+// 数字输入框
+.ant-input-number {
+  width: 100%;
+}
+
+.ant-input-textarea {
+  position: relative;
+
+  textarea.ant-input {
+    padding-bottom: 20px;
+  }
+
+
+  &.ant-input-textarea-show-count.ant-input-textarea-in-form-item {
+    &::after {
+      background: transparent;
+    }
+
+    &.disabled {
+      &::after {
+        background: #f2f2f2;
+      }
+    }
+
+    &::after {
+      position     : absolute;
+      right        : 16px;
+      bottom       : 1px;
+      margin-bottom: 0;
+      background   : #fff;
+      width        : calc(100% - 18px);
+      text-align   : right;
+    }
+  }
+}
+
+// 间隔
+.ant-space {
+  &.ant-space-vertical {
+    display: flex;
+    width  : 100%;
+  }
+}
+
+// Cascader级联选择
+.ant-cascader {
+  .ant-cascader-menu {
+    height    : auto;
+    max-height: 326px;
+  }
+}