material-sass 4.0.0.beta → 4.0.0.beta2

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

@@ -90,6 +90,7 @@
 .picker-wrap {
   @include border-radius($border-radius);
   @include transition-standard-complex(transform);
+  @include typography-body-1;
 
   box-shadow: map-get($picker-elevation-shadow, shadow);
   display: inline-block;
@@ -97,7 +98,7 @@
   max-width: ($picker-cell-size * 7 + $picker-inner-spacer-x * 2);
   outline: 0;
   position: relative;
-  transform: scale(.87);
+  transform: scale(0.87);
   vertical-align: middle;
 
   .picker-opened & {
@@ -105,8 +106,6 @@
   }
 }
 
-
-
 // Footer
 
 .picker-footer {
@@ -125,8 +124,6 @@
   }
 }
 
-
-
 // Header
 
 .picker-header {
@@ -178,16 +175,14 @@
   }
 }
 
-
-
 // Material date display
 
 .picker-date-display {
   @include border-top-radius($border-radius);
-  @include color-yiq($picker-header-bg);
   @include text-align(left);
 
   background-color: $picker-header-bg;
+  color: color-yiq($picker-header-bg);
   padding: $picker-header-padding-y $picker-header-padding-x;
 }
 
@@ -208,8 +203,6 @@
   }
 }
 
-
-
 // Table
 
 .picker-day {
@@ -222,9 +215,8 @@
   width: $picker-cell-size;
 
   &.picker-day-selected {
-    @include color-yiq($picker-day-bg-selected);
-
     background-color: $picker-day-bg-selected;
+    color: color-yiq($picker-day-bg-selected);
   }
 }
 
@@ -250,11 +242,14 @@
   td,
   th {
     border: 0;
-    font-weight: normal;
     padding: 0;
     text-align: center;
     vertical-align: middle;
   }
+
+  th {
+    font-weight: inherit;
+  }
 }
 
 .picker-weekday {

data/{app/assets → assets}/stylesheets/material/material/_progress-circular.scss

@@ -125,7 +125,6 @@
   }
 }
 
-// Colour
 @each $color, $values in $theme-colors {
   .progress-circular-#{$color} {
     .progress-circular-gap,

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

@@ -11,6 +11,17 @@
 .progress-bar {
   border-bottom: $progress-bar-height solid $progress-bar-bg;
 
+  @each $color, $values in $theme-colors {
+    &.bg-#{$color} {
+      background-color: transparent !important; // stylelint-disable-line declaration-no-important
+      border-bottom-color: map-get(theme-color($color), color);
+
+      &::after {
+        background-color: map-get(theme-color($color), lighter);
+      }
+    }
+  }
+
   &::after {
     background-color: $progress-bg;
     content: '';
@@ -22,29 +33,8 @@
     left: 0;
     z-index: -1;
   }
-
-  // Colour
-  @each $color, $values in $theme-colors {
-    &.bg-#{$color} {
-      background-color: transparent !important;
-      border-bottom-color: map-get(theme-color($color), color);
-
-      &::after {
-        background-color: map-get(theme-color($color), lighter);
-      }
-
-      &::before {
-        background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
-        // scss-lint:disable VendorPrefix
-        background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
-        // scss-lint:enable VendorPrefix
-      }
-    }
-  }
 }
 
-
-
 // Animated & striped
 
 .progress-bar-animated {
@@ -70,8 +60,18 @@
   box-sizing: content-box;
   position: relative;
 
-  &[style*="width:100%"],
-  &[style*="width: 100%"] {
+  @each $color, $values in $theme-colors {
+    &.bg-#{$color}::before {
+      // stylelint-disable value-no-vendor-prefix
+      background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+      background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+      background-image: -moz-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+      // stylelint-enable
+    }
+  }
+
+  &[style*='width:100%'],
+  &[style*='width: 100%'] {
     border-right: 0;
   }
 
@@ -83,10 +83,11 @@
   }
 
   &::before {
+    // stylelint-disable value-no-vendor-prefix
     background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, #{$progress-bg}, #{$progress-bg} #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
-    // scss-lint:disable VendorPrefix
     background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, #{$progress-bg}, #{$progress-bg} #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
-    // scss-lint:enable VendorPrefix
+    background-image: -moz-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, #{$progress-bg}, #{$progress-bg} #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
+    // stylelint-enable
     background-position: 0 0;
     background-repeat: repeat-x;
     background-size: ($progress-bar-height * 3) ($progress-bar-height * 3);
@@ -99,16 +100,6 @@
     left: 0;
     z-index: -1;
   }
