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 committed 2023-03-31 17:35:36 +08:00
1 parent b9447997fe
commit 41b1bbd7d6
20 files changed
+575 -74
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/checkbox.scss
+13 -13
View File
@@ -34,19 +34,19 @@
.check-box-inner {
flex: 0 0 auto;
}
>span {
flex: 1 1 auto;
font-weight: 400;
font-size: $mediumSize;
padding-left: 8px;
padding-right: 6px;
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
color: #201f1e;
&+* {
flex: 1 1 auto;
font-weight: 400;
font-size: $mediumSize;
padding-left: 8px;
padding-right: 6px;
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
color: $foreColor;
}
}
}
css/dropdown.scss
+13 -30
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;
}
}
}
css/tooltip.scss
+1 -1
View File
@@ -46,7 +46,7 @@
font-size: $smallSize;
line-height: 1rem;
white-space: normal;
overflow: auto;
overflow: hidden;
margin: 8px;
height: calc(100% - 16px);
@include user-select(none);
css/ui.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.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>span{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}.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:2px;box-shadow:0 3.2px 7.2px 0 rgba(0,0,0,.13),0 .6px 1.8px 0 rgba(0,0,0,.11);transition:visibility 0s linear 120ms,opacity 120ms ease}.tooltip-wrapper>.tooltip-pointer{box-sizing:border-box;box-shadow:0 5px 15px 2px rgba(0,0,0,.3);border:1px solid #fff;z-index:-1;width:16px;height:16px;position:absolute;left:calc(50% - 8px);bottom:-8px;transform:rotate(-45deg);transform-origin:center}.tooltip-wrapper>.tooltip-curtain{position:absolute;width:100%;height:100%;z-index:-1}.tooltip-wrapper>.tooltip-content{font-size:.8125rem;line-height:1rem;white-space:normal;overflow:auto;margin:8px;height:calc(100% - 16px);-moz-user-select:none;user-select:none;-webkit-user-select:none}
.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
css/ui.scss
+1
View File
@@ -1,2 +1,3 @@
@import './checkbox.scss';
@import './dropdown.scss';
@import './tooltip.scss';
css/variables/definition.scss
+2 -1
View File
@@ -1,7 +1,8 @@
// color
$borderColor: #d9d9d9;
$focusColor: #b9b9b9;
$disabledColor: #e9e9e9;
$disabledBgColor: #e9e9e9;
$disabledForeColor: #aaa;
$hoverColor: #eee;
$bgColor: #fff;
$foreColor: #201f1e;