update(docs): improve md-button docs and improved doc styling.

docs/app/css/style.css

@@ -19,7 +19,7 @@ table {
   border-spacing: 0;
   border-radius: 2px;
   overflow: hidden;
-  border: 1px solid #eee;
+  border: 1px solid rgba(238, 238, 238, 0.47);
 }
 
 /***************
@@ -637,21 +637,43 @@ ul.buckets li a:focus md-icon {
   color: #888;
 }
 
+code.api-type {
+  font-weight: bold;
+}
+
 .api-params-content ul {
   padding-left: 4px;
 }
-ul.methods > li {
+ul.methods > li#id {
   margin-bottom: 48px;
 }
 
 ul.methods .method-function-syntax {
+
+  color: rgb(63, 81, 181);
   font-weight: normal;
   font-size: 1.6rem;
   margin: 0;
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
 }
 
+ul.methods .method-param-table, .api-param-table {
+  border: 1px solid rgba(238, 238, 238, 0.47);
+  border-radius: 9px;
+  overflow: hidden;
+}
+
+.api-param-table > table,
+.method-param-table > table {
+  border-bottom: none;
+  margin-bottom : 0px;
+}
+
+.api-param-section {
+  margin-top: 40px;
+}
+
 h3 .method-function-syntax {
   display: inline-block;
   padding: 8px 16px;
@@ -729,6 +751,7 @@ ul.methods {
 }
 ul.methods > li {
   margin: 0;
+  margin-bottom: 20px;
 }
 ul.methods > li:first-child > *:first-child {
   padding-top: 0;
@@ -778,3 +801,19 @@ docs-demo .doc-demo-content {
   color: #202020 !important;
   z-index: 3;
 }
+
+header.api-profile-header {
+  color: rgb(63, 81, 181);
+  font-weight: bold;
+}
+
+.api-profile-description ol li {
+  padding-bottom: 8px;
+}
+
+.image_caption {
+    padding-left: 30%;
+    font-size: .7em;
+    margin-top: -15px;
+    display: block;
+}

docs/config/template/ngdoc/api/api.template.html

@@ -4,7 +4,7 @@
 
 {% block header %}
 <header class="api-profile-header">
-  <h2 class="md-display-1" style="margin: 0;">{{menu.currentPage|humanizeDoc}}</h2>
+  <h2 class="md-display-1" style="margin: 0;">&lt;{{menu.currentPage|humanizeDoc}} /&gt;</h2>
   {% block related_components %}{% endblock %}
 </header>
 

docs/config/template/ngdoc/lib/methods.template.html

@@ -1,6 +1,7 @@
 {%- if doc.methods %}
 <section class="api-section">
   <h2>Methods</h2>
+  <br/>
   <ul class="methods">
     {%- for method in doc.methods %}
     <li id="{$ method.name $}">
@@ -9,6 +10,8 @@ <h3 class="method-function-syntax">
       </h3>
       <div>{$ method.description | marked $}</div>
 
+      <div class="method-param-table">
+
       {% if method.params %}
       {$ paramTable(method.params) $}
       {% endif %}
@@ -22,6 +25,8 @@ <h4>Method's {% code %}this{% endcode %}</h4>
       {$ returnTable(method.returns) $}
       {% endif %}
 
+      </div>
+
     </li>
     {% endfor -%}
   </ul>

docs/config/template/ngdoc/lib/params.template.html

@@ -1,12 +1,16 @@
 {%- if doc.params %}
-  <h2>
-    {% if doc.paramType %}
-      {$ doc.paramType $}
-    {% elif doc.docType == 'directive' %}
-      Attributes
-    {% else %}
-      Arguments
-    {% endif %}
-  </h2>
-  {$ paramTable(doc.params) $}
+  <div class="api-param-section">
+    <h2>
+      {% if doc.paramType %}
+        {$ doc.paramType $}
+      {% elif doc.docType == 'directive' %}
+        Attributes
+      {% else %}
+        Arguments
+      {% endif %}
+    </h2>
+    <div class="api-param-table">
+      {$ paramTable(doc.params) $}
+    </div>
+  </div>
 {%- endif -%}

docs/config/template/ngdoc/lib/returns.template.html

@@ -1,3 +1,5 @@
 {% if doc.returns -%}
-{$ returnTable(doc.returns) $}
+<div class="api-param-table">
+  {$ returnTable(doc.returns) $}
+</div>
 {%- endif %}

src/components/button/button.js

@@ -20,10 +20,8 @@ angular
  * `<md-button>` is a button directive with optional ink ripples (default enabled).
  *
  * If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it will
- * become a `<button>` element.
- *
- * As per the [material design spec](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
- * the FAB button is in the accent color by default. The primary color palette may be used with
+ * become a `<button>` element. As per the [Material Design specifications](http://www.google.com/design/spec/style/color.html#color-ui-color-application)
+ * the FAB button background is filled with the accent color [by default]. The primary color palette may be used with
  * the `md-primary` class.
  *
  * @param {boolean=} md-no-ink If present, disable ripple ink effects.
@@ -33,25 +31,31 @@ angular
  * If no default text is found, a warning will be logged.
  *
  * @usage
+ *
+ * Regular buttons:
+ *
  * <hljs lang="html">
+ *  <md-button> Flat Button </md-button>
+ *  <md-button href="http://google.com"> Flat link </md-button>
+ *  <md-button class="md-raised"> Raised Button </md-button>
+ *  <md-button ng-disabled="true"> Disabled Button </md-button>
  *  <md-button>
- *    Flat Button
- *  </md-button>
- *  <md-button href="http://google.com">
- *    Flat link
- *  </md-button>
- *  <md-button class="md-raised">
- *    Raised Button
- *  </md-button>
- *  <md-button ng-disabled="true">
- *    Disabled Button
+ *    <md-icon md-svg-src="your/icon.svg"></md-icon>
+ *    Register Now
  *  </md-button>
+ * </hljs>
+ *
+ * FAB buttons:
+ *
+ * <hljs lang="html">
  *  <md-button class="md-fab" aria-label="FAB">
  *    <md-icon md-svg-src="your/icon.svg"></md-icon>
  *  </md-button>
+ *  <!-- mini-FAB -->
  *  <md-button class="md-fab md-mini" aria-label="Mini FAB">
  *    <md-icon md-svg-src="your/icon.svg"></md-icon>
  *  </md-button>
+ *  <!-- Button with SVG Icon -->
  *  <md-button class="md-icon-button" aria-label="Custom Icon Button">
  *    <md-icon md-svg-icon="path/to/your.svg"></md-icon>
  *  </md-button>