src/_variables.scss - mdl-1.x - githubmirror/material-design-lite

src/_variables.scss
592 строки21 KB
plug-n-play
Update _variables.scss
27 июн 2017, 18:01
27 июн 2017, 18:013b749f1
/**
 * 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 on 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;