material-sass 4.0.0.alpha6 → 4.0.0.beta

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

@@ -1,22 +1,26 @@
 .input-group {
+  align-items: center;
   display: flex;
   position: relative;
   width: 100%;
 
   .form-control {
-    align-self: center;
     flex: 1 1 auto;
     width: 1%;
   }
 }
 
+
+
+// Addon and button
+
 .input-group-addon {
   align-items: center;
   color: inherit;
   display: flex;
-  font-size: ($material-icon-size / $font-size-root * 1rem / $textfield-font-size * $textfield-font-size);
+  font-size: $textfield-font-size;
   justify-content: center;
-  line-height: 1;
+  line-height: $textfield-line-height;
   min-width: $textfield-height;
   white-space: nowrap;
 
@@ -27,6 +31,11 @@
 }
 
 .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;
@@ -40,39 +49,100 @@
     margin-right: 0;
   }
 
-  .btn {
+  > .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);
     min-width: 0;
-    @include border-radius(0);
+
+    &:active,
+    &.active {
+      box-shadow: none;
+    }
+
+    &:disabled,
+    &.disabled {
+      + .btn:disabled,
+      + .btn.disabled {
+        border-left-color: $btn-group-divider-bg;
+      }
+    }
 
     &:first-child {
-      @include border-left-radius($border-radius);
+      border-left-width: 0;
+      margin-left: 0;
     }
 
-    &:last-child {
-      @include border-right-radius($border-radius);
+    &.active {
+      + .btn.active {
+        border-left-color: $btn-group-divider-bg;
+      }
     }
   }
-}
 
