javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): fix status bar padding for inset modals

Browse Source
This commit is contained in:
Brandy Carney
2016-05-18 21:06:29 -04:00
parent 22abc372c7
commit 4d276806cf
4 changed files with 108 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
ionic/platform/cordova.ios.scss
View File

@ -1,42 +1,25 @@
@import "../globals.ios";
@import "./cordova";
// iOS Cordova
// --------------------------------------------------
$cordova-ios-statusbar-padding: 20px !default;
$cordova-ios-statusbar-padding-modal-max-width: $cordova-statusbar-padding-modal-max-width !default;
ion-navbar-section.statusbar-padding {
height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
}
ion-navbar-section.statusbar-padding > .toolbar ion-segment,
ion-navbar-section.statusbar-padding > .toolbar ion-title,
ion-navbar-section.statusbar-padding > .toolbar {
padding-top: $cordova-ios-statusbar-padding;
height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
}
@include navbar-section-statusbar-padding($toolbar-ios-height);
@include navbar-section-title-statusbar-padding($toolbar-ios-height);
.tab-subpage,
ion-nav > ion-page,
ion-menu {
> .toolbar.statusbar-padding:first-child ion-segment,
> .toolbar.statusbar-padding:first-child ion-title,
> .toolbar.statusbar-padding:first-child {
padding-top: $cordova-ios-statusbar-padding;
height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
}
@include toolbar-statusbar-padding($toolbar-ios-height, $content-ios-padding);
@include toolbar-title-statusbar-padding($toolbar-ios-height, $content-ios-padding);
}
> ion-content.statusbar-padding:first-child scroll-content {
padding-top: $cordova-ios-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-ios-padding} + #{$cordova-ios-statusbar-padding});
@media only screen and (max-width: $cordova-ios-statusbar-padding-modal-max-width) {
.modal-wrapper > ion-page {
@include toolbar-statusbar-padding($toolbar-ios-height, $content-ios-padding);
@include toolbar-title-statusbar-padding($toolbar-ios-height, $content-ios-padding);
}
}

34
ionic/platform/cordova.md.scss
View File

@ -1,38 +1,22 @@
@import "../globals.md";
@import "./cordova";
// iOS Cordova
// Material Design on iOS with Cordova
// --------------------------------------------------
$cordova-ios-statusbar-padding: 20px !default;
$cordova-md-statusbar-padding-modal-max-width: $cordova-statusbar-padding-modal-max-width !default;
ion-navbar-section.statusbar-padding {
height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
}
ion-navbar-section.statusbar-padding > .toolbar {
padding-top: $cordova-ios-statusbar-padding;
height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
}
@include navbar-section-statusbar-padding($toolbar-md-height);
.tab-subpage,
ion-nav > ion-page,
ion-menu {
> .toolbar.statusbar-padding:first-child {
padding-top: $cordova-ios-statusbar-padding;
height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
}
@include toolbar-statusbar-padding($toolbar-md-height, $content-md-padding);
}
> ion-content.statusbar-padding:first-child scroll-content {
padding-top: $cordova-ios-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-md-padding} + #{$cordova-ios-statusbar-padding});
@media only screen and (max-width: $cordova-md-statusbar-padding-modal-max-width) {
.modal-wrapper > ion-page {
@include toolbar-statusbar-padding($toolbar-md-height, $content-md-padding);
}
}

79
ionic/platform/cordova.scss Normal file
View File

@ -0,0 +1,79 @@
@import "../globals.core";
// 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
$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) {
> .toolbar.statusbar-padding:first-child {
padding-top: $cordova-ios-statusbar-padding;
height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
}
> ion-content.statusbar-padding:first-child scroll-content {
padding-top: $cordova-ios-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});
}
}
// The navbar section should get modified height and padding-top for the status bar
// --------------------------------------------------------------------------------
@mixin navbar-section-statusbar-padding($toolbar-height) {
ion-navbar-section.statusbar-padding {
height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
}
ion-navbar-section.statusbar-padding > .toolbar {
padding-top: $cordova-ios-statusbar-padding;
height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
}
}
// iOS is the only mode that uses these mixins and they should be removed with #5036
// --------------------------------------------------------------------------------
@mixin toolbar-title-statusbar-padding($toolbar-height, $content-padding) {
> .toolbar.statusbar-padding:first-child ion-segment,
> .toolbar.statusbar-padding:first-child ion-title {
padding-top: $cordova-ios-statusbar-padding;
height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
}
}
@mixin navbar-section-title-statusbar-padding($toolbar-height) {
ion-navbar-section.statusbar-padding > .toolbar ion-segment,
ion-navbar-section.statusbar-padding > .toolbar ion-title {
padding-top: $cordova-ios-statusbar-padding;
height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
}
}

34
ionic/platform/cordova.wp.scss
View File

@ -1,38 +1,22 @@
@import "../globals.wp";
@import "./cordova";
// iOS Cordova
// Windows on iOS with Cordova
// --------------------------------------------------
$cordova-ios-statusbar-padding: 20px !default;
$cordova-wp-statusbar-padding-modal-max-width: $cordova-statusbar-padding-modal-max-width !default;
ion-navbar-section.statusbar-padding {
height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
}
ion-navbar-section.statusbar-padding > .toolbar {
padding-top: $cordova-ios-statusbar-padding;
height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
}
@include navbar-section-statusbar-padding($toolbar-wp-height);
.tab-subpage,
ion-nav > ion-page,
ion-menu {
> .toolbar.statusbar-padding:first-child {
padding-top: $cordova-ios-statusbar-padding;
height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
min-height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
}
@include toolbar-statusbar-padding($toolbar-wp-height, $content-wp-padding);
}
> ion-content.statusbar-padding:first-child scroll-content {
padding-top: $cordova-ios-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-wp-padding} + #{$cordova-ios-statusbar-padding});
@media only screen and (max-width: $cordova-wp-statusbar-padding-modal-max-width) {
.modal-wrapper > ion-page {
@include toolbar-statusbar-padding($toolbar-wp-height, $content-wp-padding);
}
}