[Summary view] [Print] [Text view]

   1  .minicolors {
   2    position: relative;
   3  }
   4  
   5  .minicolors-sprite {
   6    background-image: url(jquery.minicolors.png);
   7  }
   8  
   9  .minicolors-swatch {
  10    position: absolute;
  11    vertical-align: middle;
  12    background-position: -80px 0;
  13    cursor: text;
  14    padding: 0;
  15    margin: 0;
  16    display: inline-block;
  17  }
  18  
  19  .minicolors-swatch::after {
  20    content: '';
  21    position: absolute;
  22    top: 0;
  23    left: 0;
  24    width: 100%;
  25    height: 100%;
  26    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  27    border-radius: 2px;
  28  }
  29  
  30  .minicolors-swatch-color {
  31    position: absolute;
  32    top: 0;
  33    left: 0;
  34    right: 0;
  35    bottom: 0;
  36  }
  37  
  38  .minicolors input[type=hidden] + .minicolors-swatch {
  39    width: 28px;
  40    position: static;
  41    cursor: pointer;
  42  }
  43  
  44  .minicolors input[type=hidden][disabled] + .minicolors-swatch {
  45    cursor: default;
  46  }
  47  
  48  /* Panel */
  49  .minicolors-panel {
  50    position: absolute;
  51    width: 173px;
  52    background: white;
  53    border-radius: 2px;
  54    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  55    z-index: 99999;
  56    box-sizing: content-box;
  57    display: none;
  58    touch-action: none;
  59  }
  60  
  61  .minicolors-panel.minicolors-visible {
  62    display: block;
  63  }
  64  
  65  /* Panel positioning */
  66  .minicolors-position-top .minicolors-panel {
  67    top: -154px;
  68  }
  69  
  70  .minicolors-position-right .minicolors-panel {
  71    right: 0;
  72  }
  73  
  74  .minicolors-position-bottom .minicolors-panel {
  75    top: auto;
  76  }
  77  
  78  .minicolors-position-left .minicolors-panel {
  79    left: 0;
  80  }
  81  
  82  .minicolors-with-opacity .minicolors-panel {
  83    width: 194px;
  84  }
  85  
  86  .minicolors .minicolors-grid {
  87    position: relative;
  88    top: 1px;
  89    left: 1px; /* LTR */
  90    width: 150px;
  91    height: 150px;
  92    margin-bottom: 2px;
  93    background-position: -120px 0;
  94    cursor: crosshair;
  95  }
  96  [dir=rtl] .minicolors .minicolors-grid {
  97    right: 1px;
  98  }
  99  
 100  .minicolors .minicolors-grid-inner {
 101    position: absolute;
 102    top: 0;
 103    left: 0;
 104    width: 150px;
 105    height: 150px;
 106  }
 107  
 108  .minicolors-slider-saturation .minicolors-grid {
 109    background-position: -420px 0;
 110  }
 111  
 112  .minicolors-slider-saturation .minicolors-grid-inner {
 113    background-position: -270px 0;
 114    background-image: inherit;
 115  }
 116  
 117  .minicolors-slider-brightness .minicolors-grid {
 118    background-position: -570px 0;
 119  }
 120  
 121  .minicolors-slider-brightness .minicolors-grid-inner {
 122    background-color: black;
 123  }
 124  
 125  .minicolors-slider-wheel .minicolors-grid {
 126    background-position: -720px 0;
 127  }
 128  
 129  .minicolors-slider,
 130  .minicolors-opacity-slider {
 131    position: absolute;
 132    top: 1px;
 133    left: 152px; /* LTR */
 134    width: 20px;
 135    height: 150px;
 136    background-color: white;
 137    background-position: 0 0;
 138    cursor: row-resize;
 139  }
 140  [dir=rtl] .minicolors-slider,
 141  [dir=rtl] .minicolors-opacity-slider {
 142    right: 152px;
 143  }
 144  
 145  .minicolors-slider-saturation .minicolors-slider {
 146    background-position: -60px 0;
 147  }
 148  
 149  .minicolors-slider-brightness .minicolors-slider {
 150    background-position: -20px 0;
 151  }
 152  
 153  .minicolors-slider-wheel .minicolors-slider {
 154    background-position: -20px 0;
 155  }
 156  
 157  .minicolors-opacity-slider {
 158    left: 173px; /* LTR */
 159    background-position: -40px 0;
 160    display: none;
 161  }
 162  [dir=rtl] .minicolors-opacity-slider {
 163    right: 173px;
 164  }
 165  
 166  .minicolors-with-opacity .minicolors-opacity-slider {
 167    display: block;
 168  }
 169  
 170  /* Pickers */
 171  .minicolors-grid .minicolors-picker {
 172    position: absolute;
 173    top: 70px;
 174    left: 70px;
 175    width: 12px;
 176    height: 12px;
 177    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
 178    border-radius: 10px;
 179    margin-top: -6px;
 180    margin-left: -6px;
 181    background: none;
 182  }
 183  
 184  .minicolors-grid .minicolors-picker > div {
 185    position: absolute;
 186    top: 0;
 187    left: 0;
 188    width: 8px;
 189    height: 8px;
 190    border-radius: 8px;
 191    border: solid 2px white;
 192    box-sizing: content-box;
 193  }
 194  
 195  .minicolors-picker {
 196    position: absolute;
 197    top: 0;
 198    left: 0;
 199    width: 18px;
 200    height: 3px;
 201    background: white;
 202    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
 203    border-radius: 2px;
 204    margin-top: -2px;
 205    margin-left: 1px;
 206    box-sizing: content-box;
 207  }
 208  
 209  /* Swatches */
 210  .minicolors-swatches,
 211  .minicolors-swatches li {
 212    margin: 5px 0 3px 5px; /* LTR */
 213    padding: 0;
 214    list-style: none;
 215    overflow: hidden;
 216  }
 217  [dir=rtl] .minicolors-swatches,
 218  [dir=rtl] .minicolors-swatches li {
 219    margin: 5px 5px 3px 0;
 220  }
 221  
 222  .minicolors-swatches .minicolors-swatch {
 223    position: relative;
 224    float: left; /* LTR */
 225    cursor: pointer;
 226    margin: 0 4px 0 0; /* LTR */
 227  }
 228  [dir=rtl] .minicolors-swatches .minicolors-swatch {
 229    float: right;
 230    margin: 0 0 0 4px;
 231  }
 232  
 233  .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
 234    margin-right: 7px; /* LTR */
 235  }
 236  [dir=rtl] .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
 237    margin-right: 0;
 238    margin-left: 7px;
 239  }
 240  
 241  .minicolors-swatch.selected {
 242    border-color: #000;
 243  }
 244  
 245  /* Inline controls */
 246  .minicolors-inline {
 247    display: inline-block;
 248  }
 249  
 250  .minicolors-inline .minicolors-input {
 251    display: none !important;
 252  }
 253  
 254  .minicolors-inline .minicolors-panel {
 255    position: relative;
 256    top: auto;
 257    left: auto; /* LTR */
 258    box-shadow: none;
 259    z-index: auto;
 260    display: inline-block;
 261  }
 262  [dir=rtl] .minicolors-inline .minicolors-panel {
 263    right: auto;
 264  }
 265  
 266  /* Default theme */
 267  .minicolors-theme-default .minicolors-swatch {
 268    top: 5px;
 269    left: 5px; /* LTR */
 270    width: 18px;
 271    height: 18px;
 272  }
 273  [dir=rtl] .minicolors-theme-default .minicolors-swatch {
 274    right: 5px;
 275  }
 276  .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
 277    margin-bottom: 2px;
 278    top: 0;
 279    left: 0; /* LTR */
 280    width: 18px;
 281    height: 18px;
 282  }
 283  [dir=rtl] .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
 284    right: 0;
 285  }
 286  .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
 287    left: auto; /* LTR */
 288    right: 5px; /* LTR */
 289  }
 290  [dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-swatch {
 291    right: auto;
 292    left: 5px;
 293  }
 294  .minicolors-theme-default.minicolors {
 295    width: auto;
 296    display: inline-block;
 297  }
 298  .minicolors-theme-default .minicolors-input {
 299    height: 20px;
 300    width: auto;
 301    display: inline-block;
 302    padding-left: 26px; /* LTR */
 303  }
 304  [dir=rtl] .minicolors-theme-default .minicolors-input {
 305    text-align: right;
 306    unicode-bidi: plaintext;
 307    padding-left: 1px;
 308    padding-right: 26px;
 309  }
 310  .minicolors-theme-default.minicolors-position-right .minicolors-input {
 311    padding-right: 26px; /* LTR */
 312    padding-left: inherit; /* LTR */
 313  }
 314  [dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-input {
 315    padding-right: inherit;
 316    padding-left: 26px;
 317  }
 318  
 319  /* Bootstrap theme */
 320  .minicolors-theme-bootstrap .minicolors-swatch {
 321    z-index: 2;
 322    top: 3px;
 323    left: 3px; /* LTR */
 324    width: 28px;
 325    height: 28px;
 326    border-radius: 2px;
 327  }
 328  [dir=rtl] .minicolors-theme-bootstrap .minicolors-swatch {
 329    right: 3px;
 330  }
 331  .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
 332    margin-bottom: 2px;
 333    top: 0;
 334    left: 0; /* LTR */
 335    width: 20px;
 336    height: 20px;
 337  }
 338  [dir=rtl] .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
 339    right: 0;
 340  }
 341  .minicolors-theme-bootstrap .minicolors-swatch-color {
 342    border-radius: inherit;
 343  }
 344  .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
 345    left: auto; /* LTR */
 346    right: 3px; /* LTR */
 347  }
 348  [dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left > .minicolors-swatch {
 349    right: auto;
 350    left: 3px;
 351  }
 352  .minicolors-theme-bootstrap .minicolors-input {
 353    float: none;
 354    padding-left: 44px; /* LTR */
 355  }
 356  [dir=rtl] .minicolors-theme-bootstrap .minicolors-input {
 357    text-align: right;
 358    unicode-bidi: plaintext;
 359    padding-left: 12px;
 360    padding-right: 44px;
 361  }
 362  .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
 363    padding-right: 44px; /* LTR */
 364    padding-left: 12px; /* LTR */
 365  }
 366  [dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left .minicolors-input {
 367    padding-right: 12px;
 368    padding-left: 44px;
 369  }
 370  .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
 371    top: 4px;
 372    left: 4px; /* LTR */
 373    width: 37px;
 374    height: 37px;
 375    border-radius: 5px;
 376  }
 377  [dir=rtl] .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
 378    right: 4px;
 379  }
 380  .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
 381    width: 24px;
 382    height: 24px;
 383  }
 384  .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
 385    width: 18px;
 386    height: 18px;
 387  }
 388  .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
 389    border-top-left-radius: 0; /* LTR */
 390    border-bottom-left-radius: 0; /* LTR */
 391  }
 392  [dir=rtl] .input-group .minicolors-theme-bootstrap .minicolors-input {
 393    border-radius: 4px;
 394  }
 395  [dir=rtl] .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
 396    border-top-right-radius: 0;
 397    border-bottom-right-radius: 0;
 398  }
 399  [dir=rtl] .input-group .minicolors-theme-bootstrap:not(:last-child) .minicolors-input {
 400    border-top-left-radius: 0;
 401    border-bottom-left-radius: 0;
 402  }
 403  /* bootstrap input-group rtl override */
 404  [dir=rtl] .input-group .form-control,
 405  [dir=rtl] .input-group-addon,
 406  [dir=rtl] .input-group-btn > .btn,
 407  [dir=rtl] .input-group-btn > .btn-group > .btn,
 408  [dir=rtl] .input-group-btn > .dropdown-toggle {
 409    border: 1px solid #ccc;
 410    border-radius: 4px;
 411  }
 412  [dir=rtl] .input-group .form-control:first-child,
 413  [dir=rtl] .input-group-addon:first-child,
 414  [dir=rtl] .input-group-btn:first-child > .btn,
 415  [dir=rtl] .input-group-btn:first-child > .btn-group > .btn,
 416  [dir=rtl] .input-group-btn:first-child > .dropdown-toggle,
 417  [dir=rtl] .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 418  [dir=rtl] .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
 419    border-top-left-radius: 0;
 420    border-bottom-left-radius: 0;
 421    border-left: 0;
 422  }
 423  [dir=rtl] .input-group .form-control:last-child,
 424  [dir=rtl] .input-group-addon:last-child,
 425  [dir=rtl] .input-group-btn:last-child > .btn,
 426  [dir=rtl] .input-group-btn:last-child > .btn-group > .btn,
 427  [dir=rtl] .input-group-btn:last-child > .dropdown-toggle,
 428  [dir=rtl] .input-group-btn:first-child > .btn:not(:first-child),
 429  [dir=rtl] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
 430    border-top-right-radius: 0;
 431    border-bottom-right-radius: 0;
 432  }
 433  
 434  /* Semantic Ui theme */
 435  .minicolors-theme-semanticui .minicolors-swatch {
 436    top: 0;
 437    left: 0; /* LTR */
 438    padding: 18px;
 439  }
 440  [dir=rtl] .minicolors-theme-semanticui .minicolors-swatch {
 441    right: 0;
 442  }
 443  .minicolors-theme-semanticui input {
 444    text-indent: 30px;
 445  }