From c2d56d86230c9b5a538df11dfbb9fb06ef52e04c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 8 Oct 2015 15:15:20 -0400
Subject: [PATCH] refactor(padding): changed padding to attributes

Updated demos. Closes #266
---
 demos/component-docs/actionSheet/actionSheet.html |  2 +-
 demos/component-docs/buttons/block.html           |  3 +--
 demos/component-docs/buttons/buttons.html         |  4 +---
 demos/component-docs/buttons/icons.html           |  6 +-----
 demos/component-docs/buttons/outline.html         |  6 +-----
 demos/component-docs/buttons/round.html           |  6 +-----
 demos/component-docs/buttons/sizes.html           |  6 +-----
 demos/component-docs/forms/forms.html             |  6 +-----
 demos/component-docs/icons/icons.html             |  6 +-----
 demos/component-docs/main.html                    |  8 ++++----
 demos/component-docs/menus/menus.html             |  6 +-----
 demos/component-docs/modals/modals.html           |  6 +-----
 demos/component-docs/popups/popups.html           |  2 +-
 ionic/components/button/button.scss               |  4 ++--
 ionic/components/content/content.scss             | 14 ++++++--------
 ionic/components/content/modes/md.scss            | 14 ++++++--------
 16 files changed, 30 insertions(+), 69 deletions(-)

diff --git a/demos/component-docs/actionSheet/actionSheet.html b/demos/component-docs/actionSheet/actionSheet.html
index 3a4444307f..8d6d280d64 100644
--- a/demos/component-docs/actionSheet/actionSheet.html
+++ b/demos/component-docs/actionSheet/actionSheet.html
@@ -2,7 +2,7 @@
   <ion-title>Action Sheet</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header components-demo padding">
+<ion-content padding class="has-header components-demo">
     <button block (click)="openMenu()">
       Show Actionsheet
     </button>
diff --git a/demos/component-docs/buttons/block.html b/demos/component-docs/buttons/block.html
index f5177f5944..75bda108b3 100644
--- a/demos/component-docs/buttons/block.html
+++ b/demos/component-docs/buttons/block.html
@@ -2,7 +2,7 @@
   <ion-title>Block Buttons</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header components-demo padding">
+<ion-content padding class="has-header components-demo">
   <p>
     <button block>Default</button>
   </p>
@@ -23,4 +23,3 @@
     <button dark block>Dark</button>
   </p>
 </ion-content>
-
diff --git a/demos/component-docs/buttons/buttons.html b/demos/component-docs/buttons/buttons.html
index 56c7b8a8b3..bb2582ec93 100644
--- a/demos/component-docs/buttons/buttons.html
+++ b/demos/component-docs/buttons/buttons.html
@@ -2,7 +2,7 @@
   <ion-title>Buttons</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header components-demo padding">
+<ion-content padding class="has-header components-demo">
   <p>
     <button>Default</button>
   </p>
@@ -23,5 +23,3 @@
     <button dark>Dark</button>
   </p>
 </ion-content>
-
-
diff --git a/demos/component-docs/buttons/icons.html b/demos/component-docs/buttons/icons.html
index fcdf5ba799..5a86bcb036 100644
--- a/demos/component-docs/buttons/icons.html
+++ b/demos/component-docs/buttons/icons.html
@@ -3,7 +3,7 @@
   <ion-title>Icon Buttons</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header components-demo padding">
+<ion-content padding class="has-header components-demo">
   <p>
     <button>
       <icon home></icon>
@@ -38,7 +38,3 @@
   </p>
 
 </ion-content>
-
-
-
-
diff --git a/demos/component-docs/buttons/outline.html b/demos/component-docs/buttons/outline.html
index 9413d1aff9..18a689b69f 100644
--- a/demos/component-docs/buttons/outline.html
+++ b/demos/component-docs/buttons/outline.html
@@ -2,7 +2,7 @@
   <ion-title>Outline Buttons</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header components-demo padding">
+<ion-content padding class="has-header components-demo">
   <p>
     <button outline>Default</button>
   </p>
@@ -23,7 +23,3 @@
     <button dark outline>Dark</button>
   </p>
 </ion-content>
-
-
-
-
diff --git a/demos/component-docs/buttons/round.html b/demos/component-docs/buttons/round.html
index 61be74abbb..bb1bbaf3e2 100644
--- a/demos/component-docs/buttons/round.html
+++ b/demos/component-docs/buttons/round.html
@@ -2,7 +2,7 @@
   <ion-title>Round Buttons</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header components-demo padding">
+<ion-content padding class="has-header components-demo">
   <p>
     <button round>Default</button>
   </p>
@@ -23,7 +23,3 @@
     <button dark round>Dark</button>
   </p>
 </ion-content>
-
-
-
-
diff --git a/demos/component-docs/buttons/sizes.html b/demos/component-docs/buttons/sizes.html
index b1d996a92d..bf1cf01908 100644
--- a/demos/component-docs/buttons/sizes.html
+++ b/demos/component-docs/buttons/sizes.html
@@ -2,7 +2,7 @@
   <ion-title>Button Sizes</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header components-demo padding">
+<ion-content padding class="has-header components-demo">
   <p>
     <button small>Default</button>
   </p>
@@ -23,7 +23,3 @@
     <button dark large>Dark</button>
   </p>
 </ion-content>
-
-
-
-
diff --git a/demos/component-docs/forms/forms.html b/demos/component-docs/forms/forms.html
index aa18cfbe9a..3a2ac65291 100644
--- a/demos/component-docs/forms/forms.html
+++ b/demos/component-docs/forms/forms.html
@@ -12,12 +12,8 @@
         <input ng-control="lastName" type="text" placeholder="Last Name">
       </ion-input>
     </ion-list>
