<h1>ToggleSwitch</h1>
</div>
<div class="content" data-role="content">
+ <label for="flip-1">1. Tizen normal switch:</label>
<select name="flip-11" id="flip-11" data-role="slider">
<option value="off"></option>
<option value="on"></option>
- </select>
- <br><br>
-
- <label for="flip-1">Tizen switch:</label>
- <select name="flip-1" id="flip-1" data-role="slider">
- <option value="off"></option>
- <option value="on"></option>
- </select>
-
- <br><br>
-
-
-
- <label for="flip-2">Flip switch:</label>
- <select name="flip-2" id="flip-2" data-role="slider">
- <option value="offoffoffoffoffoffoffoffoffoffoffoff">OffOffOffOffOffOffOffOffOffOffOffOffOff</option>
- <option value="on">On</option>
- </select>
-
+ </select>
<br><br>
<div data-role="fieldcontain">
- <label for="flip-3">Flip switch test:</label>
+ <label for="flip-3">2. Text toggle switch:<br>
+ (support when webDev. write text to option tag)</label>
<select name="flip-3" id="flip-3" data-role="slider">
- <option value="nope">NopeNopeNopeNope</option>
- <option value="yep">YepYepYepYep</option>
- </select>
- </div>
+ <option value="nope">Nope</option>
+ <option value="yep">Yep</option>
+ </select>
+ <div>
+ <br><br>
+ <div class ="containing-element">
+ <label for="flip-2">Text toggle switch: set element width</label>
+ <select name="flip-2" id="flip-2" data-role="slider">
+ <option value="off">Long toggle off</option>
+ <option value="on">Long toggle on</option>
+ </select>
+ </div>
+ <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ add element's width to css file <br>
+ .containing-element .ui-slider-switch { <br>
+   width : 9em;<br>
+ }<br>
+ </p>
</div> <!-- /content -->
<div data-role="footer">
}
}
}
+.ui-slider-switch:not(.ui-toggle-switch) {
+ width : 92 * @unit_base;
+}
div.ui-slider.ui-slider-switch:not(.ui-toggle-switch) {
position : relative;
- width : 5.5em;
+
height : 32 * @unit_base;
+ border-radius : 15 * @unit_base;
+
+ .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 : -34 * @unit_base;
- margin-top : 30 * @unit_base;
+ 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;
- border-radius : 10 * @unit_base;
+ 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;
}
}
-}
\ No newline at end of file
+}