Rework focus and selection styles

Thomas-lhuillier · May 4, 2019 · 8fbe7b3 · 8fbe7b3
1 parent 58855b4
commit 8fbe7b3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;