material-sass 4.0.0.beta2 → 4.0.0.beta3

data/assets/stylesheets/material/material/_text-field.scss

@@ -163,16 +163,46 @@ textarea {
 
 // Form validation
 
-@include form-control-validation($form-feedback-invalid-color, 'invalid');
-@include form-control-validation($form-feedback-valid-color, 'valid');
+@include form-validation-state('invalid', $form-feedback-invalid-color);
+@include form-validation-state('valid', $form-feedback-valid-color);
 
 // Style of Material design `select` should also be applied to `.custom-select`
 
 .custom-select {
   @extend %form-control;
-  @extend %form-select;
 
-  display: inline-block;
-  vertical-align: middle;
-  width: auto;
+  &[multiple],
+  &[size] {
+    @extend %form-textarea;
+  }
+
+  &:not([multiple]):not([size]) {
+    @extend %form-select;
+  }
+}
+
+.custom-select-lg {
+  @extend %form-control-lg;
+
+  &[multiple],
+  &[size] {
+    padding: $textfield-box-padding-y-lg $textfield-box-padding-x-lg;
+  }
+
+  &:not([multiple]):not([size]) {
+    @include form-select-size($textfield-font-size-lg, $textfield-height-lg, $textfield-padding-x-lg);
+  }
+}
+
+.custom-select-sm {
+  @extend %form-control-sm;
+
+  &[multiple],
+  &[size] {
+    padding: $textfield-box-padding-y-sm $textfield-box-padding-x-sm;
+  }
+
+  &:not([multiple]):not([size]) {
+    @include form-select-size($textfield-font-size-sm, $textfield-height-sm, $textfield-padding-x-sm);
+  }
 }

data/assets/stylesheets/material/material/_toolbar.scss

@@ -396,6 +396,10 @@
   &:focus {
     outline: 0;
   }
+
+  &:not([disabled]):not(.disabled) {
+    cursor: pointer;
+  }
 }
 
 .navbar-toggler-icon {

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

@@ -25,7 +25,7 @@
 }
 
 .tooltip-inner {
-  @include border-radius($border-radius);
+  @include border-radius($tooltip-border-radius);
   @include transition-standard(transform);
 
   background-color: $tooltip-bg;

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

@@ -5,7 +5,7 @@
 @function breakpoint-max($name) {
   $next: breakpoint-next($name);
 
-  @return if($next, breakpoint-min($next) - 1px, null);
+  @return if($next, breakpoint-min($next) - 0.02px, null);
 }
 
 @function breakpoint-min($name) {

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

@@ -39,27 +39,89 @@
   }
 }
 
-@mixin form-control-validation($color, $state) {
+@mixin form-validation-state($state, $color) {
+  .#{$state}-feedback {
+    @include typography-caption;
+
+    color: $color;
+    display: none;
+    margin-top: $textfield-margin-y;
+    width: 100%;
+
+    .form-control-lg + & {
+      margin-top: $textfield-margin-y-lg;
+    }
+
+    .form-control-sm + & {
+      margin-top: $textfield-margin-y-sm;
+    }
+  }
+
+  .#{$state}-tooltip {
+    @include border-radius($border-radius);
+
+    background-color: $color;
+    color: color-yiq($color);
+    display: none;
+    font-size: $tooltip-font-size;
+    line-height: $tooltip-line-height;
+    margin-top: $textfield-margin-y;
+    max-width: 100%;
+    opacity: $tooltip-opacity;
+    padding: $tooltip-padding-y $tooltip-padding-x;
+    position: absolute;
+    top: 100%;
+    text-align: center;
+    word-break: break-word;
+    z-index: $tooltip-zindex;
+
+    @include media-breakpoint-up(md) {
+      font-size: $tooltip-font-size-desktop;
+      padding: $tooltip-padding-y-desktop $tooltip-padding-x-desktop;
+    }
+
+    .form-control-lg + & {
+      margin-top: $textfield-margin-y-lg;
+    }
+
+    .form-control-sm + & {
+      margin-top: $textfield-margin-y-sm;
+    }
+  }
+
   .custom-control-input {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
-      ~ .custom-control-indicator,
-      ~ .custom-control-description {
-        color: $color;
+    &.is-#{$state},
+    .was-validated &:#{$state} {
+      ~ .custom-control-label {
+        &,
+        &::after {
+          color: $color;
+        }
+
+        &::before {
+          background-color: $color;
+        }
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
       }
     }
   }
 
   .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;
