vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Adjust focus-visible

pull/4649/head
Cagatay Civici 2023-10-18 01:20:10 +03:00
parent bfc9d8fcbb
commit 771245f7bb
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/styles/layout/_config.scss
View File

@ -19,8 +19,9 @@
} }
button { button {
&:focus { &:focus-visible {
outline: 0 none; outline: 0 none;
border-color: var(--surface-500) !important;
} }
} }

26
layouts/AppConfigurator.vue
View File

@ -34,28 +34,28 @@
</div> </div>
<div class="flex align-items-center justify-content-between gap-3"> <div class="flex align-items-center justify-content-between gap-3">
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('lara', 'teal')" @click="changeTheme('lara', 'teal')"
> >
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span> <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
</button> </button>
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('lara', 'blue')" @click="changeTheme('lara', 'blue')"
> >
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span> <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span>
</button> </button>
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('lara', 'indigo')" @click="changeTheme('lara', 'indigo')"
> >
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span> <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
</button> </button>
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('lara', 'purple')" @click="changeTheme('lara', 'purple')"
> >
@ -74,14 +74,14 @@
</div> </div>
<div class="flex align-items-center justify-content-between gap-3"> <div class="flex align-items-center justify-content-between gap-3">
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('md', 'indigo')" @click="changeTheme('md', 'indigo')"
> >
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0565f2 0%, rgba(5, 101, 242, 0.5) 100%)"></span> <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #0565f2 0%, rgba(5, 101, 242, 0.5) 100%)"></span>
</button> </button>
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('md', 'deeppurple')" @click="changeTheme('md', 'deeppurple')"
> >
@ -98,14 +98,14 @@
</div> </div>
<div class="flex align-items-center justify-content-between gap-3"> <div class="flex align-items-center justify-content-between gap-3">
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('bootstrap4', 'blue')" @click="changeTheme('bootstrap4', 'blue')"
> >
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #027bff 0%, rgba(2, 123, 255, 0.5) 100%)"></span> <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #027bff 0%, rgba(2, 123, 255, 0.5) 100%)"></span>
</button> </button>
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('bootstrap4', 'purple')" @click="changeTheme('bootstrap4', 'purple')"
> >
@ -123,7 +123,7 @@
<span class="font-medium">Soho</span> <span class="font-medium">Soho</span>
</div> </div>
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('soho')" @click="changeTheme('soho')"
> >
@ -136,7 +136,7 @@
<span class="font-medium">Viva</span> <span class="font-medium">Viva</span>
</div> </div>
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('viva')" @click="changeTheme('viva')"
> >
@ -155,7 +155,7 @@
<span class="font-medium">Fluent</span> <span class="font-medium">Fluent</span>
</div> </div>
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('fluent-light')" @click="changeTheme('fluent-light')"
> >
@ -168,7 +168,7 @@
<span class="font-medium">Mira</span> <span class="font-medium">Mira</span>
</div> </div>
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('mira')" @click="changeTheme('mira')"
> >
@ -181,7 +181,7 @@
<span class="font-medium">Nano</span> <span class="font-medium">Nano</span>
</div> </div>
<button <button
class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500 focus:border-500" class="bg-transparent border-1 cursor-pointer surface-border p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200 hover:border-500"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('nano')" @click="changeTheme('nano')"
> >