fix disabled input dark mode (#622)
Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
parent
9bd069f3e6
commit
5870c447d5
|
|
@ -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,
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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) {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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])"
|
||||||
|
|
|
||||||
|
|
@ -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'
|
||||||
]"
|
]"
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue