mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
80 lines
2.8 KiB
SCSS
80 lines
2.8 KiB
SCSS
@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});
|
|
}
|
|
|
|
}
|