src/themes/tizen/common/jquery.mobile.tizen.hsvpicker.less

   1 @import "config.less";
   2
   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;
  10
  11 @hsvpicker-clrchannel-selector-actual-height: @hsvpicker-clrchannel-selector-height -
  12     2 * @hsvpicker-clrchannel-selector-border-width;
  13
  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:
  21     ~`Math.max(0,
  22           (parseInt("@{hsvpicker-clrchannel-masks-container-hpadding}") -
  23           parseInt("@{hsvpicker-clrchannel-masks-container-actual-hpadding}"))) + "px"`;
  24 @hsvpicker-clrchannel-masks-container-vmargin:
  25     ~`Math.max(0,
  26           (parseInt("@{hsvpicker-clrchannel-masks-container-vpadding}") -
  27           parseInt("@{hsvpicker-clrchannel-masks-container-actual-vpadding}"))) + "px"`;
  28
  29 .ui-hsvpicker {
  30     .hsvpicker-clrchannel-container {
  31         display: table;
  32         padding-top: 5 * @unit_base;
  33         padding-bottom: 5 * @unit_base;
  34         padding-left: 27 * @unit_base;
  35         padding-right: 27 * @unit_base;
  36
  37         .hsvpicker-arrow-btn-container {
  38             display: table-cell;
  39             vertical-align: middle;
  40         }
  41
  42         .hsvpicker-arrow-btn {
  43             float: left;
  44         }
  45
  46         .hsvpicker-clrchannel-masks-container {
  47             float: left;
  48             position: relative;
  49             width: @hsvpicker-clrchannel-masks-width;
  50             height: @hsvpicker-clrchannel-masks-height;
  51
  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;
  56
  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;
  61
  62             .hsvpicker-clrchannel-mask {
  63                 position: absolute;
  64                 width: @hsvpicker-clrchannel-masks-width;
  65                 height: @hsvpicker-clrchannel-masks-height;
  66             }
  67
  68             .hsvpicker-clrchannel-mask-black {
  69                 background: #000000;
  70             }
  71
  72             .hsvpicker-clrchannel-mask-white {
  73                 background: #ffffff;
  74             }
  75
  76             .hsvpicker-clrchannel-selector {
  77                 position: absolute;
  78                 left: 0 * @unit_base;
  79                 top: 0 * @unit_base;
  80                 width: @hsvpicker-clrchannel-selector-width;
  81                 height: @hsvpicker-clrchannel-selector-actual-height;
  82                 border: @hsvpicker-clrchannel-selector-border-width solid black;
  83             }
  84         }
  85     }
  86         .LESShsvpicker_background_style;
  87 }
  88
  89 .ui-popupwindow .colorpickerbutton-popup-container-style {
  90         display: table;
  91         width : 50%;
  92         margin : 0 auto;
  93 }