src: codes cleanup

[platform/framework/web/web-ui-fw.git] / src / themes / tizen / common / jquery.mobile.tizen.toggleswitch.less

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less b/src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less
index 96e34d8..344e4e8 100644 (file)
--- a/src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less
@@ -1,103 +1,90 @@
 @import "config.less";
 
-.ui-toggleswitch {
-       height: 80 * @unit_base;
-       width: 60 * @unit_base;
-       overflow: hidden;
-       font-weight: bold;
-       .ui-toggleswitch-mover {
-               position: relative;
-               font-size: 20 * @unit_base;
-               display: block;
 
-               .ui-toggleswitch-off {
-                       border-radius: 5 * @unit_base;
-                       color: @color_text_sub;
-                       .LESStoggleswitch_off_style;
-                       height: 80 * @unit_base;
-                       .ui-toggleswitch-img{
-                               width: 100%;
-                               position: absolute;
-                               padding-top: 7 * @unit_base;
-                               .ui-toggleswitch-sign{
-                                       position: absolute;
-                                       width: 4px;
-                                       height: 12px;
-                                       left: 50%;
-                                       margin-left:-2px;
-                                       background: url(images/00_switch_button_off.png) no-repeat;
-                                       background-size: cover;
-                                       -webkit-background-size: cover;
-                                       -o-background-size: cover;
-                                       -moz-background-size: cover;
-                               }
-                       }
-               }
+div.ui-slider.ui-toggle-switch {
+       width: 66 * @unit_base;
+       height: 35 * @unit_base;
+       background-color : transparent;
+
+       .ui-slider-label {
+               position: absolute;
+               width: 66 * @unit_base;
+               height: 35 * @unit_base;
+               background-size: cover;
+               -ms-background-size: cover;
+               -webkit-background-size: cover;
+               -o-background-size: cover;
+               -moz-background-size: cover;
 
-               .ui-toggleswitch-on {
-                       display: none;
-                       border-radius: 5 * @unit_base;
-                       .LESStoggleswitch_on_style;
-                       height: 80 * @unit_base;
-                       color: white;
-                       .ui-toggleswitch-img{
-                               width: 100%;
-                               position: absolute;
-                               padding-top: 6 * @unit_base;
-                               text-align: center;
-                               .ui-toggleswitch-sign{
-                                       position: absolute;
-                                       width: 15px;
-                                       height: 15px;
-                                       left: 50%;
-                                       margin-left:-7px;
-                                       background: url(images/00_switch_button_on.png) no-repeat;
-                                       background-size: cover;
-                                       -webkit-background-size: cover;
-                                       -o-background-size: cover;
-                                       -moz-background-size: cover;
-                               }
-                       }
+               &.ui-slider-label-a {
+                       background: url(images/00_button_on.png) no-repeat;
                }
 
-               .ui-toggleswitch-reed {
-                       position: absolute;
-                       border-radius: 5 * @unit_base;
-                       width: 57 * @unit_base;
-                       .LESStoggleswitch_reed_style;
-                       top: 40 * @unit_base;
-                       height: 39 * @unit_base;
-                       left: 1px;
+               &.ui-slider-label-b {
+                       background: url(images/00_button_off.png) no-repeat;
                }
+       }
 
-               .ui-toggleswitch-text {
-                       width: 100%;
-                       position: absolute;
-                       padding-top: 10 * @unit_base;
-                       text-align: center;
-                       text-overflow: ellipsis;
+       .ui-slider-inneroffset {
+               a {
+                       background : none;
                }
        }
 }
+.ui-slider-switch:not(.ui-toggle-switch) {
+       width : 92 * @unit_base;
+}
 
-.ui-toggleswitch-state-checked {
-       .ui-toggleswitch-mover {
-               .ui-toggleswitch-reed {
-                       top: 1px;
-               }
+div.ui-slider.ui-slider-switch:not(.ui-toggle-switch) {
+       position : relative;
 
-               .ui-toggleswitch-text {
-                       top: 40 * @unit_base;
-               }
-               .ui-toggleswitch-img{
-                       top: 40 * @unit_base;
-               }
-               .ui-toggleswitch-on {
-                       display: block;
-               }
+       height : 32 * @unit_base;
+       border-radius : 15 * @unit_base;
 
-               .ui-toggleswitch-off {
-                       display: none;
+       .ui-slider-inneroffset {
+               position : relative;
+               margin : -1px 16 * @unit_base;
+               z-index : 1;
+       }
+
+       a.ui-slider-handle {
+               position : absolute;
+               background : rgba(255, 255, 255, 1);
+               top : 50%;
+               margin : 1px 0 0 -15 * @unit_base;
+               border-radius : 15 * @unit_base;
+               border : 2px solid gray;
+
+               width : 28 * @unit_base;
+               height : 28 * @unit_base;
+       }
+
+       a.ui-slider-handle-snapping {
+               -webkit-transition : left 70ms linear;
+       }
+
+       span {
+               position : absolute;
+               overflow : hidden;
+               text-align : center;
+               height :  32 * @unit_base;
+               font-weight : bold;
+               font-size : 16 * @unit_base;
+               border-radius : 15 * @unit_base;
+               white-space : nowrap;
+               line-height : 2;
+
+               &.ui-slider-label-a {
+                       left : 0px;
+                       color : white;
+                       z-index : 1;
+                       text-indent : -1.5em;
+               }
+               &.ui-slider-label-b {
+                       right : 0px;
+                       color : black;
+                       z-index : 0;
+                       text-indent : 1.5em;
                }
        }
 }