-    <div class="padding">
+    <div padding>
       <button block type="submit">Create Account</button>
     </div>
   </form>
 </ion-content>
-
-
-
-
diff --git a/demos/component-docs/icons/icons.html b/demos/component-docs/icons/icons.html
index f328076f9d..bb034e3479 100644
--- a/demos/component-docs/icons/icons.html
+++ b/demos/component-docs/icons/icons.html
@@ -3,7 +3,7 @@
   <ion-title>Icons</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header padding components-icons">
+<ion-content class="has-header components-icons">
 
   <ion-row>
     <ion-col><icon ionic></icon></ion-col>
@@ -72,7 +72,3 @@
   </ion-row>
 
 </ion-content>
-
-
-
-
diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html
index 607d451811..b183b3c6c4 100644
--- a/demos/component-docs/main.html
+++ b/demos/component-docs/main.html
@@ -123,7 +123,7 @@
       <button dark outline>Dark</button>
     </p>
 
-  </section>  
+  </section>
 
   <section id="round-buttons" [ng-class]="{hidden: component.title !== 'Round Buttons' }" class="section-padding">
 
@@ -158,7 +158,7 @@
     </p>
 
   </section>
-  
+
 
   <section id="button-sizes" [ng-class]="{hidden: component.title !== 'Button Sizes' }" class="section-padding">
 
@@ -220,7 +220,7 @@
     </p>
 
   </section>
-  
+
 
 
   <section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">
@@ -476,7 +476,7 @@
           <input ng-control="lastName" type="text" placeholder="Last Name">
         </ion-input>
       </ion-list>
-      <div class="padding">
+      <div padding>
         <button block type="submit">Create Account</button>
       </div>
     </form>
diff --git a/demos/component-docs/menus/menus.html b/demos/component-docs/menus/menus.html
index 51705e2f64..6adb99d5e6 100644
--- a/demos/component-docs/menus/menus.html
+++ b/demos/component-docs/menus/menus.html
@@ -3,10 +3,6 @@
   <ion-title>Menus</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header padding">
+<ion-content padding class="has-header">
   TODO
 </ion-content>
-
-
-
-
diff --git a/demos/component-docs/modals/modals.html b/demos/component-docs/modals/modals.html
index 572380a046..d24cbb9ab1 100644
--- a/demos/component-docs/modals/modals.html
+++ b/demos/component-docs/modals/modals.html
@@ -3,12 +3,8 @@
   <ion-title>Modals</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header padding">
+<ion-content padding class="has-header">
    <button block (click)="openModal()">
     Show Modal
   </button>
 </ion-content>
-
-
-
-
diff --git a/demos/component-docs/popups/popups.html b/demos/component-docs/popups/popups.html
index 1398388f0b..3babd71e5f 100644
--- a/demos/component-docs/popups/popups.html
+++ b/demos/component-docs/popups/popups.html
@@ -3,7 +3,7 @@
   <ion-title>Popups</ion-title>
 </ion-navbar>
 
-<ion-content class="has-header padding">
+<ion-content padding class="has-header">
   <button block (click)="showPopup()">
     Show Popup
   </button>
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index a89c8b3f2a..eeb28cb16d 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -121,8 +121,8 @@ a[button] {
   text-decoration: none;
 }
 
-.padding > button[block]:first-child,
-.padding > [button][block]:first-child {
+[padding] > button[block]:first-child,
+[padding] > [button][block]:first-child {
   margin-top: 0;
 }
 
diff --git a/ionic/components/content/content.scss b/ionic/components/content/content.scss
index 35c1f0278a..e6b71c8744 100644
--- a/ionic/components/content/content.scss
+++ b/ionic/components/content/content.scss
@@ -33,35 +33,33 @@ scroll-content {
 $content-padding:    16px !default;
 
 
-.padding,
 [padding],
-.padding > scroll-content,
 [padding] > scroll-content {
   padding: $content-padding;
 }
 
-.padding-top {
+[padding-top] {
   padding-top: $content-padding;
 }
 
-.padding-right {
+[padding-right] {
   padding-right: $content-padding;
 }
 
-.padding-bottom {
+[padding-bottom] {
   padding-bottom: $content-padding;
 }
 
-.padding-left {
+[padding-left] {
   padding-left: $content-padding;
 }
 
-.padding-vertical {
+[padding-vertical] {
   padding-top: $content-padding;
   padding-bottom: $content-padding;
 }
 
-.padding-horizontal {
+[padding-horizontal] {
   padding-right: $content-padding;
   padding-left: $content-padding;
 }
diff --git a/ionic/components/content/modes/md.scss b/ionic/components/content/modes/md.scss
index 64e33ab07b..e45f52027c 100644
--- a/ionic/components/content/modes/md.scss
+++ b/ionic/components/content/modes/md.scss
@@ -5,35 +5,33 @@
 $content-padding-md:    16px !default;
 
 
-.padding,
 [padding],
-.padding > scroll-content,
 [padding] > scroll-content {
   padding: $content-padding-md;
 }
 
-.padding-top {
+[padding-top] {
   padding-top: $content-padding-md;
 }
 
-.padding-right {
+[padding-right] {
   padding-right: $content-padding-md;
 }
 
-.padding-bottom {
+[padding-bottom] {
   padding-bottom: $content-padding-md;
 }
 
-.padding-left {
+[padding-left] {
   padding-left: $content-padding-md;
 }
 
-.padding-vertical {
+[padding-vertical] {
   padding-top: $content-padding-md;
   padding-bottom: $content-padding-md;
 }
 
-.padding-horizontal {
+[padding-horizontal] {
   padding-right: $content-padding-md;
   padding-left: $content-padding-md;
 }