ant-design-vue/components/vc-table/assets/index.less

232 lines
4.3 KiB
Plaintext

@tablePrefixCls: rc-table;
@text-color : #666;
@font-size-base : 12px;
@line-height: 1.5;
@table-border-color: #e9e9e9;
@table-head-background-color: #f7f7f7;
@vertical-padding: 16px;
@horizontal-padding: 8px;
.@{tablePrefixCls} {
font-size: @font-size-base;
color: @text-color;
transition: opacity 0.3s ease;
position: relative;
line-height: @line-height;
overflow: hidden;
.@{tablePrefixCls}-scroll {
overflow: auto;
table {
width: auto;
min-width: 100%;
}
}
.@{tablePrefixCls}-header {
overflow: hidden;
background: @table-head-background-color;
}
&-fixed-header &-body {
background: #fff;
position: relative;
}
&-fixed-header &-body-inner {
height: 100%;
overflow: scroll;
}
&-fixed-header &-scroll &-header {
overflow-x: scroll;
padding-bottom: 20px;
margin-bottom: -20px;
overflow-y: scroll;
box-sizing: border-box;
}
// https://github.com/ant-design/ant-design/issues/10828
&-fixed-columns-in-body {
visibility: hidden;
pointer-events: none;
}
.@{tablePrefixCls}-title {
padding: @vertical-padding @horizontal-padding;
border-top: 1px solid @table-border-color;
}
.@{tablePrefixCls}-content {
position: relative;
}
.@{tablePrefixCls}-footer {
padding: @vertical-padding @horizontal-padding;
border-bottom: 1px solid @table-border-color;
}
.@{tablePrefixCls}-placeholder {
padding: 16px 8px;
background: #fff;
border-bottom: 1px solid @table-border-color;
text-align: center;
position: relative;
&-fixed-columns {
position: absolute;
bottom: 0;
width: 100%;
background: transparent;
pointer-events: none;
}
}
table {
width: 100%;
border-collapse: separate;
text-align: left;
}
th {
background: @table-head-background-color;
font-weight: bold;
transition: background .3s ease;
}
td {
border-bottom: 1px solid @table-border-color;
&:empty:after {
content: '.'; // empty cell placeholder
visibility: hidden;
}
}
tr {
transition: all .3s ease;
&:hover {
background: #eaf8fe;
}
&.@{tablePrefixCls}-row-hover {
background: #eaf8fe;
}
}
th, td {
padding: @vertical-padding @horizontal-padding;
white-space: nowrap;
}
}
.@{tablePrefixCls} {
&-expand-icon-col {
width: 34px;
}
&-row, &-expanded-row {
&-expand-icon {
cursor: pointer;
display: inline-block;
width: 16px;
height: 16px;
text-align: center;
line-height: 16px;
border: 1px solid @table-border-color;
user-select: none;
background: #fff;
}
&-spaced {
visibility: hidden;
}
&-spaced:after {
content: '.'
}
&-expanded:after {
content: '-'
}
&-collapsed:after {
content: '+'
}
}
tr&-expanded-row {
background: #f7f7f7;
&:hover {
background: #f7f7f7;
}
}
&-column-hidden {
display: none;
}
&-prev-columns-page,
&-next-columns-page {
cursor: pointer;
color: #666;
z-index: 1;
&:hover {
color: #2db7f5;
}
&-disabled {
cursor: not-allowed;
color: #999;
&:hover {
color: #999;
}
}
}
&-prev-columns-page {
margin-right: 8px;
&:before {
content: '<';
}
}
&-next-columns-page {
float: right;
&:before {
content: '>';
}
}
&-fixed-left,
&-fixed-right {
position: absolute;
top: 0;
overflow: hidden;
table {
width: auto;
background: #fff;
}
}
&-fixed-left {
left: 0;
box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);
& .@{tablePrefixCls}-body-inner {
margin-right: -20px;
padding-right: 20px;
}
.@{tablePrefixCls}-fixed-header & .@{tablePrefixCls}-body-inner {
padding-right: 0;
}
}
&-fixed-right {
right: 0;
box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1);
// hide expand row content in right fixed Table
// https://github.com/ant-design/ant-design/issues/1898
.@{tablePrefixCls}-expanded-row {
color: transparent;
pointer-events: none;
}
}
&&-scroll-position-left &-fixed-left {
box-shadow: none;
}
&&-scroll-position-right &-fixed-right {
box-shadow: none;
}
}