-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(app): fix status bar padding for inset modals
- Loading branch information
1 parent
22abc37
commit 4d27680
Showing
4 changed files
with
108 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}); | ||
| } | ||
|
|
||
| > ion-content.statusbar-padding:first-child scroll-content { | ||
| padding-top: $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[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); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}); | ||
| } | ||
|
|
||
| > ion-content.statusbar-padding:first-child scroll-content { | ||
| padding-top: $cordova-ios-statusbar-padding; | ||
| } | ||
| @include toolbar-statusbar-padding($toolbar-md-height, $content-md-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); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}); | ||
| } | ||
|
|
||
| > ion-content.statusbar-padding:first-child scroll-content { | ||
| padding-top: $cordova-ios-statusbar-padding; | ||
| } | ||
| @include toolbar-statusbar-padding($toolbar-wp-height, $content-wp-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); | ||
| } | ||
| } |