UNPKG

wetrade-design

Version:

一款多语言支持Vue3的UI框架

1,058 lines (899 loc) 25 kB
@import '../../style/themes/index'; @import '../../style/mixins/index'; @import './size'; @import './bordered'; @import './resize.less'; @table-prefix-cls: ~'@{wd-prefix}-table'; @tree-prefix-cls: ~'@{wd-prefix}-tree'; @dropdown-prefix-cls: ~'@{wd-prefix}-dropdown'; @radio-prefix-cls: ~'@{wd-prefix}-radio'; @checkbox-prefix-cls: ~'@{wd-prefix}-checkbox'; @descriptions-prefix-cls: ~'@{wd-prefix}-descriptions'; @table-header-icon-color: #bfbfbf; @table-header-icon-color-hover: darken(@table-header-icon-color, 10%); @table-sticky-zindex: calc(@zindex-table-fixed + 1); @table-sticky-scroll-bar-active-bg: fade(@table-sticky-scroll-bar-bg, 80%); @table-filter-dropdown-max-height: 188px; @table-prefix-cell-cls: ~'@{table-prefix-cls}-cell'; @empty-prefix-cls: ~'@{wd-prefix}-empty'; @spin-prefix-cls: ~'@{wd-prefix}-spin'; @scrollbar-prefix-cls: ~'@{wd-prefix}-scrollbar'; @scrollbar-bar-prefix-cls: ~'@{wd-prefix}-scrollbar-bar'; @icon-prefix-cls: ~'@{wd-prefix}-icon'; .@{table-prefix-cls}-wrapper { clear: both; max-width: 100%; height: 100%; .clearfix(); .@{spin-prefix-cls}-nested-loading > div > .@{spin-prefix-cls}-placement-top .@{spin-prefix-cls}-dot { top: 40px; } .@{spin-prefix-cls}-container.@{spin-prefix-cls}-blur { .@{empty-prefix-cls} { opacity: 0; } } } .@{table-prefix-cls} { .reset-component(); position: relative; font-size: @table-font-size; background: @table-bg; border-radius: @table-border-radius-base; width: 100%; max-width: 100%; height: 100%; // https://github.com/ant-design/ant-design/issues/17611 table { position: relative; width: 100%; text-align: left; border-radius: 0; border-collapse: separate; border-spacing: 0; &::before { position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: @table-body-border; } &::after { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: @table-body-border; } } // ============================= Cell ============================= &-thead > tr > th, tfoot > tr > th, tfoot > tr > td { position: relative; padding: @table-header-padding-vertical @table-header-padding-horizontal; overflow-wrap: break-word; &.@{table-prefix-cls}-cell-action { padding: @table-header-cell-action-padding; } } &-tbody > tr > td { position: relative; overflow-wrap: break-word; // .@{table-prefix-cell-cls}-box { padding: @table-body-padding-vertical @table-header-padding-horizontal @table-body-padding-vertical - 1px; // } &.@{table-prefix-cls}-cell-action { padding: @table-body-cell-action-padding; } } &-cell-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: keep-all; // TODO 这里加box的div问题很多需要解决,因为hover背景色导致 // .@{table-prefix-cell-cls}-box { // overflow: hidden; // white-space: nowrap; // text-overflow: ellipsis; // word-break: keep-all; // } // Fixed first or last should special process &.@{table-prefix-cls}-cell-fix-left-last, &.@{table-prefix-cls}-cell-fix-right-first { overflow: visible; .@{table-prefix-cls}-cell-content { display: block; overflow: hidden; text-overflow: ellipsis; } } .@{table-prefix-cls}-column-title { overflow: hidden; text-overflow: ellipsis; word-break: keep-all; } } &-cell-ellipsis-num { text-overflow: inherit; } // ============================ Title ============================= &-title { padding: @table-padding-vertical @table-padding-horizontal; } // ============================ Footer ============================ &-footer { padding: @table-padding-vertical @table-padding-horizontal; color: @table-footer-color; background: @table-footer-bg; } // ============================ Header ============================ &-thead { > tr { > th { position: relative; color: @table-header-font-color; font-weight: 400; text-align: left; background: @table-header-bg; border-bottom: @border-width-base @border-style-base @table-header-border-color; // transition: background 0.3s ease; font-size: @table-font-size; &[colspan]:not([colspan='1']) { text-align: center; } &:not(:last-child):not(.@{table-prefix-cls}-selection-column):not( .@{table-prefix-cls}-row-expand-icon-cell ):not([colspan])::before { position: absolute; top: 50%; right: 0; width: 1px; height: 1.6em; background-color: @table-header-cell-split-color; transform: translateY(-50%); transition: background-color 0.3s; content: ''; } } } > tr:not(:last-child) > th { &[colspan] { border-bottom: 0; } } } // ============================= Body ============================= &-body { overflow: hidden; // feat_table_scrollbar height: 100%; .@{scrollbar-bar-prefix-cls} { z-index: 2; } } &-tbody { > tr { > td { border-bottom: @border-width-base @border-style-base @table-body-border-color; // transition: background 0.3s; font-size: @table-font-size; // ========================= Nest Table =========================== > .@{table-prefix-cls}-wrapper:only-child, > .@{table-prefix-cls}-expanded-row-fixed > .@{table-prefix-cls}-wrapper:only-child { .@{table-prefix-cls} { // margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal + // ceil(@font-size-sm * 1.4)); &-tbody > tr:last-child > td { border-bottom: 0; &:first-child, &:last-child { border-radius: 0; } } } } &.@{table-prefix-cls}-cell-no-padding { padding: 0; } } &.@{table-prefix-cls}-row:not(.@{table-prefix-cls}-row-selected):hover > td, &:not(.@{table-prefix-cls}-row-selected) > td.@{table-prefix-cls}-cell-row-hover { // .@{table-prefix-cell-cls}-box { background: @table-row-hover-bg; &.@{table-prefix-cls}-cell-operability { &:hover { background-color: @table-body-cell-operability-bg; } } // } } &.@{table-prefix-cls}-row-selected { > td { background: @table-selected-row-bg; border-color: rgba(0, 0, 0, 0.03); } &:hover { > td { background: @table-selected-row-bg; } } } } } // =========================== Summary ============================ &-summary { position: relative; z-index: @zindex-table-fixed; background: @table-bg; div& { box-shadow: 0 -@border-width-base 0 @table-border-color; } > tr { > th, > td { border-bottom: @border-width-base @border-style-base @table-border-color; } } } // ========================== Pagination ========================== &-pagination.@{wd-prefix}-pagination { margin: 16px 0; } &-pagination { display: flex; flex-wrap: wrap; row-gap: @padding-xs; > * { flex: none; } &-left { justify-content: flex-start; } &-center { justify-content: center; } &-right { justify-content: flex-end; } } // ================================================================ // = Function = // ================================================================ // ============================ Sorter ============================ &-thead th.@{table-prefix-cls}-column-has-sorters { cursor: pointer; transition: all 0.3s; // &:hover { // // background: @table-header-sort-active-bg; // background-color: transparent; // &::before { // background-color: transparent !important; // } // } // https://github.com/ant-design/ant-design/issues/30969 // &.@{table-prefix-cls}-cell-fix-left:hover, // &.@{table-prefix-cls}-cell-fix-right:hover { // background: @table-fixed-header-sort-active-bg; // } } // &-thead th.@{table-prefix-cls}-column-sort { // background: @table-header-sort-bg; // &::before { // background-color: transparent !important; // } // } td&-column-sort { background: @table-body-sort-bg; } &-column-title { position: relative; z-index: 1; // flex: 1; } &-column-sorters { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-all; line-height: @line-height-base; display: inline-flex; align-items: center; // display: flex; // flex: auto; // align-items: center; // justify-content: space-between; &::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; content: ''; } } &-column-sorter { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 12px; height: 12px; margin-left: 1px; color: @table-header-icon-color; font-size: 0; transition: color 0.3s; &-inner { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: 12px; height: 12px; cursor: pointer; } &-up, &-down { position: absolute; z-index: @zindex-table-fixed - 1; font-size: 9px; color: @icon-secondary; &.active { color: @brand-primary; } } &-up { top: -1px; } &-down { bottom: -1px; } &-up + &-down { // margin-top: -0.4em; } } &-column-sorters:hover &-column-sorter { color: darken(@table-header-icon-color, 10%); } // ============================ Filter ============================ &-filter-column { display: flex; justify-content: space-between; align-items: center; } &-filter-trigger { position: relative; display: flex; align-items: center; color: @icon-secondary; padding: 1px; font-size: @icon-size-base; width: @icon-size-lg; height: @icon-size-lg; border-radius: @border-radius-xs; cursor: pointer; transition: all 0.3s; &:hover { color: @icon-primary; background: @table-filter-hover-background-color; } &:active { color: @icon-primary; background: @table-filter-active-background-color; } &.active { color: @table-filter-active-color; } } &-filter-trigger-visible { color: @table-filter-active-color; } // Dropdown &-filter-dropdown { .reset-component(); min-width: @table-filter-dropdown-min-width; max-width: @table-filter-dropdown-max-width; background-color: @dropdown-menu-bg; border-radius: @border-radius-big; box-shadow: @shadow-200-drop; // Reset menu .@{dropdown-prefix-cls}-menu { // https://github.com/ant-design/ant-design/issues/4916 // https://github.com/ant-design/ant-design/issues/19542 max-height: @table-filter-dropdown-max-height; overflow-x: hidden; border: 0; box-shadow: none; padding: @table-filter-dropdown-menu-padding; &-title-content { display: flex; justify-content: flex-start; align-items: center; overflow: hidden; } &-item { padding: @table-filter-dropdown-menu-item-padding; line-height: @table-filter-dropdown-menu-item-line-height; } // &-item-selected { // &:hover { // background-color: @table-filter-dropdown-item-selected-background-color !important; // } // } &:empty::after { display: block; padding: 8px 0; color: @disabled-color; font-size: @font-size-sm; text-align: center; content: 'Not Found'; } } &-tree { padding: 8px 8px 0; .@{tree-prefix-cls}-treenode .@{tree-prefix-cls}-node-content-wrapper:hover { background-color: @tree-node-hover-bg; } .@{tree-prefix-cls}-treenode-checkbox-checked .@{tree-prefix-cls}-node-content-wrapper { &, &:hover { background-color: @tree-node-selected-bg; } } } &-search { padding: @padding-xs @padding-xs 0; &-input { width: @table-filter-dropdown-input-width; input { min-width: 140px; } .@{iconfont-css-prefix} { color: @disabled-color; } } } &-checkall { width: 100%; margin-bottom: 4px; margin-left: 4px; } &-submenu > ul { max-height: calc(100vh - 130px); overflow-x: hidden; overflow-y: auto; } // Checkbox &, &-submenu { .@{wd-prefix}-checkbox-wrapper + span { padding-left: 8px; } } // Operation &-btns { position: relative; display: flex; justify-content: center; padding: @table-filter-dropdown-btns-padding; overflow: hidden; background-color: @table-filter-btns-bg; border-radius: @border-radius-big; button { margin-left: @margin-xs; } &::after { position: absolute; top: 0; left: @table-operation-left; width: calc(100% - @padding-xs - @padding-xs); height: 1px; background-color: @line-devide; content: ''; } } } &-filter-dropdown-multiple { .@{checkbox-prefix-cls}-wrapper { padding: 0; line-height: @table-filter-dropdown-wrapper-height; height: @table-filter-dropdown-wrapper-height; } .@{dropdown-prefix-cls}-menu-title-content { color: @text-primary; } .@{table-prefix-cls}-filter-dropdown-btns { justify-content: flex-start; margin-top: @table-filter-dropdown-btns-margin-top; .@{checkbox-prefix-cls}-wrapper { height: @table-filter-dropdown-menu-item-line-height; line-height: @table-filter-dropdown-menu-item-line-height; padding: @table-filter-dropdown-multiple-wrapper-padding; .@{checkbox-prefix-cls}-text { padding-left: @table-filter-dropdown-wrapper-span-padding-left; } } } .@{checkbox-prefix-cls}-wrapper + span { padding-left: @table-filter-dropdown-wrapper-span-padding-left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } &-filter-dropdown-radio { .@{dropdown-prefix-cls}-menu-item { padding: 0; .@{radio-prefix-cls}-wrapper { display: none; } .@{dropdown-prefix-cls}-menu-title-content { padding: @table-filter-dropdown-menu-title-content-padding; } } .@{checkbox-prefix-cls}-wrapper { height: @table-filter-dropdown-menu-item-line-height; line-height: @table-filter-dropdown-menu-item-line-height; padding: @table-filter-dropdown-radio-wrapper-padding; } .@{radio-prefix-cls}-wrapper + span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .@{table-prefix-cls}-filter-dropdown-btns { margin-top: @table-filter-dropdown-btns-margin-top; button { font-size: @table-filter-dropdown-btns-button-font-size; margin: 0; } } } // ========================== Selections ========================== &-selection-col { width: @table-selection-column-width; } &-bordered &-selection-col { width: @table-selection-column-width + 18px; } table tr th&-selection-column, table tr td&-selection-column { padding-right: @padding-xs; padding-left: @padding-xs; text-align: center; .@{wd-prefix}-radio-wrapper { margin-right: 0; } } table tr th&-selection-column&-cell-fix-left { z-index: 3; } table tr th&-selection-column::after { background-color: transparent !important; } &-selection { position: relative; display: inline-flex; flex-direction: column; &-extra { position: absolute; top: 0; z-index: 1; cursor: pointer; transition: all 0.3s; margin-inline-start: 100%; padding-inline-start: @padding-xss; .@{iconfont-css-prefix} { color: @table-header-icon-color; font-size: 10px; &:hover { color: @table-header-icon-color-hover; } } } } // ========================== Expandable ========================== &-expand-icon-col { width: 48px; } &-row-expand-icon-cell { text-align: center; } &-row-indent { float: left; height: 1px; } &-row-expand-icon { .@{icon-prefix-cls} { font-size: @icon-size-lg; // position: relative; // top: @table-expand-icon-top; margin-right: @table-expand-icon-margin-right; color: @table-expand-icon-color; vertical-align: -5px; cursor: pointer; } &-spaced { &::before, &::after { display: none; content: none; } background: transparent; border: 0; visibility: hidden; } // .@{table-prefix-cls}-row-indent + & { // margin-top: ((@font-size-base * @line-height-base - @border-width-base * 3) / 2) - // ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)); // margin-right: @padding-xs; // } } tr&-expanded-row { &, &:hover { > td { background: @table-expanded-row-bg; } } // https://github.com/ant-design/ant-design/issues/25573 .@{descriptions-prefix-cls}-view { display: flex; table { flex: auto; width: auto; } } & > td { padding: 0; // 测试 } } // With fixed .@{table-prefix-cls}-expanded-row-fixed { position: relative; margin: -@table-padding-vertical -@table-padding-horizontal; padding: @table-padding-vertical @table-padding-horizontal; .@{empty-prefix-cls} { width: 100%; margin: 0; } } // ========================= Placeholder ========================== &-tbody > tr&-placeholder { text-align: center; .@{table-prefix-cls}-empty & { color: @disabled-color; } // &:hover { // > td { // background: @component-background; // } // } } // ============================ Fixed ============================= &-cell-fix-left, &-cell-fix-right { position: sticky !important; z-index: @zindex-table-fixed; background: @table-bg; } &-row { // 处理最后一排单元格的下间距问题,会导致在展开项内的表格出现滚动条 &:last-of-type { .@{table-prefix-cls}-cell-fix-left-first::after, .@{table-prefix-cls}-cell-fix-left-last::after, .@{table-prefix-cls}-cell-fix-right-first::after, .@{table-prefix-cls}-cell-fix-right-last::after { bottom: 0; } } } &-cell-fix-left-first::after, &-cell-fix-left-last::after { position: absolute; top: 0; right: 0; bottom: -1px; width: 30px; transform: translateX(100%); transition: box-shadow 0.3s; content: ''; pointer-events: none; } &-cell-fix-right-first::after, &-cell-fix-right-last::after { position: absolute; top: 0; bottom: -1px; left: 0; width: 30px; transform: translateX(-100%); transition: box-shadow 0.3s; content: ''; pointer-events: none; } .@{table-prefix-cls}-container { height: 100%; &::before, &::after { position: absolute; top: 0; bottom: 0; z-index: @zindex-table-fixed; width: 30px; transition: box-shadow 0.3s; content: ''; pointer-events: none; } &::before { left: 0; } &::after { right: 0; } } .@{table-prefix-cls}-resize-start, .@{table-prefix-cls}-resize-move { display: none; position: absolute; left: 0; top: 0; z-index: @zindex-table-fixed + 1; width: 1px; height: 0px; content: ''; background-color: @brand-primary; } // &-ping-left { // &:not(.@{table-prefix-cls}-has-fix-left) .@{table-prefix-cls}-container { // position: relative; // &::before { // box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%); // } // } // .@{table-prefix-cls}-cell-fix-left-first::after, // .@{table-prefix-cls}-cell-fix-left-last::after { // box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%); // } // .@{table-prefix-cls}-cell-fix-left-last::before { // background-color: transparent !important; // } // } // &-ping-right, &.is-scrolling-middle { &:not(.@{table-prefix-cls}-has-fix-right) .@{table-prefix-cls}-container { position: relative; // &::after { // box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%); // } } // .@{table-prefix-cls}-cell-fix-right-first::after, // .@{table-prefix-cls}-cell-fix-right-last::after { // box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%); // } } &.is-scrolling-left, &.is-scrolling-middle { .@{table-prefix-cls}-cell-fix-right-first::after { // box-shadow: @shadow-module-left; 会有白色图层 box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%); } } &.is-scrolling-right, &.is-scrolling-middle { .@{table-prefix-cls}-cell-fix-left-last::after { // box-shadow: @shadow-module-right; box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%); } } // 处理拖拽中排序表头移入时的鼠标样式 &.is-resizing-handle { .@{table-prefix-cls}-thead th.@{table-prefix-cls}-column-has-sorters, .@{table-prefix-cls}-column-sorter-inner { cursor: auto; } } &-sticky { &-holder { position: sticky; z-index: @table-sticky-zindex; background: @component-background; } &-scroll { position: sticky; bottom: 0; z-index: @table-sticky-zindex; display: flex; align-items: center; background: @table-border-color; border-top: 1px solid @table-border-color; opacity: 0.6; &:hover { transform-origin: center bottom; } &-bar { height: 8px; background-color: @table-sticky-scroll-bar-bg; border-radius: @table-sticky-scroll-bar-radius; &:hover { background-color: @table-sticky-scroll-bar-active-bg; } &-active { background-color: @table-sticky-scroll-bar-active-bg; } } } } // ===================== Empty ============================= &-empty { border-left: @table-body-border; border-right: @table-body-border; border-bottom: @table-body-border; background-color: transparent; border-radius: 0; &.@{table-prefix-cls} { .@{table-prefix-cls}-container > .@{table-prefix-cls}-header > table { // overflow: hidden; } } table { height: 100%; } .@{empty-prefix-cls}.@{empty-prefix-cls}-view { &-description { margin-bottom: 16px; } } .@{scrollbar-prefix-cls} { // pointer-events: none; &-view { height: 100%; } &-bar { display: none !important; } } // ========= 页面表格样式 规则为缺省高度是306px 水平垂直居中 ========== &-view { .@{empty-prefix-cls} { height: @table-view-empty-height; } } // ========= 局部表格样式 规则为整体高度时228px包括表头 ========== &-module { height: @table-module-empty-table-height; } // 暂无数据时不允许排序 .@{table-prefix-cls}-thead th.@{table-prefix-cls}-column-has-sorters { cursor: auto; .@{table-prefix-cls}-column-sorter-inner { cursor: auto; } } } } // @media all and (-ms-high-contrast: none) { // .@{table-prefix-cls} { // &-ping-left { // .@{table-prefix-cls}-cell-fix-left-last::after { // box-shadow: none !important; // } // } // &-ping-right { // .@{table-prefix-cls}-cell-fix-right-first::after { // box-shadow: none !important; // } // } // } // } @import './radius'; @import './rtl';