refactor(docs-infra): clean up `aio-search-results` styles (#31390)

PR Close #31390
This commit is contained in:
George Kalpakas 2019-07-02 17:37:33 +03:00 committed by Matias Niemelä
parent 2d4f507b61
commit 75b6b0e1ba
1 changed files with 99 additions and 93 deletions

View File

@ -1,14 +1,12 @@
aio-search-results { aio-search-results {
z-index: 10; z-index: 10;
}
.search-results { .search-results {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
overflow: auto; overflow: auto;
padding: 68px 32px 0; padding: 68px 32px 0;
color: $offwhite;
width: auto; width: auto;
max-height: 95vh; max-height: 95vh;
position: fixed; position: fixed;
@ -20,38 +18,10 @@ aio-search-results {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
box-sizing: border-box; box-sizing: border-box;
@media (max-width: 480px) {
display: block;
.search-area { .search-area {
display: block;
margin: 16px 16px;
}
}
}
aio-search-results.embedded .search-results {
padding: 0;
color: inherit;
width: auto;
max-height: 100%;
position: relative;
background-color: inherit;
box-shadow: none;
box-sizing: border-box;
.search-area a {
color: lighten($darkgray, 10);
&:hover {
color: $accentblue;
}
}
}
.search-area {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 16px 16px; margin: 16px;
height: 100%; height: 100%;
.search-section-header { .search-section-header {
@ -69,34 +39,70 @@ aio-search-results.embedded .search-results {
li { li {
list-style: none; list-style: none;
} }
}
a { .search-result-item {
@include font-size(14); @include font-size(14);
color: $lightgray; color: $lightgray;
text-decoration: none;
font-weight: normal; font-weight: normal;
&a {
text-decoration: none;
}
&:hover { &:hover {
color: $white; color: $white;
} }
&:visited {
text-decoration: none;
}
span.symbol { .symbol {
margin-right: 8px; margin-right: 8px;
} }
} }
.priority-pages { &.priority-pages {
padding: 0.5rem 0; padding: 0.5rem 0;
a { .search-result-item {
font-weight: bold; font-weight: bold;
} }
} }
}
@include bp(tiny) { @include bp(tiny) {
display: block; display: block;
} }
}
@media (max-width: 480px) {
display: block;
.search-area {
display: block;
}
}
}
&.embedded {
.search-results {
padding: 0;
color: inherit;
max-height: 100%;
position: relative;
background-color: inherit;
box-shadow: none;
.search-area {
.search-section-header {
color: $darkgray;
}
.search-result-item {
color: lighten($darkgray, 10);
&:hover {
color: $accentblue;
}
}
}
}
}
} }