Merge branch 'feature/loading-enhancements' of https://github.com/Ter…

…adata/covalent into feature/loading-enhancements
Teradata · Jan 18, 2017 · d6e83d0 · d6e83d0
2 parents c218f67 + 8a72478
commit d6e83d0
Showing 1 changed file with 77 additions and 79 deletions.
diff --git a/src/app/components/components/material-components/material-components.component.html b/src/app/components/components/material-components/material-components.component.html
@@ -135,15 +135,15 @@
   <md-divider></md-divider>
   <md-card-content>
     <div layout="row" layout-align="start start">
-      <div layout="column" flex="50" style="padding-right: 10px;">
+      <div layout="column" flex="50" class="pad-right">
         <h3>Basic Usage</h3>
         <md-list>
           <md-list-item *ngFor="let grocery of groceries">
             <md-checkbox [checked]="grocery.bought">
               {{grocery.name}}
             </md-checkbox>
           </md-list-item>
-          <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+          <md-divider class="push-top-sm push-bottom-sm"></md-divider>
         </md-list>
         <td-highlight lang="html">
         <![CDATA[
@@ -166,15 +166,15 @@ <h3>Usage within Forms</h3>
             <md-checkbox flex="initial" [(ngModel)]="user.agreesToTOS" name="agreesToTOS">
               I agree to the terms
             </md-checkbox>
-            <button md-raised-button [disabled]="!user.agreesToTOS" style="margin-left: 10px;">Sign Up</button>
+            <button md-raised-button [disabled]="!user.agreesToTOS" class="pad-right-sm">Sign Up</button>
           </div>
-          <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+          <md-divider class="push-top-sm push-bottom-sm"></md-divider>
           <md-checkbox labelPosition="after">
             I come after my label.
           </md-checkbox>
-          <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+          <md-divider class="push-top-sm push-bottom-sm"></md-divider>
           <md-checkbox labelPosition="before">I come before my label</md-checkbox>
-          <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+          <md-divider class="push-top-sm push-bottom-sm"></md-divider>
         </form>
 
         <td-highlight lang="html">
@@ -207,9 +207,9 @@ <h3>Usage within Forms</h3>
   <md-divider></md-divider>
   <md-card-content>
     <div layout="row">
-      <div flex="50" layout="column" style="padding-right: 10px;">
+      <div flex="60" layout="column" class="pad-right-lg">
         <h3>Basic Icons</h3>
-        <div layout="row">
+        <div layout="row" layout-align="space-between center">
           <md-icon>account_circle</md-icon>
           <md-icon>help</md-icon>
           <md-icon>delete</md-icon>
@@ -221,8 +221,8 @@ <h3>Basic Icons</h3>
           <md-icon>question_answer</md-icon>
           <md-icon>schedule</md-icon>
         </div>
-        <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
-        <div layout="row">
+        <md-divider class="push-top-sm push-bottom-sm"></md-divider>
+        <div layout="row" layout-align="space-between center">
           <md-icon>thumb_up</md-icon>
           <md-icon>today</md-icon>
           <md-icon>warning</md-icon>
@@ -234,8 +234,8 @@ <h3>Basic Icons</h3>
           <md-icon>touch_app</md-icon>
           <md-icon>trending_up</md-icon>
         </div>
-        <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
-        <div layout="row">
+        <md-divider class="push-top-sm push-bottom-sm"></md-divider>
+        <div layout="row" layout-align="space-between center">
           <md-icon>view_list</md-icon>
           <md-icon>view_module</md-icon>
           <md-icon>view_quilt</md-icon>
@@ -247,32 +247,60 @@ <h3>Basic Icons</h3>
           <md-icon>playlist_add_check</md-icon>
           <md-icon>playlist_add</md-icon>
         </div>
-        <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+        <md-divider class="push-top-sm push-bottom-sm"></md-divider>
         <td-highlight lang="html">
           <![CDATA[
             <!-- Basic -->
             <md-icon>account_circle</md-icon>
           ]]>
         </td-highlight>
+        <md-divider class="push-top-sm push-bottom-sm"></md-divider>
+        <div layout="column">
+          <h3>Icon Sizes</h3>
+          <div layout="row" layout-align="space-between center" class="push-bottom-sm">
+            <md-icon class="md-18">favorite</md-icon>
+            <md-icon class="md-24">favorite</md-icon>
+            <md-icon class="md-36">favorite</md-icon>
+            <md-icon class="md-48">favorite</md-icon>
+            <button md-fab color="accent">
+              <md-icon class="md-18">shopping_cart</md-icon>
+            </button>
+            <button md-fab color="accent">
+              <md-icon class="md-24">shopping_cart</md-icon>
+            </button>
+            <button md-fab color="accent">
+              <md-icon class="md-36">shopping_cart</md-icon>
+            </button>
+          </div>
+          <td-highlight lang="html">
+            <![CDATA[
+              <!-- Icon Sizes (Default: md-24) -->
+              <md-icon class="md-18">favorite</md-icon>
+              <md-icon class="md-24">favorite</md-icon>
+              <md-icon class="md-36">favorite</md-icon>
+              <md-icon class="md-48">favorite</md-icon>
+            ]]>
+          </td-highlight>
+        </div>
       </div>
 
-      <div flex="50" layout="column">
+      <div flex="40" layout="column">
         <h3>Icons with Buttons</h3>
-        <div layout="row" layout-align="start center">
-          <button md-icon-button>
+        <div layout="row" layout-align="space-between center">
+          <button md-icon-button class="pad-right">
             <md-icon>favorite</md-icon>
           </button>
-          <button md-fab color="accent" style="margin-left: 10px;">
+          <button md-fab color="accent">
             <md-icon>shopping_cart</md-icon>
           </button>
-          <button md-mini-fab color="accent" style="margin-left: 10px;">
+          <button md-mini-fab color="accent">
             <md-icon>add</md-icon>
           </button>
-          <button md-mini-fab color="accent" disabled style="margin-left: 10px;">
+          <button md-mini-fab color="accent" disabled>
             <md-icon>backup</md-icon>
           </button>
         </div>
-        <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+        <md-divider class="push-top-sm push-bottom-sm"></md-divider>
         <td-highlight lang="html">
           <![CDATA[
             <!-- Icons and Buttons -->
@@ -292,36 +320,6 @@ <h3>Icons with Buttons</h3>
         </td-highlight>
       </div>
     </div>
-
-    <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
-
-    <div layout="column">
-      <h3>Icon Sizes</h3>
-      <div layout="row" layout-align="start end" style="margin-bottom: 15px;">
-        <md-icon class="md-18">favorite</md-icon>
-        <md-icon class="md-24" style="margin-left: 10px;">favorite</md-icon>
-        <md-icon class="md-36" style="margin-left: 10px;">favorite</md-icon>
-        <md-icon class="md-48" style="margin-left: 10px;">favorite</md-icon>
-        <button md-fab color="accent" style="margin-left: 10px;">
-          <md-icon class="md-18">shopping_cart</md-icon>
-        </button>
-        <button md-fab color="accent" style="margin-left: 10px;">
-          <md-icon class="md-24">shopping_cart</md-icon>
-        </button>
-        <button md-fab color="accent" style="margin-left: 10px;">
-          <md-icon class="md-36">shopping_cart</md-icon>
-        </button>
-      </div>
-      <td-highlight lang="html">
-        <![CDATA[
-          <!-- Icon Sizes (Default: md-24) -->
-          <md-icon class="md-18">favorite</md-icon>
-          <md-icon class="md-24">favorite</md-icon>
-          <md-icon class="md-36">favorite</md-icon>
-          <md-icon class="md-48">favorite</md-icon>
-        ]]>
-      </td-highlight>
-    </div>
   </md-card-content>
   <md-divider></md-divider>
   <md-card-actions>
@@ -443,15 +441,15 @@ <h3>Simple List</h3>
     ]]>
     </td-highlight>
 
-    <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+    <md-divider class="push-top-sm push-bottom-sm"></md-divider>
 
     <!-- Checkbox list -->
     <h3>Checkbox list</h3>
 
     <md-list>
       <template ngFor let-todo [ngForOf]="todos">
         <md-list-item>
-          <div layout="row" layout-align="start center" style="width: 100%;">
+          <div layout="row" layout-align="start center">
             <div flex>
               <md-checkbox [checked]="todo.finished">
                 {{todo.name}}
@@ -470,7 +468,7 @@ <h3>Checkbox list</h3>
       <md-list>
         <template ngFor let-todo [ngForOf]="todos">
           <md-list-item>
-            <div layout="row" layout-align="start center" style="width: 100%;">
+            <div layout="row" layout-align="start center">
               <div flex>
                 <md-checkbox [checked]="todo.finished">
                   { { todo.name } }
@@ -485,7 +483,7 @@ <h3>Checkbox list</h3>
     ]]>
     </td-highlight>
 
