2020-02-20 16:26:34 +08:00
|
|
|
@import "./mixins/mixins.scss";
|
|
|
|
|
2020-03-02 15:03:44 +08:00
|
|
|
@mixin table-size-mixin () {
|
|
|
|
@include m(small-size) {
|
|
|
|
font-size: map-get($--n-font-size, 'medium');
|
|
|
|
@include e(th) {
|
|
|
|
padding: 5px 5px 5px 11px;
|
|
|
|
}
|
|
|
|
@include e(td) {
|
|
|
|
padding: 5px 5px 5px 11px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include m(medium-size) {
|
|
|
|
font-size: map-get($--n-font-size, 'medium');
|
|
|
|
@include e(th) {
|
|
|
|
padding: 10px 10px 10px 16px;
|
|
|
|
}
|
|
|
|
@include e(td) {
|
|
|
|
padding: 10px 10px 10px 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include m(large-size) {
|
|
|
|
font-size: map-get($--n-font-size, 'large');
|
|
|
|
@include e(th) {
|
|
|
|
padding: 15px 15px 15px 20px;
|
|
|
|
}
|
|
|
|
@include e(td) {
|
|
|
|
padding: 15px 15px 15px 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-20 16:26:34 +08:00
|
|
|
@include themes-mixin {
|
|
|
|
@include b(table) {
|
2020-02-21 14:59:17 +08:00
|
|
|
@include once {
|
2020-03-02 15:03:44 +08:00
|
|
|
@include table-size-mixin;
|
2020-02-23 12:24:22 +08:00
|
|
|
line-height: 1.75;
|
2020-02-21 14:59:17 +08:00
|
|
|
font-size: 14px;
|
|
|
|
width: 100%;
|
2020-02-28 22:57:10 +08:00
|
|
|
border-radius: $--n-popover-border-radius $--n-popover-border-radius 0 0;
|
2020-02-21 14:59:17 +08:00
|
|
|
text-align: left;
|
|
|
|
border-collapse: separate;
|
|
|
|
border-spacing: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
transition:
|
|
|
|
background-color .3s $--n-ease-in-out-cubic-bezier,
|
|
|
|
border-color .3s $--n-ease-in-out-cubic-bezier,
|
|
|
|
color .3s $--n-ease-in-out-cubic-bezier;
|
|
|
|
}
|
2020-03-04 23:38:19 +08:00
|
|
|
background-color: map-get($--table-body-background-color, 'default');
|
2020-02-20 16:26:34 +08:00
|
|
|
@include e(th) {
|
2020-02-21 14:59:17 +08:00
|
|
|
@include once {
|
|
|
|
background-clip: padding-box;
|
|
|
|
white-space: nowrap;
|
|
|
|
transition:
|
|
|
|
background-color .3s $--n-ease-in-out-cubic-bezier,
|
|
|
|
border-color .3s $--n-ease-in-out-cubic-bezier,
|
|
|
|
color .3s $--n-ease-in-out-cubic-bezier;
|
2020-02-22 20:41:05 +08:00
|
|
|
text-align: inherit;
|
|
|
|
padding: 14px 12px;
|
|
|
|
vertical-align: inherit;
|
|
|
|
text-transform: none;
|
|
|
|
border: none;
|
2020-02-27 23:02:58 +08:00
|
|
|
font-weight: $--n-strong-weight;
|
2020-02-21 14:59:17 +08:00
|
|
|
}
|
|
|
|
color: $--table-header-text-color;
|
|
|
|
background-color: $--table-header-background-color;
|
|
|
|
border-color: $--table-border-color;
|
|
|
|
border-bottom: 1px solid $--table-border-color;
|
2020-02-23 11:28:20 +08:00
|
|
|
border-right: 1px solid $--table-border-color;
|
|
|
|
&:last-child {
|
|
|
|
border-right: none;
|
|
|
|
}
|
2020-02-20 16:26:34 +08:00
|
|
|
}
|
|
|
|
@include e(td) {
|
2020-02-21 14:59:17 +08:00
|
|
|
@include once {
|
|
|
|
transition:
|
|
|
|
background-color .3s $--n-ease-in-out-cubic-bezier,
|
|
|
|
border-color .3s $--n-ease-in-out-cubic-bezier,
|
|
|
|
color .3s $--n-ease-in-out-cubic-bezier;
|
|
|
|
padding: 12px;
|
|
|
|
}
|
|
|
|
color: $--table-body-text-color;
|
2020-03-04 23:38:19 +08:00
|
|
|
background-color: map-get($--table-body-background-color, 'default');
|
2020-02-23 11:28:20 +08:00
|
|
|
border-right: 1px solid $--table-border-color;
|
|
|
|
border-bottom: 1px solid $--table-border-color;
|
|
|
|
&:last-child {
|
|
|
|
border-right: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include m(bordered) {
|
|
|
|
border: 1px solid $--table-border-color;
|
2020-02-28 22:57:10 +08:00
|
|
|
border-radius: $--n-popover-border-radius;
|
2020-02-23 11:28:20 +08:00
|
|
|
@include e(tr) {
|
|
|
|
&:last-child {
|
|
|
|
@include e(td) {
|
|
|
|
border-bottom: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include m(single-line) {
|
|
|
|
@include e(th) {
|
|
|
|
border-right: none;
|
|
|
|
}
|
|
|
|
@include e(td) {
|
|
|
|
border-right: none;
|
|
|
|
}
|
2020-02-20 16:26:34 +08:00
|
|
|
}
|
2020-02-23 12:08:48 +08:00
|
|
|
@include m(single-column) {
|
|
|
|
@include e(td) {
|
|
|
|
border-bottom: none;
|
|
|
|
}
|
|
|
|
}
|
2020-02-20 16:26:34 +08:00
|
|
|
}
|
2020-03-04 23:38:19 +08:00
|
|
|
@include as-modal-content {
|
|
|
|
@include b(table) {
|
|
|
|
background-color: map-get($--table-body-background-color, 'modal');
|
|
|
|
@include e(td) {
|
|
|
|
background-color: map-get($--table-body-background-color, 'modal');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-02-20 16:26:34 +08:00
|
|
|
}
|