mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
138 lines
2.5 KiB
SCSS
138 lines
2.5 KiB
SCSS
|
|
// Z-Index
|
|
// --------------------------------------------------
|
|
// Grouped by elements which would be siblings
|
|
|
|
$z-index-aside-overlay: 80 !default;
|
|
$z-index-aside-backdrop: 79 !default;
|
|
$z-index-overlay: 1000 !default;
|
|
$z-index-click-block: 9999 !default;
|
|
|
|
$z-index-content-container: 5 !default;
|
|
$z-index-navbar-container: 10 !default;
|
|
|
|
$z-index-content: 5 !default;
|
|
$z-index-toolbar: 10 !default;
|
|
$z-index-swipe-handle: 15 !default;
|
|
|
|
$z-index-toolbar-border: 20 !default;
|
|
$z-index-list-border: 50 !default;
|
|
|
|
$z-index-backdrop: 1;
|
|
$z-index-overlay-wrapper: 10;
|
|
|
|
|
|
|
|
// Flex Order
|
|
// --------------------------------------------------
|
|
|
|
$flex-order-view-content: 0 !default;
|
|
|
|
$flex-order-toolbar-top: -10 !default;
|
|
$flex-order-toolbar-bottom: 10 !default;
|
|
|
|
$flex-order-tab-bar-top: -30 !default;
|
|
$flex-order-tab-bar-bottom: 30 !default;
|
|
|
|
|
|
|
|
// App Structure
|
|
// --------------------------------------------------
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
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-touch-callout: none;
|
|
-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;
|
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
@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 {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.nav-item {
|
|
display: none;
|
|
|
|
&.show-view {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.navbar-container {
|
|
position: relative;
|
|
min-height: 4.4rem;
|
|
z-index: $z-index-navbar-container;
|
|
}
|
|
|
|
.content-container {
|
|
position: relative;
|
|
z-index: $z-index-content-container;
|
|
flex: 1;
|
|
order: $flex-order-view-content;
|
|
}
|
|
|
|
[hidden],
|
|
template,
|
|
root-anchor {
|
|
display: none !important;
|
|
}
|