express_admin 1.1.0 → 1.2.0

data/vendor/gems/foundation_apps_styles/vendor/assets/iconic/share-boxed.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="iconic iconic-share-boxed" width="128" height="128" viewBox="0 0 128 128">
+  <g class="iconic-metadata">
+    <title>Share Boxed</title>
+  </g>
+  <g class="iconic-share-boxed-lg iconic-container iconic-lg" data-width="128" data-height="112" display="inline" transform="translate(0 8)">
+    <path stroke="#000" stroke-width="8" stroke-linecap="square" d="M108 56v49c0 1.657-1.343 3-3 3h-98c-1.657 0-3-1.343-3-3v-98c0-1.657 1.343-3 3-3h37" class="iconic-share-boxed-box iconic-property-accent iconic-property-stroke" fill="none" />
+    <path d="M128 26l-32-20v8h-2c-54 0-78 24.872-78 72 8.25-31.75 26-48 66-48 7.731 0 11.862 0 14 0v8l32-20z" class="iconic-share-boxed-arrow iconic-property-fill" />
+  </g>
+  <g class="iconic-share-boxed-md iconic-container iconic-md" data-width="32" data-height="29" display="none" transform="scale(4) translate(0 1)">
+    <path stroke="#000" stroke-width="3" stroke-linecap="square" d="M27.5 17.5v9c0 .552-.448 1-1 1h-24c-.552 0-1-.448-1-1v-24c0-.552.448-1 1-1h8" class="iconic-share-boxed-box iconic-property-accent iconic-property-stroke" fill="none" />
+    <path d="M32 7.333l-8-6.333v3c-13 0-18 6.218-18 18 2.063-7.938 8-12 16-12 .9 0 1.536 0 2 0v3l8-5.667z" class="iconic-share-boxed-arrow iconic-property-fill" />
+  </g>
+  <g class="iconic-share-boxed-sm iconic-container iconic-sm" data-width="16" data-height="14" display="none" transform="scale(8) translate(0 1)">
+    <path stroke="#000" stroke-width="2" stroke-linecap="square" d="M13 11v1.5c0 .276-.224.5-.5.5h-11c-.276 0-.5-.224-.5-.5v-11c0-.276.224-.5.5-.5h3.5" class="iconic-share-boxed-box iconic-property-accent iconic-property-stroke" fill="none" />
+    <path d="M16 4l-4-4v2c-4.418 0-8 3.582-8 8 0-2.209 3-4 5-4 1.201 0 2.304 0 3 0v2l4-4z" class="iconic-share-boxed-arrow iconic-property-fill" />
+  </g>
+</svg>

data/vendor/gems/foundation_apps_styles/vendor/assets/iconic/star.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="iconic iconic-star" width="128" height="128" viewBox="0 0 128 128">
+  <g class="iconic-metadata">
+    <title>Star</title>
+  </g>
+  <g class="iconic-star-lg iconic-container iconic-lg" data-width="128" data-height="122" display="inline" transform="translate(0 3)">
+    <path class="iconic-property-fill" d="M88.537 74.838l39.463-28.838h-48.918l-15.082-46-15.082 46h-48.918l39.463 28.838-15.463 47.162 40-29.231 40 29.231z" />
+  </g>
+  <g class="iconic-star-md iconic-container iconic-md" data-width="32" data-height="31" display="none" transform="scale(4)">
+    <path class="iconic-property-fill" d="M22.185 19.173l9.815-7.173h-12.129l-3.871-12-3.871 12h-12.129l9.815 7.173-3.815 11.827 10-7.308 10 7.308z" />
+  </g>
+  <g class="iconic-star-sm iconic-container iconic-sm" data-width="16" data-height="16" display="none" transform="scale(8)">
+    <path class="iconic-property-fill" d="M11 10l5-4h-6l-2-6-2 6h-6l5 4-2 6 5-4 5.004 4z" />
+  </g>
+</svg>

data/vendor/gems/foundation_apps_styles/vendor/assets/iconic/thumb.svg

