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

add support to resize or reorder.

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-04 15:30:38 +08:00
parent de1ba82970
commit a2fbb7e78a
3 changed files with 368 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
css/grid.scss
View File

@ -13,6 +13,7 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow-x: hidden;
& {
--hover-bg-color: lightyellow;
@ -24,6 +25,7 @@
--dark-border-color: #666;
--split-border-color: #b3b3b3;
--dragger-bg-color: #fff;
--dragger-cursor-color: #333;
--row-bg-color: #fff;
--row-active-bg-color: #fafafa;
--row-selected-bg-color: #e6f2fb;
@ -42,9 +44,10 @@
--arrow-size: 4px;
--split-width: 8px;
--dragger-size: 20px;
--dragger-opacity: .4;
--dragger-opacity: .6;
--dragger-cursor-size: 4px;
--dragger-cursor-opacity: .6;
--dragger-cursor-pos: -4px;
--dragger-cursor-opacity: .3;
--header-padding: 4px 12px 4px 8px;
--spacing-s: 4px;
@ -83,65 +86,112 @@
table-layout: fixed;
position: relative;
th {
padding: 0;
margin: 0;
word-wrap: break-word;
white-space: normal;
tr {
position: relative;
>div {
line-height: var(--header-line-height);
min-height: var(--line-height);
display: flex;
align-items: center;
padding: var(--header-padding);
box-sizing: border-box;
}
>th {
padding: 0;
margin: 0;
word-wrap: break-word;
white-space: normal;
position: relative;
>.arrow {
width: 0;
height: 0;
top: 50%;
margin-top: calc(0px - var(--arrow-size) / 2);
right: calc(var(--arrow-size) / 2);
position: absolute;
&.asc {
border-bottom: var(--arrow-size) solid var(--dark-border-color);
>div {
line-height: var(--header-line-height);
min-height: var(--line-height);
display: flex;
align-items: center;
padding: var(--header-padding);
box-sizing: border-box;
overflow-x: hidden;
}
&.desc {
border-top: var(--arrow-size) solid var(--dark-border-color);
>.arrow {
width: 0;
height: 0;
top: 50%;
margin-top: calc(0px - var(--arrow-size) / 2);
right: calc(var(--arrow-size) / 2);
position: absolute;
&.asc {
border-bottom: var(--arrow-size) solid var(--dark-border-color);
}
&.desc {
border-top: var(--arrow-size) solid var(--dark-border-color);
}
&.asc,
&.desc {
border-left: var(--arrow-size) solid transparent;
border-right: var(--arrow-size) solid transparent;
}
}
&.asc,
&.desc {
border-left: var(--arrow-size) solid transparent;
border-right: var(--arrow-size) solid transparent;
}
}
>.spliter {
position: absolute;
height: 100%;
top: 0;
right: calc(0px - var(--split-width) /2);
width: var(--split-width);
cursor: ew-resize;
z-index: 1;
&::after {
content: '';
>.spliter {
position: absolute;
height: 100%;
width: 1px;
display: block;
margin: 0 auto;
transition: background-color .12s ease;
top: 0;
right: calc(0px - var(--split-width) /2);
width: var(--split-width);
cursor: ew-resize;
z-index: 1;
&::after {
content: '';
height: 100%;
width: 1px;
display: block;
margin: 0 auto;
transition: background-color .12s ease;
}
&:hover::after {
background-color: var(--split-border-color);
}
}
&:hover::after {
background-color: var(--split-border-color);
>.dragger {
position: absolute;
left: 0;
top: 0;
min-width: var(--dragger-size);
height: 100%;
background-color: var(--dragger-bg-color);
opacity: var(--dragger-opacity);
display: none;
}
>.dragger-cursor {
position: absolute;
top: 0;
height: 100%;
border: 1px solid var(--dragger-cursor-color);
box-sizing: border-box;
margin-left: 0;
opacity: var(--dragger-cursor-opacity);
display: none;
transition: left .12s ease;
&::before {
top: -1px;
border-top: var(--dragger-cursor-size) solid;
}
&::after {
bottom: -1px;
border-bottom: var(--dragger-cursor-size) solid;
}
&::before,
&::after {
content: '';
position: absolute;
left: var(--dragger-cursor-pos);
border-left: var(--dragger-cursor-size) solid transparent;
border-right: var(--dragger-cursor-size) solid transparent;
}
}
}
}