material_components_web-sass 0.23.0 → 0.24.0

data/vendor/assets/stylesheets/@material/textfield/_variables.scss

@@ -36,9 +36,18 @@ $mdc-textfield-dark-placeholder: rgba(black, .38);
 $mdc-textfield-light-background: rgba(white, 1);
 $mdc-textfield-light-label: rgba(white, .7);
 $mdc-textfield-light-placeholder: rgba(white, .3);
+
+$mdc-textfield-box-background: rgba(black, .04);
+$mdc-textfield-box-background-dark: rgba(white, .1);
+$mdc-textfield-box-disabled-background: rgba(black, .02);
+$mdc-textfield-box-disabled-background-dark: rgba(white, .05);
+$mdc-textfield-box-secondary-text: rgba(black, .6);
+
 $mdc-textarea-border-on-light: rgba(black, .73);
 $mdc-textarea-border-on-dark: rgba(white, 1);
 $mdc-textarea-light-background: rgba(white, 1);
 $mdc-textarea-dark-background: rgba(48, 48, 48, 1);
 $mdc-textarea-disabled-background-on-light: rgba(249, 249, 249, 1);
 $mdc-textarea-disabled-background-on-dark: rgba(47, 47, 47, 1);
+
+$mdc-text-field-border-radius: 4px !default;

data/vendor/assets/stylesheets/@material/textfield/mdc-textfield.scss

@@ -43,7 +43,10 @@
     @include mdc-typography-base;
     // We use only a subset of the MDC typography values here as changing things such as line-height
     // affects how the labels are transformed.
