From d4a29012cab695416030362f8e06aaade5dbd676 Mon Sep 17 00:00:00 2001 From: Min Hur Date: Mon, 13 Oct 2014 16:30:02 -0400 Subject: [PATCH 1/6] adding v1 docs --- .nojekyll | 0 doc/v1/index.html | 461 ++++++++++++++++++++++++++++++++++++++++++ doc/v1/modal.html | 16 ++ doc/v1/script.js | 17 ++ doc/v1/stylesheet.css | 151 ++++++++++++++ 5 files changed, 645 insertions(+) create mode 100644 .nojekyll create mode 100644 doc/v1/index.html create mode 100644 doc/v1/modal.html create mode 100644 doc/v1/script.js create mode 100644 doc/v1/stylesheet.css 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

From 585d153ba01f0b226cd7ebd6b6d8ec453e258617 Mon Sep 17 00:00:00 2001
From: Min Hur 
Date: Mon, 13 Oct 2014 16:51:36 -0400
Subject: [PATCH 2/6] adding domain

---
 CNAME | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 CNAME

diff --git a/CNAME b/CNAME
new file mode 100644
index 0000000..15d56c5
--- /dev/null
+++ b/CNAME
@@ -0,0 +1 @@
+www.bootstraptoggle.com
\ No newline at end of file

From 9a03cf01b0dca024c742f80d1d3c188d6089bbd0 Mon Sep 17 00:00:00 2001
From: Min Hur 
Date: Mon, 13 Oct 2014 16:58:10 -0400
Subject: [PATCH 3/6] update cname

---
 CNAME | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CNAME b/CNAME
index 15d56c5..368ad1e 100644
--- a/CNAME
+++ b/CNAME
@@ -1 +1 @@
-www.bootstraptoggle.com
\ No newline at end of file
+bootstraptoggle.com
\ No newline at end of file

From 4497108e888505edb2f9bd412114d03a8391fc39 Mon Sep 17 00:00:00 2001
From: Min Hur 
Date: Mon, 13 Oct 2014 17:32:54 -0400
Subject: [PATCH 4/6] use www instead

---
 CNAME | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CNAME b/CNAME
index 368ad1e..15d56c5 100644
--- a/CNAME
+++ b/CNAME
@@ -1 +1 @@
-bootstraptoggle.com
\ No newline at end of file
+www.bootstraptoggle.com
\ No newline at end of file

From 4b6419ebb5c1769d0f6755148d4eff332554279d Mon Sep 17 00:00:00 2001
From: Min Hur 
Date: Mon, 13 Oct 2014 17:44:45 -0400
Subject: [PATCH 5/6] update cname

---
 CNAME | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CNAME b/CNAME
index 15d56c5..368ad1e 100644
--- a/CNAME
+++ b/CNAME
@@ -1 +1 @@
-www.bootstraptoggle.com
\ No newline at end of file
+bootstraptoggle.com
\ No newline at end of file

From 39b4bab8230a2af57e26c53daaeb36e8721e7dd5 Mon Sep 17 00:00:00 2001
From: Min Hur 
Date: Mon, 13 Oct 2014 17:45:16 -0400
Subject: [PATCH 6/6] update cname

---
 CNAME | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CNAME b/CNAME
index 368ad1e..15d56c5 100644
--- a/CNAME
+++ b/CNAME
@@ -1 +1 @@
-bootstraptoggle.com
\ No newline at end of file
+www.bootstraptoggle.com
\ No newline at end of file