rhodecode/public/css/select2.less

// 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; box-shadow: @button-shadow;}
.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 @grey5;
    border-radius: @border-radius;
    color: @grey2;
    background-color: white;

    a {
        color: @grey2;

        &:hover {
            color: @rcdarkblue;
        }
    }
}

.drop-menu-dropdown {
    .drop-menu-core;
}

.drop-menu-base {
    .drop-menu-core;
    position: relative;
    display: inline-block;
    line-height: 1em;
    z-index: 2;
    cursor: pointer;

    a {
        display:block;
        padding: .7em;
        padding-right: 2em;
        position: relative;

        &:after {
            position: absolute;
            content: "\00A0\25BE";
            right: .1em;
            line-height: 1em;
            top: 0.2em;
            width: 1em;
            font-size: 20px;
        }
    }
}

.drop-menu {
    .drop-menu-base;
    width: auto !important;
}

.drop-menu-no-width {
  .drop-menu-base;
  width: auto;
  min-width: 0;
  margin: 0;
}

.field-sm .drop-menu {
    padding: 1px 0 0 0;
    a {
        padding: 6px;
    };
}

.select2-search input {
    width: 100%;
    margin: .5em 0;
    padding: .5em;
    border-color: @grey4;

    &:focus, &:hover {
        border-color: @rcblue;
        box-shadow: @button-shadow;
    }
}

.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: @grey7;

            .select2-result-label {
                &:hover {
                    color: @grey1!important;
                }
            }
        }

        &.select2-result-with-children {
            &:hover {
                background-color: white;
            }
        }

        .select2-result-label {
            display:block;
            padding: 8px;
            font-family: @text-regular;
            color: @grey2;
            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: @grey2;
                cursor: pointer;
            }
        }
    }
}

.side-by-side-selector {
    .left-group,
    .middle-group,
    .right-group {
        margin-bottom: @padding;
    }
}