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

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