defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add hover styles for primary background color and text color

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-04 21:31:50 +07:00
parent 297288e9ff
commit 28edf33aff
2 changed files with 52 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/css/style.css
View File

@ -4345,6 +4345,11 @@ body {
background-color: rgb(255 255 0 / var(--tw-bg-opacity)); background-color: rgb(255 255 0 / var(--tw-bg-opacity));
} }
.hover\:bg-primary-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(3 91 113 / var(--tw-bg-opacity));
}
.hover\:bg-opacity-10:hover { .hover\:bg-opacity-10:hover {
--tw-bg-opacity: 0.1; --tw-bg-opacity: 0.1;
} }
@ -4374,6 +4379,11 @@ body {
color: rgb(2 73 90 / var(--tw-text-opacity)); color: rgb(2 73 90 / var(--tw-text-opacity));
} }
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:opacity-80:hover { .hover\:opacity-80:hover {
opacity: 0.8; opacity: 0.8;
} }

82
src/components/CommandPalettes.vue
View File

@ -80,48 +80,50 @@
<ul class="text-sm text-gray-700"> <ul class="text-sm text-gray-700">
<ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus" <ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
:key="menu.path" v-slot="{ active }"> :key="menu.path" v-slot="{ active }">
<li @click="command.openMenu(menu)" <li @click="command.openMenu(menu)" class="group">
:class="['flex flex-row cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-primary-500 text-white']"> <div class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none lex group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
<component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]" <component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]"
alt="icon" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/keluhan/')" <component v-else-if="menu.path.includes('/keluhan/')"
:is="navigationIcon[1]" alt="icon" :is="navigationIcon[1]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/monalisa/')" <component v-else-if="menu.path.includes('/monalisa/')"
:is="navigationIcon[2]" alt="icon" :is="navigationIcon[2]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/check-in-out/')" <component v-else-if="menu.path.includes('/check-in-out/')"
:is="navigationIcon[3]" alt="icon" :is="navigationIcon[3]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/anomali-pengaduan/')" <component v-else-if="menu.path.includes('/anomali-pengaduan/')"
:is="navigationIcon[4]" alt="icon" :is="navigationIcon[4]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/ctt-kwh-periksa/')" <component v-else-if="menu.path.includes('/ctt-kwh-periksa/')"
:is="navigationIcon[5]" alt="icon" :is="navigationIcon[5]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/material/')" <component v-else-if="menu.path.includes('/material/')"
:is="navigationIcon[6]" alt="icon" :is="navigationIcon[6]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else-if="menu.path.includes('/transaksi/')" <component v-else-if="menu.path.includes('/transaksi/')"
:is="navigationIcon[7]" alt="icon" :is="navigationIcon[7]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<component v-else :is="navigationIcon[8]" alt="icon" <component v-else :is="navigationIcon[8]" alt="icon"
:class="['h-6 w-6 flex-none', active ? 'fill-white' : 'fill-gray-600']" /> :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
<div class="flex flex-col flex-1 ml-3 space-y-1"> <div class="flex flex-col flex-1 ml-3 space-y-1">
<span <span
:class="[active ? 'text-white' : 'text-gray-800', 'text-sm font-medium line-clamp-1']"> class="w-full text-sm font-medium text-gray-800 text-start group-hover:text-white line-clamp-1">
{{ menu.name }} {{ menu.name }}
</span> </span>
<span <span
:class="[active ? 'text-white' : 'text-gray-500', 'text-xs line-clamp-1']"> class="w-full text-xs text-gray-500 text-start group-hover:text-white line-clamp-1">
{{ menu.path.replace('/home/', '') }} {{ menu.path.replace('/home/', '') }}
</span>
</div>
<span class="hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white">
Buka
</span> </span>
</div> </div>
<span v-if="active" class="flex-none ml-3 text-gray-200">
Buka
</span>
</li> </li>
</ComboboxOption> </ComboboxOption>
@ -146,7 +148,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, watch } from 'vue' import { computed, ref } from 'vue'
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid' import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
import { import {
Combobox, Combobox,