WIP BS 4.3.1

assets/scss/_colors.scss

@@ -692,12 +692,12 @@ $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-secondary-opacity: .60 !default; // 0.54 ; djibe modif for Dialog from GMD
+$black-hint-opacity:      .32 !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;

assets/scss/_utilities.scss

@@ -12,6 +12,7 @@
 @import 'utilities/shadows';
 @import 'utilities/sizing';
 @import 'utilities/spacing';
+@import 'utilities/stretched-link';
 @import 'utilities/text';
 @import 'utilities/visibility';
 

assets/scss/bootstrap/_alert.scss

@@ -1,3 +1,5 @@
+// 4.3.1
+
 .alert {
   @include border-radius($alert-border-radius);
 

assets/scss/bootstrap/_badge.scss

@@ -1,3 +1,5 @@
+// 4.3.1 ok
+
 .badge {
   @include border-radius($badge-border-radius);
 

assets/scss/bootstrap/_breadcrumb.scss

@@ -1,3 +1,5 @@
+// 4.3.1 ok
+
 .breadcrumb {
   @include border-radius($breadcrumb-border-radius);
 

assets/scss/material/_button-flat.scss

@@ -1,3 +1,6 @@
+// djibe edit from https://material-components.github.io/material-components-web-catalog/#/component/button?label=HYPERLONG%20TEXT&type=raised
+
+
 [class*='btn-flat'],
 [class*='btn-outline'] {
   background-color: transparent;
@@ -26,6 +29,9 @@
       color: $btn-color-disabled;
     }
   }
+  .btn-outline-#{$color} {
+    border: 2px solid theme-color($color);
+  }
 }
 
 .btn-flat-light,

assets/scss/material/_button.scss

@@ -1,40 +1,49 @@
 .btn {
   @include border-radius($btn-border-radius);
   @include transition-standard(box-shadow);
-
+
+  -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;
+  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 hover {
+    &:not(:disabled):not(.disabled):not(.btn-link):not([class*='btn-outline-']):not([class*='btn-flat']) {
+      background-image: linear-gradient(to bottom, $btn-overlay-inverse, $btn-overlay-inverse);
+      box-shadow: map-get($btn-elevation-shadow-hover, shadow); // djibe addition
+      transition: background-image 15ms linear, box-shadow .28ms cubic-bezier(.4,0,.2,1);
+    }
+  }
+
   @include active-focus-hover {
     color: $btn-color;
     text-decoration: none;
   }
 
-  @include focus-hover {
-    background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
-  }
-
-  &.active,
-  &:active {
-    background-color: $btn-bg-active;
-    background-image: none;
+  @include active {
+    //background-color: $btn-bg-active;
+    background-image: linear-gradient(to bottom, rgba(255,255,255,.37), rgba(255,255,255,.37));
+    //background-image: none;
     box-shadow: map-get($btn-elevation-shadow-active, shadow);
   }
 
@@ -60,12 +69,10 @@
   }
 }
 
-// stylelint-disable selector-no-qualifying-type
 a.btn.disabled,
 fieldset:disabled a.btn {
   pointer-events: none;
 }
-// stylelint-enable
 
 @each $color, $values in $theme-colors {
   .btn-#{$color} {
@@ -78,7 +85,7 @@ fieldset:disabled a.btn {
 
     &.active,
     &:active {
-      background-color: theme-color-dark($color);
+      background-color: theme-color-dark($color); // todo
     }
 
     &.disabled,

assets/scss/material/_dialog.scss

@@ -1,12 +1,21 @@
+.modal-open {
+  overflow: hidden;
+
+  .modal {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+
 .modal {
   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 {
@@ -21,37 +30,81 @@
 
   &.show .modal-dialog {
     transform: scale(1);
+    opacity: 1;
   }
 }
 
-.modal-open {
-  overflow: hidden;
+.modal-dialog {
+  margin: $dialog-margin-y auto;
+  max-width: $dialog-width;
+  pointer-events: none;
+  position: relative;
+  width: calc(100% - #{$dialog-margin-x} * 2);
+}
 
-  .modal {
-    overflow-x: hidden;
+.modal-dialog-scrollable {
+  display: flex; // IE10/11
+  max-height: calc(100vh - 32px);
+
+  .modal-content {
+    max-height: calc(100vh - #{$dialog-margin-y * 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);
 
-.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 +114,63 @@
   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: 100%;
+  z-index: (map-get($dialog-elevation-shadow, elevation) - 1);
+
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+  &.show { opacity: 1; }
 }
 
-.modal-dialog-centered {
+.modal-header {
   align-items: center;
   display: flex;
-  min-height: calc(100% - #{$dialog-margin-y} * 2);
-}
+  justify-content: space-between;
+  padding: 1rem $dialog-padding-x;
+  border-bottom: 1px solid 0; // djibe addition from GMD
 
-.modal-lg {
-  max-width: $dialog-width-lg;
-}
+  &:first-child {
+    @include border-top-radius($dialog-border-radius);
+  }
 
-.modal-sm {
-  max-width: $dialog-width-sm;
+  /*&:last-child {
+    @include border-bottom-radius($dialog-border-radius);
+  }*/
+
+  .close {
+    //padding: $modal-header-padding;
+    // auto on the left force icon to the right even when there is no .modal-title
+    //margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
+  }
 }
 
-// Misc
+// Title text within header
+.modal-title {
+  // djibe edit
+  font-size: 1.25rem;
+  font-weight: $font-weight-medium;
+  letter-spacing: .0125em;
+  line-height: 2rem;
+  margin: 0;
+}
 
+// Modal body
 .modal-body {
   flex: 1 1 auto;
   padding: $dialog-padding-y $dialog-padding-x;
   position: relative;
+  color: $black-secondary; // djibe added from GMD
+  font-size: $dialog-body-font-size; // djibe added from GMD
+  line-height: 1.5rem;
+  letter-spacing: .03125em;
 
   &:first-child {
     @include border-top-radius($dialog-border-radius);
@@ -178,27 +260,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 +269,14 @@
   top: -99999px;
   width: 50px;
 }
+
+.modal-lg {
+  max-width: $dialog-width-lg;
+}
+
+.modal-sm {
+  max-width: $dialog-width-sm;
+}
+
+// Scale up the modal
+// TODO