material-sass 1.4.1 → 4.0.0.alpha5

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

@@ -0,0 +1,93 @@
+.chip,
+.tag {
+  background-color: $chip-bg;
+  border-radius: ($chip-height / 2);
+  color: $chip-color;
+  display: inline-block;
+  font-size: $chip-font-size;
+  font-weight: $chip-font-weight;
+  line-height: 1;
+  padding: $chip-padding-y $chip-padding-x;
+  position: relative;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &:empty {
+    display: none;
+  }
+}
+
+a.chip,
+a.tag {
+  color: $chip-color;
+  z-index: 1;
+  @include transition-standard(box-shadow);
+
+  &::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);
+  }
+
+  // active, focus, hover
+    @include active-focus-hover {
+      color: $chip-color;
+
+      @if ($link-decoration-active != "none") {
+        text-decoration: none;
+      }
+
+      &::before {
+        opacity: 1; 
+      }
+    }
+
+    &:active {
+      box-shadow: map-get($chip-elevation-shadow-active, shadow);
+      z-index: map-get($chip-elevation-shadow-active, elevation);
+    }
+
+    &:focus {
+      outline: 0;
+    }
+}
+
+// colour
+  .chip-inverse,
+  .tag-inverse {
+    background-color: $chip-bg-inverse;
+    color: $chip-color-inverse;
+  }
+
+  a.chip-inverse,
+  a.tag-inverse {
+    @include plain-active-focus-hover {
+      color: $chip-color-inverse;
+    }
+  }
+
+  @each $color in $palettes {
+    $i: index($palettes, $color);
+
+    .chip-#{$color},
+    .tag-#{$color} {
+      background-color: nth($palettes-color, $i);
+      color: nth($palettes-text-color, $i);
+    }
+
+    a.chip-#{$color},
+    a.tag-#{$color} {
+      @include plain-active-focus-hover {
+        color: nth($palettes-text-color, $i);
+      }
+    }
+  }

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

@@ -0,0 +1,138 @@
+//
+// todo: `.table-inverse`, `.table-reflow` and `.table-sm`
+//
+
+.table {
+  background-color: $table-bg;
+  border: 0;
+  border-collapse: separate;
+  margin-bottom: $table-margin-bottom;
+  max-width: 100%;
+  width: 100%;
+
+  td,
+  th {
+    border-top: $table-border-width solid $table-border-color;
+    padding-right: $table-cell-padding-x;
+    padding-left: $table-cell-padding-x;
+    vertical-align: top;
+
+    &:first-child {
+      padding-left: $table-cell-padding-x-alt;
+    }
+
+    &:last-child {
+      padding-right: $table-cell-padding-x-alt;
+    }
+  }
+
+  tbody {
+    td,
+    th {
+      color: $table-tbody-color;
+      font-size: $table-tbody-font-size;
+      font-weight: $table-tbody-font-weight;
+      height: $table-tbody-cell-height;
+      padding-top: $table-tbody-padding-y;
+      padding-bottom: $table-tbody-padding-y;
+    }
+  }
+
+  tfoot {
+    td,
+    th {
+      color: $table-tfoot-color;
+      font-size: $table-tfoot-font-size;
+      font-weight: $table-tfoot-font-weight;
+      height: $table-tfoot-cell-height;
+      padding-top: $table-tfoot-padding-y;
+      padding-bottom: $table-tfoot-padding-y;
+    }
+  }
+
+  thead {
+    td,
+    th {
+      color: $table-thead-color;
+      font-size: $table-thead-font-size;
+      font-weight: $table-thead-font-weight;
+      height: $table-thead-cell-height;
+      padding-top: $table-thead-padding-y;
+      padding-bottom: $table-thead-padding-y;
+    }
+  }
+
+  > 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;
+  }
+}
+
+//
+// additional versions
+//
+  .table-bordered {
+    box-shadow: map-get($table-elevation-shadow, shadow);
+  }
+
+  .table-striped {
+    tbody tr:nth-of-type(odd) {
+      background-color: $table-bg-accent;
+    }
+  }
+
+//
+// hover
+//
+  .table-hover {
+    tbody tr {
+      @include hover {
+        background-color: $table-bg-hover;
+      }
+    }
+  }
+
+//
+// table background
+//
+  @each $color in $palettes {
+    $i: index($palettes, $color);
+
+    .table .table-#{$color} {
+      &,
+      > td,
+      > th {
+        background-color: nth($palettes-color, $i);
+        color: nth($palettes-text-color, $i);
+      }
+    }
+
+    .table-hover .table-#{$color} {
+      @include hover {
+        &,
+        > td,
+        > th {
+          background-color: nth($palettes-color-dark, $i);
+          color: nth($palettes-text-color-dark, $i);
+        }
+      }
+    }
+  }
+
+//
+// table responsive
+//
+  .table-responsive {
+    display: block;
+    min-height: 0.01%;
+    overflow-x: auto;
+    width: 100%;
+  }

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

