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

import vitejs

Browse Source
This commit is contained in:
Tsanie Lily
2023-03-29 17:22:44 +08:00
parent 442d201fdd
commit 7c271d9b67
28 changed files with 13822 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
css/checkbox.scss Normal file
View File

@ -0,0 +1,52 @@
@import './functions/checkbox.scss';
@import './variables/definition.scss';
.checkbox-image {
>input[type="checkbox"] {
display: none;
&:checked {
&~.checked {
display: inline;
}
&~.unchecked {
display: none;
}
}
}
>.checked {
display: none;
}
>.unchecked {
display: inline;
}
}
.checkbox-wrapper {
display: flex;
align-items: center;
padding: 0 8px;
height: 36px;
@include check-box();
.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;
}
}

271
css/dropdown.scss Normal file
View File

@ -0,0 +1,271 @@
@import './variables/definition.scss';
@import './functions/func.scss';
@import './functions/checkbox.scss';
$headerHeight: 26px;
$caretWidth: 26px;
$dropItemHeight: 30px;
$borderRadius: 2px;
$scrollBarSize: 4px;
$searchBarHeight: 40px;
$searchInputHeight: 26px;
$searchIconSize: 13px;
$listMaxHeight: 210px;
.dropdown-wrapper {
@include user-select(none);
position: relative;
>.dropdown-header {
border: 1px solid $borderColor;
@include border-radius($borderRadius);
background-color: $bgColor;
display: flex;
height: $headerHeight;
@include transition(all .3s);
&:focus {
border-color: $focusColor;
// @include box-shadow(0 0 3px 1px rgba(0, 0, 0, .2));
}
&:focus,
&:focus-visible {
outline: none;
}
>.dropdown-select-container {
flex: 1 1 auto;
overflow-x: auto;
white-space: nowrap;
display: flex;
flex-direction: row;
@include scrollbar();
&::-webkit-scrollbar {
height: $scrollBarSize;
}
&::-webkit-scrollbar-thumb {
@include border-radius($borderRadius);
}
>span {
display: inline-block;
margin: 2px;
padding: 0 2px;
border: 1px solid lightgray;
height: 20px;
line-height: 20px;
background-color: white;
font-size: .75rem;
@include border-radius($borderRadius);
cursor: pointer;
position: relative;
>svg {
display: none;
width: 8px;
height: 20px;
fill: white;
vertical-align: top;
}
&:hover {
border-color: #1890ff;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background-color: #1890ff;
color: white;
>svg {
display: inline-block;
margin-left: 3px;
padding: 0 2px;
}
}
}
>label {
flex: 1 1 auto;
min-width: 40px;
cursor: pointer;
outline: none;
line-height: $headerHeight;
padding: 0 4px;
font-weight: 400;
font-size: .8125rem;
color: $foreColor;
}
}
>.dropdown-text {
flex: 1 1 auto;
cursor: pointer;
font-size: .875rem;
line-height: $headerHeight;
padding: 0 6px;
overflow: hidden;
text-overflow: ellipsis;
border: none;
outline: none;
}
>.dropdown-caret {
flex: 0 0 auto;
width: $caretWidth;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
&::after {
display: block;
content: '';
border-top: 4px solid;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
height: 0;
width: 0;
}
}
&.disabled {
border-color: $disabledColor;
color: $disabledColor;
&:focus {
border-color: $disabledColor;
// @include box-shadow(none);
}
>.dropdown-text,
>.dropdown-caret {
cursor: default;
}
}
}
>.dropdown-panel {
position: absolute;
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transform-origin: top;
background-color: $bgColor;
top: calc($headerHeight + 2px);
z-index: 2;
@include transition3(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));
left: -1px;
&.slide-up {
top: auto;
/*border-top-width: 1px;
border-bottom-width: 0;*/
transform-origin: bottom;
}
&.active {
visibility: visible;
opacity: 1;
transform: scaleY(1);
}
>.dropdown-search {
box-sizing: border-box;
height: $searchBarHeight;
line-height: $searchBarHeight;
padding: 0 8px;
position: relative;
>input[type="text"] {
box-sizing: border-box;
width: 100%;
height: $searchInputHeight;
outline: none;
border: 1px solid $borderColor;
@include border-radius($borderRadius);
padding: 0 6px 0 22px;
color: $foreColor;
@include transition(all .3s);
&:hover,
&:focus {
border-color: $focusColor;
}
// &:focus {
// @include box-shadow(0 0 3px 1px rgba(0, 0, 0, .2));
// }
}
>svg {
position: absolute;
left: 14px;
width: $searchIconSize;
height: 100%;
cursor: text;
}
}
>.dropdown-list {
margin: 0;
padding: 0;
list-style: none;
max-height: $listMaxHeight;
overflow-y: auto;
&.filtered>li:first-child {
background-color: $hoverColor;
}
>li {
display: flex;
align-items: center;
line-height: $dropItemHeight;
height: $dropItemHeight;
padding: 0 10px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover,
&.selected {
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;
}
}
}
}
}

