1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/style/mdl/_variables.scss	Sun Jul 15 14:07:29 2018 +0200
     1.3 @@ -0,0 +1,592 @@
     1.4 +/**
     1.5 + * Copyright 2015 Google Inc. All Rights Reserved.
     1.6 + *
     1.7 + * Licensed under the Apache License, Version 2.0 (the "License");
     1.8 + * you may not use this file except in compliance with the License.
     1.9 + * You may obtain a copy of the License at
    1.10 + *
    1.11 + *      http://www.apache.org/licenses/LICENSE-2.0
    1.12 + *
    1.13 + * Unless required by applicable law or agreed to in writing, software
    1.14 + * distributed under the License is distributed on an "AS IS" BASIS,
    1.15 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    1.16 + * See the License for the specific language governing permissions and
    1.17 + * limitations under the License.
    1.18 + */
    1.19 +
    1.20 +/*------------------------------------*\
    1.21 +    $CONTENTS
    1.22 +\*------------------------------------*/
    1.23 +/**
    1.24 + * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
    1.25 + * -----Typography
    1.26 + * -----Colors
    1.27 + * -----Textfield
    1.28 + * -----Switch
    1.29 + * -----Spinner
    1.30 + * -----Radio
    1.31 + * -----Menu
    1.32 + * -----List
    1.33 + * -----Layout
    1.34 + * -----Icon toggles
    1.35 + * -----Footer
    1.36 + * -----Column
    1.37 + * -----Checkbox
    1.38 + * -----Card
    1.39 + * -----Button
    1.40 + * -----Animation
    1.41 + * -----Progress
    1.42 + * -----Badge
    1.43 + * -----Shadows
    1.44 + * -----Grid
    1.45 + * -----Data table
    1.46 + * -----Dialog
    1.47 + * -----Snackbar
    1.48 + * -----Tooltip
    1.49 + * -----Chip
    1.50 + *
    1.51 + * Even though all variables have the `!default` directive, most of them
    1.52 + * should not be changed as they are dependent one another. This can cause
    1.53 + * visual distortions (like alignment issues) that are hard to track down
    1.54 + * and fix.
    1.55 + */
    1.56 +
    1.57 +
    1.58 +/* ==========  TYPOGRAPHY  ========== */
    1.59 +
    1.60 +/* We're splitting fonts into "preferred" and "performance" in order to optimize
    1.61 +   page loading. For important text, such as the body, we want it to load
    1.62 +   immediately and not wait for the web font load, whereas for other sections,
    1.63 +   such as headers and titles, we're OK with things taking a bit longer to load.
    1.64 +   We do have some optional classes and parameters in the mixins, in case you
    1.65 +   definitely want to make sure you're using the preferred font and don't mind
    1.66 +   the performance hit.
    1.67 +   We should be able to improve on this once CSS Font Loading L3 becomes more
    1.68 +   widely available.
    1.69 +*/
    1.70 +$preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
    1.71 +$performance_font: 'Helvetica', 'Arial', sans-serif !default;
    1.72 +
    1.73 +/* ==========  COLORS  ========== */
    1.74 +
    1.75 +/**
    1.76 +*
    1.77 +* Material design color palettes.
    1.78 +* @see http://www.google.com/design/spec/style/color.html
    1.79 +*
    1.80 +**/
    1.81 +
    1.82 +@import "color-definitions";
    1.83 +@import "functions";
    1.84 +
    1.85 +/* ==========  IMAGES  ========== */
    1.86 +$image_path: '/static/mdl' !default;
    1.87 +
    1.88 +/* ==========  Color & Themes  ========== */
    1.89 +
    1.90 +// Define whether individual color palette items should have classes created.
    1.91 +// Setting this to true will remove individual color classes for each color in the palettes.
    1.92 +// To improve overall performance (assuming they aren't used) by:
    1.93 +// * Saving server bandwidth sending the extra classes
    1.94 +// * Save client computation against the classes
    1.95 +// it is RECOMMENDED you set this to true.
    1.96 +$trim-color-classes: false !default;
    1.97 +
    1.98 +// Use color primarily for emphasis. Choose colors that fit with
    1.99 +// your brand and provide good contrast between visual components.
   1.100 +$color-primary: $palette-indigo-500 !default;
   1.101 +$color-primary-dark: $palette-indigo-700 !default;
   1.102 +$color-accent: $palette-pink-A200 !default;
   1.103 +
   1.104 +// Our primary is dark, so use $color-dark-contrast for overlaid text.
   1.105 +$color-primary-contrast: $color-dark-contrast !default;
   1.106 +// Our accent is dark, so use $color-dark-contrast for overlaid text.
   1.107 +$color-accent-contrast: $color-dark-contrast !default;
   1.108 +
   1.109 +// Replace all colors with placeholders if we're generating a template.
   1.110 +@if $styleguide-generate-template == true {
   1.111 +  $color-primary: '$color-primary';
   1.112 +  $color-primary-dark: '$color-primary-dark';
   1.113 +  $color-accent: '$color-accent';
   1.114 +  $color-primary-contrast: '$color-primary-contrast';
   1.115 +  $color-accent-contrast: '$color-accent-contrast';
   1.116 +}
   1.117 +
   1.118 +/* ==========  Typography  ========== */
   1.119 +
   1.120 +// We use the following default color styles: text-color-primary and
   1.121 +// text-color-secondary. For light themes, use text-color-primary-inverse
   1.122 +// and text-color-secondary-inverse.
   1.123 +
   1.124 +$text-color-primary: unquote("rgba(#{$color-black}, 0.87)") !default;
   1.125 +$text-link-color: unquote("rgb(#{$color-accent})") !default;
   1.126 +
   1.127 +// Define whether to target elements directly for typographic enhancements.
   1.128 +// Turning this off means you need to use mdl-* classes more often.
   1.129 +// Other components may also fail to adhere to MD without these rules.
   1.130 +// It is strongly recommended you leave this as true.
   1.131 +
   1.132 +$target-elements-directly: true !default;
   1.133 +
   1.134 +/* ==========  Components  ========== */
   1.135 +
   1.136 +/* ==========  Standard Buttons  ========== */
   1.137 +
   1.138 +// Default button colors.
   1.139 +$button-primary-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
   1.140 +$button-secondary-color: unquote("rgb(#{$color-black})") !default;
   1.141 +$button-hover-color: $button-primary-color !default;
   1.142 +$button-active-color: unquote("rgba(#{$palette-grey-500}, 0.40)") !default;
   1.143 +$button-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
   1.144 +
   1.145 +// Colored button colors.
   1.146 +$button-primary-color-alt: unquote("rgb(#{$color-primary})") !default;
   1.147 +$button-secondary-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
   1.148 +$button-hover-color-alt: unquote("rgb(#{$color-primary})") !default;
   1.149 +$button-active-color-alt: unquote("rgb(#{$color-primary})") !default;
   1.150 +$button-focus-color-alt: $button-focus-color !default;
   1.151 +
   1.152 +// Ripple color for colored raised buttons.
   1.153 +$button-ripple-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
   1.154 +
   1.155 +// Disabled button colors.
   1.156 +$button-primary-color-disabled: unquote("rgba(#{$color-black}, 0.12)") !default;
   1.157 +$button-secondary-color-disabled: unquote("rgba(#{$color-black}, 0.26)") !default;
   1.158 +
   1.159 +// FAB colors and sizes.
   1.160 +$button-fab-color-alt: unquote("rgb(#{$color-accent})") !default;
   1.161 +$button-fab-hover-color-alt: unquote("rgb(#{$color-accent})") !default;
   1.162 +$button-fab-active-color-alt: unquote("rgb(#{$color-accent})") !default;
   1.163 +$button-fab-text-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
   1.164 +$button-fab-ripple-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
   1.165 +
   1.166 +// Icon button colors and sizes.
   1.167 +$button-icon-color: unquote("rgb(#{$palette-grey-700})") !default;
   1.168 +$button-icon-focus-color: $button-focus-color !default;
   1.169 +
   1.170 +/* ==========  Icon Toggles  ========== */
   1.171 +
   1.172 +$icon-toggle-color: unquote("rgb(#{$palette-grey-700})") !default;
   1.173 +$icon-toggle-focus-color: $button-focus-color !default;
   1.174 +$icon-toggle-checked-color: unquote("rgb(#{$color-primary})") !default;
   1.175 +$icon-toggle-checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
   1.176 +$icon-toggle-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
   1.177 +
   1.178 +/* ==========  Radio Buttons  ========== */
   1.179 +
   1.180 +$radio-color: unquote("rgb(#{$color-primary})") !default;
   1.181 +$radio-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
   1.182 +$radio-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
   1.183 +
   1.184 +/* ==========  Ripple effect  ========== */
   1.185 +
   1.186 +$ripple-bg-color: unquote("rgb(#{$color-light-contrast})") !default;
   1.187 +
   1.188 +/* ==========  Layout  ========== */
   1.189 +
   1.190 +$layout-nav-color: unquote("rgb(#{$palette-grey-300})") !default;
   1.191 +
   1.192 +// Drawer
   1.193 +$layout-drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
   1.194 +$layout-drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
   1.195 +$layout-text-color: unquote("rgb(#{$palette-grey-800})") !default;
   1.196 +$layout-drawer-navigation-color: #757575 !default;
   1.197 +$layout-drawer-navigation-link-active-background: unquote("rgb(#{$palette-grey-300})") !default;
   1.198 +$layout-drawer-navigation-link-active-color: unquote("rgb(#{$color-light-contrast})") !default;
   1.199 +
   1.200 +// Header
   1.201 +$layout-header-bg-color: unquote("rgb(#{$color-primary})") !default;
   1.202 +$layout-header-text-color: unquote("rgb(#{$color-primary-contrast})") !default;
   1.203 +$layout-header-nav-hover-color: unquote("rgba(#{$palette-grey-700}, 0.6)") !default;
   1.204 +$layout-header-tab-text-color: unquote("rgba(#{$color-primary-contrast}, 0.6)") !default;
   1.205 +
   1.206 +// Tabs
   1.207 +$layout-header-tab-highlight: unquote("rgb(#{$color-accent})") !default;
   1.208 +
   1.209 +/* ==========  Content Tabs  ========== */
   1.210 +
   1.211 +$tab-highlight-color: unquote("rgb(#{$color-primary})") !default;
   1.212 +$tab-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
   1.213 +$tab-active-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
   1.214 +$tab-border-color: unquote("rgb(#{$palette-grey-300})") !default;
   1.215 +
   1.216 +/* ==========  Checkboxes  ========== */
   1.217 +
   1.218 +$checkbox-color: unquote("rgb(#{$color-primary})") !default;
   1.219 +$checkbox-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
   1.220 +$checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
   1.221 +$checkbox-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
   1.222 +$checkbox-image-path: $image_path;
   1.223 +
   1.224 +/* ==========  Switches  ========== */
   1.225 +
   1.226 +$switch-color: unquote("rgb(#{$color-primary})") !default;
   1.227 +$switch-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
   1.228 +$switch-thumb-color: $switch-color !default;
   1.229 +$switch-track-color: unquote("rgba(#{$color-primary}, 0.5)") !default;
   1.230 +
   1.231 +$switch-off-thumb-color: unquote("rgb(#{$palette-grey-50})") !default;
   1.232 +$switch-off-track-color: unquote("rgba(#{$color-black}, 0.26)") !default;
   1.233 +$switch-disabled-thumb-color: unquote("rgb(#{$palette-grey-400})") !default;
   1.234 +$switch-disabled-track-color: unquote("rgba(#{$color-black}, 0.12)") !default;
   1.235 +
   1.236 +/* ==========  Spinner  ========== */
   1.237 +
   1.238 +$spinner-color-1: unquote("rgb(#{$palette-blue-400})") !default;
   1.239 +$spinner-color-2: unquote("rgb(#{$palette-red-500})") !default;
   1.240 +$spinner-color-3: unquote("rgb(#{$palette-yellow-600})") !default;
   1.241 +$spinner-color-4: unquote("rgb(#{$palette-green-500})") !default;
   1.242 +
   1.243 +$spinner-single-color: unquote("rgb(#{$color-primary})") !default;
   1.244 +
   1.245 +/* ==========  Text fields  ========== */
   1.246 +
   1.247 +$input-text-background-color: transparent !default;
   1.248 +$input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default;
   1.249 +$input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
   1.250 +$input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
   1.251 +$input-text-disabled-color: $input-text-bottom-border-color !default;
   1.252 +$input-text-disabled-text-color: $input-text-label-color !default;
   1.253 +$input-text-error-color: unquote("rgb(#{$palette-red-A700})") !default;
   1.254 +
   1.255 +/* ==========  Card  ========== */
   1.256 +
   1.257 +$card-background-color: unquote("rgb(#{$color-white})") !default;
   1.258 +$card-text-color: unquote("rgb(#{$color-black})") !default;
   1.259 +$card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
   1.260 +$card-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
   1.261 +$card-border-color: rgba(0,0,0,0.1) !default;
   1.262 +$card-subtitle-color: unquote("rgba(#{$color-black}, 0.54)") !default;
   1.263 +
   1.264 +/* ==========  Sliders ========== */
   1.265 +
   1.266 +$range-bg-color: unquote("rgba(#{$color-black}, 0.26)") !default;
   1.267 +$range-color: unquote("rgb(#{$color-primary})") !default;
   1.268 +$range-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
   1.269 +$range-bg-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
   1.270 +
   1.271 +/* ========== Progress ========== */
   1.272 +$progress-main-color: unquote("rgb(#{$color-primary})") !default;
   1.273 +$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
   1.274 +$progress-fallback-buffer-color: unquote("rgba(#{$color-primary-contrast}, 0.9)") !default;
   1.275 +$progress-image-path: $image_path;
   1.276 +
   1.277 +/* ==========  List ========== */
   1.278 +
   1.279 +$list-main-text-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
   1.280 +$list-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
   1.281 +$list-icon-color: unquote("rgb(#{$palette-grey-600})") !default;
   1.282 +$list-avatar-color: white !default;
   1.283 +
   1.284 +/* ==========  Item ========== */
   1.285 +
   1.286 +// Default Item Colors
   1.287 +$default-item-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
   1.288 +$default-item-outline-color: unquote("rgb(#{$palette-grey-400})") !default;
   1.289 +$default-item-hover-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
   1.290 +$default-item-focus-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
   1.291 +$default-item-active-bg-color: unquote("rgb(#{$palette-grey-300})") !default;
   1.292 +$default-item-divider-color: unquote("rgba(#{$color-black}, 0.12)") !default;
   1.293 +
   1.294 +// Disabled Button Colors
   1.295 +$disabled-item-text-color: unquote("rgb(#{$palette-grey-400})") !default;
   1.296 +
   1.297 +/* ==========  Dropdown menu ========== */
   1.298 +
   1.299 +$default-dropdown-bg-color: unquote("rgb(#{$color-white})") !default;
   1.300 +
   1.301 +/* ==========  Tooltips  ========== */
   1.302 +
   1.303 +$tooltip-text-color: unquote("rgb(#{$color-white})") !default;
   1.304 +$tooltip-background-color: unquote("rgba(#{$palette-grey-700}, 0.9)") !default;
   1.305 +
   1.306 +/* ==========  Footer  ========== */
   1.307 +
   1.308 +$footer-bg-color: unquote("rgb(#{$palette-grey-800})") !default;
   1.309 +$footer-color: unquote("rgb(#{$palette-grey-500})") !default;
   1.310 +$footer-heading-color: unquote("rgb(#{$palette-grey-300})") !default;
   1.311 +$footer-button-fill-color: $footer-color !default;
   1.312 +$footer-underline-color: $footer-color !default;
   1.313 +
   1.314 +
   1.315 +/* TEXTFIELD */
   1.316 +
   1.317 +$input-text-font-size: 16px !default;
   1.318 +$input-text-width: 100% !default;
   1.319 +$input-text-padding: 4px !default;
   1.320 +$input-text-vertical-spacing: 20px !default;
   1.321 +
   1.322 +$input-text-button-size: 32px !default;
   1.323 +$input-text-floating-label-fontsize: 12px !default;
   1.324 +$input-text-expandable-icon-top: 16px !default;
   1.325 +
   1.326 +
   1.327 +/* SWITCH */
   1.328 +
   1.329 +$switch-label-font-size: 16px !default;
   1.330 +$switch-label-height: 24px !default;
   1.331 +$switch-track-height: 14px !default;
   1.332 +$switch-track-length: 36px !default;
   1.333 +$switch-thumb-size: 20px !default;
   1.334 +$switch-track-top: ($switch-label-height - $switch-track-height) / 2 !default;
   1.335 +$switch-thumb-top: ($switch-label-height - $switch-thumb-size) / 2 !default;
   1.336 +$switch-ripple-size: $switch-label-height * 2 !default;
   1.337 +$switch-helper-size: 8px !default;
   1.338 +
   1.339 +/* SPINNER */
   1.340 +
   1.341 +$spinner-size: 28px !default;
   1.342 +$spinner-stroke-width: 3px !default;
   1.343 +
   1.344 +// Amount of circle the arc takes up.
   1.345 +$spinner-arc-size: 270deg !default;
   1.346 +// Time it takes to expand and contract arc.
   1.347 +$spinner-arc-time: 1333ms !default;
   1.348 +// How much the start location of the arc should rotate each time.
   1.349 +$spinner-arc-start-rot: 216deg !default;
   1.350 +
   1.351 +$spinner-duration: 360 * $spinner-arc-time / (
   1.352 +    strip-units($spinner-arc-start-rot + (360deg - $spinner-arc-size)));
   1.353 +
   1.354 +
   1.355 +/* RADIO */
   1.356 +
   1.357 +$radio-label-font-size: 16px !default;
   1.358 +$radio-label-height: 24px !default;
   1.359 +$radio-button-size: 16px !default;
   1.360 +$radio-inner-margin: $radio-button-size / 4;
   1.361 +$radio-padding: 8px !default;
   1.362 +$radio-top-offset: ($radio-label-height - $radio-button-size) / 2;
   1.363 +$radio-ripple-size: 42px !default;
   1.364 +
   1.365 +
   1.366 +/* MENU */
   1.367 +
   1.368 +$menu-expand-duration: 0.3s !default;
   1.369 +$menu-fade-duration: 0.2s !default;
   1.370 +
   1.371 +/* LIST */
   1.372 +
   1.373 +$list-border: 8px !default;
   1.374 +$list-min-height: 48px !default;
   1.375 +$list-min-padding: 16px !default;
   1.376 +$list-bottom-padding: 20px !default;
   1.377 +$list-avatar-text-left-distance: 72px !default;
   1.378 +$list-icon-text-left-distance: 72px !default;
   1.379 +
   1.380 +$list-avatar-size: 40px !default;
   1.381 +$list-icon-size: 24px !default;
   1.382 +
   1.383 +$list-two-line-height: 72px !default;
   1.384 +$list-three-line-height: 88px !default;
   1.385 +
   1.386 +/* LAYOUT */
   1.387 +
   1.388 +$layout-drawer-narrow: 240px !default;
   1.389 +$layout-drawer-wide: 456px !default;
   1.390 +$layout-drawer-width: $layout-drawer-narrow !default;
   1.391 +
   1.392 +$layout-header-icon-size: 32px !default;
   1.393 +$layout-screen-size-threshold: 1024px !default;
   1.394 +$layout-header-icon-margin: 24px !default;
   1.395 +$layout-drawer-button-mobile-size: 32px !default;
   1.396 +$layout-drawer-button-desktop-size: 48px !default;
   1.397 +
   1.398 +$layout-header-mobile-row-height: 56px !default;
   1.399 +$layout-mobile-header-height: $layout-header-mobile-row-height;
   1.400 +$layout-header-desktop-row-height: 64px !default;
   1.401 +$layout-desktop-header-height: $layout-header-desktop-row-height;
   1.402 +
   1.403 +$layout-header-desktop-baseline: 80px !default;
   1.404 +$layout-header-mobile-baseline: 72px !default;
   1.405 +$layout-header-mobile-indent: 16px !default;
   1.406 +$layout-header-desktop-indent: 40px !default;
   1.407 +
   1.408 +$layout-tab-font-size: 14px !default;
   1.409 +$layout-tab-bar-height: 48px !default;
   1.410 +$layout-tab-mobile-padding: 12px !default;
   1.411 +$layout-tab-desktop-padding: 24px !default;
   1.412 +$layout-tab-highlight-thickness: 2px !default;
   1.413 +
   1.414 +
   1.415 +/* ICON TOGGLE */
   1.416 +
   1.417 +$icon-toggle-size: 32px !default;
   1.418 +$icon-toggle-font-size: 24px !default;
   1.419 +$icon-toggle-ripple-size: 36px !default;
   1.420 +
   1.421 +/* FOOTER */
   1.422 +
   1.423 +/*mega-footer*/
   1.424 +$footer-min-padding: 16px !default;
   1.425 +$footer-padding-sides: 40px !default;
   1.426 +$footer-heading-font-size: 14px !default;
   1.427 +$footer-heading-line-height: (1.7 * $footer-heading-font-size) !default;
   1.428 +$footer-btn-size: 36px  !default;
   1.429 +
   1.430 +/*mini-footer*/
   1.431 +$padding: 16px !default;
   1.432 +$footer-heading-font-size: 24px !default;
   1.433 +$footer-heading-line-height: (1.5 * $footer-heading-font-size) !default;
   1.434 +$footer-btn-size: 36px !default;
   1.435 +
   1.436 +/* CHECKBOX */
   1.437 +
   1.438 +$checkbox-label-font-size: 16px !default;
   1.439 +$checkbox-label-height: 24px !default;
   1.440 +$checkbox-button-size: 16px !default;
   1.441 +$checkbox-inner-margin: 2px !default;
   1.442 +$checkbox-padding: 8px !default;
   1.443 +$checkbox-top-offset:
   1.444 +($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;
   1.445 +$checkbox-ripple-size: $checkbox-label-height * 1.5;
   1.446 +
   1.447 +/* CARD */
   1.448 +
   1.449 +/* Card dimensions */
   1.450 +$card-width: 330px !default;
   1.451 +$card-height: 200px !default;
   1.452 +$card-font-size: 16px !default;
   1.453 +$card-title-font-size: 24px !default;
   1.454 +$card-subtitle-font-size: 14px !default;
   1.455 +$card-horizontal-padding: 16px !default;
   1.456 +$card-vertical-padding: 16px !default;
   1.457 +
   1.458 +$card-title-perspective-origin-x: 165px !default;
   1.459 +$card-title-perspective-origin-y: 56px !default;
   1.460 +
   1.461 +$card-title-transform-origin-x: 165px !default;
   1.462 +$card-title-transform-origin-y: 56px !default;
   1.463 +
   1.464 +$card-title-text-transform-origin-x: 149px !default;
   1.465 +$card-title-text-transform-origin-y: 48px !default;
   1.466 +
   1.467 +$card-supporting-text-font-size: 1rem !default;
   1.468 +$card-supporting-text-line-height: 18px !default;
   1.469 +
   1.470 +$card-actions-font-size: 16px !default;
   1.471 +
   1.472 +$card-title-text-font-weight: 300 !default;
   1.473 +$card-z-index: 1 !default;
   1.474 +
   1.475 +/* Cover image */
   1.476 +$card-cover-image-height: 186px !default;
   1.477 +$card-background-image-url: '' !default;
   1.478 +
   1.479 +
   1.480 +/* BUTTON */
   1.481 +/**
   1.482 + *
   1.483 + * Dimensions
   1.484 + *
   1.485 + */
   1.486 +$button-min-width: 64px !default;
   1.487 +$button-height: 36px !default;
   1.488 +$button-padding: 16px !default;
   1.489 +$button-margin: 4px !default;
   1.490 +$button-border-radius: 2px !default;
   1.491 +
   1.492 +$button-fab-size: 56px !default;
   1.493 +$button-fab-size-mini: 40px !default;
   1.494 +$button-fab-font-size: 24px !default;
   1.495 +
   1.496 +$button-icon-size: 32px !default;
   1.497 +$button-icon-size-mini: 24px !default;
   1.498 +
   1.499 +
   1.500 +/* ANIMATION */
   1.501 +$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
   1.502 +$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
   1.503 +$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
   1.504 +
   1.505 +$animation-curve-default: $animation-curve-fast-out-slow-in !default;
   1.506 +
   1.507 +
   1.508 +/* PROGRESS */
   1.509 +$bar-height: 4px !default;
   1.510 +
   1.511 +/* BADGE */
   1.512 +$badge-font-size: 12px !default;
   1.513 +$badge-color: unquote("rgb(#{$color-accent-contrast})") !default;
   1.514 +$badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
   1.515 +$badge-background: unquote("rgb(#{$color-accent})") !default;
   1.516 +$badge-background-inverse: unquote("rgba(#{$color-accent-contrast},0.2)") !default;
   1.517 +$badge-size : 22px !default;
   1.518 +$badge-padding: 2px !default;
   1.519 +$badge-overlap: 12px !default;
   1.520 +
   1.521 +/* SHADOWS */
   1.522 +
   1.523 +$shadow-key-umbra-opacity: 0.2 !default;
   1.524 +$shadow-key-penumbra-opacity: 0.14 !default;
   1.525 +$shadow-ambient-shadow-opacity: 0.12 !default;
   1.526 +
   1.527 +/* GRID */
   1.528 +
   1.529 +$grid-desktop-columns: 12 !default;
   1.530 +$grid-desktop-gutter: 16px !default;
   1.531 +$grid-desktop-margin: 16px !default;
   1.532 +
   1.533 +$grid-desktop-breakpoint: 840px !default;
   1.534 +
   1.535 +$grid-tablet-columns: 8 !default;
   1.536 +$grid-tablet-gutter: $grid-desktop-gutter !default;
   1.537 +$grid-tablet-margin: $grid-desktop-margin !default;
   1.538 +
   1.539 +$grid-tablet-breakpoint: 480px !default;
   1.540 +
   1.541 +$grid-phone-columns: 4 !default;
   1.542 +$grid-phone-gutter: $grid-desktop-gutter !default;
   1.543 +$grid-phone-margin: $grid-desktop-margin !default;
   1.544 +
   1.545 +$grid-cell-default-columns: $grid-phone-columns !default;
   1.546 +$grid-max-columns: $grid-desktop-columns !default;
   1.547 +
   1.548 +/* DATA TABLE */
   1.549 +
   1.550 +$data-table-font-size: 13px !default;
   1.551 +$data-table-header-font-size: 12px !default;
   1.552 +$data-table-header-sort-icon-size: 16px !default;
   1.553 +
   1.554 +$data-table-header-color: rgba(#000, 0.54) !default;
   1.555 +$data-table-header-sorted-color: rgba(#000, 0.87) !default;
   1.556 +$data-table-header-sorted-icon-hover-color: rgba(#000, 0.26) !default;
   1.557 +$data-table-divider-color: rgba(#000, 0.12) !default;
   1.558 +
   1.559 +$data-table-hover-color: #eeeeee !default;
   1.560 +$data-table-selection-color: #e0e0e0 !default;
   1.561 +
   1.562 +$data-table-dividers: 1px solid $data-table-divider-color !default;
   1.563 +
   1.564 +$data-table-row-height: 48px !default;
   1.565 +$data-table-last-row-height: 56px !default;
   1.566 +$data-table-header-height: 56px !default;
   1.567 +
   1.568 +$data-table-column-spacing: 36px !default;
   1.569 +$data-table-column-padding: $data-table-column-spacing / 2;
   1.570 +
   1.571 +$data-table-card-header-height: 64px !default;
   1.572 +$data-table-card-title-top: 20px !default;
   1.573 +$data-table-card-padding: 24px !default;
   1.574 +$data-table-button-padding-right: 16px !default;
   1.575 +$data-table-cell-top: $data-table-card-padding / 2;
   1.576 +
   1.577 +/* DIALOG */
   1.578 +$dialog-content-color: $card-supporting-text-text-color;
   1.579 +
   1.580 +/* SNACKBAR */
   1.581 +
   1.582 +// Hard coded since the color is not present in any palette.
   1.583 +$snackbar-background-color: #323232 !default;
   1.584 +$snackbar-tablet-breakpoint: $grid-tablet-breakpoint;
   1.585 +$snackbar-action-color: unquote("rgb(#{$color-accent})") !default;
   1.586 +
   1.587 +/* TOOLTIP */
   1.588 +$tooltip-font-size: 10px !default;
   1.589 +$tooltip-font-size-large: 14px !default;
   1.590 +
   1.591 +/* CHIP */
   1.592 +$chip-bg-color: rgb(222, 222, 222) !default;
   1.593 +$chip-bg-active-color: rgb(214, 214, 214) !default;
   1.594 +$chip-height: 32px !default;
   1.595 +$chip-font-size: 13px !default;