Merge pull request 'feat(form): Torna os avisos de campo obrigatório responsivos para telas maiores de 2500px' (#22) from feature/all-form-responsive-big-screen into develop

Reviewed-on: #22

src/components/main/components/main-form.module.scss

@@ -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;
       }

src/components/newsletter.module.scss

@@ -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;
+          }
         }
       }
 

src/variables.module.scss

@@ -18,6 +18,7 @@ $color-grey2: #e5e5e5;
 $color-grey3: #7d7d7d;
 $color-grey4: #f2f2f2;
 $color-grey5: #c6c6c6;
+$color-grey6: #b9b7b7;
 
 $color-red: #ff0000;