material-sass 4.0.0.beta → 4.0.0.beta2

data/{app/assets → assets}/stylesheets/material/material/_chip.scss

@@ -31,17 +31,13 @@
   }
 }
 
-// Colour
 @each $color, $values in $theme-colors {
   .chip-#{$color} {
-    @include color-yiq(map-get(theme-color($color), color));
-
     background-color: map-get(theme-color($color), color);
+    color: color-yiq(map-get(theme-color($color), color));
   }
 }
 
-
-
 // Misc
 
 .chip-action {
@@ -63,17 +59,17 @@
 }
 
 .chip-icon {
-  @include color-yiq($chip-icon-bg);
   @include text-truncate;
 
   align-items: center;
   background-color: $chip-icon-bg;
   border-radius: ($chip-height / 2);
+  color: color-yiq($chip-icon-bg);
   display: inline-flex;
   flex-shrink: 0;
   font-size: $chip-icon-font-size;
   font-style: normal;
-  font-weight: normal;
+  font-weight: $chip-font-weight;
   height: $chip-height;
   justify-content: center;
   margin-right: ($chip-inner-spacer-x * 2);

data/{app/assets → assets}/stylesheets/material/material/_data-table.scss

@@ -58,18 +58,20 @@
     }
   }
 
-  > tbody:first-child > tr:first-child,
-  > tfoot:first-child > tr:first-child,
-  > thead:first-child > tr:first-child {
-    td,
-    th {
-      border-top: 0;
-    }
-  }
-
   .table {
     border-top: $table-border-width solid $table-border-color;
   }
+
+  > :first-child {
+    > tr:first-child,
+    > tr:first-child,
+    > tr:first-child {
+      td,
+      th {
+        border-top: 0;
+      }
+    }
+  }
 }
 
 .table-bordered {
@@ -90,7 +92,6 @@
   }
 }
 
-// Size
 .table-sm {
   td,
   th {
@@ -133,8 +134,6 @@
   }
 }
 
-
-
 // Table background
 
 @each $color, $values in $theme-colors {
@@ -142,9 +141,8 @@
     &,
     > td,
     > th {
-      @include color-yiq(map-get(theme-color($color), color));
-
       background-color: map-get(theme-color($color), color);
+      color: color-yiq(map-get(theme-color($color), color));
     }
   }
 
@@ -153,17 +151,15 @@
       &,
       > td,
       > th {
-        @include color-yiq(map-get(theme-color($color), darker));
-
         background-color: map-get(theme-color($color), darker);
+        color: color-yiq(map-get(theme-color($color), darker));
       }
     }
   }
 }
 
-// scss-lint:disable MergeableSelector
+// stylelint-disable-next-line no-duplicate-selectors
 .table {
-// scss-lint:enable MergeableSelector
   .thead-dark {
     td,
     th {
@@ -185,20 +181,6 @@
   background-color: $table-dark-bg;
   color: $table-dark-color;
 
-  tbody,
-  tfoot,
-  thead {
-    td,
-    th {
-      color: inherit;
-    }
-  }
-
-  td,
-  th {
-    border-color: $table-dark-border-color;
-  }
-
   &.table-striped {
     tbody tr:nth-of-type(odd) {
       background-color: $table-dark-bg-accent;
@@ -212,15 +194,36 @@
       }
     }
   }
-}
 
+  tbody,
+  tfoot,
+  thead {
+    td,
+    th {
+      color: inherit;
+    }
+  }
 
+  td,
+  th {
+    border-color: $table-dark-border-color;
+  }
+}
 
 // Table responsive
 
 .table-responsive {
-  display: block;
-  overflow-x: auto;
-  width: 100%;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint);
+    $infix: breakpoint-infix($next);
+
+    &#{$infix} {
+      @include media-breakpoint-down($breakpoint) {
+        display: block;
+        overflow-x: auto;
+        width: 100%;
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+      }
+    }
+  }
 }

data/{app/assets → assets}/stylesheets/material/material/_dialog.scss

@@ -7,19 +7,8 @@
   right: 0;
   bottom: 0;
   left: 0;
-  text-align: center;
-  white-space: nowrap;
   z-index: map-get($dialog-elevation-shadow, elevation);
 
-  &::before {
-    content: '';
-    display: inline-block;
-    height: 100%;
-    margin-right: -.25em;
-    vertical-align: middle;
-    width: 1px;
-  }
-
   &.fade {
     @include transition-standard-complex(opacity);
 
@@ -44,8 +33,6 @@
   }
 }
 
-
-
 // Backdrop
 
 .modal-backdrop {
@@ -58,22 +45,36 @@
   z-index: (map-get($dialog-elevation-shadow, elevation) - 1);
 }
 
+// Dialog
 
