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

   1 @import "config.less";
   2
   3 .ui-toggleswitch {
   4         height: 80 * @unit_base;
   5         width: 60 * @unit_base;
   6         overflow: hidden;
   7         .ui-toggleswitch-mover {
   8                 position: relative;
   9                 font-size : 26 * @unit_base;
  10                 line-height : 40 * @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: 80 * @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: 4px;
  25                                         height: 12px;
  26                                         left: 50%;
  27                                         margin-left:-2px;
  28                                         background: url(images/00_switch_button_off.png) no-repeat;
  29                                         background-size: cover;
  30                                         -webkit-background-size: cover;
  31                                         -o-background-size: cover;
  32                                         -moz-background-size: cover;
  33                                 }
  34                         }
  35                 }
  36
  37                 .ui-toggleswitch-on {
  38                         display: none;
  39                         border-radius: 5 * @unit_base;
  40                         .LESStoggleswitch_on_style;
  41                         height: 80 * @unit_base;
  42                         color: white;
  43                         .ui-toggleswitch-img{
  44                                 width: 100%;
  45                                 position: absolute;
  46                                 padding-top: 6 * @unit_base;
  47                                 text-align: center;
  48                                 .ui-toggleswitch-sign{
  49                                         position: absolute;
  50                                         width: 15px;
  51                                         height: 15px;
  52                                         left: 50%;
  53                                         margin-left:-7px;
  54                                         background: url(images/00_switch_button_on.png) no-repeat;
  55                                         background-size: cover;
  56                                         -webkit-background-size: cover;
  57                                         -o-background-size: cover;
  58                                         -moz-background-size: cover;
  59                                 }
  60                         }
  61                 }
  62
  63                 .ui-toggleswitch-reed {
  64                         position: absolute;
  65                         border-radius: 5 * @unit_base;
  66                         width: 57 * @unit_base;
  67                         .LESStoggleswitch_reed_style;
  68                         top: 40 * @unit_base;
  69                         height: 39 * @unit_base;
  70                         left: 1px;
  71                 }
  72
  73                 .ui-toggleswitch-text {
  74                         width: 100%;
  75                         position: absolute;
  76                         text-align: center;
  77                         text-overflow: ellipsis;
  78                 }
  79         }
  80 }
  81
  82 .ui-toggleswitch-state-checked {
  83         .ui-toggleswitch-mover {
  84                 .ui-toggleswitch-reed {
  85                         top: 1px;
  86                 }
  87
  88                 .ui-toggleswitch-text {
  89                         top: 40 * @unit_base;
  90                 }
  91                 .ui-toggleswitch-img{
  92                         top: 40 * @unit_base;
  93                 }
  94                 .ui-toggleswitch-on {
  95                         display: block;
  96                 }
  97
  98                 .ui-toggleswitch-off {
  99                         display: none;
 100                 }
 101         }
 102 }