src/widgets/hsvpicker/less/hsvpicker.less

   1 @hsvpicker-clrchannel-masks-width: 300px;
   2 @hsvpicker-clrchannel-masks-height: 38px;
   3 @hsvpicker-clrchannel-selector-width: 10px;
   4 @hsvpicker-clrchannel-selector-height: 50px;
   5 @hsvpicker-clrchannel-selector-border-width: 5px;
   6 @hsvpicker-clrchannel-masks-container-hpadding: 12px;
   7 @hsvpicker-clrchannel-masks-container-vpadding: 16px;
   8
   9 @hsvpicker-clrchannel-selector-actual-height: @hsvpicker-clrchannel-selector-height -
  10     2 * @hsvpicker-clrchannel-selector-border-width;
  11
  12 @hsvpicker-clrchannel-masks-container-actual-hpadding:
  13     @hsvpicker-clrchannel-selector-width / 2
  14         + @hsvpicker-clrchannel-selector-border-width;
  15 @hsvpicker-clrchannel-masks-container-actual-vpadding:
  16     (@hsvpicker-clrchannel-selector-actual-height - @hsvpicker-clrchannel-masks-height) / 2
  17         + @hsvpicker-clrchannel-selector-border-width;
  18 @hsvpicker-clrchannel-masks-container-hmargin:
  19     ~`Math.max(0,
  20           (parseInt("@{hsvpicker-clrchannel-masks-container-hpadding}") -
  21           parseInt("@{hsvpicker-clrchannel-masks-container-actual-hpadding}"))) + "px"`;
  22 @hsvpicker-clrchannel-masks-container-vmargin:
  23     ~`Math.max(0,
  24           (parseInt("@{hsvpicker-clrchannel-masks-container-vpadding}") -
  25           parseInt("@{hsvpicker-clrchannel-masks-container-actual-vpadding}"))) + "px"`;
  26
  27 .ui-hsvpicker {
  28     .hsvpicker-clrchannel-container {
  29         display: table;
  30         padding-left: 27px;
  31         padding-right: 27px;
  32
  33         .hsvpicker-arrow-btn-container {
  34             display: table-cell;
  35             vertical-align: middle;
  36         }
  37
  38         .hsvpicker-arrow-btn {
  39             float: left;
  40         }
  41
  42         .hsvpicker-clrchannel-masks-container {
  43             float: left;
  44             position: relative;
  45             width: @hsvpicker-clrchannel-masks-width;
  46             height: @hsvpicker-clrchannel-masks-height;
  47
  48             margin-left:   @hsvpicker-clrchannel-masks-container-hmargin;
  49             margin-right:  @hsvpicker-clrchannel-masks-container-hmargin;
  50             margin-top:    @hsvpicker-clrchannel-masks-container-vmargin;
  51             margin-bottom: @hsvpicker-clrchannel-masks-container-vmargin;
  52
  53             padding-left:   @hsvpicker-clrchannel-masks-container-actual-hpadding;
  54             padding-right:  @hsvpicker-clrchannel-masks-container-actual-hpadding;
  55             padding-top:    @hsvpicker-clrchannel-masks-container-actual-vpadding;
  56             padding-bottom: @hsvpicker-clrchannel-masks-container-actual-vpadding;
  57
  58             .hsvpicker-clrchannel-mask {
  59                 position: absolute;
  60                 width: @hsvpicker-clrchannel-masks-width;
  61                 height: @hsvpicker-clrchannel-masks-height;
  62             }
  63
  64             .hsvpicker-clrchannel-mask-black {
  65                 background: #000000;
  66             }
  67
  68             .hsvpicker-clrchannel-mask-white {
  69                 background: #ffffff;
  70             }
  71
  72             .hsvpicker-clrchannel-selector {
  73                 position: absolute;
  74                 left: 0px;
  75                 top: 0px;
  76                 width: @hsvpicker-clrchannel-selector-width;
  77                 height: @hsvpicker-clrchannel-selector-actual-height;
  78                 border: @hsvpicker-clrchannel-selector-border-width solid black;
  79             }
  80         }
  81     }
  82 }