+.modal-content {
+  @include border-radius($dialog-border-radius);
 
-// Dialog
+  background-clip: padding-box;
+  background-color: $dialog-content-bg;
+  box-shadow: map-get($dialog-elevation-shadow, shadow);
+  display: flex;
+  flex-direction: column;
+  outline: 0;
+  pointer-events: auto;
+  position: relative;
+  vertical-align: baseline;
+}
 
 .modal-dialog {
-  @include text-align(left);
-
-  display: inline-block;
-  margin: $dialog-margin-y $dialog-margin-x;
+  margin: $dialog-margin-y auto;
   max-width: $dialog-width;
+  pointer-events: none;
   position: relative;
-  vertical-align: middle;
-  white-space: normal;
   width: calc(100% - #{$dialog-margin-x} * 2);
 }
 
+.modal-dialog-centered {
+  align-items: center;
+  display: flex;
+  min-height: calc(100% - #{$dialog-margin-y} * 2);
+}
+
 .modal-lg {
   max-width: $dialog-width-lg;
 }
@@ -82,8 +83,6 @@
   max-width: $dialog-width-sm;
 }
 
-
-
 // Misc
 
 .modal-body {
@@ -91,6 +90,14 @@
   padding: $dialog-padding-y $dialog-padding-x;
   position: relative;
 
+  &:first-child {
+    @include border-top-radius($dialog-border-radius);
+  }
+
+  &:last-child {
+    @include border-bottom-radius($dialog-border-radius);
+  }
+
   .modal-header + & {
     padding-top: 0;
   }
@@ -100,36 +107,42 @@
   }
 }
 
