// 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", sans-serif !default; $font-family-light-sans-serif: "HelveticaNeue-Light", "Roboto-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; $tabs-striped-border-width: 2px; // 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: 54px !default; $toggle-height: 32px !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: #E5E5E5 !default; $toggle-off-border-color: #E5E5E5 !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: $positive !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: .2s !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: rgba(0,0,0,0.5) !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-bg-color: rgba(255, 255, 255, 0.6) !default; $sheet-opacity: 0.95 !default; $sheet-border-radius: 3px 3px 3px 3px !default; $sheet-border-radius-top: 3px 3px 0px 0px !default; $sheet-border-radius-bottom: 0px 0px 3px 3px !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; // 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;