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;
|
||||
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; }
|
||||
|
||||
@ -14,6 +14,6 @@
|
||||
{% endif %}
|
||||
<a href="{{ config.repo_url }}" title="Go to repository" class="md-source {{ repo_icon }}" data-md-source="{{ repo_type }}">
|
||||
<div class="md-source__repository">
|
||||
{{ repo_name }}
|
||||
{{ config.repo_name }}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user