From fe11eccb460ff3a5b2b7928f8544d9ed01be73c2 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 23 Feb 2016 17:16:43 -0500
Subject: [PATCH] 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.wp.scss                  |  1 +
 ionic/components/content/content.ios.scss | 81 +++++++++++++++++++++-
 ionic/components/content/content.md.scss  | 69 +++++++++++++++----
 ionic/components/content/content.scss     | 20 ++++++
 ionic/components/content/content.wp.scss  | 83 ++++++++++++++++++++++
 ionic/themes/dark.scss                    |  3 +
 ionic/themes/default.scss                 |  3 +
 ionic/util/util.scss                      | 84 -----------------------
 8 files changed, 244 insertions(+), 100 deletions(-)
 create mode 100644 ionic/components/content/content.scss
 create mode 100644 ionic/components/content/content.wp.scss

diff --git a/ionic/components.wp.scss b/ionic/components.wp.scss
index c702695ae21..9b67b4ae572 100644
--- a/ionic/components.wp.scss
+++ b/ionic/components.wp.scss
@@ -12,6 +12,7 @@
   "components/button/button.wp",
   "components/checkbox/checkbox.wp",
   "components/chip/chip.wp",
+  "components/content/content.wp",
   "components/radio/radio.wp",
   "components/segment/segment.wp",
   "components/toolbar/toolbar.wp";
diff --git a/ionic/components/content/content.ios.scss b/ionic/components/content/content.ios.scss
index 7b507a8cf2d..d7eea214937 100644
--- a/ionic/components/content/content.ios.scss
+++ b/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;
+}
diff --git a/ionic/components/content/content.md.scss b/ionic/components/content/content.md.scss
index bc40e3358c9..6fbdc8ab54f 100644
--- a/ionic/components/content/content.md.scss
+++ b/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-top: $content-md-padding;
 }
 
-[padding-right] {
-  padding-right: $content-padding-md;
+[padding-left] {
+  padding-left: $content-md-padding;
 }
 
-[padding-bottom] {
-  padding-bottom: $content-padding-md;
+[padding-right] {
+  padding-right: $content-md-padding;
 }
 
-[padding-left] {
-  padding-left: $content-padding-md;
+[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;
 }
diff --git a/ionic/components/content/content.scss b/ionic/components/content/content.scss
new file mode 100644
index 00000000000..146cec1e31a
--- /dev/null
+++ b/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;
+}
diff --git a/ionic/components/content/content.wp.scss b/ionic/components/content/content.wp.scss
new file mode 100644
index 00000000000..e853bfabe43
--- /dev/null
+++ b/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;
+}
diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss
index be9df7aefa0..83cc6b2106f 100644
--- a/ionic/themes/dark.scss
+++ b/ionic/themes/dark.scss
@@ -24,6 +24,9 @@ $subdued-text-color:         #666 !default;
 $font-family-base:           -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
 $font-size-base:             1.4rem !default; // 1.4rem == 14px
 
+$content-padding:            16px !default;
+$content-margin:             16px !default;
+
 $toolbar-background:         #151515 !default;
 $toolbar-border-color:       map-get($colors, dark) !default;
 $toolbar-text-color:         $text-color !default;
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
index b356430b693..e0c230fdd34 100644
--- a/ionic/themes/default.scss
+++ b/ionic/themes/default.scss
@@ -24,6 +24,9 @@ $subdued-text-color:         #666 !default;
 $font-family-base:           -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
 $font-size-base:             1.4rem !default; // 1.4rem == 14px
 
+$content-padding:            16px !default;
+$content-margin:             16px !default;
+
 $toolbar-background:         #f8f8f8 !default;
 $toolbar-border-color:       #b2b2b2 !default;
 $toolbar-text-color:         $text-color !default;
diff --git a/ionic/util/util.scss b/ionic/util/util.scss
index 26813593696..a4626ee43a2 100755
--- a/ionic/util/util.scss
+++ b/ionic/util/util.scss
@@ -11,89 +11,6 @@ root-anchor {
   display: none !important;
 }
 
-
-// Content Padding
-// --------------------------------------------------
-
-$content-padding:    16px !default;
-
-
-[padding],
-[padding] > scroll-content {
-  padding: $content-padding;
-}
-
-[padding-top] {
-  padding-top: $content-padding;
-}
-
-[padding-right] {
-  padding-right: $content-padding;
-}
-
-[padding-bottom] {
-  padding-bottom: $content-padding;
-}
-
-[padding-left] {
-  padding-left: $content-padding;
-}
-
-[padding-vertical] {
-  padding-top: $content-padding;
-  padding-bottom: $content-padding;
-}
-
-[padding-horizontal] {
-  padding-right: $content-padding;
-  padding-left: $content-padding;
-}
-
-[no-padding] {
-  padding: 0;
-}
-
-// Content Margin
-// --------------------------------------------------
-
-$content-margin:    16px !default;
-
-
-[margin],
-[margin] > scroll-content {
-  margin: $content-margin;
-}
-
-[margin-top] {
-  margin-top: $content-margin;
-}
-
-[margin-right] {
-  margin-right: $content-margin;
-}
-
-[margin-bottom] {
-  margin-bottom: $content-margin;
-}
-
-[margin-left] {
-  margin-left: $content-margin;
-}
-
-[margin-vertical] {
-  margin-top: $content-margin;
-  margin-bottom: $content-margin;
-}
-
-[margin-horizontal] {
-  margin-right: $content-margin;
-  margin-left: $content-margin;
-}
-
-[no-margin] {
-  margin: 0;
-}
-
 // Focus Outline
 // --------------------------------------------------
 
@@ -171,7 +88,6 @@ $backdrop-color:      #000 !default;
 }
 
 
-
 // Click Block
 // --------------------------------------------------
 // Fill the screen to block clicks (a better pointer-events: none)