lib/dijit/themes/claro/ColorPalette.less

   1 /* ColorPalette
   2  *
   3  * Styling of the ColorPalette consists of the following:
   4  *
   5  * 1. the whole color palette
   6  *              .dijitColorPalette - for outline, border, and background color of the whole color palette
   7  *              Note: outline does not work for IE
   8  *
   9  * 2. the color swatch
  10  *              .dijitColorPalette .dijitPaletteImg
  11  *              transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
  12  *              displays border around a color swatch
  13  *
  14  * 3. hovered swatch
  15  *              .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg
  16  *              the hovered state of the color swatch - adds border
  17  *
  18  * 4. active and selected swatch
  19  *              .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg
  20  *              .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg
  21  *              adds border for active or selected state
  22  */
  23
  24 @import "variables";
  25
  26 .claro  .dijitColorPalette {
  27         border: 1px solid @border-color;
  28         background: @colorpalette-background-color;
  29         .border-radius(0);
  30 }
  31
  32 .claro .dijitColorPalette .dijitPaletteImg {
  33         /* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
  34          * displays border around a color swatch
  35          * overrides border color in dijit.css */
  36         border: 1px solid @minor-border-color;
  37 }
  38 .claro .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg {
  39         border: 1px solid @swatch-hovered-border-color;
  40 }
  41 .claro .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg,
  42 .claro .dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg {
  43         border: 2px solid @swatch-selected-border-color;
  44 }