material-sass 4.1.0 → 4.1.1

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

@@ -145,11 +145,12 @@
 }
 
 .navbar-sticky-top {
-  box-shadow: map-get($toolbar-elevation-shadow, shadow);
-  position: sticky;
-  top: 0;
-  width: 100%;
-  z-index: map-get($toolbar-elevation-shadow, elevation);
+  @supports (position: sticky) {
+    box-shadow: map-get($toolbar-elevation-shadow, shadow);
+    position: sticky;
+    top: 0;
+    z-index: map-get($toolbar-elevation-shadow, elevation);
+  }
 }
 
 .toolbar-waterfall {

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

@@ -1,44 +1,3 @@
-@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);
-  }
-}
-
-@mixin form-control-size($font-size, $height, $line-height, $padding-x, $padding-y) {
-  font-size: $font-size;
-  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-validation-state($state, $color) {
   .#{$state}-feedback {
     @include typography-caption;
@@ -103,6 +62,10 @@
         }
       }
 
+      ~ .custom-control-track {
+        background-color: rgba($color, $selection-control-track-opacity);
+      }
+
       ~ .#{$state}-feedback,
       ~ .#{$state}-tooltip {
         display: block;
@@ -136,9 +99,25 @@
     }
   }
 
-  .custom-select,
-  .form-control,
-  .form-control-file {
+  .custom-switch .custom-control-input {
+    &.is-#{$state},
+    .was-validated &:#{$state} {
+      ~ .custom-control-label::after {
+        background-color: $color;
+      }
+    }
+  }
+
+  .form-check-input {
+    &.is-#{$state},
+    .was-validated &:#{$state} {
+      + .form-check-label {
+        color: $color;
+      }
+    }
+  }
+
+  %form-control {
     &.is-#{$state},
     .was-validated &:#{$state} {
       border-color: $color;
@@ -155,23 +134,19 @@
     }
   }
 
-  .form-check-input {
+  %form-textarea {
     &.is-#{$state},
     .was-validated &:#{$state} {
-      + .form-check-label {
-        color: $color;
+      @include focus-hover {
+        box-shadow: inset $textfield-border-width-hover $textfield-border-width-hover 0 ($textfield-border-width * -1) $color, inset ($textfield-border-width-hover * -1) ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) $color;
       }
     }
-  }
-}
 
-@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);
+    .textfield-box &.is-#{$state},
+    .was-validated .textfield-box &:#{$state} {
+      @include focus-hover {
+        box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) $color;
+      }
+    }
   }
 }

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

@@ -1,4 +1,13 @@
 @mixin make-grid-columns() {
+  %grid-column {
+    min-height: 1px;
+    padding-right: ($grid-gutter-width / 2);
+    padding-left: ($grid-gutter-width / 2);
+    position: relative;
+    width: 100%;
+  }
+
+  // stylelint-disable-next-line order/order
   @each $breakpoint in map-keys($grid-breakpoints) {
     $infix: breakpoint-infix($breakpoint);
 
@@ -55,12 +64,4 @@
       @extend %grid-column;
     }
   }
-
-  %grid-column {
-    min-height: 1px;
-    padding-right: ($grid-gutter-width / 2);
-    padding-left: ($grid-gutter-width / 2);
-    position: relative;
-    width: 100%;
-  }
 }

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

@@ -1,9 +1,11 @@
-@mixin text-hide {
+@mixin text-hide($ignore-warning: false) {
   background-color: transparent;
   border: 0;
   color: transparent;
   font: 0/0 a; // stylelint-disable-line font-family-no-missing-generic-family-keyword
   text-shadow: none;
 
-  @warn 'The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.';
+  @if ($ignore-warning != true) {
+    @warn 'The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.';
+  }
 }

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

@@ -30,7 +30,9 @@ $positions: absolute, fixed, relative, static, sticky;
 }
 
 .sticky-top {
-  position: sticky;
-  top: 0;
-  z-index: map-get($toolbar-elevation-shadow, elevation);
+  @supports (position: sticky) {
+    position: sticky;
+    top: 0;
+    z-index: map-get($toolbar-elevation-shadow, elevation);
+  }
 }

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

@@ -91,7 +91,7 @@
 // Misc
 
 .text-hide {
-  @include text-hide;
+  @include text-hide($ignore-warning: true);
 }
 
 // Transformation

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

@@ -16,12 +16,12 @@ $sizes: map-merge(
   $sizes
 );
 
-$spacer:      1rem !default;
+$spacer:    1rem !default;
 
-$spacer-xs:   ($spacer * 0.25) !default;
-$spacer-sm:   ($spacer * 0.5) !default;
-$spacer-lg:   ($spacer * 1.5) !default;
-$spacer-xl:   ($spacer * 3) !default;
+$spacer-xs: ($spacer * 0.25) !default;
+$spacer-sm: ($spacer * 0.5) !default;
+$spacer-lg: ($spacer * 1.5) !default;
+$spacer-xl: ($spacer * 3) !default;
 
 $spacers: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default

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

