material-sass 4.0.0.alpha5 → 4.0.0.alpha6

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

@@ -1,10 +1,17 @@
 .tooltip {
   display: block;
   font-size: $tooltip-font-size;
+  opacity: 0;
   position: absolute;
   z-index: $tooltip-zindex;
   @include reset-text;
 
+  &,
+  &.fade,
+  &.fade.show {
+    transition-property: opacity;
+  }
+
   &.bs-tether-element-attached-bottom,
   &.tooltip-top {
     margin-top: ($tooltip-margin * -1);
@@ -24,26 +31,6 @@
   &.tooltip-bottom {
     margin-top: $tooltip-margin;
   }
-
-  &.fade {
-    opacity: 0;
-    transition-property: opacity;
-
-    .tooltip-inner {
-      transform: scale(0.87);
-      @include transition-acceleration(transform);
-    }
-  }
-
-  &.fade.in {
-    opacity: $tooltip-opacity;
-    transition-property: opacity;
-
-    .tooltip-inner {
-      transform: scale(1);
-      @include transition-deceleration(transform);
-    }
-  }
 }
 
 .tooltip-inner {
@@ -51,9 +38,21 @@
   color: $tooltip-color;
   padding: $tooltip-padding-y $tooltip-padding-x;
   text-align: center;
+  transform: scale(0.87);
   @include border-radius($border-radius);
+  @include transition-acceleration(transform);
 }
 
+// show
+  .tooltip.show {
+    opacity: $tooltip-opacity;
+
+    .tooltip-inner {
+      transform: scale(1);
+      @include transition-deceleration(transform);
+    }
+  }
+
 // desktop
   @include media-breakpoint-up(md) {
     .tooltip {

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

@@ -10,10 +10,9 @@
 
 //
 // bootstrap components
-// components covered in bootstrap's (v4.0.0-alpha.5) css but not in material design guidelines
+// components covered in bootstrap's (v4.0.0-alpha.6) css but not in material design guidelines
 //
   @import "bootstrap/alert";
-  @import "bootstrap/animation";
   @import "bootstrap/breadcrumb";
   @import "bootstrap/button-group";
   @import "bootstrap/carousel";
@@ -28,6 +27,7 @@
   @import "bootstrap/pagination";
   @import "bootstrap/popover";
   @import "bootstrap/responsive-embed";
+  @import "bootstrap/transition";
 
 //
 // material components

data/app/assets/stylesheets/material/mixins/_border-radius.scss

@@ -1,34 +1,24 @@
 @mixin border-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    border-radius: $radius;
-  }
+  border-radius: $radius;
 }
 
 // single side
   @mixin border-top-radius($radius: $border-radius) {
-    @if $enable-rounded {
-      border-top-left-radius: $radius;
-      border-top-right-radius: $radius;
-    }
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
   }
 
   @mixin border-right-radius($radius: $border-radius) {
-    @if $enable-rounded {
-      border-top-right-radius: $radius;
-      border-bottom-right-radius: $radius;
-    }
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
   }
 
   @mixin border-bottom-radius($radius: $border-radius) {
-    @if $enable-rounded {
-      border-bottom-right-radius: $radius;
-      border-bottom-left-radius: $radius;
-    }
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
   }
 
   @mixin border-left-radius($radius: $border-radius) {
-    @if $enable-rounded {
-      border-bottom-left-radius: $radius;
-      border-top-left-radius: $radius;
-    }
+    border-bottom-left-radius: $radius;
+    border-top-left-radius: $radius;
   }

data/app/assets/stylesheets/material/mixins/_breakpoint.scss

@@ -1,16 +1,24 @@
+@function breakpoint-infix($name) {
+  @return if(breakpoint-min($name) == null, "", "-#{$name}");
+}
+
 @function breakpoint-max($name) {
   $next: breakpoint-next($name);
+
   @return if($next, breakpoint-min($next) - 1px, null);
 }
 
 @function breakpoint-min($name) {
   $min: map-get($grid-breakpoints, $name);
+
   @return if($min != 0, $min, null);
 }
 
-@function breakpoint-next($name, $names: map-keys($grid-breakpoints)) {
-  $n: index($names, $name);
-  @return if($n < length($names), nth($names, $n + 1), null);
+@function breakpoint-next($name) {
+  $map: map-keys($grid-breakpoints);
+  $n: index($map, $name);
+
+  @return if($n < length($map), nth($map, $n + 1), null);
 }
 
 @mixin media-breakpoint-down($name) {

data/app/assets/stylesheets/material/mixins/_form.scss

@@ -1,56 +1,41 @@
-@mixin floating-label-size($floating-label-height, $floating-label-padding-top, $font-size, $height, $line-height, $margin-bottom, $padding-top) {
-  $form-control-padding-top: ($floating-label-height - $floating-label-padding-top - $line-height - ($height - $padding-top - $line-height));
+@mixin floating-label-size($font-size, $height, $padding-top, $padding-bottom) {
+  $floating-label-line-height:      ($height - $padding-top - $padding-bottom);
+  $floating-label-scale-percentage: ($floating-label-font-size-focus / $font-size);
 
-  margin-bottom: $margin-bottom;
-  padding-top: $floating-label-padding-top;
+  padding-top: ($floating-label-line-height * $floating-label-scale-percentage);
 
   > label {
     font-size: $font-size;
-    line-height: $line-height;
+    line-height: $floating-label-line-height;
     // position
-      top: ($floating-label-padding-top + $form-control-padding-top);
+      top: ($floating-label-line-height * $floating-label-scale-percentage + $padding-top);
   }
 
   &.has-value > label,
   &.is-focused > label {
-    // position
-      top: $floating-label-padding-top;
-    transform: scale($floating-label-font-size-focus / $font-size);
-  }
-
-  > .form-control {
-    padding-top: $form-control-padding-top;
-  }
-
-  > select.form-control {
-    background-position: 100% ($form-control-padding-top + ($line-height - $material-icon-size / $font-size-root) / 2);
+    transform: scale($floating-label-scale-percentage);
   }
 }
 
-@mixin form-control-size($border-width, $font-size, $height, $line-height, $margin-bottom, $padding-top) {
+@mixin form-control-size($border-width, $font-size, $height, $padding-top, $padding-bottom) {
   font-size: $font-size;
-  line-height: $line-height;
-  margin-bottom: $margin-bottom;
-  padding: $padding-top 0 ($height - $padding-top - $line-height - $border-width / $font-size-root);
+  height: $height;
+  line-height: ($height - $padding-top - $padding-bottom);
+  padding: $padding-top 0 ($padding-bottom - $border-width / $font-size-root * 1rem);
 
   @if $border-width != 0px {
     &:focus {
-      padding-bottom: ($height - $padding-top - $line-height - ($border-width + 1) / $font-size-root);
+      padding-bottom: ($padding-bottom - ($border-width + 1) / $font-size-root * 1rem);
     }
   }
 }
 
 @mixin form-control-validation($color) {
+  .col-form-label,
   .custom-control,
-  .form-check,
+  .form-check-label,
   .form-control-feedback,
-  .form-control-label,
-  // &.checkbox label,
-  // &.checkbox-inline label,
-  &.form-check label,
-  &.form-check-inline label {
-  // &.radio label,
-  // &.radio-inline label {
+  .form-control-label {
     color: $color;
   }
 

data/app/assets/stylesheets/material/mixins/_grid-framework.scss

@@ -0,0 +1,58 @@
+@mixin make-grid-columns() {
+  %grid-column {
+    min-height: 1px;
+    position: relative;
+    width: 100%;
+
+    @include make-gutters;
+  }
+
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint);
+
+    @for $i from 1 through $grid-columns {
+      .col#{$infix}-#{$i} {
+        @extend %grid-column;
+      }
+    }
+
+    .col#{$infix} {
+      @extend %grid-column;
+    }
+
+    @include media-breakpoint-up($breakpoint) {
+      .col#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+
+      .col#{$infix}-auto {
+        flex: 0 0 auto;
+        width: auto;
+      }
+
+      @for $i from 1 through $grid-columns {
+        .col#{$infix}-#{$i} {
+          @include make-col($i);
+        }
+      }
+
+      @each $modifier in (pull, push) {
+        @for $i from 0 through $grid-columns {
+          .#{$modifier}#{$infix}-#{$i} {
+            @include make-col-modifier($i, $modifier);
+          }
+        }
+      }
+
+      @for $i from 0 through ($grid-columns - 1) {
+        @if not ($infix == "" and $i == 0) {
+          .offset#{$infix}-#{$i} {
+            @include make-col-modifier($i, offset);
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/material/mixins/_grid.scss

@@ -1,75 +1,10 @@
 //
 // make column
 //
-  @mixin make-grid-columns() {
-    %grid-column {
-      min-height: 1px;
-      position: relative;
-      @include make-gutters;
-
-      @if $enable-flex {
-        width: 100%;
-      }
-    }
-
-    $breakpoint-counter: 0;
-
-    @each $breakpoint in map-keys($grid-breakpoints) {
-      $breakpoint-counter: ($breakpoint-counter + 1);
-
-      .col-#{$breakpoint} {
-        @extend %grid-column;
-      }
-
-      @for $i from 1 through $grid-columns {
-        .col-#{$breakpoint}-#{$i} {
-          @extend %grid-column;
-        }
-      }
-
-      @include media-breakpoint-up($breakpoint) {
-        @if $enable-flex {
-          .col-#{$breakpoint} {
-            flex-basis: 0;
-            flex-grow: 1;
-            max-width: 100%;
-          }
-        }
-
-        @for $i from 1 through $grid-columns {
-          .col-#{$breakpoint}-#{$i} {
-            @include make-col($i);
-          }
-        }
-
-        @each $modifier in (pull, push) {
-          @for $i from 0 through $grid-columns {
-            .#{$modifier}-#{$breakpoint}-#{$i} {
-              @include make-col-modifier($i, $modifier);
-            }
-          }
-        }
-
-        @for $i from 0 through ($grid-columns - 1) {
-          @if $breakpoint-counter != 1 or $i != 0 {
-            .offset-#{$breakpoint}-#{$i} {
-              @include make-col-modifier($i, offset);
-            }
-          }
-        }
-      }
-    }
-  }
-
   // col
     @mixin make-col($size) {
-      @if $enable-flex {
-        flex: 0 0 percentage($size / $grid-columns);
-        max-width: percentage($size / $grid-columns);
-      } @else {
-        float: left;
-        width: percentage($size / $grid-columns);
-      }
+      flex: 0 0 percentage($size / $grid-columns);
+      max-width: percentage($size / $grid-columns);
     }
 
   // gutter
