Merge pull request 'fix/search-issue-45' (#46) from fix/search-issue-45 into develop

Reviewed-on: #46

asset/scss/components/_forms.scss

@@ -1,9 +1,73 @@
-// .hero{
+// search elements
+.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);
@@ -20,67 +84,6 @@
         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
+}