// Globals // -------------------------------------------------- @import "../../themes/ionic.globals"; @import "../../themes/ionic.mixins"; // Normalize // -------------------------------------------------- @import "../../themes/normalize"; // Util // -------------------------------------------------- @import "../../themes/util"; // App // -------------------------------------------------- // All font sizes use rem 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: 62.5% !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: 2.6rem !default; /// @prop - Font size of heading level 2 $h2-font-size: 2.4rem !default; /// @prop - Font size of heading level 3 $h3-font-size: 2.2rem !default; /// @prop - Font size of heading level 4 $h4-font-size: 2rem !default; /// @prop - Font size of heading level 5 $h5-font-size: 1.8rem !default; /// @prop - Font size of heading level 6 $h6-font-size: 1.6rem !default; // Responsive Utilities // -------------------------------------------------- /// @prop - Whether to include all of the responsive utility attributes $include-responsive-utilities: true !default; /// @prop - Whether to include all of the responsive text alignment attributes $include-text-alignment-utilities: $include-responsive-utilities !default; /// @prop - Whether to include all of the responsive text transform attributes $include-text-transform-utilities: $include-responsive-utilities !default; /// @prop - Whether to include all of the responsive float attributes $include-float-element-utilities: $include-responsive-utilities !default; // Screen Breakpoints // -------------------------------------------------- /// @prop - The minimum dimensions at which your layout will change, /// adapting to different screen sizes, for use in media queries $screen-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !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 { @include margin(0); @include padding(0); position: fixed; overflow: hidden; width: 100%; max-width: 100%; height: 100%; max-height: 100%; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-user-drag: none; -ms-content-zooming: none; touch-action: manipulation; word-wrap: break-word; text-size-adjust: none; user-select: none; } // App Typography // -------------------------------------------------- a { background-color: transparent; } .enable-hover a:hover { opacity: .7; } h1, h2, h3, h4, h5, h6 { @include margin(1.6rem, null, 1rem, null); font-weight: $headings-font-weight; line-height: $headings-line-height; } [padding] { h1, h2, h3, h4, h5, h6 { &:first-child { @include margin(-.3rem, null, null, null); } } } h1 + h2, h1 + h3, h2 + h3 { @include margin(-.3rem, null, null, null); } h1 { @include margin(2rem, null, null, null); font-size: $h1-font-size; } h2 { @include margin(1.8rem, null, null, null); font-size: $h2-font-size; } h3 { font-size: $h3-font-size; } h4 { font-size: $h4-font-size; } h5 { font-size: $h5-font-size; } h6 { font-size: $h6-font-size; } small { font-size: 75%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } // Nav Container Structure // -------------------------------------------------- ion-app, ion-nav, ion-tab, ion-tabs, .app-root { @include position(0, null, null, 0); position: absolute; z-index: $z-index-page-container; display: block; width: 100%; height: 100%; } ion-nav, ion-tab, ion-tabs { overflow: hidden; } ion-tab { display: none; } ion-tab.show-tab { display: block; } ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page { contain: strict; } // Page Container Structure // -------------------------------------------------- .ion-page { @include position(0, null, null, 0); position: absolute; display: block; width: 100%; height: 100%; // do not show, but still render so we can get dimensions opacity: 0; } .ion-page.show-page { // show the page now that it's ready opacity: 1; } // Toolbar Container Structure // -------------------------------------------------- ion-header { @include position(0, null, null, 0); position: absolute; z-index: $z-index-toolbar; display: block; width: 100%; } ion-footer { @include position(null, null, 0, 0); position: absolute; z-index: $z-index-toolbar; display: block; width: 100%; } // Misc // -------------------------------------------------- [app-viewport], [overlay-portal], [nav-viewport], [tab-portal], .nav-decor { display: none; } // Text Alignment // -------------------------------------------------- @if ($include-text-alignment-utilities == true) { // Creates text alignment attributes based on screen size @each $breakpoint in map-keys($screen-breakpoints) { $infix: breakpoint-infix($breakpoint, $screen-breakpoints); @include media-breakpoint-up($breakpoint, $screen-breakpoints) { // Provide `[text-{bp}]` attributes for aligning the text based // on the breakpoint [text#{$infix}-center] { @include text-align(center, !important); } [text#{$infix}-justify] { @include text-align(justify, !important); } [text#{$infix}-start] { @include text-align(start, !important); } [text#{$infix}-end] { @include text-align(end, !important); } [text#{$infix}-left] { @include text-align(left, !important); } [text#{$infix}-right] { @include text-align(right, !important); } [text#{$infix}-nowrap] { // scss-lint:disable ImportantRule white-space: nowrap !important; } [text#{$infix}-wrap] { // scss-lint:disable ImportantRule white-space: normal !important; } } } } // Text Transformation // -------------------------------------------------- @if ($include-text-transform-utilities == true) { // Creates text transform attributes based on screen size @each $breakpoint in map-keys($screen-breakpoints) { $infix: breakpoint-infix($breakpoint, $screen-breakpoints); @include media-breakpoint-up($breakpoint, $screen-breakpoints) { // Provide `[text-{bp}]` attributes for transforming the text based // on the breakpoint [text#{$infix}-uppercase] { // scss-lint:disable ImportantRule text-transform: uppercase !important; } [text#{$infix}-lowercase] { // scss-lint:disable ImportantRule text-transform: lowercase !important; } [text#{$infix}-capitalize] { // scss-lint:disable ImportantRule text-transform: capitalize !important; } } } } // Float Elements // -------------------------------------------------- @if ($include-float-element-utilities == true) { // Creates text transform attributes based on screen size @each $breakpoint in map-keys($screen-breakpoints) { $infix: breakpoint-infix($breakpoint, $screen-breakpoints); @include media-breakpoint-up($breakpoint, $screen-breakpoints) { // Provide `[float-{bp}]` attributes for floating the element based // on the breakpoint [float#{$infix}-left] { @include float(left, !important); } [float#{$infix}-right] { @include float(right, !important); } [float#{$infix}-start] { @include float(start, !important); } [float#{$infix}-end] { @include float(end, !important); } } } }