From 66258f55e63ed460d2967a6541b77cf2fc3e5361 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Tue, 18 Oct 2016 19:42:39 +0200 Subject: [PATCH] move select2 styles to core so it's universal, not only for tags Signed-off-by: Jan-Christoph Borchardt --- core/css/inputs.css | 114 +++++++++++++++++++++++++++++++++++--- core/css/systemtags.css | 65 +--------------------- settings/css/settings.css | 9 --- 3 files changed, 110 insertions(+), 78 deletions(-) diff --git a/core/css/inputs.css b/core/css/inputs.css index 94b705752e..02db7fa58c 100644 --- a/core/css/inputs.css +++ b/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,116 @@ select:hover { } + +/* select2 adjustments */ +#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; - border-radius: 3px; - color: #333; - background-image: none; + 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: 3px 3px 3px 0 !important; + padding: 2px 0 !important; + min-height: auto !important; } .select2-dropdown-open .select2-choices { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border: 1px solid #3875d7; + border-bottom-left-radius: 0 !important; + border-bottom-right-radius: 0 !important; } +.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 +356,7 @@ select:hover { } + /* correctly align images inside of buttons */ input img, button img, .button img { vertical-align: text-bottom; diff --git a/core/css/systemtags.css b/core/css/systemtags.css index 22e41ea53c..d26f07bae8 100644 --- a/core/css/systemtags.css +++ b/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; - top: 3px; + right: 5px; } .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 { - display: none; -} -.systemtags-select2-container .select2-choices .select2-search-field input { - line-height: 20px; -} -.systemtags-select2-dropdown .label { +.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; -} diff --git a/settings/css/settings.css b/settings/css/settings.css index 00588beabc..39f4c28a3a 100644 --- a/settings/css/settings.css +++ b/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; -}