From 505b6d0d6f5a3d66e18de27f4928f3091100b1c9 Mon Sep 17 00:00:00 2001
From: Hannah Wolfe <erisds@gmail.com>
Date: Thu, 28 Nov 2013 19:09:25 +0000
Subject: [PATCH] Scoping tag styling to the tag control

fixes #1309
---
 core/client/assets/sass/layouts/editor.scss | 158 ++++++++++----------
 1 file changed, 79 insertions(+), 79 deletions(-)

diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss
index 9797079ab6..0d4a7d849f 100644
--- a/core/client/assets/sass/layouts/editor.scss
+++ b/core/client/assets/sass/layouts/editor.scss
@@ -2,7 +2,7 @@
  * These styles control elements specific to the post editor screen
  * used for publishing content with Ghost.
  *
- * Table of Contents: 
+ * Table of Contents:
  *
  * Editor / Preview
  * Post Preview Content
@@ -463,7 +463,7 @@ body.zen {
 .extended-tags { // When the tag bar is exapanded
     position: static;
     min-height: 100%;
-    
+
     #entry-tags {
         &:after {
             right: 10px;
@@ -520,90 +520,90 @@ body.zen {
         left: 29px;
         @include linear-gradient(right, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
     }
-}
 
-.tags {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-    width: auto;
-    max-width: 80%;
-    max-width: calc(100% - 320px);
-    height: 26px;
-    padding-left: 20px;
-    padding-bottom: 20px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    white-space: nowrap;
-    @include transition(width 0.2s linear);
 
-    @include breakpoint($mobile) {
-        @include box-sizing(border-box);
+    .tags {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+        width: auto;
+        max-width: 80%;
+        max-width: calc(100% - 320px);
+        height: 26px;
+        padding-left: 20px;
+        padding-bottom: 20px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        white-space: nowrap;
+        @include transition(width 0.2s linear);
+
+        @include breakpoint($mobile) {
+            @include box-sizing(border-box);
+            display: block;
+            width: 115px;
+            max-width: inherit;
+            padding-bottom: 0;
+        }
+    }
+
+    .tag-label {
         display: block;
-        width: 115px;
-        max-width: inherit;
-        padding-bottom: 0;
-    }
-}
-
-.tag-label {
-    display: block;
-    float: left;
-    @include icon($i-tag);
-    padding: 1px 8px 0 8px;
-    @include transition;
-
-    &:hover {
-        cursor: pointer;
-        color: $lightgrey;
-    }
-
-    &.touch {
-        color: inherit;
-    }
-}
-
-input[type="text"].tag-input {
-    display: inline-block;
-    padding: 0;
-    vertical-align: top;
-    color: $lightgrey;
-    font-weight: 300;
-    background: transparent;
-    border: none;
-
-    &:focus {
-        outline: none;
-    }
-}
-
-.tag {
-    @include icon-after($i-x, 8px, $darkgrey) {
-        margin-left: 4px;
-        vertical-align: 5%;
-        text-shadow: rgba(255,255,255,0.15) 0 1px 0;
+        float: left;
+        @include icon($i-tag);
+        padding: 1px 8px 0 8px;
         @include transition;
-    }
-    display: inline;
-    margin-right: 5px;
-    padding: 0 5px;
-    color: $lightgrey;
-    white-space: nowrap;
-    background: lighten($grey, 15%);
-    border-radius: $rounded;
-    box-shadow: 
-        rgba(255,255,255,0.2) 0 1px 0 inset,
-        #000 0 1px 3px;
 
-    @include user-select(none);
-
-    &:hover {
-        cursor: pointer;
-        @include icon-after($i-x, 8px, $lightgrey) {text-shadow: none;}
+        &:hover {
+            cursor: pointer;
+            color: $lightgrey;
+        }
 
+        &.touch {
+            color: inherit;
+        }
     }
 
+    input[type="text"].tag-input {
+        display: inline-block;
+        padding: 0;
+        vertical-align: top;
+        color: $lightgrey;
+        font-weight: 300;
+        background: transparent;
+        border: none;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .tag {
+        @include icon-after($i-x, 8px, $darkgrey) {
+            margin-left: 4px;
+            vertical-align: 5%;
+            text-shadow: rgba(255,255,255,0.15) 0 1px 0;
+            @include transition;
+        }
+        display: inline;
+        margin-right: 5px;
+        padding: 0 5px;
+        color: $lightgrey;
+        white-space: nowrap;
+        background: lighten($grey, 15%);
+        border-radius: $rounded;
+        box-shadow:
+            rgba(255,255,255,0.2) 0 1px 0 inset,
+            #000 0 1px 3px;
+
+        @include user-select(none);
+
+        &:hover {
+            cursor: pointer;
+            @include icon-after($i-x, 8px, $lightgrey) {text-shadow: none;}
+
+        }
+    }
 }
 
 .suggestions {
@@ -612,7 +612,7 @@ input[type="text"].tag-input {
 
   li.selected{
     background: $blue;
-    box-shadow: 
+    box-shadow:
         rgba(255,255,255,0.2) 0 1px 0 inset,
         rgba(0,0,0,0.5) 0 1px 5px;
   }