-// size
-  .input-group-addon {
-    &.form-control-lg,
-    .input-group-lg > & {
-      font-size: ($material-icon-size / $font-size-root * 1rem / $textfield-font-size * $textfield-font-size-lg);
-      min-width: $textfield-height-lg;
-    }
+  // Colour
+  @each $color, $values in $theme-colors {
+    > .btn-#{$color} {
+      &:disabled,
+      &.disabled {
+        @include color-yiq(map-get(theme-color($color), lighter));
 
-    &.form-control-sm,
-    .input-group-sm > & {
-      font-size: ($material-icon-size / $font-size-root * 1rem / $textfield-font-size * $textfield-font-size-sm);
-      min-width: $textfield-height-sm;
+        background-color: map-get(theme-color($color), lighter);
+      }
     }
   }
 
-  .input-group-lg > .form-control {
-    @extend .form-control-lg;
+  > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+    @include border-right-radius(0);
+  }
+
+  > .btn:last-child:not(:first-child),
+  > .dropdown-toggle:not(:first-child) {
+    @include border-left-radius(0);
+  }
+
+  > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+    border-radius: 0;
+  }
+
+  > .dropdown-toggle:not(:last-child):not(:nth-last-child(2)) {
+    @include border-right-radius(0);
+  }
+}
+
+
+
+// Size
+
+.input-group-lg {
+  > .form-control {
+    @extend %form-control-lg;
+  }
+
+  > .input-group-addon {
+    font-size: $textfield-font-size-lg;
+    line-height: $textfield-line-height-lg;
+    min-width: $textfield-height-lg;
   }
 
-  .input-group-sm > .form-control {
-    @extend .form-control-sm;
+  > .input-group-btn > .btn {
+    @extend %btn-lg;
   }
+}
+
+.input-group-sm {
+  > .form-control {
+    @extend %form-control-sm;
+  }
+
+  > .input-group-addon {
+    font-size: $textfield-font-size-sm;
+    line-height: $textfield-line-height-sm;
+    min-width: $textfield-height-sm;
+  }
+
+  > .input-group-btn > .btn {
+    @extend %btn-sm;
+  }
+}

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

@@ -1,31 +1,18 @@
-.textarea-autosize {
-  height: $textfield-height;
-  min-height: $textfield-height;
-  resize: none;
+textarea {
+  &.textarea-autosize {
+    height: $textfield-height;
+    min-height: $textfield-height;
+    resize: none;
 
-  .floating-label > & {
-    height: ($floating-label-height - $floating-label-padding-top);
-    min-height: ($floating-label-height - $floating-label-padding-top);
-  }
-}
-
-// size
-  .form-control-lg.textarea-autosize {
-    height: $textfield-height-lg;
-    min-height: $textfield-height-lg;
-
-    .floating-label > & {
-      height: ($floating-label-height-lg - $floating-label-padding-top-lg);
-      min-height: ($floating-label-height-lg - $floating-label-padding-top-lg);
+    // Size
+    &.form-control-lg {
+      height: $textfield-height-lg;
+      min-height: $textfield-height-lg;
     }
-  }
-
-  .form-control-sm.textarea-autosize {
-    height: $textfield-height-sm;
-    min-height: $textfield-height-sm;
 
-    .floating-label > & {
-      height: ($floating-label-height-sm - $floating-label-padding-top-sm);
-      min-height: ($floating-label-height-sm - $floating-label-padding-top-sm);
+    &.form-control-sm {
+      height: $textfield-height-sm;
+      min-height: $textfield-height-sm;
     }
   }
+}

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

@@ -1,16 +1,24 @@
-.form-control {
+.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;
   background-image: none;
-  border: 0;
-  border-bottom: $textfield-border-width solid $textfield-border-color;
+  border-color: $textfield-border-color;
   border-radius: 0;
+  border-style: solid;
+  border-width: 0 0 $textfield-border-width;
   box-shadow: none;
-  color: inherit;
+  color: $textfield-color;
   display: block;
   width: 100%;
-  @include form-control-size($textfield-border-width, $textfield-font-size, $textfield-height, $textfield-padding-top, $textfield-padding-bottom);
-  @include transition-standard(border-bottom-color);
+
+  @include hover {
+    border-color: $textfield-border-color-hover;
+    box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) $textfield-border-color-hover;
+  }
 
   &::-ms-expand {
     background-color: transparent;
@@ -22,76 +30,74 @@
     opacity: 1;
   }
 
-  // active, focus, hover
-    &:focus {
-      border-bottom-color: $textfield-border-color-focus;
-      border-bottom-width: ($textfield-border-width + 1);
-      outline: 0;
-    }
+  &:disabled,
+  &[readonly] {
+    border-style: dotted;
+    color: $textfield-color-disabled;
+    opacity: 1;
 
-  // disbaled
-    &:disabled,
-    &[readonly] {
-      border-bottom-style: dotted;
-      color: $textfield-color-disabled;
-      opacity: 1;
+    @include hover {
+      border-color: $textfield-border-color;
+      box-shadow: none;
     }
 
-    &:disabled {
-      cursor: $cursor-disabled;
+    &:focus {
+      border-color: $textfield-border-color;
+      box-shadow: none;
     }
-}
+  }
 
-select.form-control {
-  -webkit-appearance: none;
-     -moz-appearance: none;
+  &:focus {
+    border-color: $textfield-border-color-focus;
+    box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $textfield-border-color-focus;
+    outline: 0;
+  }
 
-  @media screen and (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0) {
-    $select-bg-size: (($material-icon-size / $font-size-root * 1rem / $textfield-font-size) * $textfield-font-size);
+  &:invalid:required {
+    outline: 0;
+  }
+}
 
-    background-image: url($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;
+// Colour
+@each $color, $values in $theme-colors {
+  .form-control-#{$color} {
+    border-color: map-get(theme-color($color), color);
 
-    &[multiple],
-    &[size] {
-      background-image: none;
-      height: auto;
-      padding-right: 0;
+    @include focus-hover {
+      border-color: map-get(theme-color($color), color);
+      box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) map-get(theme-color($color), color);
     }
   }
 }
 
-textarea.form-control {
-  height: auto;
+// 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);
 }
 
-// colour
-  @each $color in $palettes {
-    $i: index($palettes, $color);
+.form-control-sm,
+%form-control-sm {
+  @include form-control-size($textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-padding-x-sm, $textfield-padding-y-sm);
+}
 
-    .form-control-#{$color} {
-      &,
-      &:focus {
-        border-bottom-color: nth($palettes-color, $i);
-      }
+// Special treatment for select and textarea
+%form-control-select {
+  appearance: none;
 
-      &::placeholder {
-        color: nth($palettes-color-light, $i);
-      }
-    }
-  }
+  @include media-moz-webkit {
+    $select-bg-size: (($material-icon-size / $textfield-font-size) * $textfield-font-size);
 
-// size
-  .form-control-lg {
-    @include form-control-size($textfield-border-width, $textfield-font-size-lg, $textfield-height-lg, $textfield-padding-top-lg, $textfield-padding-bottom-lg);
+    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;
   }
 
-  select.form-control-lg {
-    @media screen and (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0) {
-      $select-bg-size-lg: (($material-icon-size / $font-size-root * 1rem / $textfield-font-size) * $textfield-font-size-lg);
+  &.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;
@@ -99,90 +105,93 @@ textarea.form-control {
     }
   }
 
-  .form-control-sm {
-    @include form-control-size($textfield-border-width, $textfield-font-size-sm, $textfield-height-sm, $textfield-padding-top-sm, $textfield-padding-bottom-sm);
-  }
-
-  select.form-control-sm {
-    @media screen and (-webkit-min-device-pixel-ratio: 0), (min--moz-device-pixel-ratio: 0) {
-      $select-bg-size-sm: (($material-icon-size / $font-size-root * 1rem / $textfield-font-size) * $textfield-font-size-sm);
+  &.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;
     }
   }
+}
 
-  input[type="color"],
-  input[type="date"],
-  input[type="datetime-local"],
-  input[type="month"],
-  input[type="time"],
-  input[type="week"] {
-    &.form-control {
-      height: $textfield-height;
-    }
+%textfield-box {
+  border-radius: $textfield-box-border-radius;
+  border-width: $textfield-border-width;
+  height: auto;
+  padding: $textfield-box-padding-y $textfield-box-padding-x;
 
-    &.form-control-lg {
-      height: $textfield-height-lg;
-    }
+  @include hover {
+    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;
+  }
 
-    &.form-control-sm {
-      height: $textfield-height-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;
   }
 
-  input[type="color"] {
-    &.form-control {
-      min-width: $textfield-font-size;
-    }
+  &.form-control-lg {
+    padding: $textfield-box-padding-y-lg $textfield-box-padding-x-lg;
+  }
 
-    &.form-control-lg {
-      min-width: $textfield-font-size-lg;
+  &.form-control-sm {
+    padding: $textfield-box-padding-y-sm $textfield-box-padding-x-sm;
+  }
+}
+
+select {
+  &.form-control {
+    &:not([multiple]):not([size]) {
+      @extend %form-control-select;
     }
 
-    &.form-control-sm {
-      min-width: $textfield-font-size-sm;
+    &[multiple],
+    &[size] {
+      @extend %textfield-box;
     }
   }
+}
 
-//
-// form control state
-//
-  .has-danger {
-    @include form-control-validation($palette-red-500);
+textarea {
+  &.form-control:not(.textarea-autosize) {
+    @extend %textfield-box;
   }
+}
 
-  .has-success {
-    @include form-control-validation($palette-green-500);
-  }
 
-  .has-warning {
-    @include form-control-validation($palette-orange-500);
-  }
 
-//
-// form control static
-//
-  .form-control-static {
-    margin-bottom: 0;
-    @include form-control-size(0px, $textfield-font-size, $textfield-height, $textfield-padding-top, $textfield-padding-bottom);
+// Form control static
 
-    &.form-control-lg {
-      @include form-control-size(0px, $textfield-font-size-lg, $textfield-height-lg, $textfield-padding-top-lg, $textfield-padding-bottom-lg);
-    }
+.form-control-plaintext {
+  @include form-control-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-x, $textfield-padding-y);
 
-    &.form-control-sm {
-      @include form-control-size(0px, $textfield-font-size-sm, $textfield-height-sm, $textfield-padding-top-sm, $textfield-padding-bottom-sm);
-    }
+  border-color: transparent;
+
+  &.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);
   }
 
-//
-// style of material `select` should also be applied to `.custom-select`
-//
-  .custom-select {
-    @extend .form-control;
-    display: inline-block;
-    vertical-align: middle;
-    width: auto;
+  &.form-control-sm {
+    @include form-control-size($textfield-font-size-sm, $textfield-height-sm, $textfield-line-height-sm, $textfield-padding-x-sm, $textfield-padding-y-sm);
   }
+}
+
+
+
+// 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;
+
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+}