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

sync form work

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-10 17:30:17 +08:00
parent fecaf6f450
commit c38e486d7d
15 changed files with 860 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
css/dropdown.scss
View File

@@ -5,7 +5,6 @@
$headerHeight: 26px;
$caretWidth: 26px;
$dropItemHeight: 30px;
$borderRadius: 2px;
$scrollBarSize: 4px;
$searchBarHeight: 36px;
@@ -21,16 +20,16 @@ $listMaxHeight: 210px;
position: relative;
>.drop-header {
border: 1px solid $borderColor;
border-radius: $borderRadius;
background-color: $bgColor;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
background-color: var(--bg-color);
display: flex;
height: $headerHeight;
transition: border-color .2s;
&:focus,
&:hover {
border-color: $focusColor;
border-color: var(--focus-color);
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
}
@@ -52,7 +51,7 @@ $listMaxHeight: 210px;
}
&::-webkit-scrollbar-thumb {
border-radius: $borderRadius;
border-radius: var(--border-radius);
}
>span {
@@ -64,7 +63,7 @@ $listMaxHeight: 210px;
line-height: 20px;
background-color: white;
font-size: $tinySize;
border-radius: $borderRadius;
border-radius: var(--border-radius);
cursor: pointer;
position: relative;
@@ -100,7 +99,7 @@ $listMaxHeight: 210px;
padding: 0 4px;
font-weight: 400;
font-size: $smallSize;
color: $foreColor;
color: var(--color);
}
}*/
@@ -146,11 +145,11 @@ $listMaxHeight: 210px;
}
&.disabled {
border-color: $disabledBgColor;
color: $disabledForeColor;
border-color: var(--disabled-bg-color);
color: var(--disabled-color);
&:focus {
border-color: $disabledBgColor;
border-color: var(--disabled-bg-color);
// box-shadow: none;
}
@@ -167,13 +166,13 @@ $listMaxHeight: 210px;
opacity: 0;
transform: scaleY(0);
transform-origin: top;
background-color: $bgColor;
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);
box-sizing: border-box;
/*border: 1px solid $borderColor;
/*border: 1px solid var(--border-color);
border-top-width: 0;*/
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;
@@ -206,15 +205,15 @@ $listMaxHeight: 210px;
width: 100%;
height: $searchInputHeight;
outline: none;
border: 1px solid $borderColor;
border-radius: $borderRadius;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0 6px 0 22px;
color: $foreColor;
color: var(--color);
transition: border-color .2s;
&:hover,
&:focus {
border-color: $focusColor;
border-color: var(--focus-color);
}
// &:focus {
@@ -245,7 +244,7 @@ $listMaxHeight: 210px;
@include scrollbar();
&.filtered>li:first-child {
background-color: $hoverColor;
background-color: var(--hover-color);
}
>li {
@@ -261,7 +260,7 @@ $listMaxHeight: 210px;
&:hover,
&.selected {
background-color: $hoverColor;
background-color: var(--hover-color);
}
>.checkbox-wrapper {