@universal-material/web
Version:
Material web components
48 lines (42 loc) • 2.12 kB
JavaScript
import { css } from 'lit';
export const styles = css `
:host {
position: relative;
display: flex;
align-items: center;
min-height: var(--u-list-item-min-height, 56px);
padding-block: var(--u-list-item-block-padding, 8px);
padding-inline: var(--u-list-item-inline-padding, 16px);
gap: var(--u-list-item-gap, 16px);
}
:host([selectable]) {
cursor: pointer;
}
slot:not([name]) {
display: block;
margin-inline-end: auto;
}
slot {
flex-shrink: 0;
}
.content {
flex: 1;
min-width: 0;
}
.headline {
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-list-item-headline-line-height, var(--u-body-l-line-height, 1.5rem));
font-size: var(--u-list-item-headline-font-size, var(--u-body-l-font-size, 1rem));
letter-spacing: var(--u-list-item-headline-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));
font-weight: var(--u-list-item-headline-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));
}
.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-list-item-supporting-text-line-height, var(--u-body-m-line-height, 1.25rem));
font-size: var(--u-list-item-supporting-text-font-size, var(--u-body-m-font-size, 0.875rem));
letter-spacing: var(--u-list-item-supporting-text-letter-spacing, var(--u-body-m-letter-spacing, 0.0178571429rem));
font-weight: var(--u-list-item-supporting-text-font-weight, var(--u-body-m-font-weight, var(--u-font-weight-regular, 400)));
color: var(--u-list-item-supporting-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
}
`;
//# sourceMappingURL=list-item.styles.js.map