+    &.is-#{$state},
+    .was-validated &:#{$state} {
+      @include focus-hover {
+        ~ .custom-file-label {
+          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;
+      ~ .custom-file-label {
+        border-bottom-color: $color;
 
         @include hover {
           border-bottom-color: $color;
@@ -76,8 +138,8 @@
 
   .custom-select,
   .form-control {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
+    &.is-#{$state},
+    .was-validated &:#{$state} {
       border-color: $color;
 
       @include focus-hover {
@@ -93,8 +155,8 @@
   }
 
   .form-check-input {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
+    &.is-#{$state},
+    .was-validated &:#{$state} {
       + .form-check-label {
         color: $color;
       }

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

@@ -16,12 +16,14 @@
       }
 
       @for $i from 0 through ($grid-columns - 1) {
-        .offset#{$infix}-#{$i} {
-          @include make-col-offset($i);
+        @if not ($infix == '' and $i == 0) {
+          .offset#{$infix}-#{$i} {
+            @include make-col-offset($i);
+          }
         }
       }
 
-      @for $i from 1 through $grid-columns {
+      @for $i from 0 through $grid-columns {
         .order#{$infix}-#{$i} {
           order: $i;
         }
@@ -38,6 +40,10 @@
         max-width: none;
         width: auto;
       }
+
+      .order#{$infix}-first {
+        order: -1;
+      }
     }
 
     .col#{$infix},

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

@@ -6,7 +6,9 @@
 }
 
 @mixin make-col-offset($size) {
-  margin-left: percentage($size / $grid-columns);
+  $num: $size / $grid-columns;
+
+  margin-left: if($num == 0, 0, percentage($num));
 }
 
 @mixin make-gutters($type: padding) {

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

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

data/assets/stylesheets/material/mixins/_material-icons.scss

@@ -1,5 +1,3 @@
-// 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,12 +22,12 @@
 @mixin set-material-icons {
   @include reset-material-icons;
 
-  font-family: 'Material Icons';
+  font-family: 'Material Icons'; // stylelint-disable-line font-family-no-missing-generic-family-keyword
   font-feature-settings: 'liga';
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-style: normal;
-  font-weight: normal;
+  font-weight: normal; // stylelint-disable-line font-weight-notation
   letter-spacing: normal;
   text-rendering: optimizeLegibility;
   text-transform: none;

data/assets/stylesheets/material/mixins/_text-alignment.scss

@@ -1,5 +1,6 @@
+// scss-lint:disable DuplicateProperty
+
 @mixin text-align($direction: 'left') {
-  // scss-lint:disable DuplicateProperty
   @if $direction == 'left' {
     text-align: left;
     text-align: start;
@@ -19,5 +20,4 @@
       text-align: end;
     }
   }
-  // scss-lint:enable DuplicateProperty
 }

data/assets/stylesheets/material/mixins/_text-hide.scss

@@ -2,6 +2,6 @@
   background-color: transparent;
   border: 0;
   color: transparent;
-  font: 0/0 a;
+  font: 0/0 a; // stylelint-disable-line font-family-no-missing-generic-family-keyword
   text-shadow: none;
 }

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

@@ -2,22 +2,42 @@
 
 // Border
 
+.border {
+  border: $border-width solid $border-color !important;
+}
+
 .border-0 {
   border: 0 !important;
 }
 
+.border-top {
+  border-top: $border-width solid $border-color !important;
+}
+
 .border-top-0 {
   border-top: 0 !important;
 }
 
+.border-right {
+  border-right: $border-width solid $border-color !important;
+}
+
 .border-right-0 {
   border-right: 0 !important;
 }
 
+.border-bottom {
+  border-bottom: $border-width solid $border-color !important;
+}
+
 .border-bottom-0 {
   border-bottom: 0 !important;
 }
 
+.border-left {
+  border-left: $border-width solid $border-color !important;
+}
+
 .border-left-0 {
   border-left: 0 !important;
 }

data/assets/stylesheets/material/variables/_palette.scss

@@ -64,3 +64,5 @@ $theme-colors: map-merge(
   ),
   $theme-colors
 );
+
+$yiq-contrasted-threshold: 150 !default;

data/assets/stylesheets/material/variables/_variable-bootstrap.scss

@@ -169,3 +169,20 @@ $pagination-color-disabled: $black-hint !default;
 $pagination-inner-spacer-x: 1px !default;
 $pagination-padding-x:      0.5rem !default;
 $pagination-padding-y:      0.625rem !default;
+
+// Popover
+
+$popover-bg:               $white !default;
+$popover-border-radius:    $border-radius !default;
+$popover-elevation-shadow: $elevation-shadow-24dp !default;
+$popover-font-size:        $font-size-base !default;
+$popover-margin:           1.5rem !default;
+$popover-margin-desktop:   0.875rem !default;
+$popover-max-width:        17.5rem !default;
+$popover-padding-x:        1.5rem !default;
+$popover-padding-y:        1.25rem !default;
+
+// Print
+
+$print-body-min-width: map-get($grid-breakpoints, 'lg') !default;
+$print-page-size:      a3 !default;