@@ -0,0 +1,38 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" data-icon="thumb" width="128" height="128" class="iconic iconic-thumb" viewBox="0 0 128 128">
+  <g><title>Thumb</title></g>
+  <g data-width="126" data-height="128" class="iconic-lg iconic-container" display="inline" transform="translate(1)">
+    <g class="iconic-thumbs-up">
+      <path d="M0 52l10 76h22v-76h-32zm26 72c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" class="iconic-thumbs-up-cuff iconic-property-accent iconic-property-fill"/>
+      <path d="M117 54h-27c-5 0-9-4.5-9-9s5-15 5-31v-5c0-5-4-9-9-9h-6c-1.7 0-3 1.3-3 3v11c0 12.1-11.6 27.2-19.3 34.7-3.3 3.4-7.7 5.3-12.7 5.3v68s8 4 20 4h43c3.7 0 6.9-2.3 8.3-5.5 0 0 15-42.1 18.1-54.5.4-1.4.6-2.5.6-3 0-5.1-4-9-9-9z" class="iconic-thumbs-up-hand iconic-property-fill"/>
+    </g>
+    <g class="iconic-thumbs-down" display="none">
+      <path d="M10 0l-10 76h32v-76h-22zm16 8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" class="iconic-thumbs-down-cuff iconic-property-accent iconic-property-fill"/>
+      <path d="M125.4 62c-3.1-12.4-18.1-54.5-18.1-54.5-1.4-3.2-4.6-5.5-8.3-5.5h-43l-20 4v68c5 0 9.4 1.9 12.7 5.3 7.7 7.5 19.3 22.6 19.3 34.7v11c0 1.7 1.3 3 3 3h6c5 0 9-4 9-9v-5c0-16-5-26.5-5-31s4-9 9-9h27c5 0 9-3.9 9-9 0-.5-.2-1.6-.6-3z" class="iconic-thumbs-down-hand iconic-property-fill"/>
+    </g>
+  </g>
+  <g data-width="32" data-height="32" class="iconic-md iconic-container" display="none" transform="scale(4)">
+    <g class="iconic-thumbs-up">
+      <path d="M0 13l2 19h5v-19h-7zm5 18c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" class="iconic-thumbs-up-cuff iconic-property-accent iconic-property-fill"/>
+      <path d="M29.7 13h-7.2c-1.2 0-2.2-1.1-2.2-2.3s1.7-3.7 1.7-6.7v-1.5c0-1.4-1.1-2.5-2.5-2.5h-1.8c-.4 0-.7.3-.7.8v2.8c0 3-2.9 6.3-4.8 8.2-.9.7-2 1.2-3.2 1.2v17s2 1 5 1h11.2c.9 0 1.7-.6 2.1-1.4 0 0 3.8-10.5 4.5-13.6.1-.4.1-.6.1-.8.1-1.2-.9-2.2-2.2-2.2z" class="iconic-thumbs-up-hand iconic-property-fill"/>
+    </g>
+    <g class="iconic-thumbs-down" display="none">
+      <path d="M2 0l-2 19h7v-19h-5zm3 3c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" class="iconic-thumbs-down-cuff iconic-property-accent iconic-property-fill"/>
+      <path d="M31.9 16c-.8-3.1-4.5-13.6-4.5-13.6-.4-.8-1.2-1.4-2.1-1.4h-11.3l-5 1v17c1.2 0 2.3.5 3.2 1.3 1.9 1.9 4.8 5.1 4.8 8.2v2.8c0 .4.3.8.8.8h1.8c1.4 0 2.5-1.1 2.5-2.5v-1.5c0-3-1.7-5.6-1.7-6.7s1.4-2.4 2.6-2.4h6.8c1.2 0 2.2-1 2.2-2.2 0-.2 0-.4-.1-.8z" class="iconic-thumbs-down-hand iconic-property-fill"/>
+    </g>
+  </g>
+  <g data-width="14" data-height="14" class="iconic-sm iconic-container" display="none" transform="scale(8) translate(1 1)">
+    <g class="iconic-thumbs-up">
+      <path class="iconic-thumbs-up-cuff iconic-property-accent iconic-property-fill" d="M0 6h3v8h-3z"/>
+      <path d="M13 6h-3c-.6 0-1-.5-1-1s.8-3.2 1-3.7c.1-.5-.2-1.1-.7-1.3-.5-.1-1 .2-1.3.7-.3.5-2.2 4.3-2.6 4.7s-.8.6-1.4.6v8h7c.4 0 .8-.3.9-.6 0 0 2.1-5.8 2.1-6.4s-.4-1-1-1z" class="iconic-thumbs-up-hand iconic-property-fill"/>
+    </g>
+    <g class="iconic-thumbs-down" display="none">
+      <path class="iconic-thumbs-down-cuff iconic-property-accent iconic-property-fill" d="M0 0h3v8h-3z"/>
+      <path d="M11.9.6c-.1-.3-.5-.6-.9-.6h-7v8c.6 0 1 .2 1.4.6.4.4 2.3 4.2 2.6 4.7.3.5.8.8 1.3.7.5-.2.8-.7.7-1.3-.2-.5-1-3.2-1-3.7s.4-1 1-1h3c.6 0 1-.4 1-1l-2.1-6.4z" class="iconic-thumbs-down-hand iconic-property-fill"/>
+    </g>
+  </g>
+<script class="iconic-api" type="application/ecmascript">
+//<![CDATA[
+var iconicApis=window._Iconic?window._Iconic.smartIconApis:{};iconicApis["thumb"]=iconicApis["thumb"]||function(t){var e=function(e){t.setAttribute("data-state",e);var i,r,n=t.querySelectorAll(".iconic-thumbs-up"),a=t.querySelectorAll(".iconic-thumbs-down");i=r="none","down"===e?r="inline":i="inline";for(var c=0;c<n.length;c++)n[c].setAttribute("display",i),a[c].setAttribute("display",r)},i=function(){var i=t.getAttribute("data-state");i&&e(i)};return{update:i,setState:e}};
+//]]>
+</script>
+</svg>

data/vendor/gems/foundation_apps_styles/vendor/assets/iconic/zoom.svg

