125 lines
2.4 KiB
SCSS
125 lines
2.4 KiB
SCSS
@use '../../styles/variables' as *;
|
|
@use '../../styles/mixins' as *;
|
|
|
|
.ui-search {
|
|
$self: &;
|
|
|
|
&__wrapper {
|
|
--border-color: var(--search-border-color);
|
|
--border-width: 1px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
outline: var(--border-width) solid var(--border-color);
|
|
outline-offset: calc(var(--border-width) * -1);
|
|
color: var(--search-color);
|
|
border-radius: 12px;
|
|
flex: 1;
|
|
|
|
#{$self}--large & {
|
|
height: 48px;
|
|
}
|
|
|
|
#{$self}--small & {
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
#{$self}:not(.is-disabled) & {
|
|
cursor: text;
|
|
}
|
|
|
|
#{$self}:not(.is-disabled) &:hover,
|
|
#{$self}.is-focused & {
|
|
--border-width: 2px;
|
|
}
|
|
|
|
#{$self}.is-disabled & {
|
|
--border-color: var(--search-disabled-border-color);
|
|
background: var(--search-disabled-background);
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
color: var(--search-icon-color);
|
|
margin-right: 8px;
|
|
pointer-events: none;
|
|
transition: color .2s ease-out;
|
|
|
|
#{$self}--small & {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
#{$self}.is-focused & {
|
|
color: var(--search-active-icon-color);
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
@include txt-i-m;
|
|
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
padding: 0;
|
|
color: var(--search-value-color);
|
|
caret-color: var(--search-caret-color);
|
|
appearance: none;
|
|
|
|
&::-webkit-search-decoration,
|
|
&::-webkit-search-cancel-button,
|
|
&::-webkit-search-results-button,
|
|
&::-webkit-search-results-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
&::-ms-reveal,
|
|
&::-ms-clear {
|
|
display: none;
|
|
}
|
|
|
|
&:-webkit-autofill {
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: var(--search-color);
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--search-placeholder-color);
|
|
}
|
|
|
|
#{$self}--small & {
|
|
@include txt-r-m;
|
|
}
|
|
|
|
#{$self}.is-disabled & {
|
|
color: $clr-grey-400;
|
|
}
|
|
}
|
|
|
|
&__clear {
|
|
margin-left: 8px;
|
|
|
|
#{$self}--small & {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
|
|
/* prettier-ignore */
|
|
@include element-variant(
|
|
'search',
|
|
'',
|
|
(
|
|
'border-color': $clr-grey-300,
|
|
'color': $clr-black,
|
|
'placeholder-color': $clr-grey-400,
|
|
'icon-color': $clr-grey-400,
|
|
'active-icon-color': $clr-grey-500,
|
|
'disabled-background': $clr-grey-100,
|
|
'disabled-border-color': $clr-grey-300
|
|
)
|
|
);
|
|
} |