@material/web 1.0.0-pre.12 → 1.0.0-pre.14

package/field/internal/_content.scss

@@ -0,0 +1,191 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+@use 'sass:math';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+// Duration of the label animation.
+$_label-duration: map.get($_md-sys-motion, 'duration-short3');
+// Duration of the content's visibility animation.
+$_visible-duration: math.round(math.div($_label-duration * 5, 9));
+// Short delay when entering (focusing/populating) so that the label may move
+// out of the way before the content starts to appear.
+$_enter-delay: $_label-duration - $_visible-duration;
+
+@mixin styles() {
+  .start,
+  .middle,
+  .end {
+    display: flex;
+    box-sizing: border-box;
+    height: 100%;
+    // Relative position for absolutely positioned labels (to avoid interfering
+    // with baseline alignment).
+    position: relative;
+  }
+
+  .start {
+    color: var(--_leading-content-color);
+  }
+
+  .end {
+    color: var(--_trailing-content-color);
+  }
+
+  .start,
+  .end {
+    align-items: center;
+    justify-content: center;
+  }
+
+  // TODO(b/239188049): remove when layout tokens are ready
+  .with-start .start,
+  .with-end .end {
+    min-width: 48px;
+  }
+
+  .with-start .start {
+    margin-inline-end: 4px;
+  }
+
+  .with-end .end {
+    margin-inline-start: 4px;
+  }
+
+  .middle {
+    align-items: stretch;
+    // The container of the field aligns sections by "center". Only the middle
+    // section opts in to baseline alignment.
+    //
+    // Labels are absolutely positioned, which leaves only the content as the
+    // evaluated baseline for the field.
+    //
+    // See https://www.w3.org/TR/css-flexbox-1/#baseline-participation
+    align-self: baseline;
+    flex: 1;
+  }
+
+  .content {
+    color: var(--_content-color);
+    display: flex;
+    flex: 1;
+    opacity: 0;
+    transition: opacity $_visible-duration
+      map.get($_md-sys-motion, 'easing-emphasized');
+  }
+
+  .no-label .content,
+  .focused .content,
+  .populated .content {
+    opacity: 1;
+    transition-delay: $_enter-delay;
+  }
+
+  .content ::slotted(*) {
+    all: unset;
+    // Use `currentColor` to inherit the various state colors that are set
+    // below.
+    color: currentColor;
+    font: var(--_content-type);
+    width: 100%;
+  }
+
+  .content ::slotted(:not(textarea)) {
+    padding-top: var(--_top-space);
+    padding-bottom: var(--_bottom-space);
+  }
+
+  .content ::slotted(textarea) {
+    // Use margin for textareas since they will scroll over the label if not.
+    margin-top: var(--_top-space);
+    margin-bottom: var(--_bottom-space);
+  }
+
+  :hover .content {
+    color: var(--_hover-content-color);
+  }
+
+  :hover .start {
+    color: var(--_hover-leading-content-color);
+  }
+
+  :hover .end {
+    color: var(--_hover-trailing-content-color);
+  }
+
+  .focused .content {
+    color: var(--_focus-content-color);
+  }
+
+  .focused .start {
+    color: var(--_focus-leading-content-color);
+  }
+
+  .focused .end {
+    color: var(--_focus-trailing-content-color);
+  }
+
+  .disabled .content {
+    color: var(--_disabled-content-color);
+  }
+
+  .disabled.no-label .content,
+  .disabled.focused .content,
+  .disabled.populated .content {
+    opacity: var(--_disabled-content-opacity);
+  }
+
+  .disabled .start {
+    color: var(--_disabled-leading-content-color);
+    opacity: var(--_disabled-leading-content-opacity);
+  }
+
+  .disabled .end {
+    color: var(--_disabled-trailing-content-color);
+    opacity: var(--_disabled-trailing-content-opacity);
+  }
+
+  .error .content {
+    color: var(--_error-content-color);
+  }
+
+  .error .start {
+    color: var(--_error-leading-content-color);
+  }
+
+  .error .end {
+    color: var(--_error-trailing-content-color);
+  }
+
+  .error:hover .content {
+    color: var(--_error-hover-content-color);
+  }
+
+  .error:hover .start {
+    color: var(--_error-hover-leading-content-color);
+  }
+
+  .error:hover .end {
+    color: var(--_error-hover-trailing-content-color);
+  }
+
+  .error.focused .content {
+    color: var(--_error-focus-content-color);
+  }
+
+  .error.focused .start {
+    color: var(--_error-focus-leading-content-color);
+  }
+
+  .error.focused .end {
+    color: var(--_error-focus-trailing-content-color);
+  }
+}

