material-sass 1.4.1 → 4.0.0.alpha5

data/app/assets/stylesheets/material/variables/_elevation-shadow.scss

@@ -0,0 +1,84 @@
+//
+// elevation
+// based on https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-
+//
+//
+  $elevation-24dp: 24 * 10 !default;
+  $elevation-16dp: 16 * 10 !default;
+  $elevation-12dp: 12 * 10 !default;
+  $elevation-8dp:  8 * 10 !default;
+  $elevation-6dp:  6 * 10 !default;
+  $elevation-4dp:  4 * 10 !default;
+  $elevation-3dp:  3 * 10 !default;
+  $elevation-2dp:  2 * 10 !default;
+  $elevation-1dp:  1 * 10 !default;
+
+//
+// shadow
+// based on https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-shadows
+//
+  $shadow-24dp: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+                0 9px 46px 8px rgba(0, 0, 0, 0.12),
+                0 11px 15px -7px rgba(0, 0, 0, 0.4) !default;
+  $shadow-16dp: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+                0 6px 30px 5px rgba(0, 0, 0, 0.12),
+                0 8px 10px -5px rgba(0, 0, 0, 0.4) !default;
+  $shadow-12dp: 0 12px 16px 1px rgba(0, 0, 0, 0.14),
+                0 4px 22px 3px rgba(0, 0, 0, 0.12),
+                0 6px 7px -4px rgba(0, 0, 0, 0.4) !default;
+  $shadow-8dp:  0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                0 3px 14px 2px rgba(0, 0, 0, 0.12),
+                0 5px 5px -3px rgba(0, 0, 0, 0.4) !default;
+  $shadow-6dp:  0 6px 10px 0 rgba(0, 0, 0, 0.14),
+                0 1px 18px 0 rgba(0, 0, 0, 0.12),
+                0 3px 5px -1px rgba(0, 0, 0, 0.4) !default;
+  $shadow-4dp:  0 4px 5px 0 rgba(0, 0, 0, 0.14),
+                0 1px 10px 0 rgba(0, 0, 0, 0.12),
+                0 2px 4px -1px rgba(0, 0, 0, 0.4) !default;
+  $shadow-3dp:  0 3px 4px 0 rgba(0, 0, 0, 0.14),
+                0 1px 8px 0 rgba(0, 0, 0, 0.12),
+                0 3px 3px -2px rgba(0, 0, 0, 0.4) !default;
+  $shadow-2dp:  0 2px 2px 0 rgba(0, 0, 0, 0.14),
+                0 1px 5px 0 rgba(0, 0, 0, 0.12),
+                0 3px 1px -2px rgba(0, 0, 0, 0.2) !default;
+  $shadow-1dp:  none !default;
+
+//
+// value pair
+//
+  $elevation-shadow-24dp: (
+    elevation: $elevation-24dp,
+    shadow: $shadow-24dp
+  ) !default;
+  $elevation-shadow-16dp: (
+    elevation: $elevation-16dp,
+    shadow: $shadow-16dp
+  ) !default;
+  $elevation-shadow-12dp: (
+    elevation: $elevation-12dp,
+    shadow: $shadow-12dp
+  ) !default;
+  $elevation-shadow-8dp:  (
+    elevation: $elevation-8dp,
+    shadow: $shadow-8dp
+  ) !default;
+  $elevation-shadow-6dp:  (
+    elevation: $elevation-6dp,
+    shadow: $shadow-6dp
+  ) !default;
+  $elevation-shadow-4dp:  (
+    elevation: $elevation-4dp,
+    shadow: $shadow-4dp
+  ) !default;
+  $elevation-shadow-3dp:  (
+    elevation: $elevation-3dp,
+    shadow: $shadow-3dp
+  ) !default;
+  $elevation-shadow-2dp:  (
+    elevation: $elevation-2dp,
+    shadow: $shadow-2dp
+  ) !default;
+  $elevation-shadow-1dp:  (
+    elevation: $elevation-1dp,
+    shadow: $shadow-1dp
+  ) !default;

data/app/assets/stylesheets/material/variables/_grid.scss

@@ -0,0 +1,32 @@
+$grid-columns:            12 !default;
+$grid-gutter-width:       1rem !default;
+$grid-gutter-width-md-up: 1.5rem !default;
+
+$grid-gutter-widths: (
+  xs: $grid-gutter-width,
+  sm: $grid-gutter-width,
+  md: $grid-gutter-width-md-up,
+  lg: $grid-gutter-width-md-up,
+  xl: $grid-gutter-width-md-up
+) !default;
+
+//
+// breakpoint
+// based on https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
+//
+  $grid-breakpoints: (
+    xs: 0,
+    sm: 600px,
+    md: 960px,
+    lg: 1280px,
+    xl: 1600px
+  ) !default;
+  @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+
+//
+// container
+//
+  $container-max-widths: (
+    xl: 1920px
+  ) !default;
+  @include _assert-ascending($container-max-widths, "$container-max-widths");

data/app/assets/stylesheets/material/variables/_spacer.scss

