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                 background-image : -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, from(rgb(249, 249, 249)), to(rgb(50, 50, 50)));
  59                 -webkit-box-shadow : 0 1px 2px rgba(0, 0, 0, .2);
  60                 top : 50%;
  61                 margin : 1px 0 0 -15 * @unit_base;
  62                 border-radius : 15 * @unit_base;
  63                 border : 2px solid gray;
  64
  65                 width : 28 * @unit_base;
  66                 height : 28 * @unit_base;
  67         }
  68
  69         a.ui-slider-handle-snapping {
  70                 -webkit-transition : left 70ms linear;
  71         }
  72
  73         span {
  74                 position : absolute;
  75                 overflow : hidden;
  76                 text-align : center;
  77                 height :  32 * @unit_base;
  78                 font-weight : bold;
  79                 font-size : 16 * @unit_base;
  80                 border-radius : 15 * @unit_base;
  81                 white-space : nowrap;
  82                 line-height : 2;
  83
  84                 &.ui-slider-label-a {
  85                         left : 0px;
  86                         color : white;
  87                         z-index : 1;
  88                         text-indent : -1.5em;
  89                 }
  90                 &.ui-slider-label-b {
  91                         right : 0px;
  92                         color : @color_slider_label_text;
  93                         z-index : 0;
  94                         text-indent : 1.5em;
  95                 }
  96         }
  97 }
  98
  99 .ui-slider-switch .ui-slider-handle .ui-btn-inner {
 100         padding : 0;
 101 }