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

   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    display: table-cell;
 199
 200 }
 201 .roo-select2-container .x-combo-noedit[disabled] {
 202    cursor: not-allowed;
 203    background-color: $gray-lighter;
 204
 205 }
 206
 207 .roo-combobox-tickable .roo-select2-choices {
 208    border: none;
 209    background-image: none;
 210 }
 211
 212 .roo-combobox-tickable .roo-select2-result label {
 213     width: 100%;
 214 }
 215 /* zindex of dialogs is 10000++ so dropdowns have to be higher... */
 216
 217 .dropdown-menu {
 218   z-index: 20002 !important;
 219 }
 220
 221 .dropdown-menu .checkbox label {
 222     width: 100%;
 223 }
 224
 225 .roo-select2-container-multi .dropdown-menu .roo-select2-result .checkbox {
 226     margin-top: 0px;
 227     margin-bottom: 0px;
 228 }
 229 .dropdown-menu .roo-select2-result .checkbox {
 230     margin-top: 3px;
 231     margin-bottom: 3px;
 232 }
 233
 234 .roo-select2-container .input-group-addon {
 235     padding: 6px 4px;
 236     border: 1px solid $input-border;
 237     border-left: 0px;
 238     display: table-cell;
 239 }
 240 /*  padding on navbars is different? */
 241 .navbar .roo-select2-container .input-group-addon {
 242     padding: 6px 10px;
 243 }
 244
 245 .roo-select2-container .dropdown-toggle::after {
 246   margin-left: 0;
 247 }
 248
 249 .roo-select2-container .roo-removable {
 250     position: relative;
 251 }
 252
 253 .roo-select2-container .roo-removable .roo-combo-removable-btn {
 254     position: absolute;
 255     right: 10px;
 256     z-index: 2;
 257     top: 5px;
 258 }
 259
 260 .roo-select2-container .has-feedback .roo-combo-removable-btn {
 261     position: absolute;
 262     right: 35px;
 263     z-index: 2;
 264     top: 5px;
 265 }
 266
 267 .has-warning .roo-select2-container-multi {
 268     border: 1px solid $brand-warning; //#8a6d3b;
 269 }
 270
 271 .roo-ios-select {
 272     width: 100%;
 273 }
 274
 275 .roo-select2-container.input-group > .form-control {
 276    width: 100%;
 277 }