mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
107 lines
2.0 KiB
SCSS
107 lines
2.0 KiB
SCSS
html {
|
|
height: 100%;
|
|
}
|
|
|
|
[ion-app] {
|
|
@include flex-display();
|
|
@include 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%;
|
|
|
|
@include flex-display();
|
|
@include flex-direction(column);
|
|
}
|
|
|
|
.toolbar-container {
|
|
// container of many toolbars for each view in the .nav
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 50px;
|
|
@include flex-order($flex-order-toolbar-top);
|
|
}
|
|
|
|
footer.toolbar-container {
|
|
@include flex-order($flex-order-toolbar-bottom);
|
|
}
|
|
|
|
.toolbar {
|
|
// one view's toolbar, sibling to many view toolbars insde 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;
|
|
@include flex(1);
|
|
@include flex-order($flex-order-view-content);
|
|
}
|
|
|
|
.tab-pane-container {
|
|
// container of each content for each tab component within a tabs component
|
|
@include flex(1);
|
|
position: relative;
|
|
width: 100%;
|
|
@include flex-order($flex-order-view-content);
|
|
}
|
|
|
|
.nav-item-cover-parent {
|
|
// .nav-item that should completely cover siblings and parent
|
|
top: -50px;
|
|
height: 100vh;
|
|
}
|
|
|
|
.nav-item {
|
|
// by default .nav-item is hidden
|
|
// and the transition animation will display it
|
|
display: none;
|
|
}
|
|
|
|
.nav-item,
|
|
.nav-item-child {
|
|
// user created view, contained by .nav-item
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
ion-content {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.scroll-content {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow-y: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
}
|