@@ -118,11 +53,8 @@
   @mixin make-container() {
     margin-right: auto;
     margin-left: auto;
-    @include make-gutters;
 
-    @if not $enable-flex {
-      @include clearfix;
-    }
+    @include make-gutters;
   }
 
   @mixin make-container-max-widths() {
@@ -138,12 +70,8 @@
 // make row
 //
   @mixin make-row() {
-    @include make-gutters(margin);
+    display: flex;
+    flex-wrap: wrap;
 
-    @if $enable-flex {
-      display: flex;
-      flex-wrap: wrap;
-    } @else {
-      @include clearfix;
-    }
+    @include make-gutters(margin);
   }

data/app/assets/stylesheets/material/mixins/_transform.scss

@@ -0,0 +1,9 @@
+@mixin if-supports-3d-transforms() {
+  @media (-webkit-transform-3d) {
+    @content;
+  }
+
+  @supports (transform: translate3d(0, 0, 0)) {
+    @content;
+  }
+}

data/app/assets/stylesheets/material/utilities/_border.scss

@@ -1,3 +1,26 @@
+//
+// border
+//
+  .border-0 {
+    border: 0 !important;
+  }
+
+  .border-top-0 {
+    border-top: 0 !important;
+  }
+
+  .border-right-0 {
+    border-right: 0 !important;
+  }
+
+  .border-bottom-0 {
+    border-bottom: 0 !important;
+  }
+
+  .border-left-0 {
+    border-left: 0 !important;
+  }
+
 //
 // border radius
 //
@@ -5,6 +28,14 @@
     @include border-radius($border-radius);
   }
 
