feat(aio): add new classes, table and images styling (#15478)

aio/src/styles/0-base/_typography.scss

@@ -6,6 +6,7 @@
       font-family: $main-font;
       margin: 0;
       color: $darkgray;
+      font-size: 14px;
     }
 
     h1 {
@@ -54,12 +55,16 @@
       margin-top: 0px;
     }
 
-    p, ol, ul, ol, input, a  {
+    p, ol, ul, ol, li, input, a  {
       font-size: 14px;
       line-height: 24px;
       letter-spacing: 0.30px;
     }
 
+    ol li {
+      margin: 14px 0px;
+    }
+
     a {
       text-decoration: none;
     }

aio/src/styles/1-layouts/_top-menu.scss

@@ -50,4 +50,10 @@ aio-search-box input {
       width: 50%;
     }  
   }
+  @include bp(medium) {
+    transition: width 0.4s ease-in-out;
+    &:focus {
+      width: 50%;
+    }  
+  }
 }

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

@@ -0,0 +1,21 @@
+.alert {
+    display: flex;
+    padding: 0px 10px;
+    margin: 20px 0px;
+    font-size: 14px;
+    color: $darkgray;
+    &.is-critical {
+        border-left: 10px solid $brightred;
+        background-color: rgba($brightred, 0.05);
+    }
+
+    &.is-important {
+        border-left: 10px solid $orange;
+        background-color: rgba($orange, 0.05);
+    }
+
+    &.is-helpful {
+        border-left: 10px solid $blue;
+        background-color: rgba($blue, 0.05);
+    }
+}

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

@@ -0,0 +1,37 @@
+.filetree {
+  background: $offwhite;
+  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .2);
+  border: 4px solid $lightgray;
+  margin: 0px 0px 5px 0px;
+  padding: 10px;
+
+  .file {
+    display: block;
+    font-family: $main-font;
+    line-height: 32px;
+    color: $darkgray;
+  }
+
+  .children {
+    padding-left: 5px;
+    position: relative;
+    overflow: hidden;
+
+    .file {
+      position: relative;
+
+      &:before {
+        content: '';
+        left: -18px;
+        bottom: 16px;
+        width: 5px;
+        height: 9999px;
+        position: absolute;
+        border-width: 0 0 1px 1px;
+        border-style: solid;
+        border-color: $lightgray;
+        border-radius: 0 0 0 3px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+
+.image-display {
+  border-radius: 4px;
+  background: $white;
+  padding: 20px;
+  display: inline-block;
+  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .2);
+  margin: 0px 0px 10px 0px;
+
+  img {
+    border-radius: 4px;
+    display: inline-block;
+    max-width: 100%;
+  }
+}

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

@@ -4,3 +4,7 @@
 
    @import 'hamburger';
    @import 'code';
+   @import 'alert';
+   @import 'filetree';
+   @import 'images';
+   @import 'table';

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

@@ -0,0 +1,8 @@
+.l-sub-section {
+    color: $darkgray;
+    border-width: 1px;
+    border-style: solid;
+    padding: 20px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}

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

@@ -0,0 +1,43 @@
+table {
+  margin: 24px 0px;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  border-radius: 2px;
+  background: $offwhite;
+
+  &.is-full-width {
+    width: 100%;
+  }
+
+  thead {
+    th {
+      background: $offwhite;
+      border-bottom: 1px solid $lightgray;
+      color: $darkgray;
+      font-size: 12px;
+      font-weight: 500;
+      padding: 0px 24px;
+      text-align: left;
+      text-transform: uppercase;
+    }
+  }
+
+  tbody {
+    th,
+    td {
+      border-bottom: 1px solid $lightgray;
+      padding: 16px 24px;
+      text-align: left;
+    }
+
+    th {
+      background: $offwhite;
+      border-right: 1px solid $lightgray;
+      font-weight: 600;
+      max-width: 100px;
+    }
+
+    tr:last-child td {
+      border: none;
+    }
+  }
+}

aio/src/styles/_constants.scss

@@ -8,6 +8,7 @@ $code-font: "Droid Sans Mono", monospace;
 $blue: #1976D2;
 $brightred: #DD0031;
 $darkred: #C3002F;
+$white: #FFFFFF;
 $offwhite: #FAFAFA;
 $backgroundgray: #F1F1F1;
 $lightgray: #DBDBDB;
@@ -15,6 +16,7 @@ $mediumgray: #7E7E7E;
 $darkgray: #333;
 $black: #0A1014;
 $codegreen: #17ff0b;
+$orange: #FF9800;
 
 // GRADIENTS
 $bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);

aio/src/styles/_mixins.scss

@@ -12,6 +12,6 @@
     background-color: $bgcolor;
     border-radius: 5px;
     padding: 20px;
-    margin: 24px auto;
+    margin: 0px auto; // was 24
     border: 0.5px solid $lightgray;
 }