3 @hsvpicker-clrchannel-masks-width: 300 * @unit_base;
4 @hsvpicker-clrchannel-masks-height: 38 * @unit_base;
5 @hsvpicker-clrchannel-selector-width: 10 * @unit_base;
6 @hsvpicker-clrchannel-selector-height: 50 * @unit_base;
7 @hsvpicker-clrchannel-selector-border-width: 5 * @unit_base;
8 @hsvpicker-clrchannel-masks-container-hpadding: 12 * @unit_base;
9 @hsvpicker-clrchannel-masks-container-vpadding: 16 * @unit_base;
11 @hsvpicker-clrchannel-selector-actual-height: @hsvpicker-clrchannel-selector-height -
12 2 * @hsvpicker-clrchannel-selector-border-width;
14 @hsvpicker-clrchannel-masks-container-actual-hpadding:
15 @hsvpicker-clrchannel-selector-width / 2
16 + @hsvpicker-clrchannel-selector-border-width;
17 @hsvpicker-clrchannel-masks-container-actual-vpadding:
18 (@hsvpicker-clrchannel-selector-actual-height - @hsvpicker-clrchannel-masks-height) / 2
19 + @hsvpicker-clrchannel-selector-border-width;
20 @hsvpicker-clrchannel-masks-container-hmargin:
22 (parseInt("@{hsvpicker-clrchannel-masks-container-hpadding}") -
23 parseInt("@{hsvpicker-clrchannel-masks-container-actual-hpadding}"))) + "px"`;
24 @hsvpicker-clrchannel-masks-container-vmargin:
26 (parseInt("@{hsvpicker-clrchannel-masks-container-vpadding}") -
27 parseInt("@{hsvpicker-clrchannel-masks-container-actual-vpadding}"))) + "px"`;
30 .hsvpicker-clrchannel-container {
32 padding-top: 5 * @unit_base;
33 padding-bottom: 5 * @unit_base;
34 padding-left: 27 * @unit_base;
35 padding-right: 27 * @unit_base;
37 .hsvpicker-arrow-btn-container {
39 vertical-align: middle;
42 .hsvpicker-arrow-btn {
46 .hsvpicker-clrchannel-masks-container {
49 width: @hsvpicker-clrchannel-masks-width;
50 height: @hsvpicker-clrchannel-masks-height;
52 margin-left: @hsvpicker-clrchannel-masks-container-hmargin;
53 margin-right: @hsvpicker-clrchannel-masks-container-hmargin;
54 margin-top: @hsvpicker-clrchannel-masks-container-vmargin;
55 margin-bottom: @hsvpicker-clrchannel-masks-container-vmargin;
57 padding-left: @hsvpicker-clrchannel-masks-container-actual-hpadding;
58 padding-right: @hsvpicker-clrchannel-masks-container-actual-hpadding;
59 padding-top: @hsvpicker-clrchannel-masks-container-actual-vpadding;
60 padding-bottom: @hsvpicker-clrchannel-masks-container-actual-vpadding;
62 .hsvpicker-clrchannel-mask {
64 width: @hsvpicker-clrchannel-masks-width;
65 height: @hsvpicker-clrchannel-masks-height;
68 .hsvpicker-clrchannel-mask-black {
72 .hsvpicker-clrchannel-mask-white {
76 .hsvpicker-clrchannel-selector {
80 width: @hsvpicker-clrchannel-selector-width;
81 height: @hsvpicker-clrchannel-selector-actual-height;
82 border: @hsvpicker-clrchannel-selector-border-width solid black;
86 .LESShsvpicker_background_style;
89 .ui-popupwindow .colorpickerbutton-popup-container-style {