From 8f02b3341b3a2b47eaab4435409425e3ab735ea4 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@tryghost.org>
Date: Tue, 7 Jan 2014 23:29:59 +0100
Subject: [PATCH] Fixed tag display issues

The tags UI is pretty messed up all round. This fix makes it work properly at least on desktop. Mobile needs a lot more love. This is a followup to #1774 and most problems stemming originally from #710
---
 core/client/assets/sass/layouts/editor.scss | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss
index 94a024b59f..f5da59100c 100644
--- a/core/client/assets/sass/layouts/editor.scss
+++ b/core/client/assets/sass/layouts/editor.scss
@@ -499,7 +499,7 @@ body.zen {
     text-transform: none;
     padding: 10px 0 0 0;
 
-    &:after, &:before {
+    &:after {
         content: "";
         position: fixed;
         top: 10px;
@@ -511,16 +511,10 @@ body.zen {
         pointer-events: none;
 
         @include breakpoint($mobile) {
-            right: 176px;
+            right: 161px;
         }
     }
 
-    &:before {
-        right: auto;
-        left: 29px;
-        @include linear-gradient(right, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
-    }
-
     .tags {
         position: relative;
         display: inline-block;
@@ -529,7 +523,7 @@ body.zen {
         max-width: 80%;
         max-width: calc(100% - 320px);
         height: 26px;
-        padding-left: 8px;
+        padding-left: 5px;
         padding-bottom: 20px;
         overflow-x: auto;
         overflow-y: hidden;
@@ -580,7 +574,7 @@ body.zen {
     .tag {
         @include icon-after($i-x, 8px, $darkgrey) {
             margin-left: 4px;
-            vertical-align: 5%;
+            vertical-align: 10%;
             text-shadow: rgba(255,255,255,0.15) 0 1px 0;
             @include transition;
         }
@@ -599,7 +593,11 @@ body.zen {
 
         &:hover {
             cursor: pointer;
-            @include icon-after($i-x, 8px, $lightgrey) {text-shadow: none;}
+            @include icon-after($i-x, 8px, $lightgrey) {
+                margin-left: 4px;
+                vertical-align: 10%;
+                text-shadow: none;
+            }
 
         }
     }