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

optimize style sheets, support tabIndex in popup

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-21 10:59:56 +08:00
parent cbdb2c7868
commit c4316e7e52
16 changed files with 235 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,5 @@
@import "./func.scss";
@mixin check-box() {
.check-box-inner {
position: relative;
@ -6,12 +8,11 @@
width: 14px;
height: 14px;
background-color: #fff;
border: 1px solid var(--box-color);
user-select: none;
border-radius: 2px;
transition: all .2s;
cursor: pointer;
@include outborder();
>svg {
position: absolute;
top: 0;
@ -50,17 +51,18 @@
&:disabled {
&+.check-box-inner {
border-color: var(--disabled-box-color);
border-color: var(--disabled-border-color);
background-color: var(--disabled-bg-color);
cursor: default;
}
&:checked+.check-box-inner {
border-color: var(--disabled-box-color);
background-color: var(--disabled-box-color);
border-color: var(--disabled-border-color);
background-color: var(--disabled-border-color);
}
&~span {
color: var(--disabled-box-color);
color: var(--disabled-border-color);
cursor: default;
}
}

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

@ -15,4 +15,31 @@
background-color: rgba(168, 168, 168, 0.9);
border-radius: 4px;
}
}
@mixin outline() {
&:focus,
&:focus-visible {
outline: none;
}
}
@mixin outborder() {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
transition: border-color .12s ease;
@include outline();
&:focus,
&:hover {
border-color: var(--focus-border-color);
}
&:disabled {
border-color: var(--disabled-border-color);
color: var(--disabled-color);
background-color: var(--disabled-bg-color);
}
}