UNPKG

element-ui

Version:

A Component Library for Vue.js.

366 lines (308 loc) 6.76 kB
@charset "UTF-8"; @import "./checkbox.css"; @import "./tag.css"; @import "./common/var.css"; @component-namespace el { @b table { position: relative; overflow: hidden; box-sizing: border-box; width: 100%; max-width: 100%; background-color: #fff; border-collapse: collapse; border: 1px solid var(--table-border-color); font-size: 14px; color: var(--table-text-color); &::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--table-border-color); z-index: 1; } &::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: var(--table-border-color); z-index: 1; } .el-tooltip { display: block; } .el-tooltip__rel { display: block; .cell > * { white-space: nowrap; } } @e empty-block { display: table; min-height: 60px; text-align: center; width: 100%; height: 100%; } @e empty-text { display: table-cell; vertical-align: middle; color: #5e6d82; } @modifier fit { border-right: 0; border-bottom: 0; & th.gutter, td.gutter { border-right-width: 1px; } } & th { white-space: nowrap; overflow: hidden; } & th, td { height: 40px; min-width: 0; box-sizing: border-box; text-overflow: ellipsis; vertical-align: middle; position: relative; border-bottom: 1px solid var(--table-border-color); @when center { text-align: center; } @when left { text-align: left; } @when right { text-align: right; } } @modifier border { & th, td { border-right: 1px solid var(--table-border-color); } } & th { background-color: var(--table-header-background); text-align: left; } & th > div { display: inline-block; padding-left: 18px; padding-right: 18px; line-height: 40px; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } & td > div { box-sizing: border-box; } @e fixed, fixed-right { position: absolute; top: 0; left: 0; box-shadow: 1px 0 8px #d3d4d6; overflow-x: hidden; &::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--table-border-color); z-index: 4; } } @e fixed-right { top: 0; left: auto; right: 0; box-shadow: -1px 0 8px #d3d4d6; .el-table__fixed-header-wrapper, .el-table__fixed-body-wrapper { left: auto; right: 0; } } @e fixed-header-wrapper { position: absolute; left: 0; top: 0; z-index: 3; & thead div { background-color: var(--table-header-background); color: var(--table-text-color); } } @e fixed-body-wrapper { position: absolute; left: 0; top: 37px; overflow: hidden; z-index: 3; } @e header-wrapper, body-wrapper { width: 100%; } @e header, body { table-layout: fixed; } @e header-wrapper { overflow: hidden; & thead div { background-color: var(--table-header-background); color: var(--table-text-color); } } @e body-wrapper { overflow: auto; position: relative; } & th.required > div::before { display: inline-block; content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff4d51; margin-right: 5px; vertical-align: middle; } & th > .cell { position: relative; word-wrap: normal; text-overflow: ellipsis; display: inline-block; line-height: 20px; vertical-align: middle; width: 100%; box-sizing: border-box; &.highlight { color: #20a0ff; } } & .caret-wrapper { position: relative; cursor: pointer; display: inline-block; vertical-align: middle; margin-left: 5px; margin-top: -2px; width: 16px; height: 34px; overflow: initial; } & .sort-caret { display: inline-block; width: 0; height: 0; border: 0; content: ""; position: absolute; left: 3px; z-index: 2; &.ascending { top: 11px; border-top: none; border-right: 5px solid transparent; border-bottom: 5px solid #99a9bf; border-left: 5px solid transparent; } &.descending { bottom: 11px; border-top: 5px solid #99a9bf; border-right: 5px solid transparent; border-bottom: none; border-left: 5px solid transparent; } } & .ascending .sort-caret.ascending { border-bottom-color: #475669; } & .descending .sort-caret.descending { border-top-color: #475669; } & th.gutter, td.gutter { width: 15px; border-right-width: 0; border-bottom-width: 0; padding: 0; } & td.gutter { width: 0; } & td.is-hidden, th.is-hidden { > * { visibility: hidden; } } & .cell { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 24px; padding-left: 18px; padding-right: 18px; } & tr input[type="checkbox"] { margin: 0; } & tr { background-color: #fff; } @modifier striped { & .el-table__body { & tr:nth-child(2n) { background: #FAFAFA; &.current-row { background: #EFF7FF; } } } } @e body { td { transition: background-color .25s ease; } tr.hover-row td { background-color: #eff2f7; } tr.current-row td { background: #eff7ff; } } @e column-resize-proxy { position: absolute; left: 200px; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--table-border-color); z-index: 10; } & .hidden-columns { visibility: hidden; position: absolute; z-index: -1; } @e column-filter-trigger { display: inline-block; line-height: 34px; margin-left: 5px; cursor: pointer; & i { color: #99a9bf; } } } }