@@ -0,0 +1,73 @@
+//
+// border
+//
+  $border-color:         $black-divider !default;
+  $border-color-inverse: $white-divider !default;
+  $border-radius:        2px !default;
+  $border-width:         1px !default;
+
+//
+// spacer
+//
+  $spacer:               1rem !default;
+  $spacer-x:             $spacer !default;
+  $spacer-y:             $spacer !default;
+
+  $spacer-xs:            ($spacer / 4) !default;
+  $spacer-xs-x:          ($spacer-x / 4) !default;
+  $spacer-xs-y:          ($spacer-y / 4) !default;
+  $spacer-sm:            ($spacer / 2) !default;
+  $spacer-sm-x:          ($spacer-x / 2) !default;
+  $spacer-sm-y:          ($spacer-y / 2) !default;
+  $spacer-md:            $spacer !default;
+  $spacer-md-x:          $spacer-x !default;
+  $spacer-md-y:          $spacer-y !default;
+  $spacer-lg:            ($spacer * 1.5) !default;
+  $spacer-lg-x:          ($spacer-x * 1.5) !default;
+  $spacer-lg-y:          ($spacer-y * 1.5) !default;
+  $spacer-xl:            ($spacer * 3) !default;
+  $spacer-xl-x:          ($spacer-x * 3) !default;
+  $spacer-xl-y:          ($spacer-y * 3) !default;
+
+  $spacers: (
+    0: (
+      x: 0,
+      y: 0
+    ),
+    no: (
+      x: 0,
+      y: 0
+    ),
+    xs: (
+      x: $spacer-xs-x,
+      y: $spacer-xs-y
+    ),
+    sm: (
+      x: $spacer-sm-x,
+      y: $spacer-sm-y
+    ),
+    1: (
+      x: $spacer-x,
+      y: $spacer-y
+    ),
+    md: (
+      x: $spacer-x,
+      y: $spacer-y
+    ),
+    2: (
+      x: $spacer-lg-x,
+      y: $spacer-lg-y
+    ),
+    lg: (
+      x: $spacer-lg-x,
+      y: $spacer-lg-y
+    ),
+    3: (
+      x: $spacer-xl-x,
+      y: $spacer-xl-y
+    ),
+    xl: (
+      x: $spacer-xl-x,
+      y: $spacer-xl-y
+    )
+  ) !default;

data/app/assets/stylesheets/material/variables/_typography.scss

@@ -0,0 +1,72 @@
+// a base value used to responsively scale all typography, applied to the `<html>` element.
+  $font-size-root:            16px !default;
+
+// font face
+// based on https://material.google.com/style/typography.html#typography-typeface
+  $font-family-monospace:     "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+  $font-family-sans-serif:    Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default;
+  $font-family-serif:         "Roboto Slab", Georgia, "Times New Roman", Times, serif !default;
+
+  $font-family-base:          $font-family-sans-serif !default;
+
+  $font-weight-black:         900 !default; // not used
+  $font-weight-bold:          700 !default; // not used
+  $font-weight-medium:        500 !default;
+  $font-weight-regular:       400 !default;
+  $font-weight-light:         300 !default;
+  $font-weight-thin:          100 !default; // not used
+
+// font styles
+// based on https://material.google.com/style/typography.html#typography-styles
+  $font-size-base:            0.875rem !default;  // 14px
+
+  $font-size-display-4:       7rem !default;      // 112px
+  $font-size-display-3:       3.5rem !default;    // 56px
+  $font-size-display-2:       2.8125rem !default; // 45px
+  $font-size-display-1:       2.125rem !default;  // 34px
+  $font-size-headline:        1.5rem !default;    // 24px
+  $font-size-title:           1.25rem !default;   // 20px
+  $font-size-subheading:      1rem !default;      // 16px
+  $font-size-body-2:          0.875rem !default;  // 14px
+  $font-size-body-1:          0.875rem !default;  // 14px
+  $font-size-caption:         0.75rem !default;   // 12px
+
+  $font-weight-display-4:     $font-weight-light !default;
+  $font-weight-display-3:     $font-weight-regular !default;
+  $font-weight-display-2:     $font-weight-regular !default;
+  $font-weight-display-1:     $font-weight-regular !default;
+  $font-weight-headline:      $font-weight-regular !default;
+  $font-weight-title:         $font-weight-medium !default;
+  $font-weight-subheading:    $font-weight-regular !default;
+  $font-weight-body-2:        $font-weight-medium !default;
+  $font-weight-body-1:        $font-weight-regular !default;
+  $font-weight-caption:       $font-weight-regular !default;
+
+  $letter-spacing-display-4:  -0.04em !default;
+  $letter-spacing-display-3:  -0.02em !default;
+  $letter-spacing-display-2:  0 !default;
+  $letter-spacing-display-1:  0 !default;
+  $letter-spacing-headline:   0 !default;
+  $letter-spacing-title:      0.02em !default;
+  $letter-spacing-subheading: 0.04em !default;
+  $letter-spacing-body-2:     0 !default;
+  $letter-spacing-body-1:     0 !default;
+  $letter-spacing-caption:    0 !default;
+
+// line height
+// based on https://material.google.com/style/typography.html#typography-line-height
+  $line-height-base:          1.428572 !default;
+
+  $line-height-display-4:     7rem !default;      // 112px
+  $line-height-display-3:     3.625rem !default;  // 58px
+  $line-height-display-2:     3rem !default;      // 48px
+  $line-height-display-1:     2.5rem !default;    // 40px
+  $line-height-headline:      2rem !default;      // 32px
+  $line-height-title:         1.75rem !default;   // 28px
+  $line-height-subheading:    1.5rem !default;    // 24px
+  $line-height-body-2:        1.25rem !default;   // 20px
+  $line-height-body-1:        1.25rem !default;   // 20px
+  $line-height-caption:       1.125rem !default;  // 18px
+
+// default material icons font size
+  $material-icon-size:        24px !default;

