fadgram-ui/css/modal.css

Fadgram UI is a Tailwind CSS plugin that provides a set of custom utility classes to enhance your web development experience. This plugin is designed to work seamlessly with Tailwind CSS, allowing you to quickly and easily style your web applications. ![F

@utility modal {
  @apply fixed hidden z-50 inset-0 pointer-events-none;

  &.fade {
    @apply opacity-0 transition-opacity duration-150 ease-linear;
  }

  &.show {
    @apply block opacity-100;
  }

  &.lg {
    .modal-dialog {
      @apply max-w-screen-lg;
    }
  }
}

@utility modal-dialog {
  max-width: calc(100% - 1.75rem * 2);
  @apply relative mx-auto md:max-w-screen-md flex items-center overflow-hidden pointer-events-none;
  height: calc(100% - 1.75rem * 2);
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

@utility modal-content {
  @apply relative flex flex-col w-full max-h-full border border-gray-200 rounded-lg shadow bg-white dark:bg-gray-800 dark:border-gray-700;
  @apply pointer-events-auto outline-0;
  background-clip: padding-box;
}

@utility modal-header {
  @apply flex items-center justify-between px-3 py-1.5 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-white border-b border-gray-200 dark:border-gray-700 rounded-t-lg;

  .btn-close {
    @apply text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white;
  }
}

@utility modal-title {
  @apply font-semibold mb-0;
}

@utility modal-body {
  @apply relative p-3 text-gray-700 dark:text-gray-300 overflow-y-auto;
  flex: 1 1 auto;
}

@utility modal-footer {
  @apply flex px-3 py-1.5 items-center space-x-2 rtl:space-x-reverse bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-white border-t border-gray-200 dark:border-gray-700 rounded-b-lg;
}

@utility modal-backdrop {
  @apply fixed top-0 left-0 right-0 bottom-0 opacity-50 bg-black z-40 hidden transition-opacity;

  &.show {
    @apply block;
  }
}