material-sass 4.0.0 → 4.1.0

data/assets/stylesheets/material/material/_progress.scss

@@ -71,15 +71,10 @@
     }
   }
 
-  &[style*='width:100%'],
-  &[style*='width: 100%'] {
-    border-right: 0;
-  }
-
   &::after {
     @include border-right-radius($progress-bar-border-radius);
 
-    right: ($progress-bar-height * -6);
+    right: ($progress-bar-buffer-width * -1);
     bottom: ($progress-bar-height * -1);
   }
 

data/assets/stylesheets/material/material/_selection-control.scss

@@ -164,7 +164,7 @@
       }
 
       ~ .custom-control-track {
-        background-color: hex-to-rgba($selection-control-color-active, 0.5);
+        background-color: rgba($selection-control-color-active, $selection-control-track-opacity);
       }
     }
 

data/assets/stylesheets/material/material/_slider.scss

@@ -0,0 +1,157 @@
+.custom-range {
+  appearance: none;
+  background-color: transparent;
+  padding-left: 0;
+  width: 100%;
+
+  &:active,
+  &:focus {
+    &::-moz-range-track {
+      background-color: $slider-track-bg-active;
+    }
+
+    &::-ms-fill-upper {
+      background-color: $slider-track-bg-active;
+    }
+
+    &::-webkit-slider-runnable-track {
+      background-color: $slider-track-bg-active;
+    }
+  }
+
+  &:focus {
+    outline: 0;
+
+    &::-moz-range-thumb {
+      box-shadow: 0 0 0 $slider-thumb-size rgba($slider-thumb-bg, $slider-thumb-radial-opacity);
+    }
+
+    &::-ms-range-thumb {
+      box-shadow: 0 0 0 $slider-thumb-size rgba($slider-thumb-bg, $slider-thumb-radial-opacity);
+    }
+
+    &::-webkit-slider-thumb {
+      box-shadow: 0 0 0 $slider-thumb-size rgba($slider-thumb-bg, $slider-thumb-radial-opacity);
+    }
+  }
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &::-moz-range-progress {
+    background-color: $slider-thumb-bg;
+  }
+
+  &::-moz-range-thumb {
+    @include transition-standard(box-shadow, height, width);
+
+    appearance: none;
+    background-color: $slider-thumb-bg;
+    border: 0;
+    border-radius: 50%;
+    height: $slider-thumb-size;
+    width: $slider-thumb-size;
+
+    &:active {
+      box-shadow: none;
+      height: ($slider-thumb-size * 2);
+      width: ($slider-thumb-size * 2);
+    }
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  &::-moz-range-track {
+    @include transition-standard(background-color);
+
+    background-color: $slider-track-bg;
+    border-color: transparent;
+    border-radius: 0;
+    color: transparent;
+    cursor: pointer;
+    height: $slider-track-height;
+    width: 100%;
+  }
+
+  &::-ms-fill-lower {
+    background-color: $slider-thumb-bg;
+    height: $slider-track-height;
+    margin-bottom: $slider-track-height;
+    margin-left: ($slider-thumb-size / 2);
+  }
+
+  &::-ms-fill-upper {
+    background-color: $slider-track-bg;
+    height: $slider-track-height;
+    margin-right: ($slider-thumb-size / 2);
+    margin-bottom: $slider-track-height;
+  }
+
+  &::-ms-thumb {
+    @include transition-standard(box-shadow);
+
+    appearance: none;
+    background-color: $slider-thumb-bg;
+    border: 0;
+    border-radius: 50%;
+    height: $slider-thumb-size;
+    margin-right: ($slider-thumb-size / 2);
+    margin-left: ($slider-thumb-size / 2);
+    width: $slider-thumb-size;
+
+    &:active {
+      box-shadow: 0 0 0 ($slider-thumb-size / 2) $slider-thumb-bg;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  &::-ms-track {
+    @include transition-standard(background-color);
+
+    background-color: transparent;
+    border-color: transparent;
+    border-width: ($slider-thumb-size + $slider-track-height) 0;
+    color: transparent;
+    cursor: pointer;
+    height: $slider-track-height;
+    width: 100%;
+  }
+
+  &::-webkit-slider-runnable-track {
+    @include transition-standard(background-color);
+
+    background-color: $slider-track-bg;
+    border-color: transparent;
+    border-radius: 0;
+    color: transparent;
+    cursor: pointer;
+    height: $slider-track-height;
+    width: 100%;
+  }
+
+  &::-webkit-slider-thumb {
+    @include transition-standard(box-shadow);
+
+    appearance: none;
+    background-color: $slider-thumb-bg;
+    border: 0;
+    border-radius: 50%;
+    height: $slider-thumb-size;
+    margin-top: (($slider-thumb-size - $slider-track-height) / -2);
+    width: $slider-thumb-size;
+
+    &:active {
+      box-shadow: 0 0 0 ($slider-thumb-size / 2) $slider-thumb-bg;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+  }
+}

data/assets/stylesheets/material/material/_snackbar.scss

@@ -0,0 +1,125 @@
+// Snackbar based on https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-specs
+
+.snackbar {
+  align-items: center;
+  background-color: $snackbar-bg;
+  color: $snackbar-color;
+  display: flex;
+  font-size: $snackbar-font-size;
+  line-height: $snackbar-line-height;
+  opacity: 0;
+  padding: $snackbar-padding-y $snackbar-padding-x;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  transform: translateY(100%);
+  transition: opacity 0s $transition-duration-mobile-leaving, transform $transition-duration-mobile-leaving $transition-timing-function-acceleration;
+  width: 100%;
+  z-index: map-get($snackbar-elevation-shadow, elevation);
+
+  @include media-breakpoint-up($snackbar-breakpoint) {
+    border-radius: $snackbar-border-radius;
+    max-width: $snackbar-max-width;
+    min-width: $snackbar-min-width;
+    left: 50%;
+    transform: translate(-50%, 100%);
+    width: auto;
+  }
+
+  @include media-breakpoint-up(sm) {
+    transition: opacity 0s $transition-duration-tablet-leaving, transform $transition-duration-tablet-leaving $transition-timing-function-acceleration;
+  }
+
+  @include media-breakpoint-up(lg) {
+    transition: opacity 0s $transition-duration-desktop-leaving, transform $transition-duration-desktop-leaving $transition-timing-function-acceleration;
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  &.show {
+    @include transition-deceleration(transform);
+
+    opacity: 1;
+    transform: translateY(0);
+
+    @include media-breakpoint-up($snackbar-breakpoint) {
+      transform: translate(-50%, 0);
+    }
+  }
+}
+
+.snackbar-body {
+  @include text-truncate;
+
+  margin-right: auto;
+  max-height: 100%;
+  min-width: 0;
+}
+
+.snackbar-btn {
+  @include transition-standard(background-color, background-image);
+
+  background-color: transparent;
+  background-image: none;
+  border: 0;
+  color: $snackbar-btn-color;
+  cursor: pointer;
+  display: block;
+  flex-shrink: 0;
+  font-size: inherit;
+  font-weight: $btn-font-weight;
+  line-height: inherit;
+  margin-left: $snackbar-inner-spacer-x;
+  padding: 0;
+  text-transform: uppercase;
+  white-space: nowrap;
+
+  @include focus-hover {
+    color: $snackbar-btn-color-hover;
+    text-decoration: none;
+  }
+
+  @include media-breakpoint-up($snackbar-breakpoint) {
+    margin-left: $snackbar-inner-spacer-x-desktop;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.snackbar-left,
+.snackbar-right {
+  @include media-breakpoint-up($snackbar-breakpoint) {
+    transform: translateY(100%);
+
+    &.show {
+      transform: translateY($snackbar-margin-y * -1);
+    }
+  }
+}
+
+.snackbar-left {
+  @include media-breakpoint-up($snackbar-breakpoint) {
+    left: $snackbar-margin-x;
+  }
+}
+
+.snackbar-right {
+  @include media-breakpoint-up($snackbar-breakpoint) {
+    right: $snackbar-margin-x;
+    left: auto;
+  }
+}
+
+.snackbar-multi-line {
+  height: $snackbar-height-multi;
+  padding-top: $snackbar-padding-y-multi;
+  padding-bottom: $snackbar-padding-y-multi;
+
+  .snackbar-body {
+    white-space: normal;
+  }
+}

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

@@ -7,10 +7,20 @@
 
   > .custom-file,
   > .custom-select,
-  > .form-control {
+  > .floating-label,
+  > .form-control,
+  > .textfield-box {
     flex: 1 1 auto;
     margin-bottom: 0;
     width: 1%;
+
+    + .custom-file,
+    + .custom-select,
+    + .floating-label,
+    + .form-control,
+    + .textfield-box {
+      margin-left: $input-group-inner-spacer-x;
+    }
   }
 }
 
@@ -21,7 +31,6 @@
   align-items: center;
   display: flex;
   justify-content: center;
-  min-width: $textfield-height;
 
   .btn {
     min-width: 0;
@@ -33,21 +42,23 @@
 }
 
 .input-group-append {
-  margin-left: $input-group-addon-margin-x;
+  margin-left: $input-group-inner-spacer-x;
 }
 
 .input-group-prepend {
-  margin-right: $input-group-addon-margin-x;
+  margin-right: $input-group-inner-spacer-x;
 }
 
 .input-group-text {
   color: inherit;
   font-size: $textfield-font-size;
   line-height: $textfield-line-height;
-  margin-right: ($input-group-addon-margin-x / 2);
   margin-bottom: 0;
-  margin-left: ($input-group-addon-margin-x / 2);
   white-space: nowrap;
+
+  + .input-group-text {
+    margin-left: ($input-group-inner-spacer-x / 2);
+  }
 }
 
 // Border radius
@@ -63,6 +74,30 @@
   }
 }
 
+// Icons
+
+.input-group-icon {
+  @include transition-standard(color);
+
+  color: $textfield-border-color;
+  font-size: ($font-size-base / 1rem * $textfield-font-size);
+  margin-right: $input-group-inner-spacer-x;
+  order: -1;
+
+  @include hover {
+    color: $textfield-border-color-hover;
+  }
+
+  .floating-label.is-focused ~ &,
+  .form-control:focus ~ & {
+    color: $textfield-border-color-focus;
+  }
+
+  .floating-label:not(.textfield-box) ~ & {
+    margin-top: $floating-label-font-size-focus;
+  }
+}
+
 // Size
 
 .input-group-lg {
@@ -70,10 +105,18 @@
     @extend %form-control-lg;
   }
 
+  > .floating-label {
+    @extend .floating-label-lg;
+
+    &.has-value label,
+    &.is-focused label {
+      line-height: 1;
+      top: 0;
+    }
+  }
+
   > .input-group-append,
   > .input-group-prepend {
-    min-width: $textfield-height-lg;
-
     > .btn {
       @extend %btn-lg;
     }
@@ -83,6 +126,26 @@
       line-height: $textfield-line-height-lg;
     }
   }
+
+  > .input-group-icon {
+    font-size: ($font-size-base / 1rem * $textfield-font-size-lg);
+    line-height: $textfield-line-height-lg;
+  }
+
+  > .textfield-box {
+    @extend .textfield-box-lg;
+
+    &.floating-label {
+      &.has-value label,
+      &.is-focused label {
+        top: $textfield-box-label-spacer-y;
+      }
+
+      .form-control {
+        padding-bottom: ($textfield-box-label-spacer-y - $textfield-border-width / $font-size-root * 1rem);
+      }
+    }
+  }
 }
 
 .input-group-sm {
@@ -90,10 +153,18 @@
     @extend %form-control-sm;
   }
 
+  > .floating-label {
+    @extend .floating-label-sm;
+
+    &.has-value label,
+    &.is-focused label {
+      line-height: 1;
+      top: 0;
+    }
+  }
+
   > .input-group-append,
   > .input-group-prepend {
-    min-width: $textfield-height-sm;
-
     > .btn {
       @extend %btn-sm;
     }
@@ -103,4 +174,24 @@
       line-height: $textfield-line-height-sm;
     }
   }
+
+  > .input-group-icon {
+    font-size: ($font-size-base / 1rem * $textfield-font-size-sm);
+    line-height: $textfield-line-height-sm;
+  }
+
+  > .textfield-box {
+    @extend .textfield-box-sm;
+
+    &.floating-label {
+      &.has-value label,
+      &.is-focused label {
+        top: $textfield-box-label-spacer-y;
+      }
+
+      .form-control {
+        padding-bottom: ($textfield-box-label-spacer-y - $textfield-border-width / $font-size-root * 1rem);
+      }
+    }
+  }
 }