@@ -0,0 +1,56 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" data-icon="zoom" width="128" height="128" class="iconic iconic-zoom" viewBox="0 0 128 128">
+  <g><title>Zoom</title></g>
+  <defs>
+    <clipPath id="iconic-size-lg-zoom-in-clip-0">
+      <path d="M95.7 83.7l-6.7 6.7-1.4-1.4 6.7-6.7-4.3-4.3-12 12 38 38 12-12z"/>
+    </clipPath>
+    <clipPath id="iconic-size-lg-zoom-out-clip-0">
+      <path d="M95.7 83.7l-6.7 6.7-1.4-1.4 6.7-6.7-4.3-4.3-12 12 38 38 12-12z"/>
+    </clipPath>
+  </defs>
+  <g data-width="128" data-height="128" class="iconic-lg iconic-container" display="inline">
+    <g class="iconic-zoom-in">
+      <path stroke="#000" stroke-width="8" stroke-miterlimit="10" class="iconic-zoom-in-handle iconic-zoom-in-handle-connector iconic-property-stroke" d="M85 85l-7.9-7.9" fill="none"/>
+      <path d="M126.9 117.1l-9.9 9.9c-.6.6-1.5.6-2.1 0l-35.8-35.9c-.6-.6-.6-1.5 0-2.1l9.9-9.9c.6-.6 1.5-.6 2.1 0l35.9 35.9c.5.5.5 1.5-.1 2.1z" clip-path="url(#iconic-size-lg-zoom-in-clip-0)" class="iconic-zoom-in-handle iconic-property-fill"/>
+      <circle stroke="#000" stroke-width="8" stroke-miterlimit="10" cx="46" cy="46" r="42" class="iconic-zoom-in-rim iconic-property-stroke" fill="none"/>
+      <path stroke="#000" stroke-width="4" stroke-linecap="square" stroke-miterlimit="10" class="iconic-zoom-in-plus iconic-property-accent iconic-property-stroke" d="M46 34v24m12-12h-24" fill="none"/>
+    </g>
+    <g class="iconic-zoom-out" display="none">
+      <path stroke="#000" stroke-width="8" stroke-miterlimit="10" class="iconic-zoom-out-handle iconic-zoom-out-handle-connector iconic-property-stroke" d="M85 85l-7.9-7.9" fill="none"/>
+      <path d="M126.9 117.1l-9.9 9.9c-.6.6-1.5.6-2.1 0l-35.8-35.9c-.6-.6-.6-1.5 0-2.1l9.9-9.9c.6-.6 1.5-.6 2.1 0l35.9 35.9c.5.5.5 1.5-.1 2.1z" clip-path="url(#iconic-size-lg-zoom-out-clip-0)" class="iconic-zoom-out-handle iconic-property-fill"/>
+      <circle stroke="#000" stroke-width="8" stroke-miterlimit="10" cx="46" cy="46" r="42" class="iconic-zoom-out-rim iconic-property-stroke" fill="none"/>
+      <path stroke="#000" stroke-width="4" stroke-linecap="square" stroke-miterlimit="10" class="iconic-zoom-out-minus iconic-property-accent iconic-property-stroke" d="M58 46h-24" fill="none"/>
+    </g>
+  </g>
+  <g data-width="32" data-height="32" class="iconic-md iconic-container" display="none" transform="scale(4)">
+    <g class="iconic-zoom-in">
+      <path fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" class="iconic-zoom-in-handle iconic-zoom-in-handle-connector iconic-property-stroke" d="M19.5 19.6l9.4 9.4"/>
+      <circle stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="12" cy="12" r="10.5" class="iconic-zoom-in-rim iconic-property-stroke" fill="none"/>
+      <path d="M23.6 20.4l-3.3 3.3c-.2.2-.2.5 0 .7l7.3 7.3c.2.2.5.2.7 0l3.3-3.3c.2-.2.2-.5 0-.7l-7.3-7.3c-.1-.2-.5-.2-.7 0z" class="iconic-zoom-in-handle iconic-property-fill"/>
+      <path stroke="#000" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" class="iconic-zoom-in-plus iconic-property-accent iconic-property-stroke" d="M12 8v8m4-4h-8" fill="none"/>
+    </g>
+    <g class="iconic-zoom-out" display="none">
+      <path fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" class="iconic-zoom-out-handle iconic-zoom-out-handle-connector iconic-property-stroke" d="M19.5 19.6l9.4 9.4"/>
+      <circle stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="12" cy="12" r="10.5" class="iconic-zoom-out-rim iconic-property-stroke" fill="none"/>
+      <path d="M23.6 20.4l-3.3 3.3c-.2.2-.2.5 0 .7l7.3 7.3c.2.2.5.2.7 0l3.3-3.3c.2-.2.2-.5 0-.7l-7.3-7.3c-.1-.2-.5-.2-.7 0z" class="iconic-zoom-out-handle iconic-property-fill"/>
+      <path stroke="#000" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" class="iconic-zoom-out-minus iconic-property-accent iconic-property-stroke" d="M16 12h-8" fill="none"/>
+    </g>
+  </g>
+  <g data-width="16" data-height="16" class="iconic-sm iconic-container" display="none" transform="scale(8)" stroke="#000" stroke-miterlimit="10" fill="none">
+    <g class="iconic-zoom-in">
+      <path stroke-width="3" stroke-linecap="round" class="iconic-zoom-in-handle iconic-property-stroke" d="M11 11l3.5 3.5"/>
+      <circle stroke-width="2" cx="6.5" cy="6.5" r="5.5" class="iconic-zoom-in-rim iconic-property-stroke"/>
+      <path stroke-linecap="square" class="iconic-zoom-in-plus iconic-property-accent iconic-property-stroke" d="M6.5 4.5v4m2-2h-4"/>
+    </g>
+    <g class="iconic-zoom-out" display="none">
+      <path stroke-width="3" stroke-linecap="round" class="iconic-zoom-out-handle iconic-property-stroke" d="M11 11l3.5 3.5"/>
+      <circle stroke-width="2" cx="6.5" cy="6.5" r="5.5" class="iconic-zoom-out-rim iconic-property-stroke"/>
+      <path stroke-linecap="square" class="iconic-zoom-out-minus iconic-property-accent iconic-property-stroke" d="M8.5 6.5h-4"/>
+    </g>
+  </g>
+<script class="iconic-api" type="application/ecmascript">
+//<![CDATA[
+var iconicApis=window._Iconic?window._Iconic.smartIconApis:{};iconicApis["zoom"]=iconicApis["zoom"]||function(t){var e=function(e){t.setAttribute("data-state",e);var i,r,n=t.querySelectorAll(".iconic-zoom-in"),a=t.querySelectorAll(".iconic-zoom-out");i=r="none","out"===e?r="inline":i="inline";for(var c=0;c<n.length;c++)n[c].setAttribute("display",i),a[c].setAttribute("display",r)},i=function(){var i=t.getAttribute("data-state");i&&e(i)};return{update:i,setState:e}};
+//]]>
+</script>
+</svg>

