Fix select2 dropdown

Fix #1932
+ no result fix

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

diff --git a/core/css/inputs.css b/core/css/inputs.css
index 4497c00139f1eb9857fccc67ccc730f3dc0d9bf0..3d74ff38271a2dae899c9fd25b117a10cdab5a4b 100644 (file)
--- a/core/css/inputs.css
+++ b/core/css/inputs.css
@@ -222,132 +222,134 @@ select:hover {
 }
 
 
-
 /* select2 adjustments */
-.select2-container {
-    margin: 3px 3px 3px 0 !important;
-}
 #select2-drop {
-       margin-top: -4px;
+       margin-top: -2px;
 }
-.select2-container .select2-choice,
-.select2-container .select2-default {
-       border: none !important;
-       border-radius: 0;
-       background: transparent !important;
-       box-shadow: none !important;
-       line-height: 32px !important;
-       padding-left: 38px;
-       background-color: transparent;
+#select2-drop.select2-drop-active {
+       border-color: #ddd;
 }
-.select2-selected {
-       display: list-item !important;
-       background-color: #f8f8f8 !important;
+#select2-drop .avatar {
+       display: inline-block;
+       margin-right: 8px;
+       vertical-align: middle;
 }
-.select2-highlighted,
-.select2-selected.select2-highlighted {
-       background: #f8f8f8 !important;
-       color: #000 !important;
+#select2-drop .avatar img,
+.select2-chosen .avatar img,
+#select2-drop .avatar,
+.select2-chosen .avatar {
+       cursor: pointer;
 }
-
-.select2-result {
-       position: relative !important;
+#select2-drop .select2-search input {
+       width: calc(100% - 14px);
+       min-height: auto;
+       background: url('../img/actions/search.svg') no-repeat right center;
+       background-origin: content-box;
 }
-.select2-results {
-       max-height: 250px !important;
-       margin: 0 !important;
-       padding: 0 !important;
+#select2-drop .select2-results {
+       max-height: 250px;
+       margin: 0;
+       padding: 0;
 }
-.select2-results .select2-result-label {
+#select2-drop .select2-results .select2-result-label {
        padding: 12px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
 }
-.select2-results .select2-result-label span {
+#select2-drop .select2-results .select2-result-label span {
        cursor: pointer;
 }
-
-.select2-choices {
-       white-space: nowrap !important;
-       text-overflow: ellipsis !important;
-       background: #fff !important;
-       color: #555 !important;
-       box-sizing: content-box !important;
-       border-radius: 3px !important;
-       border: 1px solid #ddd !important;
-       margin: 0 !important;
-       padding: 2px 0 !important;
-       min-height: auto !important;
-}
-.select2-dropdown-open .select2-choices {
-       border-bottom-left-radius: 0 !important;
-       border-bottom-right-radius: 0 !important;
+#select2-drop .select2-results .select2-result,
+#select2-drop .select2-results .select2-no-results,
+#select2-drop .select2-results .select2-searching {
+       position: relative;
+       display: list-item;
+       padding: 12px;
+       background-color: #fff;
+       cursor: pointer;
+       color: #222;
 }
-
-.select2-search {
-       padding: 0 !important;
+#select2-drop .select2-results .select2-result.select2-selected {
+       background-color: #f8f8f8;
 }
-.select2-search input {
-       background-position: 100% -21px !important;
-       padding: 12px !important;
-       border-radius: 0 !important;
-       border: none !important;
+#select2-drop .select2-results .select2-result.select2-highlighted {
+       background-color: #f8f8f8;
+       color: #000;
 }
 
-.select2-choices .select2-search-choice {
-       line-height: 20px !important;
-       padding-left: 5px !important;
-}
-.select2-choices .select2-search-choice-close {
-       display: none !important;
+.select2-container-multi .select2-choices,
+.select2-container-multi.select2-container-active .select2-choices,
+.select2-container .select2-choice {
+       box-shadow: none;
+       white-space: nowrap;
+       text-overflow: ellipsis;
+       background: #fff;
+       color: #555;
+       box-sizing: content-box;
+       border-radius: 3px;
+       border: 1px solid #ddd;
+       margin: 0;
+       padding: 2px 0;
+       min-height: auto;
+}
+.select2-container-multi .select2-choices .select2-search-choice,
+.select2-container-multi.select2-container-active .select2-choices .select2-search-choice,
+.select2-container .select2-choice .select2-search-choice {
+       line-height: 20px;
+       padding-left: 5px;
+       background-image: none;
+       background-color: #f8f8f8;
+       border-color: #f8f8f8;
+}
+.select2-container-multi .select2-choices .select2-search-choice.select2-search-choice-focus, .select2-container-multi .select2-choices .select2-search-choice:hover,
+.select2-container-multi.select2-container-active .select2-choices .select2-search-choice.select2-search-choice-focus,
+.select2-container-multi.select2-container-active .select2-choices .select2-search-choice:hover,
+.select2-container .select2-choice .select2-search-choice.select2-search-choice-focus,
+.select2-container .select2-choice .select2-search-choice:hover {
+       background-color: #f0f0f0;
+       border-color: #f0f0f0;
+}
+.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close,
+.select2-container-multi.select2-container-active .select2-choices .select2-search-choice .select2-search-choice-close,
+.select2-container .select2-choice .select2-search-choice .select2-search-choice-close {
+       display: none;
 }
-.select2-choices .select2-search-field input {
-       line-height: 20px !important;
+.select2-container-multi .select2-choices .select2-search-field input,
+.select2-container-multi.select2-container-active .select2-choices .select2-search-field input,
+.select2-container .select2-choice .select2-search-field input {
+       line-height: 20px;
 }
 
-.select2-container-multi .select2-choices .select2-search-choice {
-       background-color: #f8f8f8 !important;
-       border-color: #f8f8f8 !important;
-       box-shadow: none !important;
-       background-image: none !important;
+.select2-container {
+       margin: 3px 3px 3px 0;
 }
-.select2-results .select2-highlighted {
-       background-color: #f8f8f8 !important;
-       color: #000 !important;
+.select2-container.select2-container-multi .select2-choices {
+       display: flex;
+       flex-wrap: wrap;
 }
-
-.select2-container-multi.select2-container-active .select2-choices,
-.select2-drop-active {
-       border-color: #ddd !important;
+.select2-container.select2-container-multi .select2-choices li {
+       float: none;
 }
-.select2-container-multi.select2-container-active .select2-choices {
-       -webkit-box-shadow: none !important;
-       box-shadow: none !important;
+.select2-container .select2-choice {
+       padding-left: 38px;
 }
-
-#select2-drop .avatar,
-.select2-chosen .avatar {
-       display: inline-block;
-       margin-right: 8px;
-       vertical-align: middle;
+.select2-container .select2-choice .select2-arrow {
+       background: none;
+       border-radius: 0;
+       border: none;
 }
-#select2-drop .avatar img,
-.select2-chosen .avatar img,
-#select2-drop .avatar,
-.select2-chosen .avatar {
-       cursor: pointer;
+.select2-container .select2-choice .select2-arrow b {
+       background: url('../img/actions/triangle-s.svg') no-repeat center;
+       opacity: .5;
 }
-
-.select2-results .select2-no-results,
-.select2-results .select2-searching,
-.select2-results .select2-selection-limit {
-       background: #fff !important;
-       padding: 12px !important;
+.select2-container .select2-choice:hover .select2-arrow b,
+.select2-container .select2-choice:focus .select2-arrow b,
+.select2-container .select2-choice:active .select2-arrow b {
+       opacity: .7;
 }
 
 
-
 /* jQuery UI fixes */
 .ui-menu {
        padding: 0 !important;