material-sass 4.0.0.alpha5 → 4.0.0.alpha6

data/app/assets/stylesheets/material/bootstrap/_nav.scss

@@ -1,41 +1,40 @@
 .nav {
+  display: flex;
   list-style: none;
   margin-bottom: 0;
   padding-left: 0;
 }
 
 .nav-link {
-  display: inline-block;
-  position: relative;
+  display: block;
+  padding: $nav-link-padding;
 
   // active, focus, hover
     @include active-focus-hover {
-      @if ($link-decoration-active != "none") {
-        text-decoration: none;
-      }
+      text-decoration: none;
     }
 
   // disabled
     &.disabled {
+      color: $nav-link-color-disabled;
       cursor: $cursor-disabled;
-
-      @include plain-active-focus-hover {
-        color: $nav-link-color-disabled;
-      }
     }
 }
 
 //
-// inline
+// justified
 //
-  .nav-inline {
+  .nav-fill {
     .nav-item {
-      display: inline-block;
+      flex: 1 1 auto;
+      text-align: center;
     }
+  }
 
-    .nav-item + .nav-item,
-    .nav-link + .nav-link {
-      margin-left: $nav-inline-item-spacer;
+  .nav-justified {
+    .nav-item {
+      flex: 1 1 100%;
+      text-align: center;
     }
   }
 
@@ -43,20 +42,8 @@
 // pills
 //
   .nav-pills {
-    @include clearfix;
-
-    .nav-item {
-      float: left;
-
-      + .nav-item {
-        margin-left: $nav-item-margin;
-      }
-    }
-
     .nav-link {
       color: $nav-link-color;
-      display: block;
-      padding: $nav-link-padding;
       @include border-radius($border-radius);
       @include transition-standard(background-color, color);
 
@@ -65,33 +52,24 @@
           color: $nav-link-color-active;
         }
 
+        &.active {
+          background-color: $nav-link-bg-active;
+          color: $nav-link-color-active;
+          cursor: default;
+        }
+
       // disabled
         &.disabled {
           color: $nav-link-color-disabled;
         }
     }
 
-    .nav-link.active,
-    .nav-item.open .nav-link {
-      cursor: default;
-
-      @include plain-active-focus-hover {
+    // open
+      .nav-item.show .nav-link {
         background-color: $nav-link-bg-active;
         color: $nav-link-color-active;
+        cursor: default;
       }
-    }
-  }
-
-  .nav-stacked {
-    .nav-item {
-      display: block;
-      float: none;
-
-      + .nav-item {
-        margin-top: $nav-item-margin;
-        margin-left: 0;
-      }
-    }
   }
 
 //

data/app/assets/stylesheets/material/bootstrap/_pagination.scss

@@ -1,20 +1,14 @@
 .pagination {
   background-color: $pagination-bg;
-  display: inline-block;
+  display: flex;
+  list-style: none;
   padding: $pagination-padding-y $pagination-padding-x;
-  position: relative;
-  vertical-align: middle;
-}
-
-.page-item {
-  display: inline;
 }
 
 .page-link {
-  background-color: transparent;
   color: $btn-color;
+  cursor: pointer;
   display: block;
-  float: left;
   font-size: $btn-font-size;
   font-weight: $btn-font-weight;
   line-height: 1;
@@ -22,7 +16,6 @@
   padding: $btn-padding-y $btn-padding-x;
   position: relative;
   text-align: center;
-  vertical-align: middle;
   white-space: nowrap;
   @include border-radius($border-radius);
   @include transition-standard(background-color, color);
@@ -31,10 +24,7 @@
     @include active-focus-hover {
       background-color: $btn-bg-active;
       color: $btn-color;
-
-      @if ($link-decoration-active != "none") {
-        text-decoration: none;
-      }
+      text-decoration: none;
     }
 
     &:focus {

data/app/assets/stylesheets/material/bootstrap/_popover.scss

@@ -18,6 +18,12 @@
   @include border-radius($border-radius);
   @include reset-text;
 
+  &,
+  &.fade,
+  &.fade.show {
+    transition-property: opacity;
+  }
+
   &.bs-tether-element-attached-bottom,
   &.popover-top {
     margin-top: ($tooltip-margin * -1);
@@ -37,11 +43,6 @@
   &.popover-bottom {
     margin-top: $tooltip-margin;
   }
-
-  &.fade,
-  &.fade.in {
-    transition-property: opacity;
-  }
 }
 
 .popover-content {
@@ -53,6 +54,7 @@
   padding: $dialog-inner-padding;
   padding-bottom: 0;
   @include typography-title;
+
   &:empty {
     display: none;
   }

data/app/assets/stylesheets/material/bootstrap/_responsive-embed.scss

@@ -1,9 +1,14 @@
 .embed-responsive {
   display: block;
-  height: 0;
   overflow: hidden;
   padding: 0;
   position: relative;
+  width: 100%;
+
+  &::before {
+    content: "";
+    display: block;
+  }
 
   embed,
   iframe,
@@ -21,17 +26,25 @@
 }
 
 .embed-responsive-1by1 {
-  padding-bottom: percentage(1 / 1);
+  &::before {
+    padding-top: percentage(1 / 1);
+  }
 }
 
 .embed-responsive-4by3 {
-  padding-bottom: percentage(3 / 4);
+  &::before {
+    padding-top: percentage(3 / 4);
+  }
 }
 
 .embed-responsive-16by9 {
-  padding-bottom: percentage(9 / 16);
+  &::before {
+    padding-top: percentage(9 / 16);
+  }
 }
 
 .embed-responsive-21by9 {
-  padding-bottom: percentage(9 / 21);
+  &::before {
+    padding-top: percentage(9 / 21);
+  }
 }

data/app/assets/stylesheets/material/bootstrap/{_animation.scss → _transition.scss}

@@ -1,11 +1,20 @@
 .collapse {
   display: none;
 
-  &.in {
+  &.show {
     display: block;
   }
 }
 
+// specific cases for .collapse.show
+  tbody.collapse.show {
+    display: table-row-group;
+  }
+
+  tr.collapse.show {
+    display: table-row;
+  }
+
 .collapsing {
   height: 0;
   overflow: hidden;
@@ -18,7 +27,7 @@
   transform: scale(0.87);
   @include transition-acceleration(opacity, transform);
 
-  &.in {
+  &.show {
     opacity: 1;
     transform: scale(1);
     @include transition-deceleration(opacity, transform);

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

@@ -1,30 +1,23 @@
 .card {
   background-color: $card-bg;
-  border: 0;
   box-shadow: map-get($card-elevation-shadow, shadow);
-  display: block;
-  margin-bottom: $card-margin-bottom;
+  display: flex;
+  flex-direction: column;
   position: relative;
-  @include border-radius($border-radius);
   z-index: map-get($card-elevation-shadow, elevation);
+  @include border-radius($border-radius);
 }
 
-.card[href]:not([tabindex]) {
+.card[href],
+.card[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);
+      text-decoration: none;
       z-index: map-get($card-elevation-shadow-active, elevation);
     }
 
     &:focus {
-      box-shadow: map-get($card-elevation-shadow-active, shadow);
       outline: 0;
     }
 }
@@ -48,7 +41,8 @@
 // action
 //
   .card-actions {
-    padding: $card-action-spacer-y $card-action-spacer-x;
+    display: flex;
+    padding: $card-action-spacer-y ($card-action-spacer-x / 2);
     @include clearfix;
 
     &:first-child {
@@ -60,54 +54,53 @@
     }
 
     .btn {
+      margin-right: ($card-action-spacer-x / 2);
+      margin-left: ($card-action-spacer-x / 2);
       min-width: 0;
+      overflow-x: hidden;
       padding-right: $card-action-spacer-x;
       padding-left: $card-action-spacer-x;
-
-      + .btn {
-        margin-left: $card-action-spacer-x;
-      }
+      text-overflow: ellipsis;
     }
-  }
 
-  .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;
-    }
+    // vertical
+      &.flex-column,
+      &.flex-column-reverse {
+        .btn {
+          display: table;
 
-    &:last-child {
-      border-bottom: 0;
-    }
+          + .btn {
+            margin-top: ($card-action-spacer-y / 2);
+          }
+        }
+      }
   }
 
-  .card-actions-vertical {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
+  .card-link {
+    // active, focus, hover
+      @include active-focus-hover {
+        text-decoration: none;
+      }
 
-    .btn + .btn,
-    .card-link + .card-link {
-      margin-top: $card-action-spacer-y;
-      margin-left: 0;
+    + .card-link {
+      margin-left: $card-action-spacer-x;
     }
   }
 
-  .card-link + .card-link {
-    margin-left: $card-action-spacer-x;
-  }
-
 //
 // block
 //
   .card-block {
+    flex: 1 1 auto;
     padding: $card-spacer-inner-y $card-spacer-inner-x;
-    @include clearfix;
 
-    > :last-child {
-      margin-bottom: 0;
+    &:first-child,
+    .card-img-top + & {
+      padding-top: ($card-spacer-inner-y * 1.5);
+    }
+
+    &:last-child {
+      padding-bottom: ($card-spacer-inner-y * 1.5);
     }
   }
 
@@ -115,8 +108,12 @@
 // footer
 //
   .card-footer {
-    border-top: $card-border-width solid $card-border-color;
-    padding: $card-spacer-inner-y $card-spacer-inner-x;
+    padding: 0 $card-spacer-inner-x $card-spacer-inner-y;
+
+    &:first-child {
+      padding-top: $card-spacer-inner-y;
+      @include border-top-radius($border-radius);
+    }
 
     &:last-child {
       @include border-bottom-radius($border-radius);
@@ -127,18 +124,73 @@
 // 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;
+    padding: $card-spacer-inner-y $card-spacer-inner-x 0;
+
+    &:first-child,
+    .card-img-top + & {
+      padding-top: ($card-spacer-inner-y * 1.5);
+    }
 
     &:first-child {
       @include border-top-radius($border-radius);
     }
 
-    > :last-child {
-      margin-bottom: 0;
+    &:last-child {
+      padding-bottom: ($card-spacer-inner-y * 1.5);
+      @include border-bottom-radius($border-radius);
+    }
+  }
+
+  .card-header-pills {
+    margin-top: ($card-action-spacer-y - $card-spacer-inner-y);
+    margin-right: ($card-action-spacer-x - $card-spacer-inner-x);
+    margin-bottom: $card-action-spacer-y;
+    margin-left: ($card-action-spacer-x - $card-spacer-inner-x);
+
+    .card-header:first-child &,
+    .card-img-top + .card-header & {
+      margin-top: ($card-action-spacer-y - $card-spacer-inner-y * 1.5);
+    }
+
+    .nav-item + .nav-item,
+    .nav-link + .nav-link {
+      margin-left: $card-action-spacer-x;
+    }
+
+    .nav-link {
+      padding-right: $card-action-spacer-x;
+      padding-left: $card-action-spacer-x;
+    }
+
+    // vertical
+      &.flex-column,
+      &.flex-column-reverse {
+        .nav-item,
+        .nav-link {
+          display: table;
+        }
+
+        .nav-item + .nav-item,
+        .nav-link + .nav-link {
+          margin-top: ($card-action-spacer-y / 2);
+          margin-left: 0;
+        }
+      }
+  }
+
+  .card-header-tabs {
+    margin-top: ($card-spacer-inner-y * -1);
+    margin-right: ($card-spacer-inner-x * -1);
+    margin-left: ($card-spacer-inner-x * -1);
+
+    .card-header:first-child &,
+    .card-img-top + .card-header & {
+      margin-top: ($card-spacer-inner-y * -1.5);
+    }
+
+    .card-header:last-child & {
+      margin-bottom: ($card-spacer-inner-y * -1.5);
     }
   }
 
@@ -161,103 +213,98 @@
 // image overlay
 //
   .card-img-overlay {
-    padding: $card-spacer-inner-y $card-spacer-inner-x;
+    max-height: 100%;
+    padding: ($card-spacer-inner-y * 1.5) $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;
+    column-count: 2;
+    column-gap: 0;
+    margin-right: ($card-spacer-outer-x / -2);
+    margin-left: ($card-spacer-outer-x / -2);
 
     .card {
+      display: inline-block;
+      margin-right: ($card-spacer-outer-x / 2);
       margin-bottom: $card-spacer-outer-y;
+      margin-left: ($card-spacer-outer-x / 2);
+      width: calc(100% - #{$card-spacer-outer-x});
     }
 
     @include media-breakpoint-up(sm) {
-      column-count: 2;
-      column-gap: 0;
+      column-count: 3;
+    }
+  }
+
+  .card-deck {
+    @include media-breakpoint-up(sm) {
+      display: flex;
+      flex-flow: row wrap;
       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;
+        flex: 1 0 0;
         margin-right: ($card-spacer-outer-x / 2);
+        margin-bottom: $card-spacer-outer-y;
         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;
+    @include media-breakpoint-up(sm) {
+      display: flex;
+      flex-flow: row wrap;
 
-    .card {
-      margin-bottom: $card-spacer-outer-y;
-    }
-  }
+      .card {
+        flex: 1 0 0;
+
+        &:first-child {
+          @include border-right-radius(0);
+
+          .card-actions,
+          .card-footer,
+          .card-header,
+          .card-img,
+          .card-img-bottom,
+          .card-img-top {
+            @include border-right-radius(0);
+          }
+        }
 
-  @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;
+        &:last-child {
+          @include border-left-radius(0);
+
+          .card-actions,
+          .card-footer,
+          .card-header,
+          .card-img,
+          .card-img-bottom,
+          .card-img-top {
+            @include border-left-radius(0);
+          }
         }
-      }
 
-      .card-deck-wrapper,
-      .card-group-wrapper {
-        margin-right: ($card-spacer-outer-x * -1);
-        margin-left: ($card-spacer-outer-x * -1);
+        &:not(:first-child):not(:last-child) {
+          @include border-radius(0);
+
+          .card-actions,
+          .card-footer,
+          .card-header,
+          .card-img,
+          .card-img-bottom,
+          .card-img-top {
+            @include border-radius(0);
+          }
+        }
       }
     }
   }
@@ -265,22 +312,37 @@
 //
 // text and title
 //
+  .card-blockquote {
+    border-left: 0;
+    margin-bottom: 0;
+    padding: 0;
+  }
+
   .card-subtitle {
-    margin-top: ($card-spacer-inner-y / -2);
+    margin-top: ($card-spacer-inner-y * -1);
     margin-bottom: 0;
     @include typography-body-1;
   }
 
-  .card-text:last-child {
-    margin-bottom: 0;
+  .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 {
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .card-block:not(:first-child) > &:first-child {
+      margin-top: ($card-spacer-inner-y / 2);
+    }
+
+    .card-img-top + .card-block > &:first-child {
       margin-top: 0;
     }
   }