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

issue fix

Browse Source
This commit is contained in:
Chen Lily
2024-01-18 17:25:44 +08:00
parent fb9e920c15
commit feec8b59a7
7 changed files with 265 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -84,106 +84,106 @@ $listMaxHeight: 210px;
}
}
}
}
>.ui-drop-box {
position: absolute;
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transform-origin: top;
background-color: var(--bg-color);
top: calc($headerHeight + 2px);
z-index: 2;
transition: transform 120ms ease, opacity 120ms ease, visibility 120ms ease;
width: calc(100% + 2px);
.ui-drop-box {
position: absolute;
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transform-origin: top;
background-color: var(--bg-color);
top: calc($headerHeight + 2px);
z-index: 2;
transition: transform 120ms ease, opacity 120ms ease, visibility 120ms ease;
min-width: calc(100% + 2px);
box-sizing: border-box;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
left: -1px;
&.slide-up {
/*border-top-width: 1px;
border-bottom-width: 0;*/
transform-origin: bottom;
top: unset;
bottom: calc($headerHeight + 2px);
}
&.active {
visibility: visible;
opacity: 1;
transform: scaleY(1);
}
>.ui-drop-search {
box-sizing: border-box;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
left: -1px;
height: $searchBarHeight;
line-height: $searchBarHeight;
padding: 0 8px;
position: relative;
display: flex;
align-items: center;
&.slide-up {
/*border-top-width: 1px;
border-bottom-width: 0;*/
transform-origin: bottom;
top: unset;
bottom: calc($headerHeight + 2px);
}
&.active {
visibility: visible;
opacity: 1;
transform: scaleY(1);
}
>.ui-drop-search {
>input[type="text"] {
box-sizing: border-box;
height: $searchBarHeight;
line-height: $searchBarHeight;
padding: 0 8px;
position: relative;
display: flex;
align-items: center;
width: 100%;
height: $searchInputHeight;
padding: 0 6px 0 22px;
color: var(--color);
>input[type="text"] {
box-sizing: border-box;
width: 100%;
height: $searchInputHeight;
padding: 0 6px 0 22px;
color: var(--color);
@include outborder();
@include outborder();
// &:focus {
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
// }
// &:focus {
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
// }
&::placeholder {
font-style: italic;
}
}
>svg {
position: absolute;
left: 14px;
width: $searchIconSize;
height: 100%;
cursor: text;
&::placeholder {
font-style: italic;
}
}
>.ui-drop-list {
margin: 0;
padding: 0;
list-style: none;
max-height: $listMaxHeight;
overflow-y: auto;
font-size: var(--font-size);
@include scrollbar();
>svg {
position: absolute;
left: 14px;
width: $searchIconSize;
height: 100%;
cursor: text;
}
}
&.filtered>li:first-child {
>.ui-drop-list {
margin: 0;
padding: 0;
list-style: none;
max-height: $listMaxHeight;
overflow-y: auto;
font-size: var(--font-size);
@include scrollbar();
&.filtered>li:first-child {
background-color: var(--hover-bg-color);
}
>li {
// display: flex;
// align-items: center;
line-height: $dropItemHeight;
height: $dropItemHeight;
padding: 0 10px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover,
&.selected {
background-color: var(--hover-bg-color);
}
>li {
// display: flex;
// align-items: center;
line-height: $dropItemHeight;
>.ui-check-wrapper {
height: $dropItemHeight;
padding: 0 10px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover,
&.selected {
background-color: var(--hover-bg-color);
}
>.ui-check-wrapper {
height: $dropItemHeight;
display: flex;
}
display: flex;
}
}
}
}
}