1 | @import "../themes/ionic.globals";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | $cordova-statusbar-padding-modal-max-width: 767px !default;
|
8 |
|
9 |
|
10 | @mixin statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding, $modal-max-width, $style-title: false) {
|
11 |
|
12 | ion-nav > .ion-page,
|
13 | ion-nav > .ion-page > ion-header,
|
14 | ion-tab > .ion-page,
|
15 | ion-tab > .ion-page > ion-header,
|
16 | ion-tabs > .ion-page.tab-subpage > ion-header,
|
17 | ion-menu > .menu-inner,
|
18 | ion-menu > .menu-inner > ion-header {
|
19 |
|
20 | @include toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
|
21 |
|
22 |
|
23 | @if ($style-title) {
|
24 | @include toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
|
25 | }
|
26 | }
|
27 |
|
28 | @media only screen and (max-width: $modal-max-width) {
|
29 | .modal-wrapper > .ion-page > ion-header {
|
30 | @include toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
|
31 |
|
32 |
|
33 | @if ($style-title) {
|
34 | @include toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
|
35 | }
|
36 | }
|
37 | }
|
38 |
|
39 | }
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | @mixin toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding) {
|
45 |
|
46 |
|
47 | > .toolbar.statusbar-padding:first-child {
|
48 | @include padding(calc(#{$cordova-statusbar-padding} + #{$toolbar-padding}), null, null, null);
|
49 | @include padding(calc(constant(safe-area-inset-top) + #{$toolbar-padding}), calc(constant(safe-area-inset-right) + #{$toolbar-padding}), null, calc(constant(safe-area-inset-left) + #{$toolbar-padding}));
|
50 |
|
51 | min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
|
52 | min-height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
|
53 | }
|
54 |
|
55 | > ion-content.statusbar-padding:first-child .scroll-content {
|
56 | @include padding($cordova-statusbar-padding, null, null, null);
|
57 | @include padding(calc(#{$cordova-statusbar-padding} + constant(safe-area-inset-top)), null, null, null);
|
58 | }
|
59 |
|
60 | > ion-content.statusbar-padding:first-child[padding] .scroll-content,
|
61 | > ion-content.statusbar-padding:first-child[padding-top] .scroll-content {
|
62 | @include padding(calc(#{$content-padding} + #{$cordova-statusbar-padding}), null, null, null);
|
63 | @include padding(calc(#{$content-padding} + constant(safe-area-inset-top)), null, null, null);
|
64 | }
|
65 |
|
66 | }
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 | @mixin toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding) {
|
73 |
|
74 | > .toolbar.statusbar-padding:first-child ion-segment,
|
75 | > .toolbar.statusbar-padding:first-child ion-title {
|
76 | @include padding($cordova-statusbar-padding, null, null, null);
|
77 | @include padding(calc(constant(safe-area-inset-top) + #{$toolbar-padding}), null, null, null);
|
78 |
|
79 | height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
|
80 | height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
|
81 |
|
82 | min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
|
83 | min-height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
|
84 | }
|
85 |
|
86 | }
|
87 |
|
88 |
|
89 | @mixin footer-safe-area($toolbar-height, $toolbar-padding) {
|
90 | .tabs .tabbar {
|
91 | @include padding(null, null, constant(safe-area-inset-bottom), null);
|
92 | }
|
93 |
|
94 | ion-footer .toolbar:last-child {
|
95 | @include padding(null, null, calc(constant(safe-area-inset-top) + #{$toolbar-padding}), null);
|
96 | height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
|
97 | min-height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
|
98 | }
|
99 | }
|