-    <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+    <md-divider class="push-top-sm push-bottom-sm"></md-divider>
 
     <!-- list with links (nav list) -->
     <h3>Nav list (list with links)</h3>
@@ -509,7 +507,7 @@ <h3>Nav list (list with links)</h3>
     ]]>
     </td-highlight>
 
-    <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+    <md-divider class="push-top-sm push-bottom-sm"></md-divider>
 
 
     <!-- list with Avatars-->
@@ -542,7 +540,7 @@ <h3 md-line> { {item.from} } </h3>
     ]]>
     </td-highlight>
 
-    <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+    <md-divider class="push-top-sm push-bottom-sm"></md-divider>
 
     <!-- list with Icons-->
     <h3>3 Line List Item with Icons and inset dividers</h3>
@@ -584,7 +582,7 @@ <h4 md-line> { {item.subject} } </h4>
   <md-divider></md-divider>
   <md-card-content layout="row">
 
-    <div flex="48" style="padding-right: 20px;">
+    <div flex="48" class="pad-right">
       <h3>Progress Bars</h3>
       <h4>Determinate</h4>
       <md-progress-bar mode="determinate" value="40"></md-progress-bar>
@@ -602,11 +600,11 @@ <h4>Query</h4>
       <h4>Colors</h4>
 
       <md-progress-bar mode="indeterminate" color="primary"></md-progress-bar>
