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.
209 lines
3.8 KiB
209 lines
3.8 KiB
.home-search-box { |
|
width: 100%; |
|
font-family: numeralLight; |
|
margin: 0px auto; |
|
* { |
|
transition: all 0.5s; |
|
} |
|
form { |
|
button { |
|
background-color: #39383d; |
|
margin-right: 3px; |
|
border-top-left-radius: 9px; |
|
border-bottom-left-radius: 9px; |
|
border: 0px; |
|
} |
|
input { |
|
width: 100%; |
|
background-color: #46454a; |
|
border: 0px; |
|
border-top-right-radius: 9px; |
|
border-bottom-right-radius: 9px; |
|
color: #ddd; |
|
&::placeholder { |
|
padding-right: 0px; |
|
color: #ddd; |
|
opacity: 0.4; |
|
} |
|
&:focus { |
|
outline: 2px solid #9cdf52 !important; |
|
} |
|
} |
|
} |
|
footer{ |
|
ul{ |
|
li{ |
|
cursor: pointer; |
|
} |
|
} |
|
strong{ |
|
color: #9cdf52; |
|
font-weight: 300; |
|
margin-left: 20px; |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1441px) { |
|
.home-search-box { |
|
width: 100%; |
|
max-width: 1350px; |
|
padding: 40px 0px 10px; |
|
&__voice { |
|
display: none; |
|
} |
|
|
|
form { |
|
width: 900px; |
|
input { |
|
font-size: 16px; |
|
padding-right: 20px; |
|
&::placeholder { |
|
font-size: 16px; |
|
} |
|
} |
|
button { |
|
width: 70px; |
|
height: 60px; |
|
img{ |
|
width: 35px; |
|
} |
|
} |
|
} |
|
footer { |
|
width: 900px; |
|
padding: 10px 0px !important; |
|
strong{ |
|
font-size: 14px; |
|
} |
|
ul{ |
|
li { |
|
color: #a2b4cb; |
|
margin-left: 25px; |
|
font-size: 14px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
|
.home-search-box { |
|
max-width: 1250px; |
|
padding: 40px 0px 10px; |
|
&__voice { |
|
display: none; |
|
} |
|
form { |
|
width: 850px; |
|
input { |
|
font-size: calc(100vw / 85); |
|
padding-right: 20px; |
|
&::placeholder { |
|
font-size: calc(100vw / 95); |
|
} |
|
} |
|
button { |
|
width: 65px; |
|
height: 55px; |
|
& img{ |
|
width: 30px; |
|
} |
|
} |
|
} |
|
ul { |
|
width: 850px; |
|
padding: 10px 0px !important; |
|
li { |
|
color: #a2b4cb; |
|
margin-left: 25px; |
|
font-size: calc(100vw / 110); |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
|
.home-search-box { |
|
max-width: 900px; |
|
padding: 50px 0px 10px; |
|
&__voice { |
|
display: none; |
|
} |
|
&__searchIcon{ |
|
display: none; |
|
} |
|
form { |
|
width: 85%; |
|
input { |
|
font-size: calc(100vw / 40); |
|
padding-right: 20px; |
|
&::placeholder { |
|
font-size: calc(100vw / 45); |
|
} |
|
} |
|
button { |
|
width: 80px; |
|
height: 60px; |
|
} |
|
} |
|
ul { |
|
width: 85%; |
|
padding: 10px 0px !important; |
|
li { |
|
color: #a2b4cb; |
|
margin-left: 25px; |
|
font-size: calc(100vw / 75); |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (max-width: 640px) { |
|
.home-search-box { |
|
max-width: 500px; |
|
padding: 10px 0px 0px; |
|
flex: 1; |
|
&__voice { |
|
display: flex !important; |
|
justify-content: center; |
|
align-items: center; |
|
width: 55px; |
|
background : inherit !important; |
|
& img{ |
|
width: 28px; |
|
} |
|
} |
|
&__searchIcon { |
|
position: absolute; |
|
left: 62px; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
width: 20px; |
|
} |
|
form { |
|
width: 100%; |
|
margin: 0px 10px !important; |
|
position: relative; |
|
border-radius: 8px; |
|
input { |
|
width: 100%; |
|
padding: 5px 10px; |
|
font-size: calc(100vw / 30); |
|
padding-right: 20px; |
|
border-radius: 8px; |
|
background: #383838; |
|
&::placeholder { |
|
font-size: calc(100vw / 34); |
|
color: white !important; |
|
} |
|
} |
|
button { |
|
display: none; |
|
} |
|
} |
|
ul { |
|
display: none !important; |
|
} |
|
} |
|
}
|
|
|