ten-design-vue
Version:
ten-vue
445 lines (370 loc) • 8.46 kB
text/less
/* 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;
}