-
-  // Colour
-  @each $color, $values in $theme-colors {
-    &.bg-#{$color}::before {
-      background-image: repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
-      // scss-lint:disable VendorPrefix
-      background-image: -webkit-repeating-radial-gradient(#{$progress-bar-height / 2} #{$progress-bar-height / 2}, map-get(theme-color($color), lighter), map-get(theme-color($color), lighter) #{$progress-bar-height / 2}, transparent #{$progress-bar-height / 2}, transparent 100%);
-      // scss-lint:enable VendorPrefix
-    }
-  }
 }
 
 @keyframes progress-bar-animation {
@@ -121,8 +112,6 @@
   }
 }
 
-
-
 // Indeterminate
 
 .progress-bar-indeterminate {
@@ -130,6 +119,21 @@
   position: relative;
   width: 100%;
 
+  @each $color, $values in $theme-colors {
+    &.bg-#{$color} {
+      border-bottom-color: map-get(theme-color($color), lighter);
+
+      &::after,
+      &::before {
+        background-color: map-get(theme-color($color), color);
+      }
+
+      &::before {
+        background-image: none;
+      }
+    }
+  }
+
   &::after,
   &::before {
     @include border-radius($border-radius);
@@ -156,22 +160,6 @@
     bottom: ($progress-bar-height * -1);
     z-index: 0;
   }
-
-  // Colour
-  @each $color, $values in $theme-colors {
-    &.bg-#{$color} {
-      border-bottom-color: map-get(theme-color($color), lighter);
-
-      &::after,
-      &::before {
-        background-color: map-get(theme-color($color), color);
-      }
-
-      &::before {
-        background-image: none;
-      }
-    }
-  }
 }
 
 @keyframes progress-bar-indeterminate-after {

data/{app/assets → assets}/stylesheets/material/material/_selection-control.scss

@@ -23,7 +23,7 @@
   &::before {
     @include transition-standard(background-color, opacity, transform);
 
-    background-color: $selection-control-radial-bg;
+    background-color: currentColor;
     border-radius: 50%;
     content: '';
     display: block;
@@ -34,7 +34,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    transform: scale(.87, .87) translateZ(0);
+    transform: scale(0.87, 0.87) translateZ(0);
     width: ($selection-control-indicator-size * 2);
   }
 }
@@ -44,27 +44,20 @@
   position: absolute;
   z-index: -1;
 
-  // Active, focus, hover
   &:active,
   &.focus {
     ~ .custom-control-indicator::before {
-      opacity: 1;
+      opacity: $selection-control-radial-opacity;
       transform: scale(1, 1) translateZ(0);
     }
   }
 
-  // Checked
   &:checked ~ {
     .custom-control-indicator {
       color: $selection-control-color-active;
-
-      &::before {
-        background-color: hex-to-rgba($selection-control-color-active, .12);
-      }
     }
   }
 
-  // Disabled
   &:disabled ~ {
     .custom-control-indicator,
     .custom-control-description {
@@ -77,9 +70,6 @@
   }
 }
 
-
-
-// Stacked layout
 .custom-controls-stacked {
   display: flex;
   flex-direction: column;
@@ -91,8 +81,6 @@
   }
 }
 
-
-
 // Checkbox
 
 .custom-checkbox {
@@ -103,20 +91,16 @@
   }
 
   .custom-control-input {
-    // Checked
     &:checked ~ .custom-control-indicator::after {
       content: $selection-control-checkbox-icon-checked;
     }
 
-    // Indeterminate
     &:indeterminate ~ .custom-control-indicator::after {
       content: $selection-control-checkbox-icon-indeterminate;
     }
   }
 }
 
-
-
 // Radio button
 
 .custom-radio {
@@ -127,15 +111,12 @@
   }
 
   .custom-control-input {
-    // Checked
     &:checked ~ .custom-control-indicator::after {
       content: $selection-control-radio-icon-checked;
     }
   }
 }
 
