tennesseegibbs
/
blueCoin-UI


			
							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);
      }
    }
  }
}