From 33e6ab5535fab46debabf7f5156f0e46820bba30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <b.baedorf@openproject.com>
Date: Thu, 21 Apr 2022 11:54:23 +0200
Subject: [PATCH] Change focus style

---
 frontend/src/app/spot/styles/sass/components/button.sass   | 3 ++-
 frontend/src/app/spot/styles/sass/components/checkbox.sass | 2 +-
 .../src/app/spot/styles/sass/components/filter-chip.sass   | 3 ++-
 .../src/app/spot/styles/sass/components/text-field.sass    | 5 +++--
 frontend/src/app/spot/styles/sass/components/toggle.sass   | 2 +-
 frontend/src/app/spot/styles/sass/variables/focus.sass     | 7 ++++---
 6 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/spot/styles/sass/components/button.sass b/frontend/src/app/spot/styles/sass/components/button.sass
index c2a776a0ad..06e0725509 100644
--- a/frontend/src/app/spot/styles/sass/components/button.sass
+++ b/frontend/src/app/spot/styles/sass/components/button.sass
@@ -22,7 +22,8 @@
   &, *
     box-sizing: border-box
 
-  @include spot-focus
+  &:focus
+    @include spot-focus
 
   &:hover
     background-color: $spot-color-basic-gray-6
diff --git a/frontend/src/app/spot/styles/sass/components/checkbox.sass b/frontend/src/app/spot/styles/sass/components/checkbox.sass
index de29255898..00c6694bbc 100644
--- a/frontend/src/app/spot/styles/sass/components/checkbox.sass
+++ b/frontend/src/app/spot/styles/sass/components/checkbox.sass
@@ -6,7 +6,7 @@
   width: $spot-spacing-1_5
 
   &:focus-within &--fake
-    outline: $spot-focus
+    @include spot-focus
 
   &, *
     box-sizing: border-box
diff --git a/frontend/src/app/spot/styles/sass/components/filter-chip.sass b/frontend/src/app/spot/styles/sass/components/filter-chip.sass
index eb6114a124..c450c27801 100644
--- a/frontend/src/app/spot/styles/sass/components/filter-chip.sass
+++ b/frontend/src/app/spot/styles/sass/components/filter-chip.sass
@@ -18,7 +18,8 @@
     cursor: pointer
     padding: $spot-spacing-0_25
 
-    @include spot-focus
+    &:focus
+      @include spot-focus
 
   &--title
     padding: $spot-spacing-0_25
diff --git a/frontend/src/app/spot/styles/sass/components/text-field.sass b/frontend/src/app/spot/styles/sass/components/text-field.sass
index cfef1f0b40..f9a60296e7 100644
--- a/frontend/src/app/spot/styles/sass/components/text-field.sass
+++ b/frontend/src/app/spot/styles/sass/components/text-field.sass
@@ -16,7 +16,7 @@
   &:focus,
   &_focused
     color: $spot-color-basic-black
-    outline: $spot-focus
+    @include spot-focus
 
   &--input
     background: transparent
@@ -40,7 +40,8 @@
     font-size: $spot-spacing-0_75
     color: $spot-color-basic-gray-3
 
-    @include spot-focus
+    &:focus
+      @include spot-focus
 
     &:not(:last-child)
       margin-right: $spot-spacing-0_5
diff --git a/frontend/src/app/spot/styles/sass/components/toggle.sass b/frontend/src/app/spot/styles/sass/components/toggle.sass
index 6001a59073..00a9abad4b 100644
--- a/frontend/src/app/spot/styles/sass/components/toggle.sass
+++ b/frontend/src/app/spot/styles/sass/components/toggle.sass
@@ -20,7 +20,7 @@
     cursor: pointer
 
     &:focus-within
-      outline: $spot-focus
+      @include spot-focus
 
     &:not(:last-child)
       border-right: 0
diff --git a/frontend/src/app/spot/styles/sass/variables/focus.sass b/frontend/src/app/spot/styles/sass/variables/focus.sass
index 3cd9ac7590..1a5d59e79a 100644
--- a/frontend/src/app/spot/styles/sass/variables/focus.sass
+++ b/frontend/src/app/spot/styles/sass/variables/focus.sass
@@ -1,5 +1,6 @@
-$spot-focus: 2px solid $spot-color-indication-attention
+$spot-focus: 1px solid $spot-color-indication-attention
 
 @mixin spot-focus
-  &:focus
-    outline: $spot-focus
+  outline: $spot-focus
+  outline-offset: -1px
+  box-shadow: 0 0 1px 0 $spot-color-indication-attention