Make checked switch button focus state visible

elixir-lang · Aug 22, 2023 · 67af3be · 67af3be
1 parent 32bb4ff
commit 67af3be
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/assets/css/settings.css b/assets/css/settings.css
@@ -92,6 +92,19 @@
   background-color: var(--main);
 }
 
+#settings-modal-content .switch-button__checkbox:focus {
+  outline: 0;
+}
+
+#settings-modal-content .switch-button__checkbox:focus + .switch-button__bg {
+  outline: 2px solid var(--main);
+  outline-offset: 2px;
+}
+
+#settings-modal-content .switch-button__checkbox:focus:not(:focus-visible) + .switch-button__bg {
+  outline: 0;
+}
+
 #settings-modal-content .settings-select {
   cursor: pointer;
   position: relative;