|
|
// 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;
|
|
|
}
|
|
|
|
|
|
|
|
|
.drop-menu-comment-history {
|
|
|
.drop-menu-core;
|
|
|
border: none;
|
|
|
padding: 0 6px 0 0;
|
|
|
width: auto;
|
|
|
min-width: 0;
|
|
|
margin: 0;
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
line-height: 1em;
|
|
|
z-index: 2;
|
|
|
cursor: pointer;
|
|
|
|
|
|
a {
|
|
|
display:block;
|
|
|
padding: 0;
|
|
|
position: relative;
|
|
|
|
|
|
&:after {
|
|
|
position: absolute;
|
|
|
content: "\00A0\25BE";
|
|
|
right: -0.80em;
|
|
|
line-height: 1em;
|
|
|
top: -0.20em;
|
|
|
width: 1em;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
&.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;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.side-by-side-selector {
|
|
|
.left-group,
|
|
|
.middle-group,
|
|
|
.right-group {
|
|
|
margin-bottom: @padding;
|
|
|
}
|
|
|
}
|
|
|
|
