style: adds outline offset to make focus state more accessible and clear

Relates #119
enBloc-org · Nov 12, 2024 · bd0a745 · bd0a745
1 parent af2657d
commit bd0a745
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/src/components/globals.css b/src/components/globals.css
@@ -68,6 +68,11 @@ button:disabled {
   cursor: not-allowed;
 }
 
+button:focus {
+  outline-offset: 4px;
+  transition: none;
+}
+
 /*------------------------------------*\
   Components
 \*------------------------------------*/

diff --git a/src/components/popup-components/PopupInfo/PopupInfo.css b/src/components/popup-components/PopupInfo/PopupInfo.css
@@ -12,6 +12,11 @@ button {
   font-size: inherit;
 }
 
+button:focus {
+  outline-offset: 4px;
+  transition: none;
+}
+
 .info-panel__inactive {
   display: none;
   transform: translateX(200%);