material-sass 4.0.0.alpha6 → 4.0.0.beta

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

@@ -1,85 +1,46 @@
 .tooltip {
+  @include reset-text;
+
   display: block;
   font-size: $tooltip-font-size;
+  line-height: $tooltip-line-height;
+  margin: $tooltip-margin;
   opacity: 0;
   position: absolute;
+  word-break: break-word;
   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);
-  }
 
-  &.bs-tether-element-attached-left,
-  &.tooltip-right {
-    margin-left: $tooltip-margin;
-  }
-
-  &.bs-tether-element-attached-right,
-  &.tooltip-left {
-    margin-left: ($tooltip-margin * -1);
-  }
+  &.show {
+    opacity: $tooltip-opacity;
 
-  &.bs-tether-element-attached-top,
-  &.tooltip-bottom {
-    margin-top: $tooltip-margin;
+    .tooltip-inner {
+      transform: scale(1);
+    }
   }
 }
 
 .tooltip-inner {
+  @include border-radius($border-radius);
+  @include transition-standard(transform);
+
   background-color: $tooltip-bg;
   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);
+  transform: scale($tooltip-scale);
 }
 
-// show
-  .tooltip.show {
-    opacity: $tooltip-opacity;
-
-    .tooltip-inner {
-      transform: scale(1);
-      @include transition-deceleration(transform);
-    }
-  }
 
-// desktop
-  @include media-breakpoint-up(md) {
-    .tooltip {
-      font-size: $tooltip-font-size-md-up;
 
-      &.bs-tether-element-attached-bottom,
-      &.tooltip-top {
-        margin-top: ($tooltip-margin-md-up * -1);
-      }
+// Desktop
 
-      &.bs-tether-element-attached-left,
-      &.tooltip-right {
-        margin-left: $tooltip-margin-md-up;
-      }
-
-      &.bs-tether-element-attached-right,
-      &.tooltip-left {
-        margin-left: ($tooltip-margin-md-up * -1);
-      }
-
-      &.bs-tether-element-attached-top,
-      &.tooltip-bottom {
-        margin-top: $tooltip-margin-md-up;
-      }
-    }
+@include media-breakpoint-up(md) {
+  .tooltip {
+    font-size: $tooltip-font-size-desktop;
+    margin: $tooltip-margin-desktop;
+  }
 
-    .tooltip-inner {
-      padding: $tooltip-padding-y-md-up $tooltip-padding-x-md-up;
-    }
+  .tooltip-inner {
+    padding: $tooltip-padding-y-desktop $tooltip-padding-x-desktop;
   }
+}

data/app/assets/stylesheets/material/mixins/_background-variant.scss

@@ -1,14 +1,14 @@
-@mixin bg-variant($class, $color, $color-dark: "") {
+@mixin bg-variant($class, $color, $color-dark: '') {
   #{$class} {
     background-color: $color !important;
   }
 
-  @if ($color-dark != "") {
+  @if ($color-dark != '') {
     a#{$class} {
-      // active, focus, hover
-        @include active-focus-hover {
-          background-color: $color-dark !important;
-        }
+      // Active, focus, hover
+      @include active-focus-hover {
+        background-color: $color-dark !important;
+      }
     }
   }
 }

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

@@ -2,23 +2,23 @@
   border-radius: $radius;
 }
 
-// single side
-  @mixin border-top-radius($radius: $border-radius) {
-    border-top-left-radius: $radius;
-    border-top-right-radius: $radius;
-  }
+// Single side
+@mixin border-bottom-radius($radius: $border-radius) {
+  border-bottom-right-radius: $radius;
+  border-bottom-left-radius: $radius;
+}
 
-  @mixin border-right-radius($radius: $border-radius) {
-    border-top-right-radius: $radius;
-    border-bottom-right-radius: $radius;
-  }
+@mixin border-left-radius($radius: $border-radius) {
+  border-bottom-left-radius: $radius;
+  border-top-left-radius: $radius;
+}
 
