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

adjustment

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-21 17:17:56 +08:00
parent c4316e7e52
commit 222ca43afb
23 changed files with 341 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
lib/ui/css/functions/checkbox.scss
View File

@ -1,70 +0,0 @@
@import "./func.scss";
@mixin check-box() {
.check-box-inner {
position: relative;
display: inline-block;
padding: 0;
width: 14px;
height: 14px;
background-color: #fff;
user-select: none;
cursor: pointer;
@include outborder();
>svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: #fff;
transform: scale(0);
opacity: 0;
transition: all .08s cubic-bezier(.78, .14, .15, .86);
}
}
&.radiobox-wrapper {
.check-box-inner {
box-sizing: border-box;
border-radius: 8px;
width: 16px;
height: 16px;
}
}
>input[type="checkbox"],
>input[type="radio"] {
display: none;
&:checked+.check-box-inner {
border-color: var(--link-color);
background-color: var(--link-color);
>svg {
transform: scale(1);
opacity: 1;
}
}
&:disabled {
&+.check-box-inner {
border-color: var(--disabled-border-color);
background-color: var(--disabled-bg-color);
cursor: default;
}
&:checked+.check-box-inner {
border-color: var(--disabled-border-color);
background-color: var(--disabled-border-color);
}
&~span {
color: var(--disabled-border-color);
cursor: default;
}
}
}
}

70
lib/ui/css/functions/func.scss
View File

@ -42,4 +42,74 @@
color: var(--disabled-color);
background-color: var(--disabled-bg-color);
}
}
@mixin ui-check() {
.ui-check-inner {
position: relative;
display: inline-block;
padding: 0;
width: 14px;
height: 14px;
background-color: #fff;
user-select: none;
cursor: pointer;
@include outborder();
>svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: #fff;
transform: scale(0);
opacity: 0;
transition: all .08s cubic-bezier(.78, .14, .15, .86);
}
}
&.ui-radio-wrapper {
.ui-check-inner {
box-sizing: border-box;
border-radius: 8px;
width: 16px;
height: 16px;
}
}
>input[type="checkbox"],
>input[type="radio"] {
display: none;
&:checked+.ui-check-inner {
border-color: var(--link-color);
background-color: var(--link-color);
>svg {
transform: scale(1);
opacity: 1;
}
}
&:disabled {
&:checked+.ui-check-inner {
border-color: var(--disabled-border-color);
background-color: var(--disabled-border-color);
}
+.ui-check-inner {
border-color: var(--disabled-border-color);
background-color: var(--disabled-bg-color);
cursor: default;
}
~span {
color: var(--disabled-border-color);
cursor: default;
}
}
}
}