// Globals // -------------------------------------------------- @import "../../../themes/ionic.globals"; @import "../../../themes/ionic.mixins"; // Normalize // -------------------------------------------------- @import "../../../themes/normalize"; // Util // -------------------------------------------------- @import "../../../themes/util"; // App // -------------------------------------------------- // All font sizes use px units // By default, 1rem equals 10px. For example, 1.4rem === 14px // $font-size-root value, which is on the element // is what can scale all fonts /// @prop - Font size of the root html $font-size-root: 10px !default; /// @prop - Font weight of all headings $headings-font-weight: 500 !default; /// @prop - Line height of all headings $headings-line-height: 1.2 !default; /// @prop - Font size of heading level 1 $h1-font-size: 26px !default; /// @prop - Font size of heading level 2 $h2-font-size: 24px !default; /// @prop - Font size of heading level 3 $h3-font-size: 22px !default; /// @prop - Font size of heading level 4 $h4-font-size: 20px !default; /// @prop - Font size of heading level 5 $h5-font-size: 18px !default; /// @prop - Font size of heading level 6 $h6-font-size: 16px !default; // 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%; font-size: $font-size-root; text-size-adjust: 100%; } body { width: 100%; max-width: 100%; word-wrap: break-word; user-select: none; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-user-drag: none; -ms-content-zooming: none; touch-action: manipulation; text-size-adjust: none; @include margin(0); @include padding(0); } // App Typography // -------------------------------------------------- a { background-color: transparent; } //.enable-hover a:hover { // opacity: .7; //} a:hover { cursor: pointer; opacity: 0.7; } .disable-hover a:hover { cursor: inherit; opacity: inherit; } h1, h2, h3, h4, h5, h6 { font-weight: $headings-font-weight; line-height: $headings-line-height; @include margin(16px, null, 10px, null); } h1 { font-size: $h1-font-size; @include margin(20px, null, null, null); } h2 { font-size: $h2-font-size; @include margin(18px, null, null, null); } h3 { font-size: $h3-font-size; } h4 { font-size: $h4-font-size; } h5 { font-size: $h5-font-size; } h6 { font-size: $h6-font-size; } h1 + h2, h1 + h3, h2 + h3 { @include margin(-3px, null, null, null); } [padding] { h1, h2, h3, h4, h5, h6 { &:first-child { @include margin(-3px, null, null, null); } } } small { font-size: 75%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } // Nav Container Structure // -------------------------------------------------- .ion-app, .ion-nav, .app-root { position: static; z-index: $z-index-page-container; display: block; width: 100%; @include position(0, null, null, 0); } .ion-app, .ion-nav, .app-root, .ion-page { contain: layout style; } .ion-app.disable-scroll { position: fixed; width: 100%; } // Toolbar Container Structure // -------------------------------------------------- // Header Structure // -------------------------------------------------- .ion-header { position: fixed; z-index: $z-index-toolbar; display: block; width: 100%; transition: all ease 300ms; @include position(0, null, null, 0); } .ion-header.hide-bar { transform: translateY(-100%); } /* stylelint-disable */ // place holder for pop menus #right-button-placeholder { position: absolute; right: 9px; bottom: 0; width: 30px; height: 1px; } /* stylelint-enable */ // Footer Structure // -------------------------------------------------- .ion-footer { position: fixed; z-index: $z-index-toolbar; display: block; width: 100%; transition: -webkit-transform ease 300ms; @include position(null, null, 0, 0); } .ion-footer.hide-bar { transform: translateY(100%); } // Page Container Structure // -------------------------------------------------- .ion-page { position: relative; z-index: 10; display: block; width: 100%; opacity: 1; @include position(0, null, null, 0); } .ion-box { // 将page中在页面布局absolute化 // TODO: fixed?? &.ion-page { position: absolute; height: 100%; contain: strict; .ion-header { position: absolute; } .ion-footer { position: absolute; } .ion-content { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; .scroll-content { position: absolute; top: -1px; bottom: 0; width: 100%; overflow: scroll; -webkit-overflow-scrolling: touch; } } } .fixed-content [fixed], .fixed-content [fixed-top], .fixed-content [fixed-bottom] { position: absolute; } }