First Commit

1 files changed, 760 insertions, 0 deletions

diff --git a/www/lib/ionic/scss/_variables.scss b/www/lib/ionic/scss/_variables.scss
new file mode 100644
index 00000000..edbb6f92
--- /dev/null
+++ b/www/lib/ionic/scss/_variables.scss
@@ -0,0 +1,760 @@
+
+// Colors
+// -------------------------------
+
+$light:                           #fff !default;
+$stable:                          #f8f8f8 !default;
+$positive:                        #387ef5 !default;
+$calm:                            #11c1f3 !default;
+$balanced:                        #33cd5f !default;
+$energized:                       #ffc900 !default;
+$assertive:                       #ef473a !default;
+$royal:                           #886aea !default;
+$dark:                            #444 !default;
+
+
+// Base
+// -------------------------------
+
+$font-family-sans-serif:          "Helvetica Neue", "Roboto", "Segoe UI", sans-serif !default;
+$font-family-light-sans-serif:    "HelveticaNeue-Light", "Roboto-Light", "Segoe UI-Light", sans-serif-light !default;
+$font-family-serif:               serif !default;
+$font-family-monospace:           monospace !default;
+
+$font-family-base:                $font-family-sans-serif !default;
+$font-size-base:                  14px !default;
+$font-size-large:                 18px !default;
+$font-size-small:                 11px !default;
+
+$line-height-base:                1.428571429 !default; // 20/14
+$line-height-computed:            floor($font-size-base * $line-height-base) !default; // ~20px
+$line-height-large:               1.33 !default;
+$line-height-small:               1.5 !default;
+
+$headings-font-family:            $font-family-base !default;
+$headings-font-weight:            500 !default;
+$headings-line-height:            1.2 !default;
+
+$base-background-color:           #fff !default;
+$base-color:                      #000 !default;
+
+$link-color:                      $positive !default;
+$link-hover-color:                darken($link-color, 15%) !default;
+
+$content-padding:                 10px !default;
+
+$padding-base-vertical:           6px !default;
+$padding-base-horizontal:         12px !default;
+
+$padding-large-vertical:          10px !default;
+$padding-large-horizontal:        16px !default;
+
+$padding-small-vertical:          5px !default;
+$padding-small-horizontal:        10px !default;
+
+$border-radius-base:              4px !default;
+$border-radius-large:             6px !default;
+$border-radius-small:             3px !default;
+
+
+// Content
+// -------------------------------
+
+$scroll-refresh-icon-color:       #666666 !default;
+
+
+// Buttons
+// -------------------------------
+
+$button-color:                    #222 !default;
+$button-block-margin:             10px !default;
+$button-clear-padding:            6px !default;
+$button-border-radius:            2px !default;
+$button-border-width:             1px !default;
+
+$button-font-size:                16px !default;
+$button-height:                   42px !default;
+$button-padding:                  12px !default;
+$button-icon-size:                24px !default;
+
+$button-large-font-size:          20px !default;
+$button-large-height:             54px !default;
+$button-large-padding:            16px !default;
+$button-large-icon-size:          32px !default;
+
+$button-small-font-size:          12px !default;
+$button-small-height:             28px !default;
+$button-small-padding:            4px !default;
+$button-small-icon-size:          16px !default;
+
+$button-bar-button-font-size:     13px !default;
+$button-bar-button-height:        32px !default;
+$button-bar-button-padding:       8px !default;
+$button-bar-button-icon-size:     20px !default;
+
+$button-light-bg:                 $light !default;
+$button-light-text:               #444 !default;
+$button-light-border:             #ddd !default;
+$button-light-active-bg:          #fafafa !default;
+$button-light-active-border:      #ccc !default;
+
+$button-stable-bg:                $stable !default;
+$button-stable-text:              #444 !default;
+$button-stable-border:            #b2b2b2 !default;
+$button-stable-active-bg:         #e5e5e5 !default;
+$button-stable-active-border:     #a2a2a2 !default;
+
+$button-positive-bg:              $positive !default;
+$button-positive-text:            #fff !default;
+$button-positive-border:          darken($positive, 10%) !default;
+$button-positive-active-bg:       darken($positive, 10%) !default;
+$button-positive-active-border:   darken($positive, 10%) !default;
+
+$button-calm-bg:                  $calm !default;
+$button-calm-text:                #fff !default;
+$button-calm-border:              darken($calm, 10%) !default;
+$button-calm-active-bg:           darken($calm, 10%) !default;
+$button-calm-active-border:       darken($calm, 10%) !default;
+
+$button-assertive-bg:             $assertive !default;
+$button-assertive-text:           #fff !default;
+$button-assertive-border:         darken($assertive, 10%) !default;
+$button-assertive-active-bg:      darken($assertive, 10%) !default;
+$button-assertive-active-border:  darken($assertive, 10%) !default;
+
+$button-balanced-bg:              $balanced !default;
+$button-balanced-text:            #fff !default;
+$button-balanced-border:          darken($balanced, 10%) !default;
+$button-balanced-active-bg:       darken($balanced, 10%) !default;
+$button-balanced-active-border:   darken($balanced, 10%) !default;
+
+$button-energized-bg:             $energized !default;
+$button-energized-text:           #fff !default;
+$button-energized-border:         darken($energized, 5%) !default;
+$button-energized-active-bg:      darken($energized, 5%) !default;
+$button-energized-active-border:  darken($energized, 5%) !default;
+
+$button-royal-bg:                 $royal !default;
+$button-royal-text:               #fff !default;
+$button-royal-border:             darken($royal, 8%) !default;
+$button-royal-active-bg:          darken($royal, 8%) !default;
+$button-royal-active-border:      darken($royal, 8%) !default;
+
+$button-dark-bg:                  $dark !default;
+$button-dark-text:                #fff !default;
+$button-dark-border:              #111 !default;
+$button-dark-active-bg:           #262626 !default;
+$button-dark-active-border:       #000 !default;
+
+$button-default-bg:               $button-stable-bg !default;
+$button-default-text:             $button-stable-text !default;
+$button-default-border:           $button-stable-border !default;
+$button-default-active-bg:        $button-stable-active-bg !default;
+$button-default-active-border:    $button-stable-active-border !default;
+
+
+// Bars
+// -------------------------------
+
+$bar-height:                      44px !default;
+$bar-title-font-size:             17px !default;
+$bar-padding-portrait:            5px !default;
+$bar-padding-landscape:           5px !default;
+$bar-transparency:                1 !default;
+
+$bar-footer-height:               $bar-height !default;
+$bar-subheader-height:            $bar-height !default;
+$bar-subfooter-height:            $bar-height !default;
+
+$bar-light-bg:                    rgba($button-light-bg, $bar-transparency) !default;
+$bar-light-text:                  $button-light-text !default;
+$bar-light-border:                $button-light-border !default;
+$bar-light-active-bg:             $button-light-active-bg !default;
+$bar-light-active-border:         $button-light-active-border !default;
+
+$bar-stable-bg:                   rgba($button-stable-bg, $bar-transparency) !default;
+$bar-stable-text:                 $button-stable-text !default;
+$bar-stable-border:               $button-stable-border !default;
+$bar-stable-active-bg:            $button-stable-active-bg !default;
+$bar-stable-active-border:        $button-stable-active-border !default;
+
+$bar-positive-bg:                 rgba($button-positive-bg, $bar-transparency) !default;
+$bar-positive-text:               $button-positive-text !default;
+$bar-positive-border:             $button-positive-border !default;
+$bar-positive-active-bg:          $button-positive-active-bg !default;
+$bar-positive-active-border:      $button-positive-active-border !default;
+
+$bar-calm-bg:                     rgba($button-calm-bg, $bar-transparency) !default;
+$bar-calm-text:                   $button-calm-text !default;
+$bar-calm-border:                 $button-calm-border !default;
+$bar-calm-active-bg:              $button-calm-active-bg !default;
+$bar-calm-active-border:          $button-calm-active-border !default;
+
+$bar-assertive-bg:                rgba($button-assertive-bg, $bar-transparency) !default;
+$bar-assertive-text:              $button-assertive-text !default;
+$bar-assertive-border:            $button-assertive-border !default;
+$bar-assertive-active-bg:         $button-assertive-active-bg !default;
+$bar-assertive-active-border:     $button-assertive-active-border !default;
+
+$bar-balanced-bg:                 rgba($button-balanced-bg, $bar-transparency) !default;
+$bar-balanced-text:               $button-balanced-text !default;
+$bar-balanced-border:             $button-balanced-border !default;
+$bar-balanced-active-bg:          $button-balanced-active-bg !default;
+$bar-balanced-active-border:      $button-balanced-active-border !default;
+
+$bar-energized-bg:                rgba($button-energized-bg, $bar-transparency) !default;
+$bar-energized-text:              $button-energized-text !default;
+$bar-energized-border:            $button-energized-border !default;
+$bar-energized-active-bg:         $button-energized-active-bg !default;
+$bar-energized-active-border:     $button-energized-active-border !default;
+
+$bar-royal-bg:                    rgba($button-royal-bg, $bar-transparency) !default;
+$bar-royal-text:                  $button-royal-text !default;
+$bar-royal-border:                $button-royal-border !default;
+$bar-royal-active-bg:             $button-royal-active-bg !default;
+$bar-royal-active-border:         $button-royal-active-border !default;
+
+$bar-dark-bg:                     rgba($button-dark-bg, $bar-transparency) !default;
+$bar-dark-text:                   $button-dark-text !default;
+$bar-dark-border:                 $button-dark-border !default;
+$bar-dark-active-bg:              $button-dark-active-bg !default;
+$bar-dark-active-border:          $button-dark-active-border !default;
+
+$bar-default-bg:                  $bar-light-bg !default;
+$bar-default-text:                $bar-light-text !default;
+$bar-default-border:              $bar-light-border !default;
+$bar-default-active-bg:           $bar-light-active-bg !default;
+$bar-default-active-border:       $bar-light-active-border !default;
+
+
+// Tabs
+// -------------------------------
+
+$tabs-height:                     49px !default;
+$tabs-text-font-size:             14px !default;
+$tabs-text-font-size-side-icon:   10px !default;
+$tabs-icon-size:                  32px !default;
+$tabs-badge-padding:              1px 6px !default;
+$tabs-badge-font-size:            12px !default;
+
+$tabs-light-bg:                   $button-light-bg !default;
+$tabs-light-border:               $button-light-border !default;
+$tabs-light-text:                 $button-light-text !default;
+
+$tabs-stable-bg:                  $button-stable-bg !default;
+$tabs-stable-border:              $button-stable-border !default;
+$tabs-stable-text:                $button-stable-text !default;
+
+$tabs-positive-bg:                $button-positive-bg !default;
+$tabs-positive-border:            $button-positive-border !default;
+$tabs-positive-text:              $button-positive-text !default;
+
+$tabs-calm-bg:                    $button-calm-bg !default;
+$tabs-calm-border:                $button-calm-border !default;
+$tabs-calm-text:                  $button-calm-text !default;
+
+$tabs-assertive-bg:               $button-assertive-bg !default;
+$tabs-assertive-border:           $button-assertive-border !default;
+$tabs-assertive-text:             $button-assertive-text !default;
+
+$tabs-balanced-bg:                $button-balanced-bg !default;
+$tabs-balanced-border:            $button-balanced-border !default;
+$tabs-balanced-text:              $button-balanced-text !default;
+
+$tabs-energized-bg:               $button-energized-bg !default;
+$tabs-energized-border:           $button-energized-border !default;
+$tabs-energized-text:             $button-energized-text !default;
+
+$tabs-royal-bg:                   $button-royal-bg !default;
+$tabs-royal-border:               $button-royal-border !default;
+$tabs-royal-text:                 $button-royal-text !default;
+
+$tabs-dark-bg:                    $button-dark-bg !default;
+$tabs-dark-border:                $button-dark-border !default;
+$tabs-dark-text:                  $button-dark-text !default;
+
+$tabs-default-bg:                 $tabs-stable-bg !default;
+$tabs-default-border:             $tabs-stable-border !default;
+$tabs-default-text:               $tabs-stable-text !default;
+
+$tab-item-max-width:              150px !default;
+
+$tabs-off-opacity:                0.4 !default;
+$tabs-striped-off-opacity:        $tabs-off-opacity !default;
+$tabs-striped-off-color:          #000 !default;
+$tabs-striped-border-width:       2px !default;
+
+
+// Items
+// -------------------------------
+
+$item-font-size:                  16px !default;
+$item-border-width:               1px !default;
+$item-padding:                    16px !default;
+
+$item-button-font-size:           18px !default;
+$item-button-line-height:         32px !default;
+$item-icon-font-size:             32px !default;
+$item-icon-fill-font-size:        28px !default;
+
+$item-icon-accessory-color:       #ccc !default;
+$item-icon-accessory-font-size:   16px !default;
+
+$item-avatar-width:               40px !default;
+$item-avatar-height:              40px !default;
+$item-avatar-border-radius:       50% !default;
+
+$item-thumbnail-width:            80px !default;
+$item-thumbnail-height:           80px !default;
+$item-thumbnail-margin:           10px !default;
+
+$item-divider-bg:                 #f5f5f5 !default;
+$item-divider-color:              #222 !default;
+$item-divider-padding:            5px 15px !default;
+
+$item-light-bg:                   $button-light-bg !default;
+$item-light-border:               $button-light-border !default;
+$item-light-text:                 $button-light-text !default;
+$item-light-active-bg:            $button-light-active-bg !default;
+$item-light-active-border:        $button-light-active-border !default;
+
+$item-stable-bg:                  $button-stable-bg !default;
+$item-stable-border:              $button-stable-border !default;
+$item-stable-text:                $button-stable-text !default;
+$item-stable-active-bg:           $button-stable-active-bg !default;
+$item-stable-active-border:       $button-stable-active-border !default;
+
+$item-positive-bg:                $button-positive-bg !default;
+$item-positive-border:            $button-positive-border !default;
+$item-positive-text:              $button-positive-text !default;
+$item-positive-active-bg:         $button-positive-active-bg !default;
+$item-positive-active-border:     $button-positive-active-border !default;
+
+$item-calm-bg:                    $button-calm-bg !default;
+$item-calm-border:                $button-calm-border !default;
+$item-calm-text:                  $button-calm-text !default;
+$item-calm-active-bg:             $button-calm-active-bg !default;
+$item-calm-active-border:         $button-calm-active-border !default;
+
+$item-assertive-bg:               $button-assertive-bg !default;
+$item-assertive-border:           $button-assertive-border !default;
+$item-assertive-text:             $button-assertive-text !default;
+$item-assertive-active-bg:        $button-assertive-active-bg !default;
+$item-assertive-active-border:    $button-assertive-active-border !default;
+
+$item-balanced-bg:                $button-balanced-bg !default;
+$item-balanced-border:            $button-balanced-border !default;
+$item-balanced-text:              $button-balanced-text !default;
+$item-balanced-active-bg:         $button-balanced-active-bg !default;
+$item-balanced-active-border:     $button-balanced-active-border !default;
+
+$item-energized-bg:               $button-energized-bg !default;
+$item-energized-border:           $button-energized-border !default;
+$item-energized-text:             $button-energized-text !default;
+$item-energized-active-bg:        $button-energized-active-bg !default;
+$item-energized-active-border:    $button-energized-active-border !default;
+
+$item-royal-bg:                   $button-royal-bg !default;
+$item-royal-border:               $button-royal-border !default;
+$item-royal-text:                 $button-royal-text !default;
+$item-royal-active-bg:            $button-royal-active-bg !default;
+$item-royal-active-border:        $button-royal-active-border !default;
+
+$item-dark-bg:                    $button-dark-bg !default;
+$item-dark-border:                $button-dark-border !default;
+$item-dark-text:                  $button-dark-text !default;
+$item-dark-active-bg:             $button-dark-active-bg !default;
+$item-dark-active-border:         $button-dark-active-border !default;
+
+$item-default-bg:                 $item-light-bg !default;
+$item-default-border:             $item-light-border !default;
+$item-default-text:               $item-light-text !default;
+$item-default-active-bg:          #D9D9D9 !default;
+$item-default-active-border:      $item-light-active-border !default;
+
+
+// Item Editing
+// -------------------------------
+
+$item-edit-transition-duration:   250ms !default;
+$item-edit-transition-function:   ease-in-out !default;
+
+$item-remove-transition-duration:   300ms !default;
+$item-remove-transition-function:   ease-in !default;
+$item-remove-descendents-transition-function:  cubic-bezier(.25,.81,.24,1) !default;
+
+$item-left-edit-left:             8px !default;  // item's left side edit's "left" property
+
+$item-right-edit-open-width:      50px !default;
+$item-left-edit-open-width:       50px !default;
+
+$item-delete-icon-size:           24px !default;
+$item-delete-icon-color:          $assertive !default;
+
+$item-reorder-icon-size:          32px !default;
+$item-reorder-icon-color:         $dark !default;
+
+
+// Lists
+// -------------------------------
+
+$list-header-bg:                  transparent !default;
+$list-header-color:               #222 !default;
+$list-header-padding:             5px 15px !default;
+$list-header-margin-top:          20px !default;
+
+
+// Cards
+// -------------------------------
+
+$card-header-bg:                  #F5F5F5 !default;
+$card-body-bg:                    #fff !default;
+$card-footer-bg:                  #F5F5F5 !default;
+
+$card-padding:                    10px !default;
+$card-border-width:               1px !default;
+
+$card-border-color:               #ccc !default;
+$card-border-radius:              2px !default;
+$card-box-shadow:                 0 1px 3px rgba(0, 0, 0, .3) !default;
+
+
+// Forms
+// -------------------------------
+
+$input-height-base:               ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+$input-height-large:              (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+$input-height-small:              (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+
+$input-bg:                        $light !default;
+$input-bg-disabled:               $stable !default;
+
+$input-color:                     #111 !default;
+$input-border:                    $item-default-border !default;
+$input-border-width:              $item-border-width !default;
+$input-label-color:               $dark !default;
+$input-color-placeholder:         lighten($dark, 40%) !default;
+
+
+// Progress
+// -------------------------------
+
+$progress-width:                  100% !default;
+$progress-margin:                 15px auto !default;
+
+
+// Toggle
+// -------------------------------
+
+$toggle-width:                    51px !default;
+$toggle-height:                   31px !default;
+$toggle-border-width:             2px !default;
+$toggle-border-radius:            20px !default;
+
+$toggle-handle-width:             $toggle-height - ($toggle-border-width * 2) !default;
+$toggle-handle-height:            $toggle-handle-width !default;
+$toggle-handle-radius:            $toggle-handle-width !default;
+$toggle-handle-dragging-bg-color: darken(#fff, 5%) !default;
+
+$toggle-off-bg-color:             #fff !default;
+$toggle-off-border-color:         #e6e6e6 !default;
+
+$toggle-on-light-bg:              $button-light-border !default;
+$toggle-on-light-border:          $toggle-on-light-bg !default;
+$toggle-on-stable-bg:             $button-stable-border !default;
+$toggle-on-stable-border:         $toggle-on-stable-bg !default;
+$toggle-on-positive-bg:           $positive !default;
+$toggle-on-positive-border:       $toggle-on-positive-bg !default;
+$toggle-on-calm-bg:               $calm !default;
+$toggle-on-calm-border:           $toggle-on-calm-bg !default;
+$toggle-on-assertive-bg:          $assertive !default;
+$toggle-on-assertive-border:      $toggle-on-assertive-bg !default;
+$toggle-on-balanced-bg:           $balanced !default;
+$toggle-on-balanced-border:       $toggle-on-balanced-bg !default;
+$toggle-on-energized-bg:          $energized !default;
+$toggle-on-energized-border:      $toggle-on-energized-bg !default;
+$toggle-on-royal-bg:              $royal !default;
+$toggle-on-royal-border:          $toggle-on-royal-bg !default;
+$toggle-on-dark-bg:               $dark !default;
+$toggle-on-dark-border:           $toggle-on-dark-bg !default;
+$toggle-on-default-bg:            #4cd964 !default;
+$toggle-on-default-border:        $toggle-on-default-bg !default;
+
+$toggle-handle-off-bg-color:      $light !default;
+$toggle-handle-on-bg-color:       $toggle-handle-off-bg-color !default;
+
+$toggle-transition-duration:      .3s !default;
+
+$toggle-hit-area-expansion:   5px;
+
+
+// Checkbox
+// -------------------------------
+
+$checkbox-width:                  28px !default;
+$checkbox-height:                 28px !default;
+$checkbox-border-radius:          $checkbox-width !default;
+$checkbox-border-width:           1px !default;
+
+$checkbox-off-bg-color:           #fff !default;
+$checkbox-off-border-light:       $button-light-border !default;
+$checkbox-on-bg-light:            $button-light-border !default;
+$checkbox-off-border-stable:      $button-stable-border !default;
+$checkbox-on-bg-stable:           $button-stable-border !default;
+$checkbox-off-border-positive:    $positive !default;
+$checkbox-on-bg-positive:         $positive !default;
+$checkbox-off-border-calm:        $calm !default;
+$checkbox-on-bg-calm:             $calm !default;
+$checkbox-off-border-assertive:   $assertive !default;
+$checkbox-on-bg-assertive:        $assertive !default;
+$checkbox-off-border-balanced:    $balanced !default;
+$checkbox-on-bg-balanced:         $balanced !default;
+$checkbox-off-border-energized:   $energized !default;
+$checkbox-on-bg-energized:        $energized !default;
+$checkbox-off-border-royal:       $royal !default;
+$checkbox-on-bg-royal:            $royal !default;
+$checkbox-off-border-dark:        $dark !default;
+$checkbox-on-bg-dark:             $dark !default;
+$checkbox-off-border-default:     $button-light-border !default;
+$checkbox-on-bg-default:          $positive !default;
+$checkbox-on-border-default:      $positive !default;
+
+$checkbox-check-width:            1px !default;
+$checkbox-check-color:            #fff !default;
+
+
+// Range
+// -------------------------------
+
+$range-track-height:              2px !default;
+$range-slider-width:              28px !default;
+$range-slider-height:             28px !default;
+$range-slider-border-radius:      50% !default;
+$range-icon-size:                 24px !default;
+$range-slider-box-shadow:         0 0 2px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,0.2) !default;
+
+$range-light-track-bg:            $button-light-border !default;
+$range-stable-track-bg:           $button-stable-border !default;
+$range-positive-track-bg:         $button-positive-bg !default;
+$range-calm-track-bg:             $button-calm-bg !default;
+$range-balanced-track-bg:         $button-balanced-bg !default;
+$range-assertive-track-bg:        $button-assertive-bg !default;
+$range-energized-track-bg:        $button-energized-bg !default;
+$range-royal-track-bg:            $button-royal-bg !default;
+$range-dark-track-bg:             $button-dark-bg !default;
+$range-default-track-bg:          #ccc !default;
+
+
+// Menus
+// -------------------------------
+
+$menu-bg:                         #fff !default;
+$menu-width:                      275px !default;
+$menu-animation-speed:            200ms !default;
+
+$menu-side-shadow:                -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !default;
+
+
+// Modals
+// -------------------------------
+
+$modal-bg-color:                  #fff !default;
+$modal-backdrop-bg-active:        #000 !default;
+$modal-backdrop-bg-inactive:      rgba(0,0,0,0) !default;
+
+$modal-inset-mode-break-point:    680px !default;  // @media min-width
+$modal-inset-mode-top:            20% !default;
+$modal-inset-mode-right:          20% !default;
+$modal-inset-mode-bottom:         20% !default;
+$modal-inset-mode-left:           20% !default;
+$modal-inset-mode-min-height:     240px !default;
+
+
+// Popovers
+// -------------------------------
+
+$popover-bg-color:                $light !default;
+$popover-backdrop-bg-active:      rgba(0,0,0,0.1) !default;
+$popover-backdrop-bg-inactive:    rgba(0,0,0,0) !default;
+$popover-width:                   220px !default;
+$popover-height:                  280px !default;
+$popover-large-break-point:       680px !default;
+$popover-large-width:             360px !default;
+
+$popover-box-shadow:              0 1px 3px rgba(0,0,0,0.4) !default;
+$popover-border-radius:           2px !default;
+
+$popover-box-shadow-ios:          0 0 40px rgba(0,0,0,0.08) !default;
+$popover-border-radius-ios:       10px !default;
+
+$popover-bg-color-android:        #fafafa !default;
+$popover-box-shadow-android:      0 2px 6px rgba(0,0,0,0.35) !default;
+
+
+// Grids
+// -------------------------------
+
+$grid-padding-width:              10px !default;
+$grid-responsive-sm-break:        567px !default;  // smaller than landscape phone
+$grid-responsive-md-break:        767px !default;  // smaller than portrait tablet
+$grid-responsive-lg-break:        1023px !default; // smaller than landscape tablet
+
+
+// Action Sheets
+// -------------------------------
+
+$sheet-margin:                    8px !default;
+$sheet-border-radius:             4px !default;
+
+$sheet-options-bg-color:          #f1f2f3 !default;
+$sheet-options-bg-active-color:   #e4e5e7 !default;
+$sheet-options-text-color:        #007aff !default;
+$sheet-options-border-color:      #d1d3d6 !default;
+
+
+// Popups
+// -------------------------------
+
+$popup-width:                     250px !default;
+$popup-enter-animation:           superScaleIn !default;
+$popup-enter-animation-duration:  0.2s !default;
+$popup-leave-animation-duration:  0.1s !default;
+
+$popup-border-radius:             0px !default;
+$popup-background-color:          rgba(255,255,255,0.9) !default;
+
+$popup-button-border-radius:      2px !default;
+$popup-button-line-height:        20px !default;
+$popup-button-min-height:         45px !default;
+
+
+// Loading
+// -------------------------------
+
+$loading-text-color:              #fff !default;
+$loading-bg-color:                rgba(0,0,0,0.7) !default;
+$loading-padding:                 20px !default;
+$loading-border-radius:           5px !default;
+$loading-font-size:               15px !default;
+
+$loading-backdrop-fadein-duration:0.1s !default;
+$loading-backdrop-bg-color:       rgba(0,0,0,0.4) !default;
+
+
+// Badges
+// -------------------------------
+
+$badge-font-size:                 14px !default;
+$badge-line-height:               16px !default;
+$badge-font-weight:               bold !default;
+$badge-border-radius:             10px !default;
+
+$badge-light-bg:                  $button-light-bg !default;
+$badge-light-text:                $button-light-text !default;
+
+$badge-stable-bg:                 $button-stable-bg !default;
+$badge-stable-text:               $button-stable-text !default;
+
+$badge-positive-bg:               $button-positive-bg !default;
+$badge-positive-text:             $button-positive-text !default;
+
+$badge-calm-bg:                   $button-calm-bg !default;
+$badge-calm-text:                 $button-calm-text !default;
+
+$badge-balanced-bg:               $button-balanced-bg !default;
+$badge-balanced-text:             $button-balanced-text !default;
+
+$badge-assertive-bg:              $button-assertive-bg !default;
+$badge-assertive-text:            $button-assertive-text !default;
+
+$badge-energized-bg:              $button-energized-bg !default;
+$badge-energized-text:            $button-energized-text !default;
+
+$badge-royal-bg:                  $button-royal-bg !default;
+$badge-royal-text:                $button-royal-text !default;
+
+$badge-dark-bg:                   $button-dark-bg !default;
+$badge-dark-text:                 $button-dark-text !default;
+
+$badge-default-bg:                transparent !default;
+$badge-default-text:              #AAAAAA !default;
+
+
+// Spinners
+// -------------------------------
+
+$spinner-width:                   28px !default;
+$spinner-height:                  28px !default;
+
+$spinner-light-stroke:            $light !default;
+$spinner-light-fill:              $light !default;
+
+$spinner-stable-stroke:           $stable !default;
+$spinner-stable-fill:             $stable !default;
+
+$spinner-positive-stroke:         $positive !default;
+$spinner-positive-fill:           $positive !default;
+
+$spinner-calm-stroke:             $calm !default;
+$spinner-calm-fill:               $calm !default;
+
+$spinner-balanced-stroke:         $balanced !default;
+$spinner-balanced-fill:           $balanced !default;
+
+$spinner-assertive-stroke:        $assertive !default;
+$spinner-assertive-fill:          $assertive !default;
+
+$spinner-energized-stroke:        $energized !default;
+$spinner-energized-fill:          $energized !default;
+
+$spinner-royal-stroke:            $royal !default;
+$spinner-royal-fill:              $royal !default;
+
+$spinner-dark-stroke:             $dark !default;
+$spinner-dark-fill:               $dark !default;
+
+$spinner-default-stroke:          $dark !default;
+$spinner-default-fill:            $dark !default;
+
+
+// Z-Indexes
+// -------------------------------
+
+$z-index-bar-title:               0 !default;
+$z-index-item-drag:               0 !default;
+$z-index-item-edit:               0 !default;
+$z-index-menu:                    0 !default;
+$z-index-badge:                   1 !default;
+$z-index-bar-button:              1 !default;
+$z-index-item-options:            1 !default;
+$z-index-pane:                    1 !default;
+$z-index-slider-pager:            1 !default;
+$z-index-view:                    1 !default;
+$z-index-view-below:              2 !default;
+$z-index-item:                    2 !default;
+$z-index-item-checkbox:           3 !default;
+$z-index-item-radio:              3 !default;
+$z-index-item-reorder:            3 !default;
+$z-index-item-toggle:             3 !default;
+$z-index-view-above:              3 !default;
+$z-index-tabs:                    5 !default;
+$z-index-item-reordering:         9 !default;
+$z-index-bar:                     9 !default;
+$z-index-bar-above:               10 !default;
+$z-index-menu-scroll-content:     10 !default;
+$z-index-modal:                   10 !default;
+$z-index-popover:                 10 !default;
+$z-index-action-sheet:            11 !default;
+$z-index-backdrop:                11 !default;
+$z-index-menu-bar-header:         11 !default;
+$z-index-scroll-content-false:    11 !default;
+$z-index-popup:                   12 !default;
+$z-index-loading:                 13 !default;
+$z-index-scroll-bar:              9999 !default;
+$z-index-click-block:             99999 !default;
+
+
+// Platform
+// -------------------------------
+
+$ios-statusbar-height:           20px !default;