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

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;
}
}
}
}
}
}