@import "config.less";
-.ui-toggleswitch {
- height: 80 * @unit_base;
- width: 60 * @unit_base;
- overflow: hidden;
- .ui-toggleswitch-mover {
- position: relative;
- font-size : 26 * @unit_base;
- line-height : 40 * @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;
- 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;
}
}
}