mytril/dist/styles/dialog.css

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

.myt-dialog {
	border: 0;
	padding: 0;
	margin: auto;
	width: 100%;
	max-width: none;
	background-color: transparent;
	color: inherit;
}

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

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

.myt-dialog .myt-dialog-container {
	--c: var(--myt-dialog-c);
	--bg: var(--myt-dialog-bg);

	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-dialog.myt-dialog--fullscreen {
	height: 100%;
	max-height: 100%;
}

.myt-dialog.myt-dialog--fullscreen .myt-dialog-container {
	height: 100%;
}

.myt-dialog.myt-dialog--fullscreen .myt-dialog-container > * {
	height: 100%;
	max-height: 100%;
	border-radius: 0;
}

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

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

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

/* @breakpoints */
.myt-dialog[breakpoint]myt-dialog--bottom {
	margin-bottom: 0;
	margin-top: auto;
}

.myt-dialog[breakpoint]myt-dialog--top {
	margin-top: 0;
	margin-bottom: auto;
}

.myt-dialog[breakpoint]myt-dialog--center {
	margin: auto;
}

.myt-dialog[breakpoint]myt-dialog--size-x-small {
	max-width: var(--myt-dialog-size-x-small);
}

.myt-dialog[breakpoint]myt-dialog--size-small {
	max-width: var(--myt-dialog-size-small);
}

.myt-dialog[breakpoint]myt-dialog--size-default {
	max-width: var(--myt-dialog-size-default);
}

.myt-dialog[breakpoint]myt-dialog--size-large {
	max-width: var(--myt-dialog-size-large);
}

.myt-dialog[breakpoint]myt-dialog--size-x-large {
	max-width: var(--myt-dialog-size-x-large);
}
/*! @breakpoints */