data/app/assets/stylesheets/material/variables/_variable-bootstrap.scss

@@ -0,0 +1,129 @@
+$enable-flex:              false !default;
+$enable-grid-classes:      true !default;
+$enable-hover-media-query: false !default;
+$enable-rounded:           true !default;
+
+// alert
+  $alert-link-font-weight: $font-weight-medium !default;
+
+// body
+  $body-bg:    $white-primary !default;
+  $body-color: $black-primary !default;
+
+// breadcrumb
+  $breadcrumb-bg:                $offwhite !default;
+  $breadcrumb-divider:           "chevron_right" !default;
+  $breadcrumb-item-color:        $black-secondary !default;
+  $breadcrumb-item-color-active: $black-primary !default;
+  $breadcrumb-item-padding:      $spacer-sm-x !default;
+  $breadcrumb-margin-bottom:     $spacer-md-y !default;
+  $breadcrumb-padding-x:         $spacer-md-x !default;
+  $breadcrumb-padding-y:         $spacer-md-y !default;
+
+// button group
+  $btn-group-bg:           $offwhite !default;
+  $btn-group-padding-x:    $spacer-sm-x !default;
+  $btn-group-padding-y:    $spacer-sm-y !default;
+  $btn-toolbar-divider-bg: $black-divider !default;
+
+// caret
+  $caret-bg:         "data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.54' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E" !default;
+  $caret-bg-inverse: "data:image/svg+xml;charset=utf8,%3Csvg fill='#ffffff' fill-opacity='0.7' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E" !default;
+  $caret-width:      0.4em !default;
+
+// carousel
+  $carousel-caption-color:   $white-primary !default;
+  $carousel-caption-width:   50% !default;
+  $carousel-indicator-color: $black-divider !default;
+  $carousel-indicator-size:  0.5rem !default;
+
+// close
+  $close-color:        $black-hint !default;
+  $close-color-active: $black-primary !default;
+  $close-font-size:    $material-icon-size !default;
+
+// code
+  $code-bg:                   #f7f7f9 !default;
+  $code-color:                #bd4147 !default;
+  $code-font-size:            87.5% !default;
+  $code-padding:              0.2rem 0.4rem !default;
+
+  $kbd-bg:                    #333333 !default;
+  $kbd-color:                 #ffffff !default;
+
+  $pre-bg:                    #f7f7f9 !default;
+  $pre-color:                 #373a3c !default;
+  $pre-margin-bottom:         $spacer-md-y !default;
+  $pre-scrollable-max-height: 340px !default;
+
+// cursor
+  $cursor-disabled: not-allowed !default;
+
+// form
+  $custom-file-width:        14rem !default;
+  $custom-file-text:         (button-label: (en: "attach_file"), placeholder: (en: "Choose file...")) !default;
+
+  $form-group-margin-bottom: $spacer-md-y !default;
+
+// jumbotron
+  $jumbotron-bg:      $brand-color !default;
+  $jumbotron-color:   $brand-text-color !default;
+
+// link
+  $link-color:             $brand-color !default;
+  $link-color-active:      $brand-color-dark !default;
+  $link-decoration:        none !default;
+  $link-decoration-active: none !default;
+
+// media
+  $media-alignment-padding-x:   $spacer-md-x !default;
+  $media-heading-margin-bottom: $spacer-xs-y !default;
+  $media-margin-bottom:         $spacer-md-y !default;
+
+// misc
+  $abbr-border-color:        $black-divider !default;
+
+  $dt-font-weight:           $font-weight-medium !default;
+
+  $figure-caption-color:     $black-hint !default;
+  $figure-img-margin-bottom: $spacer-sm-y !default;
+
+  $headings-color:           inherit !default;
+  $headings-font-family:     inherit !default;
+  $headings-margin-bottom:   $spacer-sm-y !default;
+
+  $hr-border-color:          $black-divider !default;
+  $hr-border-width:          1px !default;
+
+  $list-inline-item-spacer:  $spacer-sm-x !default;
+
+  $mark-bg:                  $palette-yellow-500 !default;
+  $mark-padding:             0.2em !default;
+
+  $small-font-size:          80% !default;
+
+  $table-caption-color:      $black-hint !default;
+
+  $thumbnail-box-shadow:     $shadow-2dp !default;
+
+// nav
+  $nav-inline-item-spacer:  $spacer-md-x !default;
+  $nav-item-margin:         1px !default;
+  $nav-link-bg-active:      $black-divider !default;
+  $nav-link-color:          $black-secondary !default;
+  $nav-link-color-active:   $black-primary !default;
+  $nav-link-color-disabled: $black-hint !default;
+  $nav-link-padding:        $spacer-sm-y $spacer-md-x !default;
+
+// pagination
+  $pagination-bg:        $btn-group-bg !default;
+  $pagination-padding-x: $btn-group-padding-x !default;
+  $pagination-padding-y: $btn-group-padding-y !default;
+
+// typography
+  $blockquote-border-color: $brand-color !default;
+  $blockquote-border-width: 0.3125rem !default;
+  $blockquote-small-color:  $black-hint !default;
+
+  $text-muted:              $black-hint !default;
+  $text-muted-active:       $black-secondary !default;

