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

   1 @import "config.less";
   2
   3 .ui-toggleswitch {
   4         height: 40 * @unit_base;
   5         width: 30 * @unit_base;
   6         overflow: hidden;
   7         .ui-toggleswitch-mover {
   8                 position: relative;
   9                 font-size : 13 * @unit_base;
  10                 line-height : 20 * @unit_base;
  11                 display: block;
  12
  13                 .ui-toggleswitch-off {
  14                         border-radius: 5 * @unit_base;
  15                         color: @color_text_sub;
  16                         .LESStoggleswitch_off_style;
  17                         height: 40 * @unit_base;
  18                         .ui-toggleswitch-img{
  19                                 width: 100%;
  20                                 position: absolute;
  21                                 padding-top: 7 * @unit_base;
  22                                 .ui-toggleswitch-sign{
  23                                         position: absolute;
  24                                         width: 44 * @unit_base;
  25                                         height: 44 * @unit_base;
  26                                         /*left: 50%;*/
  27                                         margin-left:-2px;
  28                                         background: url(images/00_button_off.png) no-repeat;
  29                                         background-size: cover;
  30                                         -ms-background-size: cover;
  31                                         -webkit-background-size: cover;
  32                                         -o-background-size: cover;
  33                                         -moz-background-size: cover;
  34                                 }
  35                         }
  36                 }
  37
  38                 .ui-toggleswitch-on {
  39                         display: none;
  40                         border-radius: 5 * @unit_base;
  41                         .LESStoggleswitch_on_style;
  42                         height: 40 * @unit_base;
  43                         color: white;
  44                         .ui-toggleswitch-img{
  45                                 width: 100%;
  46                                 position: absolute;
  47                                 padding-top: 6 * @unit_base;
  48                                 text-align: center;
  49                                 .ui-toggleswitch-sign{
  50                                         position: absolute;
  51                                         width: 44 * @unit_base;
  52                                         height: 44 * @unit_base;
  53                                         left: 50%;
  54                                         margin-left:-7px;
  55                                         background: url(images/00_button_on.png) no-repeat;
  56                                         background-size: cover;
  57                                         -ms-background-size: cover;
  58                                         -webkit-background-size: cover;
  59                                         -o-background-size: cover;
  60                                         -moz-background-size: cover;
  61                                 }
  62                         }
  63                 }
  64
  65                 .ui-toggleswitch-reed {
  66                         position: absolute;
  67                         border-radius: 5 * @unit_base;
  68                         width: 28 * @unit_base;
  69                         .LESStoggleswitch_reed_style;
  70                         top: 20 * @unit_base;
  71                         height: 19 * @unit_base;
  72                         left: 1px;
  73                 }
  74
  75                 .ui-toggleswitch-text {
  76                         width: 100%;
  77                         position: absolute;
  78                         text-align: center;
  79                         text-overflow: ellipsis;
  80                 }
  81         }
  82 }
  83
  84 .ui-toggleswitch-state-checked {
  85         .ui-toggleswitch-mover {
  86                 .ui-toggleswitch-reed {
  87                         top: 1px;
  88                 }
  89
  90                 .ui-toggleswitch-text {
  91                         top: 20 * @unit_base;
  92                 }
  93                 .ui-toggleswitch-img{
  94                         top: 20 * @unit_base;
  95                 }
  96                 .ui-toggleswitch-on {
  97                         display: block;
  98                 }
  99
 100                 .ui-toggleswitch-off {
 101                         display: none;
 102                 }
 103         }
 104 }
 105
 106 .ui-toggleswitch.ui-toggleswitch-image-style {
 107         display : inline-block;
 108
 109         width : 44 * @unit_base;
 110         height : 44 * @unit_base;
 111         .ui-toggleswitch-mover {
 112
 113                 .ui-toggleswitch-off,
 114                 .ui-toggleswitch-on {
 115                         background-image : none;
 116
 117                         height : 44 * @unit_base;
 118                         width : 44 * @unit_base;
 119
 120                         .ui-toggleswitch-img {
 121                                 padding-top : 0px;
 122                                 top : 0px;
 123
 124                                 .ui-toggleswitch-sign {
 125                                         left : 0px;
 126                                         margin-left : 0px;
 127                                 }
 128                         }
 129                 }
 130         }
 131 }