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

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