568 lines
20 KiB
SCSS
568 lines
20 KiB
SCSS
/**
|
|
* 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
|
|
* -----Snackbar
|
|
*
|
|
* 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 pallet items should have classes created.
|
|
// Setting this to true will remove individual color classes for each color in the pallets.
|
|
// 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(#{$color-light-contrast})") !default;
|
|
$layout-drawer-navigation-link-active-color: unquote("rgb(#{$palette-grey-300})") !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(222, 50, 38)") !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-container-item-border-color: unquote("rgb(#{$palette-grey-300})") !default;
|
|
$list-container-view-background: unquote("rgb(#{$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-container-height: 500px !default;
|
|
$list-container-width: 400px !default;
|
|
$list-container-item-height: 70px !default;
|
|
|
|
/* LAYOUT */
|
|
|
|
$layout-nav-link-font-size: 13px !default;
|
|
|
|
$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: 13px !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;
|
|
|
|
/* 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-color: rgba(#000, 0.54) !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;
|
|
|
|
/* SNACKBAR */
|
|
|
|
// Hard coded since the color is not present in any pallet.
|
|
$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;
|