Material guideline

assets/scss/_colors.scss

@@ -692,39 +692,58 @@ $colors: map-merge(
 // Black and white
 // Based on https://material.google.com/style/color.html#color-text-background-colors
 
-$black:                   #000000 !default;
+$black:                   #000 !default;
 
-$black-primary-opacity:   0.87 !default;
-$black-secondary-opacity: 0.54 !default;
-$black-hint-opacity:      0.38 !default;
-$black-divider-opacity:   0.12 !default;
+$black-primary-opacity:   .87 !default;
+$black-caption-opacity:   .60 !default; // Form helper text
+$black-secondary-opacity: .54 !default;
+$black-hint-opacity:      .38 !default;
+$black-divider-opacity:   .12 !default;
 
-$black-primary:           rgba(red($black), green($black), blue($black), $black-primary-opacity) !default;
-$black-secondary:         rgba(red($black), green($black), blue($black), $black-secondary-opacity) !default;
-$black-hint:              rgba(red($black), green($black), blue($black), $black-hint-opacity) !default;
-$black-divider:           rgba(red($black), green($black), blue($black), $black-divider-opacity) !default;
+$black-primary:           rgba($black, $black-primary-opacity) !default;
+$black-caption:           rgba($black, $black-caption-opacity) !default;
+$black-secondary:         rgba($black, $black-secondary-opacity) !default;
+$black-hint:              rgba($black, $black-hint-opacity) !default;
+$black-divider:           rgba($black, $black-divider-opacity) !default;
 
-$white:                   #ffffff !default;
+$white:                   #fff !default;
 
 $white-primary-opacity:   1 !default;
-$white-secondary-opacity: 0.7 !default;
-$white-hint-opacity:      0.5 !default;
-$white-divider-opacity:   0.12 !default;
-
-$white-primary:           rgba(red($white), green($white), blue($white), $white-primary-opacity) !default;
-$white-secondary:         rgba(red($white), green($white), blue($white), $white-secondary-opacity) !default;
-$white-hint:              rgba(red($white), green($white), blue($white), $white-hint-opacity) !default;
-$white-divider:           rgba(red($white), green($white), blue($white), $white-divider-opacity) !default;
+$white-secondary-opacity: .7 !default;
+$white-hint-opacity:      .5 !default;
+$white-divider-opacity:   .12 !default;
+
+$white-primary:           rgba($white, $white-primary-opacity) !default;
+$white-secondary:         rgba($white, $white-secondary-opacity) !default;
+$white-hint:              rgba($white, $white-hint-opacity) !default;
+$white-divider:           rgba($white, $white-divider-opacity) !default;
+
+// States
+// Based on https://material.io/design/interaction/states.html#usage
+
+$overlay-hover-colored-opacity:     .08 !default;
+$overlay-focus-colored-opacity:     .24 !default;
+$overlay-selected-colored-opacity:  .16 !default;
+$overlay-activated-colored-opacity: .24 !default;
+$overlay-pressed-colored-opacity:   .32 !default;
+$overlay-dragged-colored-opacity:   .16 !default;
+
+$overlay-hover-white-opacity:     .04 !default;
+$overlay-focus-white-opacity:     .12 !default;
+$overlay-selected-white-opacity:  .08 !default;
+$overlay-activated-white-opacity: .12 !default;
+$overlay-pressed-white-opacity:   .16 !default;
+$overlay-dragged-white-opacity:   .08 !default;
 
 // Theme
 // Based on https://material.google.com/style/color.html#color-themes
 
-$dark-theme-1:  #000000 !default;
+$dark-theme-1:  $black !default;
 $dark-theme-2:  $material-color-grey-900 !default;
 $dark-theme-3:  #303030 !default;
 $dark-theme-4:  $material-color-grey-800 !default;
 
 $light-theme-1: $material-color-grey-300 !default;
 $light-theme-2: $material-color-grey-100 !default;
 $light-theme-3: $material-color-grey-050 !default;
-$light-theme-4: #ffffff !default;
+$light-theme-4: $white !default;

assets/scss/_functions.scss

@@ -1,9 +1,8 @@
 @mixin _assert-ascending($map, $map-name) {
   $prev-key: null;
   $prev-num: null;
-
   @each $key, $num in $map {
-    @if $prev-num == null {
+    @if $prev-num == null or unit($num) == "%" {
       // Do nothing
     } @else if not comparable($num, $prev-num) {
       @warn 'Potentially invalid value for #{$map-name}: This map must be in ascending order, but key "#{$key}" has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key "#{$prev-key}"!';
@@ -16,11 +15,13 @@
   }
 }
 
-@mixin _assert-starts-at-zero($map) {
-  $first-value: nth(map-values($map), 1);
-
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+  $values: map-values($map);
+  $first-value: nth($values, 1);
   @if $first-value != 0 {
-    @warn 'First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.';
+    @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
   }
 }
 
@@ -75,3 +76,13 @@
 @function strip-unit($val) {
   @return $val / ($val * 0 + 1);
 }
+
+// Use secondary color for selection controls/inputs
+
+@function selection-theme-color() {
+  @if $secondary-color-for-controls {
+    @return theme-color(secondary);
+  } @else {
+    @return theme-color(primary);
+  }
+}

assets/scss/_mixins.scss

@@ -1,21 +1,41 @@
+@import "mixins/deprecate";
+
+// Utilities
+@import 'mixins/breakpoints';
+@import 'mixins/hover';
+@import 'mixins/image';
+//@import "mixins/badge";
+@import "mixins/resize";
+@import 'mixins/screen-reader';
+//@import "mixins/size";
+@import "mixins/reset-text";
+@import 'mixins/text-emphasis';
+@import 'mixins/text-hide';
+@import 'mixins/text-truncate';
+@import "mixins/visibility";
+
+// Components
+//@import "mixins/alert";
+//@import "mixins/buttons";
+//@import "mixins/pagination";
+@import "mixins/lists";
+@import 'mixins/nav-divider';
+@import 'mixins/forms';
+//@import "mixins/table-row";
+
+// Skins
 @import 'mixins/background-variant';
 @import 'mixins/border-radius';
-@import 'mixins/breakpoint';
+@import 'mixins/transition';
+
+// Layout
 @import 'mixins/clearfix';
-@import 'mixins/float';
-@import 'mixins/form';
-@import 'mixins/grid';
 @import 'mixins/grid-framework';
-@import 'mixins/hover';
-@import 'mixins/image';
-@import 'mixins/list';
+@import 'mixins/grid';
+@import 'mixins/float';
+
+// Material
 @import 'mixins/material-icons';
-@import 'mixins/nav-divider';
 @import 'mixins/reset-text';
-@import 'mixins/screenreader';
 @import 'mixins/text-alignment';
-@import 'mixins/text-emphasis';
-@import 'mixins/text-hide';
-@import 'mixins/text-truncate';
-@import 'mixins/transition';
 @import 'mixins/typography';

assets/scss/_print.scss

@@ -2,37 +2,44 @@
 
 @if $enable-print-styles {
   @media print {
-    @page {
-      size: $print-page-size;
-    }
 
     *,
-    *::after,
-    *::before {
-      box-shadow: none !important;
+    *::before,
+    *::after {
       text-shadow: none !important;
+      box-shadow: none !important;
     }
 
     a:not(.btn) {
       text-decoration: underline;
     }
 
-    // stylelint-disable-next-line selector-no-qualifying-type
     abbr[title]::after {
-      content: ' (" attr(title) ") ';
+      content: " ("attr(title) ") ";
     }
 
+    pre {
+      white-space: pre-wrap !important;
+    }
+
+    pre,
     blockquote {
+      border: $border-width solid rgba($black, .12);
       page-break-inside: avoid;
     }
 
-    body {
-      min-width: $print-body-min-width !important;
+    thead {
+      display: table-header-group;
     }
 
+    tr,
+    img {
+      page-break-inside: avoid;
+    }
+
+    p,
     h2,
-    h3,
-    p {
+    h3 {
       orphans: 3;
       widows: 3;
     }
@@ -42,29 +49,65 @@
       page-break-inside: avoid;
     }
 
-    img {
-      page-break-inside: avoid;
+    @page {
+      size: $print-page-size;
     }
 
-    pre {
-      page-break-inside: avoid;
-      white-space: pre-wrap !important;
+    body {
+      min-width: $print-body-min-width !important;
     }
 
-    thead {
-      display: table-header-group;
+    .container {
+      min-width: $print-body-min-width !important;
     }
 
-    tr {
-      page-break-inside: avoid;
+    .navbar {
+      display: none;
     }
 
-    .card {
-      border: $border-width solid $border-color-solid;
+    .badge {
+      border: $border-width solid $black;
     }
 
-    .container {
-      min-width: $print-body-min-width !important;
+    .table {
+      border-collapse: collapse !important;
+
+      td,
+      th {
+        background-color: $white !important;
+      }
+    }
+
+    .table-bordered {
+
+      th,
+      td {
+        border: 1px solid $border-color-solid;
+      }
+    }
+
+    .table-dark {
+      color: inherit;
+
+      th,
+      td,
+      thead th,
+      tbody+tbody {
+        border-color: $border-color-solid;
+      }
+    }
+
+    .table .thead-dark th {
+      color: inherit;
+      border-color: $border-color-solid;
+    }
+
+
+// ADDITIONS
+
+    .card {
+      border: $border-width solid $border-color-solid;
+      page-break-inside: avoid;
     }
 
     .dropdown-menu {
@@ -99,40 +142,8 @@
       border-bottom: $border-width solid $border-color-solid;
     }
 
-    .navbar {
-      display: none;
-    }
-
     .popover {
       border: $border-width solid $border-color-solid;
     }
-
-    .table {
-      td,
-      th {
-        background-color: $white !important;
-      }
-    }
-
-    .table-bordered {
-      border: $border-width solid $border-color-solid;
-    }
-
-    .table-dark {
-      color: inherit;
-
-      td,
-      th,
-      .table {
-        border-color: $border-color-solid;
-      }
-    }
-
-    .table .thead-dark {
-      td,
-      th {
-        color: inherit;
-      }
-    }
   }
 }

assets/scss/_utilities.scss

@@ -1,20 +1,25 @@
 // Bootstrap
 
 @import 'utilities/align';
-@import 'utilities/border';
 @import 'utilities/background';
+@import 'utilities/borders';
 @import 'utilities/clearfix';
 @import 'utilities/display';
+@import "utilities/embed";
 @import 'utilities/flex';
 @import 'utilities/float';
+@import 'utilities/overflow';
 @import 'utilities/position';
-@import 'utilities/screenreader';
+@import 'utilities/screenreaders';
 @import 'utilities/shadows';
 @import 'utilities/sizing';
 @import 'utilities/spacing';
+@import 'utilities/stretched-link';
+@import "utilities/spacing";
 @import 'utilities/text';
 @import 'utilities/visibility';
 
 // Material
-
 @import 'utilities/material-icons';
+@import 'utilities/scrollbars';
+@import 'utilities/webkit-custom';

assets/scss/_variables.scss

@@ -2,6 +2,10 @@
 
 $enable-grid-classes:      true !default;
 $enable-print-styles:      true !default;
+$enable-pointer-cursor-for-buttons: true !default;
+$enable-validation-icons:  true !default;
+$enable-validation-valid:  true !default; // Use Success color for valid inputs
+$secondary-color-for-controls:  false !default; // Use secondary color for selection/inputs
 
 // Variables
 

assets/scss/base/_grid.scss

@@ -1,39 +1,52 @@
-// Column
-
-@if $enable-grid-classes {
-  @include make-grid-columns;
-}
-
-// Container
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
 
 @if $enable-grid-classes {
   .container {
-    @include make-container;
-    @include make-container-max-widths;
+    @include make-container();
+    @include make-container-max-widths();
   }
 }
 
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but with 100% width for
+// fluid, full width layouts.
+
 @if $enable-grid-classes {
   .container-fluid {
-    @include make-container;
+    @include make-container();
   }
 }
 
 // Row
+//
+// Rows contain and clear the floats of your columns.
 
 @if $enable-grid-classes {
   .row {
-    @include make-row;
+    @include make-row();
   }
 
+  // Remove the negative margin from default .row, then the horizontal padding
+  // from all immediate children columns (to prevent runaway style inheritance).
   .no-gutters {
     margin-right: 0;
     margin-left: 0;
 
     > .col,
-    > [class*='col-'] {
+    > [class*="col-"] {
       padding-right: 0;
       padding-left: 0;
     }
   }
 }
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@if $enable-grid-classes {
+  @include make-grid-columns();
+}

assets/scss/base/_typography.scss

@@ -1,157 +1,82 @@
-// Blockquote
-
-.blockquote {
-  @include typography-title;
-
-  border-left: $blockquote-border-width solid $blockquote-border-color;
-  margin-bottom: $paragraph-margin-y;
-  padding: 0 $spacer;
-}
-
-.blockquote-footer {
-  @include typography-caption;
-
-  color: $blockquote-small-color;
-  display: block;
-  margin-top: $spacer-xs;
-
-  &::before {
-    content: '\2014 \00A0';
-  }
-}
-
-// Emphasis
-
-mark,
-.mark {
-  background-color: $mark-bg;
-  color: $mark-color;
-  padding: $mark-padding;
-}
+//
+// Headings
+//
 
-small,
-.small {
-  font-size: $small-font-size;
-  font-weight: $font-weight-regular;
+.typography-headline-1 {
+  @include typography-headline-1;
 }
 
-.initialism {
-  font-size: 90%;
-  text-transform: uppercase;
+.typography-headline-2 {
+  @include typography-headline-2;
 }
 
-// Headings
-
-.typography-display-4 {
-  @include typography-display-4;
+.typography-headline-3 {
+  @include typography-headline-3;
 }
 
-.typography-display-3 {
-  @include typography-display-3;
+.typography-headline-4 {
+  @include typography-headline-4;
 }
 
-.typography-display-2 {
-  @include typography-display-2;
+.typography-headline-5 {
+  @include typography-headline-5;
 }
 
-.typography-display-1 {
-  @include typography-display-1;
+.typography-headline-6 {
+  @include typography-headline-6;
 }
 
-.typography-headline {
-  @include typography-headline;
+.typography-subtitle-1 {
+  @include typography-subtitle-1;
 }
 
-.typography-title {
-  @include typography-title;
+.typography-subtitle-2 {
+  @include typography-subtitle-2;
 }
 
-.typography-subheading {
-  @include typography-subheading;
+.typography-body-1 {
+  @include typography-body-1;
 }
 
 .typography-body-2 {
   @include typography-body-2;
 }
 
-.typography-body-1 {
-  @include typography-body-1;
-}
-
 .typography-caption {
   @include typography-caption;
 }
 
+.typography-overline {
+  @include typography-overline;
+}
+
 // Headings - bootstrap classes
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
   color: $headings-color;
   font-family: $headings-font-family;
   margin-bottom: $headings-margin-y;
 }
 
-h1,
-.h1 {
-  @include typography-display-2;
-}
+h1, .h1, .display-1 { @include typography-headline-1; }
 
-h2,
-.h2 {
-  @include typography-display-1;
-}
+h2, .h2, .display-2 { @include typography-headline-2; }
 
-h3,
-.h3 {
-  @include typography-headline;
-}
+h3, .h3, .display-3 { @include typography-headline-3; }
 
-h4,
-.h4 {
-  @include typography-title;
-}
+h4, .h4, .display-4 { @include typography-headline-4; }
 
-h5,
-.h5 {
-  @include typography-subheading;
-}
+h5, .h5 { @include typography-headline-5; }
 
-h6,
-.h6 {
-  @include typography-body-2;
-}
+h6, .h6 { @include typography-headline-6; }
 
-.display-1 {
-  @include typography-display-4;
-}
+.lead { @include typography-headline-6; }
 
-.display-2 {
-  @include typography-display-3;
-}
 
-.display-3 {
-  @include typography-display-2;
-}
-
-.display-4 {
-  @include typography-display-1;
-}
-
-.lead {
-  @include typography-title;
-}
-
-// Hr
+//
+// Horizontal rules
+//
 
 hr {
   border: 0;
@@ -160,7 +85,30 @@ hr {
   margin-bottom: $paragraph-margin-y;
 }
 
-// List
+//
+// Emphasis
+//
+
+small,
+.small {
+  font-size: $small-font-size;
+  font-weight: $font-weight-regular;
+}
+
+mark,
+.mark {
+  background-color: $mark-bg;
+  color: $mark-color;
+  padding: $mark-padding;
+}
+
+//
+// Lists
+//
+
+.list-unstyled {
+  @include list-unstyled;
+}
 
 .list-inline {
   @include list-unstyled;
@@ -174,6 +122,35 @@ hr {
   }
 }
 
-.list-unstyled {
-  @include list-unstyled;
+//
+// Misc
+//
+
+.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
+
+// Blockquotes
+.blockquote {
+  @include typography-body-1;
+
+  border-left: $blockquote-border-width solid $blockquote-border-color;
+  margin-bottom: $paragraph-margin-y;
+  padding: 0 $spacer;
 }
+
+.blockquote-footer {
+  @include typography-caption;
+
+  color: $blockquote-small-color;
+  display: block;
+  margin-top: $spacer-xs;
+
+  &::before {
+    content: '\2014 \00A0';
+  }
+}
+
+
+

assets/scss/bootstrap/_alert.scss

@@ -1,45 +1,61 @@
+//
+// Base styles
+//
+// Not sure it is OK to look like : https://material.io/design/components/banners.html#specs
+
 .alert {
   @include border-radius($alert-border-radius);
 
-  border: 0;
+  //border: 0;
+  border: 1px solid $black-divider;
+  color: $black-primary;
   display: block;
   margin-bottom: $alert-margin-y;
   padding: $alert-padding-y $alert-padding-x;
   position: relative;
 }
 
-@each $color, $values in $theme-colors {
-  .alert-#{$color} {
-    background-color: theme-color-light($color);
-    color: color-yiq(theme-color-light($color));
+// Headings for larger alerts
+.alert-link {
+  color: inherit;
+  font-weight: $alert-link-font-weight;
+
+  @include hover-focus-active {
+    color: inherit;
   }
 }
 
-// Dismissible
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: ($alert-padding-x * 2 + $close-font-size);
+  padding-right: $close-font-size + $alert-padding-x * 2;
 
+  // Adjust close link position
   .close {
-    color: inherit;
+    color: $black-hint;
     padding: ($alert-padding-y - ($close-font-size - $font-size-base * $line-height-base) / 2) $alert-padding-x;
     position: absolute;
     top: 0;
     right: 0;
   }
 }
 
-// Misc
-
-.alert-heading {
-  color: inherit;
-}
-
-.alert-link {
-  color: inherit;
-  font-weight: $alert-link-font-weight;
-
-  @include active-focus-hover {
-    color: inherit;
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+@each $color, $values in $theme-colors {
+  .alert-#{$color} {
+    //background-color: theme-color-light($color);
+    border-left: 6px solid theme-color($color);
+    //color: color-yiq(theme-color-light($color));
   }
 }
+
+// @mixin alert-variant not used

assets/scss/bootstrap/_badge.scss

@@ -1,46 +1,70 @@
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
 .badge {
   @include border-radius($badge-border-radius);
+  //@include transition($badge-transition);
 
   align-items: center;
   display: inline-flex;
-  font-size: inherit;
+  font-size: inherit; //@include font-size($badge-font-size);
   font-weight: $badge-font-weight;
   line-height: inherit;
   padding-right: $badge-padding-x;
   padding-left: $badge-padding-x;
   text-align: center;
-  vertical-align: baseline;
   white-space: nowrap;
 
-  &:empty {
-    display: none;
+  @at-root a#{&} {
+    @include hover-focus {
+      text-decoration: none;
+    }
   }
 
+  // Material addition : https://material.angular.io/components/badge/examples
   .btn & {
-    margin-top: -1px;
-    margin-bottom: -1px;
-    padding-top: 1px;
-    padding-bottom: 1px;
+    position: absolute;
+    top: -$badge-width / 2;
+    right: -$badge-width / 2;
+    border-radius: 50%;
+    width: $badge-width;
+    height: $badge-width;
+    line-height: $badge-width;
+    display: inline-block;
+    font-weight: $badge-btn-font-weight;
+    font-size: $font-size-caption;
+  }
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
   }
 }
 
-@each $color, $values in $theme-colors {
+// Pill badges with extra rounded corners
+
+.badge-pill {
+  @include border-radius(1em);
+
+  //padding-right: $badge-pill-padding-x;
+  //padding-left: $badge-pill-padding-x;
+}
+
+@each $color,
+$values in $theme-colors {
   .badge-#{$color} {
     background-color: theme-color($color);
     color: color-yiq(theme-color($color));
 
     &[href] {
-      @include active-focus-hover {
+      @include hover-focus-active {
         background-color: theme-color-dark($color);
         color: color-yiq(theme-color-dark($color));
         text-decoration: none;
       }
     }
   }
 }
-
-// Pill badges with extra rounded corners
-
-.badge-pill {
-  @include border-radius(1em);
-}
+// @mixin badge-variant not used

assets/scss/bootstrap/_breadcrumb.scss

@@ -1,35 +1,26 @@
 .breadcrumb {
-  @include border-radius($breadcrumb-border-radius);
-
   align-items: center;
   background-color: $breadcrumb-bg;
   display: flex;
   flex-wrap: wrap;
-  list-style: none;
-  margin-bottom: $breadcrumb-margin-y;
-  min-height: $breadcrumb-height;
-  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
 }
 
 .breadcrumb-item {
-  @include transition-standard(color);
-
   align-items: center;
   color: $breadcrumb-item-color;
   display: flex;
-
-  @include active-focus-hover {
-    color: $breadcrumb-item-color-hover;
-  }
-
-  &.active {
-    color: $breadcrumb-item-color-hover;
-    font-weight: bolder;
-  }
+  font-size: $breadcrumb-font-size;
 
   a {
+    @include transition-standard(background-color);
+    border-radius: .5rem;
     color: inherit;
     text-decoration: none;
+    padding: .375rem $breadcrumb-padding-y;
+
+    &:hover {
+      background-color: $breadcrumb-bg-hover;
+    }
   }
 
   + .breadcrumb-item {
@@ -38,10 +29,18 @@
     &::before {
       @include set-material-icons;
 
-      color: $breadcrumb-item-color;
+      color: $black-secondary;
       content: $breadcrumb-item-icon;
       display: inline-block;
       margin-right: $breadcrumb-inner-spacer-x;
     }
   }
+
+  &.active::before {
+    margin-right: $breadcrumb-padding-y;
+  }
+
+  &:only-child {
+    padding: .375rem $breadcrumb-padding-y;
+  }
 }

assets/scss/bootstrap/_carousel.scss

@@ -120,7 +120,7 @@
   user-select: none;
   width: $carousel-control-size;
 
-  @include active-focus-hover {
+  @include hover-focus-active {
     background-color: $carousel-control-bg-hover;
     color: $carousel-control-color;
     text-decoration: none;

assets/scss/bootstrap/_close.scss

@@ -10,9 +10,10 @@
   font-size: $close-font-size;
   font-weight: $close-font-weight;
   line-height: 1;
+  // opacity: .5;
   padding: 0;
 
-  @include active-focus-hover {
+  @include hover-focus-active {
     color: $close-color-hover;
     text-decoration: none;
   }
@@ -25,3 +26,14 @@
     cursor: pointer;
   }
 }
+
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  appearance: none;
+}
+
+a.close.disabled {
+  pointer-events: none;
+}

assets/scss/bootstrap/_code.scss

@@ -22,7 +22,7 @@ kbd {
 
   kbd {
     font-size: 100%;
-    font-weight: bolder;
+    font-weight: $font-weight-bolder;
     padding: 0;
   }
 }

assets/scss/bootstrap/_forms.scss

@@ -0,0 +1,224 @@
+// Checkbox and radio button
+
+.form-check {
+  display: block;
+  margin-bottom: $textfield-margin-y;
+  padding-left: $form-check-input-gutter;
+  position: relative;
+}
+
+.form-check-input {
+  margin-top: (($font-size-base * $line-height-base - $font-size-base) / 3 * 2); //$form-check-input-margin-y;
+  margin-left: ($form-check-input-gutter * -1); //-$form-check-input-gutter;
+  position: absolute;
+
+  &:disabled ~ .form-check-label {
+    color: $textfield-color-disabled;
+  }
+}
+
+.form-check-label {
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  //margin-bottom: 0;
+}
+
+.form-check-inline {
+  align-items: center;
+  display: inline-flex;
+  margin-right: $form-check-inline-margin-x;
+  margin-bottom: 0;
+  //padding-left: 0;
+
+  .form-check-input {
+    position: static;
+    margin-top: 0;
+    margin-right: $form-check-inline-input-margin-x;
+    margin-left: 0;
+  }
+}
+
+// Form group
+
+.form-group {
+  margin-bottom: $form-group-margin-y;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: ($textfield-margin-x / -2); //-$form-grid-gutter-width / 2;
+  margin-left: ($textfield-margin-x / -2);
+
+  > .col,
+  > [class*='col-'] {
+    padding-right: ($textfield-margin-x / 2);
+    padding-left: ($textfield-margin-x / 2);
+  }
+}
+
+// Inline
+
+.form-inline {
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+
+  .form-check {
+    margin-bottom: 0;
+    width: 100%; //auto
+  }
+
+  @include media-breakpoint-up(sm) {
+    label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0;
+    }
+
+    // Inline-block all the things for "inline"
+    .form-group {
+      display: flex;
+      flex: 0 0 auto;
+      flex-flow: row wrap;
+      align-items: center;
+      margin-bottom: 0;
+    }
+
+    // Allow folks to *not* use `.form-group`
+    .form-control {
+      display: inline-block;
+      width: auto; // Prevent labels from stacking above inputs in `.form-group`
+      vertical-align: middle;
+    }
+
+    // Make static controls behave like regular ones
+    .form-control-plaintext {
+      display: inline-block;
+    }
+
+    .input-group,
+    .custom-select {
+      width: auto;
+    }
+
+    .form-check {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: auto;
+      padding-left: 0;
+    }
+    .form-check-input {
+      position: relative;
+      flex-shrink: 0;
+      margin-top: 0;
+      margin-right: $form-check-input-gutter;
+      margin-left: 0;
+    }
+
+    .custom-control {
+      align-items: center;
+      justify-content: center;
+    }
+    .custom-control-label {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Label
+
+.col-form-label {
+  color: inherit;
+  font-size: $font-size-base; // todo
+  line-height: ($textfield-font-size * $textfield-line-height / $font-size-base); //$input-line-height
+  // margin-bottom: 0;
+  padding-top: $textfield-padding-y;
+  padding-bottom: $textfield-padding-y;
+}
+
+.col-form-label-lg {
+  font-size: ($font-size-base / $textfield-font-size * $textfield-font-size-lg); //@include font-size($input-font-size-lg)
+  line-height: ($textfield-line-height-lg / ($font-size-base / $textfield-font-size)); //$input-line-height-lg;
+  padding-top: $textfield-padding-y-lg;
+  padding-bottom: $textfield-padding-y-lg;
+}
+
+.col-form-label-sm {
+  font-size: ($font-size-base / $textfield-font-size * $textfield-font-size-sm); //@include font-size($input-font-size-sm);
+  line-height: ($textfield-line-height-sm / ($font-size-base / $textfield-font-size)); //$input-line-height-sm;
+  padding-top: $textfield-padding-y-sm;
+  padding-bottom: $textfield-padding-y-sm;
+}
+
+// Misc
+
+.form-text {
+  font-size: $font-size-caption;
+  font-weight: $font-weight-caption;
+  letter-spacing: $letter-spacing-caption;
+  line-height: normal;
+  color: $textfield-caption-color;
+  display: block;
+  //margin-top: $textfield-margin-y;
+
+  /*.custom-select-lg + &,
+  .floating-label-lg + &,
+  .floating-label-lg .custom-select + &,
+  .floating-label-lg .form-control + &,
+  .floating-label-lg .form-control-file + &,
+  .form-control-lg + &,
+  .textfield-box-lg + &,
+  .textfield-box-lg .custom-select + &,
+  .textfield-box-lg .form-control + &,
+  .textfield-box-lg .form-control-file + & {
+    margin-top: $textfield-margin-y-lg;
+  }
+
+  .custom-select-sm + &,
+  .floating-label-sm + &,
+  .floating-label-sm .custom-select + &,
+  .floating-label-sm .form-control + &,
+  .floating-label-sm .form-control-file + &,
+  .form-control-sm + &,
+  .textfield-box-sm + &,
+  .textfield-box-sm .custom-select + &,
+  .textfield-box-sm .form-control + &,
+  .textfield-box-sm .form-control-file + & {
+    margin-top: $textfield-margin-y-sm;
+  }*/
+
+  &::before {
+    display: inline-block;
+    width: 0;
+    height: 1rem;
+    content: "";
+    vertical-align: 0;
+  }
+}
+
+// Readonly control as plain text
+
+.form-control-plaintext {
+  background-color: transparent;
+  border: solid transparent;
+  border-radius: 0;
+  border-width: 0 0 $textfield-border-width;
+  box-shadow: none;
+  color: $textfield-plaintext-color;
+  display: block;
+  font-size: $textfield-font-size;
+  line-height: $textfield-line-height;
+  // margin-bottom: 0;
+  padding: $textfield-padding-y 0 calc(#{$textfield-padding-y} - #{$textfield-border-width});
+  width: 100%;
+
+  &.form-control-sm,
+  &.form-control-lg {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}

assets/scss/bootstrap/_images.scss

@@ -0,0 +1,29 @@
+.img-fluid {
+  @include img-fluid;
+}
+
+.img-thumbnail {
+  /*  padding: $thumbnail-padding;
+  background-color: $thumbnail-bg;
+  border: $thumbnail-border-width solid $thumbnail-border-color;
+  @include border-radius($thumbnail-border-radius);
+  @include box-shadow($thumbnail-box-shadow);
+  */
+
+  box-shadow: $thumbnail-box-shadow;
+  @include img-fluid;
+}
+
+.figure {
+  display: inline-block;
+}
+
+.figure-img {
+  line-height: 1;
+  margin-bottom: $figure-img-margin-y;
+}
+
+.figure-caption {
+  @include typography-caption;
+  color: $figure-caption-color;
+}

assets/scss/bootstrap/_jumbotron.scss

@@ -4,6 +4,7 @@
   background-color: $jumbotron-bg;
   box-shadow: map-get($jumbotron-elevation-shadow, shadow);
   color: $jumbotron-color;
+  margin-bottom: $jumbotron-padding-y;
   padding: $jumbotron-padding-y $jumbotron-padding-x;
 }
 

assets/scss/bootstrap/_nav.scss

@@ -7,16 +7,24 @@
 }
 
 .nav-link {
+  color: selection-theme-color();
   display: block;
   padding: $nav-link-padding-y $nav-link-padding-x;
 
-  @include active-focus-hover {
+  @include hover-focus {
     text-decoration: none;
   }
 
+  // Disabled state lightens text
   &.disabled {
     color: $nav-link-color-disabled;
     cursor: default;
+    pointer-events: none;
+  }
+
+  &:hover,
+  &.active {
+    color: darken(selection-theme-color(),16%);
   }
 }
 
@@ -47,7 +55,7 @@
     color: $nav-pills-color;
     opacity: $nav-pills-link-opacity;
 
-    @include active-focus-hover {
+    @include hover-focus-active {
       background-color: $nav-pills-bg-hover;
     }
 

assets/scss/bootstrap/_pagination.scss

@@ -2,69 +2,77 @@
   background-color: $pagination-bg;
   display: flex;
   list-style: none;
-  padding: $pagination-padding-y $pagination-padding-x;
+  margin: $pagination-margin-x;
 }
 
 .page-link {
   @include border-radius($pagination-border-radius);
-  @include transition-standard(color);
+  @include transition-standard(all);
 
+  align-items: center;
   color: $pagination-color;
-  display: block;
-  font-size: $btn-font-size;
-  font-weight: $btn-font-weight;
-  line-height: $btn-line-height;
+  display: flex;
+  font-size: $pagination-font-size;
+  font-weight: $pagination-font-weight;
+  justify-content: center;
+  line-height: $pagination-line-height;
   margin-left: $pagination-inner-spacer-x;
-  padding: $btn-padding-y $btn-padding-x;
   position: relative;
   text-align: center;
+  width: $pagination-line-height * $pagination-font-size;
   white-space: nowrap;
 
-  @include active-focus-hover {
+  @include hover-focus-active {
+    background-color: rgba($black, $overlay-hover-white-opacity);
     color: $pagination-color;
     text-decoration: none;
+    z-index: 2;
   }
 
-  @include focus-hover {
-    background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
+  &:focus {
+    background-color: rgba($black, $overlay-focus-white-opacity);
   }
 
-  &.active,
   &:active {
-    background-color: $btn-bg-active;
-    background-image: none;
-  }
-
-  &:focus {
-    outline: 0;
+    background-color: rgba($black, $overlay-pressed-white-opacity);
   }
 
   &:not(:disabled):not(.disabled) {
     cursor: pointer;
   }
+}
 
-  .page-item:first-child & {
-    margin-left: 0;
+.page-item {
+  &:first-child {
+    .page-link {
+      margin-left: 0;
+    }
   }
 
-  .page-item.active & {
-    background-color: $btn-bg-active;
+  &.active .page-link {
+    background-color: theme-color(primary);
+    color: $white;
   }
 
-  .page-item.disabled & {
+  &.disabled .page-link {
     background-color: transparent;
     color: $pagination-color-disabled;
     cursor: auto;
     pointer-events: none;
   }
 }
 
+
+//
+// Sizing
+//
+
 .pagination-lg .page-link {
-  font-size: $btn-font-size-lg;
-  padding: $btn-padding-y-lg $btn-padding-x-lg;
+  font-size: $pagination-font-size-lg;
+  width: $pagination-line-height * $pagination-font-size-lg;
 }
 
 .pagination-sm .page-link {
-  font-size: $btn-font-size-sm;
-  padding: $btn-padding-y-sm $btn-padding-x-sm;
-}
+  font-size: $pagination-font-size-sm;
+  width: $pagination-line-height * $pagination-font-size-sm;
+}

assets/scss/bootstrap/_popover.scss

@@ -3,31 +3,24 @@
 // Therefore, popovers are styled as Material design's dialogs
 
 .popover {
-  @include reset-text;
+  @include reset-text();
   @include border-radius($popover-border-radius);
 
   background-color: $popover-bg;
-  box-shadow: map-get($popover-elevation-shadow, shadow);
+  box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15); //map-get($popover-elevation-shadow, shadow); //
   display: block;
   font-size: $popover-font-size;
   margin: $popover-margin;
   max-width: $popover-max-width;
   position: absolute;
   top: 0;
   left: 0;
+  word-wrap: break-word;
   z-index: map-get($popover-elevation-shadow, elevation);
 }
 
-.popover-body {
-  padding: $popover-padding-y $popover-padding-x;
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-}
-
 .popover-header {
-  @include typography-title;
+  @include typography-headline-6;
 
   margin-bottom: 0;
   padding: $popover-padding-y $popover-padding-x 0;
@@ -41,6 +34,15 @@
   }
 }
 
+.popover-body {
+  padding: $popover-padding-y $popover-padding-x;
+  // color: $popover-body-color;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
 // Desktop
 
 @include media-breakpoint-up($popover-breakpoint) {

assets/scss/bootstrap/_transitions.scss

@@ -0,0 +1,43 @@
+.fade {
+  //@include transition-standard(opacity);
+  transition: opacity $transition-duration-desktop-complex $transition-timing-function-standard;
+
+  &:not(.show) {
+    opacity: 0;
+  }
+
+  /*opacity: 0;
+
+  &.show {
+    opacity: 1;
+  }*/
+}
+
+.collapse {
+  &:not(.show) {
+    display: none;
+  }/*
+  display: none;
+
+  &.show {
+    display: block;
+  }*/
+}
+
+.collapsing {
+  @include transition-standard(height);
+
+  height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+// stylelint-disable-next-line selector-no-qualifying-type
+tbody.collapse.show {
+  display: table-row-group;
+}
+
+// stylelint-disable-next-line selector-no-qualifying-type
+tr.collapse.show {
+  display: table-row;
+}

assets/scss/material.scss

@@ -1,13 +1,14 @@
 @import 'colors';
 @import 'functions';
-@import 'mixins';
 @import 'variables';
+@import 'mixins';
+
 
 // Base CSS
 
-@import 'base/base';
+@import 'base/base'; // root + reboot
 @import 'base/grid';
-@import 'base/typography';
+@import 'base/typography'; // type
 
 // Bootstrap components
 // Components covered in Bootstrap's css but not in Material design
@@ -18,43 +19,43 @@
 @import 'bootstrap/carousel';
 @import 'bootstrap/close';
 @import 'bootstrap/code';
-@import 'bootstrap/form';
-@import 'bootstrap/image';
+@import 'bootstrap/forms';
+@import 'bootstrap/images';
 @import 'bootstrap/jumbotron';
 @import 'bootstrap/media';
 @import 'bootstrap/nav';
 @import 'bootstrap/pagination';
 @import 'bootstrap/popover';
 @import 'bootstrap/responsive-embed';
-@import 'bootstrap/transition';
+@import 'bootstrap/transitions';
 
 // Material components
 // Components covered in Material design (https://material.google.com/components)
 
-@import 'material/button';
+@import 'material/buttons';
 @import 'material/button-flat';
 @import 'material/button-float';
 @import 'material/button-group';
 @import 'material/card';
 @import 'material/chip';
-@import 'material/data-table';
-@import 'material/dialog';
-@import 'material/expansion-panel';
-@import 'material/menu';
+@import 'material/data-table'; // tables
+@import 'material/dialog'; // modal
+@import 'material/expansion-panel'; // list-group
+@import 'material/menu'; // dropdown
 @import 'material/navdrawer';
 @import 'material/picker';
 @import 'material/progress';
-@import 'material/progress-circular';
-@import 'material/selection-control';
-@import 'material/slider';
-@import 'material/snackbar';
+@import 'material/progress-circular'; // Spinners
+@import 'material/selection-control'; // custom-forms
+@import 'material/sliders';
+@import 'material/snackbars'; // toasts
 @import 'material/stepper';
 @import 'material/tab';
 @import 'material/text-field';
 @import 'material/text-field-box';
 @import 'material/text-field-floating-label';
-@import 'material/text-field-input-group';
-@import 'material/toolbar';
+@import 'material/text-field-input-group'; // input-group
+@import 'material/toolbar'; // navbar
 @import 'material/tooltip';
 
 // Utilities
@@ -63,4 +64,4 @@
 
 // Very basic print styles
 
-@import 'print';
+@import 'print';

assets/scss/material/_button-flat.scss

@@ -1,11 +1,26 @@
+// Btn flat and outlined
+// Material guidelines : https://material.io/design/components/buttons.html#specs
+// Material Web component : https://material-components.github.io/material-components-web-catalog/#/component/button?type=text
+[class*='btn-flat'] {
+  padding: $btn-padding-y $btn-flat-padding-x;
+}
+
+
 [class*='btn-flat'],
 [class*='btn-outline'] {
-  background-color: transparent;
   box-shadow: none;
 
-  &.active,
-  &:active {
+@include hover-focus-active {
     box-shadow: none;
+    color: $black-primary;
+  }
+
+  &:hover {
+    background-color: rgba(0,0,0,$overlay-hover-white-opacity);
+  }
+
+  &:active {
+    background-color: rgba(0,0,0,$overlay-pressed-white-opacity);
   }
 
   &.disabled,
@@ -17,20 +32,36 @@
 @each $color, $values in $theme-colors {
   .btn-flat-#{$color},
   .btn-outline-#{$color} {
-    @include plain-active-focus-hover {
+    @include plain-hover-focus {
       color: theme-color($color);
     }
 
+    &:hover {
+      background-color: rgba(theme-color($color), $overlay-hover-white-opacity);
+    }
+
+    &:focus {
+      background-color: rgba(theme-color($color), $overlay-focus-white-opacity);
+    }
+
+    &:active {
+      background-color: rgba(theme-color($color), $overlay-pressed-white-opacity);
+    }
+
     &.disabled,
     &:disabled {
+      background-color: $btn-bg-disabled;
       color: $btn-color-disabled;
     }
   }
+  .btn-outline-#{$color} {
+    border: 2px solid theme-color($color);
+  }
 }
 
 .btn-flat-light,
 .btn-outline-light {
-  @include focus-hover {
+  @include hover-focus {
     background-image: linear-gradient(to bottom, $btn-overlay-inverse, $btn-overlay-inverse);
   }
 
@@ -39,3 +70,16 @@
     background-color: $btn-bg-active-inverse;
   }
 }
+
+// Btn-icon addition
+.btn-icon {
+  border-radius: 50%;
+  color: $black-hint;
+  height: $btn-icon-height;
+  padding: $btn-icon-padding;
+  width: $btn-icon-height;
+
+  &:hover {
+    color: $black-hint;
+  }
+}

assets/scss/material/_button-float.scss

@@ -1,12 +1,18 @@
+// https://material-components.github.io/material-components-web-catalog/#/component/fab
+
 .btn-float {
   border-radius: 50%;
   box-shadow: map-get($btn-float-elevation-shadow, shadow);
   height: $btn-float-size;
-  line-height: $btn-float-size;
+  //line-height: $btn-float-size;
   min-width: 0;
   padding: 0;
   width: $btn-float-size;
 
+  &:hover {
+    box-shadow: map-get($btn-float-elevation-shadow-hover, shadow);
+  }
+
   &.active,
   &:active {
     box-shadow: map-get($btn-float-elevation-shadow-active, shadow);
@@ -22,6 +28,20 @@
     line-height: $btn-float-size-sm;
     width: $btn-float-size-sm;
   }
+
+  // Extended FAB
+  &-extended {
+    border-radius: $btn-float-extended-border-radius;
+    height: $btn-float-extended-height;
+    line-height: $btn-float-extended-line-height;
+    padding: 0 $btn-float-extended-padding-x;
+    width: auto;
+
+    .material-icons {
+      margin-left: -.5rem;
+      margin-right: .75rem;
+    }
+  }
 }
 
 .btn-float-dropdown {

assets/scss/material/_button-group.scss

@@ -1,3 +1,5 @@
+// todo : btn-group disabled
+
 .btn-group,
 .btn-group-vertical {
   @include border-radius($btn-border-radius);
@@ -8,8 +10,10 @@
   position: relative;
   vertical-align: middle;
 
-  @each $color, $values in $theme-colors {
-    > .btn-#{$color} {
+  @each $color,
+  $values in $theme-colors {
+    >.btn-#{$color} {
+
       &.disabled,
       &:disabled {
         background-color: theme-color-light($color);
@@ -18,17 +22,27 @@
     }
   }
 
-  > .btn {
+  >.btn {
     @include transition-standard(border-color, opacity);
 
     box-shadow: none;
-    flex: 0 1 auto;
+    flex: 1 1 auto;
     min-width: 0;
+    padding-left: $btn-group-padding-x;
+    padding-right: $btn-group-padding-x;
+    position: relative;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 1;
+    }
 
-    &.active,
+    /*&.active,
     &:active {
-      box-shadow: none;
-    }
+      background-color: rgba($black,$overlay-activated-white-opacity);
+    }*/
 
     &.disabled,
     &:disabled {
@@ -41,6 +55,7 @@
       &.active,
       &:active {
         opacity: 1;
+        background-color: rgba($black,$overlay-activated-white-opacity);
       }
 
       &.disabled,
@@ -50,8 +65,8 @@
     }
   }
 
-  > .btn-group,
-  > .btn-group-vertical {
+  >.btn-group,
+  >.btn-group-vertical {
     @include border-radius(0);
 
     background-color: transparent;
@@ -60,28 +75,28 @@
 }
 
 .btn-group {
-  &.show > .btn.dropdown-toggle {
+  &.show>.dropdown-toggle {
     box-shadow: none;
   }
 
-  > .btn,
-  > .btn-group {
+  >.btn,
+  >.btn-group {
     margin-left: ($btn-group-inner-spacer-x * -1);
   }
 
-  > .btn:first-child,
-  > .btn-group:first-child {
+  >.btn:first-child,
+  >.btn-group:first-child {
     margin-left: 0;
   }
 
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) > .btn {
+  >.btn:not(:first-child),
+  >.btn-group:not(:first-child)>.btn {
     @include border-left-radius(0);
   }
 
-  > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn-group:not(:last-child) > .btn,
-  > .dropdown-toggle:not(:last-of-type) {
+  >.btn:not(:last-child):not(.dropdown-toggle),
+  >.btn-group:not(:last-child)>.btn,
+  >.dropdown-toggle:not(:last-of-type) {
     @include border-right-radius(0);
   }
 }
@@ -91,26 +106,27 @@
   flex-direction: column;
   justify-content: center;
 
-  > .btn,
-  > .btn-group {
+  >.btn,
+  >.btn-group {
     margin-top: ($btn-group-inner-spacer-y * -1);
     margin-left: 0;
     width: 100%;
   }
 
-  > .btn:first-child,
-  > .btn-group:first-child {
+  >.btn:first-child,
+  >.btn-group:first-child {
     margin-top: 0;
   }
 
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) > .btn {
+  // Reset rounded corners
+  >.btn:not(:first-child),
+  >.btn-group:not(:first-child)>.btn {
     @include border-top-radius(0);
   }
 
-  > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn-group:not(:last-child) > .btn,
-  > .dropdown-toggle:not(:last-of-type) {
+  >.btn:not(:last-child):not(.dropdown-toggle),
+  >.btn-group:not(:last-child)>.btn,
+  >.dropdown-toggle:not(:last-of-type) {
     @include border-bottom-radius(0);
   }
 }
@@ -120,19 +136,20 @@
   box-shadow: none;
 }
 
-.btn-group-lg > .btn {
-  @extend %btn-lg;
+.btn-group-sm>.btn {
+  @extend %btn-sm;
 }
 
-.btn-group-sm > .btn {
-  @extend %btn-sm;
+.btn-group-lg>.btn {
+  @extend %btn-lg;
 }
 
 // Checkbox and radio options
 
 [data-toggle='buttons'] {
-  > .btn,
-  > .btn-group > .btn {
+
+  >.btn,
+  >.btn-group>.btn {
     margin-bottom: 0;
 
     [type='checkbox'],
@@ -146,23 +163,33 @@
 
 // Split button dropdown
 
-.dropdown-toggle.dropdown-toggle-split {
+.dropdown-toggle-split {
   padding-right: $caret-spacer-x;
   padding-left: $caret-spacer-x;
 
-  &::after {
-    margin-right: 0;
+  &::after,
+  .dropup &::after,
+  .dropright &::after {
+    margin-right: 0; // Daemonite addition
     margin-left: 0;
   }
 
-  .dropleft & {
-    &::before {
-      margin-right: 0;
-      margin-left: 0;
-    }
+  .dropleft &::before {
+    margin-right: 0;
+    margin-left: 0; // Daemonite addition
   }
 }
 
+/*.btn-sm + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
+}*/
+
 // Toolbar
 
 .btn-toolbar {
@@ -174,3 +201,19 @@
     width: auto;
   }
 }
+
+// Checkbox and radio options
+
+.btn-group-toggle {
+  > .btn,
+  > .btn-group > .btn {
+    margin-bottom: 0; // Override default `<label>` value
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+      pointer-events: none;
+    }
+  }
+}

assets/scss/material/_button.scss

@@ -1,40 +1,42 @@
+// Btn raised : https://material.io/design/components/buttons.html#
 .btn {
   @include border-radius($btn-border-radius);
-  @include transition-standard(box-shadow);
+  @include transition-standard(all);
 
+  -webkit-font-smoothing: antialiased;
+  align-items: center;
   background-color: transparent;
   background-image: none;
   border: 0;
   box-shadow: map-get($btn-elevation-shadow, shadow);
   color: $btn-color;
-  display: inline-block;
+  display: inline-flex;
   font-size: $btn-font-size;
   font-weight: $btn-font-weight;
-  line-height: $btn-line-height;
-  margin: 0;
+  height: 2.25rem; // 36px
+  justify-content: center;
+  letter-spacing: .0892857143em;
+  line-height: normal;
+  margin: 0 0 0 .5rem;
   max-width: 100%;
   min-width: $btn-min-width;
+  outline: none;
+  overflow: hidden;
   padding: $btn-padding-y $btn-padding-x;
   position: relative;
-  text-align: center;
   text-transform: uppercase;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
 
-  @include active-focus-hover {
-    color: $btn-color;
-    text-decoration: none;
-  }
-
-  @include focus-hover {
-    background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
+  @include hover-focus-active {
+    background-image: linear-gradient(to bottom, $btn-overlay-inverse, $btn-overlay-inverse);
+    box-shadow: map-get($btn-elevation-shadow-hover, shadow);
+    outline: 0;
   }
 
-  &.active,
   &:active {
-    background-color: $btn-bg-active;
-    background-image: none;
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .24), rgba(255, 255, 255, .24));
     box-shadow: map-get($btn-elevation-shadow-active, shadow);
   }
 
@@ -44,59 +46,45 @@
     background-image: none;
     box-shadow: none;
     color: $btn-color-disabled;
-    opacity: 1;
-  }
-
-  &:focus {
-    outline: 0;
   }
 
   &:not(:disabled):not(.disabled) {
     cursor: pointer;
   }
 
-  .show > &.dropdown-toggle {
+  .show>&.dropdown-toggle {
     background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
   }
 }
 
-// stylelint-disable selector-no-qualifying-type
 a.btn.disabled,
 fieldset:disabled a.btn {
   pointer-events: none;
 }
-// stylelint-enable
 
-@each $color, $values in $theme-colors {
+@each $color,
+$values in $theme-colors {
   .btn-#{$color} {
     background-color: theme-color($color);
-    color: color-yiq(theme-color($color));
-
-    @include active-focus-hover {
-      color: color-yiq(theme-color($color));
-    }
-
-    &.active,
-    &:active {
-      background-color: theme-color-dark($color);
-    }
-
-    &.disabled,
-    &:disabled {
-      background-color: $btn-bg-disabled;
-      color: $btn-color-disabled;
-    }
+    color: $white-primary; //color-yiq(theme-color($color));
   }
 }
 
 [class*='bg-dark'] :not([class*='bg-light']) .btn {
+
   &.disabled,
   &:disabled {
     background-color: $btn-bg-disabled-inverse;
     color: $btn-color-disabled-inverse;
   }
 }
 
+[class*='bg-outline']:hover,
+[class*='bg-outline']:active {
+  box-shadow: none;
+  transition: background-color 100ms linear;
+}
+
 .btn-lg,
 %btn-lg {
   font-size: $btn-font-size-lg;
@@ -112,40 +100,42 @@ fieldset:disabled a.btn {
 // Block button
 
 .btn-block {
-  display: block;
+  //display: block;
+  margin: 0;
   width: 100%;
 
-  + .btn-block {
+  +.btn-block {
     margin-top: $btn-block-margin-y;
   }
 }
 
-[type='button'],
+/*[type='button'],
 [type='reset'],
 [type='submit'] {
   &.btn-block {
     width: 100%;
   }
-}
+}*/
 
 // Link button
 
 .btn-link {
-  background-color: transparent;
+  //background-color: transparent;
   border-radius: 0;
   box-shadow: none;
   color: $link-color;
-  font-weight: $font-weight-regular;
+  font-weight: $font-weight-medium;
   text-decoration: $link-decoration;
   text-transform: none;
 
-  @include active-focus-hover {
+  @include hover-focus-active {
     color: $link-color-hover;
     text-decoration: $link-decoration-hover;
   }
 
-  @include focus-hover {
+  @include hover-focus {
     background-image: none;
+    box-shadow: none;
   }
 
   &.active,
@@ -167,3 +157,7 @@ fieldset:disabled a.btn {
 .btn-fluid {
   min-width: 0;
 }
+
+.btn-shaped {
+  border-radius: 1.125rem;
+}

assets/scss/material/_buttons.scss

@@ -0,0 +1,189 @@
+// Btn raised : https://material.io/design/components/buttons.html#
+// Todo btn-light color, btn-link, btn-light-outline
+
+
+.btn {
+  @include border-radius($btn-border-radius);
+  @include transition-standard(all);
+
+  -webkit-font-smoothing: antialiased;
+  align-items: center;
+  background-color: transparent;
+  background-image: none;
+  border: 0;
+  box-shadow: map-get($btn-elevation-shadow, shadow);
+  color: $btn-color;
+  display: inline-flex;
+  font-size: $btn-font-size;
+  font-weight: $btn-font-weight;
+  height: $btn-height;
+  justify-content: center;
+  letter-spacing: .0892857143em;
+  line-height: normal;
+  margin: 0;
+  max-width: 100%;
+  min-width: $btn-min-width;
+  outline: none;
+  padding: $btn-padding-y $btn-padding-x;
+  position: relative;
+  text-transform: uppercase;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  @include hover-focus {
+    background-image: linear-gradient(to bottom, rgba($white, $overlay-hover-colored-opacity), rgba($white, $overlay-hover-colored-opacity));
+    box-shadow: map-get($btn-elevation-shadow-hover, shadow);
+    outline: 0;
+    text-decoration: none;
+  }
+
+  &:focus,
+  &.focus {
+    background-image: linear-gradient(to bottom, rgba($white, $overlay-focus-colored-opacity), rgba($white, $overlay-focus-colored-opacity));
+  }
+
+  &:active,
+  &.active {
+    background-image: linear-gradient(to bottom, rgba($white, $overlay-pressed-colored-opacity), rgba($white, $overlay-pressed-colored-opacity));
+    box-shadow: map-get($btn-elevation-shadow-active, shadow);
+  }
+
+  &.disabled,
+  &:disabled {
+    background-color: $btn-bg-disabled;
+    background-image: none;
+    box-shadow: none;
+    color: $btn-color-disabled;
+  }
+
+  .show>&.dropdown-toggle {
+    background-image: linear-gradient(to bottom, $overlay-pressed-colored-opacity, $overlay-pressed-colored-opacity);
+  }
+}
+
+a.btn:not([class*='btn-flat']):not([class*='btn-outline']):enabled:hover {
+  color: $white;
+}
+
+a.btn.disabled,
+fieldset:disabled a.btn {
+  pointer-events: none;
+}
+
+@each $color, $values in $theme-colors {
+  .btn-#{$color} {
+    background-color: theme-color($color);
+    color: color-yiq(theme-color($color));
+  }
+}
+
+[class*='bg-dark']:not([class*='bg-light']) .btn {
+
+  &.disabled,
+  &:disabled {
+    background-color: $btn-bg-disabled-inverse;
+    color: $btn-color-disabled-inverse;
+  }
+}
+
+[class*='bg-outline']:hover,
+[class*='bg-outline']:active {
+  box-shadow: none;
+  transition: background-color 100ms linear;
+}
+
+//
+// Button Sizes
+//
+
+.btn-lg,
+%btn-lg {
+  font-size: $btn-font-size-lg;
+  //padding: $btn-padding-y-lg $btn-padding-x-lg;
+  height: $btn-height-lg;
+}
+
+.btn-sm,
+%btn-sm {
+  font-size: $btn-font-size-sm;
+  //padding: $btn-padding-y-sm $btn-padding-x-sm;
+  height: $btn-height-sm;
+}
+
+//
+// Block button
+//
+
+.btn-block {
+  //display: block;
+  margin: 0;
+  width: 100%;
+
+  +.btn-block {
+    margin-left: 0;
+    margin-top: $btn-block-margin-y;
+  }
+}
+
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  &.btn-block {
+    width: 100%;
+  }
+}
+
+// Link button
+
+.btn-link {
+  //background-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  color: $link-color;
+  font-weight: $font-weight-medium;
+  text-decoration: $link-decoration;
+  text-transform: none;
+
+  @include hover-focus-active {
+    color: $link-color-hover;
+    text-decoration: $link-decoration-hover;
+  }
+
+  @include hover-focus {
+    background-image: none;
+    box-shadow: none;
+  }
+
+  &.active,
+  &:active {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  &.disabled,
+  &:disabled {
+    background-color: transparent;
+    color: $btn-color-disabled;
+    text-decoration: none;
+  }
+}
+
+// No minimum width
+.btn-fluid {
+  min-width: 0;
+}
+
+// Material design addition
+
+.btn-shaped {
+  border-radius: $btn-height / 2;
+
+  &.btn-lg {
+    border-radius: $btn-height-lg / 2;
+  }
+
+  &.btn-sm {
+    border-radius: $btn-height-sm / 2;
+  }
+}

assets/scss/material/_card.scss

@@ -1,21 +1,22 @@
 .card {
-  @include border-radius($card-border-radius);
-
+  background-clip: border-box;
   background-color: $card-bg;
+  border-radius: $card-border-radius;
   box-shadow: map-get($card-elevation-shadow, shadow);
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
   position: relative;
   word-wrap: break-word;
 
+  // Keep ?
   @each $color, $values in $theme-colors {
     &.border-#{$color} {
       box-shadow: map-get($card-elevation-shadow, shadow), inset 0 0 0 $card-border-width theme-color($color);
 
       &[href],
       &[tabindex] {
-        @include active-focus-hover {
+        @include hover-focus-active {
           box-shadow: map-get($card-elevation-shadow-hover, shadow), inset 0 0 0 $card-border-width theme-color($color);
         }
       }
@@ -24,7 +25,7 @@
 
   &[href],
   &[tabindex] {
-    @include active-focus-hover {
+    @include hover-focus-active {
       box-shadow: map-get($card-elevation-shadow-hover, shadow);
       text-decoration: none;
     }
@@ -33,6 +34,28 @@
       outline: 0;
     }
   }
+
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  > .list-group:first-child {
+    .list-group-item:first-child {
+      @include border-top-radius($card-border-radius);
+    }
+  }
+
+  > .list-group:last-child {
+    .list-group-item:last-child {
+      @include border-bottom-radius($card-border-radius);
+    }
+  }
+}
+
+// Addition
+.card-shaped {
+  border-radius: 24px 8px;
 }
 
 // Accordion
@@ -79,9 +102,14 @@
 // Action
 
 .card-actions {
-  align-items: flex-start;
   display: flex;
-  padding: $card-action-padding-y ($card-action-padding-x - $card-action-inner-spacer-x) ($card-action-padding-y - $card-action-inner-spacer-y) $card-action-padding-x;
+  //padding: $card-action-padding-y ($card-action-padding-x - $card-action-inner-spacer-x) ($card-action-padding-y - $card-action-inner-spacer-y) $card-action-padding-x;
+  min-height: 3.25rem; // 52px
+  padding: 0 .5rem;
+
+  &:not(.flex-column) {
+    align-items: center;
+  }
 
   &:first-child {
     @include border-top-radius($card-border-radius);
@@ -92,14 +120,14 @@
   }
 
   .btn {
-    @include text-truncate;
+    //@include text-truncate;
 
     flex: 0 1 auto;
-    margin-right: $card-action-inner-spacer-x;
-    margin-bottom: $card-action-inner-spacer-y;
     min-width: 0;
-    padding-right: $card-action-inner-spacer-x;
-    padding-left: $card-action-inner-spacer-x;
+
+    &:not(.btn-icon) {
+      margin-right: $card-action-inner-spacer-x;
+    }
   }
 
   .dropdown-toggle::after {
@@ -112,6 +140,7 @@
 .card-body {
   flex: 1 1 auto;
   padding: $card-padding-y $card-padding-x;
+  //color: $card-color;
 
   &:first-child {
     @include border-top-radius($card-border-radius);
@@ -129,6 +158,7 @@
 // Footer
 
 .card-footer {
+  // background-color: $card-cap-bg;
   border-top: $card-border-width solid $card-border-color;
   padding: $card-padding-y $card-padding-x;
 
@@ -139,7 +169,7 @@
   }
 
   &:last-child {
-    @include border-bottom-radius($card-border-radius);
+    @include border-bottom-radius($card-border-radius); //@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
   }
 
   > :last-child {
@@ -150,12 +180,18 @@
 // Header
 
 .card-header {
+  //background-color: $card-cap-bg;
   border-bottom: $card-border-width solid $card-border-color;
-  margin-bottom: 0;
+  //color: $card-cap-color;
+  margin-bottom: 0; // Removes the default margin-bottom of <hN>
   padding: $card-padding-y $card-padding-x;
 
   &:first-child {
-    @include border-top-radius($card-border-radius);
+    @include border-top-radius($card-border-radius); //@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0)
+  }
+
+  + .list-group .list-group-item:first-child {
+    border-top: 0;
   }
 
   &:last-child {
@@ -164,9 +200,7 @@
     border-bottom: 0;
   }
 
-  + .list-group .list-group-item:first-child {
-    border-top: 0;
-  }
+
 }
 
 .card-header-pills {
@@ -182,21 +216,25 @@
 }
 
 .card-header-tabs {
+  //border-bottom: 0;
   margin: ($card-padding-y * -1) ($card-padding-x * -1) calc(#{$card-padding-y * -1} - #{$card-border-width});
 }
 
 // Image
 
 .card-img {
   @include border-radius($card-border-radius);
+  width: 100%;
 }
 
 .card-img-bottom {
   @include border-bottom-radius($card-border-radius);
+  width: 100%;
 }
 
 .card-img-top {
   @include border-top-radius($card-border-radius);
+  width: 100%;
 }
 
 // Image overlay
@@ -210,7 +248,9 @@
   left: 0;
 }
 
-// Set
+//
+// Columns : todo
+//
 
 .card-columns {
   column-count: $card-columns-count;
@@ -233,19 +273,25 @@
 }
 
 .card-deck {
+  display: flex;
+  flex-direction: column;
+
+  .card {
+    margin-bottom: $card-margin-y; //$card-deck-margin
+  }
+
   @include media-breakpoint-up(sm) {
-    display: flex;
     flex-flow: row wrap;
     margin-right: ($card-margin-x / -2);
     margin-left: ($card-margin-x / -2);
-  }
 
-  .card {
-    margin-bottom: $card-margin-y;
-
-    @include media-breakpoint-up(sm) {
-      flex: 1 0 0;
+    .card {
+      display: flex;
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      flex: 1 0 0%;
+      flex-direction: column;
       margin-right: ($card-margin-x / 2);
+      margin-bottom: 0; // Override the default
       margin-left: ($card-margin-x / 2);
     }
   }
@@ -311,30 +357,38 @@
 // Text and title
 
 .card-link {
-  @include active-focus-hover {
-    text-decoration: none;
+  //font-weight: $font-weight-bold; //addition
+
+  @include hover-focus-active {
+    //text-decoration: none;
   }
 
   + .card-link {
     margin-left: $card-inner-spacer-x;
   }
 }
 
-.card-subtitle {
-  @include typography-body-1;
+.card-title {
+  @include typography-headline-6;
 
-  margin-top: ($card-inner-spacer-y * -1);
-  margin-bottom: 0;
+  margin-bottom: $card-inner-spacer-y;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
-.card-text:last-child {
+.card-subtitle {
+  @include typography-subtitle-2;
+
+  margin-top: ($card-inner-spacer-y * -1); //-$card-spacer-y / 2;
   margin-bottom: 0;
 }
 
-.card-title {
-  @include typography-headline;
+.card-text {
+  @include typography-body-2;
 
-  margin-bottom: $card-inner-spacer-y;
+  //color: $black-secondary;
 
   &:last-child {
     margin-bottom: 0;

assets/scss/material/_chip.scss

@@ -9,14 +9,27 @@
   font-weight: $chip-font-weight;
   height: $chip-height;
   justify-content: center;
+  letter-spacing: $letter-spacing-body-2;
   line-height: $chip-line-height;
-  padding-right: $chip-padding-x;
-  padding-left: $chip-padding-x;
+  margin: .25rem;
+  //padding-right: $chip-padding-x;
+  //padding-left: $chip-padding-x;
+  padding: $chip-padding-y $chip-padding-x;
   position: relative;
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
 
+  .material-icons {
+    //border-radius: 50%;
+    color: $black-secondary;
+    font-size: 1.25rem;
+    //height: 1.25rem;
+    margin: -.25rem .25rem -.25rem -.25rem;
+    //vertical-align: middle;
+    width: 1.25rem;
+  }
+
   &:empty {
     display: none;
   }
@@ -42,14 +55,19 @@
 // Misc
 
 .chip-action {
-  @include transition-standard(background-color, box-shadow);
+  //@include transition-standard(background-color);
+  transition: background-color 15ms linear;
 
-  @include active-focus-hover {
-    box-shadow: map-get($chip-elevation-shadow-hover, shadow);
+  @include hover-focus-active {
+    //box-shadow: map-get($chip-elevation-shadow-hover, shadow);
     color: $chip-color;
     text-decoration: none;
   }
 
+  &:hover {
+    background-color: $chip-bg-hover;
+  }
+
   &:active {
     background-color: $chip-bg-active;
   }

assets/scss/material/_data-table.scss

@@ -1,8 +1,9 @@
 .table {
   background-color: $table-bg;
   border: 0;
+  //color: $table-color;
   margin-bottom: $table-margin-y;
-  max-width: 100%;
+  //max-width: 100%;
   width: 100%;
 
   td,
@@ -58,6 +59,7 @@
       height: $table-thead-cell-height;
       padding-top: $table-thead-padding-y;
       padding-bottom: $table-thead-padding-y;
+      //vertical-align: bottom;
     }
   }
 
@@ -121,14 +123,6 @@
   }
 }
 
-.table-borderless {
-  td,
-  th,
-  .table {
-    border: 0;
-  }
-}
-
 .table-bordered {
   border: $table-border-width solid $table-border-color;
 
@@ -137,6 +131,14 @@
   }
 }
 
+.table-borderless {
+  td,
+  th,
+  .table {
+    border: 0;
+  }
+}
+
 .table-sm {
   td,
   th {
@@ -189,13 +191,14 @@
 
 .table-hover {
   tbody tr {
-    @include hover {
+    &:hover {
       background-color: $table-bg-hover;
+      //color: $table-hover-color;
     }
   }
 }
 
-// Table background
+// Table backgrounds
 
 @each $color, $values in $theme-colors {
   .table-#{$color} {
@@ -297,15 +300,19 @@
 
 .table-responsive {
   @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint);
-    $infix: breakpoint-infix($next);
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
 
     &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
         display: block;
         overflow-x: auto;
         width: 100%;
-        -ms-overflow-style: -ms-autohiding-scrollbar;
+        -webkit-overflow-scrolling: touch;
+
+        > .table-bordered {
+          border: 0;
+        }
       }
     }
   }

assets/scss/material/_dialog.scss

@@ -1,57 +1,118 @@
+// .modal-open      - body class for killing the scroll
+// .modal           - container to scroll within
+// .modal-dialog    - positioning shell for the actual modal
+// .modal-content   - actual modal w/ bg and corners and stuff
+
+
+.modal-open {
+  overflow: hidden;
+
+  .modal {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+
 .modal {
+  @include transition-acceleration(opacity, transform); // added
+
   display: none;
+  height: 100%;
   outline: 0;
   overflow: hidden;
   position: fixed;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
+  width: 100%;
   z-index: map-get($dialog-elevation-shadow, elevation);
 
   &.fade {
-    @include transition-standard-complex(opacity);
+    //@include transition-standard-complex(opacity);
+    @include transition-deceleration(opacity);
+  }
+}
 
-    .modal-dialog {
-      @include transition-standard-complex(transform);
+.modal-dialog {
+  margin: $dialog-margin-y auto; // $modal-dialog-margin
+  //max-width: $dialog-width;
+  pointer-events: none;
+  position: relative;
+  width: auto; //calc(100% - #{$dialog-margin-x} * 2);
 
-      transform: scale($dialog-transition-scale);
-    }
+  .modal.fade & {
+    @include transition-deceleration(transform);
+    transform: scale($dialog-transition-scale);
   }
 
-  &.show .modal-dialog {
-    transform: scale(1);
+  .modal.show & {
+    transform: $dialog-show-transform;
+    opacity: 1;
   }
 }
 
-.modal-open {
-  overflow: hidden;
+.modal-dialog-scrollable {
+  display: flex; // IE10/11
+  max-height: calc(100vh - #{$dialog-margin-y * 2}); //calc(100% - #{$modal-dialog-margin * 2});
 
-  .modal {
-    overflow-x: hidden;
+  .modal-content {
+    max-height: calc(100vh - #{$dialog-margin-y * 2}); // IE10/11 calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11
+    overflow: hidden;
+  }
+
+  .modal-header,
+  .modal-footer {
+    flex-shrink: 0;
+  }
+
+  .modal-header {
+    border-bottom: 1px solid $black-divider;
+  }
+
+  .modal-footer {
+    border-top: 1px solid $black-divider;
+  }
+
+  .modal-body {
     overflow-y: auto;
   }
 }
 
-// Backdrop
+.modal-dialog-centered {
+  align-items: center;
+  display: flex;
+  min-height: calc(100% - #{$dialog-margin-y} * 2); //calc(100% - #{$modal-dialog-margin * 2});
 
-.modal-backdrop {
-  background-color: $dialog-backdrop-bg;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: (map-get($dialog-elevation-shadow, elevation) - 1);
+    // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
+    &::before {
+      display: block; // IE10
+      height: calc(100vh - #{$dialog-margin-y * 2});
+      content: "";
+    }
+
+    // Ensure `.modal-body` shows scrollbar (IE10/11)
+    &.modal-dialog-scrollable {
+      flex-direction: column;
+      justify-content: center;
+      height: 100%;
+
+      .modal-content {
+        max-height: none;
+      }
+
+      &::before {
+        content: none;
+      }
+    }
 }
 
 // Dialog
-
 .modal-content {
   @include border-radius($dialog-border-radius);
 
+  background-clip: padding-box;
   background-color: $dialog-content-bg;
   box-shadow: map-get($dialog-elevation-shadow, shadow);
+  //color: $modal-content-color;
   display: flex;
   flex-direction: column;
   outline: 0;
@@ -61,34 +122,57 @@
   width: 100%;
 }
 
-.modal-dialog {
-  margin: $dialog-margin-y auto;
-  max-width: $dialog-width;
-  pointer-events: none;
-  position: relative;
-  width: calc(100% - #{$dialog-margin-x} * 2);
+
+// Modal background
+.modal-backdrop {
+  background-color: $dialog-backdrop-bg;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  z-index: (map-get($dialog-elevation-shadow, elevation) - 1);
+
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+  &.show { opacity: $dialog-backdrop-opacity; }
 }
 
-.modal-dialog-centered {
+.modal-header {
   align-items: center;
   display: flex;
-  min-height: calc(100% - #{$dialog-margin-y} * 2);
-}
+  justify-content: space-between;
+  padding: $spacer $dialog-padding-x calc(#{$spacer} - 1px);
 
-.modal-lg {
-  max-width: $dialog-width-lg;
-}
+  &:first-child {
+    @include border-top-radius($dialog-border-radius);
+  }
+
+  /*&:last-child {
+    @include border-bottom-radius($dialog-border-radius);
+  }*/
 
-.modal-sm {
-  max-width: $dialog-width-sm;
+  .close {
+    //padding: $modal-header-padding;
+    //margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
+  }
 }
 
-// Misc
+// Title text within header
+.modal-title {
+  @include typography-headline-6();
+  margin: 0;
+}
 
+// Modal body
 .modal-body {
+  // Enable `flex-grow: 1` so that the body take up as much space as possible
+  // when should there be a fixed height on `.modal-dialog`.
   flex: 1 1 auto;
-  padding: $dialog-padding-y $dialog-padding-x;
+  padding: 1.25rem $dialog-padding-x;
   position: relative;
+  @include typography-body-1();
+  color: rgba($black, $black-caption-opacity); // djibe added from GMD
 
   &:first-child {
     @include border-top-radius($dialog-border-radius);
@@ -99,7 +183,7 @@
   }
 
   .modal-header + & {
-    padding-top: 0;
+    padding: $dialog-padding-y $dialog-padding-x;
   }
 
   > :last-child {
@@ -111,7 +195,7 @@
   align-items: flex-end;
   display: flex;
   justify-content: flex-end;
-  padding: $dialog-footer-padding-y $dialog-footer-padding-x $dialog-footer-padding-y ($dialog-footer-padding-x - $dialog-footer-inner-spacer-x);
+  padding: $dialog-footer-padding-y $dialog-footer-padding-x;
 
   &:first-child {
     @include border-top-radius($dialog-border-radius);
@@ -133,7 +217,7 @@
 
     @each $color, $values in $theme-colors {
       &-#{$color} {
-        @include plain-active-focus-hover {
+        @include plain-hover-focus {
           color: theme-color($color);
         }
 
@@ -178,27 +262,6 @@
   }
 }
 
-.modal-header {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  padding: $dialog-padding-y $dialog-padding-x;
-
-  &:first-child {
-    @include border-top-radius($dialog-border-radius);
-  }
-
-  &:last-child {
-    @include border-bottom-radius($dialog-border-radius);
-  }
-}
-
-.modal-title {
-  @include typography-title;
-
-  margin: 0;
-}
-
 // Scrollbar measure
 
 .modal-scrollbar-measure {
@@ -208,3 +271,45 @@
   top: -99999px;
   width: 50px;
 }
+
+// Scale up the modal
+@include media-breakpoint-up(sm) {
+  // Automatically set modal's width for larger viewports
+  .modal-dialog {
+    max-width: $dialog-width;
+    //margin: $modal-dialog-margin-y-sm-up auto;
+  }
+
+  /*.modal-dialog-scrollable {
+    max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
+
+    .modal-content {
+      max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
+    }
+  }*/
+  /*
+  .modal-dialog-centered {
+    min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});
+
+    &::before {
+      height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
+    }
+  }
+
+  .modal-content {
+    @include box-shadow($modal-content-box-shadow-sm-up);
+  }
+  */
+  .modal-sm { max-width: $dialog-width-sm; }
+}
+
+@include media-breakpoint-up(lg) {
+  .modal-lg,
+  .modal-xl {
+    max-width: $dialog-width-lg;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .modal-xl { max-width: $dialog-width-xl; }
+}

assets/scss/material/_expansion-panel.scss

@@ -1,48 +1,50 @@
 // Todo: expansion panel with different background colours
+// Todo : lga.active:hover/focus/active
+// Todo : li divider
 
 .list-group {
+  border: 1px solid $black-divider;
+  border-radius: $expansion-panel-border-radius;
   display: flex;
   flex-direction: column;
   margin-bottom: 0;
-  padding-left: 0;
+  padding: .5rem 0;
 }
 
 .list-group-item {
-  @include transition-standard(background-color, color);
+  //@include transition-standard(background-color, color);
+  transition: background-color 15ms linear;
 
   background-color: $expansion-panel-bg;
   border: 0;
-  box-shadow: map-get($expansion-panel-elevation-shadow, shadow);
+  //box-shadow: map-get($expansion-panel-elevation-shadow, shadow);
   color: $expansion-panel-color;
   display: block;
   font-size: $expansion-panel-font-size;
+  letter-spacing: $expansion-panel-letter-spacing;
   line-height: $expansion-panel-line-height;
+  // margin-bottom: -$list-group-border-width;
   min-height: $expansion-panel-height;
   padding: $expansion-panel-padding-y $expansion-panel-padding-x;
   position: relative;
 
-  @include active-focus-hover {
+  @include hover-focus-active {
     color: $expansion-panel-color;
     text-decoration: none;
   }
 
   &.active {
-    background-color: $expansion-panel-bg-active;
     color: $expansion-panel-color;
+    background-color: $expansion-panel-bg-selected;
+    border-radius: 0 2rem 2rem 0;
+    z-index: 2;
   }
 
   &.disabled,
   &:disabled {
     background-color: $expansion-panel-bg;
     color: $expansion-panel-color-disabled;
-  }
-
-  &:first-child {
-    @include border-top-radius($expansion-panel-border-radius);
-  }
-
-  &:last-child {
-    @include border-bottom-radius($expansion-panel-border-radius);
+    pointer-events: none;
   }
 
   .card & {
@@ -51,15 +53,25 @@
   }
 }
 
+// didn't use @mixin list-group-item-variant
 .list-group-item-action {
   color: $expansion-panel-color;
   text-align: inherit;
   width: 100%;
 
-  @include active-focus-hover {
-    background-color: $expansion-panel-bg-active;
+  @include hover-focus {
+    background-color: $expansion-panel-bg-hover;
     color: $expansion-panel-color;
     text-decoration: none;
+    z-index: 1;
+  }
+
+  &:focus {
+    background-color: $expansion-panel-bg-focus;
+  }
+
+  &:active {
+    background-color: $expansion-panel-bg-active;
   }
 
   &.disabled,
@@ -73,6 +85,38 @@
   }
 }
 
+[class*='list-group-horizontal'] {
+  padding: 0;
+
+  .list-group-item {
+    //margin-right: -$list-group-border-width;
+    margin-bottom: 0;
+    border-right: 1px solid $black-divider;
+
+    &:first-child {
+      @include border-left-radius($expansion-panel-border-radius);
+      border-top-right-radius: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+      @include border-right-radius($expansion-panel-border-radius);
+      border-bottom-left-radius: 0;
+      border-right: 0;
+    }
+  }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .list-group-horizontal#{$infix} {
+      flex-direction: row;
+    }
+  }
+}
+
 @each $color, $values in $theme-colors {
   .list-group-item-#{$color} {
     background-color: theme-color-light($color);
@@ -84,7 +128,7 @@
     }
 
     &.list-group-item-action {
-      @include active-focus-hover {
+      @include hover-focus-active {
         background-color: theme-color($color);
         color: color-yiq(theme-color($color));
       }
@@ -207,7 +251,7 @@
   text-align: inherit;
   width: 100%;
 
-  @include active-focus-hover {
+  @include hover-focus-active {
     background-color: $expansion-panel-bg-active;
     color: $expansion-panel-color;
     text-decoration: none;
@@ -232,21 +276,25 @@
 // Flush
 
 .list-group-flush {
-  &:first-child .list-group-item:first-child {
+  /*&:first-child .list-group-item:first-child {
     border-top: 0;
   }
 
   &:last-child .list-group-item:last-child {
     border-bottom: 0;
-  }
+  }*/
 
-  .list-group-item {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+
+  /*.list-group-item {
     border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
     border-radius: 0;
     box-shadow: none;
 
     &:last-child {
       border-bottom: $expansion-panel-border-width solid $expansion-panel-border-color;
     }
-  }
+  }*/
 }