-  @mixin border-bottom-radius($radius: $border-radius) {
-    border-bottom-right-radius: $radius;
-    border-bottom-left-radius: $radius;
-  }
+@mixin border-right-radius($radius: $border-radius) {
+  border-top-right-radius: $radius;
+  border-bottom-right-radius: $radius;
+}
 
-  @mixin border-left-radius($radius: $border-radius) {
-    border-bottom-left-radius: $radius;
-    border-top-left-radius: $radius;
-  }
+@mixin border-top-radius($radius: $border-radius) {
+  border-top-left-radius: $radius;
+  border-top-right-radius: $radius;
+}

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

@@ -1,5 +1,5 @@
 @function breakpoint-infix($name) {
-  @return if(breakpoint-min($name) == null, "", "-#{$name}");
+  @return if(breakpoint-min($name) == null, '', '-#{$name}');
 }
 
 @function breakpoint-max($name) {
@@ -43,4 +43,34 @@
   } @else {
     @content
   }
-}
+}
+
+
+
+// Additional mixins
+
+@mixin media-breakpoint-between($lower, $upper) {
+  $max: breakpoint-max($upper);
+  $min: breakpoint-min($lower);
+
+  @media (min-width: $min) and (max-width: $max) {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-only($name) {
+  $max: breakpoint-max($name);
+  $min: breakpoint-min($name);
+
+  @media (min-width: $min) and (max-width: $max) {
+    @content;
+  }
+}
+
+@mixin media-moz-webkit {
+  @media
+  screen and (-webkit-min-device-pixel-ratio: 0),
+  screen and (min--moz-device-pixel-ratio: 0) {
+    @content;
+  }
+}

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

@@ -1,7 +1,7 @@
 @mixin clearfix {
   &::after {
     clear: both;
-    content: "";
+    content: '';
     display: table;
   }
 }

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

@@ -1,45 +1,82 @@
-@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);
-
-  padding-top: ($floating-label-line-height * $floating-label-scale-percentage);
-
+@mixin floating-label-size($font-size, $height, $line-height, $padding-y) {
   > label {
     font-size: $font-size;
-    line-height: $floating-label-line-height;
-    // position
-      top: ($floating-label-line-height * $floating-label-scale-percentage + $padding-top);
+    line-height: $line-height;
+    top: ($floating-label-font-size-focus + $padding-y);
   }
 
   &.has-value > label,
   &.is-focused > label {
-    transform: scale($floating-label-scale-percentage);
+    transform: scale($floating-label-font-size-focus / $font-size);
   }
 }
 
-@mixin form-control-size($border-width, $font-size, $height, $padding-top, $padding-bottom) {
+@mixin form-control-size($font-size, $height, $line-height, $padding-x, $padding-y) {
   font-size: $font-size;
   height: $height;
-  line-height: ($height - $padding-top - $padding-bottom);
-  padding: $padding-top 0 ($padding-bottom - $border-width / $font-size-root * 1rem);
+  line-height: $line-height;
+  padding: $padding-y $padding-x ($padding-y - $textfield-border-width / $font-size-root * 1rem);
+}
 
-  @if $border-width != 0px {
-    &:focus {
-      padding-bottom: ($padding-bottom - ($border-width + 1) / $font-size-root * 1rem);
+@mixin form-control-validation($color, $state) {
+  .custom-control-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-control-indicator,
+      ~ .custom-control-description {
+        color: $color;
+      }
     }
   }
-}
 
-@mixin form-control-validation($color) {
-  .col-form-label,
-  .custom-control,
-  .form-check-label,
-  .form-control-feedback,
-  .form-control-label {
-    color: $color;
+  .custom-file-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      &:focus ~ .custom-file-control {
+        border-bottom-color: $color;
+        box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $color;
+      }
+
+      ~ .custom-file-control {
+        border-color: $color;
+
+        @include hover {
+          border-bottom-color: $color;
+          box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) $color;
+        }
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
   }
 
+  .custom-select,
   .form-control {
-    border-bottom-color: $color;
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      border-color: $color;
+
+      @include focus-hover {
+        border-color: $color;
+        box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) $color;
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .form-check-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      + .form-check-label {
+        color: $color;
+      }
+    }
   }
 }

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

@@ -1,10 +1,10 @@
 @mixin make-grid-columns() {
   %grid-column {
+    @include make-gutters;
+
     min-height: 1px;
     position: relative;
     width: 100%;
-
-    @include make-gutters;
   }
 
   @each $breakpoint in map-keys($grid-breakpoints) {
@@ -16,7 +16,8 @@
       }
     }
 
-    .col#{$infix} {
+    .col#{$infix},
+    .col#{$infix}-auto {
       @extend %grid-column;
     }
 
