learn_h5/www/lib/ionic/scss/_variables.scss

// 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:           '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif !default;

$font-family-light-sans-serif:    '-apple-system', "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:            4px !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-default-border:           transparent !default;
$button-default-active-border:    null !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;