naive-ui/styles/Table.scss

124 lines
3.3 KiB
SCSS
Raw Normal View History

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;
}
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;
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
}
@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
}