material-sass 4.0.0.alpha6 → 4.0.0.beta

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

@@ -1,93 +1,94 @@
-.badge,
 .chip {
+  align-items: center;
   background-color: $chip-bg;
+  border: 0;
   border-radius: ($chip-height / 2);
   color: $chip-color;
-  display: inline-block;
+  display: inline-flex;
   font-size: $chip-font-size;
   font-weight: $chip-font-weight;
-  line-height: 1;
-  padding: $chip-padding-y $chip-padding-x;
+  height: $chip-height;
+  justify-content: center;
+  line-height: $chip-line-height;
+  padding-right: $chip-padding-x;
+  padding-left: $chip-padding-x;
   position: relative;
+  text-align: center;
   vertical-align: middle;
   white-space: nowrap;
 
   &:empty {
     display: none;
   }
+
+  .close {
+    font-size: inherit;
+    line-height: inherit;
+    margin-right: ($chip-inner-spacer-x - $chip-padding-x);
+    margin-left: $chip-inner-spacer-x;
+    min-width: $material-icon-size;
+    order: 1;
+  }
 }
 
-a.badge,
-a.chip {
-  color: $chip-color;
-  z-index: 1;
-  @include transition-standard(box-shadow);
+// Colour
+@each $color, $values in $theme-colors {
+  .chip-#{$color} {
+    @include color-yiq(map-get(theme-color($color), color));
 
-  &::before {
-    background-color: $chip-active-overlay;
-    border-radius: ($chip-height / 2);
-    content: "";
-    display: block;
-    opacity: 0;
-    position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    z-index: -1;
-    @include transition-standard(opacity);
+    background-color: map-get(theme-color($color), color);
   }
+}
 
-  // active, focus, hover
-    @include active-focus-hover {
-      color: $chip-color;
 
-      @if ($link-decoration-active != "none") {
-        text-decoration: none;
-      }
 
-      &::before {
-        opacity: 1; 
-      }
-    }
+// Misc
 
-    &:active {
-      box-shadow: map-get($chip-elevation-shadow-active, shadow);
-      z-index: map-get($chip-elevation-shadow-active, elevation);
-    }
+.chip-action {
+  @include transition-standard(background-color, box-shadow);
 
-    &:focus {
-      outline: 0;
-    }
-}
+  @include active-focus-hover {
+    box-shadow: map-get($chip-elevation-shadow-hover, shadow);
+    color: $chip-color;
+    text-decoration: none;
+  }
 
-// colour
-  .badge-inverse,
-  .chip-inverse {
-    background-color: $chip-bg-inverse;
-    color: $chip-color-inverse;
+  &:active {
+    background-color: $chip-bg-active;
   }
 
-  a.badge-inverse,
-  a.chip-inverse {
-    @include plain-active-focus-hover {
-      color: $chip-color-inverse;
-    }
+  &:focus {
+    outline: 0;
   }
+}
 
-  @each $color in $palettes {
-    $i: index($palettes, $color);
+.chip-icon {
+  @include color-yiq($chip-icon-bg);
+  @include text-truncate;
 
-    .badge-#{$color},
-    .chip-#{$color} {
-      background-color: nth($palettes-color, $i);
-      color: nth($palettes-text-color, $i);
-    }
+  align-items: center;
+  background-color: $chip-icon-bg;
+  border-radius: ($chip-height / 2);
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: $chip-icon-font-size;
+  font-style: normal;
+  font-weight: normal;
+  height: $chip-height;
+  justify-content: center;
+  margin-right: ($chip-inner-spacer-x * 2);
+  margin-left: ($chip-padding-x * -1);
+  order: -1;
+  text-align: center;
+  width: $chip-height;
+}
 
-    a.badge-#{$color},
-    a.chip-#{$color} {
-      @include plain-active-focus-hover {
-        color: nth($palettes-text-color, $i);
-      }
-    }
-  }
+.chip-img {
+  border-radius: ($chip-height / 2);
+  flex-shrink: 0;
+  height: $chip-height;
+  margin-right: ($chip-inner-spacer-x * 2);
+  margin-left: ($chip-padding-x * -1);
+  order: -1;
+  width: auto;
+}

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

@@ -1,16 +1,14 @@
-//
-// todo: `.table-inverse`, `.table-reflow` and `.table-sm`
-//
-
 .table {
+  background-color: $table-bg;
   border: 0;
-  margin-bottom: $table-margin-bottom;
+  margin-bottom: $table-margin-y;
   max-width: 100%;
   width: 100%;
 
   td,
   th {
     border-top: $table-border-width solid $table-border-color;
+    line-height: $table-line-height;
     padding-right: $table-cell-padding-x;
     padding-left: $table-cell-padding-x;
     vertical-align: top;
@@ -74,63 +72,155 @@
   }
 }
 
