/**Variable**/ @import './helpers/mixin.scss'; @import './base/checked.scss'; @import './base/common.scss'; @import './base/loading.scss'; %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; } .vxe-table-slots, .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-cell, .vxe-table--filter-wrapper { .vxe-default-input, .vxe-default-textarea { background-color: $vxe-table-body-background-color; } .vxe-default-input, .vxe-default-textarea, .vxe-default-select { outline: 0; padding: 0 2px; width: 100%; color: $vxe-table-font-color; border-radius: $vxe-border-radius; border: 1px solid $vxe-input-border-color; &:focus { border: 1px solid $vxe-primary-color; } &[disabled] { cursor: not-allowed; background-color: $vxe-input-disabled-background-color; } } .vxe-default-input, .vxe-default-textarea, .vxe-default-select { height: $vxe-input-height-default; } .vxe-default-input { &[type="date"]::-webkit-inner-spin-button { margin-top: 4px; } &[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 > .vxe-input--inner, .vxe-textarea > .vxe-textarea--inner { padding: 0 2px; } .vxe-textarea--inner, .vxe-default-textarea { resize: none; } } .vxe-table--checkbox-range, .vxe-table--cell-main-area, .vxe-table--cell-extend-area, .vxe-table--cell-active-area, .vxe-table--cell-copy-area { display: none; position: absolute; pointer-events: none; z-index: 1; } .vxe-table--fixed-left-wrapper, .vxe-table--fixed-right-wrapper { .vxe-table--checkbox-range, .vxe-table--cell-main-area, .vxe-table--cell-extend-area, .vxe-table--cell-active-area, .vxe-table--cell-copy-area { z-index: 2; } } .vxe-table--fixed-left-wrapper { .vxe-table--cell-main-area, .vxe-table--cell-extend-area, .vxe-table--cell-active-area { &[half="1"] { border-right: 0; } } .vxe-table--cell-copy-area { &[half="1"] { background-size: $vxe-table-cell-copy-area-border-width 12px, 0 12px, 12px $vxe-table-cell-copy-area-border-width, 12px $vxe-table-cell-copy-area-border-width; } } } .vxe-table--fixed-right-wrapper { .vxe-table--cell-main-area, .vxe-table--cell-extend-area, .vxe-table--cell-active-area { &[half="1"] { border-left: 0; } } .vxe-table--cell-copy-area { &[half="1"] { background-size: 0 12px, $vxe-table-cell-copy-area-border-width 12px, 12px $vxe-table-cell-copy-area-border-width, 12px $vxe-table-cell-copy-area-border-width; } } } /*复选框-范围选择*/ .vxe-table--checkbox-range { background-color: $vxe-table-checkbox-range-background-color; border: $vxe-table-checkbox-range-border-width solid $vxe-table-checkbox-range-border-color; } .vxe-table--cell-area { height: 0; font-size: 0; display: none; & > .vxe-table--cell-main-area { background-color: $vxe-table-cell-area-background-color; border: $vxe-table-cell-area-border-width solid $vxe-table-cell-area-border-color; } .vxe-table--cell-main-area-btn { display: none; position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; border-style: solid; border-color: $vxe-table-cell-main-area-extension-border-color; border-width: 1px 0 0 1px; background-color: $vxe-table-cell-main-area-extension-background-color; pointer-events: auto; cursor: crosshair; } .vxe-table--cell-extend-area { border: $vxe-table-cell-extend-area-border-width solid $vxe-table-cell-extend-area-border-color; } } @keyframes moveCopyCellBorder { from { } to { background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%; } } .vxe-table--cell-copy-area { background: linear-gradient(0deg, transparent 6px, $vxe-table-cell-copy-area-border-color 6px) repeat-y, linear-gradient(0deg, transparent 50%, $vxe-table-cell-copy-area-border-color 0) repeat-y, linear-gradient(90deg, transparent 50%, $vxe-table-cell-copy-area-border-color 0) repeat-x, linear-gradient(90deg, transparent 50%, $vxe-table-cell-copy-area-border-color 0) repeat-x; background-size: $vxe-table-cell-copy-area-border-width 12px, $vxe-table-cell-copy-area-border-width 12px, 12px $vxe-table-cell-copy-area-border-width, 12px $vxe-table-cell-copy-area-border-width; background-position: 0 0, 100% 0, 0 0, 0 100%; animation: moveCopyCellBorder .5s infinite linear; } .vxe-table--cell-active-area { border: $vxe-table-cell-active-area-border-width solid $vxe-table-cell-active-area-border-color; } .vxe-table--cell-multi-area { & > .vxe-table--cell-main-area { background-color: $vxe-table-cell-area-background-color; } } /*圆角*/ @if $vxe-table-border-radius { .vxe-table--render-default { &.is--round { %AllRadius { border-radius: $vxe-table-border-radius; } %TopRadius { border-radius: $vxe-table-border-radius $vxe-table-border-radius 0 0; } %TopLeftRadius { border-radius: $vxe-table-border-radius 0 0 0; } %TopRightRadius { border-radius: 0 $vxe-table-border-radius 0 0; } %BottomRadius { border-radius: 0 0 $vxe-table-border-radius $vxe-table-border-radius; } %BottomLeftRadius { border-radius: 0 0 0 $vxe-table-border-radius; } %BottomRightRadius { border-radius: 0 0 $vxe-table-border-radius 0; } @extend %AllRadius; .vxe-table--border-line { @extend %AllRadius; } &.is--header { &:not(.is--footer) { .vxe-table--body-wrapper { &.fixed-left--wrapper { @extend %BottomLeftRadius; } &.body--wrapper { @extend %BottomRadius; } &.fixed-right--wrapper { @extend %BottomRightRadius; } } } .vxe-table--header-wrapper { &.fixed-left--wrapper { @extend %TopLeftRadius; } &.body--wrapper { @extend %TopRadius; } &.fixed-right--wrapper { @extend %TopRightRadius; } } } &:not(.is--header) { &:not(.is--footer) { .vxe-table--body-wrapper { &.body--wrapper { @extend %AllRadius; } } } } &.is--footer { &:not(.is--header) { .vxe-table--body-wrapper { &.fixed-left--wrapper { @extend %BottomLeftRadius; } &.body--wrapper { @extend %TopRadius; } &.fixed-right--wrapper { @extend %BottomRightRadius; } } } .vxe-table--footer-wrapper { &.fixed-left--wrapper { @extend %BottomLeftRadius; } &.body--wrapper { @extend %BottomRadius; } &.fixed-right--wrapper { @extend %BottomRightRadius; } } } } } } /*table*/ .vxe-table--render-default { position: relative; font-size: $vxe-font-size; color: $vxe-table-font-color; font-family: $vxe-font-family; .vxe-table--body-wrapper { background-color: $vxe-table-body-background-color; } .vxe-table--footer-wrapper { background-color: $vxe-table-footer-background-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) { &.is--footer { &.is--scroll-x { .vxe-table--body-wrapper { overflow-x: scroll; } } } } .vxe-body--row { &.row--stripe { background-color: $vxe-table-row-striped-background-color; } &.row--radio { background-color: $vxe-table-row-radio-background-color; } &.row--checked { background-color: $vxe-table-row-checked-background-color; } &.row--current { background-color: $vxe-table-row-current-background-color; } &.row--hover { background-color: $vxe-table-row-hover-background-color; &.row--stripe { background-color: $vxe-table-row-hover-striped-background-color; } &.row--radio { background-color: $vxe-table-row-hover-radio-background-color; } &.row--checked { background-color: $vxe-table-row-hover-checked-background-color; } &.row--current { background-color: $vxe-table-row-hover-current-background-color; } } } &.is--tree-line { .vxe-body--row { &.row--stripe { .vxe-tree--btn-wrapper { background-color: $vxe-table-row-striped-background-color; } } &.row--radio { .vxe-tree--btn-wrapper { background-color: $vxe-table-row-radio-background-color; } } &.row--checked { .vxe-tree--btn-wrapper { background-color: $vxe-table-row-checked-background-color; } } &.row--current { .vxe-tree--btn-wrapper { background-color: $vxe-table-row-current-background-color; } } &.row--hover { .vxe-tree--btn-wrapper { background-color: $vxe-table-row-hover-background-color; } &.row--stripe { .vxe-tree--btn-wrapper { background-color: $vxe-table-row-hover-striped-background-color; } } &.row--radio { .vxe-tree--btn-wrapper { background-color: $vxe-table-row-hover-radio-background-color; } } &.row--checked { .vxe-tree--btn-wrapper { background-color: $vxe-table-row-hover-checked-background-color; } } &.row--current { .vxe-tree--btn-wrapper { background-color: $vxe-table-row-hover-current-background-color; } } } } } &.drag--resize { .vxe-table--main-wrapper, .vxe-table--fixed-left-wrapper, .vxe-table--fixed-right-wrapper { * { cursor: col-resize; } } } &.drag--range, &.drag--area { .vxe-table--main-wrapper, .vxe-table--fixed-left-wrapper, .vxe-table--fixed-right-wrapper { * { cursor: default; } } } &.drag--extend-range { .vxe-table--main-wrapper, .vxe-table--fixed-left-wrapper, .vxe-table--fixed-right-wrapper { * { cursor: crosshair; } } } &.column--highlight { .vxe-header--column { &:not(.col--seq) { &:hover { background-color: $vxe-table-column-hover-background-color; } } } } &.cell--area { .vxe-table--main-wrapper { user-select: none; } } .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; } } &.is--tree-line { .vxe-header--column, .vxe-body--column, .vxe-footer--column { &.col--current { .vxe-tree--btn-wrapper { background-color: $vxe-table-column-current-background-color; } } } } .vxe-header--column, .vxe-footer--column { &.col--ellipsis { &.col--center { .vxe-cell{ justify-content: center; } } &.col--right { .vxe-cell{ justify-content: flex-end; } } } } .vxe-body--column { &.col--checkbox { user-select: none; } } /*边框*/ .vxe-table--footer-wrapper { border-top: 1px solid $vxe-table-border-color; } &.border--default, &.border--full, &.border--outer { .vxe-table--header-wrapper { background-color: $vxe-table-header-background-color; } } &.border--default, &.border--inner { .vxe-header--column, .vxe-body--column, .vxe-footer--column { background-image: linear-gradient($vxe-table-border-color, $vxe-table-border-color); background-repeat: no-repeat; background-size: 100% 1px; background-position: right bottom; } } &.border--full { .vxe-header--column, .vxe-body--column, .vxe-footer--column { background-image: linear-gradient($vxe-table-border-color, $vxe-table-border-color), linear-gradient($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-table--fixed-left-wrapper { // border-right: 1px solid $vxe-table-border-color; .vxe-body--column{ border-right-color: $vxe-table-border-color; } } } &.border--default, &.border--full, &.border--outer, &.border--inner { .vxe-table--header-wrapper { .vxe-header--row { &:last-child { .vxe-header--gutter { background-image: linear-gradient($vxe-table-border-color, $vxe-table-border-color); background-repeat: no-repeat; background-size: 100% 1px; background-position: right bottom; } } } } } &.border--inner, &.border--none { .vxe-table--header-wrapper { background-color: $vxe-table-background-color; } .vxe-table--fixed-left-wrapper { border-right: 0; } } &.border--inner { .vxe-table--border-line { border-width: 0 0 1px 0; } } &.border--none { .vxe-table--border-line { display: none; } .vxe-table--header-border-line { display: none; } .vxe-table--footer-wrapper { border-top: 0; } } &.size--medium { font-size: $vxe-font-size-medium; .vxe-table--empty-placeholder, .vxe-table--empty-block { min-height: $vxe-table-row-height-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-cell { .vxe-default-input, .vxe-default-textarea, .vxe-default-select { height: $vxe-input-height-medium; } .vxe-default-input { &[type="date"]::-webkit-inner-spin-button { margin-top: 3px; } } } } &.size--small { font-size: $vxe-font-size-small; .vxe-table--empty-placeholder, .vxe-table--empty-block { min-height: $vxe-table-row-height-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-cell { .vxe-default-input, .vxe-default-textarea, .vxe-default-select { height: $vxe-input-height-small; } .vxe-default-input { &[type="date"]::-webkit-inner-spin-button { margin-top: 2px; } } } } &.size--mini { font-size: $vxe-font-size-mini; .vxe-table--empty-placeholder, .vxe-table--empty-block { min-height: $vxe-table-row-height-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-cell { .vxe-default-input, .vxe-default-textarea, .vxe-default-select { height: $vxe-input-height-mini; } .vxe-default-input { &[type="date"]::-webkit-inner-spin-button { margin-top: 1px; } } } } .vxe-cell { white-space: pre-line; word-break: break-all; padding-left: $vxe-table-cell-padding-left; padding-right: $vxe-table-cell-padding-right; } // 单元格占位符 .vxe-cell--placeholder { color: $vxe-table-cell-placeholder-color; } // 单选框和复选框 .vxe-cell--radio { @extend %XERadio; } .vxe-cell--checkbox { @extend %XECheckbox; } .vxe-cell--radio .vxe-radio--icon, .vxe-cell--checkbox .vxe-checkbox--icon { left: 0; top: 0.1em; } .vxe-cell--radio .vxe-radio--label, .vxe-cell--checkbox .vxe-checkbox--label { padding-left: 0.5em; } .vxe-cell--radio, .vxe-cell--checkbox { padding-left: 1.2em; } .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: inherit; transition: 0.3s box-shadow; .vxe-table--body-wrapper { overflow-x: hidden; } } .vxe-table--fixed-left-wrapper { .vxe-table--body-wrapper { width: calc(100% + 40px); } } &.is--header { .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; cursor: col-resize; &:before { content: ""; display: block; height: 100%; background-color: $vxe-table-resizable-drag-line-color; } } /*边框线*/ .vxe-table--border-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; border: 1px solid $vxe-table-border-color; } /*树形节点*/ &.is--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--btn-wrapper { background-color: $vxe-table-background-color; } } .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; user-select: none; cursor: pointer; } .vxe-tree--node-btn { display: block; color: lighten($vxe-table-font-color, 20%); &:hover { color: $vxe-table-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 { cursor: pointer; .vxe-table--expand-btn { width: 1em; height: 1em; text-align: center; user-select: none; color: lighten($vxe-table-font-color, 20%); &:hover { color: $vxe-table-font-color; } } &+.vxe-table--expand-label { padding-left: 0.5em; } } .vxe-body--expanded-column { border-bottom: 1px solid $vxe-table-border-color; &.col--ellipsis { & > .vxe-body--expanded-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } } .vxe-body--expanded-cell { position: relative; padding: 20px; z-index: 1; } /*设置列高度*/ &.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; &:not(.col--actived) { & > .vxe-cell { @extend %TextEllipsis; } } & > .vxe-cell { max-height: $vxe-table-row-height-default; } } } &.size--medium { .vxe-header--column, .vxe-body--column, .vxe-footer--column { &.col--ellipsis { @extend %MediumColumnHeight; & > .vxe-cell { max-height: $vxe-table-row-height-medium; } } } .vxe-cell--checkbox .vxe-checkbox--icon, .vxe-cell--radio .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; } } } .vxe-cell--checkbox .vxe-checkbox--icon, .vxe-cell--radio .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; } } } .vxe-cell--checkbox .vxe-checkbox--icon, .vxe-cell--radio .vxe-radio--icon { font-size: $vxe-radio-font-size-mini; } } /*暂无数据*/ .vxe-table--empty-placeholder, .vxe-table--empty-block { min-height: $vxe-table-row-height-default; 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 { box-shadow: inset 0px 0px 0px 2px $vxe-primary-color; } } /*校验不通过*/ .vxe-body--column { &.col--actived, &.col--selected { 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: 2; .vxe-cell--valid-msg { display: inline-block; border-radius: $vxe-border-radius; padding: 8px 12px; color: $vxe-table-validate-tooltip-error-color; background-color: $vxe-table-validate-tooltip-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-body--column { &:first-child { .vxe-cell--valid { left: 10px; transform: translateX(0); text-align: left; } } } /*单元格编辑状态*/ .vxe-body--row { &.row--new { & > .vxe-body--column { position: relative; &: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-insert-color transparent transparent; transform: rotate(45deg); } } } } .vxe-body--column { &.col--dirty { position: relative; &: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-update-color transparent transparent; transform: rotate(45deg); } } } /*可编辑*/ &.vxe-editable { &.cell--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; } .vxe-default-input { height: $vxe-table-row-line-height; } .vxe-input { .vxe-input--inner { border: 0; padding-left: 0; } } .vxe-textarea { height: $vxe-table-row-line-height - 1; .vxe-textarea--inner { border: 0; } } } } } } .vxe-body--column { padding: 0; &.col--actived { padding: 0; } } } }