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

sync

Browse Source
This commit is contained in:
Chen Lily
2025-12-24 10:55:40 +08:00
parent eec9d6045c
commit 752bb23571
25 changed files with 2348 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
lib/ui/css/common.scss
View File

@@ -21,4 +21,107 @@
.ui-input {
text-indent: var(--text-indent);
line-height: var(--line-height);
}
.ui-loading {
position: absolute;
@include inset(0, 0, 0, 0);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .12s, opacity .12s ease;
background-color: var(--loading-bg-color);
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
>div {
width: 15px;
aspect-ratio: 1;
border-radius: 50%;
animation: loading-dot 1s infinite linear alternate;
/*background-color: var(--loading-fore-color);
border-radius: var(--loading-border-radius);
>svg {
width: var(--loading-size);
height: var(--loading-size);
padding: 20px;
animation: loading-spinner 1.2s infinite linear;
}*/
}
}
.ui-notify {
padding: 10px 10px 12px;
position: fixed;
top: 16px;
right: 16px;
min-width: 300px;
max-width: 600px;
box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .13), 0 0.6px 1.8px 0 rgba(0, 0, 0, .11);
transition: transform .12s ease, opacity .12s ease;
transform-origin: right;
transform: translateX(100%);
opacity: 0;
&.active {
transform: translateX(0);
opacity: 1;
}
.ui-icon {
width: 30px;
height: 30px;
box-sizing: border-box;
}
>.ui-notify-single {
display: flex;
align-items: center;
>.ui-notify-message {
margin: 0 6px;
}
}
.ui-notify-header {
display: flex;
align-items: center;
}
.ui-notify-type {
padding: 3px;
fill: var(--green-color);
&.warning {
fill: var(--orange-color);
}
&.error {
fill: var(--red-color);
}
}
.ui-notify-title {
flex: 1 1 auto;
font-size: 1rem;
margin: 0 6px;
}
.ui-notify-close {
cursor: pointer;
padding: 6px;
transition: background-color .12s ease, fill .12s ease;
fill: var(--red-color);
&:hover {
background-color: var(--red-color);
fill: #fff;
}
}
.ui-notify-message {
flex: 1 1 auto;
}
}

43
lib/ui/css/dropdown.scss
View File

@@ -19,14 +19,14 @@ $listMaxHeight: 210px;
font-size: var(--font-size);
font-family: var(--font-family);
>.ui-drop-header {
> .ui-drop-header {
background-color: var(--bg-color);
display: flex;
height: $headerHeight;
@include outborder();
>.ui-drop-text {
> .ui-drop-text {
flex: 1 1 auto;
cursor: pointer;
font-size: var(--font-size);
@@ -41,7 +41,12 @@ $listMaxHeight: 210px;
@include outline();
}
>input.ui-drop-text {
> .ui-drop-text::before {
content: '';
display: inline-block;
}
> input.ui-drop-text {
cursor: initial;
&::placeholder {
@@ -50,7 +55,7 @@ $listMaxHeight: 210px;
}
}
>.ui-drop-caret {
> .ui-drop-caret {
flex: 0 0 auto;
width: $caretWidth;
display: flex;
@@ -79,8 +84,8 @@ $listMaxHeight: 210px;
// box-shadow: none;
}
>.ui-drop-text,
>.ui-drop-caret {
> .ui-drop-text,
> .ui-drop-caret {
cursor: default;
}
}
@@ -116,7 +121,7 @@ $listMaxHeight: 210px;
transform: scaleY(1);
}
>.ui-drop-search {
> .ui-drop-search {
box-sizing: border-box;
height: $searchBarHeight;
line-height: $searchBarHeight;
@@ -125,7 +130,7 @@ $listMaxHeight: 210px;
display: flex;
align-items: center;
>input[type="text"] {
> input[type="text"] {
box-sizing: border-box;
width: 100%;
height: $searchInputHeight;
@@ -133,7 +138,6 @@ $listMaxHeight: 210px;
color: var(--color);
@include outborder();
// &:focus {
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
// }
@@ -143,7 +147,7 @@ $listMaxHeight: 210px;
}
}
>svg {
> svg {
position: absolute;
left: 14px;
width: $searchIconSize;
@@ -152,18 +156,18 @@ $listMaxHeight: 210px;
}
}
>.ui-drop-list {
> .ui-drop-list {
max-height: $listMaxHeight;
overflow-y: auto;
position: relative;
font-size: var(--font-size);
@include scrollbar();
&.filtered>.drop-content>.li:first-child {
&.filtered > .drop-content > .li:first-child {
background-color: var(--hover-bg-color);
}
>.drop-content {
> .drop-content {
position: absolute;
width: 100%;
}
@@ -185,21 +189,26 @@ $listMaxHeight: 210px;
background-color: var(--hover-bg-color);
}
>.li-wrapper {
> .li-wrapper {
display: flex;
align-items: center;
>.ui-expandor {
> .ui-expandor {
width: 12px;
height: 12px;
display: flex;
opacity: 0;
&.active {
opacity: 1;
}
}
>.ui-check-wrapper {
> .ui-check-wrapper {
height: $dropItemHeight;
display: flex;
}
}
}
}
}
}

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

File diff suppressed because it is too large Load Diff

21
lib/ui/css/popup.scss
View File

@@ -58,19 +58,20 @@ $buttonHeight: 28px;
font-size: 1rem;
}
>.ui-popup-header-title {
.ui-popup-header-title {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 5px 0 3px 12px;
}
>.ui-popup-header-title,
.ui-popup-header-title,
.ui-popup-move {
cursor: move;
}
>.ui-popup-header-title.no-move {
.ui-popup-header-title.no-move {
cursor: default;
}
@@ -109,7 +110,7 @@ $buttonHeight: 28px;
flex: 1 1 auto;
line-height: $headerLineHeight;
position: relative;
min-height: 100px;
min-height: 80px;
>.ui-popup-loading {
position: absolute;
@@ -144,6 +145,16 @@ $buttonHeight: 28px;
display: flex;
margin: 10px;
&.message-wrapper-input {
flex-direction: column;
gap: 6px;
>.ui-text {
min-height: 50px;
resize: vertical;
}
}
>svg {
width: 30px;
height: 30px;
@@ -204,7 +215,7 @@ $buttonHeight: 28px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 4px 10px 16px 2px;
padding: 4px 26px 26px 20px;
}
.ui-popup-body,

2
lib/ui/css/tooltip.scss
View File

@@ -29,7 +29,7 @@
width: 16px;
height: 16px;
position: absolute;
left: calc(50% - 8px);
left: var(--pointer-left, calc(50% - 8px));
bottom: -8px;
transform: rotate(-45deg);
transform-origin: center;

24
lib/ui/css/variables/definition.scss
View File

@@ -9,6 +9,28 @@
}
}
@keyframes loading-dot {
0% {
box-shadow: 20px 0 #0067c0, -20px 0 #0067c022;
background: #0067c0;
}
33% {
box-shadow: 20px 0 #0067c0, -20px 0 #0067c022;
background: #0067c022;
}
66% {
box-shadow: 20px 0 #0067c022, -20px 0 #0067c0;
background: #0067c022;
}
100% {
box-shadow: 20px 0 #0067c022, -20px 0 #0067c0;
background: #0067c0;
}
}
:root {
/*color-scheme: light dark;*/
@@ -25,6 +47,8 @@
--switch-active-bg-color: #33c559;
--red-color: red;
--orange-color: orange;
--green-color: #33c559;
--title-color: #fff;
--title-bg-color: rgb(68, 114, 196);
--title-ctrlbg-color: rgb(68, 114, 196);