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