-      <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+      <md-divider class="push-top-sm push-bottom-sm"></md-divider>
       <md-progress-bar mode="indeterminate" color="accent"></md-progress-bar>
-      <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+      <md-divider class="push-top-sm push-bottom-sm"></md-divider>
       <md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
-      <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+      <md-divider class="push-top-sm push-bottom-sm"></md-divider>
 
     <td-highlight lang="html">
       <![CDATA[
@@ -627,9 +625,9 @@ <h4>Query</h4>
         <h4>Colors</h4>
 
         <md-progress-bar mode="indeterminate" color="primary"></md-progress-bar>
-        <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+        <md-divider class="push-top-sm push-bottom-sm"></md-divider>
         <md-progress-bar mode="indeterminate" color="accent"></md-progress-bar>
-        <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+        <md-divider class="push-top-sm push-bottom-sm"></md-divider>
         <md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
       ]]>
       </td-highlight>
@@ -672,7 +670,7 @@ <h4>Colors</h4>
           <md-progress-spinner mode="indeterminate" color="accent"></md-progress-spinner>
           <md-progress-spinner mode="indeterminate" color="warn"></md-progress-spinner>
         </div>
-        <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+        <md-divider class="push-top-sm push-bottom-sm"></md-divider>
 
       </div>
 
@@ -720,25 +718,25 @@ <h4>Colors</h4>
   <md-divider></md-divider>
   <md-card-content layout="row">
 
-    <div flex="48" style="padding-right: 20px;">
+    <div flex="48" class="pad-right">
       <!-- Basic Radios -->
       <h3>Basic Radios</h3>
 
       <md-radio-group name="group1">
