<commit_before><!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Flip Toggle Switch - jQuery Mobile Demos</title>
	<link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
	<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
	<script src="../../js/jquery.js"></script>
	<script src="../_assets/js/"></script>
	<script src="../../js/"></script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="true">

	<div data-role="header" class="jqm-header">
		<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
		<p><span class="jqm-version"></span> Demos</p>
		<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
		<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
	</div><!-- /header -->

	<div role="main" class="ui-content jqm-content">

		<h1>Flip switch</h1>

		<p>Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element.
			</p>

			<h2>Basic checkbox switch</h2>

                <div data-demo-html="true">
				<form>
                    <label for="flip-checkbox">Flip toggle switch checkbox:</label>
                    <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox">
				</form>
                </div><!-- /demo-html -->

                <h2>Basic checkbox switch checked</h2>

                <div data-demo-html="true">
                <form>
                    <label for="flip-checkbox">Flip toggle switch checkbox:</label>
                    <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox" checked>
                </form>
                </div><!-- /demo-html -->

                <h2>Basic select switch</h2>

                <div data-demo-html="true">
                <form>
                    <label for="flip-select">Flip toggle switch select:</label>
                    <select id="flip-select" name="flip-select" data-role="flipswitch">
                        <option>Off</option>
                        <option>On</option>
                    </select>
                </form><commit_msg>Demos: Flipswitch: Add examples using custom indentation and custom width. Fixes #6729 - Demo flipswitch with custom label<commit_after><!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Flip Toggle Switch - jQuery Mobile Demos</title>
	<link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
	<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
	<script src="../../js/jquery.js"></script>
	<script src="../_assets/js/"></script>
	<script src="../../js/"></script>
	<style id="custom-label-flipswitch">
/* Custom indentations are needed because the length of custom labels differs from
   the length of the standard labels */
.custom-label-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
	text-indent: -3.4em;
}
.custom-label-flipswitch.ui-flipswitch .ui-flipswitch-off {
	text-indent: 0.5em;
}
	</style>
	<style id="custom-size-flipswitch">
/* Custom indentations are needed because the length of custom labels differs from
   the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
	text-indent: -5.9em;
}
.custom-size-flipswitch.ui-flipswitch .ui-flipswitch-off {
	text-indent: 0.5em;
}
/* Custom widths are needed because the length of custom labels differs from
   the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch {
	width: 8.875em;
}
.custom-size-flipswitch.ui-flipswitch.ui-flipswitch-active {
	padding-left: 7em;
	width: 1.875em;
}
@media (min-width: 28em) {
	// Repeated from rule .ui-flipswitch above
	.ui-field-contain > label + .custom-size-flipswitch.ui-flipswitch {
		width: 1.875em;
	}
}
	</style>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="true">

	<div data-role="header" class="jqm-header">
		<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
		<p><span class="jqm-version"></span> Demos</p>
		<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
		<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
	</div><!-- /header -->

	<div role="main" class="ui-content jqm-content">

		<h1>Flip switch</h1>

		<p>Flip switches are used for boolean style inputs like true/false or on/off in a compact UI element.
			</p>

			<h2>Basic checkbox switch</h2>

                <div data-demo-html="true">
				<form>
                    <label for="flip-checkbox">Flip toggle switch checkbox:</label>
                    <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox">
				</form>
                </div><!-- /demo-html -->

			<h2>Basic checkbox switch with custom labels</h2>

                <div data-demo-html="true" data-demo-css="#custom-label-flipswitch">
				<form>
                    <label for="flip-checkbox">Flip toggle switch checkbox:</label>
                    <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox" data-on-text="Light" data-off-text="Dark" data-wrapper-class="custom-label-flipswitch">
				</form>
                </div><!-- /demo-html -->

			<h2>Basic checkbox switch with custom labels and custom size</h2>

                <div data-demo-html="true" data-demo-css="#custom-size-flipswitch">
				<form>
                    <label for="flip-checkbox">Flip toggle switch checkbox:</label>
                    <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox" data-on-text="Assured" data-off-text="Uncertain" data-wrapper-class="custom-size-flipswitch">
				</form>
                </div><!-- /demo-html -->

                <h2>Basic checkbox switch checked</h2>

                <div data-demo-html="true">
                <form>
                    <label for="flip-checkbox">Flip toggle switch checkbox:</label>
                    <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox" checked>
                </form>
                </div><!-- /demo-html -->

                <h2>Basic select switch</h2>

                <div data-demo-html="true">
                <form>
                    <label for="flip-select">Flip toggle switch select:</label>
                    <select id="flip-select" name="flip-select" data-role="flipswitch">
                        <option>Off</option>
                        <option>On</option>
                    </select>
                </form>
{'fraction_non_alphanumeric': 0.1732186732186732, 'fraction_numerical': 0.009964509964509965, 'mean_word_length': 2.605807086614173, 'pattern_counts': {'":': 0, '<': 175, '<?xml version=': 0, '>': 176, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4792461', 'n_tokens_mistral': 2523, 'n_tokens_neox': 2266, 'n_words': 489}