taginput: add tag input control for email aliases

2016-06-09 10:16:13 -07:00
parent f0cb3f94cb
commit 0de3b8fbdb
3 changed files with 166 additions and 0 deletions
--- a/webadmin/src/theme.scss
+++ b/webadmin/src/theme.scss
@@ -1054,3 +1054,53 @@ $graphs-success-alt:    lighten(#27CE65, 20%);
        width: 200px;
    }
 }
+
+// ----------------------------
+// Tag Input
+// ----------------------------
+// https://codepen.io/webmatze/pen/isuHh
+
+.tag-input-ctn {
+    border: 1px solid #ccc;
+    padding: 2px 3px;
+    display: inline-block;
+    width: 500px;
+    border-radius: 3px;
+    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075);
+  
+    input {
+        display: inline-block;
+        float: left;
+        height: 18px;
+        padding: 0px;
+        font-size: 14px;
+        line-height: 18px;
+        color: black;
+        border: 0px;
+        margin: 2px;
+        &:focus {
+            outline: 0;
+            box-shadow: 0px;
+        }
+    }
+    .input-tag {
+        padding: 2px 4px;
+        line-height: 12px;
+        font-size: 11px;
+        background-color: #e3eaf6;
+        display: inline-block;
+        float: left;
+        border-radius: 2px;
+        margin: 2px 5px 2px 0px;
+        border: 1px solid #a9b6d2;
+        .delete-tag {
+            display: inline-block;
+            font-size: 12px;
+            cursor: pointer;
+            padding: 0px 2px;
+            &:hover {
+                background-color: #96b4d2;
+            }
+        }
+    }
+}