From 6a4c30de0e2ff82b8df1fc8ab4172ef63bd25566 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Fri, 3 Apr 2020 12:30:52 +0200
Subject: Put box-shadow for input focus in variables, apply form-control to
 p-multiselect

---
 client/src/sass/include/_miniature.scss | 3 ++-
 client/src/sass/include/_mixins.scss    | 6 +++---
 client/src/sass/include/_variables.scss | 2 ++
 3 files changed, 7 insertions(+), 4 deletions(-)

(limited to 'client/src/sass/include')

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index c1d1b3c59..5e591cf45 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -80,7 +80,8 @@ $play-overlay-width: 18px;
   }
 
   &.focus-visible {
-    box-shadow: 0 0 0 2px var(--mainColor);
+    box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+    outline: none;
   }
 
   img {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index d414704e9..56ada6b9e 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -83,7 +83,7 @@
 @mixin button-focus($color) {
   &:focus,
   &.focus-visible {
-    box-shadow: 0 0 0 .2rem $color;
+    box-shadow: #{$focus-box-shadow-form} $color;
   }
 }
 
@@ -372,7 +372,7 @@
   position: absolute;
 
   &:focus + span {
-    box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+    box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
   }
 
   & + span {
@@ -721,7 +721,7 @@
       height: max-content;
 
       &:focus-within {
-        box-shadow: 0 0 0 .2rem var(--mainColorLightest);
+        box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
       }
     }
 
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d0f1a3630..f60d8ce94 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -72,6 +72,8 @@ $sub-menu-margin-bottom: 30px;
 
 $activated-action-button-color: black;
 
+$focus-box-shadow-form: 0 0 0 .2rem;
+
 /*** map theme ***/
 
 // pass variables into a sass map,
-- 
cgit v1.2.3