afb-client/bower_components/foundation-apps/scss/_global.scss

   1 /*
   2   GLOBAL
   3   ------
   4
   5   Global styles and settings for Foundation for Apps are stored here. This file must always
   6   be imported, no matter what.
   7
   8   Includes:
   9    -
  10 */
  11
  12 /// @Foundation.settings
  13 // Global Styles
  14 // This sets 1rem to be 16px
  15 $rem-base: 16px;
  16
  17 // The default font-size is set to 100% of the browser style sheet (usually 16px)
  18 // for compatibility with browser-based text zoom or user-set defaults.
  19
  20 // Since the typical default browser font-size is 16px, that makes the calculation for grid size.
  21 // If you want your base font-size to be different and not have it affect the grid breakpoints,
  22 // set $rem-base to $base-font-size and make sure $base-font-size is a px value.
  23 $base-font-size: 100% !default;
  24
  25 // $base-line-height is 24px while $base-font-size is 16px
  26 $base-line-height: 1.5 !default;
  27
  28 // Text selector helpers
  29 $headers: "h1,h2,h3,h4,h5,h6";
  30
  31 // We use these to define default font weights
  32 $font-weight-normal: normal !default;
  33 $font-weight-bold: bold !default;
  34
  35 // We use these to control various global styles
  36 $body-background: #fff !default;
  37 $body-font-color: #222 !default;
  38 $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
  39 $body-font-weight: $font-weight-normal !default;
  40 $body-font-style: normal !default;
  41 $body-antialiased: true;
  42
  43 // Application Colors
  44 $primary-color: #00558b !default;
  45 $secondary-color: #f1f1f1 !default;
  46 $alert-color: #F04124 !default;
  47 $info-color: #A0D3E8 !default;
  48 $success-color: #43AC6A !default;
  49 $warning-color: #F08A24 !default;
  50 $dark-color: #232323 !default;
  51 $gray: #dfdfdf !default;
  52 $gray-dark: darken($gray, 8) !default;
  53 $gray-light: lighten($gray, 8) !default;
  54
  55 // We use these to make sure border radius matches unless we want it different.
  56 $global-radius: 4px !default;
  57 $global-rounded: 1000px !default;
  58
  59 // We use this for default spacing
  60 $global-padding: 1rem !default;
  61 $global-spacing: rem-calc(15) !default;
  62 ///
  63
  64 // For internal use: a color map
  65 $foundation-colors: (
  66   primary: $primary-color,
  67   success: $success-color,
  68   warning: $warning-color,
  69   alert: $alert-color,
  70   dark: $dark-color,
  71 );
  72
  73 @include exports(global) {
  74   // Make extra sure we're using the whole window
  75   html, body {
  76     height: 100%;
  77     font-size: $base-font-size;
  78   }
  79   // Set box-sizing globally to handle padding and border widths
  80   html {
  81     box-sizing: border-box;
  82   }
  83   *, *:before, *:after {
  84     box-sizing: inherit;
  85   }
  86
  87   // Default body styles
  88   body {
  89     background: $body-background;
  90     color: $body-font-color;
  91     padding: 0;
  92     margin: 0;
  93     font-family: $body-font-family;
  94     font-weight: $body-font-weight;
  95     font-style: $body-font-style;
  96     line-height: 1;
  97     position: relative;
  98
  99     @if $body-antialiased {
 100       -webkit-font-smoothing: antialiased;
 101       -moz-osx-font-smoothing: grayscale;
 102     }
 103   }
 104
 105   img {
 106     // Grid Defaults to get images and embeds to work properly
 107     max-width: 100%;
 108     height: auto;
 109     -ms-interpolation-mode: bicubic;
 110
 111     // Get rid of gap under images by making them display: inline-block; by default
 112     display: inline-block;
 113     vertical-align: middle;
 114   }
 115
 116   // Give all anchors and interactive directives the hover cusor
 117   a, [ui-sref], [zf-open], [zf-close], [zf-toggle] {
 118     cursor: pointer;
 119   }
 120
 121   #map_canvas,
 122   .map_canvas {
 123     img,
 124     embed,
 125     object { max-width: none !important; }
 126   }
 127
 128   .padding {
 129     padding: $global-padding;
 130   }
 131 }