UNPKG

ten-design-vue

Version:

ten-vue

445 lines (370 loc) 8.46 kB
/* dependencies icon,loading,checkbox,button */ @import "../vars.less"; @table-thead-background-color: #fbfbfb; @table-border-color: #f0f0f0; @table-expand-row-backgroud-color: #979797; @icon-color: #bfbfbf; .ten-table { table { width: 100%; border-bottom: 1px solid @table-border-color; border-top: 1px solid @table-border-color; border-collapse: collapse; td, th { padding: @table-td-padding; line-height: @table-line-height; text-align: left; font-weight: 400; } td:first-child, th:first-child { padding-left: 28px; } .ten-table__table-cell--empty-text { text-align: center; color: @text-color-lighter-2; } .ten-table__table-cell--invisible { visibility: hidden; } tbody { background: #fff; tr { border-top: 1px solid @table-border-color; font-size: 12px; color: @text-color; } } .ten-table-td-expand { padding: 0; box-shadow: inset 0px 15px 10px -15px @table-border-color; background-color: #FBFBFB; } .resizable { position: relative; .resizable-handle { border: 1px; position: absolute; width: 10px; top: 0; bottom: 0; right: -5px; cursor: col-resize; z-index: 1; } } } &-fixed { overflow-y: auto; overflow-x: hidden; position: relative; table { table-layout: fixed; } &-head { margin-bottom: -20px; // padding-bottom: 20px; // overflow: hidden; overflow: scroll hidden; } &-body { overflow-y: auto; overflow-x: scroll; position: relative; background: #fff; table { border-top: none; } tr:first-child { border-top: none; } } &-left { position: absolute; left: 0; top: 0; z-index: 5; overflow: hidden; } &-left &-body, &-right &-body { overflow: hidden auto; } &-left-shadow { -webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15); box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.1); } &-right { position: absolute; right: 0; top: 0; z-index: 5; overflow: hidden; } &-right-shadow { -webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); } // &-right-shadow { // -webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15); // box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.1); // } } &-thead { background: @table-thead-background-color; th { font-size: 14px; color: @text-color; padding: 18px 18px; } th+th { border-left: 1px solid @table-border-color; } &-title { display: block; } &-sorter { display: table-cell; vertical-align: middle; &-inner { height: 1em; margin-left: 12px; color: #bfbfbf; line-height: 1em; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; } &-up, &-down { position: absolute; left: 0; border-style: solid; height: 0; width: 0; border: solid transparent; transition: all 0.3s; } &-up { border-width: 0 4px 6px; border-bottom-color: @placeholder-color; bottom: 55%; } &-down { top: 2px; border-width: 6px 4px 0; border-top-color: @placeholder-color; top: 55%; } &--asc { .ten-table-thead-sorter-up { border-bottom-color: @primary-color; } } &--desc { .ten-table-thead-sorter-down { border-top-color: @primary-color; } } } &-th-sorter { cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; &:hover { background: @border-color; } } } &-expand { vertical-align: middle; font-size: 14px; margin-right: 8px; cursor: pointer; i { color: @text-color-lighter-1; } } .ten-checkbox { margin-left: 0; } a { font-size: 12px; color: @primary-color; letter-spacing: 0.1px; cursor: pointer; } &_page { height: @table-page-height; background: #fbfbfb; text-align: right; padding-top: @table-page-padding-top; padding-right: 24px; } } .ten-table--vue { position: relative; &.ten-table { .ten-table__table { overflow: hidden; &-head { overflow-x: hidden; border-top: 1px solid @table-border-color; background: @table-thead-background-color; } &-body { overflow-x: scroll; overflow-y: auto; border-bottom: 1px solid @table-border-color; background: #fff; } &-row { &--expand { background: @table-thead-background-color; box-shadow: inset 0px 15px 10px -15px @table-border-color; } &--hover, &--selected { background: @primary-color-ligher-7; } } &-cell { box-sizing: border-box; padding: @table-td-padding; word-break: break-all; &--align-left { text-align: left; } &--align-center { text-align: center; } &--align-right { text-align: right; } .sorter { &-wrapper { position: relative; margin-left: 12px; } &-asc, &-desc { position: absolute; left: 0; border-style: solid; height: 0; width: 0; border-color: transparent; transition: all 0.3s; } &-asc { border-width: 0 4px 6px; border-bottom-color: @placeholder-color; bottom: 55%; } &-desc { top: 2px; border-width: 6px 4px 0; border-top-color: @placeholder-color; top: 55%; } } &--sortable-asc { .sorter-asc { border-bottom-color: @primary-color; } } &--sortable-desc { .sorter-desc { border-top-color: @primary-color; } } .expand { color: @icon-color; } &--empty-text { text-align: center; color: @text-color-lighter-2; } } &--fixed { position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; .ten-table__table-body { overflow-x: hidden; } &-right { left: auto; right: 0; box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); .ten-table__table-head, .ten-table__table-body { position: absolute; left: auto; right: 0; top: 0; } &.is-scrolling--right { box-shadow: none; } } &-left { box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.1);; &.is-scrolling--left { box-shadow: none; } } } } table { width: 100%; table-layout: fixed; border-collapse: collapse; border: none; td, th { padding: 0; &.is-center { text-align: center; } &.is-left { text-align: left; } &.is-right { text-align: right; } } th { background: @table-thead-background-color; border-bottom: 1px solid @table-border-color; font-size: 14px; color: @text-color; &.sortable { cursor: pointer; transition: all 0.3s; &:hover { background: @border-color; } } &+th { border-left: 1px solid @table-border-color; } } tr:first-child { border-top: none; } td.first-child, th:first-child { padding-left: 28px; } } } } .ten-table--vue + .ten-pagination { margin-top: 16px; text-align: right; }