/* * Document: chosen.less * * Chosen * * MIT License * */ /* @group Base */ .chosen-container { position: relative; display: inline-block; vertical-align: middle; font-size: 13px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .chosen-container .chosen-drop { position: absolute; top: 100%; left: -9999px; z-index: 1041; width: 100%; border: 1px solid @color_highlight; border-top: 0; background: #ffffff; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .chosen-container.chosen-with-drop .chosen-drop { left: 0; } .chosen-container a { cursor: pointer; } .chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name { margin-right: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; color: #999999; } .chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after { content: ":"; padding-left: 2px; vertical-align: top; } /* @end */ /* @group Single Chosen */ .chosen-container-single .chosen-single { position: relative; display: block; overflow: hidden; padding: 0 0 0 8px; height: 34px; border: 1px solid @color_light_secondary; background-color: #ffffff; text-decoration: none; white-space: nowrap; line-height: 24px; border-radius: 4px; color: @color_dark; } .chosen-container-single .chosen-default span { color: #999; } .chosen-container-single .chosen-single span { height: 34px; line-height: 34px; display: block; overflow: hidden; margin-right: 26px; text-overflow: ellipsis; white-space: nowrap; } .chosen-container-single .chosen-single-with-deselect span { margin-right: 38px; } .chosen-container-single .chosen-single abbr { position: absolute; top: 6px; right: 26px; display: block; width: 12px; height: 12px; background: url('@{assets_folder}/jquery.chosen/chosen-sprite.png') -42px 1px no-repeat; font-size: 1px; } .chosen-container-single .chosen-single abbr:hover { background-position: -42px -10px; } .chosen-container-single.chosen-disabled .chosen-single abbr:hover { background-position: -42px -10px; } .chosen-container-single .chosen-single div { position: absolute; top: 0; right: 0; display: block; width: 18px; height: 100%; } .chosen-container-single .chosen-single div b { display: block; margin-top: 6px; width: 100%; height: 100%; background: url('@{assets_folder}/jquery.chosen/chosen-sprite.png') no-repeat 0px 2px; } .chosen-container-single .chosen-search { position: relative; z-index: 1010; margin: 0; padding: 3px 4px; white-space: nowrap; } .chosen-container-single .chosen-search input[type="text"] { margin: 1px 0; padding: 4px 20px 4px 5px; width: 100%; height: auto; outline: 0; border: 1px solid @color_light_secondary; background: #ffffff url('@{assets_folder}/jquery.chosen/chosen-sprite.png') no-repeat 100% -20px; border-radius: 4px; font-size: 1em; line-height: normal; } .chosen-container-single .chosen-drop { margin-top: -1px; background-clip: padding-box; } .chosen-container-single.chosen-container-single-nosearch .chosen-search { position: absolute; left: -9999px; } /* @end */ /* @group Results */ .chosen-container .chosen-results { position: relative; overflow-x: hidden; overflow-y: auto; margin: 0 4px 4px 0; padding: 0 0 0 4px; max-height: 240px; -webkit-overflow-scrolling: touch; } .chosen-container .chosen-results li { display: none; margin: 0; padding: 5px 6px; list-style: none; line-height: 15px; word-wrap: break-word; -webkit-touch-callout: none; } .chosen-container .chosen-results li.active-result { display: list-item; cursor: pointer; } .chosen-container .chosen-results li.disabled-result { display: list-item; color: #ccc; cursor: default; } .chosen-container .chosen-results li.highlighted { background-color: @color_highlight; color: #fff; } .chosen-container .chosen-results li.no-results { display: list-item; background: #f4f4f4; } .chosen-container .chosen-results li.group-result { display: list-item; font-weight: bold; cursor: default; } .chosen-container .chosen-results li.group-option { padding-left: 15px; } .chosen-container .chosen-results li em { font-style: normal; text-decoration: underline; } /* @end */ /* @group Multi Chosen */ .chosen-container-multi .chosen-choices { position: relative; overflow: hidden; margin: 0; padding: 0; width: 100%; height: auto !important; height: 1%; border: 1px solid @color_light_secondary; background-color: #ffffff; cursor: text; border-radius: 4px; } .chosen-container-multi .chosen-choices li { float: left; list-style: none; } .chosen-container-multi .chosen-choices li.search-field { margin: 0; padding: 0; white-space: nowrap; } .chosen-container-multi .chosen-choices li.search-field input[type="text"] { margin: 1px 0; padding: 5px 8px; height: 30px; outline: 0; border: 0 !important; background: transparent !important; box-shadow: none; font-size: 100%; line-height: normal; } .chosen-container-multi .chosen-choices li.search-field .default { color: #999; } .chosen-container-multi .chosen-choices li.search-choice { position: relative; margin: 7px 0 6px 5px; padding: 2px 20px 2px 5px; background: @color_light_ultra; border: 1px solid @color_highlight; background-color: @color_highlight; color: #ffffff; font-weight: 600; font-size: 12px; border-radius: 2px; line-height: 13px; cursor: default; } .chosen-container-multi .chosen-choices li.search-choice span { word-wrap: break-word; } .chosen-container-multi .chosen-choices li.search-choice .search-choice-close { position: absolute; top: 1px; right: 2px; display: block; color: #ffffff; width: 12px; height: 12px; font-size: 12px; } .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before { content: "x"; } .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover { text-decoration: none; } .chosen-container-multi .chosen-choices li.search-choice-disabled { padding-right: 5px; border: 1px solid #ccc; background-color: #e4e4e4; color: #666; } .chosen-container-multi .chosen-choices li.search-choice-focus { background: #d4d4d4; } .chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close { background-position: -42px -10px; } .chosen-container-multi .chosen-results { margin: 0; padding: 0; } .chosen-container-multi .chosen-drop .result-selected { display: list-item; color: #ccc; cursor: default; } /* @end */ /* @group Active */ .chosen-container-active .chosen-single { border: 1px solid @color_highlight; } .chosen-container-active.chosen-with-drop .chosen-single { border: 1px solid @color_highlight; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .chosen-container-active.chosen-with-drop .chosen-single div { border-left: none; background: transparent; } .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -18px 2px; } .chosen-container-active .chosen-choices { border: 1px solid @color_highlight; } .chosen-container-active.chosen-with-drop .chosen-choices { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .chosen-container-active .chosen-choices li.search-field input[type="text"] { color: #111 !important; } /* @end */ /* @group Disabled Support */ .chosen-disabled { opacity: 0.5 !important; cursor: default; } .chosen-disabled .chosen-single { cursor: default; } .chosen-disabled .chosen-choices .search-choice .search-choice-close { cursor: default; } /* @end */ /* @group Right to Left */ .chosen-rtl { text-align: right; } .chosen-rtl .chosen-single { overflow: visible; padding: 0 8px 0 0; } .chosen-rtl .chosen-single span { margin-right: 0; margin-left: 26px; direction: rtl; } .chosen-rtl .chosen-single-with-deselect span { margin-left: 38px; } .chosen-rtl .chosen-single div { right: auto; left: 3px; } .chosen-rtl .chosen-single abbr { right: auto; left: 26px; } .chosen-rtl .chosen-choices li { float: right; } .chosen-rtl .chosen-choices li.search-field input[type="text"] { direction: rtl; } .chosen-rtl .chosen-choices li.search-choice { margin: 3px 5px 3px 0; padding: 3px 5px 3px 19px; } .chosen-rtl .chosen-choices li.search-choice .search-choice-close { right: auto; left: 4px; } .chosen-rtl.chosen-container-single-nosearch .chosen-search, .chosen-rtl .chosen-drop { left: 9999px; } .chosen-rtl.chosen-container-single .chosen-results { margin: 0 0 4px 4px; padding: 0 4px 0 0; } .chosen-rtl .chosen-results li.group-option { padding-right: 15px; padding-left: 0; } .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div { border-right: none; } .chosen-rtl .chosen-search input[type="text"] { padding: 4px 5px 4px 20px; background: white url('@{assets_folder}/jquery.chosen/chosen-sprite.png') no-repeat -30px -20px; background: url('@{assets_folder}/jquery.chosen/chosen-sprite.png') no-repeat -30px -20px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); background: url('@{assets_folder}/jquery.chosen/chosen-sprite.png') no-repeat -30px -20px, -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%); background: url('@{assets_folder}/jquery.chosen/chosen-sprite.png') no-repeat -30px -20px, -moz-linear-gradient(#eeeeee 1%, #ffffff 15%); background: url('@{assets_folder}/jquery.chosen/chosen-sprite.png') no-repeat -30px -20px, -o-linear-gradient(#eeeeee 1%, #ffffff 15%); background: url('@{assets_folder}/jquery.chosen/chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eeeeee 1%, #ffffff 15%); direction: rtl; } .chosen-rtl.chosen-container-single .chosen-single div b { background-position: 6px 2px; } .chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b { background-position: -12px 2px; } /* @end */ /* @group Retina compatibility */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .chosen-rtl .chosen-search input[type="text"], .chosen-container-single .chosen-single abbr, .chosen-container-single .chosen-single div b, .chosen-container-single .chosen-search input[type="text"], .chosen-container-multi .chosen-choices .search-choice .search-choice-close, .chosen-container .chosen-results-scroll-down span, .chosen-container .chosen-results-scroll-up span { background-image: url('@{assets_folder}/jquery.chosen/chosen-sprite@2x.png') !important; background-size: 52px 37px !important; background-repeat: no-repeat !important; } } /* @end */