src/widgets/colorpicker/less/colorpicker.less

   1 /* Own CSS */
   2
   3 /* @selector-size should be an odd number, in order to pixel-perfectly center on a given colour */
   4 @colorpicker-selector-size: 61px;
   5 @colorpicker-selector-border-width: 5px;
   6 @colorpicker-clrchannel-hs-width:  256px;
   7 @colorpicker-clrchannel-hs-height: 256px;
   8 @colorpicker-clrchannel-l-width: 16px;
   9 @colorpicker-clrchannel-l-height: 256px;
  10
  11 @colorpicker-selector-total-size: @colorpicker-selector-size + 2 * @colorpicker-selector-border-width;
  12 @colorpicker-clrchannel-hs-padding: @colorpicker-selector-total-size / 2;
  13 @colorpicker-clrchannel-l-hpadding:
  14
  15     ~`Math.max(0,
  16           parseInt("@{colorpicker-selector-total-size}") -
  17           parseInt("@{colorpicker-clrchannel-l-width}")) / 2 + "px"`;
  18 @colorpicker-clrchannel-l-selector-left:
  19     ~`Math.max(0,
  20           parseInt("@{colorpicker-clrchannel-l-width}") -
  21           parseInt("@{colorpicker-selector-total-size}")) / 2 + "px"`;
  22
  23 .ui-colorpicker {
  24     display: table;
  25
  26     .colorpicker-hs-container {
  27         position: relative;
  28         display: table-cell;
  29         float: left;
  30
  31         width:  @colorpicker-clrchannel-hs-width;
  32         height: @colorpicker-clrchannel-hs-height;
  33         padding: @colorpicker-clrchannel-hs-padding;
  34
  35         .colorpicker-hs-mask {
  36             position: absolute;
  37             width:  @colorpicker-clrchannel-hs-width;
  38             height: @colorpicker-clrchannel-hs-height;
  39         }
  40
  41         .colorpicker-hs-selector {
  42             position: absolute;
  43             width:  @colorpicker-selector-size;
  44             height: @colorpicker-selector-size;
  45             border: @colorpicker-selector-border-width solid black;
  46         }
  47     }
  48
  49     .colorpicker-l-container {
  50         position: relative;
  51         float: left;
  52
  53         width:  @colorpicker-clrchannel-l-width;
  54         height: @colorpicker-clrchannel-l-height;
  55         padding-left:   @colorpicker-clrchannel-l-hpadding;
  56         padding-right:  @colorpicker-clrchannel-l-hpadding;
  57         padding-top:    @colorpicker-clrchannel-hs-padding;
  58         padding-bottom: @colorpicker-clrchannel-hs-padding;
  59
  60         .colorpicker-l-mask {
  61             position: absolute;
  62             width:  @colorpicker-clrchannel-l-width;
  63             height: @colorpicker-clrchannel-l-height;
  64         }
  65
  66         .colorpicker-l-selector {
  67             left: @colorpicker-clrchannel-l-selector-left;
  68             position: absolute;
  69             width:  @colorpicker-selector-size;
  70             height: @colorpicker-selector-size;
  71             border: @colorpicker-selector-border-width solid black;
  72         }
  73     }
  74 }