/**Variable**/ @import './helpers/mixin.scss'; @import './base/common.scss'; %TextEllipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } %DefaultColumnHeight { height: $vxe-table-row-height-default; } %MediumColumnHeight { height: $vxe-table-row-height-medium; } %SmallColumnHeight { height: $vxe-table-row-height-small; } %MiniColumnHeight { height: $vxe-table-row-height-mini; } %CellEllipsis { &:not(.col--actived) { .vxe-cell { @extend %TextEllipsis; } } } // 24 栅格布局 .vxe-row { $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%, 37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%, 70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%; @for $index from 0 to length($spans) { & > .vxe-col--#{$index + 1} { width: nth($spans, $index + 1); } } } .vxe-table-hidden-column, .vxe-table--file-form { display: none; } .vxe-table--print-frame { position: fixed; bottom: -100%; left: -100%; height: 0; width: 0; border: 0; } .vxe-table--body-wrapper, .vxe-table--fixed-left-body-wrapper, .vxe-table--fixed-right-body-wrapper { overflow-y: auto; overflow-x: auto; } .vxe-table--borders { .vxe-table-border-top, .vxe-table-border-right, .vxe-table-border-bottom, .vxe-table-border-left { position: absolute; background-color: $vxe-primary-color; } .vxe-table-checked-borders { .vxe-table-border-top, .vxe-table-border-bottom { height: $vxe-table-column-checked-border-width; } .vxe-table-border-right, .vxe-table-border-left { width: $vxe-table-column-checked-border-width; } } .vxe-table-copyed-borders { .vxe-table-border-top, .vxe-table-border-bottom { height: #{$vxe-table-column-checked-border-width + 1}; } .vxe-table-border-right, .vxe-table-border-left { width: #{$vxe-table-column-checked-border-width + 1}; } & > span { background: repeating-linear-gradient(135deg, transparent, transparent 3px, $vxe-primary-color 3px, $vxe-primary-color 9px); animation: shine 1s infinite linear; } } } .vxe-body--row { .vxe-body--column { &.col--checked { position: relative; background-color: $vxe-table-column-checked-background-color; } &.col--selected { background-color: #fff; } } } @keyframes shine { 0% { background-position: -1px -1px; } 100% { background-position: -12px -12px; } } /*默认的渲染*/ .vxe-table, .vxe-table--filter-wrapper { .vxe-default-input, .vxe-default-textarea, .vxe-default-select { outline: 0; padding: 0 2px; height: floor($vxe-table-row-height-default - 8); width: 100%; color: $vxe-font-color; border-radius: 4px; border: 1px solid $vxe-input-border-color; &:focus { border: 1px solid $vxe-primary-color; } &[disabled] { cursor: not-allowed; background-color: #f3f3f3; } } .vxe-default-input { &[type="date"]::-webkit-inner-spin-button { margin-top: 6px; } &[type="date"]::-webkit-inner-spin-button, &[type="number"]::-webkit-inner-spin-button { height: 24px; } &::placeholder { color: $vxe-input-placeholder-color; } } .vxe-default-textarea { resize: none; vertical-align: middle; } .vxe-input, .vxe-textarea, .vxe-select { width: 100%; display: block; } .vxe-input { height: floor($vxe-table-row-height-default - 8); } .vxe-input > .vxe-input--inner, .vxe-textarea > .vxe-textarea--inner { padding: 0 2px; } .vxe-textarea--inner, .vxe-default-textarea { resize: none; } } .vxe-table--filter-wrapper { .vxe-default-input, .vxe-default-textarea { padding: 0 10px; } } /*复选框-范围选择*/ .vxe-table--checkbox-range { display: none; position: absolute; background-color: $vxe-table-range-background-color; border: 1px solid $vxe-table-range-border-color; border-radius: 2px; pointer-events: none; } /*table*/ .vxe-table { position: relative; font-size: $vxe-font-size; color: $vxe-font-color; font-family: $vxe-font-family; background-color: $vxe-table-background-color; &:before, &:after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; z-index: 2; } &:before { top: 0; border-top: 1px solid $vxe-table-border-color; } &:after { bottom: 0; border-bottom: 1px solid $vxe-table-border-color; } .vxe-table--header, .vxe-table--body, .vxe-table--footer { border: 0; border-spacing: 0; border-collapse: separate; table-layout: fixed; } .vxe-table--header-wrapper, .vxe-table--footer-wrapper { overflow-x: hidden; overflow-y: hidden; } &:not(.is--empty) { &.show--foot { &.scroll--x { .vxe-table--body-wrapper { overflow-x: scroll; } } } } .vxe-body--row { background-color: $vxe-table-background-color; &.row--stripe { background-color: $vxe-table-row-striped-background-color; .vxe-tree--btn-wrapper { background-color: $vxe-table-row-striped-background-color; } } &.row--radio { background-color: $vxe-table-row-radio-background-color; .vxe-tree--btn-wrapper { background-color: $vxe-table-row-radio-background-color; } } &.row--cheched { background-color: $vxe-table-row-cheched-background-color; .vxe-tree--btn-wrapper { background-color: $vxe-table-row-cheched-background-color; } } &.row--current { background-color: $vxe-table-row-current-background-color; .vxe-tree--btn-wrapper { background-color: $vxe-table-row-current-background-color; } } &.row--hover { background-color: $vxe-table-row-hover-background-color; .vxe-tree--btn-wrapper { background-color: $vxe-table-row-hover-background-color; } &.row--stripe { background-color: $vxe-table-row-hover-striped-background-color; .vxe-tree--btn-wrapper { background-color: $vxe-table-row-hover-striped-background-color; } } &.row--radio { background-color: $vxe-table-row-hover-radio-background-color; .vxe-tree--btn-wrapper { background-color: $vxe-table-row-hover-radio-background-color; } } &.row--cheched { background-color: $vxe-table-row-hover-cheched-background-color; .vxe-tree--btn-wrapper { background-color: $vxe-table-row-hover-cheched-background-color; } } &.row--current { background-color: $vxe-table-row-hover-current-background-color; .vxe-tree--btn-wrapper { background-color: $vxe-table-row-hover-current-background-color; } } } } &.c--resize { * { cursor: col-resize; } } &.column--highlight { .vxe-header--column { &:not(.col--seq) { &:hover { background-color: $vxe-table-column-hover-background-color; } } } } .vxe-header--column, .vxe-body--column, .vxe-footer--column { position: relative; line-height: $vxe-table-row-line-height; text-align: left; &:not(.col--ellipsis) { padding: #{floor(($vxe-table-row-height-default - $vxe-table-row-line-height) / 2)} 0; } &.col--current { background-color: $vxe-table-column-current-background-color; .vxe-tree--btn-wrapper { background-color: $vxe-table-column-current-background-color; } } &.col--center { text-align: center; } &.col--right { text-align: right; } } .vxe-body--column { &.col--checkbox { user-select: none; } } .vxe-table--footer-wrapper { border-top: 1px solid $vxe-table-border-color; } &:not(.t--border) { .vxe-header--column, .vxe-body--column, .vxe-footer--column { background-image: linear-gradient(-180deg, $vxe-table-border-color, $vxe-table-border-color); background-repeat: no-repeat; background-size: 100% 1px; background-position: right bottom; } .vxe-header--column { &.col--title-checked { background-image: linear-gradient(-180deg, $vxe-table-header-column-checked-border-color, $vxe-table-header-column-checked-border-color); } } .vxe-body--column { &.col--seq-checked { background-image: linear-gradient(-180deg, $vxe-table-body-seq-column-checked-border-color, $vxe-table-body-seq-column-checked-border-color); } } .vxe-body--column { &.col--checked { background-image: linear-gradient(-180deg, $vxe-table-body-column-checked-border-color, $vxe-table-body-column-checked-border-color); } } } &.t--border { &:not(.b--style-none) { .vxe-header--column, .vxe-body--column, .vxe-footer--column { background-image: linear-gradient(-90deg, $vxe-table-border-color, $vxe-table-border-color), linear-gradient(-180deg, $vxe-table-border-color, $vxe-table-border-color); background-repeat: no-repeat; background-size: 1px 100%, 100% 1px; background-position: right top, right bottom; } .vxe-header--column { &.col--title-checked { background-image: linear-gradient(-90deg, $vxe-table-header-column-checked-border-color, $vxe-table-header-column-checked-border-color), linear-gradient(-180deg, $vxe-table-header-column-checked-border-color, $vxe-table-header-column-checked-border-color); } } .vxe-body--column { &.col--seq-checked { background-image: linear-gradient(-90deg, $vxe-table-body-seq-column-checked-border-color, $vxe-table-body-seq-column-checked-border-color), linear-gradient(-180deg, $vxe-table-body-seq-column-checked-border-color, $vxe-table-body-seq-column-checked-border-color); } } .vxe-body--column { &.col--checked { background-image: linear-gradient(-90deg, $vxe-table-body-column-checked-border-color, $vxe-table-body-column-checked-border-color), linear-gradient(-180deg, $vxe-table-body-column-checked-border-color, $vxe-table-body-column-checked-border-color); } } } .vxe-table--fixed-left-wrapper { border-right: 1px solid $vxe-table-border-color; .vxe-body--column{ border-right-color: $vxe-table-border-color; } } &.b--style-none { .vxe-header--column, .vxe-body--column, .vxe-footer--column { background-image: linear-gradient(-180deg, $vxe-table-border-color, $vxe-table-border-color); background-repeat: no-repeat; background-size: 100% 1px; background-position: right bottom; } .vxe-header--column { &.col--title-checked { background-image: linear-gradient(-180deg, $vxe-table-header-column-checked-border-color, $vxe-table-header-column-checked-border-color); } } .vxe-body--column { &.col--seq-checked { background-image: linear-gradient(-180deg, $vxe-table-body-seq-column-checked-border-color, $vxe-table-body-seq-column-checked-border-color); } } .vxe-body--column { &.col--checked { background-image: linear-gradient(-180deg, $vxe-table-body-column-checked-border-color, $vxe-table-body-column-checked-border-color); } } &:before, .vxe-table--border-line { display: none; } .vxe-table--fixed-left-wrapper { border-right: 0; } } } &.t--checked, &.t--selected { user-select: none; } &.t--checked { .vxe-header--column, .vxe-body--column { &.col--seq { text-align: center; cursor: default; } } .vxe-header--column { &.col--seq { .vxe-cell { visibility: hidden; } } } .vxe-body--column { &.col--seq { background-color: $vxe-table-header-background-color; &.col--seq-checked { background-color: $vxe-table-column-body-seq-checked-background-color; } } } } &.size--medium { font-size: $vxe-font-size-medium; .vxe-header--column, .vxe-body--column, .vxe-footer--column { &:not(.col--ellipsis) { padding: #{floor(($vxe-table-row-height-medium - $vxe-table-row-line-height) / 2)} 0; } } .vxe-default-input, .vxe-default-textarea, .vxe-default-select, .vxe-input { height: floor($vxe-table-row-height-medium - 8); } .vxe-default-input { &[type="date"]::-webkit-inner-spin-button { margin-top: 4px; } } } &.size--small { font-size: $vxe-font-size-small; .vxe-header--column, .vxe-body--column, .vxe-footer--column { &:not(.col--ellipsis) { padding: #{floor(($vxe-table-row-height-small - $vxe-table-row-line-height) / 2)} 0; } } .vxe-default-input, .vxe-default-textarea, .vxe-default-select, .vxe-input { height: floor($vxe-table-row-height-small - 8); } .vxe-default-input { &[type="date"]::-webkit-inner-spin-button { margin-top: 2px; } } } &.size--mini { font-size: $vxe-font-size-mini; .vxe-header--column, .vxe-body--column, .vxe-footer--column { &:not(.col--ellipsis) { padding: #{floor(($vxe-table-row-height-mini - $vxe-table-row-line-height) / 2)} 0; } } .vxe-default-input, .vxe-default-textarea, .vxe-default-select, .vxe-input { height: floor($vxe-table-row-height-mini - 8); } .vxe-default-input { &[type="date"]::-webkit-inner-spin-button { margin-top: 0; } } } .vxe-cell { white-space: normal; word-break: break-all; padding: 0 10px; } // 单选框和复选框 .vxe-cell--radio, .vxe-cell--checkbox { position: relative; padding-left: 1.8em; user-select: none; cursor: pointer; } .vxe-radio--icon, .vxe-checkbox--icon { position: absolute; left: 0; top: 0.1em; height: 1em; width: 1em; } .vxe-cell--radio { .vxe-radio--icon { font-size: $vxe-radio-font-size-default; &:before { content: ""; position: absolute; height: 1em; width: 1em; top: 0; left: 0; border: 2px solid $vxe-input-border-color; background-color: #ffffff; border-radius: 50%; } } &:not(.is--disabled) { &:hover { .vxe-radio--icon { &:before { border-color: $vxe-primary-color; } } } } &.is--disabled { cursor: not-allowed; color: $vxe-input-disabled-color; .vxe-radio--icon { &:before { border-color: $vxe-input-disabled-color; background-color: $vxe-input-disabled-background-color; } } } &.is--checked { color: $vxe-primary-color; .vxe-radio--icon { &:before { border-color: $vxe-primary-color; background-color: $vxe-primary-color; } &:after { content: ""; position: absolute; height: 0.25em; width: 0.25em; top: 0.4em; left: 0.4em; border-radius: 50%; background-color: #ffffff; } } } } .vxe-cell--checkbox { .vxe-checkbox--icon { font-size: $vxe-checkbox-font-size-default; &:before { content: ""; position: absolute; height: 1em; width: 1em; top: 0; left: 0; background-color: #ffffff; border-radius: $vxe-checkbox-border-radius; border: $vxe-checkbox-border-width solid $vxe-input-border-color; } } &:not(.is--disabled) { &:hover { .vxe-checkbox--icon { &:before { border-color: $vxe-primary-color; } } } } &.is--disabled { cursor: not-allowed; color: $vxe-input-disabled-color; .vxe-checkbox--icon { &:before { border-color: $vxe-input-disabled-color; background-color: $vxe-input-disabled-background-color; } } } &.is--checked, &.is--indeterminate { color: $vxe-primary-color; .vxe-checkbox--icon { &:before { border-color: $vxe-primary-color; background-color: $vxe-primary-color; } &:after { content: ""; position: absolute; } } } &.is--checked { .vxe-checkbox--icon { &:after { height: 0.7em; width: 0.34em; top: 0.06em; left: 0.4em; border: 2px solid #ffffff; border-left: 0; border-top: 0; transform: rotate(45deg); } } } &.is--indeterminate { .vxe-checkbox--icon { &:after { top: 0.45em; left: 0; height: 0.18em; width: 1em; background-color: #ffffff; transform: scale(.6); } } } &.is--disabled { .vxe-checkbox--icon { &:after { border-color: $vxe-input-disabled-color; } } } } .fixed--hidden { visibility: hidden; } .vxe-table--fixed-left-wrapper, .vxe-table--fixed-right-wrapper { width: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background-color: $vxe-table-background-color; .vxe-table--body-wrapper { overflow-x: hidden; } } &.show--head { .vxe-table--fixed-left-wrapper, .vxe-table--fixed-right-wrapper { .vxe-table--body-wrapper { &:before { display: none; } } } } .vxe-table--fixed-left-wrapper { left: 0; width: 200px; &.scrolling--middle { box-shadow: 4px 3px 4px 0px rgba(0, 0, 0, 0.12); } } .vxe-table--fixed-right-wrapper { right: 0; &.scrolling--middle { box-shadow: -4px 3px 4px 0px rgba(0, 0, 0, 0.12); } } .vxe-table--header-wrapper, .vxe-table--body-wrapper, .vxe-table--footer-wrapper { position: relative; &.fixed-left--wrapper, &.fixed-right--wrapper { position: absolute; top: 0; } &.fixed-left--wrapper { left: 0; } &.fixed-right--wrapper { right: 0; overflow-y: auto; } } .vxe-body--x-space { width: 100%; height: 1px; margin-bottom: -1px; } .vxe-body--y-space { width: 0; float: left; } /*列宽线*/ .vxe-table--resizable-bar { display: none; position: absolute; top: 0; left: 0; width: 1px; height: 100%; z-index: 4; &:before { content: ""; display: block; height: 100%; background-color: $vxe-table-resizable-color; } } /*边框线*/ .vxe-table--border-line { &:before, &:after { content: ""; position: absolute; top: 0; width: 0; height: 100%; z-index: 1; } &:before { left: 0; border-left: 1px solid $vxe-table-border-color; } &:after { right: 0; border-right: 1px solid $vxe-table-border-color; } } /*树形节点*/ &.has--tree-line { .vxe-body--row { &:first-child { .vxe-tree--line { border-width: 0 0 1px 0; } } } .vxe-body--row { .vxe-body--column { background-image: none; } } } .vxe-tree--line-wrapper { position: relative; display: block; height: 0; } .vxe-tree--line { content: ""; position: absolute; bottom: -0.9em; width: 0.8em; border-width: 0 0 1px 1px; border-style: dotted; border-color: $vxe-table-tree-node-line-color; pointer-events: none; } .vxe-cell--tree-node { position: relative; } .vxe-tree--btn-wrapper { position: absolute; top: 50%; width: 1em; height: 1em; text-align: center; transform: translateY(-50%); z-index: 1; background-color: $vxe-table-background-color; user-select: none; cursor: pointer; } .vxe-tree--node-btn { display: block; color: lighten($vxe-font-color, 20%); &:hover { color: $vxe-font-color; } } .vxe-tree-cell { display: block; padding-left: 1.5em; } .vxe-body--column { &.col--ellipsis { & > .vxe-cell { .vxe-tree-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } } } /*展开行*/ .vxe-table--expanded { padding-right: 0.5em; cursor: pointer; .vxe-table--expand-btn { width: 1em; height: 1em; text-align: center; user-select: none; color: lighten($vxe-font-color, 20%); &:hover { color: $vxe-font-color; } } } .vxe-body--expanded-column { border-bottom: 1px solid $vxe-table-border-color; } .vxe-body--expanded-cell { padding: 20px; } /*设置列高度*/ &.vxe-editable { .vxe-body--column { @extend %DefaultColumnHeight; } &.size--medium { .vxe-body--column { @extend %MediumColumnHeight; } } &.size--small { .vxe-body--column { @extend %SmallColumnHeight; } } &.size--mini { .vxe-body--column { @extend %MiniColumnHeight; } } } /*溢出列*/ .vxe-header--column, .vxe-body--column, .vxe-footer--column { &.col--ellipsis { @extend %DefaultColumnHeight; } } .vxe-body--column { &.col--ellipsis { @extend %CellEllipsis; } } &.virtual--x, &.virtual--y { .col--ellipsis { .vxe-cell { max-height: $vxe-table-row-height-default; } } } &.size--medium { .vxe-header--column, .vxe-body--column, .vxe-footer--column { &.col--ellipsis { @extend %MediumColumnHeight; } } &.virtual--x, &.virtual--y { .col--ellipsis { .vxe-cell { max-height: $vxe-table-row-height-medium; } } } .vxe-checkbox--icon { font-size: $vxe-checkbox-font-size-medium; } .vxe-radio--icon { font-size: $vxe-radio-font-size-medium; } } &.size--small { .vxe-header--column, .vxe-body--column, .vxe-footer--column { &.col--ellipsis { @extend %SmallColumnHeight; .vxe-cell { max-height: $vxe-table-row-height-small; } } } &.virtual--x, &.virtual--y { .col--ellipsis { .vxe-cell { max-height: $vxe-table-row-height-small; } } } .vxe-checkbox--icon { font-size: $vxe-checkbox-font-size-small; } .vxe-radio--icon { font-size: $vxe-radio-font-size-small; } } &.size--mini { .vxe-header--column, .vxe-body--column, .vxe-footer--column { &.col--ellipsis { @extend %MiniColumnHeight; .vxe-cell { max-height: $vxe-table-row-height-mini; } } } &.virtual--x, &.virtual--y { .col--ellipsis { .vxe-cell { max-height: $vxe-table-row-height-mini; } } } .vxe-checkbox--icon { font-size: $vxe-checkbox-font-size-mini; } .vxe-radio--icon { font-size: $vxe-radio-font-size-mini; } } /*暂无数据*/ .vxe-table--empty-placeholder, .vxe-table--empty-block { min-height: 60px; justify-content: center; align-items: center; text-align: center; overflow: hidden; width: 100%; pointer-events: none; } .vxe-table--empty-block { display: none; visibility: hidden; } .vxe-table--empty-placeholder { display: none; position: absolute; top: 0; z-index: 8; } .vxe-table--empty-content { display: block; width: 50%; pointer-events: auto; } &.is--empty { .vxe-table--empty-block, .vxe-table--empty-placeholder { display: flex; } } .vxe-body--column { &.col--selected { &:not(.col--checked) { box-shadow: inset 0px 0px 0px 2px $vxe-primary-color; } } } /*校验不通过*/ .vxe-body--column { &.col--actived, &.col--selected, &.col--dirty { position: relative; } &.col--valid-error { .vxe-cell--valid { width: 320px; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 1; .vxe-cell--valid-msg { display: inline-block; border-radius: 4px; padding: 8px 12px; color: #fff; background-color: $vxe-table-validate-error-background-color; pointer-events: auto; } } .vxe-default-input, .vxe-default-textarea, .vxe-default-select { border-color: $vxe-table-validate-error-color; } .vxe-input { > .vxe-input--inner { border-color: $vxe-table-validate-error-color; } } } } .vxe-body--row { &:first-child { .vxe-cell--valid { bottom: auto; top: calc(100% + 4px); } } } /*可编辑*/ &.vxe-editable { &.c--highlight { .vxe-body--column { &.col--actived { box-shadow: inset 0px 0px 0px 2px $vxe-primary-color; &.col--valid-error { box-shadow: inset 0px 0px 0px 2px $vxe-table-validate-error-color; } .vxe-cell { .vxe-default-input, .vxe-default-textarea { border: 0; padding: 0; height: $vxe-table-row-line-height; } .vxe-input { .vxe-input--inner, .vxe-textarea--inner { border: 0; padding: 0; height: $vxe-table-row-line-height; } } } } } } .vxe-body--column { padding: 0; &.col--actived { padding: 0; } &.col--dirty { &:before { content: ""; top: -$vxe-table-cell-dirty-width; left: -$vxe-table-cell-dirty-width; position: absolute; border-width: $vxe-table-cell-dirty-width; border-style: solid; border-color: transparent $vxe-table-cell-dirty-color transparent transparent; transform: rotate(45deg); } } } } }