fix(cordova): add Sass variables for md and wp statusbar padding (#8788)

* fix(cordova): add Sass variables for md and wp statusbar padding fixes #8712 * style(cordova): remove extras spaces
ionic-team · Oct 18, 2016 · 8921cb1 · 8921cb1
1 parent 61620f8
commit 8921cb1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 22 deletions.
diff --git a/src/platform/cordova.ios.scss b/src/platform/cordova.ios.scss
@@ -3,9 +3,13 @@
 // iOS Cordova
 // --------------------------------------------------
 
+/// @prop - Height of the Statusbar
+$cordova-ios-statusbar-padding:                         20px !default;
+
+/// @prop - The breakpoint when a modal becomes inset
 $cordova-ios-statusbar-padding-modal-max-width:         $cordova-statusbar-padding-modal-max-width !default;
 
 // Cordova mixins are in the main cordova file
 .ios {
-  @include statusbar-padding($toolbar-ios-height, $content-ios-padding, $cordova-ios-statusbar-padding-modal-max-width, true);
+  @include statusbar-padding($toolbar-ios-height, $content-ios-padding, $cordova-ios-statusbar-padding, $cordova-ios-statusbar-padding-modal-max-width, true);
 }
diff --git a/src/platform/cordova.md.scss b/src/platform/cordova.md.scss
@@ -3,10 +3,14 @@
 // Material Design on iOS with Cordova
 // --------------------------------------------------
 
+/// @prop - Height of the Statusbar
+$cordova-md-statusbar-padding:                         20px !default;
+
+/// @prop - The breakpoint when a modal becomes inset
 $cordova-md-statusbar-padding-modal-max-width:         $cordova-statusbar-padding-modal-max-width !default;
 
 // Cordova mixins are in the main cordova file
 .md {
-  @include statusbar-padding($toolbar-md-height, $content-md-padding, $cordova-md-statusbar-padding-modal-max-width);
+  @include statusbar-padding($toolbar-md-height, $content-md-padding, $cordova-md-statusbar-padding, $cordova-md-statusbar-padding-modal-max-width);
 }
 
diff --git a/src/platform/cordova.scss b/src/platform/cordova.scss
@@ -3,14 +3,11 @@
 // Cordova Status Bar Padding iOS Platform
 // --------------------------------------------------------------------------------
 
-// The height of the ios statusbar
-$cordova-ios-statusbar-padding:                     20px   !default;
-
-// The breakpoint when a modal becomes inset
+/// @prop - The breakpoint when a modal becomes inset
 $cordova-statusbar-padding-modal-max-width:         767px !default;
 
 
-@mixin statusbar-padding($toolbar-height, $content-padding, $modal-max-width, $style-title: false) {
+@mixin statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding, $modal-max-width, $style-title: false) {
 
   ion-nav > .ion-page,
   ion-nav > .ion-page > ion-header,
@@ -19,21 +16,21 @@ $cordova-statusbar-padding-modal-max-width:         767px !default;
   ion-menu > .menu-inner,
   ion-menu > .menu-inner > ion-header {
 
-    @include toolbar-statusbar-padding($toolbar-height, $content-padding);
+    @include toolbar-statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding);
 
     // If we should style the title elements in the toolbar
     @if ($style-title) {
-      @include toolbar-title-statusbar-padding($toolbar-height, $content-padding);
+      @include toolbar-title-statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding);
     }
   }
 
   @media only screen and (max-width: $modal-max-width) {
     .modal-wrapper > .ion-page > ion-header {
-      @include toolbar-statusbar-padding($toolbar-height, $content-padding);
+      @include toolbar-statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding);
 
       // If we should style the title elements in the toolbar
       @if ($style-title) {
-        @include toolbar-title-statusbar-padding($toolbar-height, $content-padding);
+        @include toolbar-title-statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding);
       }
     }
   }
@@ -43,22 +40,22 @@ $cordova-statusbar-padding-modal-max-width:         767px !default;
 // The first-child should get modified padding-top for the status bar
 // --------------------------------------------------------------------------------
 
-@mixin toolbar-statusbar-padding($toolbar-height, $content-padding) {
+@mixin toolbar-statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding) {
 
   > .toolbar.statusbar-padding:first-child {
-    padding-top: $cordova-ios-statusbar-padding;
+    padding-top: $cordova-statusbar-padding;
 
-    height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
-    min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
+    height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
+    min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
   }
 
   > ion-content.statusbar-padding:first-child .scroll-content {
-    padding-top: $cordova-ios-statusbar-padding;
+    padding-top: $cordova-statusbar-padding;
   }
 
   > ion-content.statusbar-padding:first-child[padding] .scroll-content,
   > ion-content.statusbar-padding:first-child[padding-top] .scroll-content {
-    padding-top: calc(#{$content-padding} + #{$cordova-ios-statusbar-padding});
+    padding-top: calc(#{$content-padding} + #{$cordova-statusbar-padding});
   }
 
 }
@@ -67,14 +64,14 @@ $cordova-statusbar-padding-modal-max-width:         767px !default;
 // iOS is the only mode that uses this mixin and it should be removed with #5036
 // --------------------------------------------------------------------------------
 
-@mixin toolbar-title-statusbar-padding($toolbar-height, $content-padding) {
+@mixin toolbar-title-statusbar-padding($toolbar-height, $content-padding, $cordova-statusbar-padding) {
 
   > .toolbar.statusbar-padding:first-child ion-segment,
   > .toolbar.statusbar-padding:first-child ion-title {
-    padding-top: $cordova-ios-statusbar-padding;
+    padding-top: $cordova-statusbar-padding;
 
-    height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
-    min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
+    height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
+    min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
   }
 
 }
diff --git a/src/platform/cordova.wp.scss b/src/platform/cordova.wp.scss
@@ -3,9 +3,13 @@
 // Windows on iOS with Cordova
 // --------------------------------------------------
 
+/// @prop - Height of the Statusbar
+$cordova-wp-statusbar-padding:                         20px !default;
+
+/// @prop - The breakpoint when a modal becomes inset
 $cordova-wp-statusbar-padding-modal-max-width:         $cordova-statusbar-padding-modal-max-width !default;
 
 // Cordova mixins are in the main cordova file
 .wp {
-  @include statusbar-padding($toolbar-wp-height, $content-wp-padding, $cordova-wp-statusbar-padding-modal-max-width);
+  @include statusbar-padding($toolbar-wp-height, $content-wp-padding, $cordova-wp-statusbar-padding, $cordova-wp-statusbar-padding-modal-max-width);
 }