Merge pull request #1789 from nextcloud/select2-fixes

move select2 styles to core so it's universal, not only for tags

core/css/inputs.css

@@ -6,6 +6,7 @@ input, textarea, select, button {
 }
 
 .select2-container-multi .select2-choices .select2-search-field input,
+.select2-search input,
 .ui-widget {
 	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !important;
 }
@@ -221,18 +222,119 @@ select:hover {
 }
 
 
+
+/* select2 adjustments */
+.select2-container {
+    margin: 3px 3px 3px 0 !important;
+}
+#select2-drop {
+	margin-top: -4px;
+}
+.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-selected {
+	display: list-item !important;
+	background-color: #f8f8f8 !important;
+}
+.select2-highlighted,
+.select2-selected.select2-highlighted {
+	background: #f8f8f8 !important;
+	color: #000 !important;
+}
+
+.select2-result {
+	position: relative !important;
+}
+.select2-results {
+	max-height: 220px !important;
+	margin: 0 !important;
+	padding: 0 !important;
+}
+.select2-results .select2-result-label {
+	padding: 12px !important;
+}
+
 .select2-choices {
-	border: 1px solid #ddd;
+	white-space: nowrap !important;
-	border-radius: 3px;
+	text-overflow: ellipsis !important;
-	color: #333;
+	background: #fff !important;
-	background-image: none;
+	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;
+	border-bottom-left-radius: 0 !important;
-	border-bottom-right-radius: 0;
+	border-bottom-right-radius: 0 !important;
-	border: 1px solid #3875d7;
 }
 
+.select2-search {
+	padding: 0 !important;
+}
+.select2-search input {
+	background-position: 100% -21px !important;
+	padding: 12px !important;
+	border-radius: 0 !important;
+	border: none !important;
+}
+
+.select2-choices .select2-search-choice {
+	line-height: 20px !important;
+	padding-left: 5px !important;
+}
+.select2-choices .select2-search-choice-close {
+	display: none !important;
+}
+.select2-choices .select2-search-field input {
+	line-height: 20px !important;
+}
+
+.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-results .select2-highlighted {
+	background-color: #f8f8f8 !important;
+	color: #000 !important;
+}
+
+.select2-container-multi.select2-container-active .select2-choices,
+.select2-drop-active {
+	border-color: #ddd !important;
+}
+.select2-container-multi.select2-container-active .select2-choices {
+	-webkit-box-shadow: none !important;
+	box-shadow: none !important;
+}
+
+#select2-drop .avatar,
+.select2-chosen .avatar {
+	display: inline-block;
+	margin-right: 8px;
+	vertical-align: middle;
+}
+
+.select2-results .select2-no-results,
+.select2-results .select2-searching,
+.select2-results .select2-selection-limit {
+	background: #fff !important;
+	padding: 12px !important;
+}
+
+
 
 /* jQuery UI fixes */
 .ui-menu {
@@ -257,6 +359,7 @@ select:hover {
 }
 
 
+
 /* correctly align images inside of buttons */
 input img, button img, .button img {
 	vertical-align: text-bottom;

core/css/systemtags.css

@@ -7,21 +7,7 @@
  * See the COPYING-README file.
  *
  */
-.systemtags-select2-dropdown .select2-selected {
-	display: list-item;
-	background-color: #f8f8f8;
-}
-.systemtags-select2-dropdown .select2-highlighted,
-.systemtags-select2-dropdown .select2-selected.select2-highlighted {
-	background: #f8f8f8;
-}
 
-.select2-result {
-	position: relative;
-}
-.systemtags-select2-dropdown .select2-highlighted {
-	color: #000000;
-}
 .systemtags-select2-dropdown .select2-result-label .checkmark {
 	visibility: hidden;
 }
@@ -44,8 +30,7 @@
 
 .systemtags-select2-dropdown .systemtags-actions {
 	position: absolute;
-	right: 0;
+	right: 5px;
-	top: 3px;
 }
 
 .systemtags-select2-dropdown .systemtags-rename-form {
@@ -57,62 +42,18 @@
 	width: 100%;
 }
 
-.systemtags-select2-container .select2-choices {
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	background: #fff;
-	color: #555;
-	box-sizing: content-box;
-	border-radius: 3px;
-	border: 1px solid #ddd;
-	margin: 3px 3px 3px 0;
-	padding: 2px 0;
-	min-height: auto;
-}
-
-.systemtags-select2-container .select2-choices .select2-search-choice {
-	line-height: 20px;
-	padding-left: 5px;
-}
 
 .systemtags-select2-container .select2-choices .select2-search-choice.select2-locked .label {
 	opacity: 0.5;
 }
 
-.systemtags-select2-container .select2-choices .select2-search-choice-close {
+.systemtags-select2-dropdown .label {
-	display: none;
-}
-.systemtags-select2-container .select2-choices .select2-search-field input {
-	line-height: 20px;
-}
-.systemtags-select2-dropdown  .label {
 	width:85%;
 	display:-moz-inline-box;
 	display:inline-block;
 	overflow:hidden;
 	text-overflow:ellipsis;
 }
-
+.systemtags-select2-dropdown .label.hidden {
-.systemtags-select2-dropdown  .label.hidden {
 	display: none;
 }
-
-.select2-container-multi .select2-choices .select2-search-choice {
-	background-color: rgba(240,240,240,.9);
-	border-color: rgba(240,240,240,.9);
-	box-shadow: none;
-	background-image: none;
-}
-.select2-results .select2-highlighted {
-	background-color: rgba(240,240,240,.9);
-	color: #000;
-}
-
-.select2-container-multi.select2-container-active .select2-choices,
-.select2-drop-active {
-	border-color: #ddd;
-}
-.select2-container-multi.select2-container-active .select2-choices {
-	-webkit-box-shadow: none;
-	box-shadow: none;
-}

settings/css/settings.css

@@ -663,12 +663,3 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 #warning {
 	color: red;
 }
-
-/* SELECT */
-
-.select2-container-multi .select2-choices .select2-search-choice {
-	background-color: rgba(240,240,240,.9)!important;
-	border-color: rgba(240,240,240,.9)!important;
-	box-shadow: none!important;
-	background-image: none!important;
-}