From abc7395428c264c82be2a8ab3c028cd78bca9ad8 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 2 Dec 2016 12:56:19 -0500
Subject: [PATCH] fix(content): prefix utility attributes with ion-app and the
 mode

this makes the utility attribute take precedence over the individual
component classes and makes it work per mode again so the
padding/margin presets can be changed based on the mode

closes #8765
---
 src/components/card/test/advanced/main.html   |  4 +-
 src/components/content/content.ios.scss       |  4 +-
 src/components/content/content.md.scss        |  4 +-
 src/components/content/content.scss           | 68 +++++++++----------
 src/components/content/content.wp.scss        |  4 +-
 .../toolbar/test/scenarios/main.html          |  4 ++
 6 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/components/card/test/advanced/main.html b/src/components/card/test/advanced/main.html
index 72bf20663b..81b2768bf3 100644
--- a/src/components/card/test/advanced/main.html
+++ b/src/components/card/test/advanced/main.html
@@ -86,14 +86,14 @@
     </ion-grid>
   </ion-card>
 
-  <ion-card>
+  <ion-card no-margin>
 
     <div>
       <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </div>
 
     <ion-card-content>
-      This card was breaking the border radius.
+      ion-card[no-margin] This card was breaking the border radius.
     </ion-card-content>
 
     <ion-grid>
diff --git a/src/components/content/content.ios.scss b/src/components/content/content.ios.scss
index 27c45f0720..c80b9e7d91 100644
--- a/src/components/content/content.ios.scss
+++ b/src/components/content/content.ios.scss
@@ -46,13 +46,13 @@ $content-ios-transition-background:     #000 !default;
 // iOS Content Padding
 // --------------------------------------------------
 
-@include content-padding($content-ios-padding);
+@include content-padding('ios', $content-ios-padding);
 
 
 // iOS Content Margin
 // --------------------------------------------------
 
-@include content-margin($content-ios-margin);
+@include content-margin('ios', $content-ios-margin);
 
 
 // iOS Content Scroll
diff --git a/src/components/content/content.md.scss b/src/components/content/content.md.scss
index 00a3e506fe..7673098010 100644
--- a/src/components/content/content.md.scss
+++ b/src/components/content/content.md.scss
@@ -16,10 +16,10 @@
 // Material Design Content Padding
 // --------------------------------------------------
 
-@include content-padding($content-md-padding);
+@include content-padding('md', $content-md-padding);
 
 
 // Material Design Content Margin
 // --------------------------------------------------
 
