From 8fbe7b3547ab05e2de7ea94f091843bad9dfa60b Mon Sep 17 00:00:00 2001
From: Thomas L'huillier <lhuillier.tom@gmail.com>
Date: Sun, 5 May 2019 01:28:06 +0200
Subject: [PATCH] Rework focus and selection styles

---
 src/components/app-menu.vue     | 3 +++
 src/components/base-select.vue  | 6 ++++++
 src/sass/abstracts/_mixins.scss | 4 +---
 src/sass/main.scss              | 8 ++++++++
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/app-menu.vue b/src/components/app-menu.vue
index b201e4a..5d9d9e4 100644
--- a/src/components/app-menu.vue
+++ b/src/components/app-menu.vue
@@ -150,6 +150,9 @@ $height: 1.75rem;
     }
 
     &:focus {
+      box-shadow: none;
+      background-color: $soft-white;
+
       &:after {
         @include outline-chrome;
         background-color: $gray-light;
diff --git a/src/components/base-select.vue b/src/components/base-select.vue
index b42080b..dfc5baf 100644
--- a/src/components/base-select.vue
+++ b/src/components/base-select.vue
@@ -170,6 +170,7 @@ export default {
   position: absolute;
   left: 0;
   right: 0;
+  margin-top: 1px;
   box-shadow: $shadow;
   z-index: 1;
 
@@ -190,6 +191,11 @@ export default {
       color: $soft-white;
       background-color: $gray-light;
     }
+
+    &:focus {
+      z-index: 1;
+      position: relative;
+    }
   }
 }
 </style>
diff --git a/src/sass/abstracts/_mixins.scss b/src/sass/abstracts/_mixins.scss
index 5349186..8717c43 100644
--- a/src/sass/abstracts/_mixins.scss
+++ b/src/sass/abstracts/_mixins.scss
@@ -1,7 +1,5 @@
 // Mimick default chrome outline on focus
 @mixin outline-chrome {
   outline: none;
-  border: 1px solid #4d90fe;
-  -webkit-box-shadow: 0px 0px 5px #4d90fe;
-  box-shadow: 0px 0px 5px #4d90fe;
+  box-shadow: 0 0 0 1px $color-brand, 0 0 5px $color-brand;
 }
diff --git a/src/sass/main.scss b/src/sass/main.scss
index deb7bfb..d76309a 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -10,6 +10,14 @@ body {
   line-height: $line-height-base;
 }
 
+:focus {
+  @include outline-chrome;
+}
+
+::selection {
+  background-color: rgba($color-brand, 0.75);
+}
+
 // Utilities
 .ml-auto {
   margin-left: auto !important;