Added focus style for badge

1 files changed, 20 insertions, 4 deletions

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index f12ec1c..8ef2699 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -4,16 +4,16 @@
 @include iro.props-namespace('badge') {
     @include iro.props-store((
         --dims: (
-            --pad-x:     fn.global-dim(--size --75),
-            --pad-y:     fn.global-dim(--size --10),
+            --pad-x:     fn.global-dim(--size --50),
+            --pad-y:     0,
             --rounding:  3px,
             --font-size: fn.global-dim(--font-size --75),
             --fixed-100: 1em,
             --fixed-200: 1.5em,
 
             --200: (
-                --pad-x:     fn.global-dim(--size --100),
-                --pad-y:     fn.global-dim(--size --50),
+                --pad-x: fn.global-dim(--size --75),
+                --pad-y: fn.global-dim(--size --25),
             )
         ),
     ), 'dims');
@@ -28,6 +28,10 @@
             --active: (
                 --bg: fn.global-color(--obj-lo),
             ),
+            --key-focus: (
+                --border: fn.global-color(--focus --fill),
+                --shadow: fn.global-color(--focus --shadow),
+            ),
 
             --accent: (
                 --bg:    fn.global-color(--accent --primary --bg),
@@ -45,6 +49,7 @@
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
         padding:          fn.dim(--pad-y) fn.dim(--pad-x);
+        border:           2px solid transparent;
         border-radius:    fn.dim(--rounding);
         background-color: fn.color(--bg);
         color:            fn.color(--label);
@@ -79,6 +84,17 @@
                 }
             }
         }
+
+        &:link,
+        &:visited,
+        &:enabled {
+            @include iro.bem-at-theme('keyboard') {
+                &:focus {
+                    border-color: fn.color(--key-focus --border);
+                    box-shadow:   fn.color(--key-focus --shadow);
+                }
+            }
+        }
     
         @include iro.bem-modifier('fixed-100') {
             width: fn.dim(--fixed-100);