Files
2015-10-29 15:31:59 -05:00

188 lines
3.1 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-navbar-section: 10;
$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-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();
background-color: $background-color;
}
ion-app,
ion-nav,
ion-tabs {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
ion-navbar-section {
display: block;
width: 100%;
min-height: 50px;
}
ion-content-section {
display: block;
flex: 1;
position: relative;
width: 100%;
height: 100%;
}
ion-page {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateZ(0);
}
ion-content {
position: relative;
display: block;
width: 100%;
height: 100%;
flex: 1;
background-color: $background-color;
}
scroll-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
ion-tab-bar {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 50px;
}
ion-tab-section {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
ion-page.tab-subpage {
position: fixed;
z-index: 10;
}
ion-navbar {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 50px;
z-index: $z-index-navbar-section;
}
ion-navbar-section ion-navbar.toolbar {
position: absolute;
}
ion-toolbar {
display: block;
width: 100%;
height: 50px;
}
ion-toolbar[position=bottom] {
bottom: 0;
z-index: $z-index-toolbar;
}