package/field/internal/_filled-field.scss

@@ -0,0 +1,203 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-field-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $token == 'container-shape' and meta.type-of($value) == 'list' {
+      @error 'Filled field `container-shape` may not be specified as a list. Use logical (`*-start-start`) tokens instead.';
+    }
+
+    @if $value {
+      --md-filled-field-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-field-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      @if $token == 'container-shape' {
+        // Support logical shape properties. Filled field has a default oblong
+        // shape, which is why the fallback value is unique per corner.
+        --_container-shape-start-start: var(
+          --md-filled-field-container-shape-start-start,
+          var(--md-filled-field-container-shape, #{list.nth($value, 1)})
+        );
+        --_container-shape-start-end: var(
+          --md-filled-field-container-shape-start-end,
+          var(--md-filled-field-container-shape, #{list.nth($value, 2)})
+        );
+        --_container-shape-end-end: var(
+          --md-filled-field-container-shape-end-end,
+          var(--md-filled-field-container-shape, #{list.nth($value, 3)})
+        );
+        --_container-shape-end-start: var(
+          --md-filled-field-container-shape-end-start,
+          var(--md-filled-field-container-shape, #{list.nth($value, 4)})
+        );
+      } @else {
+        --_#{$token}: var(--md-filled-field-#{$token}, #{$value});
+      }
+    }
+  }
+
+  .background,
+  .state-layer {
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  .background {
+    background: var(--_container-color);
+  }
+
+  .state-layer {
+    visibility: hidden;
+  }
+
+  .field:not(.disabled):hover .state-layer {
+    visibility: visible;
+  }
+
+  .label.floating {
+    position: absolute;
+    top: var(--_with-label-top-space);
+  }
+
+  .field:not(.with-start) .label-wrapper {
+    margin-inline-start: var(--_leading-space);
+  }
+
+  .field:not(.with-end) .label-wrapper {
+    margin-inline-end: var(--_trailing-space);
+  }
+
+  .active-indicator {
+    inset: auto 0 0 0;
+    // Prevent click events on the indicator element since it has no width and
+    // causes bugs when handled by the foundation for updating transform-origin.
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+
+    &::before,
+    &::after {
+      border-bottom: var(--_active-indicator-height) solid
+        var(--_active-indicator-color);
+      inset: auto 0 0 0;
+      content: '';
+      position: absolute;
+      width: 100%;
+    }
+
+    // focused indicator
+    &::after {
+      opacity: 0;
+      transition: opacity map.get($_md-sys-motion, 'duration-short3')
+        map.get($_md-sys-motion, 'easing-emphasized');
+    }
+  }
+
+  .focused .active-indicator::after {
+    opacity: 1;
+  }
+
+  .field:not(.with-start) .content ::slotted(*) {
+    padding-inline-start: var(--_leading-space);
+  }
+
+  .field:not(.with-end) .content ::slotted(*) {
+    padding-inline-end: var(--_trailing-space);
+  }
+
+  .field:not(.no-label) .content ::slotted(:not(textarea)) {
+    padding-bottom: var(--_with-label-bottom-space);
+    padding-top: calc(
+      var(--_with-label-top-space) + var(--_label-text-populated-line-height)
+    );
+  }
+
+  .field:not(.no-label) .content ::slotted(textarea) {
+    // Use margin for textareas since they will scroll over the label if not.
+    margin-bottom: var(--_with-label-bottom-space);
+    margin-top: calc(
+      var(--_with-label-top-space) + var(--_label-text-populated-line-height)
+    );
+  }
+
+  :hover .active-indicator::before {
+    border-bottom-color: var(--_hover-active-indicator-color);
+    border-bottom-width: var(--_hover-active-indicator-height);
+  }
+
+  // Focus is on a separate element and does not need a focus selector
+  .active-indicator::after {
+    border-bottom-color: var(--_focus-active-indicator-color);
+    border-bottom-width: var(--_focus-active-indicator-height);
+  }
+
+  :hover .state-layer {
+    background: var(--_hover-state-layer-color);
+    opacity: var(--_hover-state-layer-opacity);
+  }
+
+  .disabled .active-indicator::before {
+    border-bottom-color: var(--_disabled-active-indicator-color);
+    border-bottom-width: var(--_disabled-active-indicator-height);
+    opacity: var(--_disabled-active-indicator-opacity);
+  }
+
+  .disabled .background {
+    background: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
+  .error .active-indicator::before {
+    border-bottom-color: var(--_error-active-indicator-color);
+  }
+
+  .error:hover .active-indicator::before {
+    border-bottom-color: var(--_error-hover-active-indicator-color);
+  }
+
+  .error:hover .state-layer {
+    background: var(--_error-hover-state-layer-color);
+    opacity: var(--_error-hover-state-layer-opacity);
+  }
+
+  // Focus is on a separate element and does not need a focus selector
+  .error .active-indicator::after {
+    border-bottom-color: var(--_error-focus-active-indicator-color);
+  }
+}

package/field/internal/_label.scss

@@ -0,0 +1,91 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  .label {
+    box-sizing: border-box;
+    color: var(--_label-text-color);
+    overflow: hidden;
+    max-width: 100%;
+    // TODO: Check with design, should there be any transition from resting to
+    // floating when there is a mismatch between ellipsis, such as opacity
+    // transition?
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 1;
+    font: var(--_label-text-type);
+    width: min-content;
+  }
+
+  .label-wrapper {
+    inset: 0;
+    // The resting label at 100% height can block pointer events to the content
+    // if it's very long and spans the full width of the field. Additionally,
+    // selecting the label's text doesn't present a good UX, since the user
+    // selection should be re-focused to another element (such as the input)
+    // upon focusing. Finally, since the actual label elements are swapped, it
+    // is not easy to maintain the user's label text selection.
+    pointer-events: none;
+    position: absolute;
+  }
+
+  .label.resting {
+    position: absolute;
+    top: var(--_top-space);
+  }
+
+  .label.floating {
+    font-size: var(--_label-text-populated-size);
+    line-height: var(--_label-text-populated-line-height);
+    transform-origin: top left;
+  }
+
+  .label.hidden {
+    opacity: 0;
+  }
+
+  .no-label .label {
+    display: none;
+  }
+
+  // Labels need start/end padding when there isn't start/end content so they
+  // don't sit on the edge of the field. We use a wrapper element around the
+  // labels so as not to affect the dimensions used in the label keyframes.
+  .label-wrapper {
+    inset: 0;
+    position: absolute;
+    // Don't let setting text-align on the field change the label's alignment.
+    // It should only impact content text.
+    text-align: initial;
+  }
+
+  :hover .label {
+    color: var(--_hover-label-text-color);
+  }
+
+  .focused .label {
+    color: var(--_focus-label-text-color);
+  }
+
+  .disabled .label {
+    color: var(--_disabled-label-text-color);
+  }
+
+  .disabled .label:not(.hidden) {
+    opacity: var(--_disabled-label-text-opacity);
+  }
+
+  .error .label {
+    color: var(--_error-label-text-color);
+  }
+
+  .error:hover .label {
+    color: var(--_error-hover-label-text-color);
+  }
+
+  .error.focused .label {
+    color: var(--_error-focus-label-text-color);
+  }
+}