Merge pull request #31 from palantirnet/update-css-files-for-new-classes

Rewire CSS to use new classes and clean up.
palantirnet · Mar 14, 2019 · c96911f · c96911f
2 parents 40f9873 + 68601a5
commit c96911f
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 208 deletions.
diff --git a/src/components/results/_pagination.scss b/src/components/results/_pagination.scss
@@ -5,16 +5,13 @@
  * @copyright Copyright (c) 2017 Palantir.net
  */
 .search-pager {
-  background-color: transparent;
 }
 
 .search-pager__items {
   @extend %list--simple;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-radius: 3px;
-  background-color: $gray-pale;
   padding: 0 rhythm(2);
   margin: rhythm(3) 0;
 
@@ -39,80 +36,45 @@
     margin-right: rhythm(.25);
   }
 
-  // Link styles
-  a {
-    @include trans();
-    @include adjust-font-size-to(.9em, 1);
-    font-weight: 700;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 0;
-    text-align: center;
-    padding: rhythm(.25);
-
-    @include breakpoint($bp0) {
-      background-color: $c-secondary;
-      color: $white;
-      border-radius: 3px;
-      width: rhythm(1.5);
-      height: rhythm(1.5);
-      padding: 0;
-    }
-
-    @include breakpoint($bp2) {
-      @include adjust-font-size-to($label, .9);
-      width: rhythm(1.2);
-      height: rhythm(1.2);
-    }
-
-    &:hover,
-    &:active {
-      text-decoration: underline;
-      color: $white;
-      background-color: $c-secondary;
-
-      @include breakpoint($bp0) {
-        @include adjust-font-size-to($text, 1);
-        background-color: $c-secondary-dark;
-      }
-
-      svg {
-        fill: $c-primary-dark;
-      }
-    }
+  &.is-active .search-pager__item-link {
+    font-weight: bold;
+  }
 
-    svg {
-      height: 1.3em;
-      fill: $white;
-      display: block;
+  &.not-active .search-pager__item-link {
+    display: none;
 
-      @include breakpoint($bp0) {
-        height: 1em;
-      }
+    @include breakpoint($bp0) {
+      display: inline-block;
     }
   }
+}
 
-  // Active page
-  &.is-active a {
-    @include adjust-font-size-to($text, 1);
-
-    @include breakpoint($bp0) {
-      background-color: $link-color;
-      color: $white;
+// Link styles
+.search-pager__item-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 0;
+  text-align: center;
+  padding: rhythm(.25);
 
-      &:hover,
-      &:active {
-        background-color: $c-primary-dark;
-      }
+  &:hover,
+  &:active {
+    text-decoration: underline;
+    svg {
+      fill: $c-primary-dark;
+      border-bottom: 1px solid $black;
     }
   }
 
-  &.not-active {
-    display: none;
+  svg {
+    height: 1.3em;
+    fill: $black;
+    display: block;
+    border-bottom: 1px solid transparent;
 
     @include breakpoint($bp0) {
-      display: inline-block;
+      height: 1em;
     }
   }
 }
diff --git a/src/components/results/_search-results-stat.scss b/src/components/results/_search-results-stat.scss
@@ -6,7 +6,6 @@
  */
 
 .search-results-stat {
-  @include adjust-font-size-to(.9em, 1);
   color: $gray-medium;
 
   &:focus {

diff --git a/src/components/results/_search-results.scss b/src/components/results/_search-results.scss
@@ -2,7 +2,7 @@
  * search-form.scss
  * Define search results styles.
  *
- * @copyright Copyright (c) 2017 Palantir.net
+ * @copyright Copyright (c) 2019 Palantir.net
  */
 
 .search-results {
@@ -12,12 +12,6 @@
     margin-bottom: rhythm(1);
     display: flex;
   }
-
-  em {
-    font-style: normal;
-    font-weight: 700;
-    background-color: transparentize($c-secondary, .7);
-  }
 }
 
 .search-results__container--left {
@@ -34,46 +28,35 @@
 }
 
 .search-results__label {
-  @include adjust-font-size-to($label, .7);
-  font-weight: 500;
   color: $gray-medium;
   display: block;
 }
 
 .search-results__heading {
-  font-weight: 700;
-  @include trailer(.25, $h3-font-size);
   margin-bottom: .33333em;
   margin-top: .25em;
   padding: 0;
-  line-height: calc(100% + 50%);
-
-  a {
-    /**
-   * 1. Remove the gray background on active links in IE 10.
-   * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
-   */
-    @include trans();
-    background-color: transparent; /* 1 */
-    /* stylelint-disable property-no-vendor-prefix */
-    -webkit-text-decoration-skip: objects; /* 2 */
-    /* stylelint-enable */
-    color: $link-color;
-    text-decoration: none;
-    border-bottom: 2px dashed $link-color;
+}
 
-    /**
-     * Remove the outline on focused links when they are also active or hovered
-     * in all browsers (opinionated).
-     */
+.search-results__heading-link {
+  /**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-text-decoration-skip: objects; /* 2 */
+  /* stylelint-enable */
+  color: $blue;
+  text-decoration: none;
 
-    &:active,
-    &:hover {
-      outline-width: 0;
-      color: $link-hover;
-      background-color: $gray-light;
-      border-bottom: 2px solid $link-hover;
-    }
+  /**
+   * Remove the outline on focused links when they are also active or hovered
+   * in all browsers (opinionated).
+   */
+  &:active,
+  &:hover {
+    outline-width: 0;
+    text-decoration: underline;
   }
 }
 
@@ -82,12 +65,17 @@
 }
 
 .search-results__meta {
-  @include adjust-font-size-to($label, .8);
   margin-bottom: rhythm(.5);
   color: $gray-medium;
   display: block;
 }
 
-.search-results__citation {
+.search-results__citation a {
   font-style: normal;
+  color: $gray-medium;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }