material-sass 1.4.1 → 4.0.0.alpha5

data/app/assets/stylesheets/material/material/_button-flat.scss

@@ -0,0 +1,53 @@
+[class*="btn-flat"],
+[class*="btn-outline"] {
+  background-color: transparent;
+  box-shadow: none;
+
+  // active, focus, hover
+    &:active,
+    &.active {
+      background-color: $btn-bg-active;
+      box-shadow: none;
+    }
+
+  // disabled
+    &:disabled,
+    &.disabled {
+      background-color: transparent;
+    }
+}
+
+// colour
+  .btn-flat-inverse,
+  .btn-outline-inverse {
+    @include plain-active-focus-hover {
+      color: $btn-color-inverse;
+    }
+
+    &::before {
+      background-color: $btn-flat-focus-overlay-inverse;
+    }
+
+    // active, focus, hover
+      &:active,
+      &.active {
+        background-color: $btn-bg-inverse-active;
+      }
+
+    // disabled
+      &:disabled,
+      &.disabled {
+        color: $btn-color-inverse-disabled;
+      }
+  }
+
+  @each $color in $palettes {
+    $i: index($palettes, $color);
+
+    .btn-flat-#{$color},
+    .btn-outline-#{$color} {
+      @include plain-active-focus-hover {
+        color: nth($palettes-color, $i);
+      }
+    }
+  }

data/app/assets/stylesheets/material/material/_button-float.scss

@@ -0,0 +1,29 @@
+.btn-float {
+  border-radius: 50%;
+  box-shadow: map-get($btn-float-elevation-shadow, shadow);
+  height: $btn-float-size;
+  line-height: $btn-float-size;
+  padding: 0;
+  position: relative;
+  min-width: 0;
+  width: $btn-float-size;
+  z-index: map-get($btn-float-elevation-shadow, elevation);
+
+  &::before {
+    border-radius: 50%;
+  }
+
+  // active, focus, hover
+    &:active,
+    &.active {
+      box-shadow: map-get($btn-float-elevation-shadow-active, shadow);
+      z-index: map-get($btn-float-elevation-shadow-active, elevation);
+    }
+}
+
+// size
+  .btn-float.btn-sm {
+    height: $btn-float-size-sm;
+    line-height: $btn-float-size-sm;
+    width: $btn-float-size-sm;
+  }

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

@@ -0,0 +1,241 @@
+.btn {
+  background-color: $btn-bg;
+  background-image: none;
+  border: 0;
+  box-shadow: map-get($btn-elevation-shadow, shadow);
+  color: $btn-color;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $btn-font-size;
+  font-weight: $btn-font-weight;
+  line-height: 1;
+  margin: 0;
+  max-width: 100%;
+  min-width: $btn-min-width;
+  padding: $btn-padding-y $btn-padding-x;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  z-index: map-get($btn-elevation-shadow, elevation);
+  @include border-radius($border-radius);
+  @include transition-standard(background-color, box-shadow, color);
+
+  &::before {
+    background-color: $btn-focus-overlay;
+    content: "";
+    display: block;
+    opacity: 0;
+    position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    z-index: -1;
+    @include border-radius($border-radius);
+    @include transition-standard(opacity);
+  }
+
+  // active, focus, hover
+    @include active-focus-hover {
+      color: $btn-color;
+
+      @if ($link-decoration-active != "none") {
+        text-decoration: none;
+      }
+    }
+
+    @include focus-hover {
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    &:active,
+    &.active {
+      background-color: $btn-bg-active;
+      box-shadow: map-get($btn-elevation-shadow-active, shadow);
+      z-index: map-get($btn-elevation-shadow-active, elevation);
+
+      &::before {
+        opacity: 0;
+      }
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+  // disabled
+    &:disabled,
+    &.disabled {
+      background-color: $btn-bg-disabled;
+      box-shadow: none;
+      color: $btn-color-disabled;
+      cursor: $cursor-disabled;
+      opacity: 1;
+      pointer-events: none;
+
+      &::before,
+      .waves-ripple {
+        display: none;
+      }
+    }
+
+  // open
+    .open > &,
+    .open > & {
+      &.dropdown-toggle::before {
+        opacity: 1;
+      }
+    }
+
+    .dropdown.open > & {
+      &.dropdown-toggle,
+      &.dropdown-toggle::before {
+        @include border-bottom-radius(0);
+      }
+    }
+
+    .dropup.open > & {
+      &.dropdown-toggle,
+      &.dropdown-toggle::before {
+        @include border-top-radius(0);
+      }
+    }
+}
+
+// colour
+  .btn-inverse {
+    color: $btn-color-inverse;
+
+    // active, focus, hover
+      @include active-focus-hover {
+        color: $btn-color-inverse;
+      }
+
+      &:active,
+      &.active {
+        background-color: $btn-bg-inverse-active;
+      }
+
+    // disabled
+      &:disabled,
+      &.disabled {
+        background-color: $btn-bg-inverse-disabled;
+        color: $btn-color-inverse-disabled;
+      }
+  }
+
+  @each $color in $palettes {
+    $i: index($palettes, $color);
+
+    .btn-#{$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,
+        &.active {
+          background-color: nth($palettes-color-dark, $i);
+        }
+
+      // disabled
+        &:disabled,
+        &.disabled {
+          background-color: $btn-bg-disabled;
+          color: $btn-color-disabled;
+        }
+    }
+  }
+
+// size
+  .btn-lg {
+    font-size: $btn-font-size-lg;
+    padding: $btn-padding-y-lg $btn-padding-x-lg;
+  }
+
+  .btn-sm {
+    font-size: $btn-font-size-sm;
+    padding: $btn-padding-y-sm $btn-padding-x-sm;
+  }
+
+//
+// block button
+//
+  .btn-block {
+    display: block;
+    width: 100%;
+
+    + .btn-block {
+      margin-top: $btn-block-spacer;
+    }
+  }
+
+  input[type="button"],
+  input[type="reset"],
+  input[type="submit"] {
+    &.btn-block {
+      width: 100%;
+    }
+  }
+
+//
+// link button
+//
+  .btn-link {
+    background-color: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    color: $link-color;
+    font-weight: normal;
+    text-decoration: $link-decoration;
+    text-transform: none;
+    z-index: initial;
+
+    &::before {
+      display: none;
+    }
+
+    // active, focus, hover
+      @include active-focus-hover {
+        color: $link-color-active;
+        text-decoration: $link-decoration-active;
+      }
+
+      &:active,
+      &.active {
+        background-color: transparent;
+        box-shadow: none;
+        z-index: initial;
+      }
+
+      &:focus {
+        @include tab-focus;
+      }
+
+    // disabled
+      &:disabled,
+      &.disabled {
+        background-color: transparent;
+        color: $btn-color-disabled;
+        outline: 0;
+
+        @if ($link-decoration-active != "none") {
+          text-decoration: none;
+        }
+      }
+  }
+
+//
+// no minimum width
+//
+  .btn-fluid {
+    min-width: 0;
+  }

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

@@ -0,0 +1,286 @@
+.card {
+  background-color: $card-bg;
+  border: 0;
+  box-shadow: map-get($card-elevation-shadow, shadow);
+  display: block;
+  margin-bottom: $card-margin-bottom;
+  position: relative;
+  @include border-radius($border-radius);
+  z-index: map-get($card-elevation-shadow, elevation);
+}
+
+.card[href]:not([tabindex]) {
+  // active, focus, hover
+    @include active-focus-hover {
+      @if ($link-decoration-active != "none") {
+        text-decoration: none;
+      }
+    }
+
+    &:active,
+    &.active {
+      box-shadow: map-get($card-elevation-shadow-active, shadow);
+      z-index: map-get($card-elevation-shadow-active, elevation);
+    }
+
+    &:focus {
+      box-shadow: map-get($card-elevation-shadow-active, shadow);
+      outline: 0;
+    }
+}
+
+// colour
+  .card-inverse {
+    background-color: $card-bg-inverse;
+    color: $card-color-inverse;
+  }
+
+  @each $color in $palettes {
+    $i: index($palettes, $color);
+
+    .card-#{$color} {
+      background-color: nth($palettes-color, $i);
+      color: nth($palettes-text-color, $i);
+    }
+  }
+
+//
+// action
+//
+  .card-actions {
+    padding: $card-action-spacer-y $card-action-spacer-x;
+    @include clearfix;
+
+    &:first-child {
+      @include border-top-radius($border-radius);
+    }
+
+    &:last-child {
+      @include border-bottom-radius($border-radius);
+    }
+
+    .btn {
+      min-width: 0;
+      padding-right: $card-action-spacer-x;
+      padding-left: $card-action-spacer-x;
+
+      + .btn {
+        margin-left: $card-action-spacer-x;
+      }
+    }
+  }
+
+  .card-actions-bordered {
+    border-top: $card-border-width solid $card-border-color;
+    border-bottom: $card-border-width solid $card-border-color;
+
+    &:first-child {
+      border-top: 0;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  .card-actions-vertical {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+
+    .btn + .btn,
+    .card-link + .card-link {
+      margin-top: $card-action-spacer-y;
+      margin-left: 0;
+    }
+  }
+
+  .card-link + .card-link {
+    margin-left: $card-action-spacer-x;
+  }
+
+//
+// block
+//
+  .card-block {
+    padding: $card-spacer-inner-y $card-spacer-inner-x;
+    @include clearfix;
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+//
+// footer
+//
+  .card-footer {
+    border-top: $card-border-width solid $card-border-color;
+    padding: $card-spacer-inner-y $card-spacer-inner-x;
+
+    &:last-child {
+      @include border-bottom-radius($border-radius);
+    }
+  }
+
+//
+// header
+//
+  .card-header {
+    border-bottom: $card-border-width solid $card-border-color;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding: $card-spacer-inner-y $card-spacer-inner-x;
+    @include clearfix;
+
+    &:first-child {
+      @include border-top-radius($border-radius);
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+//
+// image
+//
+  .card-img {
+    @include border-radius($border-radius);
+  }
+
+  .card-img-bottom {
+    @include border-bottom-radius($border-radius);
+  }
+
+  .card-img-top {
+    @include border-top-radius($border-radius);
+  }
+
+//
+// image overlay
+//
+  .card-img-overlay {
+    padding: $card-spacer-inner-y $card-spacer-inner-x;
+    position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+  }
+
+  .card-img-overlay-body {
+    display: block;
+  }
+
+  .card-img-overlay-bottom {
+    @if $enable-flex {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+    } @else {
+      white-space: nowrap;
+
+      &::after {
+        content: "";
+        display: inline-block;
+        height: 100%;
+        width: 1px;
+      }
+
+      .card-img-overlay-body {
+        display: inline-block;
+        white-space: normal;
+        width: 100%;
+      }
+    }
+  }
+
+//
+// set
+//
+  .card-columns {
+    margin-bottom: $card-margin-bottom;
+
+    .card {
+      margin-bottom: $card-spacer-outer-y;
+    }
+
+    @include media-breakpoint-up(sm) {
+      column-count: 2;
+      column-gap: 0;
+      margin-right: ($card-spacer-outer-x / -2);
+      margin-bottom: ($card-margin-bottom - $card-spacer-outer-y);
+      margin-left: ($card-spacer-outer-x / -2);
+
+      .card {
+        display: inline-block;
+        margin-right: ($card-spacer-outer-x / 2);
+        margin-left: ($card-spacer-outer-x / 2);
+        width: calc(100% - #{$card-spacer-outer-x});
+      }
+    }
+
+    @include media-breakpoint-up(md) {
+      column-count: 3;
+    }
+  }
+
+  .card-deck,
+  .card-group {
+    margin-bottom: $card-margin-bottom;
+
+    .card {
+      margin-bottom: $card-spacer-outer-y;
+    }
+  }
+
+  @if $enable-flex {
+    @include media-breakpoint-up(sm) {
+    }
+  } @else {
+    @include media-breakpoint-up(sm) {
+      .card-deck,
+      .card-group {
+        border-spacing: $card-spacer-outer-x 0;
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+
+        .card {
+          display: table-cell;
+          margin-bottom: 0;
+          vertical-align: top;
+        }
+      }
+
+      .card-deck-wrapper,
+      .card-group-wrapper {
+        margin-right: ($card-spacer-outer-x * -1);
+        margin-left: ($card-spacer-outer-x * -1);
+      }
+    }
+  }
+
+//
+// text and title
+//
+  .card-subtitle {
+    margin-top: ($card-spacer-inner-y / -2);
+    margin-bottom: 0;
+    @include typography-body-1;
+  }
+
+  .card-text:last-child {
+    margin-bottom: 0;
+  }
+
+  .card-title {
+    margin-top: $card-title-additonal-margin;
+    margin-bottom: $card-spacer-inner-y;
+    @include typography-headline;
+
+    &:only-child {
+      margin-top: 0;
+    }
+  }