-
-
 // Switch
 
 .custom-switch {
@@ -171,9 +152,8 @@
   }
 
   .custom-control-input {
-    // Checked
     &:checked ~ .custom-control-indicator {
-      background-color: hex-to-rgba($selection-control-color-active, .5);
+      background-color: hex-to-rgba($selection-control-color-active, 0.5);
 
       &::after,
       &::before {
@@ -185,7 +165,6 @@
       }
     }
 
-    // Disabled
     &:disabled ~ .custom-control-indicator {
       background-color: $selection-control-track-bg-disabled;
 

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

@@ -26,7 +26,6 @@
   }
 }
 
-// Horizontal and vertical stepper
 .stepper-horiz {
   background-color: $stepper-bg;
   display: flex;
@@ -85,8 +84,6 @@
   }
 }
 
-
-
 // Misc
 
 .stepper-icon {
@@ -105,9 +102,8 @@
 
   .stepper.active &,
   .stepper.done & {
-    @include color-yiq($stepper-icon-bg-active);
-
     background-color: $stepper-icon-bg-active;
+    color: color-yiq($stepper-icon-bg-active);
   }
 
   .material-icons {
@@ -130,7 +126,3 @@
     font-weight: bolder;
   }
 }
-
-.stepper-text-sub {
-  font-weight: $font-weight-regular;
-}

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

@@ -23,22 +23,8 @@
       background-color: $nav-tab-bg-hover;
     }
 
-    &::before {
-      @include transition-standard(opacity);
-
-      background-color: $nav-tab-indicator-bg;
-      content: '';
-      display: block;
-      height: $nav-tab-indicator-height;
-      opacity: 0;
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-
-    &:active,
-    &.active {
+    &.active,
+    &:active {
       opacity: 1;
     }
 
@@ -55,6 +41,20 @@
       color: $nav-tab-color-disabled;
       opacity: 1;
     }
+
+    &::before {
+      @include transition-standard(opacity);
+
+      background-color: $nav-tab-indicator-bg;
+      content: '';
+      display: block;
+      height: $nav-tab-indicator-height;
+      opacity: 0;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
   }
 
   .nav-item.show .nav-link {

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

@@ -0,0 +1,59 @@
+.textfield-box {
+  &.floating-label {
+    @include textfield-box-size($textfield-font-size, $textfield-box-height, $textfield-line-height, $textfield-box-padding-x, $textfield-box-padding-y);
+
+    padding-top: 0;
+
+    &.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);
+    }
+  }
+
+  > .form-control {
+    @include form-control-size($textfield-font-size, $textfield-box-height, $textfield-line-height, $textfield-box-padding-x, $textfield-box-padding-y);
+
+    background-color: $textfield-box-bg;
+    border-radius: $textfield-box-border-radius;
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  > select.form-control:not([multiple]):not([size]) {
+    @include form-select-size($textfield-font-size, $textfield-box-height, $textfield-box-padding-x);
+  }
+}
+
+// Size
+.textfield-box-lg {
+  &.floating-label {
+    @include textfield-box-size($textfield-font-size-lg, $textfield-box-height-lg, $textfield-line-height-lg, $textfield-box-padding-x-lg, $textfield-box-padding-y-lg);
+  }
+
+  > .form-control {
+    @include form-control-size($textfield-font-size-lg, $textfield-box-height-lg, $textfield-line-height-lg, $textfield-box-padding-x-lg, $textfield-box-padding-y-lg);
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  > select.form-control:not([multiple]):not([size]) {
+    @include form-select-size($textfield-font-size-lg, $textfield-box-height-lg, $textfield-box-padding-x-lg);
+  }
+}
+
+.textfield-box-sm {
+  &.floating-label {
+    @include textfield-box-size($textfield-font-size-sm, $textfield-box-height-sm, $textfield-line-height-sm, $textfield-box-padding-x-sm, $textfield-box-padding-y-sm);
+  }
+
+  > .form-control {
+    @include form-control-size($textfield-font-size-sm, $textfield-box-height-sm, $textfield-line-height-sm, $textfield-box-padding-x-sm, $textfield-box-padding-y-sm);
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  > select.form-control:not([multiple]):not([size]) {
+    @include form-select-size($textfield-font-size-sm, $textfield-box-height-sm, $textfield-box-padding-x-sm);
+  }
+}