material-sass 4.0.0.beta → 4.0.0.beta2

data/{app/assets → assets}/stylesheets/material/material/_text-field-floating-label.scss

@@ -4,13 +4,30 @@
   padding-top: $floating-label-font-size-focus;
   position: relative;
 
+  &.has-value > label,
+  &.is-focused > label {
+    line-height: 1;
+    top: 0;
+  }
+
+  &.is-focused > label {
+    color: $floating-label-color-focus;
+  }
+
+  &:not(.has-value):not(.is-focused) > .form-control {
+    &[type='date'],
+    &[type='datetime-local'],
+    &[type='time'] {
+      color: transparent;
+    }
+  }
+
   > label {
     @include text-truncate;
-    @include transition-standard(color, line-height, top, transform);
+    @include transition-standard(color, top, transform);
 
     color: $floating-label-color;
     display: block;
-    font-weight: normal;
     margin: 0;
     padding: 0;
     position: absolute;
@@ -18,19 +35,18 @@
     transform-origin: 0 0;
   }
 
-  &.has-value > label,
-  &.is-focused > label {
-    line-height: 1;
-    top: 0;
-  }
-
-  &.is-focused > label {
-    color: $floating-label-color-focus;
-  }
-
   > .form-control {
     position: relative;
 
+    &[type='file']::-webkit-file-upload-button {
+      background-color: transparent;
+      background-image: none;
+      border: 0;
+      color: $floating-label-color;
+      height: auto;
+      padding: 0;
+    }
+
     &:focus {
       &::placeholder {
         color: $textfield-hint-color;
@@ -47,7 +63,6 @@
   }
 }
 
-// Size
 .floating-label-lg {
   @include floating-label-size($textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-padding-y-lg);
 

data/{app/assets → assets}/stylesheets/material/material/_text-field-input-group.scss

@@ -10,33 +10,24 @@
   }
 }
 
-
-
 // Addon and button
 
-.input-group-addon {
+.input-group .custom-file,
+.input-group .custom-select,
+.input-group .form-control,
+.input-group-addon,
+.input-group-btn {
   align-items: center;
-  color: inherit;
   display: flex;
-  font-size: $textfield-font-size;
-  justify-content: center;
-  line-height: $textfield-line-height;
-  min-width: $textfield-height;
-  white-space: nowrap;
+}
 
-  + .form-control,
-  .form-control + & {
-    margin-left: $input-group-addon-margin-x;
-  }
+.input-group .custom-file,
+.input-group .custom-select {
+  width: 100%;
 }
 
+.input-group-addon,
 .input-group-btn {
-  @include border-radius($btn-border-radius);
-
-  align-items: center;
-  background-color: $btn-group-bg;
-  box-shadow: map-get($btn-elevation-shadow, shadow);
-  display: flex;
   justify-content: center;
   margin-right: $input-group-addon-margin-x;
   margin-left: $input-group-addon-margin-x;
@@ -49,8 +40,37 @@
     margin-right: 0;
   }
 
+  + .input-group-addon,
+  + .input-group-btn {
+    margin-left: ($input-group-addon-margin-x * -1);
+  }
+}
+
+.input-group-addon {
+  color: inherit;
+  font-size: $textfield-font-size;
+  line-height: $textfield-line-height;
+  min-width: $textfield-height;
+  white-space: nowrap;
+}
+
+.input-group-btn {
+  @include border-radius($btn-border-radius);
+
+  background-color: $btn-group-bg;
+  box-shadow: map-get($btn-elevation-shadow, shadow);
+
+  @each $color, $values in $theme-colors {
+    > .btn-#{$color} {
+      &:disabled,
+      &.disabled {
+        background-color: map-get(theme-color($color), lighter);
+        color: color-yiq(map-get(theme-color($color), lighter));
+      }
+    }
+  }
+
   > .btn {
-    border-left: $btn-group-inner-spacer-x solid transparent;
     box-shadow: none;
     flex: 0 1 auto;
     margin-left: ($btn-group-inner-spacer-x * -1);
@@ -61,36 +81,9 @@
       box-shadow: none;
     }
 
-    &:disabled,
-    &.disabled {
-      + .btn:disabled,
-      + .btn.disabled {
-        border-left-color: $btn-group-divider-bg;
-      }
-    }
-
     &:first-child {
-      border-left-width: 0;
       margin-left: 0;
     }
-
-    &.active {
-      + .btn.active {
-        border-left-color: $btn-group-divider-bg;
-      }
-    }
-  }
-
-  // Colour
-  @each $color, $values in $theme-colors {
-    > .btn-#{$color} {
-      &:disabled,
-      &.disabled {
-        @include color-yiq(map-get(theme-color($color), lighter));
-
-        background-color: map-get(theme-color($color), lighter);
-      }
-    }
   }
 
   > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
@@ -111,8 +104,6 @@
   }
 }
 
