You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

115 lines
1.8 KiB

$primary: #246e8a;
$gray: #dbdbdb;
$primary1: #EEFAFF;
.search {
display: flex;
flex-direction: column;
position: relative;
img{
cursor: pointer;
}
&__icon {
width: 27px;
position: absolute;
top: 50%;
transform: translateY(-50%);
&Fa {
left: 20px;
}
&En {
right: 20px;
}
}
&__x {
width: 15px;
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: 0;
&Fa {
right: 15px;
}
&En {
left: 10px;
}
&Active{
opacity: 1;
}
}
input {
padding: 15px 40px 15px 30px;
font-size: 14px;
border: 1.7px solid $gray;
border-radius: 5px;
background-color: inherit;
&::placeholder {
color: $gray;
}
&:focus {
border-color: $primary;
outline: 0px;
color: $primary;
&::placeholder {
color: $primary;
}
}
}
&__populars{
margin-top: 10px;
width: 100%;
border: 1.7px solid $gray;
border-radius: 5px;
background-color: white;
display: flex;
flex-direction: column;
list-style: none;
position: absolute;
top: 50px;
left: 0px;
opacity: 0;
display: none;
z-index: 100;
&Active{
opacity: 1;
display: flex;
}
strong{
width: 100%;
padding: 15px 40px;
font-size: 15px;
}
ul{
width : calc(100% - 80px);
list-style: none;
margin: 0px auto;
padding: 0px;
li{
padding: 15px 5px;
&:hover{
background-color: $primary1;
}
cursor: pointer;
font-size: 13px;
}
hr{
margin: 0px auto;
margin: 0px;
border: 0.5px solid #eee;
}
}
}
}
.en {
direction: ltr;
text-align: left;
}
.fa {
direction: rtl;
text-align: right;
}