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

   1 @import "config.less";
   2
   3
   4 div.ui-slider.ui-toggle-switch {
   5         width: 66 * @unit_base;
   6         height: 35 * @unit_base;
   7         background-color : transparent;
   8
   9         .ui-slider-label {
  10                 position: absolute;
  11                 width: 66 * @unit_base;
  12                 height: 35 * @unit_base;
  13                 background-size: cover;
  14                 -ms-background-size: cover;
  15                 -webkit-background-size: cover;
  16                 -o-background-size: cover;
  17                 -moz-background-size: cover;
  18
  19                 &.ui-slider-label-a {
  20                         background: url(images/00_button_on.png) no-repeat;
  21                 }
  22
  23                 &.ui-slider-label-b {
  24                         background: url(images/00_button_off.png) no-repeat;
  25                 }
  26         }
  27
  28         .ui-slider-inneroffset {
  29                 a {
  30                         background : none;
  31                 }
  32         }
  33 }
  34 .ui-slider-switch:not(.ui-toggle-switch) {
  35         width : 92 * @unit_base;
  36 }
  37
  38 div.ui-slider.ui-slider-switch:not(.ui-toggle-switch) {
  39         position : relative;
  40
  41         height : 32 * @unit_base;
  42         border-radius : 15 * @unit_base;
  43
  44         .ui-slider-inneroffset {
  45                 position : relative;
  46                 margin : -1px 16 * @unit_base;
  47                 z-index : 1;
  48         }
  49
  50         a.ui-slider-handle {
  51                 position : absolute;
  52                 background : rgba(255, 255, 255, 1);
  53                 top : 50%;
  54                 margin : 1px 0 0 -15 * @unit_base;
  55                 border-radius : 15 * @unit_base;
  56                 border : 2px solid gray;
  57
  58                 width : 28 * @unit_base;
  59                 height : 28 * @unit_base;
  60         }
  61
  62         a.ui-slider-handle-snapping {
  63                 -webkit-transition : left 70ms linear;
  64         }
  65
  66         span {
  67                 position : absolute;
  68                 overflow : hidden;
  69                 text-align : center;
  70                 height :  32 * @unit_base;
  71                 font-weight : bold;
  72                 font-size : 16 * @unit_base;
  73                 border-radius : 15 * @unit_base;
  74                 white-space : nowrap;
  75                 line-height : 2;
  76
  77                 &.ui-slider-label-a {
  78                         left : 0px;
  79                         color : white;
  80                         z-index : 1;
  81                         text-indent : -1.5em;
  82                 }
  83                 &.ui-slider-label-b {
  84                         right : 0px;
  85                         color : black;
  86                         z-index : 0;
  87                         text-indent : 1.5em;
  88                 }
  89         }
  90 }