Files
2015-05-21 22:45:44 -05:00

113 lines
2.0 KiB
SCSS

html,
body {
height: 100%;
}
body {
position: relative;
overflow: hidden;
max-width: 100%;
max-height: 100%;
margin: 0;
padding: 0;
}
ion-app {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
max-width: 100%;
max-height: 100%;
margin: 0;
padding: 0;
}
ion-nav {
// container of header.toolbar-container, footer.toolbar-container and .nav-item-container
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.toolbar-container {
// container of many toolbars for each view in the ion-nav
position: relative;
width: 100%;
min-height: 4.4rem;
order: $flex-order-toolbar-top;
}
footer.toolbar-container {
order: $flex-order-toolbar-bottom;
}
ion-toolbar {
// one view's toolbar, sibling to many view toolbars inside of .toolbar-container
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.nav-item-container {
// container of many .nav-item's, each one containing one view
position: relative;
flex: 1;
order: $flex-order-view-content;
}
.tab-item-container {
// container of each content for each tab component within a tabs component
position: relative;
flex: 1;
order: $flex-order-view-content;
}
.nav-item {
// user created view, sibling to many .nav-item's, contained by .nav-item-container
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// by default .nav-item is hidden
// and the transition animation will display it
display: none;
&.show-nav-item {
display: block;
}
}
ion-content {
// content within the user created view, contained by .nav-item
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.scroll-content {
// extra div to allow overflow scrolling
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}