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

   1 @import "config.less";
   2
   3 @hsvpicker-clrchannel-masks-width: 300px;
   4 @hsvpicker-clrchannel-masks-height: 38px;
   5 @hsvpicker-clrchannel-selector-width: 10px;
   6 @hsvpicker-clrchannel-selector-height: 50px;
   7 @hsvpicker-clrchannel-selector-border-width: 5px;
   8 @hsvpicker-clrchannel-masks-container-hpadding: 12px;
   9 @hsvpicker-clrchannel-masks-container-vpadding: 16px;
  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-left: 27px;
  33         padding-right: 27px;
  34
  35         .hsvpicker-arrow-btn-container {
  36             display: table-cell;
  37             vertical-align: middle;
  38         }
  39
  40         .hsvpicker-arrow-btn {
  41             float: left;
  42         }
  43
  44         .hsvpicker-clrchannel-masks-container {
  45             float: left;
  46             position: relative;
  47             width: @hsvpicker-clrchannel-masks-width;
  48             height: @hsvpicker-clrchannel-masks-height;
  49
  50             margin-left:   @hsvpicker-clrchannel-masks-container-hmargin;
  51             margin-right:  @hsvpicker-clrchannel-masks-container-hmargin;
  52             margin-top:    @hsvpicker-clrchannel-masks-container-vmargin;
  53             margin-bottom: @hsvpicker-clrchannel-masks-container-vmargin;
  54
  55             padding-left:   @hsvpicker-clrchannel-masks-container-actual-hpadding;
  56             padding-right:  @hsvpicker-clrchannel-masks-container-actual-hpadding;
  57             padding-top:    @hsvpicker-clrchannel-masks-container-actual-vpadding;
  58             padding-bottom: @hsvpicker-clrchannel-masks-container-actual-vpadding;
  59
  60             .hsvpicker-clrchannel-mask {
  61                 position: absolute;
  62                 width: @hsvpicker-clrchannel-masks-width;
  63                 height: @hsvpicker-clrchannel-masks-height;
  64             }
  65
  66             .hsvpicker-clrchannel-mask-black {
  67                 background: #000000;
  68             }
  69
  70             .hsvpicker-clrchannel-mask-white {
  71                 background: #ffffff;
  72             }
  73
  74             .hsvpicker-clrchannel-selector {
  75                 position: absolute;
  76                 left: 0px;
  77                 top: 0px;
  78                 width: @hsvpicker-clrchannel-selector-width;
  79                 height: @hsvpicker-clrchannel-selector-actual-height;
  80                 border: @hsvpicker-clrchannel-selector-border-width solid black;
  81             }
  82         }
  83     }
  84 }
  85
  86 .ui-popupwindow .colorpickerbutton-popup-container-style {
  87         display: table;
  88         width : 50%;
  89         margin : 0 auto;
  90 }