Update

3 files changed, 19 insertions, 21 deletions

diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 303430c..ca7a4ca 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -11,10 +11,6 @@
             --zoom:     3,
             --valign:   -.25em,
 
-            --icon: (
-                --valign: -.17em,
-            ),
-
             --150: (
                 --size:   calc(1 / 14 * 28em),
                 --valign: -.65em,
@@ -45,7 +41,7 @@
 
         @include iro.bem-modifier('icon') {
             margin:         calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
-            vertical-align: fn.dim(--icon --valign);
+            vertical-align: fn.foreign-dim(--icon, --valign);
         }
 
         @each $size in '150' '200' {
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 5a543ab..170dca5 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -6,6 +6,7 @@
         --dims: (
             --stroke: 1.5px,
             --size:   calc(1 / 14 * 16em),
+            --valign: -.18em
         )
     ), 'dims');
 
@@ -16,7 +17,7 @@
         stroke-width:    fn.dim(--stroke);
         stroke-linecap:  round;
         stroke-linejoin: round;
-        vertical-align:  -.18em;
+        vertical-align:  fn.dim(--valign);
 
         @include iro.bem-modifier('block') {
             display: block;
diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss
index d768492..4a794a7 100644
--- a/src/objects/_overflow-button.scss
+++ b/src/objects/_overflow-button.scss
@@ -4,9 +4,9 @@
 @include iro.props-namespace('overflow-button') {
     @include iro.props-store((
         --dims: (
-            --pad-x:   fn.global-dim(--size --125),
-            --pad-y:   fn.global-dim(--size --125),
-            --spacing: fn.global-dim(--size --50),
+            --pad-x:   calc(fn.global-dim(--size --125) - 1px),
+            --pad-y:   calc(fn.global-dim(--size --125) - 1px),
+            --spacing: fn.global-dim(--size --50)
         ),
     ), 'dims');
 
@@ -109,7 +109,7 @@
         @include iro.bem-elem('inside') {
             display:         inline-block;
             padding:         fn.dim(--pad-y) fn.dim(--pad-x);
-            border:          1px solid transparent;
+            border:          2px solid transparent;
             border-radius:   100em;
             line-height:     1;
             text-align:      center;
@@ -153,17 +153,18 @@
         }
     
         @include iro.bem-is('selected') {
+            @include iro.bem-elem('inside') {
+                border-color: fn.color(--selected --bg);
+                color:        fn.color(--selected --label);        
+            }
+        
             &:link,
             &:visited,
             &:enabled {
-                @include iro.bem-elem('inside') {
-                    background-color: fn.color(--selected --bg);
-                    color:            fn.color(--selected --label);
-                }
-        
                 &:hover,
                 &:active {
                     @include iro.bem-elem('inside') {
+                        border-color:     transparent;
                         background-color: fn.color(--selected --bg);
                         color:            fn.color(--selected --hover --label);
                     }
@@ -201,14 +202,14 @@
                 }
         
                 @include iro.bem-is('selected') {
+                    @include iro.bem-elem('inside') {
+                        border-color: fn.color(--#{$color} --selected --bg);
+                        color:        fn.color(--#{$color} --selected --label);
+                    }
+
                     &:link,
                     &:visited,
                     &:enabled {
-                        @include iro.bem-elem('inside') {
-                            background-color: fn.color(--#{$color} --selected --bg);
-                            color:            fn.color(--#{$color} --selected --label);
-                        }
-                
                         &:hover,
                         &:active {
                             @include iro.bem-elem('inside') {
@@ -225,7 +226,7 @@
             &:focus {
                 @include iro.bem-elem('inside') {
                     border-color: fn.color(--key-focus --border);
-                    box-shadow:   inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
+                    box-shadow:   fn.color(--key-focus --shadow);
                 }
             }
         }