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

2
lib/ui/css/checkbox.scss
View File

@ -1,4 +1,4 @@
@import './functions/checkbox.scss';
@import "./functions/checkbox.scss";
.checkbox-image {
>input[type="checkbox"] {

23
lib/ui/css/common.scss
View File

@ -1,26 +1,11 @@
@import "../css/functions/func.scss";
.ui-text,
.ui-input {
.ui-input[type] {
font-size: var(--font-size);
font-family: var(--font-family);
border: 1px solid var(--box-color);
border-radius: var(--border-radius);
transition: border-color .2s;
&:focus,
&:focus-visible {
outline: none;
}
&:focus,
&:hover {
border-color: var(--focus-color);
}
&:disabled {
border-color: var(--disabled-box-color);
color: var(--disabled-color);
background-color: var(--disabled-bg-color);
}
@include outborder();
}
.ui-input {

102
lib/ui/css/dropdown.scss
View File

@ -1,4 +1,4 @@
@import './functions/func.scss';
@import "./functions/func.scss";
$headerHeight: 26px;
$caretWidth: 26px;
@ -16,90 +16,15 @@ $listMaxHeight: 210px;
border-radius: unset;
user-select: none;
position: relative;
font-size: var(--font-size);
font-family: var(--font-family);
>.drop-header {
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: var(--focus-color);
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
}
&:focus,
&:focus-visible {
outline: none;
}
/*>.drop-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 {
border-radius: var(--border-radius);
}
>span {
display: inline-block;
margin: 2px;
padding: 0 2px;
border: 1px solid lightgray;
height: 20px;
line-height: 20px;
background-color: white;
font-size: $tinySize;
border-radius: var(--border-radius);
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: var(--font-smaller-size);
color: var(--color);
}
}*/
@include outborder();
>.drop-text {
flex: 1 1 auto;
@ -110,8 +35,9 @@ $listMaxHeight: 210px;
overflow: hidden;
text-overflow: ellipsis;
border: none;
outline: none;
white-space: nowrap;
@include outline();
}
>input.drop-text {
@ -143,11 +69,12 @@ $listMaxHeight: 210px;
}
&.disabled {
border-color: var(--disabled-bg-color);
border-color: var(--disabled-border-color);
background-color: var(--disabled-bg-color);
color: var(--disabled-color);
&:focus {
border-color: var(--disabled-bg-color);
border-color: var(--disabled-border-color);
// box-shadow: none;
}
@ -170,8 +97,6 @@ $listMaxHeight: 210px;
transition: transform 120ms ease, opacity 120ms ease, visibility 120ms ease;
width: calc(100% + 2px);
box-sizing: border-box;
/*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;
@ -202,17 +127,10 @@ $listMaxHeight: 210px;
box-sizing: border-box;
width: 100%;
height: $searchInputHeight;
outline: none;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 0 6px 0 22px;
color: var(--color);
transition: border-color .2s;
&:hover,
&:focus {
border-color: var(--focus-color);
}
@include outborder();
// &:focus {
// box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);

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);
}
}

16
lib/ui/css/grid.scss
View File

@ -1,4 +1,4 @@
@import './functions/func.scss';
@import "./functions/func.scss";
.grid {
position: relative;
@ -43,16 +43,11 @@
--spacing-cell: 6px 4px 6px 8px;
}
&:focus,
&:focus-visible {
outline: none;
}
@include outline();
&,
input[type="text"],
textarea,
.drop-wrapper>.drop-header>.drop-text,
.drop-wrapper>.drop-box>.drop-list {
textarea {
font-size: var(--font-size);
font-family: var(--font-family);
}
@ -238,10 +233,7 @@
width: 100%;
padding: 0;
&:focus,
&:focus-visible {
outline: none;
}
@include outline();
&:disabled {
color: var(--text-disabled-color);

43
lib/ui/css/popup.scss
View File

@ -1,4 +1,4 @@
@import './functions/func.scss';
@import "./functions/func.scss";
$headerLineHeight: 24px;
$buttonHeight: 28px;
@ -75,6 +75,14 @@ $buttonHeight: 28px;
&:hover {
opacity: .8;
}
&:focus,
&:focus-visible {
outline: none;
opacity: .8;
background-color: rgb(0 0 0/10%);
border-radius: var(--corner-radius);
}
}
}
@ -118,7 +126,7 @@ $buttonHeight: 28px;
width: 40px;
height: 40px;
&+span {
+span {
padding-left: 16px;
}
}
@ -148,7 +156,7 @@ $buttonHeight: 28px;
font-weight: bold;
}
&+* {
+* {
flex: 1 1 auto;
margin-right: 10px;
box-sizing: border-box;
@ -156,30 +164,11 @@ $buttonHeight: 28px;
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);
+textarea {
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 {
+.checkbox-wrapper {
padding: 0;
}
}
@ -210,14 +199,12 @@ $buttonHeight: 28px;
background-color: var(--title-bg-color);
transition: opacity .12s ease;
&:focus,
&:hover {
opacity: .8;
}
&:focus,
&:focus-visible {
outline: none;
}
@include outline();
}
}

5
lib/ui/css/tooltip.scss
View File

@ -1,8 +1,11 @@
@import "./functions/func.scss";
.tooltip-color {
background-color: #fff;
color: #323130;
border-color: rgba(204, 204, 204, .8);
outline: none;
@include outline();
}
.tooltip-wrapper {

14
lib/ui/css/variables/definition.scss
View File

@ -11,16 +11,16 @@
:root {
--color: #201f1e;
--red-color: red;
--bg-color: #fff;
--border-color: #b9b9b9;
--focus-border-color: #666;
--disabled-color: #aaa;
--disabled-bg-color: #e9e9e9;
--disabled-border-color: #d9d9d9;
--red-color: red;
--title-color: #fff;
--title-bg-color: rgb(68, 114, 196);
--border-color: #d9d9d9;
--focus-color: #666;
--disabled-bg-color: #e9e9e9;
--disabled-color: #aaa;
--box-color: #999898;
--disabled-box-color: #d9d9d9;
--hover-bg-color: #eee;
--link-color: #1890ff;
--primary-color: rgb(123, 28, 33);