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--single-line': singleLine,
'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

52
src/_styles/DataTable.scss
View File

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