data/vendor/gems/foundation_apps_styles/vendor/assets/stylesheets/_global.scss

@@ -0,0 +1,131 @@
+/*
+  GLOBAL
+  ------
+
+  Global styles and settings for Foundation for Apps are stored here. This file must always
+  be imported, no matter what.
+
+  Includes:
+   -
+*/
+
+/// @Foundation.settings
+// Global Styles
+// This sets 1rem to be 16px
+$rem-base: 16px;
+
+// The default font-size is set to 100% of the browser style sheet (usually 16px)
+// for compatibility with browser-based text zoom or user-set defaults.
+
+// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
+// If you want your base font-size to be different and not have it affect the grid breakpoints,
+// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
+$base-font-size: 100% !default;
+
+// $base-line-height is 24px while $base-font-size is 16px
+$base-line-height: 1.5 !default;
+
+// Text selector helpers
+$headers: "h1,h2,h3,h4,h5,h6";
+
+// We use these to define default font weights
+$font-weight-normal: normal !default;
+$font-weight-bold: bold !default;
+
+// We use these to control various global styles
+$body-background: #fff !default;
+$body-font-color: #222 !default;
+$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$body-font-weight: $font-weight-normal !default;
+$body-font-style: normal !default;
+$body-antialiased: true;
+
+// Application Colors
+$primary-color: #00558b !default;
+$secondary-color: #f1f1f1 !default;
+$alert-color: #F04124 !default;
+$info-color: #A0D3E8 !default;
+$success-color: #43AC6A !default;
+$warning-color: #F08A24 !default;
+$dark-color: #232323 !default;
+$gray: #dfdfdf !default;
+$gray-dark: darken($gray, 8) !default;
+$gray-light: lighten($gray, 8) !default;
+
+// We use these to make sure border radius matches unless we want it different.
+$global-radius: 4px !default;
+$global-rounded: 1000px !default;
+
+// We use this for default spacing
+$global-padding: 1rem !default;
+$global-spacing: rem-calc(15) !default;
+///
+
+// For internal use: a color map
+$foundation-colors: (
+  primary: $primary-color,
+  success: $success-color,
+  warning: $warning-color,
+  alert: $alert-color,
+  dark: $dark-color,
+);
+
+@include exports(global) {
+  // Make extra sure we're using the whole window
+  html, body {
+    height: 100%;
+    font-size: $base-font-size;
+  }
+  // Set box-sizing globally to handle padding and border widths
+  html {
+    box-sizing: border-box;
+  }
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+
+  // Default body styles
+  body {
+    background: $body-background;
+    color: $body-font-color;
+    padding: 0;
+    margin: 0;
+    font-family: $body-font-family;
+    font-weight: $body-font-weight;
+    font-style: $body-font-style;
+    line-height: 1;
+    position: relative;
+
+    @if $body-antialiased {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }
+
+  img {
+    // Grid Defaults to get images and embeds to work properly
+    max-width: 100%;
+    height: auto;
+    -ms-interpolation-mode: bicubic;
+
+    // Get rid of gap under images by making them display: inline-block; by default
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  // Give all anchors and interactive directives the hover cusor
+  a, [ui-sref], [zf-open], [zf-close], [zf-toggle] {
+    cursor: pointer;
+  }
+
+  #map_canvas,
+  .map_canvas {
+    img,
+    embed,
+    object { max-width: none !important; }
+  }
+
+  .padding {
+    padding: $global-padding;
+  }
+}

data/vendor/gems/foundation_apps_styles/vendor/assets/stylesheets/_includes.scss

@@ -0,0 +1,33 @@
+/// @Foundation.settings
+// CSS Exports
+// Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS.
+
+$include-css: (
+  accordion: true,
+  action-sheet: true,
+  block-list: true,
+  button: true,
+  button-group: true,
+  card: true,
+  coloring: true,
+  extras: true,
+  forms: true,
+  grid: true,
+  iconic: true,
+  label: true,
+  badge: true,
+  list: true,
+  menu-bar: true,
+  modal: true,
+  motion: true,
+  notification: true,
+  off-canvas: true,
+  panel: true,
+  popup: true,
+  switch: true,
+  tabs: true,
+  title-bar: true,
+  typography: true,
+  utilities: true,
+);
+///

data/vendor/gems/foundation_apps_styles/vendor/assets/stylesheets/_settings.scss

@@ -0,0 +1,614 @@
+//  FOUNDATION FOR APPS SETTINGS
+//  ----------------------------
+//
+//  Table of Contents:
+//
+//  1.  CSS Exports
+//  2.  Global Styles
+//  3.  Breakpoints
+//  4.  Typography
+//  5.  Grid
+//  6.  Button
+//  7.  Accordion
+//  8.  Action Sheet
+//  9.  Block List
+//  10. Button Group
+//  11. Card
+//  12. Extras
+//  13. Forms
+//  14. Iconic
+//  15. Label
+//  16. Menu Bar
+//  17. Modal
+//  18. Motion UI
+//  19. Notification
+//  20. Off-canvas
+//  21. Panel
+//  22. Popup
+//  23. Switch
+//  24. Tabs
+//  25. Title Bar
+
+@import "helpers/functions";
+
+// 1. CSS Exports
+// - - - - - - - - - - - - - - -
+
+// Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS.
+
+// $include-css: (
+//   accordion: true,
+//   action-sheet: true,
+//   block-list: true,
+//   button: true,
+//   button-group: true,
+//   card: true,
+//   coloring: true,
+//   extras: true,
+//   forms: true,
+//   grid: true,
+//   iconic: true,
+//   label: true,
+//   badge: true,
+//   list: true,
+//   menu-bar: true,
+//   modal: true,
+//   motion: true,
+//   notification: true,
+//   off-canvas: true,
+//   panel: true,
+//   popup: true,
+//   switch: true,
+//   tabs: true,
+//   title-bar: true,
+//   typography: true,
+//   utilities: true,
+// ); 
+
+// 2. Global Styles
+// - - - - - - - - - - - - - - -
+
+// This sets 1rem to be 16px
+// $rem-base: 16px;
+
+// The default font-size is set to 100% of the browser style sheet (usually 16px)
+// for compatibility with browser-based text zoom or user-set defaults.
+
+// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
+// If you want your base font-size to be different and not have it affect the grid breakpoints,
+// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
+// $base-font-size: 100%;
+
+// $base-line-height is 24px while $base-font-size is 16px
+// $base-line-height: 1.5;
+
+// Text selector helpers
+// $headers: "h1,h2,h3,h4,h5,h6";
+
+// We use these to define default font weights
+// $font-weight-normal: normal;
+// $font-weight-bold: bold;
+
+// We use these to control various global styles
+// $body-background: #fff;
+// $body-font-color: #222;
+// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+// $body-font-weight: $font-weight-normal;
+// $body-font-style: normal;
+// $body-antialiased: true;
+
+// Application Colors
+// $primary-color: #00558b;
+// $secondary-color: #f1f1f1;
+// $alert-color: #F04124;
+// $info-color: #A0D3E8;
+// $success-color: #43AC6A;
+// $warning-color: #F08A24;
+// $dark-color: #232323;
+// $gray: #dfdfdf;
+// $gray-dark: darken($gray, 8);
+// $gray-light: lighten($gray, 8);
+
+// We use these to make sure border radius matches unless we want it different.
+// $global-radius: 4px;
+// $global-rounded: 1000px;
+
+// We use this for default spacing
+// $global-padding: 1rem;
+// $global-spacing: rem-calc(15); 
+
+// 3. Breakpoints
+// - - - - - - - - - - - - - - -
+
+// These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles }
+// $breakpoints: (
+//   small: rem-calc(0),
+//   medium: rem-calc(640),
+//   large: rem-calc(1200),
+//   xlarge: rem-calc(1440),
+//   xxlarge: rem-calc(1920),
+// );
+
+// All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on.
+// $breakpoint-classes: (small medium large); 
+
+// 4. Typography
+// - - - - - - - - - - - - - - -
+
+// We use these to control header font styles
+// $header-font-family: $body-font-family;
+// $header-font-weight: $font-weight-normal;
+// $header-font-style: $font-weight-normal;
+// $header-font-color: #222;
+// $header-line-height: 1.4;
+// $header-top-margin: .2rem;
+// $header-bottom-margin: .5rem;
+// $header-text-rendering: optimizeLegibility;
+
+// We use these to control header font sizes
+// $h1-font-size: rem-calc(44);
+// $h2-font-size: rem-calc(37);
+// $h3-font-size: rem-calc(27);
+// $h4-font-size: rem-calc(23);
+// $h5-font-size: rem-calc(18);
+// $h6-font-size: 1rem;
+
+// We use these to control header size reduction on small screens
+// $h1-font-reduction: rem-calc(10);
+// $h2-font-reduction: rem-calc(10);
+// $h3-font-reduction: rem-calc(5);
+// $h4-font-reduction: rem-calc(5);
+// $h5-font-reduction: 0;
+// $h6-font-reduction: 0;
+
+// These control how subheaders are styled.
+// $subheader-line-height: 1.4;
+// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
+// $subheader-font-weight: $font-weight-normal;
+// $subheader-top-margin: .2rem;
+// $subheader-bottom-margin: .5rem;
+
+// A general <small> styling
+// $small-font-size: 60%;
+// $small-font-color: scale-color($header-font-color, $lightness: 35%);
+
+// We use these to style paragraphs
+// $paragraph-font-family: inherit;
+// $paragraph-font-weight: $font-weight-normal;
+// $paragraph-font-size: 1rem;
+// $paragraph-line-height: 1.6;
+// $paragraph-margin-bottom: rem-calc(20);
+// $paragraph-aside-font-size: rem-calc(14);
+// $paragraph-aside-line-height: 1.35;
+// $paragraph-aside-font-style: italic;
+// $paragraph-text-rendering: optimizeLegibility;
+
+// We use these to style <code> tags
+// $code-color: grayscale($primary-color);
+// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
+// $code-font-weight: $font-weight-normal;
+// $code-background-color: scale-color($secondary-color, $lightness: 70%);
+// $code-border-size: 1px;
+// $code-border-style: solid;
+// $code-border-color: scale-color($code-background-color, $lightness: -10%);
+// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
+
+// We use these to style anchors
+// $anchor-text-decoration: none;
+// $anchor-text-decoration-hover: none;
+// $anchor-font-color: $primary-color;
+// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);
+
+// We use these to style the <hr> element
+// $hr-border-width: 1px;
+// $hr-border-style: solid;
+// $hr-border-color: #ddd;
+// $hr-margin: rem-calc(20);
+
+// We use these to style lists
+// $list-font-family: $paragraph-font-family;
+// $list-font-size: $paragraph-font-size;
+// $list-line-height: $paragraph-line-height;
+// $list-margin-bottom: $paragraph-margin-bottom;
+// $list-style-position: outside;
+// $list-side-margin: 1.1rem;
+// $list-ordered-side-margin: 1.4rem;
+// $list-side-margin-no-bullet: 0;
+// $list-nested-margin: rem-calc(20);
+// $definition-list-header-weight: $font-weight-bold;
+// $definition-list-header-margin-bottom: .3rem;
+// $definition-list-margin-bottom: rem-calc(12);
+
+// We use these to style blockquotes
+// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
+// $blockquote-padding: rem-calc(9 20 0 19);
+// $blockquote-border: 1px solid #ddd;
+// $blockquote-cite-font-size: rem-calc(13);
+// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
+// $blockquote-cite-link-color: $blockquote-cite-font-color;
+
+// Acronym styles
+// $acronym-underline: 1px dotted #ddd; 
+
+// 5. Grid
+// - - - - - - - - - - - - - - -
+
+// $container-width: rem-calc(900);
+// $block-padding: $global-padding;
+// $total-columns: 12;
+// $block-grid-max-size: 6; 
+
+// 6. Button
+// - - - - - - - - - - - - - - -
+
+// $button-padding: 0.85em 1em;
+// $button-margin: 0 $global-padding $global-padding 0;
+// $button-style: solid;
+// $button-background: $primary-color;
+// $button-background-hover: scale-color($button-background, $lightness: -15%);
+// $button-color: auto;
+// $button-radius: 0;
+// $button-sizes: (
+//   tiny: 0.7,
+//   small: 0.8,
+//   medium: 1,
+//   large: 1.3,
+// );
+// $button-font-size: 0.9rem;
+// $button-opacity-disabled: 0.5;
+// $button-tag-selector: false; 
+
+// 7. Accordion
+// - - - - - - - - - - - - - - -
+
+// $accordion-border: 1px solid $gray-dark;
+
+// $accordion-title-background: $gray-light;
+// $accordion-title-background-hover: smartscale($accordion-title-background, 5%);
+// $accordion-title-background-active: smartscale($accordion-title-background, 3%);
+// $accordion-title-color: isitlight($accordion-title-background);
+// $accordion-title-color-active: isitlight($accordion-title-background);
+
+// $accordion-title-padding: $global-padding;
+// $accordion-content-padding: $global-padding; 
+
+// 8. Action Sheet
+// - - - - - - - - - - - - - - -
+
+// $actionsheet-background: white;
+// $actionsheet-border-color: #ccc;
+// $actionsheet-animate: transform opacity;
+// $actionsheet-animation-speed: 0.25s;
+// $actionsheet-width: 300px;
+// $actionsheet-radius: 4px;
+// $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25);
+// $actionsheet-padding: $global-padding;
+// $actionsheet-tail-size: 10px;
+
+// $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25);
+
+// $actionsheet-link-color: #000;
+// $actionsheet-link-background-hover: smartscale($actionsheet-background); 
+
+// 9. Block List
+// - - - - - - - - - - - - - - -
+
+// $blocklist-background: #fff;
+// $blocklist-fullbleed: true;
+// $blocklist-fontsize: 1rem;
+
+// $blocklist-item-padding: 0.8rem 1rem;
+// $blocklist-item-color: isitlight($blocklist-background, #000, #fff);
+// $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%);
+// $blocklist-item-color-disabled: #999;
+// $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%);
+
+// $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%);
+// $blocklist-item-icon-size: 0.8;
+
+// $blocklist-header-fontsize: 0.8em;
+// $blocklist-header-color: smartscale($blocklist-item-color, 40%);
+// $blocklist-header-uppercase: true;
+
+// $blocklist-check-icons: true; 
+
+// 10. Button Group
+// - - - - - - - - - - - - - - -
+
+// $btngroup-background: $primary-color;
+// $btngroup-color: #fff;
+// $btngroup-radius: $button-radius; 
+
+// 11. Card
+// - - - - - - - - - - - - - - -
+
+// $card-background: #fff;
+// $card-color: isitlight($card-background);
+// $card-border: 1px solid smartscale($card-background, 7%);
+// $card-radius: $global-radius;
+// $card-shadow: 0 1px 2px rgba(#000, 0.2);
+// $card-padding: $global-padding;
+// $card-margin: 0.5rem;
+
+// $card-divider-background: smartscale($card-background, 7%); 
+
+// 12. Extras
+// - - - - - - - - - - - - - - -
+
+// $closebutton-position: (top right);
+// $closebutton-size: 2em;
+// $closebutton-lineheight: 0.5;
+// $closebutton-color: #999;
+// $closebutton-color-hover: #333;
+
+// $thumbnail-padding: 0.5rem;
+// $thumbnail-shadow: 0 3px 15px rgba(black, 0.25); 
+
+// 13. Forms
+// - - - - - - - - - - - - - - -
+
+// Basic form variables
+// $form-fontsize: 1rem;
+// $form-padding: 0.5rem;
+
+// Text fields
+// $input-color: #000;
+// $input-color-hover: $input-color;
+// $input-color-focus: $input-color;
+// $input-background: #fff;
+// $input-background-hover: $input-background;
+// $input-background-focus: $input-background;
+// $input-background-disabled: smartscale($input-background);
+// $input-border: 1px solid #ccc;
+// $input-border-hover: 1px solid #bbb;
+// $input-border-focus: 1px solid #999;
+// $input-cursor-disabled: not-allowed;
+
+// Select menus
+// $select-color: #000;
+// $select-background: #fafafa;
+// $select-background-hover: smartscale($select-background, 4%);
+// $select-arrow: true;
+// $select-arrow-color: $select-color;
+
+// Labels
+// $form-label-fontsize: 0.9rem;
+// $form-label-margin: 0.5rem;
+// $form-label-color: #333;
+
+// Inline labels
+// $inlinelabel-color: #333;
+// $inlinelabel-background: #eee;
+// $inlinelabel-border: $input-border;
+
+// Range slider
+// $slider-background: #ddd;
+// $slider-height: 1rem;
+// $slider-radius: 0px;
+// $slider-thumb-height: 1.5rem;
+// $slider-thumb-color: $primary-color;
+// $slider-thumb-radius: 0px;
+
+// Progress and meter
+// $meter-height: 1.5rem;
+// $meter-background: #ccc;
+// $meter-fill: $primary-color;
+// $meter-fill-high: $success-color;
+// $meter-fill-medium: #e7cf00;
+// $meter-fill-low: $alert-color;
+// $meter-radius: 0; 
+
+// 14. Iconic
+// - - - - - - - - - - - - - - -
+
+// $iconic-primary-fill: $primary-color;
+// $iconic-primary-stroke: $primary-color;
+// $iconic-accent-fill: $iconic-primary-fill;
+// $iconic-accent-stroke: $iconic-accent-fill; 
+
+// 15. Label
+// - - - - - - - - - - - - - - -
+
+// $label-fontsize: 0.8rem;
+// $label-padding: ($global-padding / 3) ($global-padding / 2);
+// $label-radius: 0;
+// $label-background: $primary-color;
+// $label-color: isitlight($primary-color);
+
+// $badge-fontsize: 0.8em;
+// $badge-diameter: 1.5rem;
+// $badge-background: $primary-color;
+// $badge-color: #fff; 
+
+// 16. Menu Bar
+// - - - - - - - - - - - - - - -
+
+// $menubar-fontsize: 1rem;
+// $menubar-background: #fff;
+// $menubar-background-hover: smartscale($menubar-background, 7%);
+// $menubar-background-active: $menubar-background-hover;
+// $menubar-color: isitlight($menubar-background);
+// $menubar-color-hover: $menubar-color;
+// $menubar-color-active: $menubar-color-hover;
+
+// $menubar-item-padding: $global-padding;
+// $menubar-icon-size: 25px;
+// $menubar-icon-spacing: $menubar-item-padding; 
+
+// 17. Modal
+// - - - - - - - - - - - - - - -
+
+// $modal-background: #fff;
+// $modal-border: 0;
+// $modal-radius: 0px;
+// $modal-shadow: none;
+// $modal-zindex: 1000;
+// $modal-sizes: (
+//   tiny: 300px,
+//   small: 500px,
+//   medium: 600px,
+//   large: 800px,
+// );
+
+// $modal-overlay-class: 'modal-overlay';
+// $modal-overlay-background: rgba(#333, 0.7); 
+
+// 18. Motion UI
+// - - - - - - - - - - - - - - -
+
+// Classes to use when triggering in/out animations
+// $motion-class: (
+//   in: "ng-enter",
+//   out: "ng-leave",
+// );
+// $motion-class-active: (
+//   in: "ng-enter-active",
+//   out: "ng-leave-active",
+// );
+// $motion-class-stagger: (
+//   in: "ng-enter-stagger",
+//   out: "ng-leave-stagger",
+// );
+// $motion-class-showhide: (
+//   in: "ng-hide-remove",
+//   out: "ng-hide-add",
+// );
+// $motion-class-showhide-active: (
+//   in: "ng-hide-remove-active",
+//   out: "ng-hide-add-active",
+// );
+
+// Set if movement-based transitions should also fade the element in and out
+// $motion-slide-and-fade: false;
+// $motion-hinge-and-fade: true;
+// $motion-scale-and-fade: true;
+// $motion-spin-and-fade: true;
+
+// Default speed for transitions and animations
+// $motion-duration-default: 500ms;
+
+// Slow and fast modifiders
+// $motion-duration-slow: 750ms;
+// $motion-duration-fast: 250ms;
+// $motion-stagger-duration-default: 150ms;
+// $motion-stagger-duration-short: 50ms;
+// $motion-stagger-duration-long: 300ms;
+
+// Default timing function for transitions and animations
+// $motion-timing-default: ease;
+
+// Built-in and custom easing functions
+// Every item in this map becomes a CSS class
+// $motion-timings: (
+//   linear: linear,
+//   ease: ease,
+//   easeIn: ease-in,
+//   easeOut: ease-out,
+//   easeInOut: ease-in-out,
+//   bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245),
+//   bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
+//   bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
+// );
+
+// Default delay for all transitions and animations
+// $motion-delay-default: 0;
+// Short and long delay modifiers
+// $motion-delay-short: 300ms;
+// $motion-delay-long: 700ms; 
+
+// 19. Notification
+// - - - - - - - - - - - - - - -
+
+// $notification-default-position: right top;
+// $notification-width: rem-calc(400);
+// $notification-offset: $global-padding;
+
+// $notification-background: $primary-color;
+// $notification-color: white;
+// $notification-padding: $global-padding;
+// $notification-radius: 4px;
+
+// $notification-icon-size: 60px;
+// $notification-icon-margin: $global-padding;
+// $notification-icon-align: top;
+ 
+
+// 20. Off-canvas
+// - - - - - - - - - - - - - - -
+
+// $offcanvas-size-horizontal: 250px;
+// $offcanvas-size-vertical: 250px;
+
+// $offcanvas-background: #fff;
+// $offcanvas-color: isitlight($offcanvas-background);
+// $offcanvas-padding: 0;
+// $offcanvas-shadow: 3px 0 10px rgba(black, 0.25);
+// $offcanvas-animation-speed: 0.25s;
+
+// $offcanvas-frame-selector: '.grid-frame'; 
+
+// 21. Panel
+// - - - - - - - - - - - - - - -
+
+// $panel-size-horizontal: 300px;
+// $panel-size-vertical: 300px;
+// $panel-padding: 0;
+
+// $panel-background: #fff;
+// $panel-shadow: 3px 0 10px rgba(black, 0.25);
+
+// DEPRECATED: these variables will be removed in a future version.
+// $panel-animation-speed: 0.25s; 
+
+// 22. Popup
+// - - - - - - - - - - - - - - -
+
+// $popup-width: rem-calc(300);
+// $popup-background: #fff;
+// $popup-border: 0;
+// $popup-radius: 0;
+// $popup-shadow: 0 0 10px rgba(#000, 0.25); 
+
+// 23. Switch
+// - - - - - - - - - - - - - - -
+
+// $switch-width: rem-calc(50);
+// $switch-height: rem-calc(32);
+// $switch-background: #ccc;
+// $switch-background-active: $primary-color;
+// $switch-border: 0;
+// $switch-radius: 9999px;
+// $switch-animation-speed: 0.15s;
+
+// $switch-paddle-color: white;
+// $switch-paddle-offset: 4px; 
+
+// 24. Tabs
+// - - - - - - - - - - - - - - -
+
+// $tabstrip-background: transparent;
+
+// $tab-title-background: $gray-light;
+// $tab-title-background-hover: smartscale($tab-title-background, 5%);
+// $tab-title-background-active: smartscale($tab-title-background, 3%);
+// $tab-title-color: isitlight($tab-title-background);
+// $tab-title-color-active: $tab-title-color;
+
+// $tab-title-padding: $global-padding;
+// $tab-content-padding: $global-padding; 
+
+// 25. Title Bar
+// - - - - - - - - - - - - - - -
+
+// $titlebar-center-width: 50%;
+// $titlebar-side-width: (100% - $titlebar-center-width) / 2;
+// $titlebar-background: #eee;
+// $titlebar-color: #000;
+// $titlebar-border: 1px solid #ccc;
+// $titlebar-padding: $global-padding;
+// $titlebar-item-classes: (
+//   center: 'center',
+//   left: 'left',
+//   right: 'right',
+//   title: 'title',
+// );