data/app/assets/stylesheets/material/variables/_variable-material.scss

@@ -0,0 +1,434 @@
+//
+// appbar / toolbar (navbar)
+// based on https://material.google.com/components/toolbars.html#toolbars-usage
+//
+  $toolbar-border-color:     $border-color !default;
+  $toolbar-border-width:     $border-width !default;
+  $toolbar-color-dark:       $white-primary !default;
+  $toolbar-color-light:      $black-primary !default;
+  $toolbar-elevation-shadow: $elevation-shadow-4dp !default;
+  $toolbar-height:           3.5rem !default;
+  $toolbar-inner-spacer:     $spacer-md !default;
+  $toolbar-link-font-size:   1rem !default;
+  $toolbar-link-height:      2.25rem !default;
+  $toolbar-link-opacity:     0.7 !default;
+  $toolbar-link-padding-x:   $spacer-md-x !default;
+  $toolbar-link-padding-y:   (($toolbar-link-height - $toolbar-link-font-size) / 2) !default;
+  $toolbar-padding-x:        $spacer-md-x !default;
+  $toolbar-padding-y:        (($toolbar-height - $toolbar-link-height) / 2) !default;
+  $toolbar-toggler-bg-dark:  url("data:image/svg+xml;charset=utf8,%3Csvg fill='#ffffff' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E") !default;
+  $toolbar-toggler-bg-light: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.87' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E") !default;
+  $toolbar-waterfall-bg:     $brand-color !default;
+
+//
+// button
+// based on https://material.google.com/components/buttons.html#buttons-style
+// n.b. material design guideline only specifies specs for default button (.btn) and dense button (.btn-sm)
+//
+  $btn-bg:                      transparent !default;
+  $btn-bg-active:               rgba(153, 153, 153, 0.40) !default;
+  $btn-bg-disabled:             $black-divider !default;
+  $btn-block-spacer:            $spacer-xs-y !default;
+  $btn-color:                   $black-primary !default;
+  $btn-color-disabled:          rgba(0, 0, 0, 0.26) !default;
+  $btn-elevation-shadow:        $elevation-shadow-2dp !default;
+  $btn-elevation-shadow-active: $elevation-shadow-8dp !default;
+  $btn-focus-overlay:           $black-divider !default;
+  $btn-font-weight:             $font-weight-medium !default;
+  $btn-min-width:               5.5rem !default;
+
+  // inverse
+  $btn-bg-inverse-disabled:     $white-divider !default;
+  $btn-bg-inverse-active:       rgba(204, 204, 204, 0.25) !default;
+  $btn-color-inverse:           $white-primary !default;
+  $btn-color-inverse-disabled:  rgba(255, 255, 255, 0.30) !default;
+
+  // size
+  $btn-font-size:               0.875rem !default;
+  $btn-font-size-lg:            0.9375rem !default;
+  $btn-font-size-sm:            0.8125rem !default;
+  $btn-height:                  2.25rem !default;
+  $btn-height-lg:               2.5rem !default;
+  $btn-height-sm:               2rem !default;
+  $btn-padding-x:               $spacer-md-x !default;
+  $btn-padding-x-lg:            $btn-padding-x !default;
+  $btn-padding-x-sm:            $btn-padding-x !default;
+  $btn-padding-y:               (($btn-height - $btn-font-size) / 2) !default;
+  $btn-padding-y-lg:            (($btn-height-lg - $btn-font-size-lg) / 2) !default;
+  $btn-padding-y-sm:            (($btn-height-sm - $btn-font-size-sm) / 2) !default;
+
+//
+// button: flat button
+// based on https://material.google.com/components/buttons.html#buttons-flat-buttons
+//
+  $btn-flat-bg-opacity:            0.4 !default;
+  $btn-flat-focus-overlay-inverse: rgba(204, 204, 204, 0.12) !default;
+  $btn-flat-focus-overlay-opacity: 0.12 !default;
+
+//
+// button: floating action button
+// based on https://material.google.com/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button
+//
+  $btn-float-elevation-shadow:        $elevation-shadow-6dp !default;
+  $btn-float-elevation-shadow-active: $elevation-shadow-12dp !default;
+  $btn-float-font-size:               ($material-icon-size / $font-size-root * 1rem) !default;
+
+  // size
+  $btn-float-size:                    3.5rem !default;
+  $btn-float-size-sm:                 2.5rem !default;
+
+//
+// card
+// based on https://material.google.com/components/cards.html#cards-usage
+//
+  $card-action-spacer-x:         $spacer-sm-x !default;
+  $card-action-spacer-y:         $spacer-sm-y !default;
+  $card-bg:                      $white-primary !default;
+  $card-bg-inverse:              $palette-grey-800 !default;
+  $card-border-color:            $border-color !default;
+  $card-border-width:            $border-width !default;
+  $card-color:                   $black-primary !default;
+  $card-color-inverse:           $white-primary !default;
+  $card-elevation-shadow:        $elevation-shadow-2dp !default;
+  $card-elevation-shadow-active: $elevation-shadow-8dp !default;
+  $card-margin-bottom:           $spacer-md-y !default;
+  $card-spacer-inner-x:          $spacer-md-x !default;
+  $card-spacer-inner-y:          $spacer-md-y !default;
+  $card-spacer-outer-x:          $spacer-sm-x !default;
+  $card-spacer-outer-y:          $spacer-sm-y !default;
+  $card-title-additonal-margin:  $spacer-sm-y !default;
+
+//
+// chip (label)
+// based on https://material.google.com/components/chips.html#chips-specs
+//
+  $chip-active-overlay:          $black-divider !default;
+  $chip-bg:                      $black-divider !default;
+  $chip-bg-inverse:              $white-divider !default;
+  $chip-color:                   $black-primary !default;
+  $chip-color-inverse:           $white-primary !default;
+  $chip-elevation-shadow-active: $elevation-shadow-2dp !default;
+  $chip-font-size:               0.8125rem !default;
+  $chip-font-weight:             $font-weight-regular !default;
+  $chip-height:                  2rem !default;
+  $chip-padding-x:               0.75rem !default;
+  $chip-padding-y:               (($chip-height - $chip-font-size) / 2) !default;
+
+//
+// colour theme
+// based on https://material.google.com/style/color.html#color-themes
+//
+  $dark-theme-1:  $black !default;
+  $dark-theme-2:  $palette-grey-900 !default;
+  $dark-theme-3:  #303030 !default;
+  $dark-theme-4:  $palette-grey-800 !default;
+
+  $light-theme-1: $palette-grey-300 !default;
+  $light-theme-2: $palette-grey-100 !default;
+  $light-theme-3: $palette-grey-050 !default;
+  $light-theme-4: $white !default;
+
+//
+// data table (table)
+// based on https://material.google.com/components/data-tables.html#data-tables-structure
+//
+  $table-bg:                 $white-primary !default;
+  $table-bg-accent:          $palette-grey-100 !default;
+  $table-bg-hover:           $palette-grey-200 !default;
+  $table-border-color:       $border-color !default;
+  $table-border-width:       $border-width !default;
+  $table-cell-padding-x:     1.75rem !default;
+  $table-cell-padding-x-alt: $spacer-lg-x !default;
+  $table-elevation-shadow:   $elevation-shadow-2dp !default;
+  $table-margin-bottom:      $spacer-md-y !default;
+
+  $table-tbody-cell-height:  3rem !default;
+  $table-tbody-color:        $black-primary !default;
+  $table-tbody-font-size:    0.8125rem !default;
+  $table-tbody-font-weight:  $font-weight-regular !default;
+  $table-tbody-padding-y:    (($table-tbody-cell-height - $table-tbody-font-size * $line-height-base) / 2) !default;
+
+  $table-tfoot-cell-height:  3.5rem !default;
+  $table-tfoot-color:        $black-secondary !default;
+  $table-tfoot-font-size:    0.75rem !default;
+  $table-tfoot-font-weight:  $font-weight-regular !default;
+  $table-tfoot-padding-y:    (($table-tfoot-cell-height - $table-tfoot-font-size * $line-height-base) / 2) !default;
+
+  $table-thead-cell-height:  $table-tfoot-cell-height !default;
+  $table-thead-color:        $table-tfoot-color !default;
+  $table-thead-font-size:    $table-tfoot-font-size !default;
+  $table-thead-font-weight:  $font-weight-medium !default;
+  $table-thead-padding-y:    (($table-thead-cell-height - $table-thead-font-size * $line-height-base) / 2) !default;
+
+//
+// dialog (modal)
+// based on https://material.google.com/components/dialogs.html#dialogs-specs
+//
+  $dialog-backdrop-bg:          $black-hint !default;
+  $dialog-content-bg:           $white-primary !default;
+  $dialog-elevation-shadow:     $elevation-shadow-24dp !default;
+  $dialog-footer-btn-min-width: 4rem !default;
+  $dialog-footer-spacer-x:      $spacer-sm-x !default;
+  $dialog-footer-spacer-y:      $spacer-sm-y !default;
+  $dialog-inner-padding:        1.25rem $spacer-lg-x !default;
+  $dialog-margin-x:             $spacer-lg-x !default;
+  $dialog-margin-y:             $spacer-lg-y !default;
+  $dialog-width:                35rem !default;
+  $dialog-width-lg:             52.5rem !default;
+  $dialog-width-sm:             17.5rem !default;
+
+//
+// expansion panel (list group)
+// based on https://material.google.com/components/expansion-panels.html#expansion-panels-specs
+//
+  $expansion-panel-bg:                  $white-primary !default;
+  $expansion-panel-bg-active:           $palette-grey-200 !default;
+  $expansion-panel-bg-disabled:         $expansion-panel-bg !default;
+  $expansion-panel-body-spacer-x:       $spacer-lg-x !default;
+  $expansion-panel-body-spacer-y:       $spacer-md-y !default;
+  $expansion-panel-border-color:        $border-color !default;
+  $expansion-panel-border-width:        $border-width !default;
+  $expansion-panel-color:               $black-primary !default;
+  $expansion-panel-color-disabled:      $black-hint !default;
+  $expansion-panel-elevation-shadow:    $elevation-shadow-2dp !default;
+  $expansion-panel-font-size:           0.9375rem !default;
+  $expansion-panel-font-size-secondary: 0.75rem !default;
+  $expansion-panel-footer-spacer-x:     $spacer-sm-x !default;
+  $expansion-panel-footer-spacer-y:     $spacer-md-y !default;
+  $expansion-panel-height:              3rem !default;
+  $expansion-panel-icon-color:          $black-hint !default;
+  $expansion-panel-icon-color-active:   $black-secondary !default;
+  $expansion-panel-margin-between:      1rem !default;
+  $expansion-panel-margin-bottom:       $spacer-md-y !default;
+  $expansion-panel-spacer-x:            $spacer-lg-x !default;
+  $expansion-panel-spacer-y:            (($expansion-panel-height - $expansion-panel-font-size * $line-height-base) / 2) !default;
+
+//
+// menu (dropdown)
+// based on https://material.google.com/components/menus.html#menus-specs
+//
+  $menu-bg:                     $white-primary !default;
+  $menu-divider-bg:             $black-divider !default;
+  $menu-font-size:              1rem !default;
+  $menu-font-size-cascading:    0.9375rem !default;
+  $menu-elevation-shadow:       $elevation-shadow-8dp !default;
+  $menu-line-height:            1.5rem !default;
+  $menu-line-height-cascading:  $menu-line-height !default;
+  $menu-link-bg:                transparent !default;
+  $menu-link-bg-active:         $offwhite !default;
+  $menu-link-color:             $black-primary !default;
+  $menu-link-color-disabled:    $black-hint !default;
+  $menu-link-height:            3rem !default;
+  $menu-link-height-cascading:  2rem !default;
+  $menu-link-padding:           (($menu-link-height - $menu-line-height) / 2) $spacer-md-x !default;
+  $menu-link-padding-cascading: (($menu-link-height-cascading - $menu-line-height-cascading) / 2) $spacer-lg-x !default;
+  $menu-padding-y:              $spacer-sm-y !default;
+  $menu-padding-y-cascading:    $spacer-md-y !default;
+
+//
+// navigation drawer
+// based on https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-specs
+//
+  $navdrawer-backdrop-bg:             $dialog-backdrop-bg !default;
+  $navdrawer-border-color:            $border-color !default;
+  $navdrawer-border-width:            $border-width !default;
+  $navdrawer-content-bg:              $dialog-content-bg !default;
+  $navdrawer-divider-bg:              $black-divider !default;
+  $navdrawer-elevation-shadow:        $elevation-shadow-16dp !default;
+  $navdrawer-gutter-width:            $toolbar-height !default;
+  $navdrawer-header-bg:               $offwhite !default;
+  $navdrawer-header-border-color:     $border-color !default;
+  $navdrawer-header-border-width:     $border-width !default;
+  $navdrawer-inner-spacer-x:          $spacer-md-x !default;
+  $navdrawer-inner-spacer-y:          $spacer-sm-y !default;
+  $navdrawer-nav-icon-color:          $black-secondary !default;
+  $navdrawer-nav-icon-width:          $toolbar-height !default;
+  $navdrawer-nav-link-bg-active:      $offwhite !default;
+  $navdrawer-nav-link-color:          $black-primary !default;
+  $navdrawer-nav-link-color-active:   $brand-color !default;
+  $navdrawer-nav-link-color-disabled: $black-hint !default;
+  $navdrawer-nav-link-font-size:      0.875rem !default;
+  $navdrawer-nav-link-font-weight:    $font-weight-medium !default;
+  $navdrawer-nav-link-height:         3rem !default;
+  $navdrawer-subheader-color:         $black-hint !default;
+  $navdrawer-subheader-font-size:     0.875rem !default;
+  $navdrawer-subheader-font-weight:   $font-weight-medium !default;
+  $navdrawer-subheader-height:        3rem !default;
+  $navdrawer-width-mobile:            17.5rem !default;
+  $navdrawer-width-tablet:            20rem !default;
+
+//
+// picker
+// based on https://material.google.com/components/pickers.html#pickers-date-pickers
+//
+  $picker-cell-size:          2.5rem !default;
+  $picker-content-bg:         $dialog-content-bg !default;
+  $picker-day-bg-selected:    $brand-color !default;
+  $picker-day-color-disabled: $black-hint !default;
+  $picker-day-color-selected: $brand-text-color !default;
+  $picker-day-color-today:    $brand-color !default;
+  $picker-elevation-shadow:   $dialog-elevation-shadow !default;
+  $picker-header-bg:          $brand-color !default;
+  $picker-header-color:       $brand-text-color !default;
+  $picker-header-padding:     $spacer-md-y $spacer-lg-x !default;
+  $picker-holder-bg:          $dialog-backdrop-bg !default;
+  $picker-inner-spacer-x:     $spacer-sm-x !default;
+  $picker-inner-spacer-y:     $spacer-sm-y !default;
+  $picker-margin-x:           $dialog-margin-x !default;
+  $picker-margin-y:           $dialog-margin-y !default;
+  $picker-nav-next-icon:      "keyboard_arrow_right" !default;
+  $picker-nav-prev-icon:      "keyboard_arrow_left" !default;
+  $picker-weekday-color:      $black-hint !default;
+
+//
+// progress
+// based on https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators
+//
+  $progress-bar-color:              $palette-indigo-500 !default;
+  $progress-height:                 0.25rem !default;
+  $progress-margin-bottom:          $spacer-md-y !default;
+
+  // circular
+  $progress-circular-color:         $progress-bar-color !default;
+  $progress-circular-height:        2.5rem !default;
+  $progress-circular-spinner-width: 0.25rem !default;
+
+//
+// selection control
+// based on https://material.google.com/components/selection-controls.html
+//
+  $selection-control-checkbox-bg:                  url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.54' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
+  $selection-control-checkbox-bg-checked:          url("data:image/svg+xml;charset=utf8,%3Csvg fill='#{$brand-color-accent}' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") !default;
+  $selection-control-checkbox-bg-disabled:         url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.26' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
+  $selection-control-checkbox-bg-disabled-checked: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.26' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") !default;
+  $selection-control-checkbox-bg-indeterminate:    url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.54' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath d='M0 0h24v24H0z' id='a'/%3E%3C/defs%3E%3CclipPath id='b'%3E%3Cuse overflow='visible' xlink:href='#a'/%3E%3C/clipPath%3E%3Cpath clip-path='url(#b)' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z'/%3E%3C/svg%3E") !default;
+  $selection-control-color:                        $black-secondary !default;
+  $selection-control-color-active:                 $brand-color-accent !default;
+  $selection-control-color-disabled:               rgba(0, 0, 0, 0.26) !default;
+  $selection-control-indicator-size:               $material-icon-size !default;
+  $selection-control-radial-bg:                    $black-divider !default;
+  $selection-control-radio-bg:                     url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.54' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
+  $selection-control-radio-bg-checked:             url("data:image/svg+xml;charset=utf8,%3Csvg fill='#{$brand-color-accent}' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
+  $selection-control-radio-bg-disabled:            url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.26' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
+  $selection-control-radio-bg-disabled-checked:    url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' fill-opacity='0.26' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
+  $selection-control-spacer-x:                     ($material-icon-size / $font-size-root / 2 * 1rem) !default;
+  $selection-control-spacer-y:                     ($material-icon-size / $font-size-root / 2 * 1rem) !default;
+  $selection-control-thumb-bg:                     $offwhite-light !default;
+  $selection-control-thumb-bg-disabled:            #bdbdbd !default;
+  $selection-control-thumb-shadow:                 0 1px 5px 0 rgba(0, 0, 0, 0.6) !default;
+  $selection-control-track-bg:                     $black-hint !default;
+  $selection-control-track-bg-disabled:            $black-divider !default;
+  $selection-control-track-height:                 $font-size-root !default;
+  $selection-control-track-width:                  ($selection-control-indicator-size * 2) !default;
+
+//
+// stepper
+// based on https://material.google.com/components/steppers.html#steppers-specs
+//
+  $stepper-bg:                $white-primary !default;
+  $stepper-border-color:      $palette-grey-400 !default;
+  $stepper-border-width:      $border-width !default;
+  $stepper-icon-bg:           $black-hint !default;
+  $stepper-icon-bg-active:    $brand-color !default;
+  $stepper-icon-color:        $white-primary !default;
+  $stepper-icon-color-active: $brand-text-color !default;
+  $stepper-icon-font-size:    0.75rem !default;
+  $stepper-icon-font-weight:  $font-weight-regular !default;
+  $stepper-icon-height:       ($material-icon-size / $font-size-root * 1rem) !default;
+  $stepper-inner-spacer:      $spacer-sm !default;
+  $stepper-padding-x:         $spacer-lg-x !default;
+  $stepper-padding-y:         $spacer-lg-y !default;
+  $stepper-text-color:        $black-hint !default;
+  $stepper-text-color-active: $black-primary !default;
+  $stepper-text-font-size:    0.875rem !default;
+  $stepper-text-font-weight:  $font-weight-regular !default;
+
+//
+// tab (nav-tab)
+// based on https://material.google.com/components/tabs.html#tabs-specs
+//
+  $nav-tab-border-color:      $black-divider !default;
+  $nav-tab-indicator-bg:      $brand-color-accent !default;
+  $nav-tab-indicator-height:  2px !default;
+  $nav-tab-link-font-size:    0.875rem !default;
+  $nav-tab-link-font-weight:  $font-weight-medium !default;
+  $nav-tab-link-height:       3rem !default;
+  $nav-tab-link-opacity:      0.7 !default;
+  $nav-tab-link-max-width:    16.5rem !default;
+  $nav-tab-link-min-width:    4.5rem !default;
+  $nav-tab-link-min-width-lg: 10rem !default;
+  $nav-tab-link-padding-x:    0.75rem !default;
+  $nav-tab-link-padding-x-lg: 1.5rem !default;
+
+//
+// text field (form)
+// based on https://material.google.com/components/text-fields.html#text-fields-single-line-text-field
+//
+  $textfield-border-color:       $border-color !default;
+  $textfield-border-color-focus: $brand-color !default;
+  $textfield-border-width:       $border-width !default;
+  $textfield-color:              $black-primary !default;
+  $textfield-color-disabled:     $black-hint !default;
+  $textfield-hint-color:         $black-hint !default;
+
+  // size
+  $textfield-font-size:          1rem !default;
+  $textfield-font-size-lg:       2.125rem !default;
+  $textfield-font-size-sm:       0.8125rem !default;
+  $textfield-height:             2.5rem !default;
+  $textfield-height-lg:          3.75rem !default;
+  $textfield-height-sm:          2.25rem !default;
+  $textfield-line-height:        1.5rem !default;
+  $textfield-line-height-lg:     2.5rem !default;
+  $textfield-line-height-sm:     1.125rem !default;
+  $textfield-margin-bottom:      0.5rem !default;
+  $textfield-margin-bottom-lg:   0.75rem !default;
+  $textfield-margin-bottom-sm:   0.25rem !default;
+  $textfield-padding-top:        0.75rem !default;
+  $textfield-padding-top-lg:     0.875rem !default;
+  $textfield-padding-top-sm:     0.625rem !default;
+
+//
+// text field: floating label (form: floating label)
+// based on https://material.google.com/components/text-fields.html#text-fields-labels
+//
+  $floating-label-color:              $textfield-hint-color !default;
+  $floating-label-color-focus:        $brand-color !default;
+  $floating-label-font-size-focus:    0.75rem !default;
+
+  // size
+  $floating-label-divider-padding:    0.5rem !default;
+  $floating-label-divider-padding-lg: 0.75rem !default;
+  $floating-label-divider-padding-sm: 0.25rem !default;
+  $floating-label-height:             4rem !default;
+  $floating-label-height-lg:          5.25rem !default;
+  $floating-label-height-sm:          3.5rem !default;
+  $floating-label-padding-top:        1rem !default;
+  $floating-label-padding-top-lg:     1.25rem !default;
+  $floating-label-padding-top-sm:     0.75rem !default;
+
+//
+// tooltip
+// based on https://material.google.com/components/tooltips.html#tooltips-tooltips-desktop
+//
+  $tooltip-bg:              $palette-grey-700 !default;
+  $tooltip-color:           $white-primary !default;
+  $tooltip-font-size:       0.875rem !default;
+  $tooltip-font-size-md-up: 0.625rem !default;
+  $tooltip-height:          2rem !default;
+  $tooltip-height-md-up:    1.375rem !default;
+  $tooltip-margin:          $spacer-lg-y !default;
+  $tooltip-margin-md-up:    0.875rem !default;
+  $tooltip-opacity:         0.9 !default;
+  $tooltip-padding-x:       $spacer-md-x !default;
+  $tooltip-padding-x-md-up: $spacer-sm-x !default;
+  $tooltip-padding-y:       (($tooltip-height - $line-height-base * $tooltip-font-size) / 2) !default;
+  $tooltip-padding-y-md-up: (($tooltip-height-md-up - $line-height-base * $tooltip-font-size-md-up) / 2) !default;
+  $tooltip-zindex:          $elevation-24dp !default;
+
+//
+// waves
+//
+  $waves-bg:       $black-hint !default;
+  $waves-bg-light: $white-hint !default;
+  $waves-size:     4rem !default;