Multiselect scss

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

diff --git a/core/css/multiselect.scss b/core/css/multiselect.scss
new file mode 100644 (file)
index 0000000..ea7a481
--- /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;
+               }
+       }
+}