Issue #649: Extract tags mixin to separate file

1 files changed, 78 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..c018156a
--- /dev/null
+++ b/web-ui/app/scss/mixins/_tags.scss
@@ -0,0 +1,78 @@
+@mixin tags {
+    i.tags-label {
+        vertical-align: bottom;
+        font-size: medium;
+        color: $light_gray;
+    }
+
+    ul.tags {
+        margin-bottom: 0;
+
+        li {
+            font-size: 0.6rem;
+            background-color: lighten($action_buttons, 12);
+            color: white;
+            display: inline;
+            padding: 2px 3px;
+            margin: 0 1px;
+            position: relative;
+
+            @include border-radius(2px);
+
+            &[data-tag="drafts"] {
+                color: $attention;
+                background: $contrast;
+            }
+
+            &.tag:hover {
+                text-decoration: line-through;
+                cursor: pointer;
+            }
+
+            &.add-new {
+                opacity: 0.6;
+                transition: background-color 150ms ease-out;
+                background: transparent;
+                border: 1px solid $lighter_gray;
+                line-height: 0;
+                padding: 1px 2px;
+                margin-left: -5px;
+
+                @include border-radius(2px);
+
+                &:hover {
+                    opacity: 1;
+                    background: $lighter_gray;
+                }
+
+                i {
+                    &:before {
+                        vertical-align: middle;
+                        font-size: smaller;
+                    }
+                }
+            }
+
+            &.new-tag {
+                font-size: 0.7em;
+                display: inline-block;
+                padding: 0;
+                background: transparent;
+
+                input {
+                    display: inline;
+                    font-size: 1em;
+                    padding: 1px 5px;
+                    width: 120px;
+                    margin: 0;
+                }
+
+                @include tt-hint;
+
+                .tt-dropdown-menu {
+                    width: 250px;
+                }
+            }
+        }
+    }
+}