define focus ring style in buttn.css

sul-dlss · Sep 3, 2024 · 5808cf3 · 5808cf3
1 parent 979aa30
commit 5808cf3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/styles/accessibility.css b/styles/accessibility.css
@@ -1,4 +1,5 @@
-.nav-link:focus-visible, :focus-visible, .btn:focus-visible {
+.nav-link:focus-visible, /* we need the class to override bootstrap's defaults */
+:focus-visible {
   outline: 2px solid white; /* Outer color */
   box-shadow: 0 0 0 4px var(--stanford-black); /* Inner color */
 }
diff --git a/styles/button.css b/styles/button.css
@@ -6,6 +6,7 @@
   --bs-btn-disabled-opacity: 1;
   --bs-btn-padding-y: 0.25rem;
   --bs-btn-padding-x: 0.5rem;
+  --bs-btn-focus-box-shadow: white;
 }
 
 .btn:hover {
@@ -55,3 +56,8 @@
   --bs-btn-active-bg: white;
   --bs-btn-bg: white;
 }
+
+.btn:focus-visible {
+  outline: 2px solid var(--bs-btn-focus-box-shadow); /* Outer color */
+  box-shadow: 0 0 0 4px var(--stanford-black); /* Inner color */
+}