asset/scss/components/_forms.scss

@@ -1,73 +1,9 @@
-// search elements
+// .hero{
-.search{
-  .input-group {
-    position: relative;
-    border-radius: 4rem;
-    overflow: hidden;
-    padding: 0;
-    margin: 0;
-    .appear {
-      right: 0;
-      position: absolute;
-      height: 100%;
-      padding: 0.3rem 1rem;
-    }
-  }
-  .input-group * {
-    margin: 0;
-  }
-  .button{
-    border-color: $primary-color;
-  }
-  .appear{
-    display:none;
-  }
-  input{
-    &:active{
-      border-color: $primary-color;
-      background-color: $input-background-focus;
-    }
-    &:focus,&:focus-within{
-      border-color: $primary-color;
-      background-color: $input-background;
-    }
-    &:not(:placeholder-shown) {
-      border:none;
-      background-color: $input-background-focus;
-      position: relative;
-      padding-right: $global-padding * 9;
-      + .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%);
-    }
-  }
-}
-//search block size in content
-article,.omekas-entry-content {
   .search{
     @include xy-grid();
+    // display: flex;
+    // flex-direction: column;
+    // align-items: center;
     .input-group {
       @include breakpoint(small){
         @include xy-cell (12);
@@ -84,6 +20,67 @@ article,.omekas-entry-content {
         margin-left: auto;
         margin-right: auto;
       }
+      position: relative;
+      border-radius: 4rem;
+      overflow: hidden;
+      padding: 0;
+      margin: 0;
+      .appear {
+        right: 0;
+        position: absolute;
+        height: 100%;
+        padding: 0.3rem 1rem;
+      }
+    }
+    .input-group * {
+      margin: 0;
+    }
+    .button{
+      border-color: $primary-color;
+    }
+    .appear{
+      display:none;
+    }
+    input{
+      &:active{
+        border-color: $primary-color;
+        background-color: $input-background-focus;
+      }
+      &:focus,&:focus-within{
+        border-color: $primary-color;
+        background-color: $input-background;
+      }
+      &:not(:placeholder-shown) {
+        border:none;
+        background-color: $input-background-focus;
+        position: relative;
+        padding-right: $global-padding * 9;
+        + .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%);
+      }
     }
   }
-}
+// } //end .hero