Sha256: e6e12a4d3760006b973a194839b93a15b7cd910a068b203ca7030ff5db0b5eb5
Contents?: true
Size: 1.74 KB
Versions: 17
Compression:
Stored size: 1.74 KB
Contents
@layer components {
[data-coco][data-component="modal"] {
@apply fixed inset-0 z-[10000] overflow-y-auto scroll-smooth;
.modal-overlay {
@apply fixed inset-0 bg-black bg-opacity-60;
}
.modal-container {
@apply relative flex justify-center items-center z-[10000] p-2 sm:p-8;
min-height: var(--app-height);
}
.modal-content {
@apply contents;
}
/* transitions */
.modal-overlay {
&.overlay-enter {
@apply ease-out duration-200;
}
&.overlay-enter-start {
@apply opacity-0;
}
&.overlay-enter-end {
@apply opacity-100;
}
&.overlay-leave {
@apply ease-in duration-150;
}
&.overlay-leave-start {
@apply opacity-100;
}
&.overlay-leave-end {
@apply opacity-0;
}
}
.modal-container {
&.container-enter {
@apply ease-out duration-[400ms];
}
&.container-enter-start {
@apply opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95;
}
&.container-enter-end {
@apply opacity-100 translate-y-0 sm:scale-100;
}
&.container-leave {
@apply ease-in duration-150;
}
&.container-leave-start {
@apply opacity-100 translate-y-0 sm:scale-100;
}
&.container-leave-end {
@apply opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95;
}
}
}
.modal-frame {
@apply contents;
}
/*
Limit the size of modal content when rendered in the
host page rather than displayed as a modal.
*/
[data-role="inline-modal-content"] {
@apply max-w-2xl mx-auto;
[data-component="modal-dialog"] {
@apply border border-coco-gray-300 shadow-md rounded-xl;
}
}
}
Version data entries
17 entries across 17 versions & 1 rubygems