-
-
 // Size
 
 .input-group-lg {

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

@@ -0,0 +1,15 @@
+.textarea-autosize {
+  height: $textfield-height;
+  min-height: $textfield-height;
+  resize: none;
+
+  &.form-control-lg {
+    height: $textfield-height-lg;
+    min-height: $textfield-height-lg;
+  }
+
+  &.form-control-sm {
+    height: $textfield-height-sm;
+    min-height: $textfield-height-sm;
+  }
+}

data/{app/assets → assets}/stylesheets/material/material/_text-field.scss

@@ -1,7 +1,6 @@
 .form-control,
 %form-control {
   @include form-control-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-x, $textfield-padding-y);
-  @include transition-standard(border-color, box-shadow);
 
   background-clip: padding-box;
   background-color: transparent;
@@ -58,7 +57,6 @@
   }
 }
 
-// Colour
 @each $color, $values in $theme-colors {
   .form-control-#{$color} {
     border-color: map-get(theme-color($color), color);
@@ -70,7 +68,6 @@
   }
 }
 
-// Size
 .form-control-lg,
 %form-control-lg {
   @include form-control-size($textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-padding-x-lg, $textfield-padding-y-lg);
@@ -81,42 +78,26 @@
   @include form-control-size($textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-padding-x-sm, $textfield-padding-y-sm);
 }
 
-// Special treatment for select and textarea
-%form-control-select {
+%form-select {
+  @include form-select-size($textfield-font-size, $textfield-height, $textfield-padding-x);
+
   appearance: none;
 
   @include media-moz-webkit {
-    $select-bg-size: (($material-icon-size / $textfield-font-size) * $textfield-font-size);
-
     background-image: $caret-bg;
-    background-position: 100% ($textfield-height / 2 - $select-bg-size / 2);
     background-repeat: no-repeat;
-    background-size: $select-bg-size $select-bg-size;
-    padding-right: $select-bg-size;
   }
 
   &.form-control-lg {
-    @include media-moz-webkit {
-      $select-bg-size-lg: (($material-icon-size / $textfield-font-size) * $textfield-font-size-lg);
-
-      background-position: 100% ($textfield-height-lg / 2 - $select-bg-size-lg / 2);
-      background-size: $select-bg-size-lg $select-bg-size-lg;
-      padding-right: $select-bg-size-lg;
-    }
+    @include form-select-size($textfield-font-size-lg, $textfield-height-lg, $textfield-padding-x-lg);
   }
 
   &.form-control-sm {
-    @include media-moz-webkit {
-      $select-bg-size-sm: (($material-icon-size / $textfield-font-size) * $textfield-font-size-sm);
-
-      background-position: 100% ($textfield-height-sm / 2 - $select-bg-size-sm / 2);
-      background-size: $select-bg-size-sm $select-bg-size-sm;
-      padding-right: $select-bg-size-sm;
-    }
+    @include form-select-size($textfield-font-size-sm, $textfield-height-sm, $textfield-padding-x-sm);
   }
 }
 
-%textfield-box {
+%form-textarea {
   border-radius: $textfield-box-border-radius;
   border-width: $textfield-border-width;
   height: auto;
@@ -126,10 +107,6 @@
     box-shadow: inset $textfield-border-width-hover $textfield-border-width-hover 0 ($textfield-border-width * -1) $textfield-border-color-hover, inset ($textfield-border-width-hover * -1) ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) $textfield-border-color-hover;
   }
 
-  &:focus {
-    box-shadow: inset $textfield-border-width-focus $textfield-border-width-focus 0 ($textfield-border-width * -1) $textfield-border-color-focus, inset ($textfield-border-width-focus * -1) ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
-  }
-
   &.form-control-lg {
     padding: $textfield-box-padding-y-lg $textfield-box-padding-x-lg;
   }
@@ -137,28 +114,34 @@
   &.form-control-sm {
     padding: $textfield-box-padding-y-sm $textfield-box-padding-x-sm;
   }
+
+  &:focus {
+    box-shadow: inset $textfield-border-width-focus $textfield-border-width-focus 0 ($textfield-border-width * -1) $textfield-border-color-focus, inset ($textfield-border-width-focus * -1) ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
+  }
 }
 
+// stylelint-disable selector-no-qualifying-type
 select {
   &.form-control {
-    &:not([multiple]):not([size]) {
-      @extend %form-control-select;
-    }
-
     &[multiple],
     &[size] {
-      @extend %textfield-box;
+      @extend %form-textarea;
+    }
+
+    &:not([multiple]):not([size]) {
+      @extend %form-select;
     }
   }
 }
+// stylelint-enable
 
+// stylelint-disable selector-no-qualifying-type
 textarea {
   &.form-control:not(.textarea-autosize) {
-    @extend %textfield-box;
+    @extend %form-textarea;
   }
 }
-
-
+// stylelint-enable
 
 // Form control static
 
@@ -166,6 +149,8 @@ textarea {
   @include form-control-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-x, $textfield-padding-y);
 
   border-color: transparent;
