diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/doc/v1/index.html b/doc/v1/index.html new file mode 100644 index 0000000..fee26dd --- /dev/null +++ b/doc/v1/index.html @@ -0,0 +1,461 @@ + + + + + + Bootstrap Toggle + + + + + + + +
+
+

Bootstrap Toggle

+
+ +
+

Bootstrap Toggle

+

Bootstrap Toggle is a lightweight Bootstrap plugin that allows toggle switches on your pages.

+ Download + Source Code +
+ +
+
+
+
+ +
+
+
+
+
+

Getting Started

+
+ +

Requirements

+

Bootstrap Toggle requires jQuery and Bootstrap.

+
+ +
+

Download

+

Download the zip file or visit GitHub page for the source code.

+
+ +
+

Setup

+

Include the css and js file on your page.

+ 
<link href="http://gitcdn.github.io/ajax/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
+<script src="http://gitcdn.github.io/ajax/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
+
+ +
+

Examples

+
+ +

Default On

+

Here's an example of a toggle with default set to On. Make sure that .toggle's classes match .toggle-on's classes.

+
+
+ +
+ + + +
+
+
+ 

+				

+				
+				

+					
Default Off

+					
Here's an example of a toggle with default set to Off. Make sure that .toggle has a class of .off, and that .toggle's classes match .toggle-off's classes.

+					

+						

+							
+							

+								
+								
+											
+							

+						

+					

+					

+				

+
+				

+					
Toggle Sizes

+					
Bootstrap toggle is available in different sizes. Make sure .toggle, label, and span have the same button size class.

+					

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+					

+					

+				

+
+				

+					
Customization

+					

+
+					
Colors

+					
Bootstrap Toggle supports various colors. Refer to Bootstrap Documentation on color variations. As stated previously, .toggle's classes needs to match the visible label's classes. You can also create your own custom color with css and add it to label of your choice.
+					

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+					

+					

+				

+
+				

+					
Color Mix

+					
You can also mix & match different colors for on/off toggles. Refer to Bootstrap Documentation on color variation. As stated previously, .toggle's classes needs to match the visible label's classes. You can also create your own custom color with css and add it to label of your choice.

+					

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+					

+					

+				

+
+				

+					
Style

+					
Feel free to style your toggles using css.

+					

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+					

+					
	
+				

+
+				

+					
Custom Text

+					
You can also have custom text inside label tag. Unfortunately, the width doesn't scale along with text so you'll need to specify the width of the toggle if you're going have custom labels.
+					

+					

+						
+						

+							
+							

+								
+								
+											
+							

+						

+					

+					

+				

+
+				

+					
Icons

+					
You can also have icons inside label tag. Unfortunately, the width doesn't scale along with text so you'll need to specify the width of the toggle if you're going have custom labels.
+					

+					

+						
+						

+							
+							

+								
+								
+											
+							

+						

+					

+					

+				

+
+				

+					
Font Size

+					
The font size inside each label can be easily overridden with css.

+					

+						
+						

+							
+							

+								
+								
+											
+							

+						

+					

+					

+				

+
+				

+					
Animation

+					
Animation speed can be easily controlled with css transition property on .toggle-group. You can also turn animation off completely.

+					

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+						
+						

+							
+							

+								
+								
+											
+							

+						

+					

+					

+				

+
+				
+
+				

+					
Notes

+					

+					
Known Issues

+					
There exists a browser issue on webkit for MacOS where border-radius does not get respected on background images. This does not seem to be happening on Windows but only on webkit MacOS.

+					

+						BUG
+						Webkit Bug 23166
+					

+					

+						BUG
+						Chromium Issue 72014
+					

+					
Chrome Issue 72014 has been resolved on and will be available by Chrome 24 release. Testing on Canary channel has verified that it's been fixed. As for Safari on MacOS support, It's still waiting for a fix. Please raise the issue with browser developers to escalate the matter if you wish to see it fixed.

+					
I did find some workarounds to this issues by resorting to not using position properties, but by solving the border clipping issues other limitations followed so the idea was abandonded.

+				

+
+			

+		

+	

+
+	
+	
+	
+	
+	
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/doc/v1/modal.html b/doc/v1/modal.html
new file mode 100644
index 0000000..c0ef62b
--- /dev/null
+++ b/doc/v1/modal.html
@@ -0,0 +1,16 @@
+

+	
+	

+		
+		
+					
+	

+

+

+	
+	

+		
+		
+					
+	

+

