material-sass 4.0.0.alpha5 → 4.0.0.alpha6

data/app/assets/stylesheets/material/material/_chip.scss

@@ -1,5 +1,5 @@
-.chip,
-.tag {
+.badge,
+.chip {
   background-color: $chip-bg;
   border-radius: ($chip-height / 2);
   color: $chip-color;
@@ -17,8 +17,8 @@
   }
 }
 
-a.chip,
-a.tag {
+a.badge,
+a.chip {
   color: $chip-color;
   z-index: 1;
   @include transition-standard(box-shadow);
@@ -62,14 +62,14 @@ a.tag {
 }
 
 // colour
-  .chip-inverse,
-  .tag-inverse {
+  .badge-inverse,
+  .chip-inverse {
     background-color: $chip-bg-inverse;
     color: $chip-color-inverse;
   }
 
-  a.chip-inverse,
-  a.tag-inverse {
+  a.badge-inverse,
+  a.chip-inverse {
     @include plain-active-focus-hover {
       color: $chip-color-inverse;
     }
@@ -78,14 +78,14 @@ a.tag {
   @each $color in $palettes {
     $i: index($palettes, $color);
 
-    .chip-#{$color},
-    .tag-#{$color} {
+    .badge-#{$color},
+    .chip-#{$color} {
       background-color: nth($palettes-color, $i);
       color: nth($palettes-text-color, $i);
     }
 
-    a.chip-#{$color},
-    a.tag-#{$color} {
+    a.badge-#{$color},
+    a.chip-#{$color} {
       @include plain-active-focus-hover {
         color: nth($palettes-text-color, $i);
       }

data/app/assets/stylesheets/material/material/_data-table.scss

@@ -3,9 +3,7 @@
 //
 
 .table {
-  background-color: $table-bg;
   border: 0;
-  border-collapse: separate;
   margin-bottom: $table-margin-bottom;
   max-width: 100%;
   width: 100%;

data/app/assets/stylesheets/material/material/_dialog.scss

@@ -10,7 +10,6 @@
     left: 0;
   text-align: center;
   white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
   z-index: map-get($dialog-elevation-shadow, elevation);
 
   &::before {
@@ -46,7 +45,7 @@
     z-index: (map-get($dialog-elevation-shadow, elevation) - 1);
 
     &.fade {
-      transform: scale(1);
+      transform: none;
     }
   }
 
@@ -81,16 +80,22 @@
 //
   .dialog-body,
   .modal-body {
+    flex: 1 1 auto;
     padding: $dialog-inner-padding;
     position: relative;
+
+    > :last-child {
+      margin-bottom: 0;
+    }
   }
 
   .dialog-content,
   .modal-content {
     background-clip: padding-box;
     background-color: $dialog-content-bg;
-    border: 1px solid transparent;
     box-shadow: map-get($dialog-elevation-shadow, shadow);
+    display: flex;
+    flex-direction: column;
     outline: 0;
     position: relative;
     vertical-align: baseline;
@@ -99,13 +104,18 @@
 
   .dialog-footer,
   .modal-footer {
-    padding: $dialog-footer-spacer-y $dialog-footer-spacer-x;
-    padding-left: $dialog-inner-padding;
-    text-align: right;
-    @include clearfix;
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    padding: $dialog-footer-spacer-y ($dialog-footer-spacer-x / 2);
+    padding-left: ($dialog-inner-padding - $dialog-footer-spacer-x / 2);
+
+    > * {
+      margin-right: ($dialog-footer-spacer-x / 2);
+      margin-left: ($dialog-footer-spacer-x / 2);
+    }
 
     .btn {
-      margin-left: $dialog-footer-spacer-x;
       min-width: $dialog-footer-btn-min-width;
       padding-right: $dialog-footer-spacer-x;
       padding-left: $dialog-footer-spacer-x;
@@ -114,18 +124,14 @@
 
   .dialog-header,
   .modal-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
     padding: $dialog-inner-padding;
+    padding-bottom: 0;
 
-    + .dialog-body,
-    + .modal-body {
-      padding-top: 0;
-    }
-  }
-
-  .dialog-text,
-  .modal-text {
     &:last-child {
-      margin-bottom: 0;
+      padding-bottom: $dialog-inner-padding;
     }
   }
 

data/app/assets/stylesheets/material/material/_expansion-panel.scss

@@ -1,36 +1,50 @@
-.expansion-panel,
+//
+// todo: bootstrap accordion (i.e. material expansion panel)
+// since bootstrap accordion now relies on `.card`
+// some tweaks are needed for the default accordion example to work correctly
+// we probably need a wrapper to add additional styles in line with material design guidelines
+//
+
 .list-group {
-  margin-bottom: $expansion-panel-margin-bottom;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0;
   padding-left: 0;
 }
 
 //
 // item
 //
-  .expansion-panel-item,
   .list-group-item {
+    align-items: center;
     background-color: $expansion-panel-bg;
     border: 0;
-    border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
+    border-bottom: $expansion-panel-border-width solid $expansion-panel-border-color;
     box-shadow: map-get($expansion-panel-elevation-shadow, shadow);
     color: $expansion-panel-color;
-    display: block;
+    display: flex;
+    flex-flow: row wrap;
     font-size: $expansion-panel-font-size;
     min-height: $expansion-panel-height;
-    padding: $expansion-panel-spacer-y $expansion-panel-spacer-x;
+    padding: $expansion-panel-inner-spacer-y $expansion-panel-inner-spacer-x;
     position: relative;
     @include transition-standard(background-color, color);
 
-    &:first-of-type {
-      border-top-color: transparent;
+    &:first-child {
       @include border-top-radius($border-radius);
     }
 
-    &:last-of-type {
+    &:last-child {
+      border-bottom: 0;
       @include border-bottom-radius($border-radius);
     }
 
     // active, focus, hover
+      @include active-focus-hover {
+        color: $expansion-panel-color;
+        text-decoration: none;
+      }
+
       &.active {
         background-color: $expansion-panel-bg-active;
       }
@@ -39,10 +53,10 @@
       &.disabled {
         background-color: $expansion-panel-bg-disabled;
         color: $expansion-panel-color-disabled;
+        cursor: $cursor-disabled;
       }
   }
 
-  .expansion-panel-item-action,
   .list-group-item-action {
     color: $expansion-panel-color;
     text-align: inherit;
@@ -51,11 +65,6 @@
     // active, focus, hover
       @include active-focus-hover {
         background-color: $expansion-panel-bg-active;
-        color: $expansion-panel-color;
-
-        @if ($link-decoration-active != "none") {
-          text-decoration: none;
-        }
       }
 
       &:focus {
@@ -65,8 +74,6 @@
     // disabled
       &.disabled {
         background-color: $expansion-panel-bg-disabled;
-        color: $expansion-panel-color-disabled;
-        cursor: $cursor-disabled;
       }
   }
 
@@ -74,18 +81,20 @@
     @each $color in $palettes {
       $i: index($palettes, $color);
 
-      .expansion-panel-item-#{$color},
       .list-group-item-#{$color} {
         background-color: nth($palettes-color, $i);
         color: nth($palettes-text-color, $i);
 
         // active, focus, hover
+          @include active-focus-hover {
+            color: nth($palettes-text-color, $i);
+          }
+
           &.active {
             background-color: nth($palettes-color-dark, $i);
             color: nth($palettes-text-color-dark, $i);
           }
 
-        &.expansion-panel-item-action,
         &.list-group-item-action {
           // active, focus, hover
             @include active-focus-hover {
@@ -97,144 +106,34 @@
     }
 
 //
-// expansion
+// flush
 //
-  .expansion-panel-collapse {
-    background-color: $expansion-panel-bg;
-    box-shadow: map-get($expansion-panel-elevation-shadow, shadow);
-    position: relative;
-    @include border-bottom-radius($border-radius);
-
-    &.collapsing,
-    &.in {
-      margin-bottom: $expansion-panel-margin-between;
-
-      + .expansion-panel-item,
-      + .list-group-item {
-        border-top-color: transparent;
-        @include border-top-radius($border-radius);
-      }
-    }
-
-    &.collapsing {
-      transition-property: height, margin-bottom;
-    }
-
-    .collapsed + & {
-      &.collapsing {
-        margin-bottom: 0;
-
-        + .expansion-panel-item,
-        + .list-group-item {
-          border-top-color: $expansion-panel-border-color;
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
-        }
-      }
-    }
-
-  }
-
-  .expansion-panel-collapse-body {
-    padding: $expansion-panel-body-spacer-y $expansion-panel-spacer-x;
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .expansion-panel-collapse-footer {
-    border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
-    padding: $expansion-panel-footer-spacer-y $expansion-panel-footer-spacer-x;
-    padding-left: $expansion-panel-spacer-y;
-    text-align: right;
-
-    .btn {
-      min-width: 0;
-
-      + .btn {
-        margin-left: $expansion-panel-footer-spacer-x;
-      }
-    }
-  }
-
-  .expansion-panel-item,
-  .list-group-item {
-    &[data-toggle="collapse"] {
-      border-top-color: transparent;
-      cursor: pointer;
-      margin-top: $expansion-panel-margin-between;
-      transition-property: background-color, border-radius, border-top-color, color, margin-top;
-      @include border-top-radius($border-radius);
-
-      &::before {
-        background-color: inherit;
-        content: "";
-        display: block;
-        height: 2px;
-        position: absolute;
-          right: 0;
-          bottom: 0;
-          left: 0;
-        z-index: 1;
-      }
+  .list-group-flush {
+    .list-group-item {
+      border-radius: 0;
+      box-shadow: none;
 
       &:first-child {
-        margin-top: 0;
+        border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
       }
 
-      // active, focus, hover
-        @include active-focus-hover {
-          background-color: $expansion-panel-bg-active;
-          color: $expansion-panel-color;
-
-          @if ($link-decoration-active != "none") {
-            text-decoration: none;
-          }
-        }
-
-        &:focus {
-          outline: 0;
-        }
-    }
-
-    &[data-toggle="collapse"].collapsed {
-      border-radius: 0;
-      border-top-color: $expansion-panel-border-color;
-      margin-top: 0;
-
-      &::before {
-        display: none;
+      &:last-child {
+        border-bottom: $expansion-panel-border-width solid $expansion-panel-border-color;
       }
     }
 
-    &[data-toggle="collapse"].disabled {
-      background-color: $expansion-panel-bg-disabled;
-      color: $expansion-panel-color-disabled;
-      cursor: $cursor-disabled;
+    &:first-child .list-group-item:first-child {
+      border-top: 0;
     }
-  }
 
-  // colour
-    @each $color in $palettes {
-      $i: index($palettes, $color);
-
-      .expansion-panel-item-#{$color},
-      .list-group-item-#{$color} {
-        &[data-toggle="collapse"] {
-          // active, focus, hover
-            @include active-focus-hover {
-              background-color: nth($palettes-color-dark, $i);
-              color: nth($palettes-text-color-dark, $i);
-            }
-        }
-      }
+    &:last-child .list-group-item:last-child {
+      border-bottom: 0;
     }
+  }
 
 //
 // misc
 //
-  .expansion-panel-item-heading,
   .list-group-item-heading {
     color: inherit;
     font-size: $expansion-panel-font-size;
@@ -243,50 +142,10 @@
     margin-bottom: 0;
   }
 
-  .expansion-panel-item-icon {
-    color: $expansion-panel-icon-color;
-    font-size: $font-size-base;
-    line-height: $material-icon-size;
-    height: $material-icon-size;
-    margin-top: ($material-icon-size / -2);
-    position: absolute;
-      top: ($expansion-panel-height / 2);
-      right: $expansion-panel-spacer-x;
-    width: $material-icon-size;
-    @include transition-standard(color);
-  }
-
-  // active, focus, hover
-    .expansion-panel-item,
-    .list-group-item {
-      &[data-toggle="collapse"] {
-        @include active-focus-hover {
-          .expansion-panel-item-icon {
-            color: $expansion-panel-icon-color-active;
-          }
-        }
-      }
-    }
-
-  // variation
-    .expansion-panel-item-icon-rotate {
-      transition-property: color, transform;
-
-      .expansion-panel-item[data-toggle="collapse"] &,
-      .list-group-item[data-toggle="collapse"] & {
-        transform: rotate(180deg);
-      }
-
-      .expansion-panel-item.collapsed[data-toggle="collapse"] &,
-      .list-group-item.collapsed[data-toggle="collapse"] & {
-        transform: rotate(0);
-      }
-    }
-
-  .expansion-panel-item-text,
   .list-group-item-text {
     color: inherit;
     font-size: $expansion-panel-font-size-secondary;
     line-height: $line-height-base;
+    margin-top: 0;
     margin-bottom: 0;
   }

data/app/assets/stylesheets/material/material/_menu.scss

@@ -16,7 +16,7 @@
   line-height: $menu-line-height;
   list-style: none;
   margin: 0;
-  min-width: 100%;
+  min-width: $menu-min-width;
   padding: $menu-padding-y 0;
   position: absolute;
     left: 0;
@@ -48,7 +48,7 @@
   .dropdown-menu {
     // position
       bottom: 100%;
-    transform-origin:  0 100%;
+    transform-origin: 0 100%;
     @include border-top-radius($border-radius);
     @include border-bottom-radius(0);
   }
@@ -61,7 +61,11 @@
 }
 
 // open
-  .open {
+  .show {
+    > a {
+      outline: 0;
+    }
+
     > .dropdown-menu,
     > .menu {
       animation-duration: $transition-duration-lg;
@@ -118,7 +122,7 @@
     }
   }
 
-  .dropup.open {
+  .dropup.show {
     > .dropdown-menu {
       animation-name: dropup-open;
     }
@@ -143,6 +147,13 @@
   }
 
 // positioning
+  .dropdown-menu-left,
+  .menu-left {
+    // position
+      right: auto;
+      left: 0;
+  }
+
   .dropdown-menu-right,
   .menu-right {
     // position
@@ -161,6 +172,10 @@
     font-size: $menu-font-size-cascading;
     line-height: $menu-line-height-cascading;
     padding: $menu-padding-y-cascading 0;
+
+    @include media-breakpoint-up(sm) {
+      min-width: $menu-min-width-cascading;
+    }
   }
 
 //

data/app/assets/stylesheets/material/material/_navdrawer.scss

@@ -22,11 +22,10 @@
       bottom: 0;
       left: 0;
     z-index: (map-get($navdrawer-elevation-shadow, elevation) - 1);
-    @include transition-sharp(opacity);
+    @include transition-standard(opacity);
 
-    &.in {
+    &.show {
       opacity: 1;
-      @include transition-deceleration(opacity);
     }
   }
 
@@ -45,7 +44,6 @@
       left: 0;
     transform: translate3d(-100%, 0, 0);
     width: $navdrawer-width-mobile;
-    -webkit-overflow-scrolling: touch;
     @include transition-sharp(transform);
 
     // direction
@@ -57,7 +55,7 @@
       }
 
     // open
-      .navdrawer.in & {
+      .navdrawer.show & {
         transform: translate3d(0, 0, 0);
         @include transition-deceleration(transform);
       }
@@ -81,7 +79,7 @@
     border-bottom: $navdrawer-header-border-width solid $navdrawer-header-border-color;
     display: block;
     margin-bottom: $navdrawer-inner-spacer-y;
-    padding: ($navdrawer-inner-spacer-y * 2) $navdrawer-inner-spacer-x;
+    padding: $toolbar-padding-y $navdrawer-inner-spacer-x;
   }
 
   .navdrawer-subheader {
@@ -104,15 +102,14 @@
 // nav
 //
   .navdrawer-nav {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
     margin-bottom: $navdrawer-inner-spacer-y;
-
-    .nav-item + .nav-item {
-      margin-top: 1px;
-    }
+    padding-left: 0;
 
     .nav-link {
       color: $navdrawer-nav-link-color;
-      display: block;
       font-size: $navdrawer-nav-link-font-size;
       font-weight: $navdrawer-nav-link-font-weight;
       line-height: 1;
@@ -133,6 +130,10 @@
           outline: 0;
         }
 
+        &.active {
+          color: $navdrawer-nav-link-color-active;
+        }
+
       // disabled
         &.disabled {
           background-color: transparent;
@@ -140,7 +141,6 @@
         }
     }
 
-    .nav-link.active,
     .active > .nav-link {
       color: $navdrawer-nav-link-color-active;
     }
@@ -156,6 +156,10 @@
     }
   }
 
+  .active > .nav-link .navdrawer-nav-icon {
+    color: $navdrawer-nav-link-color-active;
+  }
+
 //
 // permanent
 //

data/app/assets/stylesheets/material/material/_progress-circular.scss

@@ -5,7 +5,7 @@
 }
 
 .progress-circular-gap {
-  border-top: ($progress-circular-spinner-width / 2) solid $progress-circular-color;
+  border-top: ($progress-circular-spinner-width / 2) solid $progress-circular-bg;
   position: absolute;
     top: 0;
     right: ($progress-circular-height / 2 - $progress-circular-spinner-width / 4);
@@ -40,7 +40,7 @@
 }
 
 .progress-circular-spinner {
-  border: $progress-circular-spinner-width solid $progress-circular-color;
+  border: $progress-circular-spinner-width solid $progress-circular-bg;
   border-bottom-color: transparent;
   border-radius: 50%;
   height: $progress-circular-height;