tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature: default wrap headers.

Browse Source
This commit is contained in:
Chen Lily
2024-02-23 09:29:51 +08:00
parent c153b5a4c1
commit 63a50e6bcb
2 changed files with 72 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
lib/ui/css/grid.scss
View File

@ -26,7 +26,7 @@
--filter-transition: transform .12s ease, opacity .24s ease;
--row-height: 36px;
--header-line-height: 26px;
--header-line-height: 20px;
--text-indent: 8px;
--loading-size: 40px;
@ -83,9 +83,6 @@
color: var(--header-fore-color);
tr {
position: sticky;
top: 0;
z-index: 2;
>th {
background-color: var(--header-bg-color);
@ -94,15 +91,16 @@
margin: 0;
word-wrap: break-word;
white-space: normal;
position: relative;
// position: relative;
top: 0;
position: sticky;
&.sticky {
position: sticky;
z-index: 3;
z-index: 2;
}
>div {
border-bottom: 1px solid var(--header-border-color);
line-height: var(--header-line-height);
min-height: var(--row-height);
display: flex;
@ -110,13 +108,17 @@
padding: var(--header-padding);
box-sizing: border-box;
// overflow-x: hidden;
border-right: 1px solid transparent;
transition: border-color .12s ease;
// border-right: 1px solid transparent;
// transition: border-color .12s ease;
>span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&.wrap {
white-space: normal;
}
}
>.ui-check-wrapper {
@ -186,20 +188,30 @@
cursor: ew-resize;
z-index: 2;
// &::after {
// content: '';
// height: 100%;
// width: 1px;
// display: block;
// margin: 0 auto;
// transition: background-color .12s ease;
// }
&::after {
content: '';
height: 100%;
width: 1px;
display: block;
margin: 0 auto;
transition: background-color .12s ease;
}
// &:hover::after {
// background-color: var(--split-border-color);
// }
}
>em.bottom-border {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
z-index: 2;
background-color: var(--header-border-color);
}
>.dragger {
position: absolute;
left: 0;
@ -247,8 +259,11 @@
}
}
&:hover>th>div {
border-color: var(--split-border-color);
// &:hover>th>div {
// border-color: var(--split-border-color);
// }
&:hover>th>.spliter::after {
background-color: var(--split-border-color);
}
}
}
@ -457,7 +472,7 @@
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .12s, opacity .12s ease;
z-index: 3;
z-index: 2;
&.active {
visibility: visible;
@ -476,7 +491,7 @@
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
z-index: 2;
>div {
background-color: var(--loading-fore-color);
@ -507,7 +522,7 @@
opacity: 0;
display: flex;
flex-direction: column;
z-index: 3;
z-index: 2;
&.active {
transform: scaleY(1);