+  display: block;
+  width: 100%;
 
   &.form-control-lg {
     @include form-control-size($textfield-font-size-lg, $textfield-height-lg, $textfield-line-height-lg, $textfield-padding-x-lg, $textfield-padding-y-lg);
@@ -176,20 +161,16 @@ textarea {
   }
 }
 
-
-
 // Form validation
 
 @include form-control-validation($form-feedback-invalid-color, 'invalid');
 @include form-control-validation($form-feedback-valid-color, 'valid');
 
-
-
 // Style of Material design `select` should also be applied to `.custom-select`
 
 .custom-select {
   @extend %form-control;
-  @extend %form-control-select;
+  @extend %form-select;
 
   display: inline-block;
   vertical-align: middle;

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

@@ -8,14 +8,23 @@
   padding: $toolbar-padding-y $toolbar-padding-x;
   position: relative;
 
-  > .container {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+  // Horizontally align `.dropdown-menu-right` in `.navbar`
+
+  .dropdown-menu-right {
+    right: 0;
+    left: auto;
+
+    &.menu::before {
+      transform-origin: 100% ($menu-link-height / 2 + $menu-padding-y);
+    }
+
+    &::before {
+      transform-origin: 100% 0;
+    }
   }
 
-  // Vertical align some elements normally placed in `.navbar` or `.toolbar`
+  // Vertically align some elements normally placed in `.navbar`
+
   .btn {
     margin-top: (($btn-height - $toolbar-element-height) / -2);
     margin-bottom: (($btn-height - $toolbar-element-height) / -2);
@@ -90,9 +99,15 @@
       padding-bottom: (($toolbar-height - $nav-tab-font-size * $nav-tab-line-height) / 2);
     }
   }
+
+  > .container {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
 }
 
-// Colour
 .navbar-dark {
   color: $toolbar-dark-color;
 
@@ -110,7 +125,6 @@
   }
 }
 
-// Variation
 .navbar-fixed-bottom,
 .navbar-fixed-top {
   box-shadow: map-get($toolbar-elevation-shadow, shadow);
@@ -157,8 +171,6 @@
   }
 }
 
-
-
 // Misc
 
 .navbar-brand {
@@ -217,8 +229,6 @@
   }
 }
 
-
-
 // Nav
 
 .navbar-nav {
@@ -244,10 +254,6 @@
       opacity: 1;
     }
 
-    &:focus {
-      outline: 0;
-    }
-
     &.active,
     &.disabled {
       opacity: 1;
@@ -257,6 +263,10 @@
       background-color: transparent;
       color: $toolbar-color-lighter;
     }
+
+    &:focus {
+      outline: 0;
+    }
   }
 
   .active > .nav-link,
@@ -269,13 +279,12 @@
   }
 }
 
-
-
 // Toggleable
 
 .navbar-collapse {
   align-items: center;
   flex-basis: 100%;
+  flex-grow: 1;
 }
 
 .navbar-expand {
@@ -285,13 +294,13 @@
 
     &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
-        > .container,
-        > .container-fluid {
-          padding-right: 0;
-          padding-left: 0;
-        }
-
         .navbar-collapse {
+          .form-inline,
+          .navbar-brand,
+          .navbar-text {
+            margin-left: 0;
+          }
+
           > :first-child {
             margin-top: $toolbar-inner-spacer-y;
           }
@@ -299,27 +308,22 @@
           > :not(:last-child) {
             margin-bottom: $toolbar-inner-spacer-y;
           }
+        }
 
-          .form-inline,
-          .navbar-brand,
-          .navbar-text {
-            margin-left: 0;
-          }
+        > .container,
+        > .container-fluid {
+          padding-right: 0;
+          padding-left: 0;
         }
       }
 
       @include media-breakpoint-up($next) {
-        flex-direction: row;
-        flex-wrap: nowrap;
+        flex-flow: row nowrap;
         justify-content: flex-start;
 
-        > .container,
-        > .container-fluid {
-          flex-wrap: nowrap;
-        }
-
         .navbar-collapse {
-          display: flex !important;
+          display: flex !important; // stylelint-disable-line declaration-no-important
+          flex-basis: auto;
         }
 
         .navbar-nav {
@@ -335,6 +339,11 @@
             margin-left: 0;
           }
         }
+
+        > .container,
+        > .container-fluid {
+          flex-wrap: nowrap;
+        }
       }
     }
   }
@@ -347,13 +356,17 @@
   border-radius: 50%;
   color: inherit;
   display: inline-flex;
+  flex-shrink: 0;
   height: $toolbar-element-height;
+  justify-content: center;
   line-height: 1;
   margin-left: $toolbar-inner-spacer-x;
+  padding: 0;
   position: relative;
   width: $toolbar-element-height;
 
   @include active-focus-hover {
+    color: inherit;
     text-decoration: none;
 
     &::before {