penguinui is now in the root dir in penguinui-components/
This commit is contained in:
22
penguinui-components/file-input/file-input-states.html
Normal file
22
penguinui-components/file-input/file-input-states.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!-- File input with error -->
|
||||
<div class="relative flex w-full max-w-sm flex-col gap-1 text-danger">
|
||||
<label for="fileInput" class="w-fit flex items-center gap-1 pl-0.5 text-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="size-4">
|
||||
<path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
|
||||
</svg>
|
||||
Upload File
|
||||
</label>
|
||||
<input id="fileInput" type="file" class="w-full overflow-clip rounded-radius border border-danger bg-surface-alt/50 text-sm text-danger file:mr-4 file:border-none file:bg-surface-alt file:px-4 file:py-2 file:font-medium file:text-on-surface-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:bg-surface-dark-alt/50 dark:file:bg-surface-dark-alt dark:file:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark" />
|
||||
<small class="pl-0.5">Error: Please choose a file for upload</small>
|
||||
</div>
|
||||
|
||||
<!-- File input success -->
|
||||
<div class="relative flex w-full max-w-sm flex-col gap-1 text-success">
|
||||
<label for="fileInput" class="w-fit flex items-center gap-1 pl-0.5 text-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="size-4">
|
||||
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Upload File
|
||||
</label>
|
||||
<input id="fileInput" type="file" class="w-full max-w-md overflow-clip rounded-radius border border-success bg-surface-alt/50 text-sm text-success file:mr-4 file:border-none file:bg-surface-alt file:px-4 file:py-2 file:font-medium file:text-on-surface-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:bg-surface-dark-alt/50 dark:file:bg-surface-dark-alt dark:file:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark" />
|
||||
</div>
|
||||
Reference in New Issue
Block a user