@universal-material/web
Version:
Material web components
55 lines (50 loc) • 1.98 kB
JavaScript
import { css } from 'lit';
export const styles = css `
:host {
display: block;
--_menu-item-icon-size: var(--u-menu-item-icon-size, 1.5rem);
--_menu-item-padding: var(--u-menu-item-padding, 12px);
--u-focus-ring-outline-offset: -4px;
}
.container {
height: var(--u-menu-item-height, 56px);
padding-inline: var(--_menu-item-padding);
color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));
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-menu-item-label-line-height, var(--u-label-l-line-height, 1.25rem));
font-size: var(--u-menu-item-label-font-size, var(--u-label-l-font-size, 0.875rem));
letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));
font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));
}
.container:not(.leading-icon) .leading {
display: none;
}
.container:not(.trailing-icon) .trailing:has(slot[name=trailing-icon] span:empty) {
display: none;
}
.icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--_menu-item-icon-size);
height: var(--_menu-item-icon-size);
font-size: var(--_menu-item-icon-size);
color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
}
.content {
justify-content: flex-start;
gap: var(--u-menu-item-icon-margin, 12px);
}
.force-focus-ring .button,
.button:focus-visible {
border-radius: var(--u-spacing-small, 8px);
}
.label {
flex: 1;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
`;
//# sourceMappingURL=menu-item.styles.js.map