mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(data-table): max-height related & box-shadow-related

Browse Source 
max-height: max-height should only be applied when it's set. Or it will trigger a wired bug which I can't reproduce...
box-shadow: table-header's box-shadow don't overlap with its border. It needs 1px's offset.
This commit is contained in:
07akioni 2020-05-30 22:35:14 +08:00
parent 619ca2999b
commit 95298ad1db
2 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/DataTable/src/DataTable.vue
View File

@ -6,7 +6,8 @@
'n-data-table--bordered': bordered, 'n-data-table--bordered': bordered,
'n-data-table--single-line': singleLine, 'n-data-table--single-line': singleLine,
'n-data-table--single-column': singleColumn, 'n-data-table--single-column': singleColumn,
[`n-data-table--${size}-size`]: true [`n-data-table--${size}-size`]: true,
'n-data-table--has-max-height': maxHeight !== null
}" }"
> >
<n-spin <n-spin

52
src/_styles/DataTable.scss
View File

@ -36,7 +36,6 @@
@include data-table-size-mixin(); @include data-table-size-mixin();
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
padding-bottom: 8px;
@include b(data-table-empty) { @include b(data-table-empty) {
margin: 16px 0 14px 0; margin: 16px 0 14px 0;
flex-grow: 1; flex-grow: 1;
@ -128,41 +127,43 @@
position: sticky; position: sticky;
z-index: 2; z-index: 2;
&::after { &::after {
pointer-events: none;
content: ""; content: "";
width: 16px; width: 36px;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: -1px; bottom: -1px;
transition: box-shadow .2s $--n-ease-in-out-cubic-bezier; transition: box-shadow .2s $--n-ease-in-out-cubic-bezier;
right: -16px; right: -36px;
} }
} }
@include m(fixed-right) { @include m(fixed-right) {
right: 0; right: 0;
position: sticky; position: sticky;
&::before { &::before {
pointer-events: none;
content: ""; content: "";
width: 16px; width: 36px;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: -1px; bottom: -1px;
transition: box-shadow .2s $--n-ease-in-out-cubic-bezier; transition: box-shadow .2s $--n-ease-in-out-cubic-bezier;
left: -16px; left: -36px;
} }
} }
} }
background-color: map-get($--data-table-body-background-color, 'default'); background-color: map-get($--data-table-body-background-color, 'default');
@include m(shadow-before) { @include m(shadow-before) {
&::before { &::before {
box-shadow: inset -16px 0 12px -16px $--data-table-fixed-column-box-shadow-color; box-shadow: inset -12px 0 8px -12px $--data-table-fixed-column-box-shadow-color;
} }
} }
@include m(shadow-after) { @include m(shadow-after) {
border-right-color: transparent !important; border-right-color: transparent !important;
&::after { &::after {
box-shadow: inset 16px 0 12px -16px $--data-table-fixed-column-box-shadow-color; box-shadow: inset 12px 0 8px -12px $--data-table-fixed-column-box-shadow-color;
} }
} }
color: $--data-table-body-text-color; color: $--data-table-body-text-color;
@ -210,13 +211,14 @@
z-index: 2; z-index: 2;
&::after { &::after {
content: ""; content: "";
width: 16px; pointer-events: none;
width: 36px;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: -1px;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier; transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
right: -16px; right: -36px;
} }
} }
@include m(fixed-right) { @include m(fixed-right) {
@ -225,24 +227,25 @@
z-index: 1; z-index: 1;
&::before { &::before {
content: ""; content: "";
width: 16px; pointer-events: none;
width: 36px;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: -1px;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier; transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
left: -16px; left: -36px;
} }
} }
@include m(shadow-before) { @include m(shadow-before) {
&::before { &::before {
box-shadow: inset -16px 0 12px -16px $--data-table-fixed-column-box-shadow-color; box-shadow: inset -12px 0 8px -12px $--data-table-fixed-column-box-shadow-color;
} }
} }
@include m(shadow-after) { @include m(shadow-after) {
border-right-color: transparent !important; border-right-color: transparent !important;
&::after { &::after {
box-shadow: inset 16px 0 12px -16px $--data-table-fixed-column-box-shadow-color; box-shadow: inset 12px 0 8px -12px $--data-table-fixed-column-box-shadow-color;
} }
} }
} }
@ -299,12 +302,19 @@
} }
} }
} }
@include m(has-max-height) {
@include b(data-table-base-table) {
@include b(scrollbar) {
overflow: hidden;
max-height: stretch;
max-height: -webkit-fill-available;
}
}
}
@include b(data-table-base-table) { @include b(data-table-base-table) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include b(scrollbar) { @include b(scrollbar) {
overflow: hidden;
max-height: -webkit-fill-available;
@include b(scrollbar-content) { @include b(scrollbar-content) {
overflow: visible; overflow: visible;
} }
@ -320,7 +330,9 @@
} }
scrollbar-width: none; scrollbar-width: none;
} }
border-bottom: 1px solid map-get($--data-table-border-color, 'default'); @include b(data-table-table) {
border-bottom: 1px solid map-get($--data-table-border-color, 'default');
}
@include b(data-table-th) { @include b(data-table-th) {
@include b(data-table-sort-button) { @include b(data-table-sort-button) {
@include once { @include once {
@ -471,7 +483,9 @@
} }
} }
@include b(data-table-base-table-header) { @include b(data-table-base-table-header) {
border-bottom: 1px solid map-get($--data-table-border-color, 'modal'); @include b(data-table-table) {
border-bottom: 1px solid map-get($--data-table-border-color, 'modal');
}
} }
} }
} }