1 files changed, 110 insertions, 0 deletions
diff --git a/web-ui/app/scss/mixins/_tags.scss b/web-ui/app/scss/mixins/_tags.scss
new file mode 100644
index 00000000..9bb287ea
--- /dev/null
+++ b/web-ui/app/scss/mixins/_tags.scss
@@ -0,0 +1,110 @@
+$tags-font-size: 0.6rem;
+
+@mixin tags {
+    & > * {
+        display: inline;
+    }
+
+    &-tag {
+        font-size: $tags-font-size;
+        font-weight: 700;
+        background-color: $dark_blue;
+        color: white;
+        padding: 2px 4px;
+        margin: 0 1px;
+        border-radius: 2px;
+    }
+}
+
+@mixin tags-editable {
+    @include tags;
+
+    &-tag:hover {
+        text-decoration: line-through;
+        cursor: pointer;
+        position: relative;
+
+        &:before {
+            @include tooltip(130%, 25%);
+
+            content: "click to remove";
+            text-transform: lowercase;
+        }
+    }
+
+    &-label {
+        vertical-align: bottom;
+        color: $light_gray;
+    }
+
+    &-new-button {
+        font-size: $tags-font-size;
+        padding: 0;
+        background: transparent;
+        border-radius: 2px;
+        padding: 2px;
+
+        &:hover {
+            opacity: 1;
+            background: $lighter_gray;
+        }
+    }
+
+    &-name-input {
+        opacity: 0.6;
+        transition: background-color 150ms ease-out;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        // twitter typeahead classes. those are set via JS, with relatively high specificity,
+        // hence box-model-related properties are repeated
+        // https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names
+
+        $suggestion-border: 1px solid darken($contrast, 5%);
+        $input-field-padding: 1px 5px;
+        $input-field-margin: 2px;
+
+        & * .tt-input {
+            border-radius: $input-field-margin;
+            padding: $input-field-padding;
+            margin-top: 2px;
+            font-size: $tags-font-size;
+        }
+
+        & * .tt-hint {
+            color: $medium_light_grey;
+            padding: $input-field-padding;
+            margin-top: $input-field-margin;
+            font-size: $tags-font-size;
+            background: transparent;
+        }
+
+        & * .tt-dropdown-menu {
+            min-width: 250px;
+            padding: 0;
+            font-size: $tags-font-size;
+            background-color: $contrast;
+            border: $suggestion-border;
+        }
+
+        & * .tt-suggestion {
+            padding: 5px 10px;
+            font-size: $tags-font-size;
+            border-bottom: $suggestion-border;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            p {
+                margin: 0;
+            }
+        }
+
+        & * .tt-cursor {
+            background-color: $white;
+        }
+    }
+}