@@ -0,0 +1,147 @@
+.dialog,
+.modal {
+  display: none;
+  overflow: hidden;
+  outline: 0;
+  position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  text-align: center;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  z-index: map-get($dialog-elevation-shadow, elevation);
+
+  &::before {
+    content: "";
+    display: inline-block;
+    height: 100%;
+    margin-right: -0.25em;
+    vertical-align: middle;
+    width: 1px;
+  }
+}
+
+.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: scale(1);
+    }
+  }
+
+//
+// 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);
+  }
+
+  // size
+    .dialog-lg,
+    .modal-lg {
+      max-width: $dialog-width-lg;
+    }
+
+    .dialog-sm,
+    .modal-sm {
+      max-width: $dialog-width-sm;
+    }
+
+//
+// misc
+//
+  .dialog-body,
+  .modal-body {
+    padding: $dialog-inner-padding;
+    position: relative;
+  }
+
+  .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);
+    outline: 0;
+    position: relative;
+    vertical-align: baseline;
+    @include border-radius($border-radius);
+  }
+
+  .dialog-footer,
+  .modal-footer {
+    padding: $dialog-footer-spacer-y $dialog-footer-spacer-x;
+    padding-left: $dialog-inner-padding;
+    text-align: right;
+    @include clearfix;
+
+    .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;
+    }
+  }
+
+  .dialog-header,
+  .modal-header {
+    padding: $dialog-inner-padding;
+
+    + .dialog-body,
+    + .modal-body {
+      padding-top: 0;
+    }
+  }
+
+  .dialog-text,
+  .modal-text {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .dialog-title,
+  .modal-title {
+    margin: 0;
+    @include typography-title;
+  }
+
+//
+// scrollbar measure
+//
+  .modal-scrollbar-measure {
+    height: 50px;
+    overflow: scroll;
+    position: absolute;
+      top: -99999px;
+    width: 50px;
+  }

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

@@ -0,0 +1,292 @@
+.expansion-panel,
+.list-group {
+  margin-bottom: $expansion-panel-margin-bottom;
+  padding-left: 0;
+}
+
+//
+// item
+//
+  .expansion-panel-item,
+  .list-group-item {
+    background-color: $expansion-panel-bg;
+    border: 0;
+    border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
+    box-shadow: map-get($expansion-panel-elevation-shadow, shadow);
+    color: $expansion-panel-color;
+    display: block;
+    font-size: $expansion-panel-font-size;
+    min-height: $expansion-panel-height;
+    padding: $expansion-panel-spacer-y $expansion-panel-spacer-x;
+    position: relative;
+    @include transition-standard(background-color, color);
+
+    &:first-of-type {
+      border-top-color: transparent;
+      @include border-top-radius($border-radius);
+    }
+
+    &:last-of-type {
+      @include border-bottom-radius($border-radius);
+    }
+
+    // active, focus, hover
+      &.active {
+        background-color: $expansion-panel-bg-active;
+      }
+
+    // disabled
+      &.disabled {
+        background-color: $expansion-panel-bg-disabled;
+        color: $expansion-panel-color-disabled;
+      }
+  }
+
+  .expansion-panel-item-action,
+  .list-group-item-action {
+    color: $expansion-panel-color;
+    text-align: inherit;
+    width: 100%;
+
+    // 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;
+      }
+
+    // disabled
+      &.disabled {
+        background-color: $expansion-panel-bg-disabled;
+        color: $expansion-panel-color-disabled;
+        cursor: $cursor-disabled;
+      }
+  }
+
+  // colour
+    @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
+          &.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 {
+              background-color: nth($palettes-color-dark, $i);
+              color: nth($palettes-text-color-dark, $i);
+            }
+        }
+      }
+    }
+
+//
+// expansion
+//
+  .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;
+      }
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      // 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;
+      }
+    }
+
+    &[data-toggle="collapse"].disabled {
+      background-color: $expansion-panel-bg-disabled;
+      color: $expansion-panel-color-disabled;
+      cursor: $cursor-disabled;
+    }
+  }
+
+  // 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);
+            }
+        }
+      }
+    }
+
+//
+// misc
+//
+  .expansion-panel-item-heading,
+  .list-group-item-heading {
+    color: inherit;
+    font-size: $expansion-panel-font-size;
+    line-height: $line-height-base;
+    margin-top: 0;
+    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-bottom: 0;
+  }