fix disabled input dark mode (#622)

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala 2024-11-21 20:29:04 +05:30 committed by GitHub
parent 9bd069f3e6
commit 5870c447d5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 12 additions and 12 deletions

View File

@ -14,7 +14,7 @@
theme.CodeInput.borderRadius, theme.CodeInput.borderRadius,
{ {
'!ring-red-500 !ring-2 !border-transparent': hasError, '!ring-red-500 !ring-2 !border-transparent': hasError,
'!cursor-not-allowed !bg-gray-200': disabled, '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
}, },
]" ]"
> >

View File

@ -152,7 +152,7 @@ const updateModelValue = () => {
const inputClasses = computed(() => { const inputClasses = computed(() => {
const classes = [props.theme.DateInput.input, props.theme.DateInput.borderRadius] const classes = [props.theme.DateInput.input, props.theme.DateInput.borderRadius]
if (props.disabled) { if (props.disabled) {
classes.push('!cursor-not-allowed dark:!bg-gray-600 !bg-gray-200') classes.push('!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800')
} }
if (input.hasError.value) { if (input.hasError.value) {

View File

@ -17,7 +17,7 @@
theme.default.borderRadius, theme.default.borderRadius,
{ {
'!ring-red-500 !ring-2 !border-transparent': hasError, '!ring-red-500 !ring-2 !border-transparent': hasError,
'!cursor-not-allowed !bg-gray-200': disabled, '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
}, },
]" ]"
> >
@ -34,7 +34,7 @@
theme.FlatSelectInput.fontSize, theme.FlatSelectInput.fontSize,
theme.FlatSelectInput.option, theme.FlatSelectInput.option,
{ {
'!cursor-not-allowed !bg-gray-200': disableOptions.includes(option[optionKey]), '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disableOptions.includes(option[optionKey]),
}, },
]" ]"
@click="onSelect(option[optionKey])" @click="onSelect(option[optionKey])"

View File

@ -23,7 +23,7 @@
theme.default.fontSize, theme.default.fontSize,
{ {
'!ring-red-500 !ring-2 !border-transparent': hasError, '!ring-red-500 !ring-2 !border-transparent': hasError,
'!cursor-not-allowed dark:!bg-gray-600 !bg-gray-200': disabled, '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
}, },
'pr-12' 'pr-12'
]" ]"

View File

@ -65,7 +65,7 @@
theme.PhoneInput.borderRadius, theme.PhoneInput.borderRadius,
{ {
'!ring-red-500 !ring-2': hasError, '!ring-red-500 !ring-2': hasError,
'!cursor-not-allowed !bg-gray-200': disabled, '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
}, },
]" ]"
:placeholder="placeholder" :placeholder="placeholder"

View File

@ -9,7 +9,7 @@
:class="[ :class="[
{ {
'!ring-red-500 !ring-2 !border-transparent': hasError, '!ring-red-500 !ring-2 !border-transparent': hasError,
'!cursor-not-allowed !bg-gray-200': disabled, '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
}, },
theme.RichTextAreaInput.input, theme.RichTextAreaInput.input,
theme.RichTextAreaInput.borderRadius, theme.RichTextAreaInput.borderRadius,

View File

@ -14,7 +14,7 @@
theme.SignatureInput.borderRadius, theme.SignatureInput.borderRadius,
{ {
'!ring-red-500 !ring-2 !border-transparent': hasError, '!ring-red-500 !ring-2 !border-transparent': hasError,
'!cursor-not-allowed !bg-gray-200': disabled, '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
}, },
]" ]"
class="flex flex-wrap items-center justify-center gap-4" class="flex flex-wrap items-center justify-center gap-4"
@ -50,7 +50,7 @@
theme.SignatureInput.borderRadius, theme.SignatureInput.borderRadius,
{ {
'!ring-red-500 !ring-2 !border-transparent': hasError, '!ring-red-500 !ring-2 !border-transparent': hasError,
'!cursor-not-allowed !bg-gray-200': disabled, '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
}, },
]" ]"
height="150px" height="150px"

View File

@ -16,7 +16,7 @@
theme.default.fontSize, theme.default.fontSize,
{ {
'!ring-red-500 !ring-2 !border-transparent': hasError, '!ring-red-500 !ring-2 !border-transparent': hasError,
'!cursor-not-allowed !bg-gray-200': disabled, '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
}, },
]" ]"
class="resize-y block" class="resize-y block"

View File

@ -20,7 +20,7 @@
theme.default.fontSize, theme.default.fontSize,
{ {
'!ring-red-500 !ring-2 !border-transparent': hasError, '!ring-red-500 !ring-2 !border-transparent': hasError,
'!cursor-not-allowed !bg-gray-200': disabled, '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
}, },
]" ]"
:name="name" :name="name"

View File

@ -12,7 +12,7 @@
theme.SelectInput.borderRadius, theme.SelectInput.borderRadius,
{ {
'!ring-red-500 !ring-2 !border-transparent': hasError, '!ring-red-500 !ring-2 !border-transparent': hasError,
'!cursor-not-allowed dark:!bg-gray-600 !bg-gray-200': disabled, '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
'focus-within:ring-2 focus-within:ring-opacity-100 focus-within:border-transparent': !hasError 'focus-within:ring-2 focus-within:ring-opacity-100 focus-within:border-transparent': !hasError
}, },
inputClass inputClass