improve form and add taggle

templates/static/style.css

@@ -2,26 +2,76 @@
 	box-sizing: border-box;
 }
 
-form .Row {
+html, textarea, select {
+	font-family: "IBM Plex", "DejaVu Sans", "Helvetica", sans-serif;
+}
+
+.Form .Row {
 	display: flex;
 	padding: .25rem;
 }
 
-form .Row label {
+input[type="text"],
+input[type="number"],
+textarea,
+.tag-input {
+	border: 1px solid silver;
+	padding: 0.5rem;
+	border-radius: 5px;
+	font-size: 1rem;
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus,
+textarea:focus,
+.tag-input.active {
+	box-shadow: inset 0 0 0 1px #3c97ff;
+	border-color: #3c97ff;
+	outline: 0 none !important;
+}
+
+.Form label {
 	flex-shrink: 0;
 	width: 10rem;
+	height: 2.1rem;
+	line-height: 2.1rem;
+	vertical-align: middle;
 	text-align: right;
 	display: inline-block;
 	padding-right: .5rem;
+	align-self: flex-start;
 }
 
-form .Row input,
-form .Row select {
+.Form input[type="text"],
+.Form input[type="number"],
+.Form select {
 	height: 2.1rem;
+	width: 15rem;
 }
 
-form .Row textarea {
+.Form textarea {
 	flex-shrink: 1;
 	width: 30rem;
 	height: 6rem;
 }
+
+.Form label.checkbox-wrap {
+	width: 15rem;
+	padding-right: 1rem;
+	text-align: left !important;
+}
+
+.tag-input {
+	position: relative;
+	width: 30rem;
+	padding-bottom: 0rem !important;
+}
+
+.tag-input input,
+.tag-input input:focus {
+	border: 0 transparent;
+	padding: 0;
+	margin: 0;
+	box-shadow: none;
+	outline: 0 none !important;
+}

templates/static/taggle.css

@@ -0,0 +1,113 @@
+/*
+    Basic styles to get you started in styling taggle
+    https://jsfiddle.net/okcoker/aqnspdtr/8/
+*/
+
+/*.textarea {
+    width: 100%;
+    height: 300px;
+    border: 1px solid red;
+}*/
+
+.taggle_list {
+    float: left;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+}
+
+.taggle_input {
+    border: none;
+    outline: none;
+    font-size: 16px;
+    /*font-weight: 300;*/
+}
+
+.taggle_list li {
+    float: left;
+    display: inline-block;
+    white-space: nowrap;
+    font-weight: 500;
+    margin-bottom: .5rem;
+}
+
+.taggle_list .taggle {
+    margin-right: 8px;
+    background: #E2E1DF;
+    padding: .45rem;
+    border-radius: 3px;
+    position: relative;
+    cursor: pointer;
+    transition: all .3s;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.taggle_list .taggle_hot {
+    background: #cac8c4;
+}
+
+.taggle_list .taggle .close {
+    font-size: 1.5rem;
+    position: absolute;
+    top: 10px;
+    right: 3px;
+    text-decoration: none;
+    padding: 0;
+    line-height: 0.5;
+    color: #ccc;
+    color: rgba(0, 0, 0, 0.2);
+    padding-bottom: 4px;
+    display: none;
+    border: 0;
+    background: none;
+    cursor: pointer;
+}
+
+.taggle_list .taggle:hover {
+    /*padding: 5px;*/
+    padding-right: 20px;
+    background: #ccc;
+    /*transition: all .3s;*/
+}
+
+.taggle_list .taggle:hover > .close {
+    display: block;
+}
+
+.taggle_list .taggle .close:hover {
+    color: #b5003b;
+}
+
+.taggle_placeholder {
+    position: absolute;
+    color: #CCC;
+    top: 12px;
+    left: 8px;
+    /*transition: opacity, .25s;*/
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.taggle_input {
+    padding: 8px;
+    padding-left: 0;
+    float: left;
+    margin-top: -5px;
+    background: none;
+    width: 100% !important;
+    max-width: 100%;
+}
+
+.taggle_sizer {
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    top: -500px;
+    z-index: -1;
+    visibility: hidden;
+}