forked from M3-Academy/desafio-react-e-typescript
feat(form): Torna os avisos de campo obrigatório responsivos para telas maiores de 2500px
This commit is contained in:
parent
e978734dd3
commit
0d7f1da5c8
@ -4,6 +4,10 @@
|
||||
width: 100%;
|
||||
height: 650px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
height: 900px;
|
||||
}
|
||||
|
||||
.main-form {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
@ -23,6 +27,11 @@
|
||||
|
||||
margin-left: 15px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@ -31,6 +40,23 @@
|
||||
border-radius: 25px;
|
||||
|
||||
margin-bottom: 12px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: variables.$color-grey6;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-feedback {
|
||||
@ -41,6 +67,13 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: variables.$color-red;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
|
||||
bottom: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,9 +82,19 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 12px;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-left: 4.28px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 35.15px;
|
||||
height: 35.15px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-form-dot,
|
||||
@ -59,6 +102,11 @@
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-form-dot {
|
||||
@ -72,13 +120,18 @@
|
||||
|
||||
.form-feedback {
|
||||
position: absolute;
|
||||
// right: 100px;
|
||||
// bottom: 0px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: variables.$color-red;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
display: flex;
|
||||
}
|
||||
@ -86,6 +139,7 @@
|
||||
}
|
||||
|
||||
.main-form-button {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
@ -99,6 +153,11 @@
|
||||
background: variables.$color-black;
|
||||
border-radius: 25px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
@ -79,6 +79,9 @@
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
min-width: 668px;
|
||||
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
@ -106,6 +109,13 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: variables.$color-red;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
|
||||
right: -95px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -18,6 +18,7 @@ $color-grey2: #e5e5e5;
|
||||
$color-grey3: #7d7d7d;
|
||||
$color-grey4: #f2f2f2;
|
||||
$color-grey5: #c6c6c6;
|
||||
$color-grey6: #b9b7b7;
|
||||
|
||||
$color-red: #ff0000;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user