fix(aio): tidy up layout of api filter page

* Remove the "info-banner" styling from the filters.
* Fix alignment of the search box on a narrow screen (closes #17395)
* Remove unnecessary whitespace before section headers
This commit is contained in:
Peter Bacon Darwin 2017-06-11 21:38:34 +01:00 committed by Pete Bacon Darwin
parent 0658e1da7f
commit 0c7eb93889
2 changed files with 17 additions and 17 deletions

View File

@ -1,4 +1,4 @@
<div class="l-flex-wrap info-banner api-filter">
<div class="l-flex-wrap api-filter">
<aio-select (change)="setType($event.option)"
[options]="types"

View File

@ -1,11 +1,7 @@
/* API EDIT ICON */
#api {
.info-banner .material-icons {
.api-filter .material-icons {
right: 48px;
@media screen and (max-width: 600px) {
left: 50px;
}
}
}
@ -25,21 +21,25 @@ aio-api-list {
display: flex;
flex-direction: column;
margin: 0 auto;
h2 {
margin-top: 16px;
}
}
}
aio-api-list > div {
display: flex;
margin: 32px auto;
.api-filter {
display: flex;
margin: 0 auto;
@media (max-width: 600px) {
flex-direction: column;
margin: 16px auto;
}
@media (max-width: 600px) {
flex-direction: column;
margin: 16px auto;
}
.form-select-menu, .form-search {
margin: 8px;
}
.form-select-menu, .form-search {
margin: 8px;
}
}
$phone-breakpoint: 480px;
@ -165,7 +165,7 @@ $tablet-breakpoint: 800px;
.docs-content .api-list {
list-style: none;
margin: 0 0 48px -8px;
margin: 0 0 32px -8px;
padding: 0;
overflow: hidden;