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

@layer components {
  .input-group {
    @apply relative inline-flex items-center;
    & > button,
    & > .btn {
      @apply border bg-gray-300 border-gray-300 dark:bg-gray-600 dark:border-gray-600 min-w-10;
    }
    & > .form-control,
    & > .form-select,
    & > .btn,
    & > button {
      @apply text-sm p-2 leading-6 appearance-none;
      @apply rounded-none;
      @apply -ms-[1px];

      &:first-child {
        @apply rounded-s-lg ms-0;
      }

      &:last-child {
        @apply rounded-e-lg;
      }
    }

    &.xs {
      & > .form-control,
      & > .form-select,
      & > .btn,
      & > button {
        @apply text-xs px-2 py-0.5;
      }
    }

    &.sm {
      & > .form-control,
      & > .form-select,
      & > .btn,
      & > button {
        @apply text-xs px-3 py-1;
        @apply leading-none;
        @apply h-[36px];
      }
    }

    &.lg {
      & > .form-control,
      & > .form-select,
      & > .btn,
      & > button {
        @apply text-base px-5 py-2;
      }
    }

    &.xl {
      & > .form-control,
      & > .form-select,
      & > .btn,
      & > button {
        @apply text-lg px-6 py-3;
      }
    }

    &.xxl {
      & > .form-control,
      & > .form-select,
      & > .btn,
      & > button {
        @apply text-xl px-8 py-4;
      }
    }
  }
}