@@ -391,7 +391,6 @@ $textfield-border-width-hover: ($textfield-border-width * 2) !default;
 $textfield-color:              $black-primary !default;
 $textfield-color-disabled:     $black-hint !default;
 $textfield-hint-color:         $black-hint !default;
-$textfield-line-height:        $line-height-base !default;
 $textfield-margin-x:           $spacer !default;
 $textfield-plaintext-color:    $body-color !default;
 
@@ -403,7 +402,7 @@ $textfield-height-lg:          3.75rem !default;
 $textfield-height-sm:          2rem !default;
 $textfield-line-height:        1.5 !default;
 $textfield-line-height-lg:     1.176471 !default;
-$textfield-line-height-sm:     1.384615 !default;
+$textfield-line-height-sm:     1.538462 !default;
 $textfield-margin-y:           0.5rem !default;
 $textfield-margin-y-lg:        0.75rem !default;
 $textfield-margin-y-sm:        0.25rem !default;
@@ -414,6 +413,8 @@ $textfield-padding-y:          (($textfield-height - $textfield-font-size * $tex
 $textfield-padding-y-lg:       (($textfield-height-lg - $textfield-font-size-lg * $textfield-line-height-lg) / 2) !default;
 $textfield-padding-y-sm:       (($textfield-height-sm - $textfield-font-size-sm * $textfield-line-height-sm) / 2) !default;
 
+$textfield-select-bg-size:     ($material-icon-size / $textfield-font-size * 1em) !default;
+
 // Text field: box
 // Based on https://material.io/guidelines/components/text-fields.html#text-fields-text-field-boxes
 
@@ -436,7 +437,9 @@ $textfield-box-padding-y-sm:   (($textfield-box-height-sm - $textfield-font-size
 
 $floating-label-color:           $textfield-hint-color !default;
 $floating-label-color-focus:     theme-color(secondary) !default;
-$floating-label-font-size-focus: 0.75rem !default;
+$floating-label-font-size:       0.75rem !default;
+$floating-label-font-size-lg:    0.875rem !default;
+$floating-label-font-size-sm:    0.625rem !default;
 
 // Toolbar (Bootstrap navbar)
 // Based on https://material.google.com/components/toolbars.html#toolbars-usage

data/lib/material-sass/version.rb

@@ -1,5 +1,5 @@
 module Material
   module Sass
-    VERSION = '4.1.0'
+    VERSION = '4.1.1'
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material-sass
 version: !ruby/object:Gem::Version
-  version: 4.1.0
+  version: 4.1.1
 platform: ruby
 authors:
 - mkhairi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-04-17 00:00:00.000000000 Z
+date: 2018-05-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -104,7 +104,6 @@ files:
 - assets/stylesheets/material/bootstrap/_carousel.scss
 - assets/stylesheets/material/bootstrap/_close.scss
 - assets/stylesheets/material/bootstrap/_code.scss
-- assets/stylesheets/material/bootstrap/_custom-form.scss
 - assets/stylesheets/material/bootstrap/_form.scss
 - assets/stylesheets/material/bootstrap/_image.scss
 - assets/stylesheets/material/bootstrap/_jumbotron.scss
@@ -208,7 +207,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.7.3
+rubygems_version: 2.7.6
 signing_key: 
 specification_version: 4
 summary: Material Design for Bootstrap 4

data/assets/stylesheets/material/bootstrap/_custom-form.scss

@@ -1,59 +0,0 @@
-// N.B. Custom checkbox, radio button and select are defined in Material design
-// (https://material.google.com/components/selection-controls.html)
-// therefore, these elements are styled in /assets/sass/material/_selection-control.scss
-
-// Custom file
-
-.custom-file {
-  display: inline-block;
-  height: $textfield-height;
-  margin-bottom: 0;
-  position: relative;
-  width: 100%;
-}
-
-.custom-file-input {
-  height: $textfield-height;
-  margin: 0;
-  opacity: 0;
-  position: relative;
-  width: 100%;
-  z-index: 1;
-
-  @include focus-hover {
-    ~ .custom-file-label {
-      border-bottom-color: $textfield-border-color-focus;
-      box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
-    }
-  }
-}
-
-.custom-file-label {
-  @include form-control-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-x, $textfield-padding-y);
-  @include text-truncate;
-  @include transition-standard(border-color, box-shadow);
-
-  border-bottom: $textfield-border-width solid $textfield-border-color;
-  color: $textfield-hint-color;
-  height: $textfield-height;
-  padding-right: ($material-icon-size + $selection-control-spacer-x);
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-
-  @include hover {
-    border-bottom-color: $textfield-border-color-hover;
-    box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) $textfield-border-color-hover;
-  }
-
-  &::after {
-    @include set-material-icons;
-
-    content: $custom-file-button-icon;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-  }
-}