Slim down new Boostrap style comments

qTip2 · May 13, 2012 · 95c9451 · 95c9451
1 parent e8a939b
commit 95c9451
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 128 deletions.
diff --git a/dist/jquery.qtip.basic.js b/dist/jquery.qtip.basic.js
@@ -9,7 +9,7 @@
 *   http://en.wikipedia.org/wiki/MIT_License
 *   http://en.wikipedia.org/wiki/GNU_General_Public_License
 *
-* Date: Thu May 10 01:20:57 2012 +0100
+* Date: Sun May 13 07:55:33 2012 -0700
 */
 
 /*jslint browser: true, onevar: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: true */

diff --git a/dist/jquery.qtip.css b/dist/jquery.qtip.css
@@ -9,7 +9,7 @@
 *   http://en.wikipedia.org/wiki/MIT_License
 *   http://en.wikipedia.org/wiki/GNU_General_Public_License
 *
-* Date: Thu May 10 01:20:57 2012 +0100
+* Date: Sun May 13 07:55:33 2012 -0700
 */
 
 /* Core qTip styles */
@@ -338,15 +338,17 @@
 
 .ui-tooltip-rounded .ui-tooltip-titlebar,
 .ui-tooltip-tipsy .ui-tooltip-titlebar,
-.ui-tooltip-youtube .ui-tooltip-titlebar{
+.ui-tooltip-youtube .ui-tooltip-titlebar,
+.ui-tooltip-bootstrap .ui-tooltip-titlebar{
 	-moz-border-radius: 5px 5px 0 0;
 	-webkit-border-radius: 5px 5px 0 0;
 	border-radius: 5px 5px 0 0;
 }
 
 .ui-tooltip-rounded .ui-tooltip-titlebar + .ui-tooltip-content,
 .ui-tooltip-tipsy .ui-tooltip-titlebar + .ui-tooltip-content,
-.ui-tooltip-youtube .ui-tooltip-titlebar + .ui-tooltip-content{
+.ui-tooltip-youtube .ui-tooltip-titlebar + .ui-tooltip-content,
+.ui-tooltip-bootstrap .ui-tooltip-titlebar + .ui-tooltip-content{
 	-moz-border-radius: 0 0 5px 5px;
 	-webkit-border-radius: 0 0 5px 5px;
 	border-radius: 0 0 5px 5px;
@@ -542,12 +544,86 @@
 		border: 2px solid #285589;
 		background: #285589;
 	}
-		
+
 		.ui-tooltip-tipped .ui-tooltip-icon .ui-icon{
 			background-color: #FBFBFB;
 			color: #555;
 		}
 
+
+/**
+ * Twitter Bootstrap style.
+ *
+ * Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11.
+ * Does not work with IE 7.
+ */
+.ui-tooltip-bootstrap{
+	font-size: 13px;
+	line-height: 18px;
+
+	*border-right-width: 2px;
+	*border-bottom-width: 2px;
+
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+
+	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+
+	-webkit-background-clip: padding-box;
+	-moz-background-clip: padding;
+	background-clip: padding-box;
+}
+
+	.ui-tooltip-bootstrap .ui-tooltip-titlebar,
+	.ui-tooltip-bootstrap .ui-tooltip-content{
+		color: #333333;
+		background-color: #ffffff;
+
+		border: 1px solid #ccc;
+		border: 1px solid rgba(0, 0, 0, 0.2);
+	}
+
+	.ui-tooltip-bootstrap .ui-tooltip-titlebar{
+		font-size: 18px;
+		line-height: 22px;
+
+		border-bottom: 1px solid #ccc;
+	}
+
+		.ui-tooltip-bootstrap .ui-tooltip-titlebar .ui-state-default{
+			right: 9px; top: 49%;
+			border-style: none;
+		}
+
+	.ui-tooltip-bootstrap .ui-tooltip-icon{
+		background: white;
+	}
+
+		.ui-tooltip-bootstrap .ui-tooltip-icon .ui-icon{
+			width: auto;
+			height: auto;
+			float: right;
+			font-size: 20px;
+			font-weight: bold;
+			line-height: 18px;
+			color: #000000;
+			text-shadow: 0 1px 0 #ffffff;
+			opacity: 0.2;
+			filter: alpha(opacity=20);
+		}
+
+		.ui-tooltip-bootstrap .ui-tooltip-icon .ui-icon:hover{
+			color: #000000;
+			text-decoration: none;
+			cursor: pointer;
+			opacity: 0.4;
+			filter: alpha(opacity=40);
+		}
+
+
 /* IE9 fix - removes all filters */
 .ui-tooltip:not(.ie9haxors) div.ui-tooltip-content,
 .ui-tooltip:not(.ie9haxors) div.ui-tooltip-titlebar{

diff --git a/dist/jquery.qtip.js b/dist/jquery.qtip.js
@@ -9,7 +9,7 @@
 *   http://en.wikipedia.org/wiki/MIT_License
 *   http://en.wikipedia.org/wiki/GNU_General_Public_License
 *
-* Date: Thu May 10 01:20:57 2012 +0100
+* Date: Sun May 13 07:55:33 2012 -0700
 */
 
 /*jslint browser: true, onevar: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: true */
@@ -3170,11 +3170,16 @@ function Tip(qTip, command)
 				context.lineTo(coords[2][0], coords[2][1]);
 				context.closePath();
 
-				// Make sure transparent borders are supported by doing a stroke
-				// of the background colour before the stroke colour
+				// Create borders
 				if(border) {
-					context.strokeStyle = color.fill;
-					context.stroke();
+					// Make sure transparent borders are supported by doing a stroke
+					// of the background colour before the stroke colour (border-box only)
+					if( elems.content.css('backgroundClip') === 'border-box' ) {
+						context.strokeStyle = color.fill;
+						context.stroke();
+					}
+
+					// Do our regular stroke
 					context.strokeStyle = color.border;
 					context.stroke();
 				}

diff --git a/dist/jquery.qtip.min.css b/dist/jquery.qtip.min.css
diff --git a/dist/jquery.qtip.min.js b/dist/jquery.qtip.min.js
diff --git a/src/extra.css b/src/extra.css
@@ -29,15 +29,17 @@
 
 .ui-tooltip-rounded .ui-tooltip-titlebar,
 .ui-tooltip-tipsy .ui-tooltip-titlebar,
-.ui-tooltip-youtube .ui-tooltip-titlebar{
+.ui-tooltip-youtube .ui-tooltip-titlebar,
+.ui-tooltip-bootstrap .ui-tooltip-titlebar{
 	-moz-border-radius: 5px 5px 0 0;
 	-webkit-border-radius: 5px 5px 0 0;
 	border-radius: 5px 5px 0 0;
 }
 
 .ui-tooltip-rounded .ui-tooltip-titlebar + .ui-tooltip-content,
 .ui-tooltip-tipsy .ui-tooltip-titlebar + .ui-tooltip-content,
-.ui-tooltip-youtube .ui-tooltip-titlebar + .ui-tooltip-content{
+.ui-tooltip-youtube .ui-tooltip-titlebar + .ui-tooltip-content,
+.ui-tooltip-bootstrap .ui-tooltip-titlebar + .ui-tooltip-content{
 	-moz-border-radius: 0 0 5px 5px;
 	-webkit-border-radius: 0 0 5px 5px;
 	border-radius: 0 0 5px 5px;
@@ -247,17 +249,9 @@
  * Does not work with IE 7.
  */
 .ui-tooltip-bootstrap{
-	/**
-	 * Overrides qTip2:
-	 * .ui-tooltip, .qtip { font-size: 10.5px; line-height: 12px; }
-	 * Taken from Bootstrap:
-	 * body { font-size: 13px; line-height: 18px; }
-	 */
 	font-size: 13px;
 	line-height: 18px;
 
-	/* Taken from Bootstrap .dropdown-menu */
-
 	*border-right-width: 2px;
 	*border-bottom-width: 2px;
 
@@ -276,125 +270,32 @@
 
 	.ui-tooltip-bootstrap .ui-tooltip-titlebar,
 	.ui-tooltip-bootstrap .ui-tooltip-content{
-		/**
-		 * Overrides qTip2:
-		 * .ui-tooltip-default .ui-tooltip-titlebar,
-		 * .ui-tooltip-default .ui-tooltip-content{
-		 *   border-color: #F1D031;
-		 *   background-color: #FFFFA3;
-		 *   color: #555;
-		 * }
-		 * Taken from Bootstrap body
-		 */
 		color: #333333;
-
-		/**
-		 * Overrides qTip2:
-		 * .ui-tooltip-default .ui-tooltip-titlebar { background-color: #FFEF93; }
-		 * Taken from Bootstrap body
-		 */
 		background-color: #ffffff;
 
-		/**
-		 * Taken from Bootstrap .dropdown-menu
-		 */
 		border: 1px solid #ccc;
-		border: 1px solid rgba(0, 0, 0, 0.2); /* Transparency does not work */
+		border: 1px solid rgba(0, 0, 0, 0.2);
 	}
 
 	.ui-tooltip-bootstrap .ui-tooltip-titlebar{
-		/**
-		 * Taken from Bootstrap h3
-		 */
 		font-size: 18px;
-		line-height: 22px; /* 22px instead of 27px */
-
-		/**
-		 * Taken and adapted from Bootstrap:
-		 * .modal-header {
-		 *   padding: 9px 15px;
-		 *   border-bottom: 1px solid #eee;
-		 * }
-		 */
-		border-bottom: 1px solid #ccc; /* #ccc instead of #eee */
-
-		/**
-		 * Taken and adapted from Bootstrap .dropdown-menu
-		 *
-		 * border transparency does not work
-		 * border-radius should not be done for the titlebar and the content
-		 * but only once for .ui-tooltip-*
-		 * This is because of the little ^ shape
-		 * If border-radius is done at .ui-tooltip-* then the little ^ shape is white
-		 */
-		-webkit-border-radius: 5px 5px 0 0;
-		-moz-border-radius: 5px 5px 0 0;
-		border-radius: 5px 5px 0 0;
-	}
+		line-height: 22px;
 
-		.ui-tooltip-bootstrap .ui-tooltip-titlebar .ui-state-default{
-			/**
-			 * Overrides qTip2:
-			 * .ui-tooltip-titlebar .ui-state-default{
-			 *   position: absolute;
-			 *   right: 4px;
-			 *   top: 50%;
-			 *   margin-top: -9px;
-			 *
-			 *   cursor: pointer;
-			 *   outline: medium none;
-			 *
-			 *   border-width: 1px;
-			 *   border-style: solid;
-			 * }
-			 */
-			right: 9px;
-			top: 49%;
-
-			border-style: none; /* No border */
-		}
-
-	.ui-tooltip-bootstrap .ui-tooltip-content{
-		/**
-		 * Taken and adapted from Bootstrap .dropdown-menu
-		 */
-		-webkit-border-radius: 0 0 5px 5px;
-		-moz-border-radius: 0 0 5px 5px;
-		border-radius: 0 0 5px 5px;
+		border-bottom: 1px solid #ccc;
 	}
 
-		.ui-tooltip-bootstrap .ui-tooltip-content form{
-			/**
-			 * Overrides Boostrap:
-			 * form { margin: 0 0 18px; }
-			 */
-			margin: 0 0 5px;
+		.ui-tooltip-bootstrap .ui-tooltip-titlebar .ui-state-default{
+			right: 9px; top: 49%;
+			border-style: none;
 		}
 
 	.ui-tooltip-bootstrap .ui-tooltip-icon{
-		/**
-		 * Overrides qTip2:
-		 * .ui-tooltip-default .ui-tooltip-icon {
-		 *   border-color: #CCC;
-		 *   background: #F1F1F1;
-		 *   color: #777;
-		 * }
-		 */
 		background: white;
 	}
 
 		.ui-tooltip-bootstrap .ui-tooltip-icon .ui-icon{
-			/**
-			 * Overrides qTip2:
-			 * .ui-tooltip-icon .ui-icon{
-			 *   width: 18px;
-			 *   height: 14px;
-			 * }
-			 */
 			width: auto;
 			height: auto;
-
-			/* Taken from Bootstrap .close */
 			float: right;
 			font-size: 20px;
 			font-weight: bold;
@@ -406,7 +307,6 @@
 		}
 
 		.ui-tooltip-bootstrap .ui-tooltip-icon .ui-icon:hover{
-			/* Taken from Bootstrap .close:hover */
 			color: #000000;
 			text-decoration: none;
 			cursor: pointer;

diff --git a/src/tips/tips.js b/src/tips/tips.js
@@ -460,11 +460,16 @@ function Tip(qTip, command)
 				context.lineTo(coords[2][0], coords[2][1]);
 				context.closePath();
 
-				// Make sure transparent borders are supported by doing a stroke
-				// of the background colour before the stroke colour
+				// Create borders
 				if(border) {
-					context.strokeStyle = color.fill;
-					context.stroke();
+					// Make sure transparent borders are supported by doing a stroke
+					// of the background colour before the stroke colour (border-box only)
+					if( elems.content.css('backgroundClip') === 'border-box' ) {
+						context.strokeStyle = color.fill;
+						context.stroke();
+					}
+
+					// Do our regular stroke
 					context.strokeStyle = color.border;
 					context.stroke();
 				}