mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-25 08:43:57 +08:00
274 lines
4.7 KiB
Plaintext
274 lines
4.7 KiB
Plaintext
@import "../mixins/index";
|
|
|
|
@table-prefix-cls: ~"@{css-prefix}table";
|
|
@table-border-color: #e9e9e9;
|
|
@table-head-background-color: #f3f3f3;
|
|
|
|
.@{table-prefix-cls} {
|
|
font-size: @font-size-base;
|
|
color: @text-color;
|
|
|
|
&-body {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
border-collapse: separate;
|
|
text-align: left;
|
|
border-radius: @border-radius-base;
|
|
}
|
|
|
|
th {
|
|
background: @table-head-background-color;
|
|
font-weight: bold;
|
|
transition: background .3s ease;
|
|
|
|
.anticon-bars {
|
|
margin-left: 4px;
|
|
.iconfont-size-under-12px(10px);
|
|
cursor: pointer;
|
|
color: #aaa;
|
|
transition: all 0.3s ease;
|
|
&:hover {
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.@{table-prefix-cls}-filter-selected.anticon-bars {
|
|
color: @primary-color;
|
|
}
|
|
|
|
&:first-child {
|
|
border-radius: @border-radius-base 0 0 0;
|
|
}
|
|
&:last-child {
|
|
border-radius: 0 @border-radius-base 0 0;
|
|
}
|
|
}
|
|
|
|
td {
|
|
border-bottom: 1px solid @table-border-color;
|
|
}
|
|
|
|
tr {
|
|
transition: all .3s ease;
|
|
&:hover {
|
|
background: tint(@primary-color, 90%);
|
|
}
|
|
}
|
|
|
|
tr.@{table-prefix-cls}-row-selected {
|
|
background: #fafafa;
|
|
}
|
|
|
|
th.@{table-prefix-cls}-column-sort {
|
|
background: #EAEAEA;
|
|
}
|
|
|
|
th, td {
|
|
padding: 16px 8px;
|
|
}
|
|
|
|
th.@{table-prefix-cls}-selection-column,
|
|
td.@{table-prefix-cls}-selection-column {
|
|
text-align: center;
|
|
}
|
|
|
|
&-loading {
|
|
position: relative;
|
|
.@{table-prefix-cls}-body {
|
|
background: #fff;
|
|
opacity: 0.5;
|
|
}
|
|
.@{table-prefix-cls}-spin-holder {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -30px;
|
|
position: absolute;
|
|
}
|
|
.@{table-prefix-cls}-with-pagination {
|
|
margin-top: -20px;
|
|
}
|
|
.@{table-prefix-cls}-without-pagination {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
&-small {
|
|
table {
|
|
border: 1px solid #e9e9e9;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
th {
|
|
padding: 10px 8px;
|
|
background: #fff;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
}
|
|
|
|
td {
|
|
padding: 6px 8px;
|
|
}
|
|
.ant-table-row:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&-column-sorter {
|
|
margin-left: 4px;
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 14px;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
&-up,
|
|
&-down {
|
|
line-height: 4px;
|
|
height: 6px;
|
|
display: block;
|
|
width: 12px;
|
|
cursor: pointer;
|
|
&:hover .anticon {
|
|
color: #666;
|
|
}
|
|
&.on {
|
|
.anticon-caret-up,
|
|
.anticon-caret-down {
|
|
color: @primary-color;
|
|
}
|
|
}
|
|
}
|
|
.anticon-caret-up,
|
|
.anticon-caret-down {
|
|
.iconfont-size-under-12px(6px);
|
|
line-height: 6px;
|
|
height: 6px;
|
|
color: #aaa;
|
|
&:before {
|
|
-moz-transform-origin: 53% 50%; /* fix firefox position */
|
|
}
|
|
}
|
|
}
|
|
|
|
&.@{table-prefix-cls}-bordered {
|
|
table {
|
|
border: 1px solid #E9E9E9;
|
|
}
|
|
|
|
th {
|
|
border-bottom: 1px solid #E9E9E9;
|
|
}
|
|
|
|
tr:last-child {
|
|
td {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
th, td {
|
|
border-right: 1px solid #E9E9E9;
|
|
&:last-child {
|
|
border-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-empty {
|
|
position: relative;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
&-empty &-body {
|
|
height: 150px;
|
|
}
|
|
|
|
&-placeholder {
|
|
height: 100px;
|
|
line-height: 100px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #999;
|
|
border-bottom: 1px solid #E9E9E9;
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 0;
|
|
width: 100%;
|
|
.anticon {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{table-prefix-cls}-pagination {
|
|
margin: 16px 0;
|
|
float: right;
|
|
}
|
|
|
|
.@{table-prefix-cls}-filter-dropdown {
|
|
min-width: 88px;
|
|
margin-left: -8px;
|
|
margin-top: -6px;
|
|
.ant-dropdown-menu-item {
|
|
overflow: hidden;
|
|
padding: 7px 24px 8px 7px;
|
|
&.ant-dropdown-menu-item-selected {
|
|
.selected_icon();
|
|
}
|
|
&.ant-dropdown-menu-item-selected:after {
|
|
padding-right: 8px;
|
|
}
|
|
}
|
|
|
|
a&-link {
|
|
color: @link-color;
|
|
&:hover {
|
|
color: @link-hover-color;
|
|
}
|
|
&:active {
|
|
color: @link-active-color;
|
|
}
|
|
&.confirm {
|
|
float: left;
|
|
}
|
|
&.clear {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{table-prefix-cls} {
|
|
&-row {
|
|
&-expand-icon {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
text-align: center;
|
|
line-height: 15px;
|
|
border: 1px solid #E9E9E9;
|
|
user-select: none;
|
|
background: #fff;
|
|
&-cell {
|
|
width: 18px;
|
|
}
|
|
}
|
|
|
|
&-expanded:after {
|
|
content: '-'
|
|
}
|
|
|
|
&-collapsed:after {
|
|
content: '+'
|
|
}
|
|
}
|
|
tr&-expanded-row {
|
|
&, &:hover {
|
|
background: #fbfbfb;
|
|
}
|
|
}
|
|
}
|