117 lines
2.1 KiB
117 lines
2.1 KiB
.home-search-box{ |
|
width : 100%; |
|
font-family: numeralLight; |
|
margin: 0px auto; |
|
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; |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1441px){ |
|
.home-search-box{ |
|
width : 100%; |
|
max-width: 1250px; |
|
padding: 80px 0px 30px; |
|
form{ |
|
width : 850px; |
|
input{ |
|
font-size: 20px; |
|
padding-right: 20px; |
|
&::placeholder{ |
|
font-size: 20px; |
|
} |
|
} |
|
button{ |
|
width : 100px; |
|
height: 80px; |
|
|
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1008px) and (max-width: 1440px){ |
|
.home-search-box{ |
|
max-width: 1250px; |
|
padding: 80px 0px 10px; |
|
form{ |
|
width : 850px; |
|
input{ |
|
font-size: calc(100vw / 65); |
|
padding-right: 20px; |
|
&::placeholder{ |
|
font-size: calc(100vw / 75); |
|
} |
|
} |
|
button{ |
|
width : 100px; |
|
height: 80px; |
|
|
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 641px) and (max-width: 1007px){ |
|
.home-search-box{ |
|
max-width: 900px; |
|
padding: 50px 0px 10px; |
|
form{ |
|
width : 70%; |
|
input{ |
|
font-size: calc(100vw / 40); |
|
padding-right: 20px; |
|
&::placeholder{ |
|
font-size: calc(100vw / 45); |
|
} |
|
} |
|
button{ |
|
width : 80px; |
|
height: 60px; |
|
|
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (max-width: 640px){ |
|
.home-search-box{ |
|
max-width: 500px; |
|
padding: 50px 0px 30px; |
|
form{ |
|
width : 100%; |
|
padding: 0px 10px; |
|
input{ |
|
font-size: calc(100vw / 25); |
|
padding-right: 20px; |
|
&::placeholder{ |
|
font-size: calc(100vw / 25); |
|
} |
|
} |
|
button{ |
|
width : 60px; |
|
height: 50px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|