docs(aio): cleanup aalert, callout, subsection use and author style (#24986)

PR Close #24986

aio/src/styles/2-modules/_alert.scss

@@ -5,9 +5,14 @@
     color: $darkgray;
     width: 100%;
     box-sizing: border-box;
+    clear: both;
+
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: 500;
+    }
 
     &.is-critical {
-        border-left: 10px solid $brightred;
+        border-left: 8px solid $brightred;
         background-color: rgba($brightred, 0.05);
 
         h1, h2, h3, h4, h5, h6 {
@@ -16,7 +21,7 @@
     }
 
     &.is-important {
-        border-left: 10px solid $orange;
+        border-left: 8px solid $orange;
         background-color: rgba($orange, 0.05);
 
         h1, h2, h3, h4, h5, h6 {
@@ -25,7 +30,7 @@
     }
 
     &.is-helpful {
-        border-left: 10px solid $blue;
+        border-left: 8px solid $blue;
         background-color: rgba($blue, 0.05);
 
         h1, h2, h3, h4, h5, h6 {
@@ -34,7 +39,6 @@
     }
 
     > * {
-        margin: 0;
-        padding: 8px 16px;
+        margin: 8px 16px;
     }
-}
+}

aio/src/styles/2-modules/_buttons.scss

@@ -48,11 +48,19 @@ a.button.mat-button {
   &.button-subtle {
     background: $mediumgray;
     color: darken($offwhite, 10%);
+
+    &:hover {
+      color: rgba($white, 0.7);
+    }
   }
 
-  &.button-navy {
+  &.button-blue {
     background: $blue;
     color: rgba($white, .87);
+
+    &:hover {
+      color: rgba($white, 0.7);
+    }
   }
 
   &.button-banner {
@@ -107,4 +115,4 @@ a.filter-button {
 
 [mat-button], [mat-raised-button], [mat-button], [mat-raised-button] {
   text-transform: uppercase;
-}
+}

aio/src/styles/2-modules/_callout.scss

@@ -8,6 +8,8 @@
     color: $white;
     line-height: 24px;
     font-weight: 500;
+    padding: 8px 16px;
+    margin: 0;
     text-transform: uppercase;
     border-radius: 4px 4px 0 0;
   }
@@ -44,4 +46,4 @@
       background: $blue;
     }
   }
-}
+}

aio/src/styles/2-modules/_card.scss

@@ -73,3 +73,26 @@
     text-align: center;
   }
 }
+
+.card-section {
+  @include card(auto, 90%);
+  padding: 16px 32px;
+  margin: 16px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  // Removes on-hover effect from card mixin
+  &:hover {
+    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 8px 0;
+  }
+
+  a, .button, button {
+    text-align: center;
+  }
+
+}

aio/src/styles/2-modules/_contribute.scss

@@ -3,9 +3,14 @@
     margin: 0;
   }
 
-  .l-sub-section {
-    width: 90%;
-    margin-bottom: 20px;
+  .card-section {
+    justify-content: space-between;
+    max-width: 880px;
+
+    > :first-child {
+      margin-right: 2rem;
+      width: 60%;
+    }
 
     &:last-child {
       margin-bottom: 0;

aio/src/styles/2-modules/_modules-dir.scss

@@ -24,7 +24,6 @@
    @import 'resources';
    @import 'scrollbar';
    @import 'search-results';
-   @import 'subsection';
    @import 'toc';
    @import 'select-menu';
    @import 'deploy-theme';

aio/src/styles/2-modules/_subsection.scss

@@ -1,20 +0,0 @@
-.l-sub-section {
-    color: $darkgray;
-    background-color: rgba($blue, 0.05);
-    border-left: 8px solid $blue;
-    padding: 16px;
-    margin-bottom: 8px;
-    display: table;
-    clear: both;
-    width: 100%;
-    box-sizing: border-box;
-
-    h3 {
-        margin: 8px 0 0;
-    }
-
-    a:hover {
-        color: $blue;
-        text-decoration: underline;
-    }
-}

aio/src/styles/_print.scss

@@ -18,7 +18,7 @@
         page-break-after: avoid;
     }
 
-    ul, ol, img, code-example, table, tr, .alert, .l-subsection, .feature {
+    ul, ol, img, code-example, table, tr, .alert, .feature {
         page-break-inside: avoid;
     }