84
css/functions/checkbox.scss Normal file
View File

@ -0,0 +1,84 @@
@import './func.scss';
$boxBorderColor: #999898;
$boxCheckedColor: #1890ff;
$boxDisabledColor: #d9d9d9;
@mixin check-box() {
.check-box-inner {
position: relative;
display: inline-block;
margin-top: 2px;
padding: 0;
width: 14px;
height: 14px;
background-color: #fff;
border: 1px solid $boxBorderColor;
@include user-select(none);
@include border-radius(2px);
@include transition(all .2s);
cursor: pointer;
>svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: #fff;
transform: scale(0);
opacity: 0;
@include transition(all .08s cubic-bezier(.78, .14, .15, .86));
}
}
>input[type="checkbox"] {
display: none;
&:checked+.check-box-inner {
border-color: $boxCheckedColor;
background-color: $boxCheckedColor;
>svg {
transform: scale(1);
opacity: 1;
}
}
&:disabled {
&+.check-box-inner {
border-color: $boxDisabledColor;
cursor: default;
}
&:checked+.check-box-inner {
border-color: $boxDisabledColor;
background-color: $boxDisabledColor;
}
&~span {
color: $boxDisabledColor;
cursor: default;
}
}
}
/*
&.disabled {
.check-box-inner {
border-color: $boxDisabledColor;
cursor: default;
}
>input:checked+.check-box-inner {
border-color: $boxDisabledColor;
background-color: $boxDisabledColor;
}
>span {
color: $boxDisabledColor;
cursor: default;
}
}
*/
}

54
css/functions/func.scss Normal file
View File

@ -0,0 +1,54 @@
@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;
height: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(168, 168, 168, 0.9);
border-radius: 4px;
}
}

54
css/tooltip.scss Normal file
View File

@ -0,0 +1,54 @@
@import './functions/checkbox.scss';
@import './variables/definition.scss';
.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;
@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);
> .tooltip-pointer {
box-sizing: border-box;
@include 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-curtain {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
> .tooltip-content {
font-size: $smallSize;
line-height: 1rem;
white-space: normal;
overflow: auto;
margin: 8px;
height: calc(100% - 16px);
@include user-select(none);
}
}

1
css/ui.min.css vendored Normal file
View File

@ -0,0 +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:flex;align-items:center;padding:0 8px;height:36px}.checkbox-wrapper .check-box-inner{position:relative;display:inline-block;margin-top:2px;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}

2
css/ui.scss Normal file
View File

@ -0,0 +1,2 @@
@import './checkbox.scss';
@import './tooltip.scss';

11
css/variables/definition.scss Normal file
View File

@ -0,0 +1,11 @@
// color
$borderColor: #d9d9d9;
$focusColor: #b9b9b9;
$disabledColor: #e9e9e9;
$hoverColor: #eee;
$bgColor: #fff;
$foreColor: #201f1e;
// dimension
$mediumSize: .875rem; // 14px
$smallSize: .8125rem; // 13px