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 : 100% 100%;
  16                 background-repeat : no-repeat;
  17                 background-color : transparent;
  18
  19                 &.ui-slider-label-a {
  20                         background-image : url(images/00_button_on.png);
  21                 }
  22
  23                 &.ui-slider-label-b {
  24                         background-image : url(images/00_button_off.png);
  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         margin-top : 5 * @unit_base;
  42         margin-bottom : 5 * @unit_base;
  43
  44         height : 32 * @unit_base;
  45         top: 0;
  46         margin: 5 * @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 }