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

add dropdown document

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-01 14:02:11 +08:00
parent 067d6252b2
commit c3a9fa7ba3
7 changed files with 283 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
css/dropdown.scss
View File

@ -26,9 +26,10 @@ $listMaxHeight: 210px;
background-color: $bgColor;
display: flex;
height: $headerHeight;
transition: all .3s;
transition: border-color .2s;
&:focus {
&:focus,
&:hover {
border-color: $focusColor;
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
}
@ -62,7 +63,7 @@ $listMaxHeight: 210px;
height: 20px;
line-height: 20px;
background-color: white;
font-size: .75rem;
font-size: $tinySize;
border-radius: $borderRadius;
cursor: pointer;
position: relative;
@ -98,7 +99,7 @@ $listMaxHeight: 210px;
line-height: $headerHeight;
padding: 0 4px;
font-weight: 400;
font-size: .8125rem;
font-size: $smallSize;
color: $foreColor;
}
}*/
@ -106,7 +107,7 @@ $listMaxHeight: 210px;
>.dropdown-text {
flex: 1 1 auto;
cursor: pointer;
font-size: .875rem;
font-size: $mediumSize;
line-height: $headerHeight;
padding: 0 6px;
overflow: hidden;
@ -116,6 +117,15 @@ $listMaxHeight: 210px;
white-space: nowrap;
}
>input.dropdown-text {
cursor: initial;
&::placeholder {
font-size: $smallSize;
font-style: italic;
}
}
>.dropdown-caret {
flex: 0 0 auto;
width: $caretWidth;
@ -173,6 +183,8 @@ $listMaxHeight: 210px;
/*border-top-width: 1px;
border-bottom-width: 0;*/
transform-origin: bottom;
top: unset;
bottom: calc($headerHeight + 2px);
}
&.active {
@ -199,7 +211,7 @@ $listMaxHeight: 210px;
border-radius: $borderRadius;
padding: 0 6px 0 22px;
color: $foreColor;
transition: all .3s;
transition: border-color .2s;
&:hover,
&:focus {
@ -209,6 +221,10 @@ $listMaxHeight: 210px;
// &:focus {
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
// }
&::placeholder {
font-style: italic;
}
}
>svg {
@ -226,7 +242,7 @@ $listMaxHeight: 210px;
list-style: none;
max-height: $listMaxHeight;
overflow-y: auto;
font-size: .875rem;
font-size: $mediumSize;
@include scrollbar();
&.filtered>li:first-child {

1
css/variables/definition.scss
View File

@ -10,3 +10,4 @@ $foreColor: #201f1e;
// dimension
$mediumSize: .875rem; // 14px
$smallSize: .8125rem; // 13px
$tinySize: .75rem; // 12px