fadgram-ui/components/forms.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 {
  .form-label {
    @apply block text-sm font-medium cursor-pointer mb-2 text-gray-900;

    @variant dark {
      @apply text-white;
    }

    &.success {
      @apply text-green-700;

      @variant dark {
        @apply text-green-500;
      }
    }

    &.error {
      @apply text-red-700;

      @variant dark {
        @apply text-red-500;
      }
    }
  }

  .form-info {
    @apply block text-xs font-light my-1.5 text-gray-600;

    @variant dark {
      @apply text-gray-400;
    }

    &.success {
      @apply text-green-700;

      @variant dark {
        @apply text-green-500;
      }
    }

    &.error {
      @apply text-red-700;

      @variant dark {
        @apply text-red-500;
      }
    }
  }

  .form-control-container {
    @apply relative;
  }

  .form-control,
  .form-select {
    @apply block w-full;
    @apply text-sm p-2 leading-6 appearance-none;
    @apply border border-gray-300 dark:border-gray-600;
    @apply rounded-lg;
    @apply bg-gray-50 dark:bg-gray-700;
    @apply text-gray-900 dark:text-white;

    &::placeholder {
      @apply text-gray-400;
    }

    &:disabled {
      @apply opacity-60 cursor-not-allowed;
    }

    &:focus {
      @apply outline-hidden border-primary ring-3 ring-primary/50 dark:ring-primary/30;
    }

    &.success {
      @apply border-green-700 bg-green-100 text-green-700 ring-green-300;

      &::placeholder {
        @apply text-green-500;
      }

      &:focus {
        @apply border-green-700 ring-green-300;
      }

      @variant dark {
        @apply border-green-500 text-green-500;

        &:focus {
          @apply ring-green-300 border-green-500;
        }
      }
    }

    &.error {
      @apply border-red-700 bg-red-100 text-red-700 ring-red-300;

      &::placeholder {
        @apply text-red-500;
      }

      &:focus {
        @apply border-red-700 ring-red-300;
      }

      @variant dark {
        @apply border-red-500 text-red-500;

        &:focus {
          @apply ring-red-300 border-red-500;
        }
      }
    }

    &.xs {
      @apply text-xs px-2 py-0.5;
    }

    &.sm {
      @apply text-xs px-3 py-1;
      @apply leading-none;
      @apply h-[36px];
    }

    &.lg {
      @apply text-base px-5 py-2;
    }

    &.xl {
      @apply text-lg px-6 py-3;
    }

    &.xxl {
      @apply text-xl px-8 py-4;
    }

    &.has-start-icon {
      @apply ps-8;
    }

    &.has-end-icon {
      @apply pe-8;
    }
  }

  .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%2333343d' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    padding-inline-end: 2rem;
    background-size: 1em;

    @variant rtl {
      background-position: left 0.5em center;
    }

    @variant dark {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ffffff' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/%3e%3c/svg%3e");
    }
  }

  .start-icon,
  .end-icon {
    @apply flex items-center absolute inset-y-0 px-2.5;
    @apply text-gray-600 dark:text-gray-300;
  }

  .start-icon {
    @apply start-0 rounded-s;
  }

  .end-icon {
    @apply end-0 rounded-e;
  }

  .btn-password-toggle {
    @apply cursor-pointer text-gray-600 dark:text-white focus:outline-none;
  }

  .form-check,
  .form-switch,
  .form-radio {
    @apply flex items-center gap-2 w-full;

    &.disabled,
    &:disabled {
      @apply opacity-60 cursor-not-allowed;
    }

    .form-label,
    .form-check-label,
    .form-switch-label {
      @apply block text-sm font-medium cursor-pointer mb-0;
    }

    input[type="checkbox"],
    input[type="radio"] {
      @apply w-4 h-4;
      @apply border border-gray-300 rounded;
      @apply bg-gray-100;
      @apply accent-primary;

      &:focus {
        @apply ring ring-primary/50;
      }

      @variant dark {
        @apply bg-gray-700 border-gray-600;
        @apply ring-offset-gray-800;

        &:focus {
          @apply ring-primary/30;
          @apply ring-offset-gray-800;
        }
      }
    }

    &.success {
      .form-label,
      .form-check-label,
      .form-switch-label {
        @apply text-green-700;

        @variant dark {
          @apply text-green-500;
        }
      }

      input[type="checkbox"],
      input[type="radio"] {
        @apply text-green-600;
        @apply border-green-600;
        @apply bg-green-100;
        @apply accent-green;
        @apply ring-3 ring-green/30;

        &:focus {
          @apply ring ring-green-300/50;
        }

        @variant dark {
          @apply text-green-500;
          @apply border-green-500;
          @apply bg-green-100;
          @apply accent-green-500;

          &:focus {
            @apply ring-green/30;
            @apply ring-offset-green-800;
          }
        }
      }
    }

    &.error {
      .form-label,
      .form-check-label,
      .form-switch-label {
        @apply text-red-700;

        @variant dark {
          @apply text-red-500;
        }
      }

      input[type="checkbox"],
      input[type="radio"] {
        @apply text-red-600;
        @apply border-red-600;
        @apply bg-red-100;
        @apply accent-red;
        @apply ring-3 ring-red/30;

        &:focus {
          @apply ring ring-red-300/50;
        }

        @variant dark {
          @apply text-red-500;
          @apply border-red-500;
          @apply bg-red-100;
          @apply accent-red-500;

          &:focus {
            @apply ring-red/30;
            @apply ring-red-800;
          }
        }
      }
    }
  }

  .form-switch {
    @apply inline-flex items-center;

    .form-switch-label {
      @apply block text-sm font-medium cursor-pointer mb-0 text-gray-900;

      @variant dark {
        @apply text-white;
      }

      &.success {
        @apply text-green-700;

        @variant dark {
          @apply text-green-500;
        }
      }

      &.error {
        @apply text-red-700;

        @variant dark {
          @apply text-red-500;
        }
      }
    }

    .toggle-slider {
      @apply relative w-11 h-6;
      @apply bg-gray-300;
      @apply rounded-full;

      @variant dark {
        @apply bg-gray-700;
      }

      &:before {
        @apply content-[""];
        @apply w-5 h-5;
        @apply absolute top-[2px] start-[2px];
        @apply bg-white;
        @apply border border-gray-300 rounded-full;
        @apply transition-all;
      }
    }

    input {
      @apply w-0 h-0 hidden;

      &:focus + .toggle-slider {
        @apply outline-hidden;
        @apply ring-4 ring-primary/30 dark:ring-primary/80;
      }

      &:checked + .toggle-slider {
        @apply bg-primary;

        &:before {
          @apply translate-x-full border-white;
        }
      }

      @variant rtl {
        &:checked + .toggle-slider {
          &:before {
            @apply -translate-x-full;
          }
        }
      }
    }

    &.success {
      .toggle-slider {
        @apply ring-3 ring-green/50 dark:ring-green/30;
      }

      .form-switch-label {
        @apply text-green-700 dark:text-green-500;
      }
    }

    &.error {
      .toggle-slider {
        @apply ring-3 ring-red/50 dark:ring-red/30;
      }

      .form-switch-label {
        @apply text-red-700 dark:text-red-500;
      }
    }
    .rich-select-menu {
      @apply absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto focus:outline-none p-0 list-none;
      @apply text-sm;
    }
    .rich-select-item {
      @apply px-3 py-2 cursor-pointer flex-space-2 justify-between hover:bg-primary-100;
      &.active {
        @apply bg-primary dark:bg-primary-500 hover:bg-primary dark:hover:bg-primary text-white;
      }
    }
  }

  .iti {
    display: block !important;
  }
}