Multiselect scss

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 124 insertions, 0 deletions

diff --git a/core/css/multiselect.scss b/core/css/multiselect.scss
new file mode 100644
index 00000000000..ea7a481f360
--- /dev/null
+++ b/core/css/multiselect.scss
@@ -0,0 +1,124 @@
+/* Copyright (c) 2011, Jan-Christoph Borchardt, http: //jancborchardt.net
+This file is licensed under the Affero General Public License version 3 or later.
+See the COPYING-README file. */
+
+ul.multiselectoptions {
+	background-color: #fff;
+	border: 1px solid #ddd;
+	border-top: none;
+	box-shadow: 0 1px 1px #ddd;
+	padding-top: 8px;
+	position: absolute;
+	max-height: 20em;
+	overflow-y: auto;
+	z-index: 49;
+	&.down {
+		border-bottom-left-radius: 8px;
+		border-bottom-right-radius: 8px;
+		width: 100%;
+		/* do not cut off group names */
+		-webkit-box-shadow: 0px 0px 20px rgba(29, 45, 68, 0.4);
+		-moz-box-shadow: 0px 0px 20px rgba(29, 45, 68, 0.4);
+		box-shadow: 0px 0px 20px rgba(29, 45, 68, 0.4);
+	}
+	&.up {
+		border-top-left-radius: 8px;
+		border-top-right-radius: 8px;
+	}
+	> li {
+		overflow: hidden;
+		white-space: nowrap;
+		margin-left: 7px;
+		input[type='checkbox'] {
+			+ label {
+				font-weight: normal;
+				display: inline-block;
+				width: 100%;
+				padding: 5px 27px;
+				margin-left: -27px;
+				/* to have area around checkbox clickable as well */
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
+			&:checked + label {
+				font-weight: bold;
+			}
+		}
+	}
+}
+
+div.multiselect {
+	display: inline-block;
+	max-width: 200px;
+	min-width: 150px !important;
+	padding-right: 10px;
+	min-height: 20px;
+	position: relative;
+	vertical-align: bottom;
+}
+
+select.multiselect {
+	display: inline-block;
+	max-width: 200px;
+	min-width: 150px !important;
+	padding-right: 10px;
+	min-height: 20px;
+	position: relative;
+	vertical-align: bottom;
+	height: 30px;
+	min-width: 113px;
+}
+
+/* To make a select look like a multiselect until it's initialized */
+
+div.multiselect {
+	&.active {
+		background-color: #fff;
+		position: relative;
+		z-index: 50;
+	}
+	&.up {
+		border-top: 0 none;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+	&.down {
+		border-bottom: none;
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+	> span {
+		&:first-child {
+			float: left;
+			margin-right: 32px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			width: 90%;
+			white-space: nowrap;
+		}
+		&:last-child {
+			position: absolute;
+			right: 8px;
+			top: 8px;
+		}
+	}
+}
+
+ul.multiselectoptions {
+	input.new {
+		padding-bottom: 3px;
+		padding-top: 3px;
+		margin: 0;
+	}
+	> li.creator {
+		padding: 10px;
+		margin: 0;
+		font-weight: bold;
+		> input {
+			width: 95% !important;
+			/* do not constrain size of text input */
+			padding: 5px;
+			margin: -5px;
+		}
+	}
+}