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         font-weight: bold;
   8         .ui-toggleswitch-mover {
   9                 position: relative;
  10                 font-size: 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: 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                         padding-top: 10 * @unit_base;
  77                         text-align: center;
  78                         text-overflow: ellipsis;
  79                 }
  80         }
  81 }
  82
  83 .ui-toggleswitch-state-checked {
  84         .ui-toggleswitch-mover {
  85                 .ui-toggleswitch-reed {
  86                         top: 1px;
  87                 }
  88
  89                 .ui-toggleswitch-text {
  90                         top: 40 * @unit_base;
  91                 }
  92                 .ui-toggleswitch-img{
  93                         top: 40 * @unit_base;
  94                 }
  95                 .ui-toggleswitch-on {
  96                         display: block;
  97                 }
  98
  99                 .ui-toggleswitch-off {
 100                         display: none;
 101                 }
 102         }
 103 }