select2: use wider search field, better UI.

rhodecode/public/css/select2.less

@@ -1,222 +1,222 b''
 // 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: .6em;
             line-height: 1em;
             top: 0.9em;
             width: 1em;
             font-size: 1em;
         }
     }
 }
 
 .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: auto !important;
-    margin: .5em;
+    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;
 
         &:before { content: 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 {
                 font-family: @text-semibold;
                 color: @rcdarkblue;
                 cursor: default;
             }
 
             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;
     }
 }