Merge pull request #1867 from rohitsrma/refactor-subscribe-css-to-scss

Refactor subscribe.css to SCSS

Author: leecalcote

css/subscribe.css renamed to css/subscribe.scss

@@ -1,3 +1,6 @@
+---
+---
+
 .subscribe-a {
   text-align: center;
 }
@@ -6,36 +9,39 @@
   width: 100%;
   padding: 0.8rem 0.5rem;
   background: rgba(100, 120, 129, 1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 3.5rem;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  letter-spacing: 0.5px;
 }
 
-.NAME {
+.NAME, .EMAIL {
   width: 100%;
   height: 3rem;
   border: 1px solid #000000;
   box-sizing: border-box;
   border-radius: 5px;
   padding: 15px;
+
+  &::placeholder {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 1rem;
+    letter-spacing: 0.5px;
+    color: #999999;
+  }
+}
+
+.NAME {
   flex: 0 0 calc(50% - 1rem);
 }
 
 .EMAIL {
-  width: 100%;
-  height: 3rem;
   margin-top: 2rem;
-  border: 1px solid #000000;
-  box-sizing: border-box;
-  border-radius: 5px;
-  padding: 15px;
-}
-
-.NAME::placeholder,
-.NAME::placeholder,
-.EMAIL::placeholder {
-  font-style: normal;
-  font-weight: normal;
-  font-size: 1rem;
-  letter-spacing: 0.5px;
-  color: #999999;
 }
 
 .subscribe-inputbox {
@@ -47,130 +53,98 @@
   align-items: center;
 }
 
-.subscribe-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 3.5rem;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 1.125rem;
-  letter-spacing: 0.5px;
-}
-
 #mc_embed_signup {
   clear: left;
   font: 14px Helvetica, Arial, sans-serif;
   text-align: center;
   margin-top: 25px;
   width: 80%;
-}
-
-/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
-    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
-#mc_embed_signup .button {
-  width: 100%;
-  margin: 0px;
-  background-color: rgba(255, 152, 0, 0.5);
-  text-align: center;
-}
-
-#mc_embed_signup .button:hover {
-  background-color: rgba(255, 152, 0, 0.7);
-}
 
-#mc_embed_signup .button {
-  margin: 0px;
-  background-color: rgba(255, 152, 0, 0.5);
-  text-align: center;
-}
+  .button {
+    width: 100%;
+    margin: 0px;
+    background-color: rgba(255, 152, 0, 0.5);
+    text-align: center;
 
-#mc_embed_signup .button:hover {
-  background-color: rgba(255, 152, 0, 0.7);
+    &:hover {
+      background-color: rgba(255, 152, 0, 0.7);
+    }
+  }
 }
 
 .form-container {
-  /* border: 1px dashed #1e2117; */
   display: flex;
   flex-direction: column;
   align-items: center;
-  /* padding: 5rem  5rem!important; */
   background-color: #3c494f;
-}
 
-.form-container > p {
-  font-style: normal;
-  font-weight: 600;
-  font-size: 2.7rem;
-  line-height: 2.25rem;
-  color: #fff;
-}
+  > p {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 2.7rem;
+    line-height: 2.25rem;
+    color: #fff;
+  }
 
