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.
112 lines
2.0 KiB
112 lines
2.0 KiB
.discount-code{ |
|
width: 100%; |
|
border: 1px solid #707070; |
|
border-radius: 10px; |
|
padding: 20px 30px; |
|
h3{ |
|
color: white; |
|
margin: 0px; |
|
} |
|
input{ |
|
background-color : rgba(255, 255, 255, 0.06); |
|
border-top-right-radius: 10px; |
|
border-bottom-right-radius: 10px; |
|
border: 0px; |
|
color: white; |
|
&::placeholder{ |
|
color: white; |
|
} |
|
} |
|
button{ |
|
background-color : #9CDF52; |
|
border-top-left-radius: 10px; |
|
color: white; |
|
border-bottom-left-radius: 10px; |
|
border: none; |
|
} |
|
} |
|
|
|
@media screen and (min-width : 1441px) { |
|
.discount-code{ |
|
h3{ |
|
font-size: 20px; |
|
} |
|
input{ |
|
padding: 20px 10px 20px 0px; |
|
width: 200px; |
|
font-size: 14px; |
|
&::placeholder{ |
|
font-size: 10px; |
|
} |
|
} |
|
button{ |
|
padding: 0px 20px; |
|
font-size: 14px; |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
|
.discount-code{ |
|
h3{ |
|
font-size: calc(100vw / 82); |
|
} |
|
input{ |
|
padding: 20px 10px 20px 0px; |
|
width: 240px; |
|
font-size: calc(100vw / 90); |
|
&::placeholder{ |
|
font-size: calc(100vw / 130); |
|
} |
|
} |
|
button{ |
|
padding: 0px 20px; |
|
font-size: calc(100vw / 90); |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
|
.discount-code{ |
|
padding: 10px; |
|
h3{ |
|
font-size: calc(100vw / 40); |
|
} |
|
input{ |
|
padding: 10px; |
|
width: 300px; |
|
font-size: calc(100vw / 45); |
|
&::placeholder{ |
|
font-size: calc(100vw / 50); |
|
} |
|
margin-right: 5px; |
|
} |
|
button{ |
|
width : 90px; |
|
font-size: calc(100vw / 40); |
|
} |
|
} |
|
} |
|
|
|
@media screen and (max-width: 640px) { |
|
.discount-code{ |
|
padding: 10px; |
|
h3{ |
|
font-size: calc(100vw / 34); |
|
max-width: 100px; |
|
} |
|
input{ |
|
padding: 10px; |
|
width: 180px; |
|
font-size: calc(100vw / 30); |
|
&::placeholder{ |
|
font-size: calc(100vw / 40); |
|
} |
|
margin-right: 5px; |
|
} |
|
button{ |
|
width : 60px; |
|
font-size: calc(100vw / 30); |
|
} |
|
} |
|
} |