From f035140c9fcf0fd59e1dd78f63ac0c18fda3165a Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Wed, 24 Aug 2016 00:24:02 +0200
Subject: [PATCH] client/css: simplify tag list outline workarounds

Rather than messing with negative margins, just make the outline inset
by replacing it with inset box-shadow.
---
 client/css/tag-input.styl | 35 ++++++++++++++++-------------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/client/css/tag-input.styl b/client/css/tag-input.styl
index 66c6eab5..f073ddd3 100644
--- a/client/css/tag-input.styl
+++ b/client/css/tag-input.styl
@@ -11,19 +11,6 @@ div.tag-input
             flex: 1
             margin: 0 0 0 0.5em
 
-    ul
-        margin-top: 0.2em
-    li
-        transition: background-color 0.5s linear
-        &.implication
-            background: $implied-tag-background-color
-            color: $implied-tag-text-color
-        &.new
-            background: $new-tag-background-color
-            color: $new-tag-text-color
-        &.duplicate
-            background: $duplicate-tag-background-color
-            color: $duplicate-tag-text-color
 
     .tag-suggestions
         position: absolute
@@ -99,17 +86,28 @@ div.tag-input
             unselectable()
 
 ul.compact-tags
-    line-height: 200%
     width: 100%
+    margin-top: 0.5em
     li
-        margin: 0 0 -0.8em 0
-        padding: 0 2px
+        margin: 0
         width: 100%
+        line-height: 140%
         white-space: nowrap
         overflow: hidden
         text-overflow: ellipsis
-        a
-            display: inline
+        transition: background-color 0.5s linear
+        a:focus
+            outline: 0
+            box-shadow: inset 0 0 0 2px $main-color
+        &.implication
+            background: $implied-tag-background-color
+            color: $implied-tag-text-color
+        &.new
+            background: $new-tag-background-color
+            color: $new-tag-text-color
+        &.duplicate
+            background: $duplicate-tag-background-color
+            color: $duplicate-tag-text-color
     i
         padding-right: 0.4em
     .append
@@ -117,4 +115,3 @@ ul.compact-tags
         margin-left: 0.7em
         font-size: 90%
         unselectable()
-