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;
}
}
}

10
css/functions/checkbox.scss
View File

@ -1,5 +1,3 @@
@import './func.scss';
$boxBorderColor: #999898;
$boxCheckedColor: #1890ff;
$boxDisabledColor: #d9d9d9;
@ -13,9 +11,9 @@ $boxDisabledColor: #d9d9d9;
height: 14px;
background-color: #fff;
border: 1px solid $boxBorderColor;
@include user-select(none);
@include border-radius(2px);
@include transition(all .2s);
user-select: none;
border-radius: 2px;
transition: all .2s;
cursor: pointer;
>svg {
@ -27,7 +25,7 @@ $boxDisabledColor: #d9d9d9;
fill: #fff;
transform: scale(0);
opacity: 0;
@include transition(all .08s cubic-bezier(.78, .14, .15, .86));
transition: all .08s cubic-bezier(.78, .14, .15, .86);
}
}

43
css/functions/func.scss
View File

@ -1,46 +1,3 @@
@mixin user-select($prop) {
-moz-user-select: $prop;
-ms-user-select: $prop;
user-select: $prop;
-webkit-user-select: $prop;
}
@mixin border-radius($property) {
-moz-border-radius: $property;
-webkit-border-radius: $property;
border-radius: $property;
}
@mixin box-shadow($property) {
-webkit-box-shadow: $property;
box-shadow: $property;
}
@mixin box-shadow2($p1, $p2) {
-webkit-box-shadow: $p1, $p2;
box-shadow: $p1, $p2;
}
@mixin box-shadow3($p1, $p2, $p3) {
-webkit-box-shadow: $p1, $p2, $p3;
box-shadow: $p1, $p2, $p3;
}
@mixin transition($property) {
-webkit-transition: $property;
transition: $property;
}
@mixin transition2($p1, $p2) {
-webkit-transition: $p1, $p2;
transition: $p1, $p2;
}
@mixin transition3($p1, $p2, $p3) {
-webkit-transition: $p1, $p2, $p3;
transition: $p1, $p2, $p3;
}
@mixin scrollbar() {
&::-webkit-scrollbar {
width: 8px;

18
css/tooltip.scss
View File

@ -17,13 +17,13 @@
min-width: 75px;
max-width: 480px;
min-height: 32px;
@include border-radius(2px);
@include box-shadow2(0 3.2px 7.2px 0 rgba(0, 0, 0, .13), 0 0.6px 1.8px 0 rgba(0, 0, 0, .11));
@include transition2(visibility 0s linear 120ms, opacity 120ms ease);
border-radius: 2px;
box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .13), 0 0.6px 1.8px 0 rgba(0, 0, 0, .11);
transition: visibility 0s linear 120ms, opacity 120ms ease;
> .tooltip-pointer {
>.tooltip-pointer {
box-sizing: border-box;
@include box-shadow(0 5px 15px 2px rgba(0, 0, 0, .3));
box-shadow: 0 5px 15px 2px rgba(0, 0, 0, .3);
border: 1px solid #fff;
z-index: -1;
width: 16px;
@ -35,20 +35,20 @@
transform-origin: center;
}
> .tooltip-curtain {
>.tooltip-curtain {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
> .tooltip-content {
>.tooltip-content {
font-size: $smallSize;
line-height: 1rem;
white-space: normal;
overflow: hidden;
margin: 8px;
height: calc(100% - 16px);
@include user-select(none);
user-select: none;
}
}
}

1
css/ui.min.css vendored
View File

File diff suppressed because one or more lines are too long