diff --git a/src/components/results/_pagination.scss b/src/components/results/_pagination.scss index a0d7f6e..3f03940 100644 --- a/src/components/results/_pagination.scss +++ b/src/components/results/_pagination.scss @@ -5,7 +5,6 @@ * @copyright Copyright (c) 2017 Palantir.net */ .search-pager { - background-color: transparent; } .search-pager__items { @@ -13,8 +12,6 @@ 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 index 4e6afde..d51a3e9 100644 --- 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 index 82bd7b2..e6c7862 100644 --- 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; + } } diff --git a/src/styles.css b/src/styles.css index dc72519..7e16f65 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1380,17 +1380,12 @@ aside { * search-form.scss * Define search results styles. * - * @copyright Copyright (c) 2017 Palantir.net + * @copyright Copyright (c) 2019 Palantir.net */ .search-results li { margin-bottom: 1.46667em; display: flex; } -.search-results em { - font-style: normal; - font-weight: 700; - background-color: rgba(0, 0, 255, 0.3); } - .search-results__container--left { flex: 1 0 0; margin-right: 3%; } @@ -1399,56 +1394,47 @@ aside { flex: 3 0 0; } .search-results__label { - font-size: 0.8em; - line-height: 1.28333em; - font-weight: 500; color: #555; display: block; } .search-results__heading { - font-weight: 700; - margin-bottom: 0.36667em; margin-bottom: .33333em; margin-top: .25em; - padding: 0; - line-height: calc(100% + 50%); } - .search-results__heading a { - /** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. - */ - transition: all 0.3s ease; - background-color: transparent; - /* 1 */ - /* stylelint-disable property-no-vendor-prefix */ - -webkit-text-decoration-skip: objects; - /* 2 */ - /* stylelint-enable */ - color: #737373; - text-decoration: none; - border-bottom: 2px dashed #737373; - /** - * Remove the outline on focused links when they are also active or hovered - * in all browsers (opinionated). - */ } - .search-results__heading a:active, .search-results__heading a:hover { - outline-width: 0; - color: black; - background-color: #e5e5e5; - border-bottom: 2px solid black; } + padding: 0; } + +.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: #0000ff; + text-decoration: none; + /** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ } + .search-results__heading-link:active, .search-results__heading-link:hover { + outline-width: 0; + text-decoration: underline; } .search-results__teaser { margin-bottom: 0.73333em; } .search-results__meta { - font-size: 0.8em; - line-height: 1.46667em; margin-bottom: 0.73333em; color: #555; display: block; } -.search-results__citation { - font-style: normal; } +.search-results__citation a { + font-style: normal; + color: #555; + text-decoration: none; } + .search-results__citation a:hover { + text-decoration: underline; } /** * search-scope.scss @@ -1550,15 +1536,10 @@ aside { * * @copyright Copyright (c) 2017 Palantir.net */ -.search-pager { - background-color: transparent; } - .search-pager__items { display: flex; align-items: center; justify-content: space-between; - border-radius: 3px; - background-color: #eff0f1; padding: 0 2.93333em; margin: 4.4em 0; } @media (min-width: 450px) { @@ -1577,64 +1558,35 @@ aside { @media (min-width: 900px) { .search-pager__item { margin-right: 0.36667em; } } - .search-pager__item a { - transition: all 0.3s ease; - font-size: 0.9em; - line-height: 1.62963em; - font-weight: 700; - display: flex; - justify-content: center; - align-items: center; - border: 0; - text-align: center; - padding: 0.36667em; } - @media (min-width: 450px) { - .search-pager__item a { - background-color: #0000ff; - color: #fff; - border-radius: 3px; - width: 2.2em; - height: 2.2em; - padding: 0; } } - @media (min-width: 900px) { - .search-pager__item a { - font-size: 0.8em; - line-height: 1.65em; - width: 1.76em; - height: 1.76em; } } - .search-pager__item a:hover, .search-pager__item a:active { - text-decoration: underline; - color: #fff; - background-color: #0000ff; } - @media (min-width: 450px) { - .search-pager__item a:hover, .search-pager__item a:active { - font-size: 1em; - line-height: 1.46667em; - background-color: navy; } } - .search-pager__item a:hover svg, .search-pager__item a:active svg { - fill: black; } - .search-pager__item a svg { - height: 1.3em; - fill: #fff; - display: block; } - @media (min-width: 450px) { - .search-pager__item a svg { - height: 1em; } } - .search-pager__item.is-active a { - font-size: 1em; - line-height: 1.46667em; } - @media (min-width: 450px) { - .search-pager__item.is-active a { - background-color: #737373; - color: #fff; } - .search-pager__item.is-active a:hover, .search-pager__item.is-active a:active { - background-color: black; } } - .search-pager__item.not-active { + .search-pager__item.is-active .search-pager__item-link { + font-weight: bold; } + .search-pager__item.not-active .search-pager__item-link { display: none; } @media (min-width: 450px) { - .search-pager__item.not-active { + .search-pager__item.not-active .search-pager__item-link { display: inline-block; } } +.search-pager__item-link { + display: flex; + justify-content: center; + align-items: center; + border: 0; + text-align: center; + padding: 0.36667em; } + .search-pager__item-link:hover, .search-pager__item-link:active { + text-decoration: underline; } + .search-pager__item-link:hover svg, .search-pager__item-link:active svg { + fill: black; + border-bottom: 1px solid #222; } + .search-pager__item-link svg { + height: 1.3em; + fill: #222; + display: block; + border-bottom: 1px solid transparent; } + @media (min-width: 450px) { + .search-pager__item-link svg { + height: 1em; } } + /** * search-results-stat.scss * Define search results statistic styles. @@ -1642,8 +1594,6 @@ aside { * @copyright Copyright (c) 2017 Palantir.net */ .search-results-stat { - font-size: 0.9em; - line-height: 1.62963em; color: #555; } .search-results-stat:focus { outline: 0; }