From 089a634053903b0ca8814320199f67f203a2da2f Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 5 Feb 2021 12:49:13 +0200
Subject: [PATCH] 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
---
 .../api/api-list.component.html               |  2 +-
 aio/src/styles/2-modules/_api-list.scss       | 41 ++++++++-----------
 2 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/aio/src/app/custom-elements/api/api-list.component.html b/aio/src/app/custom-elements/api/api-list.component.html
index e7f101b2ad..e6b801b1d5 100644
--- a/aio/src/app/custom-elements/api/api-list.component.html
+++ b/aio/src/app/custom-elements/api/api-list.component.html
@@ -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">
diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss
index b08244b364..ed60612515 100644
--- a/aio/src/styles/2-modules/_api-list.scss
+++ b/aio/src/styles/2-modules/_api-list.scss
@@ -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;
-    }
-  }
 }