mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Refactored search result styles
This commit is contained in:
squidfunk
parent
a74a025f47
commit
b44c503008
@ -569,6 +569,49 @@ hr {
|
|||||||
box-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.07) inset;
|
box-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.07) inset;
|
||||||
overflow-y: auto; }
|
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 {
|
.md-sidebar {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 24.2rem;
|
width: 24.2rem;
|
||||||
@ -1163,51 +1206,6 @@ hr {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: -1; }
|
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 {
|
.md-button {
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: 9px;
|
margin-top: 9px;
|
||||||
@ -1373,13 +1371,7 @@ hr {
|
|||||||
|
|
||||||
.md-search__output {
|
.md-search__output {
|
||||||
top: 5.6rem;
|
top: 5.6rem;
|
||||||
bottom: 0; }
|
bottom: 0; } }
|
||||||
|
|
||||||
.md-search-result__link {
|
|
||||||
padding: 0 1.6rem; }
|
|
||||||
|
|
||||||
.md-search-result__meta {
|
|
||||||
padding-left: 1.6rem; } }
|
|
||||||
|
|
||||||
@media only screen and (max-width: 74.9375em) {
|
@media only screen and (max-width: 74.9375em) {
|
||||||
|
|
||||||
@ -1655,6 +1647,12 @@ hr {
|
|||||||
.md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
|
.md-search__scrollwrap::-webkit-scrollbar-thumb:hover {
|
||||||
background-color: #536dfe; }
|
background-color: #536dfe; }
|
||||||
|
|
||||||
|
.md-search-result__meta {
|
||||||
|
padding-left: 4.8rem; }
|
||||||
|
|
||||||
|
.md-search-result__link {
|
||||||
|
padding-left: 4.8rem; }
|
||||||
|
|
||||||
.md-sidebar--secondary {
|
.md-sidebar--secondary {
|
||||||
display: block;
|
display: block;
|
||||||
float: right; }
|
float: right; }
|
||||||
|
|||||||
@ -14,6 +14,6 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
<a href="{{ config.repo_url }}" title="Go to repository" class="md-source {{ repo_icon }}" data-md-source="{{ repo_type }}">
|
<a href="{{ config.repo_url }}" title="Go to repository" class="md-source {{ repo_icon }}" data-md-source="{{ repo_type }}">
|
||||||
<div class="md-source__repository">
|
<div class="md-source__repository">
|
||||||
{{ repo_name }}
|
{{ config.repo_name }}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -24,72 +24,6 @@
|
|||||||
// Rules
|
// 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 {
|
.md-button {
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: 9px;
|
margin-top: 9px;
|
||||||
|
|||||||
@ -219,7 +219,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Icon
|
// Icons
|
||||||
&__icon {
|
&__icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: $md-icon-padding;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user