-//
-// additional versions
-//
-  .table-bordered {
-    box-shadow: map-get($table-elevation-shadow, shadow);
+.table-bordered {
+  box-shadow: map-get($table-elevation-shadow, shadow);
+}
+
+.table-striped {
+  tbody tr:nth-of-type(odd) {
+    background-color: $table-bg-accent;
   }
+}
 
-  .table-striped {
-    tbody tr:nth-of-type(odd) {
-      background-color: $table-bg-accent;
+.table-hover {
+  tbody tr {
+    @include hover {
+      background-color: $table-bg-hover;
     }
   }
+}
 
-//
-// hover
-//
-  .table-hover {
-    tbody tr {
-      @include hover {
-        background-color: $table-bg-hover;
-      }
+// Size
+.table-sm {
+  td,
+  th {
+    padding-right: $table-sm-cell-padding-x;
+    padding-left: $table-sm-cell-padding-x;
+
+    &:first-child {
+      padding-left: $table-sm-cell-padding-x-alt;
+    }
+
+    &:last-child {
+      padding-right: $table-sm-cell-padding-x-alt;
+    }
+  }
+
+  tbody {
+    td,
+    th {
+      height: $table-sm-tbody-cell-height;
+      padding-top: $table-sm-tbody-padding-y;
+      padding-bottom: $table-sm-tbody-padding-y;
+    }
+  }
+
+  tfoot {
+    td,
+    th {
+      padding-top: $table-sm-tfoot-padding-y;
+      padding-bottom: $table-sm-tfoot-padding-y;
+    }
+  }
+
+  thead {
+    td,
+    th {
+      height: $table-sm-thead-cell-height;
+      padding-top: $table-sm-thead-padding-y;
+      padding-bottom: $table-sm-thead-padding-y;
     }
   }
+}
 
-//
-// table background
-//
-  @each $color in $palettes {
-    $i: index($palettes, $color);
 
-    .table .table-#{$color} {
+
+// Table background
+
+@each $color, $values in $theme-colors {
+  .table .table-#{$color} {
+    &,
+    > td,
+    > th {
+      @include color-yiq(map-get(theme-color($color), color));
+
+      background-color: map-get(theme-color($color), color);
+    }
+  }
+
+  .table-hover .table-#{$color} {
+    @include hover {
       &,
       > td,
       > th {
-        background-color: nth($palettes-color, $i);
-        color: nth($palettes-text-color, $i);
+        @include color-yiq(map-get(theme-color($color), darker));
+
+        background-color: map-get(theme-color($color), darker);
       }
     }
+  }
+}
+
+// scss-lint:disable MergeableSelector
+.table {
+// scss-lint:enable MergeableSelector
+  .thead-dark {
+    td,
+    th {
+      background-color: $table-dark-bg;
+      color: $table-dark-color;
+    }
+  }
+
+  .thead-light {
+    td,
+    th {
+      background-color: $table-thead-bg;
+      color: $table-thead-color;
+    }
+  }
+}
+
+.table-dark {
+  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;
+    }
+  }
 
-    .table-hover .table-#{$color} {
+  &.table-hover {
+    tbody tr {
       @include hover {
-        &,
-        > td,
-        > th {
-          background-color: nth($palettes-color-dark, $i);
-          color: nth($palettes-text-color-dark, $i);
-        }
+        background-color: $table-dark-bg-hover;
       }
     }
   }
+}
 
-//
-// table responsive
-//
-  .table-responsive {
-    display: block;
-    min-height: 0.01%;
-    overflow-x: auto;
-    width: 100%;
-  }
+
+
+// Table responsive
+
+.table-responsive {
+  display: block;
+  overflow-x: auto;
+  width: 100%;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}

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

@@ -1,153 +1,184 @@
-.dialog,
 .modal {
   display: none;
-  overflow: hidden;
   outline: 0;
+  overflow: hidden;
   position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   text-align: center;
   white-space: nowrap;
   z-index: map-get($dialog-elevation-shadow, elevation);
 
   &::before {
-    content: "";
+    content: '';
     display: inline-block;
     height: 100%;
-    margin-right: -0.25em;
+    margin-right: -.25em;
     vertical-align: middle;
     width: 1px;
   }
+
+  &.fade {
+    @include transition-standard-complex(opacity);
+
+    .modal-dialog {
+      @include transition-standard-complex(transform);
+
+      transform: scale($dialog-scale);
+    }
+  }
+
+  &.show .modal-dialog {
+    transform: scale(1);
+  }
 }
 
 .modal-open {
   overflow: hidden;
 
-  .dialog,
   .modal {
     overflow-x: hidden;
     overflow-y: auto;
   }
 }
 
-//
-// backdrop
-//
-  .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);
-
-    &.fade {
-      transform: none;
-    }
+
+
+// Backdrop
+
+.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);
+}
+
+
+
+// Dialog
+
+.modal-dialog {
+  @include text-align(left);
+
+  display: inline-block;
+  margin: $dialog-margin-y $dialog-margin-x;
+  max-width: $dialog-width;
+  position: relative;
+  vertical-align: middle;
+  white-space: normal;
+  width: calc(100% - #{$dialog-margin-x} * 2);
+}
+
+.modal-lg {
+  max-width: $dialog-width-lg;
+}
+
+.modal-sm {
+  max-width: $dialog-width-sm;
+}
+
+
+
+// Misc
+
+.modal-body {
+  flex: 1 1 auto;
+  padding: $dialog-padding-y $dialog-padding-x;
+  position: relative;
+
+  .modal-header + & {
+    padding-top: 0;
   }
 
-//
-// dialog
-//
-  .dialog-dialog,
-  .modal-dialog {
-    display: inline-block;
-    margin: $dialog-margin-y $dialog-margin-x;
-    max-width: $dialog-width;
-    position: relative;
-    text-align: left;
-    vertical-align: middle;
-    white-space: normal;
-    width: calc(100% - #{$dialog-margin-x} * 2);
+  > :last-child {
+    margin-bottom: 0;
   }
+}
 
-  // size
-    .dialog-lg,
-    .modal-lg {
-      max-width: $dialog-width-lg;
-    }
+.modal-content {
+  @include border-radius($border-radius);
 
-    .dialog-sm,
-    .modal-sm {
-      max-width: $dialog-width-sm;
-    }
+  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;
+}
 
-//
-// misc
-//
-  .dialog-body,
-  .modal-body {
-    flex: 1 1 auto;
-    padding: $dialog-inner-padding;
-    position: relative;
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
+.modal-footer {
+  align-items: center;
+  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);
 
-  .dialog-content,
-  .modal-content {
-    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;
-    @include border-radius($border-radius);
+  > * {
+    margin-right: ($dialog-footer-inner-spacer-x / 2);
+    margin-left: ($dialog-footer-inner-spacer-x / 2);
   }
 
-  .dialog-footer,
-  .modal-footer {
-    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 {
+    background-color: transparent;
+    box-shadow: none;
+    min-width: $dialog-footer-btn-min-width;
+    padding-right: $dialog-footer-inner-spacer-x;
+    padding-left: $dialog-footer-inner-spacer-x;
+
+    &:active,
+    &.active {
+      background-color: $btn-bg-active;
+      box-shadow: none;
     }
 
-    .btn {
-      min-width: $dialog-footer-btn-min-width;
-      padding-right: $dialog-footer-spacer-x;
-      padding-left: $dialog-footer-spacer-x;
+    &:disabled,
+    &.disabled {
+      background-color: transparent;
     }
   }
 
-  .dialog-header,
-  .modal-header {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    padding: $dialog-inner-padding;
-    padding-bottom: 0;
-
-    &:last-child {
-      padding-bottom: $dialog-inner-padding;
+  // Colour
+  @each $color, $values in $theme-colors {
+    .btn-#{$color} {
+      @include plain-active-focus-hover {
+        color: map-get(theme-color($color), color);
+      }
+
+      &:disabled,
+      &.disabled {
+        color: $btn-color-disabled;
+      }
     }
   }
+}
 
-  .dialog-title,
-  .modal-title {
-    margin: 0;
-    @include typography-title;
-  }
+.modal-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: $dialog-padding-y $dialog-padding-x;
+}
 
-//
-// scrollbar measure
-//
-  .modal-scrollbar-measure {
-    height: 50px;
-    overflow: scroll;
-    position: absolute;
-      top: -99999px;
-    width: 50px;
-  }
+.modal-title {
+  @include typography-title;
+
+  margin: 0;
+}
+
+
+
+// Scrollbar measure
+
+.modal-scrollbar-measure {
+  height: 50px;
+  overflow: scroll;
+  position: absolute;
+  top: -99999px;
+  width: 50px;
+}