@@ -29,6 +30,7 @@
 
       .col#{$infix}-auto {
         flex: 0 0 auto;
+        max-width: none;
         width: auto;
       }
 
@@ -38,19 +40,9 @@
         }
       }
 
-      @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);
-          }
+      @for $i from 1 through $grid-columns {
+        .order#{$infix}-#{$i} {
+          order: $i;
         }
       }
     }

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

@@ -1,77 +1,53 @@
-//
-// make column
-//
-  // col
-    @mixin make-col($size) {
-      flex: 0 0 percentage($size / $grid-columns);
-      max-width: percentage($size / $grid-columns);
+// Make column
+
+@mixin make-col($size) {
+  flex: 0 0 percentage($size / $grid-columns);
+  max-width: percentage($size / $grid-columns);
+}
+
+@mixin make-gutters($type: padding) {
+  @each $breakpoint in map-keys($grid-gutter-widths) {
+    @include media-breakpoint-up($breakpoint) {
+      $gutter: map-get($grid-gutter-widths, $breakpoint);
+
+      @if ($type == margin) {
+        margin-right: ($gutter / -2);
+        margin-left: ($gutter / -2);
+      } @else if ($type == padding) {
+        padding-right: ($gutter / 2);
+        padding-left: ($gutter / 2);
+      }
     }
+  }
+}
 
-  // gutter
-    @mixin make-gutters($type: padding) {
-      @each $breakpoint in map-keys($grid-gutter-widths) {
-        @include media-breakpoint-up($breakpoint) {
-          $gutter: map-get($grid-gutter-widths, $breakpoint);
 
-          @if ($type == margin) {
-            margin-right: ($gutter / -2);
-            margin-left: ($gutter / -2);
-          } @else if ($type == padding) {
-            padding-right: ($gutter / 2);
-            padding-left: ($gutter / 2);
-          }
-        }
-      }
-    }
 
-  // modifier
-    @mixin make-col-modifier($size, $type) {
-      @if ($type == offset) {
-        @include make-col-offset($size);
-      } @else if ($type == pull) {
-        @include make-col-pull($size);
-      } @else if ($type == push ){
-        @include make-col-push($size);
-      }
-    }
+// Make container
 
-    @mixin make-col-offset($size) {
-      margin-left: percentage($size / $grid-columns);
-    }
+@mixin make-container() {
+  margin-right: auto;
+  margin-left: auto;
+  width: 100%;
 
-    @mixin make-col-pull($size) {
-      right: if($size > 0, percentage($size / $grid-columns), auto);
-    }
+  @include make-gutters;
+}
 
-    @mixin make-col-push($size) {
-      left: if($size > 0, percentage($size / $grid-columns), auto);
+@mixin make-container-max-widths() {
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    @include media-breakpoint-up($breakpoint) {
+      max-width: $container-max-width;
     }
+  }
+}
 
-//
-// make container
-//
-  @mixin make-container() {
-    margin-right: auto;
-    margin-left: auto;
 
-    @include make-gutters;
-  }
 
-  @mixin make-container-max-widths() {
-    @each $breakpoint, $container-max-width in $container-max-widths {
-      @include media-breakpoint-up($breakpoint) {
-        max-width: 100%;
-        width: $container-max-width;
-      }
-    }
-  }
+// Make row
 
-//
-// make row
-//
-  @mixin make-row() {
-    display: flex;
-    flex-wrap: wrap;
+@mixin make-row() {
+  display: flex;
+  flex-wrap: wrap;
 
-    @include make-gutters(margin);
-  }
+  @include make-gutters(margin);
+}