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

add dropdown component

Browse Source
This commit is contained in:
Tsanie Lily
2023-03-31 17:35:36 +08:00
parent b9447997fe
commit 41b1bbd7d6
20 changed files with 575 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
css/dropdown.scss
View File

@@ -14,6 +14,9 @@ $searchIconSize: 13px;
$listMaxHeight: 210px;
.dropdown-wrapper {
display: inline-block;
border: none;
@include border-radius(unset);
@include user-select(none);
position: relative;
@@ -35,7 +38,7 @@ $listMaxHeight: 210px;
outline: none;
}
>.dropdown-select-container {
/*>.dropdown-select-container {
flex: 1 1 auto;
overflow-x: auto;
white-space: nowrap;
@@ -98,7 +101,7 @@ $listMaxHeight: 210px;
font-size: .8125rem;
color: $foreColor;
}
}
}*/
>.dropdown-text {
flex: 1 1 auto;
@@ -132,11 +135,11 @@ $listMaxHeight: 210px;
}
&.disabled {
border-color: $disabledColor;
color: $disabledColor;
border-color: $disabledBgColor;
color: $disabledForeColor;
&:focus {
border-color: $disabledColor;
border-color: $disabledBgColor;
// @include box-shadow(none);
}
@@ -217,6 +220,7 @@ $listMaxHeight: 210px;
>.dropdown-list {
margin: 0;
padding: 0;
padding-bottom: 6px;
list-style: none;
max-height: $listMaxHeight;
overflow-y: auto;
@@ -226,8 +230,8 @@ $listMaxHeight: 210px;
}
>li {
display: flex;
align-items: center;
// display: flex;
// align-items: center;
line-height: $dropItemHeight;
height: $dropItemHeight;
padding: 0 10px;
@@ -241,29 +245,8 @@ $listMaxHeight: 210px;
background-color: $hoverColor;
}
@include check-box();
>label {
display: flex;
align-items: center;
}
.check-box-inner {
flex: 0 0 auto;
}
.check-box-inner+* {
flex: 1 1 auto;
font-weight: 400;
font-size: .8125rem;
padding-left: 8px;
padding-right: 6px;
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
color: $foreColor;
>.checkbox-wrapper {
height: $dropItemHeight;
}
}
}