\ No newline at end of file
diff --git a/doc/v1/script.js b/doc/v1/script.js
new file mode 100644
index 0000000..1cc775a
--- /dev/null
+++ b/doc/v1/script.js
@@ -0,0 +1,17 @@
+!function ($) {
+	$('.prettyprint').each(function() {
+		if ($(this).prev('.bs-docs-example').length) {
+			// fetch & encode html
+			var html = $('
').text($(this).prev('.bs-docs-example').html()).html();
+			// find number of space/tabs on first line (minus line break)
+			var count = html.match(/^(\s+)/)[0].length - 1;
+			// replace tabs/spaces on each lines
+			var regex = new RegExp('\\n\\s{'+count+'}', 'g');
+			var code = html.replace(regex, '\n').trim();
+			// other cleanup
+			code = code.replace(/=""/g,'');
+			$(this).html(code);
+		}
+	});
+	prettyPrint();
+}(window.jQuery);
\ No newline at end of file
diff --git a/doc/v1/stylesheet.css b/doc/v1/stylesheet.css
new file mode 100644
index 0000000..f0e0a20
--- /dev/null
+++ b/doc/v1/stylesheet.css
@@ -0,0 +1,151 @@
+.jumbotron {
+	background-color: #222;
+	background-image: linear-gradient(45deg, #444 0%, #222 100%);
+	border-radius: 5px 5px 5px 5px;
+	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
+	color: #FFFFFF;
+	padding: 20px 30px;
+	margin-bottom: 30px;
+}
+.jumbotron .btn {
+	margin-right: 15px;
+}
+
+.sidenav {
+	margin-left: 0px;
+}
+.sidenav.affix {
+	top: 20px;
+}
+.sidenav li a {
+	border-radius: 3px;
+}
+.bs-docs-example .toggle {
+	margin-right: 10px;
+}
+
+h2 {
+	padding-top: 40px;
+}
+.main > div:first-child > h2 {
+	padding-top: 0px;
+}
+pre.prettyprint {
+	font-size: 12px;
+}
+/* Base class */
+.bs-docs-example {
+	position: relative;
+	margin: 15px 0;
+	padding: 39px 19px 14px;
+	*padding-top: 19px;
+	background-color: #fff;
+	border: 1px solid #ddd;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+}
+
+/* Echo out a label for the example */
+.bs-docs-example:after {
+	content: "Example";
+	position: absolute;
+	top: -1px;
+	left: -1px;
+	padding: 3px 7px;
+	font-size: 12px;
+	font-weight: bold;
+	background-color: #f5f5f5;
+	border: 1px solid #ddd;
+	color: #9da0a4;
+	-webkit-border-radius: 4px 0 4px 0;
+	-moz-border-radius: 4px 0 4px 0;
+	border-radius: 4px 0 4px 0;
+}
+
+/* Remove spacing between an example and it's code */
+.bs-docs-example + .prettyprint {
+	margin-top: -20px;
+	padding-top: 15px;
+}
+
+.com { color: #777; }
+.lit { color: #195f91; }
+.pun, .opn, .clo { color: #93a1a1; }
+.fun { color: #dc322f; }
+.str, .atv { color: #D14; }
+.kwd, .prettyprint .tag { color: #1e347b; }
+.typ, .atn, .dec, .var { color: teal; }
+.pln { color: #48484c; }
+
+.prettyprint {
+	padding: 15px !important;
+	background-color: #f7f7f9;
+	border: 1px solid #e1e1e8 !important;
+}
+.prettyprint.linenums {
+	-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+	-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+	box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+	margin: 0 0 0 33px; /* IE indents via margin-left */
+}
+ol.linenums li {
+	padding-left: 12px;
+	color: #bebec5;
+	line-height: 20px;
+	text-shadow: 0 1px 0 #fff;
+}
+.prettyprint .com {
+	color: #777;
+}
+
+@media (max-width: 480px) { 
+	h2 {
+	padding-top: 20px;
+	}
+	.main > div:first-child > h2 {
+		padding-top: 0px;
+	}
+	pre.prettyprint {
+		font-size: 11px;
+	}
+	.jumbotron {
+		border-radius: 0 0 0 0;
+		margin-left: -20px;
+		margin-right: -20px;
+	}
+	.bs-docs-example .toggle {
+		margin-right: 10px;
+		margin-top: 5px;
+		margin-bottom: 5px;
+	}
+}
+
+@media (min-width: 768px) and (max-width: 979px) { 
+	h2 {
+		padding-top: 20px;
+	}
+	.main > div:first-child > h2 {
+		padding-top: 0px;
+	}
+	.main {
+		width: 97%;
+	}
+	pre.prettyprint {
+		font-size: 11px;
+	}
+	.jumbotron {
+		border-radius: 0 0 0 0;
+		margin-left: -14px;
+		margin-right: -14px;
+	}
+	.bs-docs-example .toggle {
+		margin-right: 10px;
+		margin-top: 5px;
+		margin-bottom: 5px;
+	}
+}
\ No newline at end of file