honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(docs-infra): use a single CSS class to target the API list container (#40704) 

Previously, the API list container (in the template of the
`<aio-api-list>` component) had three different CSS classes
(`.api-list-container`, `.docs-content`, `.l-content-small`) that were
all used for styling it. This seemed unnecessary and made it more difficult
to see what styles were applied to the container.

This commit removes the extra classes and consolidates the styles under
the `.api-list-container` class (which was the most descriptive one).

PR Close #40704
This commit is contained in:
George Kalpakas 2021-02-05 12:49:13 +02:00 committed by Alex Rickabaugh
parent defcd50b05
commit 089a634053
2 changed files with 18 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/src/app/custom-elements/api/api-list.component.html
View File

@ -20,7 +20,7 @@
</div>
</div>
<article class="api-list-container l-content-small docs-content">
<article class="api-list-container">
<div *ngFor="let section of filteredSections | async" >
<h2 *ngIf="section.items"><a [href]="section.path" [class.deprecated-api-item]="section.deprecated">{{section.title}}</a></h2>
<ul class="api-list" *ngIf="section.items && section.items.length">

41
aio/src/styles/2-modules/_api-list.scss
View File

@ -86,9 +86,25 @@ aio-api-list {
/* LAYOUT */
.docs-content {
.api-list-container {
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 1100px;
padding: 16px 16px 16px 0;
position: relative;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
padding: 24px 0 0;
}
h2 {
margin-top: 16px;
margin-bottom: 16px;
}
/* API CLASS LIST */
.api-list {
list-style: none;
@ -134,27 +150,4 @@ aio-api-list {
}
}
}
.l-content-small {
padding: 16px;
margin: 0;
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
padding: 24px 0 0;
}
}
.api-list-container {
display: flex;
flex-direction: column;
margin: 0 auto;
padding-left: 0;
h2 {
margin-top: 16px;
margin-bottom: 16px;
}
}
}