From 5b07b4d2f41a9f04aedd35b2aff25de04c248b5a Mon Sep 17 00:00:00 2001 From: ciar4n Date: Mon, 5 Sep 2016 12:23:42 +0100 Subject: [PATCH] Chzn flat styling separated to chzn-override.less --- .../templates/isis/css/jui/chosen.css | 467 ------------------ .../templates/isis/css/template-rtl.css | 195 +++++++- administrator/templates/isis/css/template.css | 184 ++++++- .../isis/less/bootstrap/buttons.less | 2 +- .../templates/isis/less/chzn-override.less | 173 +++++++ .../templates/isis/less/template-rtl.less | 11 + .../templates/isis/less/template.less | 34 +- .../templates/isis/less/variables.less | 3 +- 8 files changed, 549 insertions(+), 520 deletions(-) delete mode 100644 administrator/templates/isis/css/jui/chosen.css create mode 100644 administrator/templates/isis/less/chzn-override.less diff --git a/administrator/templates/isis/css/jui/chosen.css b/administrator/templates/isis/css/jui/chosen.css deleted file mode 100644 index b32742eadb74e..0000000000000 --- a/administrator/templates/isis/css/jui/chosen.css +++ /dev/null @@ -1,467 +0,0 @@ -/* @group Base */ -.chzn-container { - position: relative; - display: inline-block; - vertical-align: middle; - font-size: 13px; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} -.chzn-container .chzn-drop { - position: absolute; - top: 100%; - left: -9999px; - z-index: 1010; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - border: 1px solid #aaa; - border-top: 0; - background: #fff; - /* box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); */ -} -.chzn-container.chzn-with-drop .chzn-drop { - left: 0; -} -.chzn-container a { - cursor: pointer; -} -.chzn-container .search-choice .group-name, .chzn-container .chzn-single .group-name { - margin-right: 4px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - font-weight: normal; - color: #999999; -} -.chzn-container .search-choice .group-name:after, .chzn-container .chzn-single .group-name:after { - content: ":"; - padding-left: 2px; - vertical-align: top; -} - -/* @end */ -/* @group Single Chosen */ -.chzn-container-single .chzn-single { - position: relative; - display: block; - overflow: hidden; - padding: 0 0 0 8px; -/* background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4)); - background: -webkit-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); - background: -moz-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); - background: -o-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); - background: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); - background-clip: padding-box; - box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1); */ - color: #444; - text-decoration: none; - white-space: nowrap; - - background-image: none; - background-color: #ffffff; - border-radius: 3px; - line-height: 26px; - border: 1px solid #cccccc; - border: 1px solid rgba(0,0,0,0.2); - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); -} -.chzn-container-single .chzn-default { - color: #999; -} -.chzn-container-single .chzn-single span { - display: block; - overflow: hidden; - margin-right: 26px; - text-overflow: ellipsis; - white-space: nowrap; -} -.chzn-container-single .chzn-single-with-deselect span { - margin-right: 38px; -} -.chzn-container-single .chzn-single abbr { - position: absolute; - top: 0; - right: 36px; - display: block; - width: 12px; - height: 12px; - color: #444; -} -.chzn-container-single .chzn-single abbr:before { - font-family: IcoMoon; - content: '\0049'; - font-size: 10px; - line-height: 18px; -} -.chzn-container-single .chzn-single abbr:hover, -.chzn-container-single.chzn-disabled .chzn-single abbr:hover { - color: #000; -} -.chzn-container-single .chzn-single div { - position: absolute; - top: 0; - right: 0; - display: block; - width: 18px; - - bottom: 0px; - background-color: #f3f3f3; - border-left: 1px solid #cccccc; - width: 28px; - text-align: center; -} -.chzn-container-single .chzn-single div b { - display: block; - width: 100%; - height: 100%; - - display: inline-block; - height: 16px; - width: 16px; -} -.chzn-container-single .chzn-single div b:after { - content: '\E011'; - font-family: IcoMoon; -} -.chzn-container-single .chzn-search { - position: relative; - z-index: 1010; - margin: 0; - padding: 3px 4px; - white-space: nowrap; - color: #555; -} -.chzn-container-single .chzn-search:after { - content: '\0053'; - font-family: IcoMoon; - position: relative; - right: 20px; - top: 2px; -} -.chzn-container-single .chzn-search input { - margin: 1px 0; - padding: 4px 20px 4px 5px; - outline: 0; - border: 1px solid #aaa; - font-family: sans-serif; - font-size: 1em; - width: 100%; - height: 25px; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - -webkit-box-sizing: border-box; - -khtml-box-sizing: border-box; - box-sizing: border-box; -} -.chzn-container-single .chzn-drop { - margin-top: -1px; - border-radius: 0 0 4px 4px; - background-clip: padding-box; - border-color: #0088cc; -} -.chzn-container-single-nosearch .chzn-search { - position: absolute; - left: -9999px; -} -/* @end */ -/* @group Multi Chosen */ -.chzn-container-multi .chzn-choices { - background-color: #ffffff; - border: 1px solid #cccccc; - border-radius: 3px; - margin: 0; - padding: 0; - cursor: text; - overflow: hidden; - height: auto !important; - height: 1%; - position: relative; - /*width: 100%;*/ - box-sizing: border-box; -} -.chzn-container-multi .chzn-choices li { - float: left; - list-style: none; -} -.chzn-container-multi .chzn-choices .search-field { - white-space: nowrap; - margin: 0; - padding: 0; -} -.chzn-container-multi .chzn-choices .search-field input { - color: #666; - background: transparent !important; - border: 0 !important; - font-family: sans-serif; - font-size: 100%; - height: 100%; - padding: 3px 5px; - margin: 1px 0; - outline: 0; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.chzn-container-multi .chzn-choices .search-field .default { - color: #999; -} -.chzn-container-multi .chzn-choices .search-choice { - background-clip: padding-box; - background-color: #0088cc; - border-radius: 3px; - color: #fff; - cursor: default; - line-height: 20px; - margin: 3px 0 3px 5px; - padding: 0 7px; -} -.chzn-container-multi .chzn-choices .search-choice.search-choice-disabled { - background-color: #fff; - color: #999; - border: 1px solid #cccccc; - padding-right: 5px; -} -.chzn-container-multi .chzn-choices .search-choice-focus { - background: #d4d4d4; -} -.chzn-container-multi .chzn-choices .search-choice .search-choice-close { - color: #f5f5f5; - display: inline-block; - margin-left: 5px; -} -.chzn-container-multi .chzn-choices .search-choice .search-choice-close:before { - font-family: IcoMoon; - content: '\004A'; - position: relative; - right: 1px; - top: 0; -} -.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover, -.chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close { - text-decoration: none; - cursor: pointer; - color: #fff; -} -/* @end */ -/* @group Results */ -.chzn-container .chzn-results { - background-color: #fff; - border-radius: 0 0 3px 3px; - margin: 0; - max-height: 240px; - padding: 0; - position: relative; - overflow-x: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; -} -.chzn-container-multi .chzn-results { - margin: 0; - padding: 0; -} -.chzn-container .chzn-results li { - display: block; - line-height: 15px; - padding: 6px 10px; - margin: 0; - list-style: none; -} -.chzn-container .chzn-results .active-result { - cursor: pointer; - display: list-item; -} -.chzn-container .chzn-results .highlighted { - background-color: #0088cc; - color: #fff; -} -.chzn-container .chzn-results li em { - background: #feffde; - font-style: normal; -} -.chzn-container .chzn-results .highlighted em { - background: transparent; -} -.chzn-container .chzn-results .no-results { - background: #f4f4f4; - display: list-item; -} -.chzn-container .chzn-results .group-result { - cursor: default; - color: #000; - font-weight: bold; -} -.chzn-container .chzn-results .group-option { - padding-left: 15px; -} -.chzn-container-multi .chzn-drop .result-selected { - display: none; -} -.chzn-container .chzn-results-scroll { - background: white; - margin: 0 4px; - position: absolute; - text-align: center; - width: 321px; - /* This should by dynamic with js */ - z-index: 1; -} -.chzn-container .chzn-results-scroll span { - display: inline-block; - height: 17px; - text-indent: -5000px; - width: 9px; -} -.chzn-container .chzn-results-scroll-down { - bottom: 0; -} -.chzn-container .chzn-results-scroll-down span:before { - content: '\E007'; - font-family: IcoMoon; -} -.chzn-container .chzn-results-scroll-up span:before { - content: '\E005'; - font-family: IcoMoon; -} -/* @end */ -/* @group Active */ -.chzn-container-active .chzn-single { - border: 1px solid #0088cc; - color: #0088cc; -} -.chzn-container-active.chzn-with-drop .chzn-single { - border: 1px solid #0088cc; - -webkit-border-bottom-right-radius: 0; - -moz-border-radius-bottomright: 0; - border-bottom-right-radius: 0; - -webkit-border-bottom-left-radius: 0; - -moz-border-radius-bottomleft: 0; - border-bottom-left-radius: 0; -} -.chzn-container-active.chzn-with-drop .chzn-single div { -/* background: transparent; - border-left: none;*/ - border-bottom: 1px solid #cccccc; - border-bottom-left-radius: 3px; -} -.chzn-container-active.chzn-with-drop .chzn-single[rel="value_0"] div, -.chzn-container-active.chzn-with-drop .chzn-single[rel="value_1"] div { - border-bottom: none; -} -.chzn-container-active.chzn-with-drop .chzn-single div b:after { - content: '\E00F'; -} -.chzn-container-active .chzn-choices { - border: 1px solid #0088cc; -} -.chzn-container-active .chzn-choices .search-field input { - color: #111 !important; -} -/* @end */ -/* @group Disabled Support */ -.chzn-disabled { - cursor: default; - opacity: 0.5 !important; -} -.chzn-disabled .chzn-single { - cursor: default; -} -.chzn-disabled .chzn-choices .search-choice .search-choice-close { - cursor: default; -} -/* @end */ -/* @group error & success */ -.control-group.success .chzn-container .chzn-single, -.control-group.success .chzn-container .chzn-drop, -.control-group.success .chzn-container .chzn-choices { - border-color: #468847; -} -.control-group.success .chzn-container-active .chzn-single, -.control-group.success .chzn-container-active .chzn-drop, -.control-group.success .chzn-container-active .chzn-choices { - border-color: #356635; -} -.control-group.success .chzn-container-active .chzn-single, -.control-group.success .chzn-container-active .chzn-choices { - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; -} -.control-group.success .chzn-container .chzn-single, -.control-group.success .chzn-container .chzn-choices .search-choice, -.control-group.success .chzn-container .chzn-choices .search-field input { - color: #fff; -} -.control-group.error .chzn-container .chzn-single, -.control-group.error .chzn-container .chzn-drop, -.control-group.error .chzn-container .chzn-choices { - border-color: #b94a48; -} -.control-group.error .chzn-container-active .chzn-single, -.control-group.error .chzn-container-active .chzn-drop, -.control-group.error .chzn-container-active .chzn-choices { - border-color: #953b39; -} -.control-group.error .chzn-container-active .chzn-single, -.control-group.error .chzn-container-active .chzn-choices { - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; -} -.control-group.error .chzn-container .chzn-single, -.control-group.error .chzn-container .chzn-choices .search-choice, -.control-group.error .chzn-container .chzn-choices .search-field input { - color: #fff; -} -.control-group.info .chzn-container .chzn-single, -.control-group.info .chzn-container .chzn-drop, -.control-group.info .chzn-container .chzn-choices { - border-color: #3a87ad; -} -.control-group.info .chzn-container-active .chzn-single, -.control-group.info .chzn-container-active .chzn-drop, -.control-group.info .chzn-container-active .chzn-choices { - border-color: #2d6987; -} -.control-group.info .chzn-container-active .chzn-single, -.control-group.info .chzn-container-active .chzn-choices { - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; -} -.control-group.info .chzn-container .chzn-single, -.control-group.info .chzn-container .chzn-choices .search-choice, -.control-group.info .chzn-container .chzn-choices .search-field input { - color: #fff; -} -.control-group.warning .chzn-container .chzn-single, -.control-group.warning .chzn-container .chzn-drop, -.control-group.warning .chzn-container .chzn-choices { - border-color: #c09853; -} -.control-group.warning .chzn-container-active .chzn-single, -.control-group.warning .chzn-container-active .chzn-drop, -.control-group.warning .chzn-container-active .chzn-choices { - border-color: #a47e3c; -} -.control-group.warning .chzn-container-active .chzn-single, -.control-group.warning .chzn-container-active .chzn-choices { - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; -} -.control-group.warning .chzn-container .chzn-single, -.control-group.warning .chzn-container .chzn-choices .search-choice, -.control-group.warning .chzn-container .chzn-choices .search-field input { - color: #555; -} - -/* com_module override */ -.js-stools .js-stools-container-bar .js-stools-field-filter .chzn-container { - margin: 1px 0; - padding: 0 !important; -} - -/* @end */ \ No newline at end of file diff --git a/administrator/templates/isis/css/template-rtl.css b/administrator/templates/isis/css/template-rtl.css index 2727fa9f88b20..5387144f325e6 100644 --- a/administrator/templates/isis/css/template-rtl.css +++ b/administrator/templates/isis/css/template-rtl.css @@ -7037,6 +7037,161 @@ div.modal.jviewport-width100 { .icon-back:before { content: "\e008"; } +.chzn-container .chzn-drop { + border-radius: 0 0 3px 3px; +} +.chzn-container-single .chzn-single { + background-color: #ffffff; + background-clip: inherit; + background-image: none; + border: 1px solid #cccccc; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 3px; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); + height: auto; + line-height: 26px; +} +.chzn-container-single .chzn-single div { + background-color: #f3f3f3; + border-left: 1px solid #cccccc; + bottom: 0; + height: auto; + text-align: center; + width: 28px; +} +.chzn-container-single .chzn-single div b { + background-image: none; + display: inline-block; +} +.chzn-container-single .chzn-single div b:after { + content: '\E011'; + font-family: IcoMoon; +} +.chzn-container-single .chzn-single abbr { + background: none; + right: 36px; + top: 0; +} +.chzn-container-single .chzn-single abbr:before { + font-family: IcoMoon; + content: '\0049'; + font-size: 10px; + line-height: 26px; +} +.chzn-container-single .chzn-single abbr:hover { + color: #000; +} +.chzn-container-single .chzn-search:after { + content: '\0053'; + font-family: IcoMoon; + position: relative; + right: 20px; + top: 2px; +} +.chzn-container-single .chzn-search input[type="text"] { + background: none; + border-radius: 3px; + border: 1px solid #cccccc; + box-shadow: none; + height: 25px; +} +.chzn-container-single .chzn-search input[type="text"]:focus { + border-color: #3071a9; +} +.chzn-container-single .chzn-drop { + background-clip: padding-box; + border-color: #3071a9; + border-radius: 0 0 3px 3px; +} +.chzn-container-active .chzn-single { + color: #3071a9; +} +.chzn-container-active.chzn-with-drop .chzn-single { + background-image: none; + border: 1px solid #3071a9; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.chzn-container-active.chzn-with-drop .chzn-single div { + background-color: #f3f3f3; + border-bottom: 1px solid #cccccc; + border-bottom-left-radius: 3px; + border-left: 1px solid #cccccc; +} +.chzn-container-active.chzn-with-drop .chzn-single div b:after { + content: '\E00F'; + font-family: IcoMoon; +} +.chzn-container-active.chzn-container-multi .chzn-choices { + border: 1px solid #3071a9; + box-shadow: none; +} +.chzn-container .chzn-results { + background-color: #ffffff; + border-radius: 0 0 3px 3px; + margin: 0; + padding: 0; +} +.chzn-container .chzn-results li.highlighted { + background-color: #3071a9; + background-image: none; +} +.chzn-color[rel="value_"] div { + background-color: #f3f3f3; + border-left: 1px solid #cccccc; +} +.chzn-color-state.chzn-single div, +.chzn-color.chzn-single[rel="value_0"] div, +.chzn-color.chzn-single[rel="value_1"] div, +.chzn-color-state.chzn-single[rel="value_-1"] div, +.chzn-color-state.chzn-single[rel="value_-2"] div, +.chzn-color.chzn-single[rel="value_hide"] div, +.chzn-color.chzn-single[rel="value_show_no_link"] div, +.chzn-color.chzn-single[rel="value_show_with_link"] div { + background-color: transparent !important; + border: none !important; +} +.chzn-container-active .chzn-choices { + border: 1px solid #3071a9; +} +.chzn-container-multi .chzn-choices { + background-image: none; + border-radius: 3px; + border: 1px solid #cccccc; +} +.chzn-container-multi .chzn-choices li.search-choice { + background-color: #3071a9; + background-image: none; + border: 0; + box-shadow: none; + color: #fff; + line-height: 20px; + padding: 0 7px; +} +.chzn-container-multi .chzn-choices li.search-choice .search-choice-close { + color: #f5f5f5; + display: inline-block; + margin-left: 5px; + position: relative; + top: 0; + left: 0; + background-image: none; + font-size: inherit; +} +.chzn-container-multi .chzn-choices li.search-choice .search-choice-close:hover { + text-decoration: none; +} +.chzn-container-multi .chzn-choices li.search-choice .search-choice-close:before { + font-family: IcoMoon; + content: '\004A'; + position: relative; + right: 1px; + top: 0; +} +.js-stools .js-stools-container-bar .js-stools-field-filter .chzn-container { + margin: 1px 0; + padding: 0 !important; +} /* Body */ html { height: 100%; @@ -7233,6 +7388,12 @@ body .navbar-fixed-top { -moz-box-shadow: none; box-shadow: none; } +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus, +.dropdown-submenu:hover > a, +.dropdown-submenu:focus > a { + background-image: none; +} .navbar-fixed-bottom { bottom: 0; } @@ -8079,21 +8240,6 @@ input.input-large-text { margin-bottom: 10px; } /* Chosen color styles */ -[class^="chzn-color"].chzn-single, -[class*=" chzn-color"].chzn-single, -[class^="chzn-color"].chzn-single .chzn-single-with-drop, -[class*=" chzn-color"].chzn-single .chzn-single-with-drop { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -[class^="chzn-color"].chzn-single div, -[class*=" chzn-color"].chzn-single div, -[class^="chzn-color"].chzn-single .chzn-single-with-drop div, -[class*=" chzn-color"].chzn-single .chzn-single-with-drop div { - background-color: transparent; - border: none; -} .chzn-color.chzn-single[rel="value_1"], .chzn-color-reverse.chzn-single[rel="value_0"], .chzn-color-state.chzn-single[rel="value_1"], @@ -8102,7 +8248,8 @@ input.input-large-text { background-color: #46a546; *background-color: #46a546; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ - color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + color: #ffffff; } .chzn-color.chzn-single[rel="value_1"]:hover, .chzn-color-reverse.chzn-single[rel="value_0"]:hover, @@ -8159,7 +8306,8 @@ input.input-large-text { background-color: #bd362f; *background-color: #bd362f; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ - color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + color: #ffffff; } .chzn-color.chzn-single[rel="value_0"]:hover, .chzn-color-reverse.chzn-single[rel="value_1"]:hover, @@ -8369,7 +8517,7 @@ textarea:focus, input:focus, .uneditable-input:focus { box-shadow: none; - border: 1px solid #3071A9 !important; + border: 1px solid #3071a9 !important; } /* Customize Textarea Resizing */ textarea { @@ -9124,6 +9272,13 @@ input[type="url"] { .chzn-container-single .chzn-single abbr { left: 36px; } +.chzn-container-active.chzn-with-drop .chzn-single div { + background-color: #f3f3f3; + border-bottom: 1px solid #cccccc; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 3px; + border-left: 1px solid #cccccc; +} .chzn-container-multi .chzn-choices .search-choice { padding-left: 7px; } @@ -9135,6 +9290,10 @@ input[type="url"] { .chzn-container .chzn-single.chzn-color[rel="value_1"] div { border-right: none; } +.chzn-container-single .chzn-search::after { + left: 20px; + right: auto; +} .container-logo { padding-top: 0; float: left; diff --git a/administrator/templates/isis/css/template.css b/administrator/templates/isis/css/template.css index 43f3c3396a942..01c1cc8175583 100644 --- a/administrator/templates/isis/css/template.css +++ b/administrator/templates/isis/css/template.css @@ -7037,6 +7037,161 @@ div.modal.jviewport-width100 { .icon-back:before { content: "\e008"; } +.chzn-container .chzn-drop { + border-radius: 0 0 3px 3px; +} +.chzn-container-single .chzn-single { + background-color: #ffffff; + background-clip: inherit; + background-image: none; + border: 1px solid #cccccc; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 3px; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); + height: auto; + line-height: 26px; +} +.chzn-container-single .chzn-single div { + background-color: #f3f3f3; + border-left: 1px solid #cccccc; + bottom: 0; + height: auto; + text-align: center; + width: 28px; +} +.chzn-container-single .chzn-single div b { + background-image: none; + display: inline-block; +} +.chzn-container-single .chzn-single div b:after { + content: '\E011'; + font-family: IcoMoon; +} +.chzn-container-single .chzn-single abbr { + background: none; + right: 36px; + top: 0; +} +.chzn-container-single .chzn-single abbr:before { + font-family: IcoMoon; + content: '\0049'; + font-size: 10px; + line-height: 26px; +} +.chzn-container-single .chzn-single abbr:hover { + color: #000; +} +.chzn-container-single .chzn-search:after { + content: '\0053'; + font-family: IcoMoon; + position: relative; + right: 20px; + top: 2px; +} +.chzn-container-single .chzn-search input[type="text"] { + background: none; + border-radius: 3px; + border: 1px solid #cccccc; + box-shadow: none; + height: 25px; +} +.chzn-container-single .chzn-search input[type="text"]:focus { + border-color: #3071a9; +} +.chzn-container-single .chzn-drop { + background-clip: padding-box; + border-color: #3071a9; + border-radius: 0 0 3px 3px; +} +.chzn-container-active .chzn-single { + color: #3071a9; +} +.chzn-container-active.chzn-with-drop .chzn-single { + background-image: none; + border: 1px solid #3071a9; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.chzn-container-active.chzn-with-drop .chzn-single div { + background-color: #f3f3f3; + border-bottom: 1px solid #cccccc; + border-bottom-left-radius: 3px; + border-left: 1px solid #cccccc; +} +.chzn-container-active.chzn-with-drop .chzn-single div b:after { + content: '\E00F'; + font-family: IcoMoon; +} +.chzn-container-active.chzn-container-multi .chzn-choices { + border: 1px solid #3071a9; + box-shadow: none; +} +.chzn-container .chzn-results { + background-color: #ffffff; + border-radius: 0 0 3px 3px; + margin: 0; + padding: 0; +} +.chzn-container .chzn-results li.highlighted { + background-color: #3071a9; + background-image: none; +} +.chzn-color[rel="value_"] div { + background-color: #f3f3f3; + border-left: 1px solid #cccccc; +} +.chzn-color-state.chzn-single div, +.chzn-color.chzn-single[rel="value_0"] div, +.chzn-color.chzn-single[rel="value_1"] div, +.chzn-color-state.chzn-single[rel="value_-1"] div, +.chzn-color-state.chzn-single[rel="value_-2"] div, +.chzn-color.chzn-single[rel="value_hide"] div, +.chzn-color.chzn-single[rel="value_show_no_link"] div, +.chzn-color.chzn-single[rel="value_show_with_link"] div { + background-color: transparent !important; + border: none !important; +} +.chzn-container-active .chzn-choices { + border: 1px solid #3071a9; +} +.chzn-container-multi .chzn-choices { + background-image: none; + border-radius: 3px; + border: 1px solid #cccccc; +} +.chzn-container-multi .chzn-choices li.search-choice { + background-color: #3071a9; + background-image: none; + border: 0; + box-shadow: none; + color: #fff; + line-height: 20px; + padding: 0 7px; +} +.chzn-container-multi .chzn-choices li.search-choice .search-choice-close { + color: #f5f5f5; + display: inline-block; + margin-left: 5px; + position: relative; + top: 0; + left: 0; + background-image: none; + font-size: inherit; +} +.chzn-container-multi .chzn-choices li.search-choice .search-choice-close:hover { + text-decoration: none; +} +.chzn-container-multi .chzn-choices li.search-choice .search-choice-close:before { + font-family: IcoMoon; + content: '\004A'; + position: relative; + right: 1px; + top: 0; +} +.js-stools .js-stools-container-bar .js-stools-field-filter .chzn-container { + margin: 1px 0; + padding: 0 !important; +} /* Body */ html { height: 100%; @@ -7233,6 +7388,12 @@ body .navbar-fixed-top { -moz-box-shadow: none; box-shadow: none; } +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus, +.dropdown-submenu:hover > a, +.dropdown-submenu:focus > a { + background-image: none; +} .navbar-fixed-bottom { bottom: 0; } @@ -8079,21 +8240,6 @@ input.input-large-text { margin-bottom: 10px; } /* Chosen color styles */ -[class^="chzn-color"].chzn-single, -[class*=" chzn-color"].chzn-single, -[class^="chzn-color"].chzn-single .chzn-single-with-drop, -[class*=" chzn-color"].chzn-single .chzn-single-with-drop { - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -[class^="chzn-color"].chzn-single div, -[class*=" chzn-color"].chzn-single div, -[class^="chzn-color"].chzn-single .chzn-single-with-drop div, -[class*=" chzn-color"].chzn-single .chzn-single-with-drop div { - background-color: transparent; - border: none; -} .chzn-color.chzn-single[rel="value_1"], .chzn-color-reverse.chzn-single[rel="value_0"], .chzn-color-state.chzn-single[rel="value_1"], @@ -8102,7 +8248,8 @@ input.input-large-text { background-color: #46a546; *background-color: #46a546; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ - color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + color: #ffffff; } .chzn-color.chzn-single[rel="value_1"]:hover, .chzn-color-reverse.chzn-single[rel="value_0"]:hover, @@ -8159,7 +8306,8 @@ input.input-large-text { background-color: #bd362f; *background-color: #bd362f; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ - color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + color: #ffffff; } .chzn-color.chzn-single[rel="value_0"]:hover, .chzn-color-reverse.chzn-single[rel="value_1"]:hover, @@ -8369,7 +8517,7 @@ textarea:focus, input:focus, .uneditable-input:focus { box-shadow: none; - border: 1px solid #3071A9 !important; + border: 1px solid #3071a9 !important; } /* Customize Textarea Resizing */ textarea { diff --git a/administrator/templates/isis/less/bootstrap/buttons.less b/administrator/templates/isis/less/bootstrap/buttons.less index 35557891e6ed1..7f6a2481074d0 100644 --- a/administrator/templates/isis/less/bootstrap/buttons.less +++ b/administrator/templates/isis/less/bootstrap/buttons.less @@ -17,7 +17,7 @@ text-align: center; vertical-align: middle; cursor: pointer; - background-color: #f3f3f3; + background-color: @btnBackground; color: #333; // .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); border: 1px solid @btnBorder; diff --git a/administrator/templates/isis/less/chzn-override.less b/administrator/templates/isis/less/chzn-override.less new file mode 100644 index 0000000000000..371c91ceaca44 --- /dev/null +++ b/administrator/templates/isis/less/chzn-override.less @@ -0,0 +1,173 @@ +.chzn-container { + .chzn-drop { + border-radius: 0 0 3px 3px; + } +} +.chzn-container-single { + .chzn-single { + background-color: @white; + background-clip: inherit; + background-image: none; + border: 1px solid @inputBorder; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 3px; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); + height: auto; + line-height: 26px; + div { + background-color: @btnBackground; + border-left: 1px solid @inputBorder; + bottom: 0; + height: auto; + text-align: center; + width: 28px; + b { + background-image: none; + display: inline-block; + &:after { + content: '\E011'; + font-family: IcoMoon; + } + } + } + abbr { + background: none; + right: 36px; + top: 0; + &:before { + font-family: IcoMoon; + content: '\0049'; + font-size: 10px; + line-height: 26px; + } + &:hover { + color: #000; + } + } + } + .chzn-search { + &:after { + content: '\0053'; + font-family: IcoMoon; + position: relative; + right: 20px; + top: 2px; + } + input[type="text"] { + background: none; + border-radius: @inputBorderRadius; + border: 1px solid @inputBorder; + box-shadow: none; + height: 25px; + &:focus { + border-color: @inputBorderHighlight; + } + } + } + .chzn-drop { + background-clip: padding-box; + border-color: @inputBorderHighlight; + border-radius: 0 0 3px 3px; + } +} +.chzn-container-active { + .chzn-single { + color: @inputBorderHighlight; + } + &.chzn-with-drop { + .chzn-single { + background-image: none; + border: 1px solid @inputBorderHighlight; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + div { + background-color: @btnBackground; + border-bottom: 1px solid @inputBorder; + border-bottom-left-radius: @inputBorderRadius; + border-left: 1px solid @inputBorder; + b { + &:after { + content: '\E00F'; + font-family: IcoMoon; + } + } + } + } + } + &.chzn-container-multi { + .chzn-choices { + border: 1px solid @inputBorderHighlight; + box-shadow: none; + } + } +} +.chzn-container .chzn-results { + background-color: @white; + border-radius: 0 0 @inputBorderRadius @inputBorderRadius; + margin: 0; + padding: 0; + li.highlighted { + background-color: @inputBorderHighlight; + background-image: none; + } +} +.chzn-color[rel="value_"] div { + background-color: @btnBackground; + border-left: 1px solid @inputBorder; +} +.chzn-color-state.chzn-single, +.chzn-color.chzn-single[rel="value_0"], +.chzn-color.chzn-single[rel="value_1"], +.chzn-color-state.chzn-single[rel="value_-1"], +.chzn-color-state.chzn-single[rel="value_-2"], +.chzn-color.chzn-single[rel="value_hide"], +.chzn-color.chzn-single[rel="value_show_no_link"], +.chzn-color.chzn-single[rel="value_show_with_link"] { + div { + background-color: transparent !important; + border: none !important; + } +} +.chzn-container-active .chzn-choices { + border: 1px solid @inputBorderHighlight; +} +.chzn-container-multi { + .chzn-choices { + background-image: none; + border-radius: @inputBorderRadius; + border: 1px solid @inputBorder; + li.search-choice { + background-color: @inputBorderHighlight; + background-image: none; + border: 0; + box-shadow: none; + color: #fff; + line-height: 20px; + padding: 0 7px; + .search-choice-close { + color: #f5f5f5; + display: inline-block; + margin-left: 5px; + position: relative; + top: 0; + left: 0; + background-image: none; + font-size: inherit; + &:hover { + text-decoration: none; + } + &:before { + font-family: IcoMoon; + content: '\004A'; + position: relative; + right: 1px; + top: 0; + } + } + } + } +} +.js-stools .js-stools-container-bar .js-stools-field-filter .chzn-container { + margin: 1px 0; + padding: 0 !important; +} \ No newline at end of file diff --git a/administrator/templates/isis/less/template-rtl.less b/administrator/templates/isis/less/template-rtl.less index 20b18fe91119f..1937b50077fbf 100644 --- a/administrator/templates/isis/less/template-rtl.less +++ b/administrator/templates/isis/less/template-rtl.less @@ -67,6 +67,13 @@ left: 36px; } } +.chzn-container-active.chzn-with-drop .chzn-single div { + background-color: #f3f3f3; + border-bottom: 1px solid #cccccc; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 3px; + border-left: 1px solid #cccccc; +} .chzn-container-multi .chzn-choices .search-choice { padding-left: 7px; .search-choice-close { @@ -78,6 +85,10 @@ .chzn-container .chzn-single.chzn-color[rel="value_1"] div { border-right: none; } +.chzn-container-single .chzn-search::after { + left: 20px; + right: auto; +} .container-logo { padding-top: 0; diff --git a/administrator/templates/isis/less/template.less b/administrator/templates/isis/less/template.less index f8ce4d7f89717..41d909f3b6582 100644 --- a/administrator/templates/isis/less/template.less +++ b/administrator/templates/isis/less/template.less @@ -4,6 +4,13 @@ @import "variables.less"; // Custom for this template @import "bootstrap/mixins.less"; +#grid { + .core { + .span(@gridColumns) { + width: (@gridColumnWidth * @gridColumns) + (@gridGutterWidth * (@gridColumns - 1)); + } + } +}; // Grid system and page structure @import "../../../../media/jui/less/scaffolding.less"; @import "../../../../media/jui/less/grid.less"; @@ -67,6 +74,8 @@ @import "../../../../media/jui/less/responsive-767px-max.joomla.less"; // Icon Font @import "icomoon.less"; +// Chosen.css Flat Override +@import "chzn-override.less"; /* Body */ html { height: 100%; @@ -282,6 +291,9 @@ body .navbar-fixed-top { .box-shadow(none); } } +.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a { + background-image: none; +} // Fixed to bottom .navbar-fixed-bottom { @@ -1231,24 +1243,14 @@ input.input-large-text { margin-bottom: 10px; } /* Chosen color styles */ -[class^="chzn-color"].chzn-single, -[class*=" chzn-color"].chzn-single, -[class^="chzn-color"].chzn-single .chzn-single-with-drop, -[class*=" chzn-color"].chzn-single .chzn-single-with-drop { - .box-shadow(none); - div { - background-color: transparent; - border: none; - } -} - .chzn-color.chzn-single[rel="value_1"], .chzn-color-reverse.chzn-single[rel="value_0"], .chzn-color-state.chzn-single[rel="value_1"], .chzn-color.chzn-single[rel="value_show_no_link"], .chzn-color.chzn-single[rel="value_show_with_link"] { .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); - color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + color: #ffffff; } .chzn-color.chzn-single[rel="value_0"], @@ -1258,7 +1260,8 @@ input.input-large-text { .chzn-color-state.chzn-single[rel="value_-2"], .chzn-color.chzn-single[rel="value_hide"] { .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); - color: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + color: #ffffff; } .chzn-color-state { @@ -1429,7 +1432,7 @@ textarea, input, .uneditable-input { } textarea:focus, input:focus, .uneditable-input:focus { box-shadow: none; - border: 1px solid #3071A9 !important; + border: 1px solid @inputBorderHighlight !important; } /* Customize Textarea Resizing */ @@ -1496,4 +1499,5 @@ body.modal-open { -webkit-border-radius: 0 @inputBorderRadius @inputBorderRadius 0; -moz-border-radius: 0 @inputBorderRadius @inputBorderRadius 0; border-radius: 0 @inputBorderRadius @inputBorderRadius 0; -} \ No newline at end of file +} + diff --git a/administrator/templates/isis/less/variables.less b/administrator/templates/isis/less/variables.less index 6706d11f3686d..217eba695d75d 100644 --- a/administrator/templates/isis/less/variables.less +++ b/administrator/templates/isis/less/variables.less @@ -89,7 +89,7 @@ // Buttons // ------------------------- -@btnBackground: @grayLighter; +@btnBackground: #f3f3f3; @btnBackgroundHighlight: darken(@grayLighter, 3%); @btnBorder: lighten(@grayLight, 10%); @@ -118,6 +118,7 @@ // ------------------------- @inputBackground: @white; @inputBorder: #ccc; +@inputBorderHighlight: #3071A9; @inputBorderRadius: 3px; @inputDisabledBackground: @grayLighter; @formActionsBackground: #F0F0F0;