git.roojs.org Git - roojs1/blob - less/roojs-bootstrap/combobox.less

   1 /*
   2  *
   3  * From https://github.com/danielfarrell/bootstrap-combobox
   4  *
   5  */
   6
   7 .combobox-container {
   8   margin-bottom: 5px;
   9   *zoom: 1;
  10   display: inline-table;
  11 }
  12 .combobox-container:before,
  13 .combobox-container:after {
  14   display: table;
  15   content: "";
  16 }
  17 .combobox-container:after {
  18   /* clear: both; */
  19 }
  20 .combobox-container input,
  21 .combobox-container .uneditable-input {
  22   -webkit-border-radius: 0 3px 3px 0;
  23   -moz-border-radius: 0 3px 3px 0;
  24   border-radius: 0 3px 3px 0;
  25 }
  26 .combobox-container input:focus,
  27 .combobox-container .uneditable-input:focus {
  28   position: relative;
  29   z-index: 2;
  30 }
  31 .combobox-container .uneditable-input {
  32   border-left-color: @gray-light;
  33 }
  34 .combobox-container .add-on {
  35   float: left;
  36   display: inline-block;
  37   width: auto;
  38   min-width: 16px;
  39   height: inherit !important;
  40   margin-right: -1px;
  41   padding: 4px 5px;
  42   font-weight: normal;
  43   color: @gray-light;
  44   text-align: center;
  45   text-shadow: 0 1px 0 @body-bg;
  46   background-color: @well-bg;
  47   border: 1px solid @gray-light;
  48   -webkit-border-radius: 3px 0 0 3px;
  49   -moz-border-radius: 3px 0 0 3px;
  50   border-radius: 3px 0 0 3px;
  51
  52 }
  53 .combobox-container .active {
  54   background-color: @brand-primary; //#3875d7;
  55   color: @body-bg;
  56 }
  57 .combobox-container input,
  58 .combobox-container .uneditable-input {
  59   float: left;
  60   -webkit-border-radius: 3px 0 0 3px;
  61   -moz-border-radius: 3px 0 0 3px;
  62   border-radius: 3px 0 0 3px;
  63 }
  64 .combobox-container .uneditable-input {
  65   border-left-color: @gray-lighter;
  66   border-right-color: @gray-light;
  67 }
  68 .combobox-container .add-on {
  69   margin-right: 0;
  70   margin-left: -1px;
  71   -webkit-border-radius: 0 3px 3px 0;
  72   -moz-border-radius: 0 3px 3px 0;
  73   border-radius: 0 3px 3px 0;
  74 }
  75 .combobox-container input:first-child {
  76   *margin-left: -160px;
  77 }
  78 .combobox-container input:first-child + .add-on {
  79   *margin-left: -21px;
  80 }
  81 .combobox-container select {
  82   display: inline-block;
  83   width: 0;
  84   height: 0;
  85   border: 0;
  86   padding: 0;
  87   margin: 0;
  88   text-indent: -99999px;
  89   *text-indent: 0;
  90 }
  91 .form-search .combobox-container,
  92 .form-inline .combobox-container {
  93   display: inline-block;
  94   margin-bottom: 0;
  95   vertical-align: top;
  96 }
  97 .form-search .combobox-container .add-on,
  98 .form-inline .combobox-container .add-on {
  99   vertical-align: middle;
 100 }
 101 .combobox-selected .combobox-clear {
 102   display: inline-block;
 103 }
 104 .combobox-selected .caret {
 105   display: none;
 106 }
 107 .combobox-clear {
 108   display: none;
 109   width: 14px;
 110   height: 14px;
 111   line-height: 14px;
 112   vertical-align: top;
 113   opacity: 0.3;
 114   filter: alpha(opacity=30);
 115 }
 116 .dropdown:hover .combobox-clear,
 117 .open.dropdown .combobox-clear {
 118   opacity: 1;
 119   filter: alpha(opacity=100);
 120 }
 121 .btn .combobox-clear {
 122   margin-top: 1px;
 123   margin-left: 1px;
 124 }
 125 .btn:hover .combobox-clear,
 126 .open.btn-group .combobox-clear {
 127   opacity: 1;
 128   filter: alpha(opacity=100);
 129 }
 130 .typeahead-long {
 131   max-height: 300px;
 132   overflow-y: auto;
 133 }
 134 .control-group.error .combobox-container .add-on {
 135   color: @brand-danger; //#B94A48;
 136   border-color: @brand-danger; //#B94A48;
 137 }
 138 .control-group.error .combobox-container .caret {
 139   border-top-color: @brand-danger; //#B94A48;
 140 }
 141 .control-group.warning .combobox-container .add-on {
 142   color: @brand-warning; //#C09853;
 143   border-color: @brand-warning; //#C09853;
 144 }
 145 .control-group.warning .combobox-container .caret {
 146   border-top-color: @brand-warning; //#C09853;
 147 }
 148 .control-group.success .combobox-container .add-on {
 149   color: @brand-success; //#468847;
 150   border-color: @brand-success; //#468847;
 151 }
 152 .control-group.success .combobox-container .caret {
 153   border-top-color: @brand-success; //#468847;
 154 }
 155 .btn .combobox-clear [class^="icon-"] {
 156   line-height: 1.4em;
 157 }
 158 .combobox-container .dropdown-menu {
 159     border-radius: 0;
 160     padding: 0;
 161     border: 1px solid @brand-primary; //#66afe9;
 162     border-top: none;
 163
 164 }
 165
 166 .roo-select2-container .dropdown-menu {
 167     border: 1px solid @brand-primary; //#5897fb;
 168 }
 169
 170 .dropdown-menu .active {
 171     background: @brand-primary; //#3875d7;
 172     color: @body-bg;
 173 }
 174
 175 .dropdown-menu .active label{
 176     color: @body-bg;
 177 }
 178
 179 .dropdown-menu .roo-select2-result {
 180     padding: 3px 7px 4px;
 181     margin: 0;
 182     cursor: pointer;
 183     min-height: 1em;
 184     -webkit-touch-callout: none;
 185     -webkit-user-select: none;
 186     -moz-user-select: none;
 187     -ms-user-select: none;
 188     user-select: none;
 189 }
 190
 191 .roo-select2-container,
 192 .roo-select2-choices .roo-select2-search-field{
 193     width: 100%
 194 }
 195 .roo-select2-container .x-combo-noedit {
 196    cursor: pointer;
 197    background-color: @body-bg;
 198
 199 }
 200 .roo-select2-container .x-combo-noedit[disabled] {
 201    cursor: not-allowed;
 202    background-color: @gray-lighter;
 203
 204 }
 205
 206 .roo-combobox-tickable .roo-select2-choices {
 207    border: none;
 208    background-image: none;
 209 }
 210
 211 .roo-combobox-tickable .roo-select2-result label {
 212     width: 100%;
 213 }
 214 /* zindex of dialogs is 10000++ so dropdowns have to be higher... */
 215
 216 .dropdown-menu {
 217   z-index: 20002 !important;
 218 }
 219
 220 .dropdown-menu .checkbox label {
 221     width: 100%;
 222 }
 223
 224 .roo-select2-container-multi .dropdown-menu .roo-select2-result .checkbox {
 225     margin-top: 0px;
 226     margin-bottom: 0px;
 227 }
 228 .dropdown-menu .roo-select2-result .checkbox {
 229     margin-top: 3px;
 230     margin-bottom: 3px;
 231         margin-left: 20px;
 232 }
 233
 234 .roo-select2-result .checkbox label {
 235     margin-left: 5px;
 236 }
 237
 238 .roo-select2-container .input-group-addon {
 239     padding: 6px 12px;
 240     border: 1px solid @input-border;
 241     border-left: 0px;
 242 }
 243
 244 .roo-select2-container .roo-removable {
 245     position: relative;
 246 }
 247
 248 .roo-select2-container .roo-removable .roo-combo-removable-btn {
 249     position: absolute;
 250     right: 10px;
 251     z-index: 2;
 252     top: 5px;
 253 }
 254
 255 .roo-select2-container .has-feedback .roo-combo-removable-btn {
 256     position: absolute;
 257     right: 35px;
 258     z-index: 2;
 259     top: 5px;
 260 }
 261
 262 /*
 263 .roo-select2-container .roo-removable.has-feedback .roo-combo-removable-btn {
 264     position: absolute;
 265     right: 40px;
 266     z-index: 2;
 267     top: 5px;
 268 }
 269
 270 .roo-select2-container .roo-removable.has-feedback.input-group .roo-combo-removable-btn {
 271     position: absolute;
 272     right: 70px;
 273     z-index: 2;
 274     top: 5px;
 275 }
 276
 277
 278 .roo-select2-container.input-group .has-feedback .roo-combo-removable-btn {
 279     position: absolute;
 280     right: 35px;
 281     z-index: 2;
 282     top: 5px;
 283 }*/
 284
 285 .has-warning .roo-select2-container-multi {
 286     border: 1px solid @brand-warning; //#8a6d3b;
 287 }
 288
 289 .roo-ios-select {
 290     width: 100%;
 291 }