Added icon nav component

1 files changed, 31 insertions, 7 deletions

diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 2dcbb12..1cce94f 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -103,6 +103,13 @@
                 background-color: fn.color(--active --bg);
                 color:            fn.color(--active --label);
             }
+    
+            @include iro.bem-at-theme('keyboard') {
+                &:focus {
+                    background-color: fn.color(--hover --bg);
+                    color:            fn.color(--hover --label);
+                }
+            }
         }
     
         @include iro.bem-is('selected') {
@@ -119,6 +126,13 @@
                     background-color: fn.color(--selected --bg);
                     color:            fn.color(--selected --hover --label);
                 }
+    
+                @include iro.bem-at-theme('keyboard') {
+                    &:focus {
+                        background-color: fn.color(--selected --bg);
+                        color:            fn.color(--selected --hover --label);
+                    }
+                }
             }
         }
     
@@ -149,6 +163,13 @@
                     box-shadow:       none;
                     color:            fn.color(--quiet --active --label);
                 }
+    
+                @include iro.bem-at-theme('keyboard') {
+                    &:focus {
+                        background-color: fn.color(--quiet --hover --bg);
+                        color:            fn.color(--quiet --hover --label);
+                    }
+                }
             }
     
             @include iro.bem-is('selected') {
@@ -170,18 +191,21 @@
                         box-shadow:       none;
                         color:            fn.color(--quiet --selected --hover --label);
                     }
+    
+                    @include iro.bem-at-theme('keyboard') {
+                        &:focus {
+                            background-color: fn.color(--quiet --selected --bg);
+                            color:            fn.color(--quiet --selected --hover --label);
+                        }
+                    }
                 }
             }
         }
     
         @include iro.bem-at-theme('keyboard') {
-            &:link,
-            &:visited,
-            &:enabled {
-                &:focus {
-                    border-color: fn.color(--key-focus --border);
-                    box-shadow:   inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
-                }
+            &:focus {
+                border-color: fn.color(--key-focus --border);
+                box-shadow:   inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
             }
         }