+  .rounded-0 {
+    border-radius: 0;
+  }
+
+  .rounded-circle {
+    border-radius: 50%;
+  }
+
   .rounded-top {
     @include border-top-radius($border-radius);
   }
@@ -20,8 +51,3 @@
   .rounded-left {
     @include border-left-radius($border-radius);
   }
-
-// circle
-  .rounded-circle {
-    border-radius: 50%;
-  }

data/app/assets/stylesheets/material/utilities/_display.scss

@@ -1,11 +1,40 @@
-.d-block {
-  display: block !important;
-}
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint);
 
-.d-inline {
-  display: inline !important;
-}
+    .d#{$infix}-none {
+      display: none !important;
+    }
+
+    // block & flex
+      .d#{$infix}-block {
+        display: block !important;
+      }
+
+      .d#{$infix}-flex {
+        display: flex !important;
+      }
+
+    // inline
+      .d#{$infix}-inline {
+        display: inline !important;
+      }
+      
+      .d#{$infix}-inline-block {
+        display: inline-block !important;
+      }
+
+      .d#{$infix}-inline-flex {
+        display: inline-flex !important;
+      }
 
-.d-inline-block {
-  display: inline-block !important;
+    // table
+      .d#{$infix}-table {
+        display: table !important;
+      }
+      
+      .d#{$infix}-table-cell {
+        display: table-cell !important;
+      }
+  }
 }

