123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431 |
-
- // 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 <html> 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);
- }
- }
- }
- }
|