forked from EVOgeek/Vmeda.Online
125 lines
3.8 KiB
SCSS
125 lines
3.8 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="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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
|
|
// Do not use "contain: strict" so fullscreen iframes work.
|
|
contain: size layout style;
|
|
}
|
|
|
|
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);
|
|
}
|