@universal-material/web
Version:
Material web components
372 lines (340 loc) • 13.7 kB
JavaScript
import { css } from 'lit';
export const styles = css `
:host {
--_control-line-height: var(--u-field-control-line-height, 1.5rem);
--_label-line-height: var(--u-field-label-line-height, 1rem);
--_field-icon-size: var(--u-field-icon-size, 1.5rem);
--_field-control-padding: var(--u-field-control-padding, 16px);
--_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));
--_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));
--_field-min-height: var(--u-field-min-height, 56px);
--_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
--_disabled-color: var(--u-field-disabled-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-field-disabled-opacity, 38%), transparent));
--_disabled-bg-color: var(--u-filled-field-disabled-bg-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-filled-field-background-disabled-opacity, 12%), transparent));
--_color-primary: var(--u-color-primary, rgb(103, 80, 164));
--_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));
--_active-indicator-opacity: 1;
--_vertical-padding: var(--u-field-vertical-padding, 8px);
--_icon-size: var(--u-field-icon-size, 1.5rem);
--_icon-padding: var(--u-field-icon-padding, 12px);
--_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
--_border-width: var(--u-field-border-width, 1px);
--_border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
--_field-control-leading-padding: var(--_field-control-inline-padding);
--_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);
--_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);
--u-label-input-start: auto;
--u-label-input-span-leading-offset: 0;
--u-label-input-span-trailing-offset: 0;
--u-text-field-horizontal-padding: 12px;
display: block;
}
.container {
display: flex;
align-items: center;
position: relative;
}
.container::before, .container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
pointer-events: none;
}
.container::before {
background: var(--u-color-on-surface, rgb(29, 27, 32));
transition: opacity 150ms;
opacity: 0;
}
.container::after {
border-width: var(--_border-width);
border-color: var(--_border-color);
}
@media (hover: hover) {
:host(:not([disabled]):not([invalid]):hover) .container.filled::before {
opacity: var(--u-state-hover-opacity, 0.08);
}
:host(:not([disabled]):not([invalid]):not(:focus-within):hover) {
--_border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));
}
}
.icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--_icon-size);
color: var(--_icon-color);
font-size: var(--_icon-size);
line-height: var(--_icon-size);
}
.icon::slotted(*) {
flex-shrink: 0;
}
.leading-icon {
margin-inline-start: var(--_icon-padding);
}
.trailing-icon {
margin-inline-end: var(--_icon-padding);
}
.outline-notch-label,
.label {
font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
line-height: var(--u-field-label-line-height, var(--u-body-l-line-height, 1.5rem));
font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));
letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));
font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));
font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));
}
.label {
display: block;
position: absolute;
inset-inline-start: var(--_field-control-leading-padding);
margin-bottom: 0;
line-height: var(--_label-line-height);
color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
transition: inset 200ms, font-size 200ms;
}
.input-wrapper {
display: flex;
align-items: center;
flex: 1;
padding-block: var(--_vertical-padding);
padding-inline: var(--_field-control-inline-padding);
min-height: var(--_field-min-height);
transition: opacity 150ms;
}
.input {
color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));
flex: 1;
}
.input:focus {
outline: 0;
}
.input textarea,
.input select,
.input input,
.input ::slotted(*) {
font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
line-height: var(--u-field-control-line-height, var(--u-body-l-line-height, 1.5rem));
font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));
letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));
font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));
display: block;
width: 100%;
color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));
min-height: var(--_control-line-height);
line-height: var(--_control-line-height);
padding: 0;
margin: 0;
appearance: none;
background: transparent;
border: none;
outline: 0 !important;
caret-color: var(--_color-primary);
}
.input,
.input textarea::placeholder,
.input input::placeholder,
.input ::slotted(select),
.input ::slotted(:is(input, textarea))::placeholder {
transition: color 150ms 100ms;
}
.input textarea::placeholder,
.input input::placeholder,
.input ::slotted(:is(input, textarea))::placeholder {
color: var(--_field-placeholder-color);
}
.supporting-text {
font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
line-height: var(--u-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));
font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));
letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));
font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));
display: flex;
color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
padding-inline: 16px;
gap: 16px;
}
.supporting-text div:empty {
display: none;
}
.supporting-text div,
.supporting-text ::slotted(*) {
display: inline-block;
margin-top: 4px;
}
.error-text {
display: none;
}
.counter div, .counter::slotted(*) {
margin-inline-start: auto;
}
:host([has-leading-icon]) {
--_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;
}
:host(:not([has-leading-icon])) .leading-icon {
display: none;
}
:host(:not([has-trailing-icon])) .container:has(slot[name=trailing-icon] span:empty) .trailing-icon {
display: none;
}
:host(:focus-within) {
--_border-width: var(--u-text-field-focus-border-width, 2px);
--_border-color: var(--u-field-focused-border-color, var(--_color-primary));
}
:host(:focus-within) .label {
color: var(--u-field-label-focused-color, var(--_color-primary));
}
:host([invalid]) {
--_border-color: var(--u-field-error-border-color, var(--_color-error));
}
:host([invalid]) .label {
color: var(--u-field-label-error-color, var(--_color-error));
}
:host([invalid]) .supporting-text {
color: var(--u-field-supporting-text-error-color, var(--_color-error));
}
:host([invalid]) .trailing-icon {
color: var(--u-field-trailing-icon-error-color, var(--_color-error));
}
:host([invalid]) .leading-icon {
color: var(--u-field-leading-icon-error-color, var(--_icon-color));
}
:host([invalid]) .supporting-text:has(.error-text div:not(:empty)) .error-text,
:host([invalid][has-error-text]) .error-text {
display: contents;
}
:host([invalid]) .supporting-text:has(.error-text div:not(:empty)) slot[name=supporting-text],
:host([invalid][has-error-text]) slot[name=supporting-text] {
display: none;
}
.container.filled {
border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);
background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));
}
.container.filled::after {
border-bottom-style: solid;
}
.container.filled:not(.no-label) .input-wrapper {
padding-top: calc(var(--_vertical-padding) + var(--_label-line-height));
padding-bottom: var(--_vertical-padding);
}
.container.filled .label {
top: var(--_vertical-padding);
}
.container.filled .input ::slotted(:is(input, textarea, select, button)) {
display: block;
}
.container.outlined .label {
top: calc(var(--_label-line-height) / -2);
}
.container.outlined:focus-within .label,
:host(:not([empty])) .container.outlined .label {
inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));
}
:host([empty]) ::slotted(select) {
color: var(--_field-placeholder-color);
}
:host([empty]:not(:focus-within)) .label {
font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));
pointer-events: none;
top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);
}
:host([empty]:not(:focus-within)) .container:not(.no-label) .input-wrapper,
:host([empty]:not(:focus-within)) .container:not(.no-label) .input,
:host([empty]:not(:focus-within)) .container:not(.no-label) .input input::placeholder,
:host([empty]:not(:focus-within)) .container:not(.no-label) .input textarea::placeholder,
:host([empty]:not(:focus-within)) .container:not(.no-label) ::slotted(:is(input, textarea))::placeholder,
:host([empty]:not(:focus-within)) .container:not(.no-label) ::slotted(select) {
color: transparent;
transition: color 150ms;
}
:host([disabled]) {
--_border-color: var(--u-field-disabled-border-color, var(--_disabled-color));
}
:host([disabled]) .container .filled {
background-color: var(--u-filled-field-disabled-bg-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-filled-field-background-disabled-opacity, 4%), transparent));
}
:host([disabled]) .supporting-text {
color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));
}
:host([disabled]) .label {
color: var(--u-field-label-disabled-color, var(--_disabled-color));
}
:host([disabled]) .input,
:host([disabled]) .input select,
:host([disabled]) .input select::placeholder,
:host([disabled]) .input textarea,
:host([disabled]) .input textarea::placeholder,
:host([disabled]) .input input,
:host([disabled]) .input input::placeholder,
:host([disabled]) .input ::slotted(*),
:host([disabled]) .input ::slotted(:is(input, textarea))::placeholder {
color: var(--u-field-input-disabled-color, var(--_disabled-color));
}
:host([disabled]) .trailing-icon {
color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));
}
:host([disabled]) .leading-icon {
color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));
}
.outline {
position: absolute;
inset: 0;
display: flex;
border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));
pointer-events: none;
}
.outline-start,
.outline-end {
border: var(--_border-width) solid var(--_border-color);
border-radius: inherit;
flex-basis: var(--_outlined-label-margin);
}
.outline-start {
border-start-end-radius: 0;
border-end-end-radius: 0;
border-inline-end: none;
}
.outline-end {
flex: 1;
border-start-start-radius: 0;
border-end-start-radius: 0;
border-inline-start: none;
}
.outline-notch {
min-width: 0;
border-bottom: var(--_border-width) solid var(--_border-color);
}
.outline-notch-label {
position: relative;
color: transparent;
padding-inline: var(--_outlined-label-padding);
user-select: none;
}
.outline-notch-label::before,
.outline-notch-label::after {
content: "";
position: absolute;
border-top: var(--_border-width) solid var(--_border-color);
width: 50%;
transition: width 100ms;
}
.outline-notch-label::before {
left: 0;
}
.outline-notch-label::after {
right: 0;
}
.container:not(.no-label):focus-within .outline-notch-label::before,
.container:not(.no-label):focus-within .outline-notch-label::after,
:host(:not([empty])) .container:not(.no-label) .outline-notch-label::before,
:host(:not([empty])) .container:not(.no-label) .outline-notch-label::after {
width: 0;
}
`;
//# sourceMappingURL=field-base.styles.js.map