From 0250b8f118a73eb8ea5c97b1f4818400d4b01f59 Mon Sep 17 00:00:00 2001
From: jorge-hangar <jorge@hangar.org>
Date: Thu, 15 Jul 2021 20:58:23 +0200
Subject: [PATCH] make search form act only at hero and mod colors

---
 asset/scss/components/_forms.scss | 117 +++++++++++++++---------------
 1 file changed, 59 insertions(+), 58 deletions(-)

diff --git a/asset/scss/components/_forms.scss b/asset/scss/components/_forms.scss
index a510910..6db0b1b 100644
--- a/asset/scss/components/_forms.scss
+++ b/asset/scss/components/_forms.scss
@@ -1,66 +1,67 @@
-.search{
-  .input-group * {
-    margin: 0;
-  }
-  .input-group {
-    position: relative;
-    border-radius: 4rem;
-    overflow: hidden;
-    padding: 0;
-    margin: 0;
-  }
-  .input-group .appear {
-    right: 0;
-    position: absolute;
-    height: 100%;
-    padding: 0.3rem 1rem;
-  }
-  .button{
-    border-color: $primary-color;
-  }
-  .appear{
-    display:none;
-  }
-  input{
-    &:active{
-      border-color: $primary-color;
-      background-color: $input-background-focus;
+.hero{
+  .search{
+    .input-group * {
+      margin: 0;
     }
-    &:focus,&:focus-within{
-      border-color: $primary-color;
-      background-color: $input-background;
-    }
-    &:not(:placeholder-shown) {
-      border:none;
-      background-color: $input-background-focus;
+    .input-group {
       position: relative;
-      right: 2rem;
-      + .appear {
-        display: block;
-        color: $primary-color;
+      border-radius: 4rem;
+      overflow: hidden;
+      padding: 0;
+      margin: 0;
+    }
+    .input-group .appear {
+      right: 0;
+      position: absolute;
+      height: 100%;
+      padding: 0.3rem 1rem;
+    }
+    .button{
+      border-color: $primary-color;
+    }
+    .appear{
+      display:none;
+    }
+    input{
+      &:active{
+        border-color: $primary-color;
         background-color: $input-background-focus;
-        z-index: 2;
-        &:hover {
-          color: $white;
-          background-color: $primary-color;
-        }
+      }
+      &:focus,&:focus-within{
+        border-color: $primary-color;
+        background-color: $input-background;
+      }
+      &:not(:placeholder-shown) {
+        border:none;
+        background-color: $input-background-focus;
+        position: relative;
+        right: 2rem;
+        + .appear {
+          display: block;
+          background-color: scale-color($input-background-focus, $lightness: -20%);
+          z-index: 2;
+          &:hover {
+            color: $white;
+            background-color: $primary-color;
+          }
 
+        }
+      }
+    }
+    .hollow {
+      border-color: $primary-color;
+      color: $primary-color;
+      &::after {
+      }
+      &::placeholder {
+        color: scale-color($primary-color, $lightness: -20%);
+      }
+      &:hover {
+        background-color: scale-color($primary-color, $lightness: 95%);
+      }
+      &:active {
+        background-color: scale-color($primary-color, $lightness: 85%);
       }
     }
   }
-  .hollow {
-    border-color: $primary-color;
-    color: $primary-color;
-    &::after {
-    }
-    &::placeholder {
-      color: scale-color($primary-color, $lightness: -20%);
-    }
-    &:hover {
-      background-color: scale-color($primary-color, $lightness: 95%);
-    }
-    &:active {
-      background-color: scale-color($primary-color, $lightness: 85%);
-    }
-  }
 }