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;
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:
16 parseInt("@{colorpicker-selector-total-size}") -
17 parseInt("@{colorpicker-clrchannel-l-width}")) / 2 + "px"`;
18 @colorpicker-clrchannel-l-selector-left:
20 parseInt("@{colorpicker-clrchannel-l-width}") -
21 parseInt("@{colorpicker-selector-total-size}")) / 2 + "px"`;
26 .colorpicker-hs-container {
31 width: @colorpicker-clrchannel-hs-width;
32 height: @colorpicker-clrchannel-hs-height;
33 padding: @colorpicker-clrchannel-hs-padding;
35 .colorpicker-hs-mask {
37 width: @colorpicker-clrchannel-hs-width;
38 height: @colorpicker-clrchannel-hs-height;
41 .colorpicker-hs-selector {
43 width: @colorpicker-selector-size;
44 height: @colorpicker-selector-size;
45 border: @colorpicker-selector-border-width solid black;
49 .colorpicker-l-container {
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;
62 width: @colorpicker-clrchannel-l-width;
63 height: @colorpicker-clrchannel-l-height;
66 .colorpicker-l-selector {
67 left: @colorpicker-clrchannel-l-selector-left;
69 width: @colorpicker-selector-size;
70 height: @colorpicker-selector-size;
71 border: @colorpicker-selector-border-width solid black;