Modal Sizes - sm, md, lg, xlg, and fs

[Yohn]

I got a scss styles created to add a class to the <dialog> tag to have a small, medium, large, x-large, and fullscreen modals I'll add in a future version of pico, but wanted to share here for now.

Codepen

// Modal width variations
// Usage: Add these classes to your dialog element
// Example: <dialog class="modal-lg">

dialog {
	// Small modal
	&.modal-sm {
		> article {
			width: 90vw;
			max-width: 400px;
		}
	}

	// Medium modal
	&.modal-md {
		> article {
			width: 90vw;
			max-width: 600px;
		}
	}

	// Large modal
	&.modal-lg {
		> article {
			width: 90vw;
			max-width: 800px;
		}
	}

	// Extra large modal
	&.modal-xlg {
		> article {
			width: 95vw;
			max-width: 1000px;
		}
	}

	// Fullscreen modal
	&.modal-fs {
		padding: 0;
		> article {
			width: 100vw;
			max-width: 100vw;
			height: 100vh;
			max-height: 100vh;
			//border-radius: 0;
			margin: 0;
			//padding: var(--spacing);
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			> footer {
				margin-top: auto;
				display: flex;
				justify-content: flex-end;
			}
		}
	}

	// Handle mobile responsiveness
	@media (max-width: 576px) {
		&:not(.modal-fs) {
			> article {
				width: 95vw;
			}
		}
	}
}

[Yohn]

This has been added to 2.2.3