EM-1288: Search Page Styles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "employer-style-base",
-  "version": "2.2.14",
+  "version": "2.2.15",
   "author": "[email protected]",
   "license": "Apache-2.0",
   "description": "A stack-agnostic Sass library providing basic components and typography intended for the Employer experience",

sass/_base.scss

@@ -21,6 +21,7 @@
 @import "directives/02_base_components/gradients";
 @import "directives/02_base_components/groups";
 @import "directives/02_base_components/headings";
+@import "directives/02_base_components/pagination";
 @import "directives/02_base_components/modals";
 @import "directives/02_base_components/tabs";
 @import "directives/02_base_components/toggles";

sass/directives/00_variables/_breakpoints.scss

@@ -7,5 +7,5 @@ $medium-screen-max: 64em; // (1024px)
 $large-screen-min: $medium-screen-max;
 
 // Nav breakpoints
-$midrange-nav-max: 56em; // (~880px) Point at which full nav no longer fits in one line
+$midrange-nav-max: 66.5em; // (~1060px) Point at which full nav + search no longer fits in one line
 $mobile-nav-max: 31em; // (490px) Point at which full nav + collapsed right-side nav no longer fit in one line

sass/directives/00_variables/_sizing.scss

@@ -56,6 +56,8 @@ $accordion-angle-size: 35px;
 $resource-arrows: 1rem;
 $resource-continue-block-size: 40px;
 $resource-continue-block-icon: 18.72px;
+$search__thumbnail-width: 9.375rem; // 150px
+$search__thumbnail-height: 5.3125rem; // 85px
 $sitemap-angle-icon: 17px;
 $social-media-icons: 19.2px;
 $toggle-switch-width: 65px;

sass/directives/02_base_components/_button.scss

@@ -196,7 +196,13 @@ $massive-button-horizontal-padding: $base-input-font-size * 2;
 @mixin text-button {
   background-color: $text-button-color;
   color: $text-button-text-color;
-  border-color: $text-button-border-color;
+  border: 0;
+  border-radius: 0;
+  border-bottom: $base-button-border-size--text solid $text-button-border-color;
+  padding-left: 0;
+  padding-right: 0;
+  margin-left: $base-button-horizontal-padding;
+  margin-right: $base-button-horizontal-padding;
   text-transform: uppercase;
   white-space: pre-line;
 
@@ -207,12 +213,8 @@ $massive-button-horizontal-padding: $base-input-font-size * 2;
   &:hover, &:active, &:focus {
     background-color: $text-hover-button-color;
     color: $text-hover-button-text-color;
-    border-color: transparent;
-    border-bottom: $base-button-border-size--text solid $text-hover-button-border-color;
-    padding-left: 0;
-    padding-right: 0;
-    margin-left: $base-button-horizontal-padding;
-    margin-right: $base-button-horizontal-padding;
+    border-color: $text-hover-button-border-color;
+    outline: none;
   }
 
   &:disabled, &[disabled]:hover, &[disabled]:active, &.disabled, &.disabled:hover, &.disabled:active {

sass/directives/02_base_components/_forms.scss

@@ -165,7 +165,7 @@ $select-arrow-width: 3em;
 
 // Autocomplete Dropdown
 
-@mixin autocomplete-dropdown {
+@mixin autocomplete-dropdown($list-z-index: 1) {
   position: relative;
 
   input[type="search"] {
@@ -181,7 +181,7 @@ $select-arrow-width: 3em;
     position: absolute;
     width: 100%;
     background-color: white;
-    z-index: 1;
+    z-index: $list-z-index;
   }
 
   li {

sass/directives/02_base_components/_pagination.scss

@@ -0,0 +1,36 @@
+@mixin pagination {
+  &__arrow {
+    position: relative;
+    @include text-button;
+    @include font-style--small-bold;
+    text-transform: none;
+
+    &:after {
+      font-family: FontAwesome;
+      position: absolute;
+    }
+  }
+
+  &__arrow--prev {
+    &:after {
+      content: '\f137'; // chevron circle left
+      right: calc(100% + #{$base-spacing-smallest});
+    }
+  }
+
+  &__arrow--next {
+    &:after {
+      content: '\f138'; // chevron circle right
+      left: calc(100% + #{$base-spacing-smallest});
+    }
+  }
+
+  &__arrow + &__arrow:before {
+    content: '';
+    position: absolute;
+    top: $base-button-vertical-padding;
+    bottom: $base-button-vertical-padding;
+    left: -$base-button-horizontal-padding;
+    border-left: $base-border;
+  }
+}

sass/directives/02_base_components/_type_styles.scss

@@ -26,7 +26,7 @@
   text-transform: uppercase;
 }
 
-@mixin font-style--small-bold { // Style 6: nav dropdowns
+@mixin font-style--small-bold { // Style 6: nav dropdowns, pagination
   font-size: $font-size-small;
   font-weight: $font-weight-bold;
 }
@@ -60,6 +60,7 @@
   color: $base-link-color;
   text-decoration: none;
   font-weight: $font-weight-bold;
+  cursor: pointer;
 
   &:hover,
   &:focus,

sass/directives/03_components/_media.scss

@@ -53,3 +53,73 @@
     }
   }
 }
+
+
+// Search Results
+@mixin site-search__results__list {
+
+  .site-search__results__list-item { // li
+    list-style-type: none;
+    border-bottom: $base-border;
+    padding: $base-spacing-small 0;
+  }
+
+  .site-search__results__item-link { // li a
+    @include display(flex);
+
+    &:hover,
+    &:active,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  .site-search__results__item-thumb { // div
+    @include flex-grow(0);
+    @include flex-shrink(0);
+    @include flex-basis(auto);
+    margin-right: $base-spacing-medium;
+    width: $search__thumbnail-width;
+    height: $search__thumbnail-height;
+    text-align: center;
+  }
+
+  .site-search__results__item-image { // div img
+    height: auto;
+    width: auto;
+    max-width: $search__thumbnail-width;
+    max-height: $search__thumbnail-height;
+
+    @supports (object-fit: cover) {
+      height: 100%;
+      width: 100%;
+      max-width: none;
+      object-fit: cover;
+    }
+  }
+
+  .site-search__results__item-text { // div
+    @include flex-grow(1);
+    @include flex-shrink(1);
+    @include flex-basis(auto);
+  }
+
+  .site-search__results__item-header { // div h#
+    font-size: $font-size-med;
+    font-weight: $font-weight-bold;
+    color: $base-link-color;
+    text-transform: none;
+    margin-bottom: 0;
+
+    &:hover,
+    &:active,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+
+  .site-search__results__item-description { // div p
+    @include base-body-copy;
+    color: $text-color-grey;
+  }
+}