API styles redesign - for review only, do not merge

public/_includes/_head-include.jade

@@ -36,9 +36,11 @@ meta(itemprop="image" content="https://angular.io/resources/images/logos/standar
 link(rel="icon" type="image/x-icon" href="/resources/images/icons/favicon.ico")
 link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css")
 link(href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic,700' rel='stylesheet' type='text/css')
+link(href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css')
 link(rel="stylesheet" href="/resources/css/vendor/icomoon/style.css")
 link(rel="stylesheet" href="/resources/css/vendor/animate.css")
 link(rel="stylesheet" href="/resources/css/main.css")
+link(rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons")
 
 <!-- MOBILE ICONS -->
 <link rel="apple-touch-icon" sizes="57x57" href="/resources/images/favicons/apple-touch-icon-57x57.png">
@@ -56,4 +58,4 @@ link(rel="stylesheet" href="/resources/css/main.css")
 <link rel="icon" type="image/png" href="/resources/images/favicons/favicon-96x96.png" sizes="96x96">
 <link rel="icon" type="image/png" href="/resources/images/favicons/android-chrome-192x192.png" sizes="192x192">
 <link rel="icon" type="image/png" href="/resources/images/favicons/favicon-16x16.png" sizes="16x16">
-<link rel="manifest" href="/resources/images/favicons/manifest.json">
+<link rel="manifest" href="/resources/images/favicons/manifest.json">

public/_includes/_scripts-include.jade

@@ -42,4 +42,20 @@ if current.path[0] == "docs"
     e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
     })(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st');
 
-    _st('install','VsuU7kH5Hnnj9tfyNvfK');
+    _st('install','VsuU7kH5Hnnj9tfyNvfK');
+
+<!-- Google Feedback -->
+script(src="//www.gstatic.com/feedback/api.js" type="text/javascript")
+
+script.
+  var btn = document.getElementById("feedback-btn");
+  var submitFeedback = function() {
+    var dropdown = document.getElementById("feedback-dropdown");
+    var configuration = {
+      'productId': 'Angular',
+      'authuser': '1',
+      'bucket': dropdown.options[dropdown.selectedIndex].value
+    }
+    userfeedback.api.startFeedback(configuration);
+  }
+  btn.addEventListener("click", submitFeedback);

public/docs/ts/latest/api/common/NgSwitch-directive.jade

@@ -0,0 +1,93 @@
+
+include ../../_util-fns
+
+.grid-fluid.api-content
+  .c2
+    h2 What It Does
+  .c10
+    p The <a href="#">NgSwitch</a> directive is used to conditionally swap DOM structure on your template and on a scope expression. Elements within <a href="#">NgSwitch</a> but without <a href="#">NgSwitchWhen</a> or <a href="#">NgSwitchDefault</a> directives will be preserved at the location as specified in the template.
+  .c2 
+    h2 How To Use
+  .c10
+    p 
+      code-example(language="typescript").
+        &lt;p&gt;Value = {{value}}&lt;/p&gt;
+        &lt;button (click)=&quot;inc()&quot;&gt;Increment&lt;/button&gt;
+
+        &lt;div [ng-switch]=&quot;value&quot;&gt;
+          &lt;p *ng-switch-when=&quot;&#039;init&#039;&quot;&gt;increment to start&lt;/p&gt;
+  .c2 
+    h2 Selectors <i class="material-icons md-14">help</i>
+  .c10
+    p
+      code [ng-switch]
+  .c2 
+    h2 Outputs <i class="material-icons md-14">help</i>
+  .c10
+    p
+      <a href="#">ng-model-change</a> bound to <a href="#">NgFormControl.update</a>
+  .c2 
+    h2 Inputs <i class="material-icons md-14">help</i>
+  .c10
+    p
+      <a href="#">ng-switch</a> bound to <a href="#">NgSwitch.ngSwitch</a>
+  .c2
+    h2 Exported As <i class="material-icons md-14">help</i>
+  .c10
+    p <a href="#">form</a>
+  .c2 
+    h2 Class Description <i class="material-icons md-14">help</i>
+  .c10
+    p
+      :marked
+        <a href="#">NgSwitch</a> simply inserts nested elements based on which match expression matches the value
+        obtained from the evaluated switch expression. In other words, you define a container element
+        (where you place the directive with a switch expression on the
+        **`[ng-switch]="..."` attribute**), define any inner elements inside of the directive and
+        place a `[ng-switch-when]` attribute per element.
+        The `ng-switch-when` property is used to inform `NgSwitch` which element to display when the
+        expression is evaluated. If a matching expression is not found via a `ng-switch-when` property
+        then an element with the `ng-switch-default` attribute is displayed.
+
+        Example ([live demo](#))
+
+
+        code-example(language="typescript").
+
+            &lt;div [ng-switch]=&quot;value&quot;&gt;
+            &lt;p *ng-switch-when=&quot;&#039;init&#039;&quot;&gt;increment to start&lt;/p&gt;
+            &lt;p *ng-switch-when=&quot;0&quot;&gt;0, increment again&lt;/p&gt;
+            &lt;p *ng-switch-when=&quot;1&quot;&gt;1, increment again&lt;/p&gt;
+            &lt;p *ng-switch-when=&quot;2&quot;&gt;2, stop incrementing&lt;/p&gt;
+            &lt;p *ng-switch-default&gt;&amp;gt; 2, STOP!&lt;/p&gt;
+            &lt;/div&gt;
+
+            &lt;!-- alternate syntax --&gt;
+
+            &lt;p [ng-switch]=&quot;value&quot;&gt;
+              &lt;template ng-switch-when=&quot;init&quot;&gt;increment to start&lt;/template&gt;
+              &lt;template [ng-switch-when]=&quot;0&quot;&gt;0, increment again&lt;/template&gt;
+              &lt;template [ng-switch-when]=&quot;1&quot;&gt;1, increment again&lt;/template&gt;
+              &lt;template [ng-switch-when]=&quot;2&quot;&gt;2, stop incrementing&lt;/template&gt;
+              &lt;template ng-switch-default&gt;&amp;gt; 2, STOP!&lt;/template&gt;
+            &lt;/p&gt;
+
+  .c2 
+    h2 Class Details <i class="material-icons md-14">help</i>
+  .c10
+    h3 NgSwitch
+    hr
+    h3 constructor(_validators:)
+    p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    hr
+    h3 form : Control
+    p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    hr
+    h3 model : any
+    p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    hr
+    h3 viewModel : any
+    p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    hr
+    h3 path : string[]
+    p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

public/docs/ts/latest/help-new.jade

@@ -0,0 +1,8 @@
+div(flex)
+  p.
+    What's your question about?
+  select#feedback-dropdown(name="Angular Version")
+    option(value="Angular2") Angular2
+    option(value="AngularJS") AngularJS
+  button#feedback-btn.
+    Submit

public/resources/css/_options.scss

@@ -50,6 +50,7 @@ $cactus: #8BC34A;
 
 // YELLOW
 $sunshine: #FFF59D;
+$olive: #9E9D24;
 
 // ORANGE
 $sand: #FFF8E1;
@@ -60,6 +61,7 @@ $peach: #ffebee;
 $squid: #EF3872;
 $cardinal: #E23237;
 $ruby: #B52E31;
+$pink: #D43669;
 
 // BLUE COLORS
 $light: #E3F2FD;
@@ -78,9 +80,15 @@ $silver: #36474F;
 $platinum: #445A64;
 $metal: #536E7A;
 $tin: #8FA4AE;
+$darkgrey: #5C707A;
+$bismark: #90A4AE;
+$grey: #B0BEC5;
 
 // LIGHT GRAY COLORS
 $cloud: #AFBEC5;
 $fog: #CFD8DC;
 $mist: #ECEFF1;
-$snow: #FFFFFF;
+$snow: #FFFFFF;
+$heather: #546E7A;
+$lightgrey: #F5F6F7;
+$storm: #E0E0E0;

public/resources/css/base/_type.scss

@@ -15,10 +15,10 @@ a {
 }
 
 code {
-  background: $mist;
+  background: $lightgrey;
   border-radius: 2px;
   font-family: $mono-font;
-  color: $metal;
+  color: $darkgrey;
   padding: 0px 4px;
   font-size: 90%;
 }
@@ -203,4 +203,60 @@ table td {
   > div:last-child > .card {
     margin-right: 0;
   }
-}
+}
+
+.api-content {
+  h2 {
+    margin: 4px 0px;
+    text-transform: uppercase;
+    font-size: 16px;
+    color: #78909C;
+  }
+  h2:before {
+      content: '.';
+      clear: both;
+      display: block;
+      overflow: hidden;
+      visibility: hidden;
+      font-size: 0;
+      line-height: 0;
+      width: 0;
+      height: 0;
+  }
+  h3 {
+    font-size: 18px;
+    color: #546E7A;
+    font-weight: 500;
+    font-family: 'Roboto Mono', sans-serif;
+  }
+  hr {
+    border: 0;
+    color: #ECEFF1;
+    background-color: #ECEFF1;
+    height: 1px;
+  }
+  a {
+    text-decoration: none;
+    border-bottom: 1px dotted #1976D2;
+    background: #EEF1F2;
+    border-radius: 2px;
+    color: #1976D2;
+    font-weight: 500;
+    font-family: 'Roboto Mono', sans-serif;
+  }
+  a:hover {
+    border-bottom: 1px solid #1976D2;
+  }
+  p {
+    margin: 10px 0px;
+  }
+  .prettyprint {
+    background: #FFF;
+    color: #546E7A;
+    margin: 0 0 26px 0;
+    padding: 0;
+  }
+  .material-icons {
+    font-size: 14px;
+  }
+}

public/resources/css/layout/_grids.scss

@@ -566,4 +566,11 @@ limitations under the License.
   .grid-fixed .phone-c12, .grid-fluid .phone-c12 {
     width: 97.91667%;
   }
-}
+}
+
+.api-content {
+  margin-bottom: 26px;
+  .c2, .c10 {
+    margin: 0;
+  }
+}

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

@@ -1,33 +1,34 @@
 .code-box {
   border-radius: 4px;
-  background: $steel;
-  box-shadow: 0px 2px 5px rgba($coal, .3);
+  background: $lightgrey;
+  // box-shadow: 0px 2px 5px rgba($coal, .3);
   margin-bottom: $unit * 2;
 
   header {
-    background: darken($steel, 5%);
+    background: $fog;
     color: $snow;
-    padding: $unit;
+    padding: $unit $unit 0px $unit;
     border-radius: 4px 4px 0px 0px;
   }
 
   nav {
     button {
-      line-height: $unit * 3;
-      height: $unit * 3;
+      line-height: $unit * 3.5;
+      height: $unit * 3.5;
       padding: 0px ($unit * 3);
       margin-right: $unit;
       font-size: 13px;
-      background: lighten($steel, 3%);
-      color: $tin;
-      font-weight: 500;
+      background: $grey;
+      color: $snow;
+      border-radius: 4px 4px 0px 0px;
+      // font-weight: 500;
       text-transform: none;
 
       &.is-selected,
       &.selected
        {
-        background: $blueberry;
-        color: $snow;
+        background: $lightgrey;
+        color: $darkgrey;
       }
     }
   }
@@ -36,4 +37,4 @@
     box-shadow: none;
     margin: 0px;
   }
-}
+}