@vaadin/vaadin-lumo-styles
Version:
Lumo is a design system foundation for modern web applications, used by Vaadin components
62 lines (52 loc) • 1.94 kB
CSS
/**
* @license
* Copyright (c) 2017 - 2026 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
@media lumo_components_context-menu-overlay {
:host {
align-items: flex-start;
justify-content: flex-start;
--_default-offset: var(--lumo-space-xs);
/* TODO These style overrides should not be needed.
We should instead offer a way to have non-selectable items inside the context menu. */
--_lumo-list-box-item-selected-icon-display: none;
--_lumo-list-box-item-padding-left: calc(var(--lumo-space-m) + var(--lumo-border-radius-m) / 4);
}
:host([right-aligned]),
:host([end-aligned]) {
align-items: flex-end;
}
:host([bottom-aligned]) {
justify-content: flex-end;
}
[part='overlay'] {
outline: none;
}
:host([phone]) {
inset: 0 0 var(--vaadin-overlay-viewport-bottom, 0) 0 ;
align-items: stretch;
justify-content: flex-end;
}
@media (forced-colors: active) {
[part='overlay'] {
outline: 3px solid ;
}
}
:host([position^='top'][top-aligned]) [part='overlay'],
:host([position^='bottom'][top-aligned]) [part='overlay'] {
margin-top: var(--vaadin-context-menu-offset-top, var(--_default-offset));
}
:host([position^='top'][bottom-aligned]) [part='overlay'],
:host([position^='bottom'][bottom-aligned]) [part='overlay'] {
margin-bottom: var(--vaadin-context-menu-offset-bottom, var(--_default-offset));
}
:host([position^='start'][start-aligned]) [part='overlay'],
:host([position^='end'][start-aligned]) [part='overlay'] {
margin-inline-start: var(--vaadin-context-menu-offset-start, var(--_default-offset));
}
:host([position^='start'][end-aligned]) [part='overlay'],
:host([position^='end'][end-aligned]) [part='overlay'] {
margin-inline-end: var(--vaadin-context-menu-offset-end, var(--_default-offset));
}
}