Style new LFEvents country fields (#920)

* Temporarily switch out forms so we can style them; revert this commit before deploy Signed-off-by: Chris Abraham <[email protected]> * Add styling for country select box Signed-off-by: Chris Abraham <[email protected]> * Revert "Temporarily switch out forms so we can style them; revert this commit before deploy" This reverts commit 6cf2c17. --------- Signed-off-by: Chris Abraham <[email protected]>
linuxfoundation · Jun 25, 2024 · e167b49 · e167b49
1 parent 4383750
commit e167b49
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/web/wp-content/themes/lfevents/src/assets/scss/components/_forms.scss b/web/wp-content/themes/lfevents/src/assets/scss/components/_forms.scss
@@ -15,7 +15,7 @@ div.hs_recaptcha,
   margin-right: auto;
   margin-bottom: 1rem;
 
-  input {
+  input, select {
     margin-top: 0.4rem;
     margin-bottom: 0;
   }
@@ -28,7 +28,7 @@ div.hs_recaptcha,
       margin-right: 10px;
     }
 
-    input {
+    input, select {
       margin-top: 0;
     }
   }
@@ -110,7 +110,8 @@ div.hs_recaptcha,
   overflow: hidden;
 }
 
-.searchandfilter .sf-input-text, .hbspt-form .hs-form .hs-input {
+.searchandfilter .sf-input-text, 
+.hbspt-form .hs-form .hs-input {
   &:focus,
   &:focus-within {
     &::placeholder {

diff --git a/web/wp-content/themes/lfevents/src/assets/scss/modules/_non-event-footer.scss b/web/wp-content/themes/lfevents/src/assets/scss/modules/_non-event-footer.scss
@@ -29,18 +29,19 @@
       }
 
       @media (min-width: 900px) {
-        grid-template-columns: 2.5fr 2.5fr 3fr 1.75fr;
+        grid-template-columns: 2.5fr 2.5fr 2.5fr 3fr 1.75fr;
       }
 
       @media (max-width: 900px) {
-        input {
+        input, select {
           margin-top: 0.75rem;
         }
       }
 
       // underline input style.
       input[type='text'],
-      input[type='email'] {
+      input[type='email'],
+      select.hs-input {
         height: 40px;
         padding: 0.5em 0 calc(0.5em + 1px) 0;
         width: 100%;
@@ -49,6 +50,7 @@
         color: $white;
         border-bottom: 1px solid $lf-blue;
         transition: all 0.25s ease;
+        margin-bottom: 0;
 
         &::placeholder {
           color: $pure-white;
@@ -69,7 +71,7 @@
       }
 
       // Control autocomplete styles.
-      input {
+      input, select {
         &:focus {
           box-shadow: none;
         }