Files
2015-10-10 23:52:01 -05:00

160 lines
2.7 KiB
SCSS

// Z-Index
// --------------------------------------------------
// Grouped by elements which would be siblings
$z-index-menu-overlay: 80;
$z-index-menu-backdrop: 79;
$z-index-overlay: 1000;
$z-index-click-block: 9999;
$z-index-content-section: 5;
$z-index-navbar-section: 10;
$z-index-content: 5;
$z-index-toolbar: 10;
$z-index-toolbar-background: -1;
$z-index-toolbar-border: 20;
$z-index-list-border: 50;
$z-index-backdrop: 1;
$z-index-overlay-wrapper: 10;
$z-index-item-options: 1;
// Flex Order
// --------------------------------------------------
$flex-order-view-content: 0;
$flex-order-toolbar-top: -10;
$flex-order-toolbar-bottom: 10;
$flex-order-tab-bar-navbar: -30;
$flex-order-tab-bar-top: -20;
$flex-order-tab-bar-bottom: 20;
// App Structure
// --------------------------------------------------
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
html {
width: 100%;
height: 100%;
-ms-text-size-adjust: 100%; // 1
-webkit-text-size-adjust: 100%; // 1
}
body {
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
margin: 0;
padding: 0;
word-wrap: break-word;
touch-action: manipulation;
-webkit-user-drag: none;
-ms-content-zooming: none;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
@include user-select-none();
}
ion-app {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
max-width: 100%;
max-height: 100%;
margin: 0;
padding: 0;
}
ion-nav {
height: 100%;
}
ion-pane,
ion-view.pane-view {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
ion-view.pane-view {
background: transparent;
}
ion-view {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
flex-direction: column;
background-color: $background-color;
transform: translateZ(0px);
&.show-view {
display: flex;
}
}
[no-navbar] > ion-navbar-section {
display: none;
}
ion-navbar-section {
position: relative;
min-height: 4.4rem;
z-index: $z-index-navbar-section;
}
ion-content-section {
position: relative;
z-index: $z-index-content-section;
flex: 1;
order: $flex-order-view-content;
}
[hidden],
template,
root-anchor {
display: none !important;
}