_browse.scss in blacklight-spotlight-3.0.0.alpha.4

- old
+ new

@@ -1,9 +1,9 @@
 $image-overlay-max-height: 300px;
 
 .long-description-text {
-  margin: ($padding-base-vertical * 2) 0;
+  margin: ($spacer * 2) 0;
   width: 40em;
 }
 
 .very-long-description-text {
   width: auto;
@@ -12,21 +12,33 @@
     column-gap: 3em;
     column-width: 20em;
   }
 }
 
+.blacklight-browse {
+  .sort-pagination {
+    .page-links {
+      display: none;
+    }
+
+    .search-widgets {
+      margin-left: auto;
+    }
+  }
+}
+
 .browse-landing {
   text-align: center;
   // Placeholder for vertically alignment - might already be available from use in another feature
   %vertical-align {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
   }
 
   .category {
-    margin-bottom: $spacer * 2;
+    margin-bottom: $spacer;
   }
 
   .image-overlay {
     border: 2px solid $gray-600;
     border-radius: $border-radius-lg;
@@ -59,34 +71,31 @@
       @extend %vertical-align;
 
       small {
         display: block;
         color: $white;
-        margin-top: $padding-large-vertical;
+        margin-top: $spacer;
         text-transform: uppercase;
       }
     }
 
     &:hover {
       background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
     }
   }
 
   @media screen and (max-width: breakpoint-max("sm")) {
-    $image-overlay-max-height: 180px;
-    .category {
-      margin: 10px auto;
-    }
-
+    $image-overlay-max-height: 240px;
     .image-overlay {
+      margin: 10px auto;
       max-height: $image-overlay-max-height;
       max-width: 350px;
     }
     .text-overlay .browse-category-title {font-size: $h3-font-size;}
   }
   @media screen and (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("md")) {
-    $image-overlay-max-height: 180px;
+    $image-overlay-max-height: 240px;
     .image-overlay {max-height: $image-overlay-max-height;}
   }
   @media screen and (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) {
     $image-overlay-max-height: 250px;
     .text-overlay .browse-category-title {font-size: $h4-font-size;}
@@ -104,14 +113,10 @@
   .col-form-label {
     text-align: right;
   }
 
   .browse-search-form {
-    .browse-search-expand {
-      text-align: center;
-    }
-
     .btn-reset {
       background-color: transparent;
       display: none;
       left: -40px;
       z-index: 20;
@@ -119,7 +124,11 @@
 
     .search-btn {
       left: -40px;
       z-index: 30;
     }
+  }
+
+  .browse-search-expand {
+    text-align: center;
   }
 }