From b44c503008cc0087d2fda3ffcf1deb9417a1a837 Mon Sep 17 00:00:00 2001 From: squidfunk Date: Fri, 16 Dec 2016 09:21:31 +0100 Subject: [PATCH] Refactored search result styles --- material/assets/stylesheets/application.css | 102 ++++++++++---------- material/partials/source.html | 6 +- src/assets/stylesheets/_shame.scss | 66 ------------- src/assets/stylesheets/layout/_search.scss | 74 +++++++++++++- 4 files changed, 126 insertions(+), 122 deletions(-) diff --git a/material/assets/stylesheets/application.css b/material/assets/stylesheets/application.css index 55aba2966..64b6ae78f 100644 --- a/material/assets/stylesheets/application.css +++ b/material/assets/stylesheets/application.css @@ -569,6 +569,49 @@ hr { box-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.07) inset; overflow-y: auto; } +.md-search-result__meta { + padding: 0 1.6rem; + background: rgba(0, 0, 0, 0.07); + color: rgba(0, 0, 0, 0.54); + font-size: 1.28rem; + line-height: 4.0rem; } + +.md-search-result__list { + margin: 0; + padding: 0; + border-top: 0.1rem solid rgba(0, 0, 0, 0.07); + list-style: none; } + +.md-search-result__item { + box-shadow: 0 -0.1rem 0 rgba(0, 0, 0, 0.07); } + +.md-search-result__link { + display: block; + padding: 0 1.6rem; + -webkit-transition: background 0.25s; + transition: background 0.25s; + overflow: auto; } + .md-search-result__link:hover { + background: rgba(83, 109, 254, 0.1); } + +.md-search-result__article { + margin: 1.0em 0; } + +.md-search-result__title { + margin-top: 0.5em; + margin-bottom: 0; + color: rgba(0, 0, 0, 0.87); + font-size: 1.6rem; + font-weight: 400; + line-height: 1.4; } + +.md-search-result__teaser { + margin: 0.5em 0; + color: rgba(0, 0, 0, 0.54); + font-size: 1.28rem; + line-height: 1.4; + word-break: break-word; } + .md-sidebar { position: relative; width: 24.2rem; @@ -1163,51 +1206,6 @@ hr { opacity: 0; z-index: -1; } -.md-search-result__meta { - background: rgba(0, 0, 0, 0.07); - color: rgba(0, 0, 0, 0.54); - padding-left: 4.8rem; - padding-right: 1.6rem; - line-height: 4.0rem; - font-size: 1.28rem; } - -.md-search-result__item { - box-shadow: 0 -0.1rem 0 rgba(0, 0, 0, 0.07); } - -.md-search-result__list { - margin: 0; - padding: 0; - list-style-type: none; - border-top: 0.1rem solid rgba(0, 0, 0, 0.07); } - -.md-search-result__link { - overflow: auto; - display: block; - padding-left: 4.8rem; - padding-right: 1.6rem; - -webkit-transition: background 0.25s; - transition: background 0.25s; } - .md-search-result__link:hover { - background: rgba(83, 109, 254, 0.1); } - -.md-search-result__article { - margin: 1.0em 0; } - -.md-search-result__title { - color: rgba(0, 0, 0, 0.87); - font-size: 1.6rem; - font-weight: 400; - line-height: 1.4; - margin-top: 0.5em; - margin-bottom: 0; } - -.md-search-result__teaser { - color: rgba(0, 0, 0, 0.54); - font-size: 1.28rem; - line-height: 1.4; - margin: 0.5em 0; - word-break: break-word; } - .md-button { float: right; margin-top: 9px; @@ -1373,13 +1371,7 @@ hr { .md-search__output { top: 5.6rem; - bottom: 0; } - - .md-search-result__link { - padding: 0 1.6rem; } - - .md-search-result__meta { - padding-left: 1.6rem; } } + bottom: 0; } } @media only screen and (max-width: 74.9375em) { @@ -1655,6 +1647,12 @@ hr { .md-search__scrollwrap::-webkit-scrollbar-thumb:hover { background-color: #536dfe; } + .md-search-result__meta { + padding-left: 4.8rem; } + + .md-search-result__link { + padding-left: 4.8rem; } + .md-sidebar--secondary { display: block; float: right; } diff --git a/material/partials/source.html b/material/partials/source.html index 6a6c20548..8649d97d0 100644 --- a/material/partials/source.html +++ b/material/partials/source.html @@ -1,7 +1,7 @@ {% set platform = config.extra.repo_icon or config.repo_url %} {% if "github" in platform %} {% set repo_type = "github" %} - {% set repo_icon = "md-source--github" %} + {% set repo_icon = "md-source--github" %} {% elif "gitlab" in platform %} {% set repo_type = "gitlab" %} {% set repo_icon = "md-source--gitlab" %} @@ -12,8 +12,8 @@ {% set repo_type = "" %} {% set repo_icon = "" %} {% endif %} - +
- {{ repo_name }} + {{ config.repo_name }}
diff --git a/src/assets/stylesheets/_shame.scss b/src/assets/stylesheets/_shame.scss index 64d448e59..8b8f65520 100644 --- a/src/assets/stylesheets/_shame.scss +++ b/src/assets/stylesheets/_shame.scss @@ -24,72 +24,6 @@ // Rules // ---------------------------------------------------------------------------- -@include break-to-device(tablet portrait) { - .md-search-result__link { - padding: 0 1.6rem; - } - .md-search-result__meta { - padding-left: 1.6rem; - } -} - -.md-search-result { - - &__meta { - background: $md-color-black--lightest; - color: $md-color-black--light; - padding-left: 4.8rem; - padding-right: 1.6rem; - line-height: 4.0rem; - font-size: ms(-1); - } - - &__item { - - box-shadow: 0 -0.1rem 0 rgba(0, 0, 0, 0.07); - } - - &__list { - margin: 0; - padding: 0; - list-style-type: none; - border-top: 0.1rem solid $md-color-black--lightest; - } - - &__link { - overflow: auto; // TODO: this must be here, because the inner margins may not collapse... - display: block; - padding-left: 4.8rem; - padding-right: 1.6rem; - transition: background 0.25s; - - &:hover { - background: transparentize($md-color-accent, 0.9); - } - } - - &__article { - margin: 1.0em 0; - } - - &__title { - color: $md-color-black; - font-size: ms(0); - font-weight: 400; - line-height: 1.4; - margin-top: 0.5em; - margin-bottom: 0; - } - - &__teaser { - color: $md-color-black--light; - font-size: ms(-1); - line-height: 1.4; - margin: 0.5em 0;; - word-break: break-word; - } -} - .md-button { float: right; margin-top: 9px; diff --git a/src/assets/stylesheets/layout/_search.scss b/src/assets/stylesheets/layout/_search.scss index d794316ed..434a940f1 100644 --- a/src/assets/stylesheets/layout/_search.scss +++ b/src/assets/stylesheets/layout/_search.scss @@ -219,7 +219,7 @@ } } - // Icon + // Icons &__icon { position: absolute; top: $md-icon-padding; @@ -336,3 +336,75 @@ } } } + +// Search result +.md-search-result { + + // Search metadata + &__meta { + padding: 0 1.6rem; + background: $md-color-black--lightest; + color: $md-color-black--light; + font-size: ms(-1); + line-height: 4.0rem; + + // [tablet landscape +]: Increase left indent + @include break-from-device(tablet landscape) { + padding-left: 4.8rem; + } + } + + // List of items + &__list { + margin: 0; + padding: 0; + border-top: 0.1rem solid $md-color-black--lightest; + list-style: none; + } + + // List item + &__item { + box-shadow: 0 -0.1rem 0 $md-color-black--lightest; + } + + // Link inside item + &__link { + display: block; + padding: 0 1.6rem; + transition: background 0.25s; + overflow: auto; + + // Hovered link + &:hover { + background: transparentize($md-color-accent, 0.9); + } + + // [tablet landscape +]: Increase left indent + @include break-from-device(tablet landscape) { + padding-left: 4.8rem; + } + } + + // Search result content + &__article { + margin: 1.0em 0; + } + + // Search result title + &__title { + margin-top: 0.5em; + margin-bottom: 0; + color: $md-color-black; + font-size: ms(0); + font-weight: 400; + line-height: 1.4; + } + + &__teaser { + margin: 0.5em 0;; + color: $md-color-black--light; + font-size: ms(-1); + line-height: 1.4; + word-break: break-word; + } +}