-.modal-content {
-  @include border-radius($border-radius);
-
-  background-clip: padding-box;
-  background-color: $dialog-content-bg;
-  box-shadow: map-get($dialog-elevation-shadow, shadow);
-  display: flex;
-  flex-direction: column;
-  outline: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
 .modal-footer {
-  align-items: center;
+  align-items: flex-end;
   display: flex;
   justify-content: flex-end;
-  padding: $dialog-footer-padding-y ($dialog-footer-padding-x - $dialog-footer-inner-spacer-x / 2) $dialog-footer-padding-y ($dialog-padding-x - $dialog-footer-inner-spacer-x / 2);
+  padding: $dialog-footer-padding-y $dialog-footer-padding-x $dialog-footer-padding-y ($dialog-footer-padding-x - $dialog-footer-inner-spacer-x);
 
-  > * {
-    margin-right: ($dialog-footer-inner-spacer-x / 2);
-    margin-left: ($dialog-footer-inner-spacer-x / 2);
+  &:first-child {
+    @include border-top-radius($dialog-border-radius);
+  }
+
+  &:last-child {
+    @include border-bottom-radius($dialog-border-radius);
   }
 
   .btn {
     background-color: transparent;
     box-shadow: none;
+    max-width: calc(50% - #{$dialog-footer-inner-spacer-x});
     min-width: $dialog-footer-btn-min-width;
+    overflow: hidden;
     padding-right: $dialog-footer-inner-spacer-x;
     padding-left: $dialog-footer-inner-spacer-x;
+    text-overflow: ellipsis;
+
+    @each $color, $values in $theme-colors {
+      &-#{$color} {
+        @include plain-active-focus-hover {
+          color: map-get(theme-color($color), color);
+        }
+
+        &:disabled,
+        &.disabled {
+          color: $btn-color-disabled;
+        }
+      }
+    }
 
     &:active,
     &.active {
@@ -143,18 +156,25 @@
     }
   }
 
-  // Colour
-  @each $color, $values in $theme-colors {
-    .btn-#{$color} {
-      @include plain-active-focus-hover {
-        color: map-get(theme-color($color), color);
-      }
+  > * {
+    margin-left: $dialog-footer-inner-spacer-x;
+  }
+}
 
-      &:disabled,
-      &.disabled {
-        color: $btn-color-disabled;
-      }
-    }
+.modal-footer-stacked {
+  align-items: stretch;
+  flex-direction: column;
+  padding-top: 0;
+  padding-right: 0;
+  padding-left: 0;
+
+  .btn {
+    @include text-align(right);
+
+    border-radius: 0;
+    margin-left: 0;
+    max-width: none;
+    padding: $dialog-footer-btn-stacked-padding-y $dialog-footer-btn-stacked-padding-x;
   }
 }
 
@@ -163,6 +183,14 @@
   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 {
@@ -171,8 +199,6 @@
   margin: 0;
 }
 
-
-
 // Scrollbar measure
 
 .modal-scrollbar-measure {

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

@@ -0,0 +1,247 @@
+// Todo: expansion panel with different background colours
+
+.list-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.list-group-item {
+  @include transition-standard(background-color, color);
+
+  background-color: $expansion-panel-bg;
+  border: 0;
+  box-shadow: map-get($expansion-panel-elevation-shadow, shadow);
+  color: $expansion-panel-color;
+  display: block;
+  font-size: $expansion-panel-font-size;
+  line-height: $expansion-panel-line-height;
+  min-height: $expansion-panel-height;
+  padding: $expansion-panel-padding-y $expansion-panel-padding-x;
+  position: relative;
+
+  @include active-focus-hover {
+    color: $expansion-panel-color;
+    text-decoration: none;
+  }
+
+  &.active {
+    background-color: $expansion-panel-bg-active;
+    color: $expansion-panel-color;
+  }
+
+  &.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);
+  }
+
+  .card & {
+    padding-right: $card-padding-x;
+    padding-left: $card-padding-x;
+  }
+}
+
+.list-group-item-action {
+  color: $expansion-panel-color;
+  text-align: inherit;
+  width: 100%;
+
+  @include active-focus-hover {
+    background-color: $expansion-panel-bg-active;
+    color: $expansion-panel-color;
+    text-decoration: none;
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: $expansion-panel-bg;
+    color: $expansion-panel-color-disabled;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+@each $color, $values in $theme-colors {
+  .list-group-item-#{$color} {
+    background-color: map-get(theme-color($color), lighter);
+    color: color-yiq(map-get(theme-color($color), lighter));
+
+    &.active {
+      background-color: map-get(theme-color($color), color);
+      color: color-yiq(map-get(theme-color($color), color));
+    }
+
+    &.list-group-item-action {
+      @include active-focus-hover {
+        background-color: map-get(theme-color($color), color);
+        color: color-yiq(map-get(theme-color($color), color));
+      }
+    }
+  }
+}
+
+// Expansion panel
+
+.expansion-panel {
+  @include transition-standard(background-color, color, margin);
+
+  padding: 0;
+
+  &.show {
+    border-radius: $expansion-panel-border-radius;
+
+    &:not(:first-child) {
+      margin-top: $expansion-panel-margin-y;
+
+      .card & {
+        margin-top: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      margin-bottom: $expansion-panel-margin-y;
+
+      .card & {
+        margin-bottom: 0;
+      }
+    }
+
+    + .expansion-panel {
+      @include border-top-radius($expansion-panel-border-radius);
+
+      .card & {
+        @include border-top-radius(0);
+      }
+    }
+  }
+
+  &.show-predecessor {
+    @include border-bottom-radius($expansion-panel-border-radius);
+
+    .card & {
+      @include border-bottom-radius(0);
+    }
+  }
+
+  .card & {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+.expansion-panel-body {
+  padding: $expansion-panel-inner-spacer-y $expansion-panel-padding-x;
+
+  .card & {
+    padding-right: $card-padding-x;
+    padding-left: $card-padding-x;
+  }
+}
+
+.expansion-panel-footer {
+  align-items: flex-end;
+  border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
+  display: flex;
+  justify-content: flex-end;
+  padding: $expansion-panel-inner-spacer-y $expansion-panel-footer-padding-x ($expansion-panel-inner-spacer-y - $expansion-panel-footer-inner-spacer-y) ($expansion-panel-footer-padding-x - $expansion-panel-footer-inner-spacer-x);
+
+  .card & {
+    padding-right: $card-padding-x;
+    padding-left: ($card-padding-x - $expansion-panel-footer-inner-spacer-x);
+  }
+
+  .btn {
+    margin-bottom: $expansion-panel-footer-inner-spacer-y;
+    margin-left: $expansion-panel-footer-inner-spacer-x;
+    min-width: $expansion-panel-footer-btn-min-width;
+    padding-right: $expansion-panel-footer-inner-spacer-x;
+    padding-left: $expansion-panel-footer-inner-spacer-x;
+
+    .card & {
+      padding-right: ($card-padding-x - $expansion-panel-footer-padding-x);
+      padding-left: ($card-padding-x - $expansion-panel-footer-padding-x);
+    }
+  }
+}
+
+.expansion-panel-icon {
+  flex-shrink: 0;
+  margin-left: $expansion-panel-inner-spacer-x;
+
+  .collapsed-hide {
+    [data-toggle='collapse'].collapsed & {
+      display: none;
+    }
+  }
+
+  .collapsed-show {
+    [data-toggle='collapse']:not(.collapsed) & {
+      display: none;
+    }
+  }
+}
+
+.expansion-panel-toggler {
+  align-items: center;
+  color: inherit;
+  display: flex;
+  justify-content: space-between;
+  padding: $expansion-panel-padding-y $expansion-panel-padding-x;
+  text-align: inherit;
+  width: 100%;
+
+  @include active-focus-hover {
+    background-color: $expansion-panel-bg-active;
+    color: $expansion-panel-color;
+    text-decoration: none;
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: $expansion-panel-bg;
+    color: $expansion-panel-color-disabled;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  .card & {
+    padding-right: $card-padding-x;
+    padding-left: $card-padding-x;
+  }
+}
+
+// Flush
+
+.list-group-flush {
+  &:first-child .list-group-item:first-child {
+    border-top: 0;
+  }
+
+  &:last-child .list-group-item:last-child {
+    border-bottom: 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;
+    }
+  }
+}