From 771245f7bbd86a360316db19474cda29fcc62bd6 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 18 Oct 2023 01:20:10 +0300
Subject: [PATCH] Adjust focus-visible

---
 assets/styles/layout/_config.scss |  3 ++-
 layouts/AppConfigurator.vue       | 26 +++++++++++++-------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/assets/styles/layout/_config.scss b/assets/styles/layout/_config.scss
index 5b6630729..87ed2e244 100644
--- a/assets/styles/layout/_config.scss
+++ b/assets/styles/layout/_config.scss
@@ -19,8 +19,9 @@
     }
 
     button {
-        &:focus {
+        &:focus-visible {
             outline: 0 none;
+            border-color: var(--surface-500) !important;
         }
     }
 
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 906e2397c..dc6d6fa1f 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -34,28 +34,28 @@
                 </div>
                 <div class="flex align-items-center justify-content-between gap-3">
                     <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"
                         @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>
                     </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"
                         @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>
                     </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"
                         @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>
                     </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"
                         @click="changeTheme('lara', 'purple')"
                     >
@@ -74,14 +74,14 @@
                 </div>
                 <div class="flex align-items-center justify-content-between gap-3">
                     <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"
                         @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>
                     </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"
                         @click="changeTheme('md', 'deeppurple')"
                     >
@@ -98,14 +98,14 @@
                 </div>
                 <div class="flex align-items-center justify-content-between gap-3">
                     <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"
                         @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>
                     </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"
                         @click="changeTheme('bootstrap4', 'purple')"
                     >
@@ -123,7 +123,7 @@
                             <span class="font-medium">Soho</span>
                         </div>
                         <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"
                             @click="changeTheme('soho')"
                         >
@@ -136,7 +136,7 @@
                             <span class="font-medium">Viva</span>
                         </div>
                         <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"
                             @click="changeTheme('viva')"
                         >
@@ -155,7 +155,7 @@
                             <span class="font-medium">Fluent</span>
                         </div>
                         <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"
                             @click="changeTheme('fluent-light')"
                         >
@@ -168,7 +168,7 @@
                             <span class="font-medium">Mira</span>
                         </div>
                         <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"
                             @click="changeTheme('mira')"
                         >
@@ -181,7 +181,7 @@
                             <span class="font-medium">Nano</span>
                         </div>
                         <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"
                             @click="changeTheme('nano')"
                         >