Skip to content

Commit

Permalink
Merge pull request #96 from Siumauricio/95-file-input-not-display-pro…
Browse files Browse the repository at this point in the history
…perly-on-different-browsers

fix(file-input): add support for firefox and add rounded to button on…
  • Loading branch information
Siumauricio authored Apr 23, 2023
2 parents 45e465e + 14a3262 commit 078b8f4
Showing 1 changed file with 25 additions and 2 deletions.
27 changes: 25 additions & 2 deletions components/inputs/input-file.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
.input-file {
@apply h-10 w-full max-w-xs appearance-none rounded-xl border-2 border-gray-6 bg-gray-1 pr-3 text-base text-content1 focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-gray-6;
@apply h-10 w-full max-w-xs appearance-none overflow-hidden rounded-xl border-2 border-gray-6 bg-gray-1 pr-3 text-base text-content1 focus:outline-2 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-gray-6;
}

.input-file::-webkit-file-upload-button {
.input-file::-webkit-file-upload-button,
.input-file::file-selector-button {
@apply mr-4 inline-flex h-full cursor-pointer select-none items-center justify-center border-none bg-gray-3 px-5 text-center text-sm font-medium text-content1;
}

Expand Down Expand Up @@ -89,3 +90,25 @@
.input-file:disabled {
@apply pointer-events-none select-none opacity-50;
}

/* Firefox */

.input-file-primary::file-selector-button {
@apply bg-primary text-white focus-visible:outline-primary;
}

.input-file-secondary::file-selector-button {
@apply bg-secondary text-white focus-visible:outline-secondary;
}

.input-file-success::file-selector-button {
@apply bg-success text-black focus-visible:outline-success;
}

.input-file-error::file-selector-button {
@apply bg-error text-white focus-visible:outline-error;
}

.input-file-warning::file-selector-button {
@apply bg-warning text-black focus-visible:outline-warning;
}

1 comment on commit 078b8f4

@vercel
Copy link

@vercel vercel bot commented on 078b8f4 Apr 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.