mytril/dist/styles/bottom-view.css

Mytril Svelte library component for rapidly building modern websites based on Svelte and Sveltekit

.myt-bottom-view {
	margin-bottom: 0;
	margin-top: auto;
	border: 0;
	padding: 0;
	width: 100%;
	max-width: none;
	background-color: transparent;
	color: inherit;
	transition-duration: 0.2s;
}

.myt-bottom-view[open] {
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
}

.myt-bottom-view::backdrop {
	background-color: color-mix(in oklab, var(--color-shadow) 30%, transparent);
	animation: fade 0.2s ease-out;
}
.myt-bottom-view[open]::backdrop {
	animation: fade 0.2s ease-out;
}

.myt-bottom-view .myt-bottom-view-container {
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	transition-duration: 0.2s;
}

.myt-bottom-view .close-view {
	opacity: 0;
	position: fixed;
	top: 0;
	z-index: -1;
}

.myt-bottom-view .myt-bottom-view-container > * {
	max-height: calc(100% - 3rem);
	margin: 0 auto;
}

.myt-bottom-view .myt-bottom-view-container > .myt-card {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

@keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}