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

@@ -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";

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-top: $content-md-padding;
-}
-
-[padding-right] {
-  padding-right: $content-padding-md;
-}
-
-[padding-bottom] {
-  padding-bottom: $content-padding-md;
 }
 
 [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-top: $content-md-padding;
-  padding-bottom: $content-padding-md;
+  padding-bottom: $content-md-padding;
 }
 
 [padding-horizontal] {
-  padding-right: $content-padding-md;
+  padding-right: $content-md-padding;
-  padding-left: $content-padding-md;
+  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;
+}

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;

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;

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)