/**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; } %CellEllipsis { &:not(.col--actived) { .vxe-cell { @extend %TextEllipsis; } } } .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-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-cell, .vxe-table--filter-wrapper { .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: #f3f3f3; } } .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 { display: none; position: absolute; background-color: $vxe-table-checkbox-range-background-color; border: 1px solid $vxe-table-checkbox-range-border-color; pointer-events: none; } /*圆角*/ @if $vxe-table-border-radius { .vxe-table { &.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; } &.show--head { &:not(.show--foot) { .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(.show--head) { &:not(.show--foot) { .vxe-table--body-wrapper { &.body--wrapper { @extend %AllRadius; } } } } &.show--foot { &:not(.show--head) { .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 { position: relative; font-size: $vxe-font-size; color: $vxe-table-font-color; font-family: $vxe-font-family; &[x-cloak] { .vxe-table--main-wrapper, .vxe-table--fixed-left-wrapper, .vxe-table--fixed-right-wrapper { visibility: hidden; } } .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; } &.row--radio { background-color: $vxe-table-row-radio-background-color; } &.row--cheched { background-color: $vxe-table-row-cheched-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--cheched { background-color: $vxe-table-row-hover-cheched-background-color; } &.row--current { background-color: $vxe-table-row-hover-current-background-color; } } } &.has--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--cheched { .vxe-tree--btn-wrapper { background-color: $vxe-table-row-cheched-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--cheched { .vxe-tree--btn-wrapper { background-color: $vxe-table-row-hover-cheched-background-color; } } &.row--current { .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; } } &.has--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 { &.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--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; } } &.t--checked { .vxe-body--column, .vxe-footer--column { 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-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--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: $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 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; border: 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--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 { padding-right: 0.5em; 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-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 { 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, .vxe-footer--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-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; } } } &.virtual--x, &.virtual--y { .col--ellipsis { .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; } } } &.virtual--x, &.virtual--y { .col--ellipsis { .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 { &: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: $vxe-border-radius; 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; } .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; } &.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); } } } } }