// select2.less // For use in RhodeCode application drop down select boxes; // see style guide documentation for guidelines. // SELECT2 DROPDOWN MENUS //Select2 Dropdown .select2-results{ .box-sizing(border-box); overflow-y: scroll; } .select2-container{margin: 0; position: relative; display: inline-block; zoom: 1;} .select2-container, .select2-drop, .select2-search, .select2-search input {.box-sizing(border-box);} .select2-container .select2-choice{display:block; line-height:1em; -webkit-touch-callout:none;-moz-user-select:none;-ms-user-select:none;user-select:none; } .main .select2-container .select2-choice { background-color: white; } .select2-container .select2-choice abbr { display: none; width: 12px; height: 12px; position: absolute; right: 24px; top: 8px; font-size: 1px; text-decoration: none; border: 0; background: url('../images/select2.png') right top no-repeat; cursor: pointer; outline: 0; } .select2-container.select2-allowclear .select2-choice abbr {display: inline-block;} .select2-container .select2-choice abbr:hover { background-position: right -11px; cursor: pointer; } .select2-drop-mask { border: 0; margin: 0; padding: 0; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 998; background-color: #fff; filter: alpha(opacity=0); } .select2-drop { width: 100%; margin-top: -1px; position: absolute; z-index: 999; top: 100%; background: #fff; color: #000; border: @border-thickness solid @rcblue; border-top: 0; border-radius: 0 0 @border-radius @border-radius; } .select2-drop.select2-drop-above { margin-top: 1px; border-top: @border-thickness solid @rclightblue; border-bottom: 0; border-radius: @border-radius @border-radius 0 0; } .select2-drop-active { border: @border-thickness solid #5897fb; border-top: none; } .select2-drop.select2-drop-above.select2-drop-active {border-top: @border-thickness solid #5897fb;} .select2-drop-auto-width { border-top: @border-thickness solid #aaa; width: auto; } .select2-drop-auto-width .select2-search {padding-top: 4px;} html[dir="rtl"] .select2-container .select2-choice .select2-arrow { left: 0; right: auto; border-left: none; border-right: @border-thickness solid @grey5; border-radius: @border-radius 0 0 @border-radius; } html[dir="rtl"] .select2-container .select2-choice .select2-arrow b {background-position: 2px 1px;} .select2-search { display: inline-block; width: 100%; min-height: 26px; margin: 0; padding-left: 4px; padding-right: 4px; position: relative; z-index: 1000; white-space: nowrap; } .select2-search input { width: 100%; height: auto !important; min-height: 26px; padding: 4px 20px 4px 5px; margin: 0; outline: 0; } html[dir="rtl"] .select2-search input { padding: 4px 5px 4px 20px; background: #fff url('../images/select2.png') no-repeat -37px -22px; } .select2-drop.select2-drop-above .select2-search input {margin-top: 4px;} .select2-dropdown-open .select2-choice .select2-arrow { background: transparent; border-left: none; filter: none; } html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow {border-right: none;} .select2-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* results */ .select2-results { max-height: 200px; padding: 0 0 0 4px; margin: 4px 4px 4px 0; position: relative; overflow-x: hidden; overflow-y: auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html[dir="rtl"] .select2-results { padding: 0 4px 0 0; margin: 4px 0 4px 4px; } .select2-results .select2-disabled{background:@grey6;display:list-item;cursor:default} .select2-results .select2-selected{display:none} .select2-more-results.select2-active{background:#f4f4f4 url('../images/select2-spinner.gif') no-repeat 100%} .select2-container.select2-container-disabled .select2-choice abbr{display:none} .select2-container.select2-container-disabled {background:@grey6;cursor:default} .select2-container.select2-container-disabled .select2-choice {background:@grey6;cursor:default} .select2-container-multi .select2-choices li{float:left;list-style:none} .select2-container-multi .select2-choices .select2-search-field{margin:0;padding:0;white-space:nowrap} .select2-container-multi .select2-choices .select2-search-choice .select2-chosen{cursor:default} .select2-search-choice-close{display:block;width:12px;height:13px;position:absolute;right:3px;top:4px;font-size:1px;outline:none;background:url('../images/select2.png') right top no-repeat} .select2-container-multi .select2-search-choice-close{left:3px} .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover{background-position:right -11px} .select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close{background-position:right -11px} .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close{display:none;background:none} .select2-offscreen,.select2-offscreen:focus{clip:rect(0 0 0 0) !important;width:1px !important;height:1px !important; border:0 !important;margin:0 !important;padding:0 !important;overflow:hidden !important; position: absolute !important;outline:0 !important;left:0 !important;top:0 !important} .select2-display-none, .select2-search-hidden {display:none} .select2-search input { border-color: @rclightblue; } .select2-measure-scrollbar{position:absolute;top:-10000px;left:-10000px;width:100px;height:100px;overflow:scroll} @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:144dpi){ .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b{background-image:url('../images/select2x2.png');background-repeat:no-repeat;background-size:60px 40px;} .select2-search input{background-position:100% -21px} } [class^="input-"] [class^="select2-choice"]>div{display:none} [class^="input-"] .select2-offscreen{position:absolute} select.select2{height:28px;visibility:hidden} .autocomplete-suggestions{overflow:auto} .autocomplete-suggestion{white-space:nowrap;overflow:hidden} /* Retina-ize icons */ @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:144dpi){ .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b{background-image:url('../images/select2x2.png');background-repeat:no-repeat;background-size:60px 40px;} .select2-search input{background-position:100% -21px} } //Internal Select2 Dropdown Menus .drop-menu-core { min-width: 160px; margin: 0 @padding 0 0; padding: 0; border: @border-thickness solid @rcblue; border-radius: @border-radius; color: @rcblue; background-color: white; } .drop-menu-dropdown { .drop-menu-core; .flag_status { margin-top: 0; } } .drop-menu-base { .drop-menu-core; position: relative; display: inline-block; line-height: 1em; z-index: 2; cursor: pointer; .flag_status { margin-top: 0; } a { display:block; padding: .9em; padding-right: 2em; position: relative; &:after { position: absolute; content: "\00A0\25BE"; right: .1em; line-height: 1em; top: 0.4em; width: 1em; font-size: 20px; } } } .drop-menu { .drop-menu-base; width: auto !important; } .drop-menu-no-width { .drop-menu-base; width: auto; } .field-sm .drop-menu { padding: 1px 0 0 0; a { padding: 6px; }; } .select2-search input { width: 100%; margin: .5em 0; padding: .5em; } .select2-no-results { padding: .5em; } .drop-menu-dropdown ul { width: auto; margin: 0; padding: 0; z-index: 50; li { margin: 0; line-height: 1em; list-style-type: none; &:hover, &.select2-highlighted { background-color: @rclightblue; } &.select2-result-with-children { &:hover { background-color: white; } } .select2-result-label { display:block; padding: 8px; font-family: @text-regular; border-bottom: @border-thickness solid @rclightblue; color: @rcblue; cursor: pointer; } &.select2-result-with-children { .select2-result-label { color: @rcdarkblue; cursor: default; font-weight: @text-semibold-weight; font-family: @text-semibold; } ul.select2-result-sub li .select2-result-label { padding-left: 16px; font-family: @text-regular; color: @rcblue; cursor: pointer; } } } } .side-by-side-selector { .left-group, .middle-group, .right-group { margin-bottom: @padding; } }