vuetify
Version:
Vue Material Component Framework
44 lines • 1.37 kB
CSS
@layer vuetify-final.transitions {
.bottom-sheet-transition-enter-from {
transform: translateY(100%);
}
.bottom-sheet-transition-leave-to {
transform: translateY(100%);
}
}
@layer vuetify-components {
.v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content {
align-self: flex-end;
border-radius: 0;
flex: 0 1 auto;
left: 0;
right: 0;
margin-inline: auto;
margin-bottom: 0;
transition-duration: 0.2s;
width: 100%;
max-width: 100%;
overflow: visible;
}
.v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content {
box-shadow: 0px 2px 3px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 6px 10px 4px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content {
transition: none;
}
}
.v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content > .v-card,
.v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content > .v-sheet {
border-radius: 0;
}
.v-bottom-sheet.v-bottom-sheet--inset {
max-width: none;
}
@media (min-width: 600px) {
.v-bottom-sheet.v-bottom-sheet--inset {
max-width: 70%;
}
}
}