@vaadin/vaadin-lumo-styles
Version:
Lumo is a design system foundation for modern web applications, used by Vaadin components
64 lines (54 loc) • 1.75 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_mixins_menu-overlay-ext {
/* Small viewport (bottom sheet) styles */
/* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
@media (max-width: 450px), (max-height: 450px) {
:host {
inset: 0 0 var(--vaadin-overlay-viewport-bottom, 0) 0 ;
align-items: stretch ;
justify-content: flex-end ;
}
[part='overlay'] {
max-height: 50vh;
width: 100vw;
border-radius: 0;
box-shadow: var(--lumo-box-shadow-xl);
}
/* The content part scrolls instead of the overlay part, because of the gradient fade-out */
[part='content'] {
padding: 30px var(--lumo-space-m);
max-height: inherit;
box-sizing: border-box;
overflow: auto;
mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
[part='backdrop'] {
display: block;
}
/* Animations */
:host([opening]) [part='overlay'] {
animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
:host([closing]),
:host([closing]) [part='backdrop'] {
animation-delay: 0.14s;
}
:host([closing]) [part='overlay'] {
animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}
}
@keyframes lumo-mobile-menu-overlay-enter {
0% {
transform: translateY(150%);
}
}
@keyframes lumo-mobile-menu-overlay-exit {
100% {
transform: translateY(150%);
}
}
}