docs(tabs): clean up the dynamic tabs demo (#11439)

remove inline styles that make the example harder to read
improve SCSS and remove unused rules
fix adjustOffset() JSDoc to mark param as optional

Author: Splaktar

src/components/tabs/demoDynamicTabs/index.html

@@ -4,19 +4,22 @@
       <md-tab ng-repeat="tab in tabs"
               ng-disabled="tab.disabled"
               label="{{tab.title}}">
-        <div class="demo-tab tab{{$index%4}}" style="padding: 25px; text-align: center;">
+        <div class="demo-tab tab{{$index%4}}">
           <div ng-bind="tab.content"></div>
           <br/>
-          <md-button class="md-primary md-raised" ng-click="removeTab( tab )" ng-disabled="tabs.length <= 1">Remove Tab</md-button>
+          <md-button class="md-primary md-raised" ng-click="removeTab( tab )"
+                     ng-disabled="tabs.length <= 1">
+            Remove Tab
+          </md-button>
         </div>
       </md-tab>
     </md-tabs>
   </md-content>
 
-  <form ng-submit="addTab(tTitle,tContent)" layout="column" class="md-padding" style="padding-top: 0;">
-    <div layout="row" layout-sm="column">
-      <div flex style="position: relative;">
-        <h2 class="md-subhead" style="position: absolute; bottom: 0; left: 0; margin: 0; font-weight: 500; text-transform: uppercase; line-height: 35px; white-space: nowrap;">Add a new Tab:</h2>
+  <form ng-submit="addTab(tTitle,tContent)" layout="column" class="md-padding">
+    <div layout="row" layout-xs="column">
+      <div flex>
+        <h2 class="md-subhead">Add a new Tab:</h2>
       </div>
       <md-input-container>
         <label for="label">Label</label>
@@ -26,8 +29,10 @@ <h2 class="md-subhead" style="position: absolute; bottom: 0; left: 0; margin: 0;
         <label for="content">Content</label>
         <input type="text" id="content" ng-model="tContent">
       </md-input-container>
-      <md-button class="add-tab md-primary md-raised" ng-disabled="!tTitle || !tContent" type="submit" style="margin-right: 0;">Add Tab</md-button>
+      <md-button class="add-tab md-primary md-raised" ng-disabled="!tTitle || !tContent"
+                 type="submit">
+        Add Tab
+      </md-button>
     </div>
   </form>
-
 </div>

src/components/tabs/demoDynamicTabs/script.js

@@ -32,17 +32,21 @@
       previous = null;
     $scope.tabs = tabs;
     $scope.selectedIndex = 0;
-    $scope.$watch('selectedIndex', function(current, old){
+    $scope.$watch('selectedIndex', function(current, old) {
       previous = selected;
       selected = tabs[current];
-      if ( old + 1 && (old != current)) $log.debug('Goodbye ' + previous.title + '!');
-      if ( current + 1 )                $log.debug('Hello ' + selected.title + '!');
+      if (old + 1 && (old != current)) {
+        $log.debug('Goodbye ' + previous.title + '!');
+      }
+      if (current + 1) {
+        $log.debug('Hello ' + selected.title + '!');
+      }
     });
-    $scope.addTab = function (title, view) {
+    $scope.addTab = function(title, view) {
       view = view || title + " Content View";
-      tabs.push({ title: title, content: view, disabled: false});
+      tabs.push({title: title, content: view, disabled: false});
     };
-    $scope.removeTab = function (tab) {
+    $scope.removeTab = function(tab) {
       var index = tabs.indexOf(tab);
       tabs.splice(index, 1);
     };

src/components/tabs/demoDynamicTabs/style.scss

@@ -2,29 +2,45 @@ md-content {
   h1:first-child {
     margin-top: 0;
   }
-}
-md-input-container {
-  padding-bottom: 0;
-}
-.remove-tab {
-  margin-bottom: 40px;
-}
-.demo-tab > div > div {
-  padding: 25px;
-  box-sizing: border-box;
-}
-.edit-form input {
-  width: 100%;
-}
-md-tab[disabled] {
-  opacity: 0.5;
-}
-label {
-  text-align: left;
-}
-.long > input {
-  width: 264px;
-}
-.md-button.add-tab {
-  transform: translateY(5px);
+  md-tabs {
+    .demo-tab {
+      padding: 25px;
+      text-align: center;
+
+      &> div > div {
+        padding: 25px;
+        box-sizing: border-box;
+      }
+    }
+    md-tab {
+      &[disabled] {
+        opacity: 0.5;
+      }
+    }
+  }
+  form {
+    padding-top: 0;
+
+    div[flex] {
+      position: relative;
+
+      h2.md-subhead {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        margin: 0;
+        font-weight: 500;
+        text-transform: uppercase;
+        line-height: 35px;
+        white-space: nowrap;
+      }
+    }
+    md-button.add-tab {
+      margin-right: 0;
+      transform: translateY(5px);
+    }
+    md-input-container {
+      padding-bottom: 0;
+    }
+  }
 }

src/components/tabs/js/tabsController.js

@@ -726,7 +726,7 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
 
   /**
    * Forces the pagination to move the focused tab into view.
-   * @param {number} index of tab to have its offset adjusted
+   * @param {number=} index of tab to have its offset adjusted
    */
   function adjustOffset (index) {
     var elements = getElements();