-@include content-margin($content-md-margin);
+@include content-margin('md', $content-md-margin);
diff --git a/src/components/content/content.scss b/src/components/content/content.scss
index 625d8a2535..544a717cb5 100644
--- a/src/components/content/content.scss
+++ b/src/components/content/content.scss
@@ -84,45 +84,45 @@ ion-content.js-scroll > .scroll-content {
 // Content Padding
 // --------------------------------------------------
 
-[no-padding],
-[no-padding] .scroll-content {
+ion-app [no-padding],
+ion-app [no-padding] .scroll-content {
   padding: 0;
 }
 
-@mixin content-padding($content-padding) {
-  [padding],
-  [padding] .scroll-content {
+@mixin content-padding($mode, $content-padding) {
+  ion-app.#{$mode} [padding],
+  ion-app.#{$mode} [padding] .scroll-content {
     padding: $content-padding;
   }
 
-  [padding-top],
-  [padding-top] .scroll-content {
+  ion-app.#{$mode} [padding-top],
+  ion-app.#{$mode} [padding-top] .scroll-content {
     padding-top: $content-padding;
   }
 
-  [padding-left],
-  [padding-left] .scroll-content {
+  ion-app.#{$mode} [padding-left],
+  ion-app.#{$mode} [padding-left] .scroll-content {
     padding-left: $content-padding;
   }
 
-  [padding-right],
-  [padding-right] .scroll-content {
+  ion-app.#{$mode} [padding-right],
+  ion-app.#{$mode} [padding-right] .scroll-content {
     padding-right: $content-padding;
   }
 
-  [padding-bottom],
-  [padding-bottom] .scroll-content {
+  ion-app.#{$mode} [padding-bottom],
+  ion-app.#{$mode} [padding-bottom] .scroll-content {
     padding-bottom: $content-padding;
   }
 
-  [padding-vertical],
-  [padding-vertical] .scroll-content {
+  ion-app.#{$mode} [padding-vertical],
+  ion-app.#{$mode} [padding-vertical] .scroll-content {
     padding-top: $content-padding;
     padding-bottom: $content-padding;
   }
 
-  [padding-horizontal],
-  [padding-horizontal] .scroll-content {
+  ion-app.#{$mode} [padding-horizontal],
+  ion-app.#{$mode} [padding-horizontal] .scroll-content {
     padding-right: $content-padding;
     padding-left: $content-padding;
   }
@@ -132,45 +132,45 @@ ion-content.js-scroll > .scroll-content {
 // Content Margin
 // --------------------------------------------------
 
-[no-margin],
-[no-margin] .scroll-content {
+ion-app [no-margin],
+ion-app [no-margin] .scroll-content {
   margin: 0;
 }
 
-@mixin content-margin($content-margin) {
-  [margin],
-  [margin] .scroll-content {
+@mixin content-margin($mode, $content-margin) {
+  ion-app.#{$mode} [margin],
+  ion-app.#{$mode} [margin] .scroll-content {
     margin: $content-margin;
   }
 
-  [margin-top],
-  [margin-top] .scroll-content {
+  ion-app.#{$mode} [margin-top],
+  ion-app.#{$mode} [margin-top] .scroll-content {
     margin-top: $content-margin;
   }
 
-  [margin-left],
-  [margin-left] .scroll-content {
+  ion-app.#{$mode} [margin-left],
+  ion-app.#{$mode} [margin-left] .scroll-content {
     margin-left: $content-margin;
   }
 
-  [margin-right],
-  [margin-right] .scroll-content {
+  ion-app.#{$mode} [margin-right],
+  ion-app.#{$mode} [margin-right] .scroll-content {
     margin-right: $content-margin;
   }
 
-  [margin-bottom],
-  [margin-bottom] .scroll-content {
+  ion-app.#{$mode} [margin-bottom],
+  ion-app.#{$mode} [margin-bottom] .scroll-content {
     margin-bottom: $content-margin;
   }
 
-  [margin-vertical],
-  [margin-vertical] .scroll-content {
+  ion-app.#{$mode} [margin-vertical],
+  ion-app.#{$mode} [margin-vertical] .scroll-content {
     margin-top: $content-margin;
     margin-bottom: $content-margin;
   }
 
-  [margin-horizontal],
-  [margin-horizontal] .scroll-content {
+  ion-app.#{$mode} [margin-horizontal],
+  ion-app.#{$mode} [margin-horizontal] .scroll-content {
     margin-right: $content-margin;
     margin-left: $content-margin;
   }
diff --git a/src/components/content/content.wp.scss b/src/components/content/content.wp.scss
index 179efd9114..ed5549594e 100644
--- a/src/components/content/content.wp.scss
+++ b/src/components/content/content.wp.scss
@@ -16,10 +16,10 @@
 // Windows Content Padding
 // --------------------------------------------------
 
-@include content-padding($content-wp-padding);
+@include content-padding('wp', $content-wp-padding);
 
 
 // Windows Content Margin
 // --------------------------------------------------
 
-@include content-margin($content-wp-margin);
+@include content-margin('wp', $content-wp-margin);
diff --git a/src/components/toolbar/test/scenarios/main.html b/src/components/toolbar/test/scenarios/main.html
index d0978f5a3c..61fd96ccdb 100644
--- a/src/components/toolbar/test/scenarios/main.html
+++ b/src/components/toolbar/test/scenarios/main.html
@@ -1,5 +1,9 @@
 
 <ion-content>
+  <ion-toolbar no-padding>
+    <ion-title>This should have no padding</ion-title>
+  </ion-toolbar>
+
   <ion-toolbar no-border-top>
     <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
   </ion-toolbar>