asset/scss/components/_forms.scss

@@ -1,67 +1,66 @@
-.hero{
+.search{
-  .search{
+  .input-group * {
-    .input-group * {
+    margin: 0;
-      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;
     }
-    .input-group {
+    &:focus,&:focus-within{
+      border-color: $primary-color;
+      background-color: $input-background;
+    }
+    &:not(:placeholder-shown) {
+      border:none;
+      background-color: $input-background-focus;
       position: relative;
-      border-radius: 4rem;
+      right: 2rem;
-      overflow: hidden;
+      + .appear {
-      padding: 0;
+        display: block;
-      margin: 0;
+        color: $primary-color;
-    }
-    .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;
-      &:focus,&:focus-within{
+        &:hover {
-        border-color: $primary-color;
+          color: $white;
-        background-color: $input-background;
+          background-color: $primary-color;
-      }
-      &: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%);
+    }
+  }
 }

asset/scss/global/_omeka.scss

@@ -323,7 +323,7 @@ body.vertical-menu header .desktop {
 
 .browse-control-mobile {
    display: none;
-
+  
    @include breakpoint(small down) {
      display: inline-block;
   //   float: right;
@@ -376,16 +376,16 @@ body.vertical-menu header .desktop {
    @include breakpoint(small down) {
   //   margin: 0;
      display: none;
-
+  
      &.open {
        display: flex;
        align-items: stretch;
      }
-
+  
      &.closed {
        display: none;
      }
-
+  
   //   .sorting,
   //   .omeka-pagination,
   //   .advanced-search {
@@ -554,18 +554,8 @@ body.vertical-menu header .desktop {
    margin-bottom: 0;
 }
 
-.sorting {
+.sorting button {
-  display: flex;
+  // margin-bottom: 0;
-  button,.button {
-    padding: 0 $global-padding*1.4;
-    font-size: $global-font-size * 0.85;
-    margin: 0 $global-margin;
-  }
-  select {
-    // width: 100%;
-    // height: 100%;
-    margin-bottom: 0;
-  }
 }
 
 .layout-toggle button {