603ab4e5ac
Ionic sets the "contain" CSS property to some elements. This enables CSS containment, which changes how elements are positioned and sized, breaking fixed positioned elements, iframes in full screen mode, subtitle menus in videos and potentially more things. CSS containment is not supported in iOS and Android 4.4, so it can introduce inconsistencies across devices.
139 lines
4.1 KiB
SCSS
139 lines
4.1 KiB
SCSS
$core-sidetab-size: 60px !default;
|
|
|
|
ion-app.app-root core-ion-tabs {
|
|
.tabbar {
|
|
z-index: 101; // For some reason, the regular z-index isn't enough with our tabs, use a higher one.
|
|
|
|
.core-ion-tabs-loading {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.core-ion-tabs-loading-spinner {
|
|
.spinner circle, .spinner line {
|
|
stroke: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-badge.badge {
|
|
background-color: $ion-tabs-badge-color;
|
|
}
|
|
|
|
&[tabsplacement="bottom"] {
|
|
.ion-page > ion-content > .scroll-content {
|
|
margin-bottom: $navbar-md-height !important;
|
|
}
|
|
}
|
|
|
|
&[tabsplacement="side"] {
|
|
.tabbar {
|
|
@include float(start);
|
|
width: $core-sidetab-size;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
.tab-button {
|
|
width: 100%;
|
|
.tab-badge.badge {
|
|
@include position(calc(50% - 30px), 2px, null, null);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabbar[hidden] + .tabcontent {
|
|
width: 100%;
|
|
core-ion-tab {
|
|
@include position(0, 0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.tabcontent {
|
|
width: calc(100% - #{($core-sidetab-size)});
|
|
position: absolute;
|
|
@include position(0, 0, 0, 0);
|
|
core-ion-tab {
|
|
@include position(0, 0, 0, $core-sidetab-size);
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.scroll-content, .fixed-content {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
ion-app.app-root.ios core-ion-tabs .core-ion-tabs-loading {
|
|
min-height: $tabs-ios-tab-min-height;
|
|
}
|
|
|
|
ion-app.app-root.md core-ion-tabs .core-ion-tabs-loading {
|
|
min-height: $tabs-md-tab-min-height;
|
|
}
|
|
|
|
ion-app.app-root.wp core-ion-tabs .core-ion-tabs-loading {
|
|
min-height: $tabs-wp-tab-min-height;
|
|
}
|
|
|
|
// Copy some styles from ion-tabs and ion-tab.
|
|
core-ion-tabs, core-ion-tab {
|
|
@include position(0, null, null, 0);
|
|
|
|
position: absolute;
|
|
z-index: $z-index-page-container;
|
|
display: block;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
core-ion-tab {
|
|
display: none;
|
|
}
|
|
|
|
core-ion-tab.show-tab {
|
|
display: block;
|
|
}
|
|
|
|
@mixin core-ion-tabs-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding, $modal-max-width, $style-title: false) {
|
|
|
|
core-ion-tab > .ion-page,
|
|
core-ion-tab > .ion-page > ion-header,
|
|
core-ion-tabs > .ion-page.tab-subpage > ion-header {
|
|
@include toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $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, $toolbar-padding, $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, $toolbar-padding, $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, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
ion-app.app-root.ios {
|
|
@include core-ion-tabs-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $cordova-ios-statusbar-padding, $cordova-ios-statusbar-padding-modal-max-width, true);
|
|
}
|
|
|
|
ion-app.app-root.md {
|
|
@include core-ion-tabs-statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $cordova-md-statusbar-padding, $cordova-md-statusbar-padding-modal-max-width);
|
|
}
|
|
|
|
ion-app.app-root.wp {
|
|
@include core-ion-tabs-statusbar-padding($toolbar-wp-height, $toolbar-wp-padding, $content-wp-padding, $cordova-wp-statusbar-padding, $cordova-wp-statusbar-padding-modal-max-width);
|
|
}
|