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

   1 /* Own CSS */
   2 @import "config.less";
   3
   4 /* @selector-size should be an odd number, in order to pixel-perfectly center on a given colour */
   5 @colorpicker-selector-size: 72 * @unit_base;
   6 @colorpicker-selector-border-width: 5 * @unit_base;
   7 @colorpicker-clrchannel-hs-width:  256 * @unit_base;
   8 @colorpicker-clrchannel-hs-height: 256 * @unit_base;
   9 @colorpicker-clrchannel-l-width: 18 * @unit_base;
  10 @colorpicker-clrchannel-l-height: 256 * @unit_base;
  11
  12 @colorpicker-selector-total-size: @colorpicker-selector-size + 2 * @colorpicker-selector-border-width;
  13 @colorpicker-clrchannel-hs-padding: @colorpicker-selector-total-size / 2;
  14 @colorpicker-clrchannel-l-hpadding:
  15     ~`Math.max(0,
  16           parseInt("@{colorpicker-selector-total-size}") -
  17           parseInt("@{colorpicker-clrchannel-l-width}")) / 2 + "px"`;
  18 @colorpicker-clrchannel-l-selector-left:
  19     ~`Math.max(0,
  20           parseInt("@{colorpicker-clrchannel-l-width}") -
  21           parseInt("@{colorpicker-selector-total-size}")) / 2 + "px"`;
  22
  23 .ui-colorpicker {
  24     display: table;
  25
  26     .colorpicker-hs-container {
  27         position: relative;
  28         display: table-cell;
  29         float: left;
  30
  31         width:  @colorpicker-clrchannel-hs-width;
  32         height: @colorpicker-clrchannel-hs-height;
  33         padding: @colorpicker-clrchannel-hs-padding;
  34
  35         .colorpicker-hs-mask {
  36             position: absolute;
  37             width:  @colorpicker-clrchannel-hs-width;
  38             height: @colorpicker-clrchannel-hs-height;
  39         }
  40
  41         .colorpicker-hs-selector {
  42             position: absolute;
  43             width:  @colorpicker-selector-size;
  44             height: @colorpicker-selector-size;
  45             border: @colorpicker-selector-border-width solid black;
  46         }
  47     }
  48
  49     .colorpicker-l-container {
  50         position: relative;
  51         float: left;
  52
  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;
  59
  60         .colorpicker-l-mask {
  61             position: absolute;
  62             width:  @colorpicker-clrchannel-l-width;
  63             height: @colorpicker-clrchannel-l-height;
  64             left: ( @colorpicker-selector-size + ( @colorpicker-selector-border-width * 2 ) - @colorpicker-clrchannel-l-width ) / 2;
  65         }
  66
  67         .colorpicker-l-selector {
  68             left: @colorpicker-clrchannel-l-selector-left;
  69             position: absolute;
  70             width:  @colorpicker-selector-size;
  71             height: @colorpicker-selector-size;
  72             border: @colorpicker-selector-border-width solid black;
  73         }
  74     }
  75 }
  76
  77 .ui-colorpicker .colorpicker-hs-container .sat-gradient {
  78     background: none; /* Old browsers */
  79     background: -webkit-gradient(linear, left top, left bottom,
  80         color-stop(0%,rgba(128,128,128,0)),
  81         color-stop(100%,rgba(128,128,128,1))); /* Chrome,Safari4+ */
  82     background: -moz-linear-gradient(top,
  83         rgba(128,128,128,0) 0%,
  84         rgba(128,128,128,1) 100%); /* FF3.6+ */
  85     background: -webkit-linear-gradient(top,
  86         rgba(128,128,128,0) 0%,
  87         rgba(128,128,128,1) 100%); /* Chrome10+,Safari5.1+ */
  88     background: -o-linear-gradient(top,
  89         rgba(128,128,128,0) 0%,
  90         rgba(128,128,128,1) 100%); /* Opera11.10+ */
  91     background: -ms-linear-gradient(top,
  92         rgba(128,128,128,0) 0%,
  93         rgba(128,128,128,1) 100%); /* IE10+ */
  94     background: linear-gradient(top,
  95         rgba(128,128,128,0) 0%,
  96         rgba(128,128,128,1) 100%); /* W3C */
  97     /* filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#00808080', endColorstr="#808080", GradientType = 0); */
  98 }
  99
 100 .ui-colorpicker .colorpicker-l-container .l-gradient {
 101     background: none; /* Old browsers */
 102     background: -webkit-gradient(linear, left top, left bottom,
 103         color-stop(0%,rgba(0,0,0,1)),
 104         color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
 105     background: -moz-linear-gradient(top,
 106         rgba(0,0,0,1) 0%,
 107         rgba(255,255,255,1) 100%); /* FF3.6+ */
 108     background: -webkit-linear-gradient(top,
 109         rgba(0,0,0,1) 0%,
 110         rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
 111     background: -o-linear-gradient(top,
 112         rgba(0,0,0,1) 0%,
 113         rgba(255,255,255,1) 100%); /* Opera11.10+ */
 114     background: -ms-linear-gradient(top,
 115         rgba(0,0,0,1) 0%,
 116         rgba(255,255,255,1) 100%); /* IE10+ */
 117     background: linear-gradient(top,
 118         rgba(0,0,0,1) 0%,
 119         rgba(255,255,255,1) 100%); /* W3C */
 120     /* filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#000000', endColorstr="#ffffff", GradientType = 0); */
 121 }
 122
 123