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

sync form work

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-10 17:30:17 +08:00
parent fecaf6f450
commit c38e486d7d
15 changed files with 860 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/checkbox.scss
View File

@ -46,7 +46,7 @@
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
color: $foreColor;
color: var(--color);
}
}
}

37
css/dropdown.scss
View File

@ -5,7 +5,6 @@
$headerHeight: 26px;
$caretWidth: 26px;
$dropItemHeight: 30px;
$borderRadius: 2px;
$scrollBarSize: 4px;
$searchBarHeight: 36px;
@ -21,16 +20,16 @@ $listMaxHeight: 210px;
position: relative;
>.drop-header {
border: 1px solid $borderColor;
border-radius: $borderRadius;
background-color: $bgColor;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
background-color: var(--bg-color);
display: flex;
height: $headerHeight;
transition: border-color .2s;
&:focus,
&:hover {
border-color: $focusColor;
border-color: var(--focus-color);
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
}
@ -52,7 +51,7 @@ $listMaxHeight: 210px;
}
&::-webkit-scrollbar-thumb {
border-radius: $borderRadius;
border-radius: var(--border-radius);
}
>span {
@ -64,7 +63,7 @@ $listMaxHeight: 210px;
line-height: 20px;
background-color: white;
font-size: $tinySize;
border-radius: $borderRadius;
border-radius: var(--border-radius);
cursor: pointer;
position: relative;
@ -100,7 +99,7 @@ $listMaxHeight: 210px;
padding: 0 4px;
font-weight: 400;
font-size: $smallSize;
color: $foreColor;
color: var(--color);
}
}*/
@ -146,11 +145,11 @@ $listMaxHeight: 210px;
}
&.disabled {
border-color: $disabledBgColor;
color: $disabledForeColor;
border-color: var(--disabled-bg-color);
color: var(--disabled-color);
&:focus {
border-color: $disabledBgColor;
border-color: var(--disabled-bg-color);
// box-shadow: none;
}
@ -167,13 +166,13 @@ $listMaxHeight: 210px;
opacity: 0;
transform: scaleY(0);
transform-origin: top;
background-color: $bgColor;
background-color: var(--bg-color);
top: calc($headerHeight + 2px);
z-index: 2;
transition: transform 120ms ease, opacity 120ms ease, visibility 120ms ease;
width: calc(100% + 2px);
box-sizing: border-box;
/*border: 1px solid $borderColor;
/*border: 1px solid var(--border-color);
border-top-width: 0;*/
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;
@ -206,15 +205,15 @@ $listMaxHeight: 210px;
width: 100%;
height: $searchInputHeight;
outline: none;
border: 1px solid $borderColor;
border-radius: $borderRadius;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0 6px 0 22px;
color: $foreColor;
color: var(--color);
transition: border-color .2s;
&:hover,
&:focus {
border-color: $focusColor;
border-color: var(--focus-color);
}
// &:focus {
@ -245,7 +244,7 @@ $listMaxHeight: 210px;
@include scrollbar();
&.filtered>li:first-child {
background-color: $hoverColor;
background-color: var(--hover-color);
}
>li {
@ -261,7 +260,7 @@ $listMaxHeight: 210px;
&:hover,
&.selected {
background-color: $hoverColor;
background-color: var(--hover-color);
}
>.checkbox-wrapper {

18
css/functions/checkbox.scss
View File

@ -1,7 +1,3 @@
$boxBorderColor: #999898;
$boxCheckedColor: #1890ff;
$boxDisabledColor: #d9d9d9;
@mixin check-box() {
.check-box-inner {
position: relative;
@ -10,7 +6,7 @@ $boxDisabledColor: #d9d9d9;
width: 14px;
height: 14px;
background-color: #fff;
border: 1px solid $boxBorderColor;
border: 1px solid var(--box-color);
user-select: none;
border-radius: 2px;
transition: all .2s;
@ -33,8 +29,8 @@ $boxDisabledColor: #d9d9d9;
display: none;
&:checked+.check-box-inner {
border-color: $boxCheckedColor;
background-color: $boxCheckedColor;
border-color: var(--link-color);
background-color: var(--link-color);
>svg {
transform: scale(1);
@ -44,17 +40,17 @@ $boxDisabledColor: #d9d9d9;
&:disabled {
&+.check-box-inner {
border-color: $boxDisabledColor;
border-color: var(--disabled-box-color);
cursor: default;
}
&:checked+.check-box-inner {
border-color: $boxDisabledColor;
background-color: $boxDisabledColor;
border-color: var(--disabled-box-color);
background-color: var(--disabled-box-color);
}
&~span {
color: $boxDisabledColor;
color: var(--disabled-box-color);
cursor: default;
}
}

31
css/grid.scss
View File

@ -1,13 +1,3 @@
@keyframes loading-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.grid {
position: relative;
box-sizing: border-box;
@ -17,8 +7,6 @@
& {
--hover-bg-color: lightyellow;
--link-fore-color: #1890ff;
--link-disabled-color: #d9d9d9;
--header-border-color: #adaba9;
--header-bg-color: #fafafa;
--header-fore-color: #000;
@ -32,8 +20,6 @@
--row-active-bg-color: #fafafa;
--row-selected-bg-color: #e6f2fb;
--text-disabled-color: gray;
--loading-bg-color: hsla(0, 0%, 100%, .4);
--loading-fore-color: rgba(0, 0, 0, .2);
--font-size: .8125rem;
--line-height: 36px;
@ -260,11 +246,16 @@
}
}
.checkbox-wrapper .check-box-inner {
.checkbox-wrapper {
display: flex;
justify-content: center;
&,
>svg {
transition: none;
.check-box-inner {
&,
>svg {
transition: none;
}
}
}
@ -293,7 +284,7 @@
}
}
.icon {
.col-icon {
display: flex;
cursor: pointer;
height: var(--line-height);
@ -304,7 +295,7 @@
>svg {
width: 16px;
height: 16px;
fill: var(--link-fore-color);
fill: var(--primary-color);
transition: opacity .12s ease;
}

132
css/popup.scss
View File

@ -2,7 +2,7 @@
@import './variables/definition.scss';
$headerLineHeight: 24px;
$buttonHeight: 36px;
$buttonHeight: 28px;
.popup-mask {
position: fixed;
@ -15,17 +15,23 @@ $buttonHeight: 36px;
z-index: 200;
transition: opacity .12s ease;
&.active .popup-container {
& {
--corner-radius: 6px;
--loading-size: 20px;
--loading-border-radius: 10px;
}
&.popup-active .popup-container {
transform: scale(1.1);
}
.popup-container {
min-width: 400px;
max-width: 800px;
background-color: $bgColor;
border-radius: 2px;
background-color: var(--bg-color);
border-radius: var(--corner-radius);
box-shadow: 0 2px 8px rgba(0 0 0 /11%);
transition: all .12s ease;
transition: opacity .12s ease, transform .12s ease;
position: absolute;
display: flex;
flex-direction: column;
@ -33,11 +39,13 @@ $buttonHeight: 36px;
.popup-header {
flex: 0 0 auto;
padding: 10px 12px 6px;
border-radius: var(--corner-radius) var(--corner-radius) 0 0;
line-height: $headerLineHeight;
user-select: none;
background-color: var(--title-bg-color);
color: var(--title-color);
display: flex;
align-items: center;
>div {
flex: 1 1 auto;
@ -48,6 +56,7 @@ $buttonHeight: 36px;
flex: 0 0 auto;
width: $headerLineHeight;
height: $headerLineHeight;
fill: var(--title-color);
padding: 4px;
cursor: pointer;
box-sizing: border-box;
@ -63,6 +72,109 @@ $buttonHeight: 36px;
margin: 6px 10px;
flex: 1 1 auto;
line-height: $headerLineHeight;
position: relative;
min-height: 100px;
>.popup-loading {
position: absolute;
@include inset(0, 0, -46px, 0);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear .12s, opacity .12s ease;
background-color: var(--loading-bg-color);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
>div {
background-color: var(--loading-fore-color);
border-radius: var(--loading-border-radius);
>svg {
width: var(--loading-size);
height: var(--loading-size);
padding: 20px;
animation: loading-spinner 1.2s infinite linear;
}
}
}
>.message-wrapper {
display: flex;
margin: 10px;
>svg {
width: 40px;
height: 40px;
&+span {
padding-left: 16px;
}
}
}
.setting-wrapper {
--line-height: 28px;
>.setting-item {
display: flex;
align-items: center;
line-height: var(--line-height);
margin: 4px 0;
>.setting-label {
flex: 0 0 auto;
width: 120px;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
&.setting-required::after {
content: '*';
color: var(--red-color);
font-weight: bold;
}
&+* {
flex: 1 1 auto;
margin-right: 10px;
box-sizing: border-box;
height: var(--line-height);
line-height: var(--line-height);
}
&+input[type="text"],
&+input[type="email"],
&+input[type="tel"],
&+textarea {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
text-indent: var(--text-indent);
transition: border-color .12s ease;
&:hover {
border-color: var(--focus-color);
}
&:focus,
&:focus-visible {
outline: none;
}
}
&+.drop-wrapper>.drop-header>.drop-text {
font-size: 12px;
}
&+.checkbox-wrapper {
padding: 0;
}
}
}
}
}
.popup-footer {
@ -73,14 +185,18 @@ $buttonHeight: 36px;
padding: 4px 10px 16px 2px;
.popup-button {
margin-left: 8px;
margin-left: 12px;
border: none;
height: $buttonHeight;
line-height: $buttonHeight;
padding: 0 8px;
min-width: 60px;
color: var(--title-color);
border-radius: var(--corner-radius);
padding: 0 16px;
box-sizing: border-box;
min-width: 70px;
text-align: center;
cursor: pointer;
user-select: none;
background-color: var(--title-bg-color);
transition: opacity .12s ease;

44
css/variables/definition.scss
View File

@ -1,13 +1,37 @@
// color
$borderColor: #d9d9d9;
$focusColor: #b9b9b9;
$disabledBgColor: #e9e9e9;
$disabledForeColor: #aaa;
$hoverColor: #eee;
$bgColor: #fff;
$foreColor: #201f1e;
// dimension
$mediumSize: .875rem; // 14px
$smallSize: .8125rem; // 13px
$tinySize: .75rem; // 12px
$tinySize: .75rem; // 12px
// animation
@keyframes loading-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
:root {
--color: #201f1e;
--red-color: red;
--bg-color: #fff;
--title-color: #fff;
--title-bg-color: rgb(68, 114, 196);
--border-color: #d9d9d9;
--focus-color: #b9b9b9;
--disabled-bg-color: #e9e9e9;
--disabled-color: #aaa;
--box-color: #999898;
--disabled-box-color: #d9d9d9;
--hover-color: #eee;
--link-color: #1890ff;
--primary-color: rgb(123,28,33);
--loading-bg-color: hsla(0, 0%, 100%, .4);
--loading-fore-color: rgba(0, 0, 0, .2);
--border-radius: 2px;
--text-indent: 4px;
}