feat(windows): add content padding/margin components for wp

also split all of the modes up so they can have different amounts of
padding/margin on their content

references #5565

ionic/components/content/content.ios.scss

@@ -1,9 +1,12 @@
 @import "../../globals.ios";
+@import "./content";
 
 // iOS Content
 // --------------------------------------------------
 
-$outer-content-ios-background-color:         #efeff4 !default;
+$content-ios-outer-background-color:    #efeff4 !default;
+$content-ios-padding:                   $content-padding !default;
+$content-ios-margin:                    $content-margin !default;
 
 
 ion-content {
@@ -11,10 +14,84 @@ ion-content {
 }
 
 .outer-content {
-  background: $outer-content-ios-background-color;
+  background: $content-ios-outer-background-color;
 }
 
 ion-nav.has-views,
 ion-tab.has-views {
   background: #000;
 }
+
+
+// iOS Content Padding
+// --------------------------------------------------
+
+[padding],
+[padding] > scroll-content {
+  padding: $content-ios-padding;
+}
+
+[padding-top] {
+  padding-top: $content-ios-padding;
+}
+
+[padding-left] {
+  padding-left: $content-ios-padding;
+}
+
+[padding-right] {
+  padding-right: $content-ios-padding;
+}
+
+[padding-bottom] {
+  padding-bottom: $content-ios-padding;
+}
+
+[padding-vertical] {
+  padding-top: $content-ios-padding;
+  padding-bottom: $content-ios-padding;
+}
+
+[padding-horizontal] {
+  padding-right: $content-ios-padding;
+  padding-left: $content-ios-padding;
+}
+
+[no-padding] {
+  padding: 0;
+}
+
+
+// iOS Content Margin
+// --------------------------------------------------
+
+[margin],
+[margin] > scroll-content {
+  margin: $content-ios-margin;
+}
+
+[margin-top] {
+  margin-top: $content-ios-margin;
+}
+
+[margin-left] {
+  margin-left: $content-ios-margin;
+}
+
+[margin-right] {
+  margin-right: $content-ios-margin;
+}
+
+[margin-bottom] {
+  margin-bottom: $content-ios-margin;
+}
+
+[margin-vertical] {
+  margin-top: $content-ios-margin;
+  margin-bottom: $content-ios-margin;
+}
+
+[margin-horizontal] {
+  margin-right: $content-ios-margin;
+  margin-left: $content-ios-margin;
+}

ionic/components/content/content.md.scss

@@ -1,42 +1,83 @@
 @import "../../globals.md";
+@import "./content";
 
-// Material Design Content Padding
+// Material Design Content
 // --------------------------------------------------
 
-$content-padding-md:    16px !default;
+$content-md-padding:              $content-padding !default;
+$content-md-margin:               $content-margin !default;
 
 
 ion-content {
   background-color: $background-md-color;
 }
 
+
+// Material Design Content Padding
+// --------------------------------------------------
+
 [padding],
 [padding] > scroll-content {
-  padding: $content-padding-md;
+  padding: $content-md-padding;
 }
 
 [padding-top] {
-  padding-top: $content-padding-md;
-}
-
-[padding-right] {
-  padding-right: $content-padding-md;
-}
-
-[padding-bottom] {
-  padding-bottom: $content-padding-md;
+  padding-top: $content-md-padding;
 }
 
 [padding-left] {
-  padding-left: $content-padding-md;
+  padding-left: $content-md-padding;
+}
+
+[padding-right] {
+  padding-right: $content-md-padding;
+}
+
+[padding-bottom] {
+  padding-bottom: $content-md-padding;
 }
 
 [padding-vertical] {
-  padding-top: $content-padding-md;
-  padding-bottom: $content-padding-md;
+  padding-top: $content-md-padding;
+  padding-bottom: $content-md-padding;
 }
 
 [padding-horizontal] {
-  padding-right: $content-padding-md;
-  padding-left: $content-padding-md;
+  padding-right: $content-md-padding;
+  padding-left: $content-md-padding;
+}
+
+
+// Material Design Content Margin
+// --------------------------------------------------
+
+[margin],
+[margin] > scroll-content {
+  margin: $content-md-margin;
+}
+
+[margin-top] {
+  margin-top: $content-md-margin;
+}
+
+[margin-left] {
+  margin-left: $content-md-margin;
+}
+
+[margin-right] {
+  margin-right: $content-md-margin;
+}
+
+[margin-bottom] {
+  margin-bottom: $content-md-margin;
+}
+
+[margin-vertical] {
+  margin-top: $content-md-margin;
+  margin-bottom: $content-md-margin;
+}
+
+[margin-horizontal] {
+  margin-right: $content-md-margin;
+  margin-left: $content-md-margin;
 }

ionic/components/content/content.scss

@@ -0,0 +1,20 @@
+@import "../../globals.core";
+
+// Content
+// --------------------------------------------------
+
+
+// Content Padding
+// --------------------------------------------------
+
+[no-padding] {
+  padding: 0;
+}
+
+
+// Content Margin
+// --------------------------------------------------
+
+[no-margin] {
+  margin: 0;
+}

ionic/components/content/content.wp.scss

@@ -0,0 +1,83 @@
+@import "../../globals.wp";
+@import "./content";
+
+// Windows Content
+// --------------------------------------------------
+
+$content-wp-padding:              $content-padding !default;
+$content-wp-margin:               $content-margin !default;
+
+
+ion-content {
+  background-color: $background-wp-color;
+}
+
+
+// Windows Content Padding
+// --------------------------------------------------
+
+[padding],
+[padding] > scroll-content {
+  padding: $content-wp-padding;
+}
+
+[padding-top] {
+  padding-top: $content-wp-padding;
+}
+
+[padding-left] {
+  padding-left: $content-wp-padding;
+}
+
+[padding-right] {
+  padding-right: $content-wp-padding;
+}
+
+[padding-bottom] {
+  padding-bottom: $content-wp-padding;
+}
+
+[padding-vertical] {
+  padding-top: $content-wp-padding;
+  padding-bottom: $content-wp-padding;
+}
+
+[padding-horizontal] {
+  padding-right: $content-wp-padding;
+  padding-left: $content-wp-padding;
+}
+
+
+// Windows Content Margin
+// --------------------------------------------------
+
+[margin],
+[margin] > scroll-content {
+  margin: $content-wp-margin;
+}
+
+[margin-top] {
+  margin-top: $content-wp-margin;
+}
+
+[margin-left] {
+  margin-left: $content-wp-margin;
+}
+
+[margin-right] {
+  margin-right: $content-wp-margin;
+}
+
+[margin-bottom] {
+  margin-bottom: $content-wp-margin;
+}
+
+[margin-vertical] {
+  margin-top: $content-wp-margin;
+  margin-bottom: $content-wp-margin;
+}
+
+[margin-horizontal] {
+  margin-right: $content-wp-margin;
+  margin-left: $content-wp-margin;
+}