-        <md-radio-button style="padding-right:10px;" name="group1">Option 1  </md-radio-button>
-        <md-radio-button style="padding-right:10px;" name="group1">Option 2  </md-radio-button>
-        <md-radio-button style="padding-right:10px;" name="group1" disabled="true">Option 3 (disabled)  </md-radio-button>
+        <md-radio-button class="pad-right-sm" name="group1">Option 1  </md-radio-button>
+        <md-radio-button class="pad-right-sm" name="group1">Option 2  </md-radio-button>
+        <md-radio-button class="pad-right-sm" name="group1" disabled="true">Option 3 (disabled)  </md-radio-button>
       </md-radio-group>
 
-      <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+      <md-divider class="push-top-sm push-bottom-sm"></md-divider>
 
       <td-highlight lang="html">
       <![CDATA[
         <!-- Basic Radios -->
         <md-radio-group name="group1">
-          <md-radio-button style="padding-right:10px;" name="group1">Option 1  </md-radio-button>
-          <md-radio-button style="padding-right:10px;" name="group1">Option 2  </md-radio-button>
-          <md-radio-button style="padding-right:10px;" name="group1" disabled="true">Option 3 (disabled)  </md-radio-button>
+          <md-radio-button name="group1">Option 1  </md-radio-button>
+          <md-radio-button name="group1">Option 2  </md-radio-button>
+          <md-radio-button name="group1" disabled="true">Option 3 (disabled)  </md-radio-button>
         </md-radio-group>
       ]]>
       </td-highlight>
@@ -750,18 +748,18 @@ <h3>Basic Radios</h3>
       <h3>Dynamic Radios</h3>
 
       <md-radio-group name="more_options" [(ngModel)]="favoriteSeason">
-        <md-radio-button style="padding-right:10px;" *ngFor="let season of seasonOptions" name="more_options" [value]="season">
+        <md-radio-button class="pad-right-sm" *ngFor="let season of seasonOptions" name="more_options" [value]="season">
           {{season}}
         </md-radio-button>
       </md-radio-group>
       <p>Your favorite season is: <strong>{{favoriteSeason}}</strong></p>
-      <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+      <md-divider class="push-top-sm push-bottom-sm"></md-divider>
 
       <td-highlight lang="html">
       <![CDATA[
         <!-- Dynamic Radios -->
         <md-radio-group name="more_options" [(ngModel)]="favoriteSeason">
-          <md-radio-button style="padding-right:10px;" *ngFor="let season of seasonOptions" name="more_options" [value]="season">
+          <md-radio-button *ngFor="let season of seasonOptions" name="more_options" [value]="season">
             {{season}}
           </md-radio-button>
         </md-radio-group>
@@ -968,15 +966,15 @@ <h1>Second tab content</h1>
   <md-divider></md-divider>
   <md-card-content>
     <div layout="row" layout-align="start start">
-      <div layout="column" flex="50" style="padding-right: 10px;">
+      <div layout="column" flex="50" class="pad-right">
         <h3>Basic Usage</h3>
         <md-list>
           <md-list-item *ngFor="let system of systems">
             <md-slide-toggle [color]="system.color" [(ngModel)]="system.on">
               {{system.name}}
             </md-slide-toggle>
           </md-list-item>
-          <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+          <md-divider class="push-top-sm push-bottom-sm"></md-divider>
         </md-list>
         <td-highlight lang="html">
         <![CDATA[
@@ -1017,13 +1015,13 @@ <h3>Usage within Forms</h3>
             <md-slide-toggle color="accent" [(ngModel)]="house.lockHouse" name="lockHouse">
               Lock?
             </md-slide-toggle>
-            <md-icon *ngIf="house.lockHouse" style="margin-left: 10px;">lock</md-icon>
+            <md-icon *ngIf="house.lockHouse" class="pad-right-sm">lock</md-icon>
           </div>
-          <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+          <md-divider class="push-top-sm push-bottom-sm"></md-divider>
           <md-slide-toggle disabled>
             I am disabled.
           </md-slide-toggle>
-          <md-divider style="margin-top: 15px; margin-bottom: 15px;"></md-divider>
+          <md-divider class="push-top-sm push-bottom-sm"></md-divider>
         </form>
 
         <td-highlight lang="html">