Restyle api docs for classes and directives

public/resources/css/base/_type.scss

@@ -18,12 +18,19 @@ a {
 }
 
 code {
-  background: $lightgrey;
+  background: #eef1f2;
   border-radius: 2px;
   font-family: $mono-font;
-  color: $darkgrey;
+  color: $regal;
   padding: 0px 4px;
-  font-size: 90%;
+}
+
+p code {
+  border-bottom: 1px dotted $regal;
+
+  &:hover {
+    border-bottom: 1px solid $regal;
+  }
 }
 
 .location-badge {
@@ -103,14 +110,21 @@ code {
     opacity: 0.87;
   }
   h2 {
-    font-size: 20px;
+    font-size: 15px;
+    text-transform: uppercase;
+    color: #78909C;
   }
   h3 {
     font-size: 16px;
   }
   h4 {
     font-size: 16px;
   }
+  p {
+    font-size: 15px;
+    color: #5c7078;
+    line-height: 28pt;
+  }
 }
 
 table th,
@@ -213,8 +227,8 @@ table td {
     &[layout="row"] {
       -webkit-flex-direction: column;
       -ms-flex-direction: column;
-      flex-direction: column; 
-      & > div {   
+      flex-direction: column;
+      & > div {
         & > .card {
           margin-left: 0;
           margin-right: 0;

public/resources/css/main.scss

@@ -54,4 +54,4 @@
 * PRINT STYLES
 *
 */
-@import 'print';
+@import 'print';

public/resources/css/module/_api.scss

@@ -102,4 +102,79 @@ input.api-filter {
       }
     }
   }
+
+  a {
+    code {
+      color: $ocean;
+    }
+  }
+
+  p {
+    color: #1a2326;
+
+    &.selector {
+      margin: 0 0 8px 0;
+    }
+
+    &.location-badge {
+      margin: 0 0 16px 16px !important;
+    }
+
+    code {
+      border-bottom: 0px;
+
+      :hover {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .row-margin {
+    margin-bottom: 36px;
+    h2 {
+      line-height: 28px;
+    }
+  }
+
+  .code-margin {
+    margin-bottom: $unit;
+  }
+
+  .hr-margin {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid $lightgrey;
+    margin-top: 15px;
+    margin-bottom: 20px;
+    padding: 0;
+  }
+
+  .no-bg {
+    background: none;
+    padding: 0;
+  }
+
+  code {
+    font-size: 14px;
+    color: #1a2326;
+
+    // Override highlight.js
+    &.no-pln {
+      .pln {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  code {
+    font-size: 12px;
+  }
+
+  p.location-badge {
+    position: relative;
+    font-size: 11px;
+  }
 }

public/resources/css/module/_code-box.scss

@@ -1,7 +1,6 @@
 .code-box {
   border-radius: 4px;
   background: $lightgrey;
-  // box-shadow: 0px 2px 5px rgba($coal, .3);
   margin-bottom: $unit * 2;
 
   header {
@@ -11,6 +10,30 @@
     border-radius: 4px 4px 0px 0px;
   }
 
+  &__live-code {
+    background-color: #cfd8dc;
+    height: 36px;
+    color: $snow;
+    padding: 0 $unit;
+    border-radius: 4px 4px 0px 0px;
+    margin-bottom: 0;
+
+    & a {
+      font-size: 14px;
+      text-decoration: none;
+      border-bottom: 1px $regal dotted;
+
+      &:hover {
+        border-bottom: 1px $regal solid;
+      }
+    }
+
+    &--icon {
+      font-size: 14px;
+      color: $regal;
+    }
+  }
+
   nav {
     button {
       line-height: $unit * 3.5;
@@ -21,12 +44,11 @@
       background: #3F94E9;
       color: $snow;
       border-radius: 4px 4px 0px 0px;
-      // font-weight: 500;
       text-transform: none;
 
       &.is-selected,
       &.selected
-       {
+      {
         background: $lightgrey;
         color: $darkgrey;
       }
@@ -38,3 +60,7 @@
     margin: 0px;
   }
 }
+
+pre {
+  margin-top: 0;
+}

tools/api-builder/angular.io-package/tag-defs/index.js

@@ -1,6 +1,6 @@
 module.exports = [
   require('./deprecated'),
   require('./howToUse'),
-  require('./whatItIs'),
+  require('./whatItDoes'),
   require('./internal')
 ];

tools/api-builder/angular.io-package/tag-defs/whatItIs.js → tools/api-builder/angular.io-package/tag-defs/whatItDoes.js

@@ -1,5 +1,5 @@
 module.exports = function() {
   return {
-    name: 'whatItIs'
+    name: 'whatItDoes'
   };
 };