Merge pull request #1430 from hypothesis/tags-redux

Tags Redux: styling tags

h/static/styles/tags-input.scss

@@ -66,19 +66,49 @@ tags-input {
 }
 
 .tags-read-only {
-  font-size: 0.92em;
-  margin: 0.16em 0;
 
-  .tag-list, .tag-item {
-    display: inline;
-  }
+  .tag-list {
+    margin: 1em 0 0;
+    padding: 0;
+    border: 0 none;
+    background: none;
+    clear: both;
+    vertical-align: baseline;
 
-  .tag-item a:after {
-    content: ", ";
-    color: $text-color;
-  }
+    &:after {
+      display: table;
+      clear: both;
+      content: "";
+    }
 
-  .tag-item:last-child a:after {
-    content: none;
+    li {
+      padding: 0 .4em;
+      font-size: 11px;
+      cursor: pointer;
+      display: block;
+      float: left;
+      padding: .01em 1.3em .01em .3em;
+      position: relative;
+      margin-right: 0.4em;
+
+      &.tag-item {
+        margin-top: .4em;
+        border: 1px solid #d3d3d3;
+        background: $gray-lightest;
+        font-weight: 400;
+        padding: 0 .4em;
+        border-radius: 2px;
+      }
+
+      a {
+        color: $gray-light;
+        text-decoration: none;
+        
+        &:hover {
+          color: $link-color-hover;
+        }
+      }
+    }
   }
 }
+