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

fix dropdown issue, add autoprefix for scss

Browse Source
This commit is contained in:
Tsanie Lily
2023-03-31 22:19:51 +08:00
parent 41b1bbd7d6
commit 9677f6a82d
18 changed files with 2738 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
css/dropdown.scss
View File

@@ -1,5 +1,5 @@
@import './variables/definition.scss';
@import './functions/func.scss';
// @import './functions/func.scss';
@import './functions/checkbox.scss';
$headerHeight: 26px;
@@ -8,7 +8,7 @@ $dropItemHeight: 30px;
$borderRadius: 2px;
$scrollBarSize: 4px;
$searchBarHeight: 40px;
$searchBarHeight: 36px;
$searchInputHeight: 26px;
$searchIconSize: 13px;
$listMaxHeight: 210px;
@@ -16,21 +16,21 @@ $listMaxHeight: 210px;
.dropdown-wrapper {
display: inline-block;
border: none;
@include border-radius(unset);
@include user-select(none);
border-radius: unset;
user-select: none;
position: relative;
>.dropdown-header {
border: 1px solid $borderColor;
@include border-radius($borderRadius);
border-radius: $borderRadius;
background-color: $bgColor;
display: flex;
height: $headerHeight;
@include transition(all .3s);
transition: all .3s;
&:focus {
border-color: $focusColor;
// @include box-shadow(0 0 3px 1px rgba(0, 0, 0, .2));
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
}
&:focus,
@@ -51,7 +51,7 @@ $listMaxHeight: 210px;
}
&::-webkit-scrollbar-thumb {
@include border-radius($borderRadius);
border-radius: $borderRadius;
}
>span {
@@ -63,7 +63,7 @@ $listMaxHeight: 210px;
line-height: 20px;
background-color: white;
font-size: .75rem;
@include border-radius($borderRadius);
border-radius: $borderRadius;
cursor: pointer;
position: relative;
@@ -113,6 +113,7 @@ $listMaxHeight: 210px;
text-overflow: ellipsis;
border: none;
outline: none;
white-space: nowrap;
}
>.dropdown-caret {
@@ -140,7 +141,7 @@ $listMaxHeight: 210px;
&:focus {
border-color: $disabledBgColor;
// @include box-shadow(none);
// box-shadow: none;
}
>.dropdown-text,
@@ -159,12 +160,12 @@ $listMaxHeight: 210px;
background-color: $bgColor;
top: calc($headerHeight + 2px);
z-index: 2;
@include transition3(transform 120ms ease, opacity 120ms ease, visibility 120ms ease);
transition: transform 120ms ease, opacity 120ms ease, visibility 120ms ease;
width: calc(100% + 2px);
box-sizing: border-box;
/*border: 1px solid $borderColor;
border-top-width: 0;*/
@include box-shadow3(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));
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 {
@@ -186,6 +187,8 @@ $listMaxHeight: 210px;
line-height: $searchBarHeight;
padding: 0 8px;
position: relative;
display: flex;
align-items: center;
>input[type="text"] {
box-sizing: border-box;
@@ -193,10 +196,10 @@ $listMaxHeight: 210px;
height: $searchInputHeight;
outline: none;
border: 1px solid $borderColor;
@include border-radius($borderRadius);
border-radius: $borderRadius;
padding: 0 6px 0 22px;
color: $foreColor;
@include transition(all .3s);
transition: all .3s;
&:hover,
&:focus {
@@ -204,7 +207,7 @@ $listMaxHeight: 210px;
}
// &:focus {
// @include box-shadow(0 0 3px 1px rgba(0, 0, 0, .2));
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
// }
}
@@ -220,10 +223,10 @@ $listMaxHeight: 210px;
>.dropdown-list {
margin: 0;
padding: 0;
padding-bottom: 6px;
list-style: none;
max-height: $listMaxHeight;
overflow-y: auto;
font-size: .875rem;
&.filtered>li:first-child {
background-color: $hoverColor;
@@ -247,6 +250,7 @@ $listMaxHeight: 210px;
>.checkbox-wrapper {
height: $dropItemHeight;
display: flex;
}
}
}