mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
188 lines
3.1 KiB
SCSS
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;
|
|
}
|