material-sass 4.0.0.beta → 4.0.0.beta2

data/{app/assets → assets}/stylesheets/material/material/_tooltip.scss

@@ -10,6 +10,11 @@
   word-break: break-word;
   z-index: $tooltip-zindex;
 
+  @include media-breakpoint-up(md) {
+    font-size: $tooltip-font-size-desktop;
+    margin: $tooltip-margin-desktop;
+  }
+
   &.show {
     opacity: $tooltip-opacity;
 
@@ -28,19 +33,8 @@
   padding: $tooltip-padding-y $tooltip-padding-x;
   text-align: center;
   transform: scale($tooltip-scale);
-}
-
-
-
-// Desktop
-
-@include media-breakpoint-up(md) {
-  .tooltip {
-    font-size: $tooltip-font-size-desktop;
-    margin: $tooltip-margin-desktop;
-  }
 
-  .tooltip-inner {
+  @include media-breakpoint-up(md) {
     padding: $tooltip-padding-y-desktop $tooltip-padding-x-desktop;
   }
 }

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

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

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

@@ -3,14 +3,15 @@
 }
 
 // Single side
+
 @mixin border-bottom-radius($radius: $border-radius) {
   border-bottom-right-radius: $radius;
   border-bottom-left-radius: $radius;
 }
 
 @mixin border-left-radius($radius: $border-radius) {
-  border-bottom-left-radius: $radius;
   border-top-left-radius: $radius;
+  border-bottom-left-radius: $radius;
 }
 
 @mixin border-right-radius($radius: $border-radius) {

data/{app/assets → assets}/stylesheets/material/mixins/_breakpoint.scss

@@ -41,12 +41,10 @@
       @content;
     }
   } @else {
-    @content
+    @content;
   }
 }
 
-
-
 // Additional mixins
 
 @mixin media-breakpoint-between($lower, $upper) {
@@ -68,9 +66,12 @@
 }
 
 @mixin media-moz-webkit {
-  @media
-  screen and (-webkit-min-device-pixel-ratio: 0),
-  screen and (min--moz-device-pixel-ratio: 0) {
+  @-moz-document url-prefix('') {
+    @content;
+  }
+
+  // stylelint-disable-next-line media-feature-name-no-vendor-prefix
+  @media (-webkit-min-device-pixel-ratio: 0) {
     @content;
   }
 }

data/assets/stylesheets/material/mixins/_float.scss

@@ -0,0 +1,13 @@
+// stylelint-disable declaration-no-important
+
+@mixin float-left {
+  float: left !important;
+}
+
+@mixin float-none {
+  float: none !important;
+}
+
+@mixin float-right {
+  float: right !important;
+}

data/{app/assets → assets}/stylesheets/material/mixins/_form.scss

@@ -1,14 +1,14 @@
 @mixin floating-label-size($font-size, $height, $line-height, $padding-y) {
+  &.has-value > label,
+  &.is-focused > label {
+    transform: scale($floating-label-font-size-focus / $font-size);
+  }
+
   > label {
     font-size: $font-size;
     line-height: $line-height;
     top: ($floating-label-font-size-focus + $padding-y);
   }
-
-  &.has-value > label,
-  &.is-focused > label {
-    transform: scale($floating-label-font-size-focus / $font-size);
-  }
 }
 
 @mixin form-control-size($font-size, $height, $line-height, $padding-x, $padding-y) {
@@ -16,6 +16,27 @@
   height: $height;
   line-height: $line-height;
   padding: $padding-y $padding-x ($padding-y - $textfield-border-width / $font-size-root * 1rem);
+
+  &[type='file'] {
+    height: auto;
+    max-height: $height;
+    min-height: $height;
+  }
+}
+
+@mixin form-select-size($font-size, $height, $padding-x) {
+  @include media-moz-webkit {
+    $select-bg-size: (($material-icon-size / $textfield-font-size) * $font-size);
+
+    background-size: $select-bg-size $select-bg-size;
+    padding-right: ($padding-x + $select-bg-size);
+
+    @if $padding-x != 0 {
+      background-position: calc(100% - #{$padding-x}) ($height / 2 - $select-bg-size / 2);
+    } @else {
+      background-position: 100% ($height / 2 - $select-bg-size / 2);
+    }
+  }
 }
 
 @mixin form-control-validation($color, $state) {
@@ -80,3 +101,14 @@
     }
   }
 }
+
+@mixin textfield-box-size($font-size, $height, $line-height, $padding-x, $padding-y) {
+  > label {
+    top: $padding-y;
+    left: $padding-x;
+  }
+
+  > .form-control {
+    padding-top: ($height - ($textfield-box-label-spacer-y - $textfield-border-width / $font-size-root * 1rem) - $font-size * $line-height);
+  }
+}

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

@@ -1,12 +1,4 @@
 @mixin make-grid-columns() {
-  %grid-column {
-    @include make-gutters;
-
-    min-height: 1px;
-    position: relative;
-    width: 100%;
-  }
-
   @each $breakpoint in map-keys($grid-breakpoints) {
     $infix: breakpoint-infix($breakpoint);
 
@@ -16,12 +8,25 @@
       }
     }
 
