material-sass 4.0.0.beta → 4.0.0.beta2

data/{app/assets → assets}/stylesheets/material/variables/_grid.scss

@@ -10,8 +10,6 @@ $grid-gutter-widths: (
   xl: $grid-gutter-width-desktop
 ) !default;
 
-
-
 // Breakpoint
 // Based on https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
 
@@ -26,8 +24,6 @@ $grid-breakpoints: (
 @include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
 @include _assert-starts-at-zero($grid-breakpoints);
 
-
-
 // Container width
 // Based on https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints
 

data/assets/stylesheets/material/variables/_palette.scss

@@ -0,0 +1,66 @@
+// Theme palette
+// Change these values to customise colour palettes
+
+$primary: (
+  color:   $material-color-purple-500,
+  darker:  $material-color-purple-700,
+  lighter: $material-color-purple-100
+) !default;
+
+$secondary: (
+  color:   $material-color-pink-a200,
+  darker:  $material-color-pink-a400,
+  lighter: $material-color-pink-a100
+) !default;
+
+$danger: (
+  color:   $material-color-red-500,
+  darker:  $material-color-red-700,
+  lighter: $material-color-red-100
+) !default;
+
+$info: (
+  color:   $material-color-blue-500,
+  darker:  $material-color-blue-700,
+  lighter: $material-color-blue-100
+) !default;
+
+$success: (
+  color:   $material-color-green-500,
+  darker:  $material-color-green-700,
+  lighter: $material-color-green-100
+) !default;
+
+$warning: (
+  color:   $material-color-orange-500,
+  darker:  $material-color-orange-700,
+  lighter: $material-color-orange-100
+) !default;
+
+$dark: (
+  color:   $material-color-grey-800,
+  darker:  $material-color-grey-900,
+  lighter: $material-color-grey-600
+) !default;
+
+$light: (
+  color:   $material-color-grey-100,
+  darker:  $material-color-grey-300,
+  lighter: $material-color-grey-050
+) !default;
+
+$theme-colors: () !default;
+
+$theme-colors: map-merge(
+  (
+    'primary':   $primary,
+    'secondary': $secondary,
+    'danger':    $danger,
+    'info':      $info,
+    'success':   $success,
+    'warning':   $warning,
+    'dark':      $dark,
+    'light':     $light
+  ),
+  $theme-colors
+);

data/{app/assets → assets}/stylesheets/material/variables/_spacer.scss

@@ -1,10 +1,7 @@
-$border-color:         $black-divider !default;
-$border-color-inverse: $white-divider !default;
-$border-color-solid:   $black-divider-solid !default;
-$border-radius:        2px !default;
-$border-width:         1px !default;
-
-
+$border-color:       $black-divider !default;
+$border-color-solid: $black-divider-solid !default;
+$border-radius:      2px !default;
+$border-width:       1px !default;
 
 $sizes: (
   25: 25%,
@@ -13,12 +10,10 @@ $sizes: (
   100: 100%
 ) !default;
 
-
-
 $spacer:      1rem !default;
 
-$spacer-xs:   ($spacer * .25) !default;
-$spacer-sm:   ($spacer * .5) !default;
+$spacer-xs:   ($spacer * 0.25) !default;
+$spacer-sm:   ($spacer * 0.5) !default;
 $spacer-lg:   ($spacer * 1.5) !default;
 $spacer-xl:   ($spacer * 3) !default;
 

data/assets/stylesheets/material/variables/_transition.scss

@@ -0,0 +1,27 @@
+// The movement of an element is based on https://material.google.com/motion/movement.html
+
+// Transition duration
+// Based on https://material.google.com/motion/duration-easing.html#duration-easing-common-durations
+
+$transition-duration-desktop:          0.2s !default;
+$transition-duration-desktop-complex:  0.25s !default;
+$transition-duration-desktop-entering: 0.15s !default;
+$transition-duration-desktop-leaving:  0.13s !default;
+
+$transition-duration-mobile:           0.3s !default;
+$transition-duration-mobile-complex:   0.375s !default;
+$transition-duration-mobile-entering:  0.225s !default;
+$transition-duration-mobile-leaving:   0.195s !default;
+
+$transition-duration-tablet:           0.39s !default;
+$transition-duration-tablet-complex:   0.4875s !default;
+$transition-duration-tablet-entering:  0.2925s !default;
+$transition-duration-tablet-leaving:   0.2535s !default;
+
+// Transition timing function
+// Based on https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
+
+$transition-timing-function-acceleration: cubic-bezier(0.4, 0, 1, 1) !default;
+$transition-timing-function-deceleration: cubic-bezier(0, 0, 0.2, 1) !default;
+$transition-timing-function-sharp:        cubic-bezier(0.4, 0, 0.6, 1) !default;
+$transition-timing-function-standard:     cubic-bezier(0.4, 0, 0.2, 1) !default;

data/{app/assets → assets}/stylesheets/material/variables/_typography.scss

@@ -2,17 +2,17 @@
 
 $font-size-root: 16px !default;
 
-
-
 // Font face
 // Based on https://material.google.com/style/typography.html#typography-typeface
 
 // N.B. Although some values are not used in this project
 // we leave them here just in case they may be required by your project
 
-$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;
+// stylelint-disable value-keyword-case
+$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;
+// stylelint-enable
 
 $font-family-base:       $font-family-sans-serif !default;
 
@@ -23,23 +23,21 @@ $font-weight-light:      300 !default;
 
 $font-weight-base:       $font-weight-regular !default;
 
-
-
 // Font styles
 // Based on https://material.google.com/style/typography.html#typography-styles
 
-$font-size-base:            .875rem !default;   // 14px
+$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:          .875rem !default;   // 14px
-$font-size-body-1:          .875rem !default;   // 14px
-$font-size-caption:         .75rem !default;    // 12px
+$font-size-display-4:       ($font-size-base * 8) !default;        // 112px
+$font-size-display-3:       ($font-size-base * 4) !default;        // 56px
+$font-size-display-2:       ($font-size-base * 3.214286) !default; // 45px
+$font-size-display-1:       ($font-size-base * 2.428571) !default; // 34px
+$font-size-headline:        ($font-size-base * 1.714286) !default; // 24px
+$font-size-title:           ($font-size-base * 1.428571) !default; // 20px
+$font-size-subheading:      ($font-size-base * 1.142857) !default; // 16px
+$font-size-body-2:          ($font-size-base * 1) !default;        // 14px
+$font-size-body-1:          ($font-size-base * 1) !default;        // 14px
+$font-size-caption:         ($font-size-base * 0.857143) !default; // 12px
 
 $font-weight-display-4:     $font-weight-light !default;
 $font-weight-display-3:     $font-weight-regular !default;
@@ -52,19 +50,17 @@ $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:  -.04em !default;
-$letter-spacing-display-3:  -.02em !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:      .02em !default;
-$letter-spacing-subheading: .04em !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
 
@@ -81,8 +77,6 @@ $line-height-body-2:     1.428572 !default; // 20px
 $line-height-body-1:     1.428572 !default; // 20px
 $line-height-caption:    1.5 !default;      // 18px
 
-
-
-// Default Material icons font size
+// Material icons default size
 
 $material-icon-size: (24px / $font-size-root * 1rem) !default;

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

@@ -1,75 +1,61 @@
 // Alert
 
 $alert-border-radius:    $border-radius !default;
-$alert-elevation-shadow: $elevation-shadow-1dp !default;
 $alert-link-font-weight: $font-weight-medium !default;
 $alert-margin-y:         $spacer !default;
 $alert-padding-x:        1rem !default;
 $alert-padding-y:        1rem !default;
 
-
-
 // Badge
 
-$badge-bg:            $black-divider !default;
 $badge-border-radius: $border-radius !default;
-$badge-color:         $black-primary !default;
 $badge-font-weight:   $font-weight-medium !default;
-$badge-padding-x:     .5rem !default;
-$badge-padding-y:     0 !default;
-
-
+$badge-padding-x:     0.5em !default;
 
 // Body
 
 $body-bg:    $white-primary !default;
 $body-color: $black-primary !default;
 
-
-
 // Breadcrumb
 
 $breadcrumb-bg:               $material-color-grey-100 !default;
 $breadcrumb-border-radius:    $border-radius !default;
 $breadcrumb-height:           3.5rem !default;
-$breadcrumb-inner-spacer-x:   .5rem !default;
+$breadcrumb-inner-spacer-x:   0.5rem !default;
 $breadcrumb-item-color:       $black-secondary !default;
 $breadcrumb-item-color-hover: $black-primary !default;
 $breadcrumb-item-icon:        'chevron_right' !default;
 $breadcrumb-margin-y:         $spacer !default;
 $breadcrumb-padding-x:        1rem !default;
-$breadcrumb-padding-y:        .625rem !default;
-
-
+$breadcrumb-padding-y:        0.625rem !default;
 
 // Caret
 
-$caret-bg:          str-replace(url('data:image/svg+xml;charset=utf8,%3Csvg fill="#{$black}" fill-opacity="#{$black-secondary-opacity}" 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'), '#', '%23') !default;
-$caret-icon:        'expand_more' !default;
-$caret-icon-dropup: 'expand_less' !default;
-$caret-spacer-x:    .2em !default;
-
-
+$caret-bg:         str-replace(url('data:image/svg+xml;charset=utf8,%3Csvg fill="#{$black}" fill-opacity="#{$black-secondary-opacity}" 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'), '#', '%23') !default;
+$caret-icon:       'expand_more' !default;
+$caret-icon-left:  'keyboard_arrow_left' !default;
+$caret-icon-right: 'keyboard_arrow_right' !default;
+$caret-icon-up:    'expand_less' !default;
+$caret-spacer-x:   0.2em !default;
 
 // Carousel
 
 $carousel-caption-color:                   $white-primary !default;
 $carousel-caption-width:                   50% !default;
 $carousel-control-bg:                      $white-divider !default;
-$carousel-control-bg-hover:                rgba(204, 204, 204, .25) !default;
+$carousel-control-bg-hover:                rgba(204, 204, 204, 0.25) !default;
 $carousel-control-color:                   $white-primary !default;
 $carousel-control-elevation-shadow:        $elevation-shadow-6dp !default;
 $carousel-control-elevation-shadow-active: $elevation-shadow-12dp !default;
-$carousel-control-font-size:               .8125rem !default;
+$carousel-control-font-size:               0.8125rem !default;
 $carousel-control-next-icon:               'chevron_right' !default;
 $carousel-control-prev-icon:               'chevron_left' !default;
 $carousel-control-size:                    2.5rem !default;
-$carousel-indicator-bg:                    rgba(204, 204, 204, .25) !default;
+$carousel-indicator-bg:                    rgba(204, 204, 204, 0.25) !default;
 $carousel-indicator-border-color:          $white-divider !default;
 $carousel-indicator-border-width:          $border-width !default;
-$carousel-indicator-size:                  .5rem !default;
-
-
+$carousel-indicator-size:                  0.5rem !default;
 
 // Close
 
@@ -78,16 +64,14 @@ $close-color-hover: $black-primary !default;
 $close-font-size:   $material-icon-size !default;
 $close-font-weight: $font-weight-light !default;
 
-
-
 // Code
 
 $code-bg:                   $material-color-grey-100 !default;
 $code-border-radius:        $border-radius !default;
 $code-color:                #bd4147 !default;
 $code-font-size:            87.5% !default;
-$code-padding-x:            .4rem !default;
-$code-padding-y:            .2rem !default;
+$code-padding-x:            0.4rem !default;
+$code-padding-y:            0.2rem !default;
 
 $kbd-bg:                    $black-primary !default;
 $kbd-color:                 $white-primary !default;
@@ -96,8 +80,6 @@ $pre-color:                 $black-primary !default;
 $pre-margin-y:              $spacer !default;
 $pre-scrollable-max-height: 340px !default;
 
-
-
 // Form
 
 $custom-file-button-icon:     'attachment' !default;
@@ -114,8 +96,6 @@ $form-group-margin-y:         $spacer !default;
 
 $input-group-addon-margin-x:  1rem !default;
 
-
-
 // Jumbotron
 
 $jumbotron-bg:               $white-primary !default;
@@ -125,21 +105,17 @@ $jumbotron-elevation-shadow: $elevation-shadow-2dp !default;
 $jumbotron-padding-x:        2rem !default;
 $jumbotron-padding-y:        3rem !default;
 
-
-
 // Link
 
 $link-color:            map-get(theme-color(primary), color) !default;
 $link-color-hover:      map-get(theme-color(primary), darker) !default;
 $link-decoration:       none !default;
-$link-decoration-hover: none !default;
-
-
+$link-decoration-hover: underline !default;
 
 // Misc
 
 $blockquote-border-color:    map-get(theme-color(primary), color) !default;
-$blockquote-border-width:    .3125rem !default;
+$blockquote-border-width:    0.3125rem !default;
 $blockquote-small-color:     $black-hint !default;
 
 $dt-font-weight:             $font-weight-medium !default;
@@ -158,7 +134,7 @@ $list-inline-inner-spacer-x: $spacer-sm !default;
 
 $mark-bg:                    $material-color-yellow-500 !default;
 $mark-color:                 $black-primary !default;
-$mark-padding:               .2em !default;
+$mark-padding:               0.2em !default;
 
 $paragraph-margin-y:         $spacer !default;
 
@@ -172,21 +148,17 @@ $thumbnail-box-shadow:       $shadow-2dp !default;
 
 $webkit-tap-highlight-color: rgba(0, 0, 0, 0) !default;
 
-
-
 // Nav
 
 $nav-link-color-disabled: $black-hint !default;
 $nav-link-padding-x:      1rem !default;
-$nav-link-padding-y:      .5rem !default;
+$nav-link-padding-y:      0.5rem !default;
 
 $nav-pills-bg-hover:      $black-divider !default;
 $nav-pills-border-radius: $border-radius !default;
 $nav-pills-color:         $black-primary !default;
 $nav-pills-color-active:  map-get(theme-color(secondary), color) !default;
-$nav-pills-link-opacity:  .7 !default;
-
-
+$nav-pills-link-opacity:  0.7 !default;
 
 // Pagination
 
@@ -195,5 +167,5 @@ $pagination-border-radius:  $border-radius !default;
 $pagination-color:          $black-primary !default;
 $pagination-color-disabled: $black-hint !default;
 $pagination-inner-spacer-x: 1px !default;
-$pagination-padding-x:      .5rem !default;
-$pagination-padding-y:      .625rem !default;
+$pagination-padding-x:      0.5rem !default;
+$pagination-padding-y:      0.625rem !default;

data/{app/assets → assets}/stylesheets/material/variables/_variable-material.scss

@@ -3,15 +3,15 @@
 
 // N.B. Material design only specifies specs for default button (.btn) and dense button (.btn-sm)
 
-$btn-bg-active:               rgba(153, 153, 153, .4) !default;
-$btn-bg-active-inverse:       rgba(204, 204, 204, .25) !default;
+$btn-bg-active:               rgba(153, 153, 153, 0.4) !default;
+$btn-bg-active-inverse:       rgba(204, 204, 204, 0.25) !default;
 $btn-bg-disabled:             $black-divider !default;
 $btn-bg-disabled-inverse:     $white-divider !default;
 $btn-border-radius:           $border-radius !default;
 $btn-block-margin-y:          $spacer-xs !default;
 $btn-color:                   $black-primary !default;
-$btn-color-disabled:          rgba(0, 0, 0, .26) !default;
-$btn-color-disabled-inverse:  rgba(255, 255, 255, .3) !default;
+$btn-color-disabled:          rgba(0, 0, 0, 0.26) !default;
+$btn-color-disabled-inverse:  rgba(255, 255, 255, 0.3) !default;
 $btn-elevation-shadow:        $elevation-shadow-2dp !default;
 $btn-elevation-shadow-active: $elevation-shadow-8dp !default;
 $btn-font-weight:             $font-weight-medium !default;
@@ -20,10 +20,9 @@ $btn-min-width:               5.5rem !default;
 $btn-overlay:                 $black-divider !default;
 $btn-overlay-inverse:         $white-divider !default;
 
-// Size
-$btn-font-size:               .875rem !default;
-$btn-font-size-lg:            .9375rem !default;
-$btn-font-size-sm:            .8125rem !default;
+$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;
@@ -34,8 +33,6 @@ $btn-padding-y:               (($btn-height - $btn-font-size * $btn-line-height)
 $btn-padding-y-lg:            (($btn-height-lg - $btn-font-size-lg * $btn-line-height) / 2) !default;
 $btn-padding-y-sm:            (($btn-height-sm - $btn-font-size-sm * $btn-line-height) / 2) !default;
 
-
-
 // Button: floating action button
 // Based on https://material.google.com/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button
 
@@ -44,8 +41,6 @@ $btn-float-elevation-shadow-active: $elevation-shadow-12dp !default;
 $btn-float-size:                    3.5rem !default;
 $btn-float-size-sm:                 2.5rem !default;
 
-
-
 // Button: toggle buttons (Boostrap button group)
 // Based on https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons
 
@@ -53,17 +48,15 @@ $btn-group-bg:             $white-primary !default;
 $btn-group-divider-bg:     $border-color !default;
 $btn-group-inner-spacer-x: 1px !default;
 $btn-group-inner-spacer-y: 1px !default;
-$btn-group-toggle-opacity: .7 !default;
-
-
+$btn-group-toggle-opacity: 0.7 !default;
 
 // Card (Bootstrap card)
 // Based on https://material.google.com/components/cards.html#cards-usage
 
-$card-action-inner-spacer-x:  .5rem !default;
-$card-action-inner-spacer-y:  .5rem !default;
-$card-action-padding-x:       $card-action-inner-spacer-x !default;
-$card-action-padding-y:       $card-action-inner-spacer-y !default;
+$card-action-inner-spacer-x:  0.5rem !default;
+$card-action-inner-spacer-y:  0.25rem !default;
+$card-action-padding-x:       0.5rem !default;
+$card-action-padding-y:       0.5rem !default;
 $card-bg:                     $white !default;
 $card-border-radius:          $border-radius !default;
 $card-border-width:           $border-width !default;
@@ -78,8 +71,6 @@ $card-margin-y:               $spacer-sm !default;
 $card-padding-x:              1rem !default;
 $card-padding-y:              1.5rem !default;
 
-
-
 // Chip
 // Based on https://material.google.com/components/chips.html#chips-specs
 
@@ -87,16 +78,14 @@ $chip-bg:                     $material-color-grey-300 !default;
 $chip-bg-active:              $material-color-grey-400 !default;
 $chip-color:                  $black-primary !default;
 $chip-elevation-shadow-hover: $elevation-shadow-2dp !default;
-$chip-font-size:              .875rem !default;
+$chip-font-size:              0.875rem !default;
 $chip-font-weight:            $font-weight-regular !default;
 $chip-height:                 2rem !default;
 $chip-icon-bg:                map-get(theme-color(secondary), color) !default;
 $chip-icon-font-size:         1rem !default;
-$chip-inner-spacer-x:         .25rem !default;
+$chip-inner-spacer-x:         0.25rem !default;
 $chip-line-height:            1 !default;
-$chip-padding-x:              .75rem !default;
-
-
+$chip-padding-x:              0.75rem !default;
 
 // Data table (Bootstrap table)
 // Based on https://material.google.com/components/data-tables.html#data-tables-structure
@@ -112,15 +101,21 @@ $table-elevation-shadow:      $elevation-shadow-2dp !default;
 $table-line-height:           $line-height-base !default;
 $table-margin-y:              $spacer !default;
 
+$table-dark-bg:               $dark-theme-4 !default;
+$table-dark-bg-accent:        $dark-theme-3 !default;
+$table-dark-bg-hover:         $dark-theme-2 !default;
+$table-dark-border-color:     $dark-theme-3 !default;
+$table-dark-color:            $white-primary !default;
+
 $table-tbody-cell-height:     3rem !default;
 $table-tbody-color:           $black-primary !default;
-$table-tbody-font-size:       .8125rem !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 * $table-line-height) / 2) !default;
 
 $table-tfoot-cell-height:     3.5rem !default;
 $table-tfoot-color:           $black-secondary !default;
-$table-tfoot-font-size:       .75rem !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 * $table-line-height) / 2) !default;
 
@@ -131,67 +126,61 @@ $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 * $table-line-height) / 2) !default;
 
-// Size
 $table-sm-cell-padding-x:     1rem !default;
 $table-sm-cell-padding-x-alt: 1rem !default;
-
 $table-sm-tbody-cell-height:  2.25rem !default;
 $table-sm-tbody-padding-y:    (($table-sm-tbody-cell-height - $table-tbody-font-size * $table-line-height) / 2) !default;
-
 $table-sm-tfoot-cell-height:  2.5rem !default;
 $table-sm-tfoot-padding-y:    (($table-sm-tfoot-cell-height - $table-tfoot-font-size * $table-line-height) / 2) !default;
-
 $table-sm-thead-cell-height:  $table-sm-tfoot-cell-height !default;
 $table-sm-thead-padding-y:    (($table-sm-thead-cell-height - $table-thead-font-size * $table-line-height) / 2) !default;
 
-// Theme
-$table-dark-bg:               $dark-theme-4 !default;
-$table-dark-bg-accent:        $dark-theme-3 !default;
-$table-dark-bg-hover:         $dark-theme-2 !default;
-$table-dark-border-color:     $dark-theme-3 !default;
-$table-dark-color:            $white-primary !default;
-
-
-
 // Dialog (Bootstrap modal)
 // Based on https://material.google.com/components/dialogs.html#dialogs-specs
 
-$dialog-backdrop-bg:           $black-hint !default;
-$dialog-content-bg:            $white !default;
-$dialog-elevation-shadow:      $elevation-shadow-24dp !default;
-$dialog-footer-btn-min-width:  4rem !default;
-$dialog-footer-inner-spacer-x: .5rem !default;
-$dialog-footer-padding-x:      .5rem !default;
-$dialog-footer-padding-y:      .5rem !default;
-$dialog-margin-x:              $spacer-lg !default;
-$dialog-margin-y:              $spacer-lg !default;
-$dialog-padding-x:             1.5rem !default;
-$dialog-padding-y:             1.25rem !default;
-$dialog-scale:                 .87 !default;
-$dialog-width:                 35rem !default;
-$dialog-width-lg:              52.5rem !default;
-$dialog-width-sm:              17.5rem !default;
-
-
+$dialog-backdrop-bg:                  $black-hint !default;
+$dialog-border-radius:                $border-radius !default;
+$dialog-content-bg:                   $white !default;
+$dialog-elevation-shadow:             $elevation-shadow-24dp !default;
+$dialog-footer-btn-min-width:         4rem !default;
+$dialog-footer-btn-stacked-height:    3rem !default;
+$dialog-footer-btn-stacked-padding-x: 1rem !default;
+$dialog-footer-btn-stacked-padding-y: (($dialog-footer-btn-stacked-height - $btn-font-size * $btn-line-height) / 2) !default;
+$dialog-footer-inner-spacer-x:        0.5rem !default;
+$dialog-footer-padding-x:             0.5rem !default;
+$dialog-footer-padding-y:             0.5rem !default;
+$dialog-margin-x:                     $spacer-lg !default;
+$dialog-margin-y:                     $spacer-lg !default;
+$dialog-padding-x:                    1.5rem !default;
+$dialog-padding-y:                    1.25rem !default;
+$dialog-scale:                        0.87 !default;
+$dialog-width:                        35rem !default;
+$dialog-width-lg:                     52.5rem !default;
+$dialog-width-sm:                     17.5rem !default;
 
 // Expansion panel (Bootstrap list group)
 // Based on https://material.google.com/components/expansion-panels.html#expansion-panels-specs
 
-$expansion-panel-bg:               $white !default;
-$expansion-panel-bg-active:        $material-color-grey-200 !default;
-$expansion-panel-border-color:     $border-color !default;
-$expansion-panel-border-radius:    $border-radius !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-1dp !default;
-$expansion-panel-font-size:        .9375rem !default;
-$expansion-panel-height:           3rem !default;
-$expansion-panel-line-height:      $line-height-base !default;
-$expansion-panel-padding-x:        1.5rem !default;
-$expansion-panel-padding-y:        (($expansion-panel-height - $expansion-panel-font-size * $expansion-panel-line-height) / 2) !default;
-
-
+$expansion-panel-bg:                    $white !default;
+$expansion-panel-bg-active:             $material-color-grey-200 !default;
+$expansion-panel-border-color:          $border-color !default;
+$expansion-panel-border-radius:         $border-radius !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-1dp !default;
+$expansion-panel-font-size:             0.9375rem !default;
+$expansion-panel-footer-btn-min-width:  4rem !default;
+$expansion-panel-footer-inner-spacer-x: 0.5rem !default;
+$expansion-panel-footer-inner-spacer-y: 0.25rem !default;
+$expansion-panel-footer-padding-x:      0.5rem !default;
+$expansion-panel-height:                3rem !default;
+$expansion-panel-inner-spacer-x:        1rem !default;
+$expansion-panel-inner-spacer-y:        1rem !default;
+$expansion-panel-line-height:           $line-height-base !default;
+$expansion-panel-margin-y:              $spacer !default;
+$expansion-panel-padding-x:             1.5rem !default;
+$expansion-panel-padding-y:             (($expansion-panel-height - $expansion-panel-font-size * $expansion-panel-line-height) / 2) !default;
 
 // Menu (Bootstrap dropdown)
 // Based on https://material.google.com/components/menus.html#menus-specs
@@ -200,7 +189,8 @@ $menu-bg:                       $white !default;
 $menu-border-radius:            $border-radius !default;
 $menu-divider-bg:               $border-color !default;
 $menu-font-size:                1rem !default;
-$menu-font-size-cascading:      .9375rem !default;
+$menu-font-size-cascading:      0.9375rem !default;
+$menu-font-weight:              $font-weight-regular !default;
 $menu-elevation-shadow:         $elevation-shadow-8dp !default;
 $menu-header-color:             $black-primary !default;
 $menu-line-height:              1.5rem !default;
@@ -217,11 +207,9 @@ $menu-link-padding-y:           (($menu-link-height - $menu-line-height) / 2) !d
 $menu-link-padding-y-cascading: (($menu-link-height-cascading - $menu-line-height-cascading) / 2) !default;
 $menu-min-width:                7rem !default;
 $menu-min-width-cascading:      20rem !default;
-$menu-padding-y:                .5rem !default;
+$menu-padding-y:                0.5rem !default;
 $menu-padding-y-cascading:      1rem !default;
 
-
-
 // Navigation drawer
 // Based on https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-specs
 
@@ -236,24 +224,22 @@ $navdrawer-header-bg:               $material-color-grey-100 !default;
 $navdrawer-header-border-color:     $border-color !default;
 $navdrawer-header-border-width:     $border-width !default;
 $navdrawer-inner-spacer-x:          1rem !default;
-$navdrawer-inner-spacer-y:          .5rem !default;
+$navdrawer-inner-spacer-y:          0.5rem !default;
 $navdrawer-nav-icon-color:          $black-secondary !default;
 $navdrawer-nav-icon-width:          3.5rem !default;
 $navdrawer-nav-link-bg-hover:       $material-color-grey-100 !default;
 $navdrawer-nav-link-color:          $black-primary !default;
 $navdrawer-nav-link-color-active:   map-get(theme-color(primary), color) !default;
 $navdrawer-nav-link-color-disabled: $black-hint !default;
-$navdrawer-nav-link-font-size:      .875rem !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:     .875rem !default;
+$navdrawer-subheader-font-size:     0.875rem !default;
 $navdrawer-subheader-font-weight:   $font-weight-medium !default;
 $navdrawer-subheader-height:        3rem !default;
 $navdrawer-width:                   17.5rem !default;
 
-
-
 // Picker
 // Based on https://material.google.com/components/pickers.html#pickers-date-pickers
 
@@ -267,31 +253,26 @@ $picker-header-bg:          map-get(theme-color(primary), color) !default;
 $picker-header-padding-x:   1.5rem !default;
 $picker-header-padding-y:   1rem !default;
 $picker-holder-bg:          $dialog-backdrop-bg !default;
-$picker-inner-spacer-x:     .5rem !default;
-$picker-inner-spacer-y:     .5rem !default;
+$picker-inner-spacer-x:     0.5rem !default;
+$picker-inner-spacer-y:     0.5rem !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 (Bootstrap progress bar)
 // Based on https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators
 
 $progress-bar-bg:                      $material-color-indigo-500 !default;
-$progress-bar-border-radius:           .25rem !default;
-$progress-bar-height:                  .25rem !default;
+$progress-bar-border-radius:           0.25rem !default;
+$progress-bar-height:                  0.25rem !default;
 $progress-bg:                          $material-color-indigo-100 !default;
 
-// Circular
 $progress-circular-animation-duration: 5.332s !default;
 $progress-circular-bg:                 $material-color-indigo-500 !default;
 $progress-circular-height:             2.5rem !default;
-$progress-circular-spinner-width:      .25rem !default;
-
-
+$progress-circular-spinner-width:      0.25rem !default;
 
 // Selection control (Bootstrap custom form control)
 // Based on https://material.google.com/components/selection-controls.html
@@ -301,9 +282,9 @@ $selection-control-checkbox-icon-checked:       'check_box' !default;
 $selection-control-checkbox-icon-indeterminate: 'indeterminate_check_box' !default;
 $selection-control-color:                       $black-secondary !default;
 $selection-control-color-active:                map-get(theme-color(secondary), color) !default;
-$selection-control-color-disabled:              rgba(0, 0, 0, .26) !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-radial-opacity:              $black-divider-opacity !default;
 $selection-control-radio-icon:                  'radio_button_unchecked' !default;
 $selection-control-radio-icon-checked:          'radio_button_checked' !default;
 $selection-control-spacer-x:                    ($material-icon-size / 2) !default;
@@ -316,8 +297,6 @@ $selection-control-track-bg-disabled:           $black-divider !default;
 $selection-control-track-height:                1rem !default;
 $selection-control-track-width:                 ($selection-control-indicator-size * 2) !default;
 
-
-
 // Stepper
 // Based on https://material.google.com/components/steppers.html#steppers-specs
 
@@ -327,19 +306,17 @@ $stepper-border-width:      $border-width !default;
 $stepper-icon-bg:           $black-hint !default;
 $stepper-icon-bg-active:    map-get(theme-color(primary), color) !default;
 $stepper-icon-color:        $white-primary !default;
-$stepper-icon-font-size:    .75rem !default;
+$stepper-icon-font-size:    0.75rem !default;
 $stepper-icon-font-weight:  $font-weight-regular !default;
 $stepper-icon-height:       $material-icon-size !default;
-$stepper-inner-spacer:      .5rem !default;
+$stepper-inner-spacer:      0.5rem !default;
 $stepper-padding-x:         1.5rem !default;
 $stepper-padding-y:         1.5rem !default;
 $stepper-text-color:        $black-hint !default;
 $stepper-text-color-active: $black-primary !default;
-$stepper-text-font-size:    .875rem !default;
+$stepper-text-font-size:    0.875rem !default;
 $stepper-text-font-weight:  $font-weight-regular !default;
 
-
-
 // Tab (Bootstrap tab)
 // Based on https://material.google.com/components/tabs.html#tabs-specs
 
@@ -349,24 +326,22 @@ $nav-tab-border-width:     $border-width !default;
 $nav-tab-color:            $black-primary !default;
 $nav-tab-color-active:     map-get(theme-color(secondary), color) !default;
 $nav-tab-color-disabled:   $black-hint !default;
-$nav-tab-font-size:        .875rem !default;
+$nav-tab-font-size:        0.875rem !default;
 $nav-tab-font-weight:      $font-weight-medium !default;
 $nav-tab-height:           3rem !default;
 $nav-tab-indicator-bg:     map-get(theme-color(secondary), color) !default;
-$nav-tab-indicator-height: .125rem !default;
+$nav-tab-indicator-height: 0.125rem !default;
 $nav-tab-line-height:      1 !default;
-$nav-tab-link-opacity:     .7 !default;
-$nav-tab-link-padding-x:   .75rem !default;
+$nav-tab-link-opacity:     0.7 !default;
+$nav-tab-link-padding-x:   0.75rem !default;
 $nav-tab-link-padding-y:   (($nav-tab-height - $nav-tab-font-size * $nav-tab-line-height) / 2) !default;
 
-
-
 // Text field (Bootstrap form control)
 // Based on https://material.io/guidelines/components/text-fields.html#text-fields-states
 
-$textfield-border-color:       rgba(0, 0, 0, .42) !default;
+$textfield-border-color:       rgba(0, 0, 0, 0.42) !default;
 $textfield-border-color-focus: map-get(theme-color(primary), color) !default;
-$textfield-border-color-hover: rgba(0, 0, 0, .87) !default;
+$textfield-border-color-hover: rgba(0, 0, 0, 0.87) !default;
 $textfield-border-width:       $border-width !default;
 $textfield-border-width-focus: ($textfield-border-width * 2) !default;
 $textfield-border-width-hover: ($textfield-border-width * 2) !default;
@@ -376,19 +351,18 @@ $textfield-hint-color:         $black-hint !default;
 $textfield-line-height:        $line-height-base !default;
 $textfield-margin-x:           $spacer !default;
 
-// Size
 $textfield-font-size:          1rem !default;
 $textfield-font-size-lg:       2.125rem !default;
-$textfield-font-size-sm:       .8125rem !default;
+$textfield-font-size-sm:       0.8125rem !default;
 $textfield-height:             2.25rem !default;
 $textfield-height-lg:          3.75rem !default;
 $textfield-height-sm:          2rem !default;
 $textfield-line-height:        1.5 !default;
 $textfield-line-height-lg:     1.176471 !default;
 $textfield-line-height-sm:     1.384615 !default;
-$textfield-margin-y:           .5rem !default;
-$textfield-margin-y-lg:        .75rem !default;
-$textfield-margin-y-sm:        .25rem !default;
+$textfield-margin-y:           0.5rem !default;
+$textfield-margin-y-lg:        0.75rem !default;
+$textfield-margin-y-sm:        0.25rem !default;
 $textfield-padding-x:          0 !default;
 $textfield-padding-x-lg:       0 !default;
 $textfield-padding-x-sm:       0 !default;
@@ -396,31 +370,29 @@ $textfield-padding-y:          (($textfield-height - $textfield-font-size * $tex
 $textfield-padding-y-lg:       (($textfield-height-lg - $textfield-font-size-lg * $textfield-line-height-lg) / 2) !default;
 $textfield-padding-y-sm:       (($textfield-height-sm - $textfield-font-size-sm * $textfield-line-height-sm) / 2) !default;
 
-
-
 // Text field: box
 // Based on https://material.io/guidelines/components/text-fields.html#text-fields-text-field-boxes
 
-$textfield-box-border-radius: 4px !default;
-
-// Size
-$textfield-box-padding-x:     1rem !default;
-$textfield-box-padding-x-lg:  1rem !default;
-$textfield-box-padding-x-sm:  .75rem !default;
-$textfield-box-padding-y:     1.125rem !default;
-$textfield-box-padding-y-lg:  1.125rem !default;
-$textfield-box-padding-y-sm:  .75rem !default;
-
+$textfield-box-bg:             rgba(0, 0, 0, 0.06) !default;
+$textfield-box-border-radius:  4px !default;
 
+$textfield-box-height:         3.5rem !default;
+$textfield-box-height-lg:      4.25rem !default;
+$textfield-box-height-sm:      2.75rem !default;
+$textfield-box-label-spacer-y: 0.5rem !default;
+$textfield-box-padding-x:      1rem !default;
+$textfield-box-padding-x-lg:   1rem !default;
+$textfield-box-padding-x-sm:   0.75rem !default;
+$textfield-box-padding-y:      (($textfield-box-height - $textfield-font-size * $textfield-line-height) / 2) !default;
+$textfield-box-padding-y-lg:   (($textfield-box-height-lg - $textfield-font-size-lg * $textfield-line-height-lg) / 2) !default;
+$textfield-box-padding-y-sm:   (($textfield-box-height-sm - $textfield-font-size-sm * $textfield-line-height-sm) / 2) !default;
 
 // Text field: 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:     map-get(theme-color(primary), color) !default;
-$floating-label-font-size-focus: .75rem !default;
-
-
+$floating-label-font-size-focus: 0.75rem !default;
 
 // Toolbar (Bootstrap navbar)
 // Based on https://material.google.com/components/toolbars.html#toolbars-usage
@@ -430,7 +402,7 @@ $toolbar-color-lighter:         $black-hint !default;
 $toolbar-element-bg:            $black-divider !default;
 $toolbar-element-border-radius: $border-radius !default;
 $toolbar-element-height:        2.25rem !default;
-$toolbar-element-opacity:       .7 !default;
+$toolbar-element-opacity:       0.7 !default;
 $toolbar-elevation-shadow:      $elevation-shadow-4dp !default;
 $toolbar-height:                3.5rem !default;
 $toolbar-inner-spacer-x:        1rem !default;
@@ -445,35 +417,30 @@ $toolbar-padding-y:             (($toolbar-height - $toolbar-element-height) / 2
 $toolbar-toggler-icon:          'menu' !default;
 $toolbar-waterfall-bg:          map-get(theme-color(primary), color) !default;
 
-// Theme
 $toolbar-dark-color:            $white-primary !default;
 $toolbar-dark-color-lighter:    $white-hint !default;
 $toolbar-dark-element-bg:       $white-divider !default;
 
-
-
 // Tooltip (Bootstrap tooltip)
 // Based on https://material.google.com/components/tooltips.html#tooltips-tooltips-desktop
 
 $tooltip-bg:                $material-color-grey-700 !default;
 $tooltip-color:             $white-primary !default;
-$tooltip-font-size:         .875rem !default;
-$tooltip-font-size-desktop: .625rem !default;
+$tooltip-font-size:         0.875rem !default;
+$tooltip-font-size-desktop: 0.625rem !default;
 $tooltip-height:            2rem !default;
 $tooltip-height-desktop:    1.375rem !default;
 $tooltip-line-height:       $line-height-base !default;
 $tooltip-margin:            1.5rem !default;
-$tooltip-margin-desktop:    .875rem !default;
-$tooltip-opacity:           .9 !default;
+$tooltip-margin-desktop:    0.875rem !default;
+$tooltip-opacity:           0.9 !default;
 $tooltip-padding-x:         1rem !default;
-$tooltip-padding-x-desktop: .5rem !default;
+$tooltip-padding-x-desktop: 0.5rem !default;
 $tooltip-padding-y:         (($tooltip-height - $tooltip-font-size * $tooltip-line-height) / 2) !default;
 $tooltip-padding-y-desktop: (($tooltip-height-desktop - $tooltip-font-size-desktop * $tooltip-line-height) / 2) !default;
-$tooltip-scale:             .87 !default;
+$tooltip-scale:             0.87 !default;
 $tooltip-zindex:            $elevation-24dp !default;
 
-
-
 // Waves
 
 $waves-bg:       $black-divider !default;