-    @each $prop in (font-size, letter-spacing) {
+    // TODO: Re-add setting the font-size from mdc-typography-styles (currently
+    // setting it here has no effect because it is overriden by the font-size
+    // given below).
+    @each $prop in (letter-spacing) {
       #{$prop}: map-get(map-get($mdc-typography-styles, subheading2), $prop);
     }
 
@@ -160,52 +163,30 @@
 }
 
 .mdc-textfield--box {
+  @include mdc-ripple-surface;
+  @include mdc-ripple-color(black, .04);
+  @include mdc-ripple-radius;
+  @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
+
   display: inline-flex;
   position: relative;
   height: 56px;
-  border-radius: 4px 4px 0 0;
-  background-color: rgba(black, .04);
+  background-color: $mdc-textfield-box-background;
   overflow: hidden;
 
   @include mdc-theme-dark(".mdc-textfield", true) {
-    background-color: rgba(white, .1);
+    background-color: $mdc-textfield-box-background-dark;
   }
 
-  &::before,
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: inherit;
-    opacity: 0;
-    pointer-events: none;
-    content: "";
+  @include mdc-theme-dark(".mdc-textfield", true) {
+    @include mdc-ripple-color(white, .05);
   }
 
-  // NOTE: For some reasons, stylelint complains that the two patterns below don't follow BEM.
+  // NOTE: For some reason, stylelint complains that the patterns below don't follow BEM.
   // However, it seems to emit the wrong selector for that pattern. Thus, we disable it above where
-  // we would normally disable it (&.mdc-textfield--disabled) as a workaround.
+  // we would normally disable it (on combined selectors) as a workaround.
 
   // stylelint-disable plugin/selector-bem-pattern
-  // TODO: Refactor this out once #194 lands
-  $opacity-duration: 83ms;
-
-  &::before {
-    transition: opacity 17ms linear, transform 0ms $opacity-duration+2 linear;
-  }
-
-  &:hover {
-    &::before {
-      transition:
-        opacity $opacity-duration linear 17ms,
-        transform 250ms $mdc-animation-deceleration-curve-timing-function 17ms;
-      opacity: 1;
-    }
-  }
-
   .mdc-textfield__input {
     align-self: flex-end;
     box-sizing: border-box;
@@ -219,7 +200,7 @@
     position: absolute;
     bottom: 20px;
     width: calc(100% - #{$mdc-textfield-icon-padding});
-    color: rgba(black, .6);
+    color: $mdc-textfield-box-secondary-text;
     text-overflow: ellipsis;
     white-space: nowrap;
     pointer-events: none;
@@ -243,34 +224,11 @@
     }
   }
 
-  &.mdc-ripple-upgraded {
-    @include mdc-ripple-base;
-    // TODO: Add ::before as ripple bg once #194 lands
-    @include mdc-ripple-fg((pseudo: "::after", opacity: .04));
-
-    &::before {
-      top: calc(50% - var(--mdc-ripple-fg-size, 100%) / 2);
-      left: calc(50% - var(--mdc-ripple-fg-size, 100%) / 2);
-      width: var(--mdc-ripple-fg-size, 100%);
-      height: var(--mdc-ripple-fg-size, 100%);
-      transform: scale(.8);
-    }
-
-    &:hover::before {
-      transform: scale(calc(var(--mdc-ripple-fg-scale, 1) + .1));
-    }
-
-    @include mdc-theme-dark(".mdc-textfield", true) {
-      @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .05));
-    }
-  }
-
   &.mdc-textfield--disabled {
-    @include mdc-theme-prop(background-color, $mdc-textfield-light-background);
     @include mdc-theme-prop(color, $mdc-textfield-light-placeholder);
 
     border-bottom: none;
-    background-color: rgba(black, .02);
+    background-color: $mdc-textfield-box-disabled-background;
 
     @include mdc-theme-dark(".mdc-textfield", true) {
       @include mdc-theme-prop(background-color, $mdc-textfield-dark-background);
@@ -500,6 +458,8 @@
 }
 
 .mdc-textfield--textarea {
+  @include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);
+
   $padding-inset: 16px;
   $label-offset-y: $padding-inset + 2;
   $label-offset-x: $padding-inset;
@@ -508,7 +468,7 @@
   height: initial;
   transition: none;
   border: 1px solid $mdc-textarea-border-on-light;
-  border-radius: 4px;
+  overflow: hidden;
 
   @include mdc-theme-dark(".mdc-textfield") {
     border-color: $mdc-textarea-border-on-dark;
@@ -519,7 +479,6 @@
     padding: $padding-inset;
     padding-top: $padding-inset * 2;
     border: 1px solid transparent;
-    border-radius: 2px;
 
     &:focus {
       @include mdc-theme-prop(border-color, primary);

data/vendor/assets/stylesheets/@material/theme/_variables.scss

@@ -140,3 +140,27 @@ $mdc-theme-property-values: (
   text-disabled-on-dark: map-get(map-get($mdc-theme-text-colors, light), disabled),
   text-icon-on-dark: map-get(map-get($mdc-theme-text-colors, light), icon)
 );
+
+// If `$property` is a literal color value (e.g., `blue`, `#fff`), it is returned verbatim. Otherwise, the value of the
+// corresponding theme property (from `$mdc-theme-property-values`) is returned. If `$property` is not a color and no
+// such theme property exists, an error is thrown.
+//
+// This is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).
+//
+// Examples:
+//
+// 1. mdc-theme-prop-value(primary) => "#3f51b5"
+// 2. mdc-theme-prop-value(blue)    => "blue"
+//
+// NOTE: This function must be defined in _variables.scss instead of _functions.scss to avoid circular imports.
+@function mdc-theme-prop-value($property) {
+  @if type-of($property) == color {
+    @return $property;
+  }
+
+  @if not map-has-key($mdc-theme-property-values, $property) {
+    @error "Invalid theme property: '#{$property}'. Choose one of: #{map-keys($mdc-theme-property-values)}";
+  }
+
+  @return map-get($mdc-theme-property-values, $property);
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_components_web-sass
 version: !ruby/object:Gem::Version
-  version: 0.23.0
+  version: 0.24.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-10-19 00:00:00.000000000 Z
+date: 2017-10-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -147,7 +147,6 @@ files:
 - vendor/assets/stylesheets/@material/elevation/_variables.scss
 - vendor/assets/stylesheets/@material/elevation/mdc-elevation.scss
 - vendor/assets/stylesheets/@material/fab/_mixins.scss
-- vendor/assets/stylesheets/@material/fab/_variables.scss
 - vendor/assets/stylesheets/@material/fab/mdc-fab.scss
 - vendor/assets/stylesheets/@material/fonts/material-icons.scss
 - vendor/assets/stylesheets/@material/fonts/roboto.scss
@@ -162,9 +161,13 @@ files:
 - vendor/assets/stylesheets/@material/list/mdc-list.scss
 - vendor/assets/stylesheets/@material/menu/mdc-menu.scss
 - vendor/assets/stylesheets/@material/menu/simple/mdc-simple-menu.scss
+- vendor/assets/stylesheets/@material/radio/_functions.scss
+- vendor/assets/stylesheets/@material/radio/_mixins.scss
+- vendor/assets/stylesheets/@material/radio/_variables.scss
 - vendor/assets/stylesheets/@material/radio/mdc-radio.scss
 - vendor/assets/stylesheets/@material/ripple/_keyframes.scss
 - vendor/assets/stylesheets/@material/ripple/_mixins.scss
+- vendor/assets/stylesheets/@material/ripple/_variables.scss
 - vendor/assets/stylesheets/@material/ripple/mdc-ripple.scss
 - vendor/assets/stylesheets/@material/rtl/_mixins.scss
 - vendor/assets/stylesheets/@material/select/mdc-select.scss
@@ -172,6 +175,8 @@ files:
 - vendor/assets/stylesheets/@material/slider/mdc-slider.scss
 - vendor/assets/stylesheets/@material/snackbar/_variables.scss
 - vendor/assets/stylesheets/@material/snackbar/mdc-snackbar.scss
+- vendor/assets/stylesheets/@material/switch/_functions.scss
+- vendor/assets/stylesheets/@material/switch/_mixins.scss
 - vendor/assets/stylesheets/@material/switch/_variables.scss
 - vendor/assets/stylesheets/@material/switch/mdc-switch.scss
 - vendor/assets/stylesheets/@material/tabs/mdc-tabs.scss
@@ -181,7 +186,7 @@ files:
 - vendor/assets/stylesheets/@material/textfield/_mixins.scss
 - vendor/assets/stylesheets/@material/textfield/_variables.scss
 - vendor/assets/stylesheets/@material/textfield/mdc-textfield.scss
-- vendor/assets/stylesheets/@material/theme/_color_palette.scss
+- vendor/assets/stylesheets/@material/theme/_color-palette.scss
 - vendor/assets/stylesheets/@material/theme/_constants.scss
 - vendor/assets/stylesheets/@material/theme/_functions.scss
 - vendor/assets/stylesheets/@material/theme/_mixins.scss