-    .col#{$infix},
-    .col#{$infix}-auto {
-      @extend %grid-column;
-    }
-
     @include media-breakpoint-up($breakpoint) {
+      @for $i from 1 through $grid-columns {
+        .col#{$infix}-#{$i} {
+          @include make-col($i);
+        }
+      }
+
+      @for $i from 0 through ($grid-columns - 1) {
+        .offset#{$infix}-#{$i} {
+          @include make-col-offset($i);
+        }
+      }
+
+      @for $i from 1 through $grid-columns {
+        .order#{$infix}-#{$i} {
+          order: $i;
+        }
+      }
+
       .col#{$infix} {
         flex-basis: 0;
         flex-grow: 1;
@@ -33,18 +38,19 @@
         max-width: none;
         width: auto;
       }
+    }
 
-      @for $i from 1 through $grid-columns {
-        .col#{$infix}-#{$i} {
-          @include make-col($i);
-        }
-      }
-
-      @for $i from 1 through $grid-columns {
-        .order#{$infix}-#{$i} {
-          order: $i;
-        }
-      }
+    .col#{$infix},
+    .col#{$infix}-auto {
+      @extend %grid-column;
     }
   }
+
+  %grid-column {
+    @include make-gutters;
+
+    min-height: 1px;
+    position: relative;
+    width: 100%;
+  }
 }

data/{app/assets → assets}/stylesheets/material/mixins/_grid.scss

@@ -5,6 +5,10 @@
   max-width: percentage($size / $grid-columns);
 }
 
+@mixin make-col-offset($size) {
+  margin-left: percentage($size / $grid-columns);
+}
+
 @mixin make-gutters($type: padding) {
   @each $breakpoint in map-keys($grid-gutter-widths) {
     @include media-breakpoint-up($breakpoint) {
@@ -21,16 +25,14 @@
   }
 }
 
-
-
 // Make container
 
 @mixin make-container() {
+  @include make-gutters;
+
   margin-right: auto;
   margin-left: auto;
   width: 100%;
-
-  @include make-gutters;
 }
 
 @mixin make-container-max-widths() {
@@ -41,13 +43,11 @@
   }
 }
 
-
-
 // Make row
 
 @mixin make-row() {
+  @include make-gutters(margin);
+
   display: flex;
   flex-wrap: wrap;
-
-  @include make-gutters(margin);
 }

data/{app/assets → assets}/stylesheets/material/mixins/_hover.scss

@@ -1,35 +1,35 @@
 @mixin active-focus-hover {
   @if $enable-hover-media-query {
-    &:active,
-    &:focus {
-      @content
+    @include hover {
+      @content;
     }
 
-    @include hover {
-      @content
+    &:active,
+    &:focus {
+      @content;
     }
   } @else {
     &:active,
     &:focus,
     &:hover {
-      @content
+      @content;
     }
   }
 }
 
 @mixin focus-hover {
   @if $enable-hover-media-query {
-    &:focus {
-      @content
+    @include hover {
+      @content;
     }
 
-    @include hover {
-      @content
+    &:focus {
+      @content;
     }
   } @else {
     &:focus,
     &:hover {
-      @content
+      @content;
     }
   }
 }
@@ -38,33 +38,33 @@
   @if $enable-hover-media-query {
     @media (hover: hover) {
       &:hover {
-        @content
+        @content;
       }
     }
   } @else {
     &:hover {
-      @content
+      @content;
     }
   }
 }
 
 @mixin plain-active-focus-hover {
   @if $enable-hover-media-query {
+    @include hover {
+      @content;
+    }
+
     &,
     &:active,
     &:focus {
-      @content
-    }
-
-    @include hover {
-      @content
+      @content;
     }
   } @else {
     &,
     &:active,
     &:focus,
     &:hover {
-      @content
+      @content;
     }
   }
 }

data/{app/assets → assets}/stylesheets/material/mixins/_material-icons.scss

@@ -1,3 +1,5 @@
+// stylelint-disable font-weight-notation
+
 @mixin reset-material-icons {
   font-size: ($material-icon-size / $font-size-base * 1em);
   line-height: ($font-size-base / $material-icon-size * 1em);
@@ -24,6 +26,8 @@
 
   font-family: 'Material Icons';
   font-feature-settings: 'liga';
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
@@ -31,6 +35,4 @@
   text-transform: none;
   white-space: nowrap;
   word-wrap: normal;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
 }

data/{app/assets → assets}/stylesheets/material/mixins/_reset-text.scss

@@ -3,7 +3,7 @@
 
   font-family: $font-family-base;
   font-style: normal;
-  font-weight: normal;
+  font-weight: $font-weight-regular;
   letter-spacing: normal;
   line-break: auto;
   line-height: $line-height-base;

data/{app/assets → assets}/stylesheets/material/mixins/_screenreader.scss

@@ -3,15 +3,14 @@
   clip: rect(0, 0, 0, 0);
   clip-path: inset(50%);
   height: 1px;
-  padding: 0;
   overflow: hidden;
+  padding: 0;
   position: absolute;
   white-space: nowrap;
   width: 1px;
 }
 
 @mixin sr-only-focusable {
-  // Active, focus, hover
   &:active,
   &:focus {
     clip: auto;