mue/src/components/widgets/search/search.scss

75 lines
1.1 KiB
SCSS

@import 'scss/variables';
.searchBar {
display: flex;
border-radius: 12px;
justify-content: flex-start;
flex-direction: row;
input[type='text'] {
@extend %basic;
outline: none;
border: none;
font-size: 20px;
padding: 10px 0 10px 20px;
&::placeholder {
@include themed() {
color: t($color);
}
}
}
}
.searchIcons {
display: flex;
gap: 10px;
margin-top: 1px;
margin-right: 10px;
.tooltip {
max-height: 44px;
}
}
.searchComponents {
position: absolute;
top: 1rem;
left: 1rem;
display: flex;
flex-flow: column;
button {
@include basicIconButton(12px, 20px, ui);
}
}
.searchDropdown {
@extend %basic;
margin-top: 5px;
display: flex;
flex-flow: column;
align-content: flex-start;
text-align: left;
font-size: 0.6em;
width: 200px;
transition: 0.5s;
span {
padding: 0.5rem;
cursor: pointer;
border-radius: 12px;
&:hover {
@include themed() {
background: t($btn-backgroundHover);
}
}
}
}
.searchMain {
display: flex;
flex-flow: row;
}