bsw/jbe@1309: /**
bsw/jbe@1309:  * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309:  *
bsw/jbe@1309:  * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309:  * you may not use this file except in compliance with the License.
bsw/jbe@1309:  * You may obtain a copy of the License at
bsw/jbe@1309:  *
bsw/jbe@1309:  *      http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309:  *
bsw/jbe@1309:  * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309:  * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309:  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309:  * See the License for the specific language governing permissions and
bsw/jbe@1309:  * limitations under the License.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: /*------------------------------------*\
bsw/jbe@1309:     $CONTENTS
bsw/jbe@1309: \*------------------------------------*/
bsw/jbe@1309: /**
bsw/jbe@1309:  * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
bsw/jbe@1309:  * -----Typography
bsw/jbe@1309:  * -----Colors
bsw/jbe@1309:  * -----Textfield
bsw/jbe@1309:  * -----Switch
bsw/jbe@1309:  * -----Spinner
bsw/jbe@1309:  * -----Radio
bsw/jbe@1309:  * -----Menu
bsw/jbe@1309:  * -----List
bsw/jbe@1309:  * -----Layout
bsw/jbe@1309:  * -----Icon toggles
bsw/jbe@1309:  * -----Footer
bsw/jbe@1309:  * -----Column
bsw/jbe@1309:  * -----Checkbox
bsw/jbe@1309:  * -----Card
bsw/jbe@1309:  * -----Button
bsw/jbe@1309:  * -----Animation
bsw/jbe@1309:  * -----Progress
bsw/jbe@1309:  * -----Badge
bsw/jbe@1309:  * -----Shadows
bsw/jbe@1309:  * -----Grid
bsw/jbe@1309:  * -----Data table
bsw/jbe@1309:  * -----Dialog
bsw/jbe@1309:  * -----Snackbar
bsw/jbe@1309:  * -----Tooltip
bsw/jbe@1309:  * -----Chip
bsw/jbe@1309:  *
bsw/jbe@1309:  * Even though all variables have the `!default` directive, most of them
bsw/jbe@1309:  * should not be changed as they are dependent one another. This can cause
bsw/jbe@1309:  * visual distortions (like alignment issues) that are hard to track down
bsw/jbe@1309:  * and fix.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  TYPOGRAPHY  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: /* We're splitting fonts into "preferred" and "performance" in order to optimize
bsw/jbe@1309:    page loading. For important text, such as the body, we want it to load
bsw/jbe@1309:    immediately and not wait for the web font load, whereas for other sections,
bsw/jbe@1309:    such as headers and titles, we're OK with things taking a bit longer to load.
bsw/jbe@1309:    We do have some optional classes and parameters in the mixins, in case you
bsw/jbe@1309:    definitely want to make sure you're using the preferred font and don't mind
bsw/jbe@1309:    the performance hit.
bsw/jbe@1309:    We should be able to improve on this once CSS Font Loading L3 becomes more
bsw/jbe@1309:    widely available.
bsw/jbe@1309: */
bsw/jbe@1309: $preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
bsw/jbe@1309: $performance_font: 'Helvetica', 'Arial', sans-serif !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  COLORS  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: /**
bsw/jbe@1309: *
bsw/jbe@1309: * Material design color palettes.
bsw/jbe@1309: * @see http://www.google.com/design/spec/style/color.html
bsw/jbe@1309: *
bsw/jbe@1309: **/
bsw/jbe@1309: 
bsw/jbe@1309: @import "color-definitions";
bsw/jbe@1309: @import "functions";
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  IMAGES  ========== */
bsw/jbe@1309: $image_path: '/static/mdl' !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Color & Themes  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: // Define whether individual color palette items should have classes created.
bsw/jbe@1309: // Setting this to true will remove individual color classes for each color in the palettes.
bsw/jbe@1309: // To improve overall performance (assuming they aren't used) by:
bsw/jbe@1309: // * Saving server bandwidth sending the extra classes
bsw/jbe@1309: // * Save client computation against the classes
bsw/jbe@1309: // it is RECOMMENDED you set this to true.
bsw/jbe@1309: $trim-color-classes: false !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Use color primarily for emphasis. Choose colors that fit with
bsw/jbe@1309: // your brand and provide good contrast between visual components.
bsw/jbe@1309: $color-primary: $palette-indigo-500 !default;
bsw/jbe@1309: $color-primary-dark: $palette-indigo-700 !default;
bsw/jbe@1309: $color-accent: $palette-pink-A200 !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Our primary is dark, so use $color-dark-contrast for overlaid text.
bsw/jbe@1309: $color-primary-contrast: $color-dark-contrast !default;
bsw/jbe@1309: // Our accent is dark, so use $color-dark-contrast for overlaid text.
bsw/jbe@1309: $color-accent-contrast: $color-dark-contrast !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Replace all colors with placeholders if we're generating a template.
bsw/jbe@1309: @if $styleguide-generate-template == true {
bsw/jbe@1309:   $color-primary: '$color-primary';
bsw/jbe@1309:   $color-primary-dark: '$color-primary-dark';
bsw/jbe@1309:   $color-accent: '$color-accent';
bsw/jbe@1309:   $color-primary-contrast: '$color-primary-contrast';
bsw/jbe@1309:   $color-accent-contrast: '$color-accent-contrast';
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Typography  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: // We use the following default color styles: text-color-primary and
bsw/jbe@1309: // text-color-secondary. For light themes, use text-color-primary-inverse
bsw/jbe@1309: // and text-color-secondary-inverse.
bsw/jbe@1309: 
bsw/jbe@1309: $text-color-primary: unquote("rgba(#{$color-black}, 0.87)") !default;
bsw/jbe@1309: $text-link-color: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Define whether to target elements directly for typographic enhancements.
bsw/jbe@1309: // Turning this off means you need to use mdl-* classes more often.
bsw/jbe@1309: // Other components may also fail to adhere to MD without these rules.
bsw/jbe@1309: // It is strongly recommended you leave this as true.
bsw/jbe@1309: 
bsw/jbe@1309: $target-elements-directly: true !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Components  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Standard Buttons  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: // Default button colors.
bsw/jbe@1309: $button-primary-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
bsw/jbe@1309: $button-secondary-color: unquote("rgb(#{$color-black})") !default;
bsw/jbe@1309: $button-hover-color: $button-primary-color !default;
bsw/jbe@1309: $button-active-color: unquote("rgba(#{$palette-grey-500}, 0.40)") !default;
bsw/jbe@1309: $button-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Colored button colors.
bsw/jbe@1309: $button-primary-color-alt: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: $button-secondary-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
bsw/jbe@1309: $button-hover-color-alt: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: $button-active-color-alt: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: $button-focus-color-alt: $button-focus-color !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Ripple color for colored raised buttons.
bsw/jbe@1309: $button-ripple-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Disabled button colors.
bsw/jbe@1309: $button-primary-color-disabled: unquote("rgba(#{$color-black}, 0.12)") !default;
bsw/jbe@1309: $button-secondary-color-disabled: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309: 
bsw/jbe@1309: // FAB colors and sizes.
bsw/jbe@1309: $button-fab-color-alt: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309: $button-fab-hover-color-alt: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309: $button-fab-active-color-alt: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309: $button-fab-text-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
bsw/jbe@1309: $button-fab-ripple-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Icon button colors and sizes.
bsw/jbe@1309: $button-icon-color: unquote("rgb(#{$palette-grey-700})") !default;
bsw/jbe@1309: $button-icon-focus-color: $button-focus-color !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Icon Toggles  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $icon-toggle-color: unquote("rgb(#{$palette-grey-700})") !default;
bsw/jbe@1309: $icon-toggle-focus-color: $button-focus-color !default;
bsw/jbe@1309: $icon-toggle-checked-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: $icon-toggle-checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
bsw/jbe@1309: $icon-toggle-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Radio Buttons  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $radio-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: $radio-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
bsw/jbe@1309: $radio-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Ripple effect  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $ripple-bg-color: unquote("rgb(#{$color-light-contrast})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Layout  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $layout-nav-color: unquote("rgb(#{$palette-grey-300})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Drawer
bsw/jbe@1309: $layout-drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
bsw/jbe@1309: $layout-drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
bsw/jbe@1309: $layout-text-color: unquote("rgb(#{$palette-grey-800})") !default;
bsw/jbe@1309: $layout-drawer-navigation-color: #757575 !default;
bsw/jbe@1309: $layout-drawer-navigation-link-active-background: unquote("rgb(#{$palette-grey-300})") !default;
bsw/jbe@1309: $layout-drawer-navigation-link-active-color: unquote("rgb(#{$color-light-contrast})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Header
bsw/jbe@1309: $layout-header-bg-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: $layout-header-text-color: unquote("rgb(#{$color-primary-contrast})") !default;
bsw/jbe@1309: $layout-header-nav-hover-color: unquote("rgba(#{$palette-grey-700}, 0.6)") !default;
bsw/jbe@1309: $layout-header-tab-text-color: unquote("rgba(#{$color-primary-contrast}, 0.6)") !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Tabs
bsw/jbe@1309: $layout-header-tab-highlight: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Content Tabs  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $tab-highlight-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: $tab-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
bsw/jbe@1309: $tab-active-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
bsw/jbe@1309: $tab-border-color: unquote("rgb(#{$palette-grey-300})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Checkboxes  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $checkbox-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: $checkbox-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
bsw/jbe@1309: $checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309: $checkbox-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
bsw/jbe@1309: $checkbox-image-path: $image_path;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Switches  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $switch-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: $switch-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
bsw/jbe@1309: $switch-thumb-color: $switch-color !default;
bsw/jbe@1309: $switch-track-color: unquote("rgba(#{$color-primary}, 0.5)") !default;
bsw/jbe@1309: 
bsw/jbe@1309: $switch-off-thumb-color: unquote("rgb(#{$palette-grey-50})") !default;
bsw/jbe@1309: $switch-off-track-color: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309: $switch-disabled-thumb-color: unquote("rgb(#{$palette-grey-400})") !default;
bsw/jbe@1309: $switch-disabled-track-color: unquote("rgba(#{$color-black}, 0.12)") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Spinner  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $spinner-color-1: unquote("rgb(#{$palette-blue-400})") !default;
bsw/jbe@1309: $spinner-color-2: unquote("rgb(#{$palette-red-500})") !default;
bsw/jbe@1309: $spinner-color-3: unquote("rgb(#{$palette-yellow-600})") !default;
bsw/jbe@1309: $spinner-color-4: unquote("rgb(#{$palette-green-500})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: $spinner-single-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Text fields  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $input-text-background-color: transparent !default;
bsw/jbe@1309: $input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309: $input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
bsw/jbe@1309: $input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: $input-text-disabled-color: $input-text-bottom-border-color !default;
bsw/jbe@1309: $input-text-disabled-text-color: $input-text-label-color !default;
bsw/jbe@1309: $input-text-error-color: unquote("rgb(#{$palette-red-A700})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Card  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $card-background-color: unquote("rgb(#{$color-white})") !default;
bsw/jbe@1309: $card-text-color: unquote("rgb(#{$color-black})") !default;
bsw/jbe@1309: $card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309: $card-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
bsw/jbe@1309: $card-border-color: rgba(0,0,0,0.1) !default;
bsw/jbe@1309: $card-subtitle-color: unquote("rgba(#{$color-black}, 0.54)") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Sliders ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $range-bg-color: unquote("rgba(#{$color-black}, 0.26)") !default;
bsw/jbe@1309: $range-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: $range-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
bsw/jbe@1309: $range-bg-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ========== Progress ========== */
bsw/jbe@1309: $progress-main-color: unquote("rgb(#{$color-primary})") !default;
bsw/jbe@1309: $progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
bsw/jbe@1309: $progress-fallback-buffer-color: unquote("rgba(#{$color-primary-contrast}, 0.9)") !default;
bsw/jbe@1309: $progress-image-path: $image_path;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  List ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $list-main-text-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
bsw/jbe@1309: $list-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
bsw/jbe@1309: $list-icon-color: unquote("rgb(#{$palette-grey-600})") !default;
bsw/jbe@1309: $list-avatar-color: white !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Item ========== */
bsw/jbe@1309: 
bsw/jbe@1309: // Default Item Colors
bsw/jbe@1309: $default-item-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
bsw/jbe@1309: $default-item-outline-color: unquote("rgb(#{$palette-grey-400})") !default;
bsw/jbe@1309: $default-item-hover-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
bsw/jbe@1309: $default-item-focus-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
bsw/jbe@1309: $default-item-active-bg-color: unquote("rgb(#{$palette-grey-300})") !default;
bsw/jbe@1309: $default-item-divider-color: unquote("rgba(#{$color-black}, 0.12)") !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Disabled Button Colors
bsw/jbe@1309: $disabled-item-text-color: unquote("rgb(#{$palette-grey-400})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Dropdown menu ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $default-dropdown-bg-color: unquote("rgb(#{$color-white})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Tooltips  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $tooltip-text-color: unquote("rgb(#{$color-white})") !default;
bsw/jbe@1309: $tooltip-background-color: unquote("rgba(#{$palette-grey-700}, 0.9)") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* ==========  Footer  ========== */
bsw/jbe@1309: 
bsw/jbe@1309: $footer-bg-color: unquote("rgb(#{$palette-grey-800})") !default;
bsw/jbe@1309: $footer-color: unquote("rgb(#{$palette-grey-500})") !default;
bsw/jbe@1309: $footer-heading-color: unquote("rgb(#{$palette-grey-300})") !default;
bsw/jbe@1309: $footer-button-fill-color: $footer-color !default;
bsw/jbe@1309: $footer-underline-color: $footer-color !default;
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: /* TEXTFIELD */
bsw/jbe@1309: 
bsw/jbe@1309: $input-text-font-size: 16px !default;
bsw/jbe@1309: $input-text-width: 100% !default;
bsw/jbe@1309: $input-text-padding: 4px !default;
bsw/jbe@1309: $input-text-vertical-spacing: 20px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $input-text-button-size: 32px !default;
bsw/jbe@1309: $input-text-floating-label-fontsize: 12px !default;
bsw/jbe@1309: $input-text-expandable-icon-top: 16px !default;
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: /* SWITCH */
bsw/jbe@1309: 
bsw/jbe@1309: $switch-label-font-size: 16px !default;
bsw/jbe@1309: $switch-label-height: 24px !default;
bsw/jbe@1309: $switch-track-height: 14px !default;
bsw/jbe@1309: $switch-track-length: 36px !default;
bsw/jbe@1309: $switch-thumb-size: 20px !default;
bsw/jbe@1309: $switch-track-top: ($switch-label-height - $switch-track-height) / 2 !default;
bsw/jbe@1309: $switch-thumb-top: ($switch-label-height - $switch-thumb-size) / 2 !default;
bsw/jbe@1309: $switch-ripple-size: $switch-label-height * 2 !default;
bsw/jbe@1309: $switch-helper-size: 8px !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* SPINNER */
bsw/jbe@1309: 
bsw/jbe@1309: $spinner-size: 28px !default;
bsw/jbe@1309: $spinner-stroke-width: 3px !default;
bsw/jbe@1309: 
bsw/jbe@1309: // Amount of circle the arc takes up.
bsw/jbe@1309: $spinner-arc-size: 270deg !default;
bsw/jbe@1309: // Time it takes to expand and contract arc.
bsw/jbe@1309: $spinner-arc-time: 1333ms !default;
bsw/jbe@1309: // How much the start location of the arc should rotate each time.
bsw/jbe@1309: $spinner-arc-start-rot: 216deg !default;
bsw/jbe@1309: 
bsw/jbe@1309: $spinner-duration: 360 * $spinner-arc-time / (
bsw/jbe@1309:     strip-units($spinner-arc-start-rot + (360deg - $spinner-arc-size)));
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: /* RADIO */
bsw/jbe@1309: 
bsw/jbe@1309: $radio-label-font-size: 16px !default;
bsw/jbe@1309: $radio-label-height: 24px !default;
bsw/jbe@1309: $radio-button-size: 16px !default;
bsw/jbe@1309: $radio-inner-margin: $radio-button-size / 4;
bsw/jbe@1309: $radio-padding: 8px !default;
bsw/jbe@1309: $radio-top-offset: ($radio-label-height - $radio-button-size) / 2;
bsw/jbe@1309: $radio-ripple-size: 42px !default;
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: /* MENU */
bsw/jbe@1309: 
bsw/jbe@1309: $menu-expand-duration: 0.3s !default;
bsw/jbe@1309: $menu-fade-duration: 0.2s !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* LIST */
bsw/jbe@1309: 
bsw/jbe@1309: $list-border: 8px !default;
bsw/jbe@1309: $list-min-height: 48px !default;
bsw/jbe@1309: $list-min-padding: 16px !default;
bsw/jbe@1309: $list-bottom-padding: 20px !default;
bsw/jbe@1309: $list-avatar-text-left-distance: 72px !default;
bsw/jbe@1309: $list-icon-text-left-distance: 72px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $list-avatar-size: 40px !default;
bsw/jbe@1309: $list-icon-size: 24px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $list-two-line-height: 72px !default;
bsw/jbe@1309: $list-three-line-height: 88px !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* LAYOUT */
bsw/jbe@1309: 
bsw/jbe@1309: $layout-drawer-narrow: 240px !default;
bsw/jbe@1309: $layout-drawer-wide: 456px !default;
bsw/jbe@1309: $layout-drawer-width: $layout-drawer-narrow !default;
bsw/jbe@1309: 
bsw/jbe@1309: $layout-header-icon-size: 32px !default;
bsw/jbe@1309: $layout-screen-size-threshold: 1024px !default;
bsw/jbe@1309: $layout-header-icon-margin: 24px !default;
bsw/jbe@1309: $layout-drawer-button-mobile-size: 32px !default;
bsw/jbe@1309: $layout-drawer-button-desktop-size: 48px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $layout-header-mobile-row-height: 56px !default;
bsw/jbe@1309: $layout-mobile-header-height: $layout-header-mobile-row-height;
bsw/jbe@1309: $layout-header-desktop-row-height: 64px !default;
bsw/jbe@1309: $layout-desktop-header-height: $layout-header-desktop-row-height;
bsw/jbe@1309: 
bsw/jbe@1309: $layout-header-desktop-baseline: 80px !default;
bsw/jbe@1309: $layout-header-mobile-baseline: 72px !default;
bsw/jbe@1309: $layout-header-mobile-indent: 16px !default;
bsw/jbe@1309: $layout-header-desktop-indent: 40px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $layout-tab-font-size: 14px !default;
bsw/jbe@1309: $layout-tab-bar-height: 48px !default;
bsw/jbe@1309: $layout-tab-mobile-padding: 12px !default;
bsw/jbe@1309: $layout-tab-desktop-padding: 24px !default;
bsw/jbe@1309: $layout-tab-highlight-thickness: 2px !default;
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: /* ICON TOGGLE */
bsw/jbe@1309: 
bsw/jbe@1309: $icon-toggle-size: 32px !default;
bsw/jbe@1309: $icon-toggle-font-size: 24px !default;
bsw/jbe@1309: $icon-toggle-ripple-size: 36px !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* FOOTER */
bsw/jbe@1309: 
bsw/jbe@1309: /*mega-footer*/
bsw/jbe@1309: $footer-min-padding: 16px !default;
bsw/jbe@1309: $footer-padding-sides: 40px !default;
bsw/jbe@1309: $footer-heading-font-size: 14px !default;
bsw/jbe@1309: $footer-heading-line-height: (1.7 * $footer-heading-font-size) !default;
bsw/jbe@1309: $footer-btn-size: 36px  !default;
bsw/jbe@1309: 
bsw/jbe@1309: /*mini-footer*/
bsw/jbe@1309: $padding: 16px !default;
bsw/jbe@1309: $footer-heading-font-size: 24px !default;
bsw/jbe@1309: $footer-heading-line-height: (1.5 * $footer-heading-font-size) !default;
bsw/jbe@1309: $footer-btn-size: 36px !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* CHECKBOX */
bsw/jbe@1309: 
bsw/jbe@1309: $checkbox-label-font-size: 16px !default;
bsw/jbe@1309: $checkbox-label-height: 24px !default;
bsw/jbe@1309: $checkbox-button-size: 16px !default;
bsw/jbe@1309: $checkbox-inner-margin: 2px !default;
bsw/jbe@1309: $checkbox-padding: 8px !default;
bsw/jbe@1309: $checkbox-top-offset:
bsw/jbe@1309: ($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;
bsw/jbe@1309: $checkbox-ripple-size: $checkbox-label-height * 1.5;
bsw/jbe@1309: 
bsw/jbe@1309: /* CARD */
bsw/jbe@1309: 
bsw/jbe@1309: /* Card dimensions */
bsw/jbe@1309: $card-width: 330px !default;
bsw/jbe@1309: $card-height: 200px !default;
bsw/jbe@1309: $card-font-size: 16px !default;
bsw/jbe@1309: $card-title-font-size: 24px !default;
bsw/jbe@1309: $card-subtitle-font-size: 14px !default;
bsw/jbe@1309: $card-horizontal-padding: 16px !default;
bsw/jbe@1309: $card-vertical-padding: 16px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $card-title-perspective-origin-x: 165px !default;
bsw/jbe@1309: $card-title-perspective-origin-y: 56px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $card-title-transform-origin-x: 165px !default;
bsw/jbe@1309: $card-title-transform-origin-y: 56px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $card-title-text-transform-origin-x: 149px !default;
bsw/jbe@1309: $card-title-text-transform-origin-y: 48px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $card-supporting-text-font-size: 1rem !default;
bsw/jbe@1309: $card-supporting-text-line-height: 18px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $card-actions-font-size: 16px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $card-title-text-font-weight: 300 !default;
bsw/jbe@1309: $card-z-index: 1 !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* Cover image */
bsw/jbe@1309: $card-cover-image-height: 186px !default;
bsw/jbe@1309: $card-background-image-url: '' !default;
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: /* BUTTON */
bsw/jbe@1309: /**
bsw/jbe@1309:  *
bsw/jbe@1309:  * Dimensions
bsw/jbe@1309:  *
bsw/jbe@1309:  */
bsw/jbe@1309: $button-min-width: 64px !default;
bsw/jbe@1309: $button-height: 36px !default;
bsw/jbe@1309: $button-padding: 16px !default;
bsw/jbe@1309: $button-margin: 4px !default;
bsw/jbe@1309: $button-border-radius: 2px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $button-fab-size: 56px !default;
bsw/jbe@1309: $button-fab-size-mini: 40px !default;
bsw/jbe@1309: $button-fab-font-size: 24px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $button-icon-size: 32px !default;
bsw/jbe@1309: $button-icon-size-mini: 24px !default;
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: /* ANIMATION */
bsw/jbe@1309: $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
bsw/jbe@1309: $animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
bsw/jbe@1309: $animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
bsw/jbe@1309: 
bsw/jbe@1309: $animation-curve-default: $animation-curve-fast-out-slow-in !default;
bsw/jbe@1309: 
bsw/jbe@1309: 
bsw/jbe@1309: /* PROGRESS */
bsw/jbe@1309: $bar-height: 4px !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* BADGE */
bsw/jbe@1309: $badge-font-size: 12px !default;
bsw/jbe@1309: $badge-color: unquote("rgb(#{$color-accent-contrast})") !default;
bsw/jbe@1309: $badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309: $badge-background: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309: $badge-background-inverse: unquote("rgba(#{$color-accent-contrast},0.2)") !default;
bsw/jbe@1309: $badge-size : 22px !default;
bsw/jbe@1309: $badge-padding: 2px !default;
bsw/jbe@1309: $badge-overlap: 12px !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* SHADOWS */
bsw/jbe@1309: 
bsw/jbe@1309: $shadow-key-umbra-opacity: 0.2 !default;
bsw/jbe@1309: $shadow-key-penumbra-opacity: 0.14 !default;
bsw/jbe@1309: $shadow-ambient-shadow-opacity: 0.12 !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* GRID */
bsw/jbe@1309: 
bsw/jbe@1309: $grid-desktop-columns: 12 !default;
bsw/jbe@1309: $grid-desktop-gutter: 16px !default;
bsw/jbe@1309: $grid-desktop-margin: 16px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $grid-desktop-breakpoint: 840px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $grid-tablet-columns: 8 !default;
bsw/jbe@1309: $grid-tablet-gutter: $grid-desktop-gutter !default;
bsw/jbe@1309: $grid-tablet-margin: $grid-desktop-margin !default;
bsw/jbe@1309: 
bsw/jbe@1309: $grid-tablet-breakpoint: 480px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $grid-phone-columns: 4 !default;
bsw/jbe@1309: $grid-phone-gutter: $grid-desktop-gutter !default;
bsw/jbe@1309: $grid-phone-margin: $grid-desktop-margin !default;
bsw/jbe@1309: 
bsw/jbe@1309: $grid-cell-default-columns: $grid-phone-columns !default;
bsw/jbe@1309: $grid-max-columns: $grid-desktop-columns !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* DATA TABLE */
bsw/jbe@1309: 
bsw/jbe@1309: $data-table-font-size: 13px !default;
bsw/jbe@1309: $data-table-header-font-size: 12px !default;
bsw/jbe@1309: $data-table-header-sort-icon-size: 16px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $data-table-header-color: rgba(#000, 0.54) !default;
bsw/jbe@1309: $data-table-header-sorted-color: rgba(#000, 0.87) !default;
bsw/jbe@1309: $data-table-header-sorted-icon-hover-color: rgba(#000, 0.26) !default;
bsw/jbe@1309: $data-table-divider-color: rgba(#000, 0.12) !default;
bsw/jbe@1309: 
bsw/jbe@1309: $data-table-hover-color: #eeeeee !default;
bsw/jbe@1309: $data-table-selection-color: #e0e0e0 !default;
bsw/jbe@1309: 
bsw/jbe@1309: $data-table-dividers: 1px solid $data-table-divider-color !default;
bsw/jbe@1309: 
bsw/jbe@1309: $data-table-row-height: 48px !default;
bsw/jbe@1309: $data-table-last-row-height: 56px !default;
bsw/jbe@1309: $data-table-header-height: 56px !default;
bsw/jbe@1309: 
bsw/jbe@1309: $data-table-column-spacing: 36px !default;
bsw/jbe@1309: $data-table-column-padding: $data-table-column-spacing / 2;
bsw/jbe@1309: 
bsw/jbe@1309: $data-table-card-header-height: 64px !default;
bsw/jbe@1309: $data-table-card-title-top: 20px !default;
bsw/jbe@1309: $data-table-card-padding: 24px !default;
bsw/jbe@1309: $data-table-button-padding-right: 16px !default;
bsw/jbe@1309: $data-table-cell-top: $data-table-card-padding / 2;
bsw/jbe@1309: 
bsw/jbe@1309: /* DIALOG */
bsw/jbe@1309: $dialog-content-color: $card-supporting-text-text-color;
bsw/jbe@1309: 
bsw/jbe@1309: /* SNACKBAR */
bsw/jbe@1309: 
bsw/jbe@1309: // Hard coded since the color is not present in any palette.
bsw/jbe@1309: $snackbar-background-color: #323232 !default;
bsw/jbe@1309: $snackbar-tablet-breakpoint: $grid-tablet-breakpoint;
bsw/jbe@1309: $snackbar-action-color: unquote("rgb(#{$color-accent})") !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* TOOLTIP */
bsw/jbe@1309: $tooltip-font-size: 10px !default;
bsw/jbe@1309: $tooltip-font-size-large: 14px !default;
bsw/jbe@1309: 
bsw/jbe@1309: /* CHIP */
bsw/jbe@1309: $chip-bg-color: rgb(222, 222, 222) !default;
bsw/jbe@1309: $chip-bg-active-color: rgb(214, 214, 214) !default;
bsw/jbe@1309: $chip-height: 32px !default;
bsw/jbe@1309: $chip-font-size: 13px !default;