javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* fix(cordova): add Sass variables for md and wp statusbar padding

fixes #8712

* style(cordova): remove extras spaces
This commit is contained in:
Brandy Carney
2016-10-18 18:03:19 -04:00
committed by Manu Mtz.-Almeida
parent 61620f8d48
commit 8921cb1290
4 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/platform/cordova.ios.scss
View File

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

6
src/platform/cordova.md.scss
View File

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

35
src/platform/cordova.scss
View File

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

6
src/platform/cordova.wp.scss
View File

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