From 14a3262d1ec44b3e57b4cf6d3c4d4c7b457c0c20 Mon Sep 17 00:00:00 2001 From: Mauricio Siu Date: Sun, 23 Apr 2023 01:47:26 -0600 Subject: [PATCH] fix(file-input): add support for firefox and add rounded to button on safari (#95) --- components/inputs/input-file.css | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/components/inputs/input-file.css b/components/inputs/input-file.css index 69ff01e..500bd8a 100644 --- a/components/inputs/input-file.css +++ b/components/inputs/input-file.css @@ -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; } @@ -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; +}