One SearchInput to rule them all
This commit is contained in:
parent
c62b5a900e
commit
24b7790829
15 changed files with 266 additions and 232 deletions
|
@ -57,7 +57,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__scroller {
|
||||
&__input__scroller {
|
||||
max-height: 300px;
|
||||
min-height: 300px;
|
||||
padding: 16px;
|
||||
|
@ -149,67 +149,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__search {
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
margin: 10px 16px;
|
||||
padding: 5px 12px;
|
||||
position: relative;
|
||||
|
||||
@include font-body-2;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-gray-02;
|
||||
border: solid 1px $color-gray-02;
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
background: $color-gray-65;
|
||||
border: solid 1px $color-gray-65;
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
cursor: text;
|
||||
height: 16px;
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
width: 16px;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg('../images/icons/v2/search-16.svg', $color-gray-45);
|
||||
}
|
||||
}
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus-within {
|
||||
border: solid 1px $ultramarine-ui-light;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--input {
|
||||
background: inherit;
|
||||
border: none;
|
||||
padding-left: 16px;
|
||||
width: 100%;
|
||||
|
||||
&:placeholder {
|
||||
color: $color-gray-45;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__list-wrapper {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue