material-sass 4.0.0.alpha6 → 4.0.0.beta

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

@@ -10,29 +10,32 @@ $grid-gutter-widths: (
   xl: $grid-gutter-width-desktop
 ) !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: 1920px
-  ) !default;
-
-  @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-  @include _assert-starts-at-zero($grid-breakpoints);
-
-//
-// container
-//
-  $container-max-widths: (
-    sm: 600px,
-    md: 840px,
-    lg: 1024px,
-    xl: 1600px
-  ) !default;
-
-  @include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// 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: 1920px
+) !default;
+
+@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
+
+$container-max-widths: (
+  sm: 600px,
+  md: 840px,
+  lg: 1024px,
+  xl: 1600px
+) !default;
+
+@include _assert-ascending($container-max-widths, '$container-max-widths');

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

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

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

@@ -1,92 +1,38 @@
-//
-// border
-//
-  $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-inverse: $white-divider !default;
+$border-color-solid:   $black-divider-solid !default;
+$border-radius:        2px !default;
+$border-width:         1px !default;
 
-//
-// size
-//
-  $sizes: (
-    25: 25%,
-    50: 50%,
-    75: 75%,
-    100: 100%
-  ) !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;
+$sizes: (
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
+) !default;
 
-  $spacers: (
-    0: (
-      x: 0,
-      y: 0
-    ),
-    no: (
-      x: 0,
-      y: 0
-    ),
-    1: (
-      x: $spacer-xs-x,
-      y: $spacer-xs-y
-    ),
-    xs: (
-      x: $spacer-xs-x,
-      y: $spacer-xs-y
-    ),
-    2: (
-      x: $spacer-sm-x,
-      y: $spacer-sm-y
-    ),
-    sm: (
-      x: $spacer-sm-x,
-      y: $spacer-sm-y
-    ),
-    3: (
-      x: $spacer-x,
-      y: $spacer-y
-    ),
-    md: (
-      x: $spacer-x,
-      y: $spacer-y
-    ),
-    4: (
-      x: $spacer-lg-x,
-      y: $spacer-lg-y
-    ),
-    lg: (
-      x: $spacer-lg-x,
-      y: $spacer-lg-y
-    ),
-    5: (
-      x: $spacer-xl-x,
-      y: $spacer-xl-y
-    ),
-    xl: (
-      x: $spacer-xl-x,
-      y: $spacer-xl-y
-    )
-  ) !default;
+
+
+$spacer:      1rem !default;
+
+$spacer-xs:   ($spacer * .25) !default;
+$spacer-sm:   ($spacer * .5) !default;
+$spacer-lg:   ($spacer * 1.5) !default;
+$spacer-xl:   ($spacer * 3) !default;
+
+$spacers: (
+  0: 0,
+  no: 0,
+  1: $spacer-xs,
+  xs: $spacer-xs,
+  2: $spacer-sm,
+  sm: $spacer-sm,
+  3: $spacer,
+  md: $spacer,
+  4: $spacer-lg,
+  lg: $spacer-lg,
+  5: $spacer-xl,
+  xl: $spacer-xl
+) !default;

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

@@ -0,0 +1,29 @@
+// 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:          .2s !default;
+$transition-duration-desktop-complex:  .25s !default;
+$transition-duration-desktop-entering: .15s !default;
+$transition-duration-desktop-leaving:  .13s !default;
+
+$transition-duration-mobile:           .3s !default;
+$transition-duration-mobile-complex:   .375s !default;
+$transition-duration-mobile-entering:  .225s !default;
+$transition-duration-mobile-leaving:   .195s !default;
+
+$transition-duration-tablet:           .39s !default;
+$transition-duration-tablet-complex:   .4875s !default;
+$transition-duration-tablet-entering:  .2925s !default;
+$transition-duration-tablet-leaving:   .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(.4, 0, 1, 1) !default;
+$transition-timing-function-deceleration: cubic-bezier(0, 0, .2, 1) !default;
+$transition-timing-function-sharp:        cubic-bezier(.4, 0, .6, 1) !default;
+$transition-timing-function-standard:     cubic-bezier(.4, 0, .2, 1) !default;

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

@@ -1,74 +1,88 @@
-// 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-weight-base:          $font-weight-regular !default;
-
-// 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;
+// 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
+
+// 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;
+
+$font-family-base:       $font-family-sans-serif !default;
+
+$font-weight-bold:       700 !default;
+$font-weight-medium:     500 !default;
+$font-weight-regular:    400 !default;
+$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-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-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:  -.04em !default;
+$letter-spacing-display-3:  -.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-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:  1 !default;        // 112px
+$line-height-display-3:  1.035715 !default; // 58px
+$line-height-display-2:  1.066667 !default; // 48px
+$line-height-display-1:  1.176471 !default; // 40px
+$line-height-headline:   1.333334 !default; // 32px
+$line-height-title:      1.4 !default;      // 28px
+$line-height-subheading: 1.5 !default;      // 24px
+$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-icon-size: (24px / $font-size-root * 1rem) !default;

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

@@ -1,136 +1,199 @@
-// 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:           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='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
-  $breadcrumb-height:            3.5rem !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:         0.625rem !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-control-icon-opacity: 0.38 !default;
-  $carousel-control-next-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !default;
-  $carousel-control-prev-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E") !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-button-bg:              url("data:image/svg+xml;charset=utf8,%3Csvg fill='#000000' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5C8.12 15 7 13.88 7 12.5S8.12 10 9.5 10H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z'/%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3C/svg%3E") !default;
-  $custom-file-button-opacity:         0.38 !default;
-  $custom-file-button-opacity-visible: 0.54 !default;
-  $custom-file-width:                  14rem !default;
-  $custom-file-text:                   (en: "Choose file...") !default;
-
-  $form-check-inline-margin-x:         $spacer-sm-x !default;
-  $form-check-input-margin-x:          $spacer-xs-x !default;
-
-  $form-group-label-font-size:         $font-size-caption !default;
-  $form-group-margin-bottom:           $spacer-lg-y !default;
-
-  $input-group-addon-margin-x:         $spacer-md-x !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-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;
+// Alert
 
-// pagination
-  $pagination-bg:        $btn-group-bg !default;
-  $pagination-padding-x: $btn-group-padding-x !default;
-  $pagination-padding-y: $btn-group-padding-y !default;
+$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;
 
-// 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;
+
+// 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;
+
+
+
+// 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-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;
+
+
+
+// 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;
+
+
+
+// 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-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-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-border-color:          $white-divider !default;
+$carousel-indicator-border-width:          $border-width !default;
+$carousel-indicator-size:                  .5rem !default;
+
+
+
+// Close
+
+$close-color:       $black-hint !default;
+$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;
+
+$kbd-bg:                    $black-primary !default;
+$kbd-color:                 $white-primary !default;
+
+$pre-color:                 $black-primary !default;
+$pre-margin-y:              $spacer !default;
+$pre-scrollable-max-height: 340px !default;
+
+
+
+// Form
+
+$custom-file-button-icon:     'attachment' !default;
+$custom-file-width:           14rem !default;
+$custom-file-text:            (en: 'Choose file...') !default;
+
+$form-check-inline-margin-x:  $spacer-sm !default;
+$form-check-input-margin-x:   $spacer-xs !default;
+
+$form-feedback-invalid-color: map-get(theme-color(danger), color) !default;
+$form-feedback-valid-color:   map-get(theme-color(success), color) !default;
+
+$form-group-margin-y:         $spacer !default;
+
+$input-group-addon-margin-x:  1rem !default;
+
+
+
+// Jumbotron
+
+$jumbotron-bg:               $white-primary !default;
+$jumbotron-border-radius:    $border-radius !default;
+$jumbotron-color:            $black-primary !default;
+$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;
+
+
+
+// Misc
+
+$blockquote-border-color:    map-get(theme-color(primary), color) !default;
+$blockquote-border-width:    .3125rem !default;
+$blockquote-small-color:     $black-hint !default;
+
+$dt-font-weight:             $font-weight-medium !default;
+
+$figure-caption-color:       $black-hint !default;
+$figure-img-margin-y:        $spacer-sm !default;
+
+$headings-color:             inherit !default;
+$headings-font-family:       inherit !default;
+$headings-margin-y:          $spacer-sm !default;
+
+$hr-border-color:            $border-color !default;
+$hr-border-width:            $border-width !default;
+
+$list-inline-inner-spacer-x: $spacer-sm !default;
+
+$mark-bg:                    $material-color-yellow-500 !default;
+$mark-color:                 $black-primary !default;
+$mark-padding:               .2em !default;
+
+$paragraph-margin-y:         $spacer !default;
+
+$small-font-size:            80% !default;
+
+$table-caption-color:        $black-hint !default;
+
+$text-muted:                 $black-hint !default;
+
+$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-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;
+
+
+
+// Pagination
+
+$pagination-bg:             $material-color-grey-100 !default;
+$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;