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"] {
    [data-component="modal-dialog"] {
      @apply max-w-2xl mx-auto;
      @apply border border-coco-gray-300 shadow-md rounded-xl;
    }
  }
}

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
coveragebook_components-0.19.8	app/components/coco/modals/modal/modal.css
coveragebook_components-0.19.7	app/components/coco/modals/modal/modal.css
coveragebook_components-0.19.6	app/components/coco/modals/modal/modal.css
coveragebook_components-0.19.5	app/components/coco/modals/modal/modal.css