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 committed 2023-03-31 22:19:51 +08:00
1 parent 41b1bbd7d6
commit 9677f6a82d
18 files changed
+2738 -133
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/dropdown.scss
+20 -16
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;
}
}
}
css/functions/checkbox.scss
+4 -6
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);
}
}
css/functions/func.scss
-43
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;
css/tooltip.scss
+9 -9
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;
}
}
}
css/ui.min.css
Vendored
-1
View File
@@ -1 +0,0 @@
.checkbox-image>input[type=checkbox]{display:none}.checkbox-image>input[type=checkbox]:checked~.checked{display:inline}.checkbox-image>input[type=checkbox]:checked~.unchecked{display:none}.checkbox-image>.checked{display:none}.checkbox-image>.unchecked{display:inline}.checkbox-wrapper{display:inline-flex;align-items:center;padding:0 8px;height:36px}.checkbox-wrapper .check-box-inner{position:relative;display:inline-block;padding:0;width:14px;height:14px;background-color:#fff;border:1px solid #999898;-moz-user-select:none;user-select:none;-webkit-user-select:none;border-radius:2px;transition:all .2s;cursor:pointer}.checkbox-wrapper .check-box-inner>svg{position:absolute;top:0;left:0;width:100%;height:100%;fill:#fff;transform:scale(0);opacity:0;transition:all .08s cubic-bezier(0.78, 0.14, 0.15, 0.86)}.checkbox-wrapper>input[type=checkbox]{display:none}.checkbox-wrapper>input[type=checkbox]:checked+.check-box-inner{border-color:#1890ff;background-color:#1890ff}.checkbox-wrapper>input[type=checkbox]:checked+.check-box-inner>svg{transform:scale(1);opacity:1}.checkbox-wrapper>input[type=checkbox]:disabled+.check-box-inner{border-color:#d9d9d9;cursor:default}.checkbox-wrapper>input[type=checkbox]:disabled:checked+.check-box-inner{border-color:#d9d9d9;background-color:#d9d9d9}.checkbox-wrapper>input[type=checkbox]:disabled~span{color:#d9d9d9;cursor:default}.checkbox-wrapper .check-box-inner{flex:0 0 auto}.checkbox-wrapper .check-box-inner+*{flex:1 1 auto;font-weight:400;font-size:.875rem;padding-left:8px;padding-right:6px;align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:#201f1e}.dropdown-wrapper{display:inline-block;border:none;border-radius:unset;-moz-user-select:none;user-select:none;-webkit-user-select:none;position:relative}.dropdown-wrapper>.dropdown-header{border:1px solid #d9d9d9;border-radius:2px;background-color:#fff;display:flex;height:26px;transition:all .3s}.dropdown-wrapper>.dropdown-header:focus{border-color:#b9b9b9}.dropdown-wrapper>.dropdown-header:focus,.dropdown-wrapper>.dropdown-header:focus-visible{outline:none}.dropdown-wrapper>.dropdown-header>.dropdown-text{flex:1 1 auto;cursor:pointer;font-size:.875rem;line-height:26px;padding:0 6px;overflow:hidden;text-overflow:ellipsis;border:none;outline:none}.dropdown-wrapper>.dropdown-header>.dropdown-caret{flex:0 0 auto;width:26px;display:flex;justify-content:center;align-items:center;cursor:pointer}.dropdown-wrapper>.dropdown-header>.dropdown-caret::after{display:block;content:"";border-top:4px solid;border-left:4px solid rgba(0,0,0,0);border-right:4px solid rgba(0,0,0,0);height:0;width:0}.dropdown-wrapper>.dropdown-header.disabled{border-color:#e9e9e9;color:#aaa}.dropdown-wrapper>.dropdown-header.disabled:focus{border-color:#e9e9e9}.dropdown-wrapper>.dropdown-header.disabled>.dropdown-text,.dropdown-wrapper>.dropdown-header.disabled>.dropdown-caret{cursor:default}.dropdown-wrapper>.dropdown-panel{position:absolute;visibility:hidden;opacity:0;transform:scaleY(0);transform-origin:top;background-color:#fff;top:28px;z-index:2;transition:transform 120ms ease,opacity 120ms ease,visibility 120ms ease;width:calc(100% + 2px);box-sizing:border-box;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}.dropdown-wrapper>.dropdown-panel.slide-up{top:auto;transform-origin:bottom}.dropdown-wrapper>.dropdown-panel.active{visibility:visible;opacity:1;transform:scaleY(1)}.dropdown-wrapper>.dropdown-panel>.dropdown-search{box-sizing:border-box;height:40px;line-height:40px;padding:0 8px;position:relative}.dropdown-wrapper>.dropdown-panel>.dropdown-search>input[type=text]{box-sizing:border-box;width:100%;height:26px;outline:none;border:1px solid #d9d9d9;border-radius:2px;padding:0 6px 0 22px;color:#201f1e;transition:all .3s}.dropdown-wrapper>.dropdown-panel>.dropdown-search>input[type=text]:hover,.dropdown-wrapper>.dropdown-panel>.dropdown-search>input[type=text]:focus{border-color:#b9b9b9}.dropdown-wrapper>.dropdown-panel>.dropdown-search>svg{position:absolute;left:14px;width:13px;height:100%;cursor:text}.dropdown-wrapper>.dropdown-panel>.dropdown-list{margin:0;padding:0;padding-bottom:6px;list-style:none;max-height:210px;overflow-y:auto}.dropdown-wrapper>.dropdown-panel>.dropdown-list.filtered>li:first-child{background-color:#eee}.dropdown-wrapper>.dropdown-panel>.dropdown-list>li{line-height:30px;height:30px;padding:0 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-wrapper>.dropdown-panel>.dropdown-list>li:hover,.dropdown-wrapper>.dropdown-panel>.dropdown-list>li.selected{background-color:#eee}.dropdown-wrapper>.dropdown-panel>.dropdown-list>li>.checkbox-wrapper{height:30px}.tooltip-color{background-color:#fff;color:#323130;border-color:rgba(204,204,204,.8);outline:none}.tooltip-wrapper{position:fixed;word-wrap:break-word;height:auto;text-align:left;z-index:250;min-width:75px;max-width:480px;min-height:32px;border-radius:2pLine truncated