fix(navbar): focus partially hided by active element (#UIM-126) (#206)

positive-js · Aug 21, 2019 · c1fe5a5 · c1fe5a5
1 parent d2d9a87
commit c1fe5a5
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/mosaic-dev/navbar/template.html b/packages/mosaic-dev/navbar/template.html
@@ -28,11 +28,11 @@ <h5>Additional info</h5>
                 </mc-navbar-logo>
                 <mc-navbar-title>Brand</mc-navbar-title>
             </mc-navbar-brand>
-            <mc-navbar-item class="mc-navbar-item-active" (click)="onItemClick($event)">
+            <mc-navbar-item (click)="onItemClick($event)">
                 <i mc-icon="mc-info_16"></i>
                 <mc-navbar-title>Left icon</mc-navbar-title>
             </mc-navbar-item>
-            <mc-navbar-item (click)="onItemClick($event)">
+            <mc-navbar-item class="mc-navbar-item-active" (click)="onItemClick($event)">
                 <mc-navbar-title>No icon</mc-navbar-title>
             </mc-navbar-item>
             <mc-navbar-item class="mc-progress" (click)="onItemClick($event)">

diff --git a/packages/mosaic/navbar/_navbar-theme.scss b/packages/mosaic/navbar/_navbar-theme.scss
@@ -3,6 +3,7 @@
 
 @mixin _mc-navbar-theme-color($theme) {
     $palette: map-get($theme, primary);
+    $focus-color: mc-color($primary);
 
     background-color: mc-color($palette, 700);
 
@@ -32,9 +33,8 @@
     mc-navbar-item:not([disabled]), .mc-navbar-item:not([disabled]) {
         outline: 0;
 
-        &.cdk-keyboard-focused, &.cdk-program-focused  {
-            $focus-color: mc-color($primary);
-            outline: $focus-color solid 2px;
+        &.cdk-keyboard-focused  {
+            box-shadow: inset 0 0 0 2px $focus-color;
         }
 
     }