-@media (max-width: 840px) {
-  .form-container {
+  @media (max-width: 840px) {
     padding: 4rem 3vw !important;
-  }
-  .form-container > p {
-    font-size: 2.6rem;
-    line-height: 3rem;
-    margin: 20px 0 10px 0;
-  }
-}
-@media (min-width: 768px) {
-  .form-container > p {
-    margin: 0 25px;
-  }
 
-  .NAME {
-    height: 3rem;
-    border: 1px solid #000000;
-    box-sizing: border-box;
-    border-radius: 5px;
-    padding: 15px;
+    > p {
+      font-size: 2.6rem;
+      line-height: 3rem;
+      margin: 20px 0 10px 0;
+    }
   }
 
-  .EMAIL {
-    width: 100%;
-    height: 3rem;
-    margin-top: 2rem;
-    border: 1px solid #000000;
-    box-sizing: border-box;
-    border-radius: 5px;
-    padding: 15px;
-  }
-}
+  @media (min-width: 768px) {
+    > p {
+      margin: 0 25px;
+    }
 
-@media (max-width: 768px) {
-  .EMAIL {
-    width: 100%;
-  }
-  .email-div {
-    display: flex;
-    justify-content: center;
-  }
-  .subscribe-inputbox {
-    padding-left: 6px;
-    flex-direction: column;
-  }
-  #mc_embed_signup {
-    clear: left;
-    font: 14px Helvetica, Arial, sans-serif;
-    text-align: center;
-    margin-top: 10px;
+    .NAME {
+      height: 3rem;
+    }
+
+    .EMAIL {
+      width: 100%;
+      margin-top: 2rem;
+    }
   }
-  .form-container > p {
-    font-size: 2.6rem;
-    line-height: 2.5rem;
-    margin: 20px 0 10px 0;
+
+  @media (max-width: 768px) {
+    .EMAIL {
+      width: 100%;
+    }
+
+    .email-div {
+      display: flex;
+      justify-content: center;
+    }
+
+    .subscribe-inputbox {
+      padding-left: 6px;
+      flex-direction: column;
+    }
+
+    #mc_embed_signup {
+      clear: left;
+      font: 14px Helvetica, Arial, sans-serif;
+      text-align: center;
+      margin-top: 10px;
+    }
+
+    > p {
+      font-size: 2.6rem;
+      line-height: 2.5rem;
+      margin: 20px 0 10px 0;
+    }
   }
 }
 
 .box1 {
-  flex: wrap;
+  flex-wrap: wrap;
 }
 
-/* Mailing List */
-
 .heading {
   text-align: center;
   font-weight: bold;
@@ -190,19 +164,24 @@
   border-radius: 0.25rem;
   display: flex;
   flex-direction: column;
+
+  + .dark {
+    background-color: red;
+  }
 }
-.bg-grey-300 + .dark {
-  background-color: red;
-}
+
 .bg-single {
   background-color: #fff3c5;
+
+  .button {
+    background-color: #ebc017;
+
+    &:hover {
+      background-color: #e7cc5f;
+    }
+  }
 }
-.bg-single .button {
-  background-color: #ebc017;
-}
-.bg-single .button:hover {
-  background-color: #e7cc5f;
-}
+
 .button {
   background-color: var(--brand-color-primary) !important;
   border-radius: 0.25rem;
@@ -214,11 +193,11 @@
   text-decoration: none !important;
   margin-left: 6px;
   border: 0;
-}
 
-.button:hover {
-  background-color: #00d3a9;
-  color: #fff;
+  &:hover {
+    background-color: #00d3a9;
+    color: #fff;
+  }
 }
 
 .p-normal {
@@ -242,16 +221,11 @@ a.saffron {
 
 .mailing-container {
   display: flex;
-  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   --flex-gap: var(--size-4);
   margin-left: calc(-1 * var(--flex-gap));
   margin-top: calc(-1 * var(--flex-gap));
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
   justify-content: space-between;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -264,25 +238,30 @@ a.saffron {
   .bg-grey-300 {
     margin: 2%;
   }
+
   .bg-single {
     padding-right: 2%;
   }
+
   .mail-link-div {
     margin-top: 0px !important;
   }
 }
+
 @media (min-width: 802px) and (max-width: 1075px) {
   .bg-grey-300 {
-    /* padding-right: 100px; */
     margin: 3%;
   }
+
   .bg-single {
     background-color: yellow;
     padding-right: 0px;
+
+    .button {
+      margin: 2px 30px 0 6px;
+    }
   }
-  .bg-single .button {
-    margin: 2px 30px 0 6px;
-  }
+
   .mail-link-div {
     margin-top: 0px !important;
   }
@@ -293,17 +272,20 @@ a.saffron {
     width: 40%;
   }
 }
+
 @media (min-width: 600px) {
   .mailing-row {
     display: inline-flex;
     width: 100%;
     justify-content: center;
   }
+
   .mailing-row-single {
     display: inline-flex;
     width: 100%;
     justify-content: center;
   }
+
   .bg-grey-300 {
     width: 43%;
     margin: 2%;