material_design_lite-sass 1.0.1

data/vendor/assets/stylesheets/material/_variables.scss

@@ -0,0 +1,572 @@
+/**
+ * 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
+ */
+
+
+/* ==========  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";
+
+/* ==========  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(#{$color-primary})") !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;
+
+/* ==========  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-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;
+
+/* ==========  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;
+
+/* ==========  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;
+
+// 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;
+$input-text-width: 100%;
+$input-text-padding: 4px;
+$input-text-ripple-size: 32px;
+$input-text-vertical-spacing: 20px;
+
+$input-text-button-size: 32px;
+$input-text-floating-label-fontsize: 12px;
+$input-text-expandable-icon-top: 16px;
+
+
+/* SWITCH */
+
+$switch-label-height: 24px;
+$switch-track-height: 14px;
+$switch-track-length: 36px;
+$switch-thumb-size: 20px;
+$switch-track-top: ($switch-label-height - $switch-track-height) / 2;
+$switch-thumb-top: ($switch-label-height - $switch-thumb-size) / 2;
+$switch-ripple-size: $switch-label-height * 2;
+$switch-helper-size: 8px;
+
+/* SPINNER */
+
+$spinner-size: 28px !default;
+$spinner-stroke-width: 3px !default;
+
+// Amount of circle the arc takes up.
+$spinner-arc-size: 270deg;
+// Time it takes to expand and contract arc.
+$spinner-arc-time: 1333ms;
+// How much the start location of the arc should rotate each time.
+$spinner-arc-start-rot: 216deg;
+
+$spinner-duration: 360 * $spinner-arc-time / (
+    strip-units($spinner-arc-start-rot + (360deg - $spinner-arc-size)));
+
+
+/* RADIO */
+
+$radio-label-height: 24px;
+$radio-button-size: 16px;
+$radio-inner-margin: $radio-button-size / 4;
+$radio-padding: 8px;
+$radio-top-offset: ($radio-label-height - $radio-button-size) / 2 - 2px;
+$radio-ripple-size: 42px;
+
+
+/* MENU */
+
+$menu-expand-duration: 0.3s;
+$menu-fade-duration: 0.2s;
+
+/* LIST */
+
+$list-container-height: 500px;
+$list-container-width: 400px;
+$list-container-item-height: 70px;
+
+/* ICONS */
+
+
+// Dimensions
+$layout-drawer-narrow: 240px;
+$layout-drawer-wide: 456px;
+$layout-drawer-width: $layout-drawer-narrow;
+
+$layout-header-icon-size: 32px;
+$layout-screen-size-threshold: 1024px;
+$layout-header-icon-margin: 24px;
+$layout-drawer-button-mobile-size: 32px;
+$layout-drawer-button-desktop-size: 48px;
+
+$layout-header-mobile-row-height: 56px;
+$layout-mobile-header-height: $layout-header-mobile-row-height;
+$layout-header-desktop-row-height: 64px;
+$layout-desktop-header-height: $layout-header-desktop-row-height;
+
+$layout-header-desktop-baseline: 80px;
+$layout-header-mobile-baseline: 72px;
+$layout-header-mobile-indent: 16px;
+$layout-header-desktop-indent: 40px;
+
+$layout-tab-bar-height: 48px;
+$layout-tab-mobile-padding: 12px;
+$layout-tab-desktop-padding: 24px;
+$layout-tab-highlight-thickness: 2px;
+
+
+/* ICON TOGGLE */
+
+$icon-toggle-size: 32px !default;
+$icon-toggle-font-size: 24px !default;
+$icon-toggle-ripple-size: 36px !default;
+
+/* FOOTER */
+
+/*mega-footer*/
+/**************
+ *
+ * Sizes
+ *
+ *************/
+$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*/
+
+/**************
+ *
+ * Sizes
+ *
+ *************/
+$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;
+
+/* COLUMN LAYOUT */
+
+// Cutoff points for devices.
+$columns-tablet-size: 768px;
+$columns-desktop-size: 1024px;
+
+// Web (desktop) layout. Columns are fixed width, and there's a maximum number
+// of 3 columns, after which we just add padding to either side.
+$columns-web-count: 3;
+$columns-web-size: 360px;
+$columns-web-gutter: 40px;
+
+$columns-web-block-size: $columns-web-size + $columns-web-gutter;
+$columns-web-padding-size: $columns-web-count *
+    ($columns-web-size + $columns-web-gutter) / 2;
+
+// Tablet layout. There's a fixed number of columns, which grow to fill the
+// entire container.
+$columns-tablet-count: 2;
+$columns-tablet-gutter: 24px;
+$columns-tablet-percent: 100% / $columns-tablet-count;
+
+// Phone layout. There's a fixed number of columns, which grow to fill the
+// entire container.
+$columns-phone-count: 1;
+$columns-phone-gutter: 16px;
+$columns-phone-percent: 100% / $columns-phone-count;
+
+/* CHECKBOX */
+
+$checkbox-label-height: 24px;
+$checkbox-button-size: 16px;
+$checkbox-inner-margin: 2px;
+$checkbox-padding: 8px;
+$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-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: 8px !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-color: unquote("rgb(#{$color-white})") !default;
+$badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
+$badge-background: unquote("rgb(#{$color-accent})") !default;
+$badge-background-inverse: unquote("rgba(#{$color-white},0.2)") !default;
+$badge-size : 22px;
+$badge-padding: 2px;
+
+/* SHADOWS */
+
+$shadow-key-umbra-opacity: 0.2;
+$shadow-key-penumbra-opacity: 0.14;
+$shadow-ambient-shadow-opacity: 0.12;
+
+/* 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;
+
+/* DATA TABLE */
+
+$data-table-header-color: rgba(#000, 0.54);
+$data-table-divider-color: rgba(#000, 0.12);
+
+$data-table-hover-color: #eeeeee;
+$data-table-selection-color: #e0e0e0;
+
+$data-table-dividers: 1px solid $data-table-divider-color;
+
+$data-table-row-height: 48px;
+$data-table-last-row-height: 56px;
+$data-table-header-height: 56px;
+
+$data-table-column-spacing: 36px;
+$data-table-column-padding: $data-table-column-spacing / 2;
+
+$data-table-card-header-height: 64px;
+$data-table-card-title-top: 20px;
+$data-table-card-padding: 24px;
+$data-table-button-padding-right: 16px;
+$data-table-cell-top: $data-table-card-padding / 2;