From d3eff182e328fe7fe4b7cfd0162e62c767452ede Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 23 Feb 2021 16:49:20 +0200
Subject: [PATCH] refactor(docs-infra): clean up styling of the
 `<aio-resource-list>` component (#40944)

This commit cleans up the styles and the elements/classes used for
styling the content of the `<aio-resource-list>` component.

This change has been extracted from #36045.

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40944
---
 .../resource/resource-list.component.html     | 18 ++++++------
 aio/src/styles/2-modules/_resources.scss      | 28 ++++---------------
 2 files changed, 13 insertions(+), 33 deletions(-)

diff --git a/aio/src/app/custom-elements/resource/resource-list.component.html b/aio/src/app/custom-elements/resource/resource-list.component.html
index 566e2ee8e9..14e29f27af 100644
--- a/aio/src/app/custom-elements/resource/resource-list.component.html
+++ b/aio/src/app/custom-elements/resource/resource-list.component.html
@@ -1,4 +1,4 @@
-<div class="resources-container">
+<div>
   <div class="flex-center group-buttons">
     <a *ngFor="let category of categories"
       [class.selected]="category.id == selectedCategory.id"
@@ -6,19 +6,17 @@
       (click)="selectCategory(category.id)"
       (keyup.enter)="selectCategory(category.id)">{{category.title}}</a>
   </div>
-  <div class="l-flex--column align-items-center">
-    <div class="shadow-1 showcase">
+  <div class="resources-container">
+    <div class="showcase">
       <div *ngFor="let subCategory of selectedCategory?.subCategories">
-        <a class="h-anchor-offset" id="{{subCategory.id}}"></a>
+        <a id="{{subCategory.id}}"></a>
         <h3 class="subcategory-title">{{subCategory.title}}</h3>
 
         <div *ngFor="let resource of subCategory.resources">
-          <div class="c-resource">
-            <a class="l-flex--column resource-row-link" rel="noopener" target="_blank" [href]="resource.url">
-              <div>
-                <h4>{{resource.title}}</h4>
-                <p class="resource-description">{{resource.desc || 'No Description'}}</p>
-              </div>
+          <div class="resource-item">
+            <a class="resource-row-link" rel="noopener" target="_blank" [href]="resource.url">
+              <h4>{{resource.title}}</h4>
+              <p class="resource-description">{{resource.desc || 'No Description'}}</p>
             </a>
           </div>
         </div>
diff --git a/aio/src/styles/2-modules/_resources.scss b/aio/src/styles/2-modules/_resources.scss
index d7dad6bb49..e10966f960 100644
--- a/aio/src/styles/2-modules/_resources.scss
+++ b/aio/src/styles/2-modules/_resources.scss
@@ -1,14 +1,7 @@
 aio-resource-list {
-  .resources-container {
-    position: relative;
-  }
-
-  .shadow-1 {
+  .showcase {
     transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 1px 4px 0 rgba($black, 0.37);
-  }
-
-  .showcase {
     border-radius: 4px;
     margin-bottom: 8px * 6;
     width: 80%;
@@ -18,7 +11,7 @@ aio-resource-list {
     }
   }
 
-  .c-resource {
+  .resource-item {
     h4 {
       margin: 0;
       @include line-height(24);
@@ -29,19 +22,9 @@ aio-resource-list {
     }
   }
 
-  .h-anchor-offset {
-    display: block;
-    position: relative;
-    top: -20px;
-    visibility: hidden;
-  }
-
-  .l-flex--column {
+  .resources-container {
     display: flex;
     flex-direction: column;
-  }
-
-  .align-items-center {
     align-items: center;
   }
 
@@ -54,11 +37,10 @@ aio-resource-list {
 
   .resource-row-link {
     color: #1a2326;
+    display: flex;
+    flex-direction: column;
     border: transparent solid 1px;
-    margin: 0;
     padding: 16px 23px 16px 23px;
-    position: relative;
-    text-decoration: none;
     transition: all .3s;
 
     &:hover {