data/app/assets/stylesheets/material/utilities/_flex.scss

@@ -0,0 +1,140 @@
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint);
+
+    // align content
+      .align-content#{$infix}-around {
+        align-content: space-around !important;
+      }
+
+      .align-content#{$infix}-between {
+        align-content: space-between !important;
+      }
+
+      .align-content#{$infix}-center {
+        align-content: center !important;
+      }
+
+      .align-content#{$infix}-end {
+        align-content: flex-end !important;
+      }
+
+      .align-content#{$infix}-start {
+        align-content: flex-start !important;
+      }
+
+      .align-content#{$infix}-stretch {
+        align-content: stretch !important;
+      }
+
+    // align item
+      .align-items#{$infix}-baseline {
+        align-items: baseline !important;
+      }
+
+      .align-items#{$infix}-center {
+        align-items: center !important;
+      }
+
+      .align-items#{$infix}-start {
+        align-items: flex-start !important;
+      }
+
+      .align-items#{$infix}-end {
+        align-items: flex-end !important;
+      }
+
+      .align-items#{$infix}-stretch {
+        align-items: stretch !important;
+      }
+
+    // align self
+      .align-self#{$infix}-auto {
+        align-self: auto !important;
+      }
+
+      .align-self#{$infix}-baseline {
+        align-self: baseline !important;
+      }
+
+      .align-self#{$infix}-center {
+        align-self: center !important;
+      }
+
+      .align-self#{$infix}-end {
+        align-self: flex-end !important;
+      }
+
+      .align-self#{$infix}-start {
+        align-self: flex-start !important;
+      }
+
+      .align-self#{$infix}-stretch {
+        align-self: stretch !important;
+      }
+
+    // direction
+      .flex#{$infix}-column {
+        flex-direction: column !important;
+      }
+
+      .flex#{$infix}-column-reverse {
+        flex-direction: column-reverse !important;
+      }
+
+      .flex#{$infix}-row {
+        flex-direction: row !important;
+      }
+
+      .flex#{$infix}-row-reverse {
+        flex-direction: row-reverse !important;
+      }
+
+    // justify content
+      .justify-content#{$infix}-around {
+        justify-content: space-around !important;
+      }
+
+      .justify-content#{$infix}-between {
+        justify-content: space-between !important;
+      }
+
+      .justify-content#{$infix}-center {
+        justify-content: center !important;
+      }
+
+      .justify-content#{$infix}-end {
+        justify-content: flex-end !important;
+      }
+
+      .justify-content#{$infix}-start {
+        justify-content: flex-start !important;
+      }
+
+    // order
+      .flex#{$infix}-first {
+        order: -1; 
+      }
+
+      .flex#{$infix}-last {
+        order: 1;
+      }
+
+      .flex#{$infix}-unordered {
+        order: 0;
+      }
+
+    // wrap
+      .flex#{$infix}-nowrap {
+        flex-wrap: nowrap !important;
+      }
+
+      .flex#{$infix}-wrap {
+        flex-wrap: wrap !important;
+      }
+
+      .flex#{$infix}-wrap-reverse {
+        flex-wrap: wrap-reverse !important;
+      }
+  }
+}

data/app/assets/stylesheets/material/utilities/_float.scss

@@ -1,14 +1,16 @@
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
-    .float-#{$breakpoint}-left {
+    $infix: breakpoint-infix($breakpoint);
+
+    .float#{$infix}-left {
       @include pull-left;
     }
 
-    .float-#{$breakpoint}-none {
+    .float#{$infix}-none {
       float: none !important;
     }
 
-    .float-#{$breakpoint}-right {
+    .float#{$infix}-right {
       @include pull-right;
     }
   }

data/app/assets/stylesheets/material/utilities/_position.scss

@@ -0,0 +1,24 @@
+//
+// positioning
+//
+  .fixed-bottom {
+    position: fixed;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    z-index: map-get($toolbar-elevation-shadow, elevation);
+  }
+
+  .fixed-top {
+    position: fixed;
+      top: 0;
+      right: 0;
+      left: 0;
+    z-index: map-get($toolbar-elevation-shadow, elevation);
+  }
+
+  .sticky-top {
+    position: sticky;
+      top: 0;
+    z-index: map-get($toolbar-elevation-shadow, elevation);
+  }