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