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

Author: brandyscarney

src/components/card/test/advanced/main.html

@@ -86,14 +86,14 @@ <h2>Card With An Inset Picture</h2>
     </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>

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

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);

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;
   }

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);

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>