TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-27 11:41:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

add dark-mode in BaseInput (#1169)

Browse Source
This commit is contained in:
varshapun
2023-03-28 12:58:11 +05:30
committed by GitHub
parent fb9fab641d
commit 1aceb2c672
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resources/scripts/components/base/BaseInput.vue
View File

@ -65,6 +65,7 @@
rounded-l-md rounded-l-md
bg-gray-50 bg-gray-50
sm:text-sm sm:text-sm
dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
" "
> >
{{ addon }} {{ addon }}
@ -82,7 +83,7 @@
pointer-events-none pointer-events-none
" "
> >
<span class="text-gray-500 sm:text-sm"> <span class="text-gray-500 dark:text-white sm:text-sm ">
{{ inlineAddon }} {{ inlineAddon }}
</span> </span>
</div> </div>
@ -199,7 +200,7 @@ const props = defineProps({
defaultInputClass: { defaultInputClass: {
type: String, type: String,
default: default:
'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black', 'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500',
}, },
iconLeftClass: { iconLeftClass: {
type: String, type: String,
@ -250,7 +251,8 @@ const inputAddonClass = computed(() => {
const inputInvalidClass = computed(() => { const inputInvalidClass = computed(() => {
if (props.invalid) { if (props.invalid) {
return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500' return 'border-red-500 dark:border-red-500 ring-red-500 dark:ring-red-500 focus:ring-red-500 dark:focus:ring-red-500 focus:border-red-500 dark:focus:border-red-500 '
} }
return 'focus:ring-primary-400 focus:border-primary-400' return 'focus:ring-primary-400 focus:border-primary-400'
@ -258,7 +260,7 @@ const inputInvalidClass = computed(() => {
const inputDisabledClass = computed(() => { const inputDisabledClass = computed(() => {
if (props.disabled) { if (props.disabled) {
return `border-gray-100 bg-gray-100 !text-gray-400 ring-gray-200 focus:ring-gray-200 focus:border-gray-100` return `border-gray-100 bg-gray-100 !text-gray-400 dark:!text-gray-200 ring-gray-200 focus:ring-gray-200 focus:border-gray-100 dark:opacity-25 `
} }
return '' return ''