village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

V Select hover theme color (#192) 

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
formsdev 2023-09-08 21:58:10 +05:30 committed by GitHub
parent f82a8afe79
commit 61d02d4fb2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
resources/js/components/forms/components/VSelect.vue
View File

@ -57,8 +57,8 @@
<loader class="h-6 w-6 text-nt-blue mx-auto" />
</div>
<template v-if="filteredOptions.length>0">
<li v-for="item in filteredOptions" :key="item[optionKey]" role="option"
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 cursor-pointer group hover:text-white hover:bg-nt-blue focus:outline-none focus:text-white focus:bg-nt-blue"
<li v-for="item in filteredOptions" :key="item[optionKey]" role="option" :style="optionStyle"
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus:text-white focus:bg-nt-blue"
:dusk="dusk+'_option'" @click="select(item)"
>
<slot name="option" :option="item" :selected="isSelected(item)" />
@ -67,8 +67,8 @@
<p v-else-if="!loading && !(allowCreation && searchTerm)" class="w-full text-gray-500 text-center py-2">
{{ (allowCreation ? 'Type something to add an option': 'No option available') }}.
</p>
<li v-if="allowCreation && searchTerm" role="option"
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 cursor-pointer group hover:text-white hover:bg-nt-blue focus:outline-none focus:text-white focus:bg-nt-blue"
<li v-if="allowCreation && searchTerm" role="option" :style="optionStyle"
class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus:text-white focus:bg-nt-blue"
@click="createOption(searchTerm)"
>
Create <b class="px-1 bg-gray-300 rounded group-hover:text-black">{{ searchTerm }}</b>
@ -127,6 +127,11 @@ export default {
}
},
computed: {
optionStyle () {
return {
'--bg-form-color': this.color
}
},
inputStyle () {
return {
'--tw-ring-color': this.color

4
resources/sass/app.scss vendored
View File

@ -18,6 +18,10 @@ body.dark * {
@layer base {
:root {
--bg-form-color: #2563eb;
}
p, div {
@apply text-gray-900 dark:text-white;
}

3
tailwind.config.js vendored
View File

@ -68,7 +68,8 @@ module.exports = {
backgroundDark: '#272B2C',
help: '#37352f99',
helpDark: '#fff9'
}
},
'form-color': 'var(--bg-form-color)'
},
transitionProperty: {
height: 'height',