fadgram-ui/components/accordion.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

:root {
  --accordion-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-chevron-down%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1.646%204.646a.5.5%200%200%201%20.708%200L8%2010.293l5.646-5.647a.5.5%200%200%201%20.708.708l-6%206a.5.5%200%200%201-.708%200l-6-6a.5.5%200%200%201%200-.708%22/%3E%3C/svg%3E");
}

@layer components {
  .accordion {
    @apply bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg divide-y divide-gray-200 dark:divide-gray-600;
  }

  .accordion-item {
    &.active {
      .accordion-header {
        &::after {
          @apply rotate-180;
        }
      }
    }
  }

  .accordion-header {
    @apply flex items-center justify-between w-full px-3 py-2 cursor-pointer text-gray-700 dark:text-gray-100;

    &::after {
      @apply content-[""] transition-transform duration-300;
      width: 1em;
      height: 1em;
      -webkit-mask-image: var(--accordion-icon);
      mask-image: var(--accordion-icon);
      background-color: currentColor;
      display: inline-block;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
  }

  .accordion-body {
    @apply px-3 py-2 text-sm text-gray-600 dark:text-gray-200 border-t border-gray-200 dark:border-gray-600;
  }
}