723 lines
30 KiB
SCSS
723 lines
30 KiB
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: "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;
|