Moved non-default styles into separate styles.css file.

Moved default yellow style to ui-tooltip-default class which is (un)applied when style.widget is set. Also moved default colour styles into their own styles.css file, separate from core.js that now stores only the bare minimum styles needed for qtip functionality.
qTip2 · May 23, 2011 · 8425ac2 · 8425ac2
1 parent 51e4e67
commit 8425ac2
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 185 deletions.
diff --git a/Makefile b/Makefile
@@ -21,10 +21,9 @@ CSS_MODULES = ${SRC_DIR}/header.txt\
 	${SRC_DIR}/core.css\
 	${SRC_DIR}/tips.css\
 	${SRC_DIR}/modal.css\
+	${SRC_DIR}/styles.css\
 	${SRC_DIR}/extra.css
 
-
-
 QTIP = ${DIST_DIR}/jquery.qtip.js
 QTIP_MIN = ${DIST_DIR}/jquery.qtip.min.js
 QTIP_PACK = ${DIST_DIR}/jquery.qtip.pack.js

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: Sun May 22 21:33:23 2011 +0100
+* Date: Sun May 22 21:37:07 2011 +0100
 */
 
 /*jslint browser: true, onevar: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: true */
@@ -31,6 +31,7 @@
 		widget = 'ui-widget',
 		disabled = 'ui-state-disabled',
 		selector = 'div.qtip.'+uitooltip,
+		defaultClass = uitooltip + '-default',
 		focusClass = uitooltip + '-focus',
 		hoverClass = uitooltip + '-hover',
 		hideOffset = '-31000px',
@@ -173,7 +174,7 @@ function QTip(target, options, id, attr)
 	function setWidget() {
 		var on = options.style.widget;
 
-		tooltip.toggleClass(widget, on);
+		tooltip.toggleClass(widget, on).toggleClass(defaultClass, !on);
 		elements.content.toggleClass(widget+'-content', on);
 
 		if(elements.titlebar){
@@ -694,7 +695,7 @@ function QTip(target, options, id, attr)
 			// Create tooltip element
 			tooltip = elements.tooltip = $('<div/>', {
 					'id': tooltipID,
-					'class': uitooltip + ' qtip ui-helper-reset ' + options.style.classes,
+					'class': uitooltip + ' qtip ui-helper-reset ' + defaultClass + ' ' + options.style.classes,
 					'width': options.style.width || '',
 
 					/* ARIA specific attributes */

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: Sun May 22 21:33:23 2011 +0100
+* Date: Sun May 22 21:37:07 2011 +0100
 */
 
 /* Fluid class for determining actual width in IE */
@@ -115,28 +115,58 @@
 
 
 /*! Default tooltip style */
-.ui-tooltip-titlebar,
-.ui-tooltip-content{
+.ui-tooltip-default .ui-tooltip-titlebar,
+.ui-tooltip-default .ui-tooltip-content{
 	border-color: #F1D031;
 	background-color: #FFFFA3;
 	color: #555;
 }
 
-	.ui-tooltip-titlebar{
+	.ui-tooltip-default .ui-tooltip-titlebar{
 		background-color: #FFEF93;
 	}
 
-	.ui-tooltip-titlebar .ui-tooltip-icon{
+	.ui-tooltip-default .ui-tooltip-icon{
 		border-color: #CCC;
 		background: #F1F1F1;
 		color: #777;
 	}
 
-	.ui-tooltip-titlebar .ui-state-hover{
+	.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{
 		border-color: #AAA;
 		color: #111;
+	}.ui-tooltip .ui-tooltip-tip{
+	margin: 0 auto;
+	overflow: hidden;
+
+	background: transparent !important;
+	border: 0px dashed transparent !important;
+	z-index: 10;
+}
+
+	.ui-tooltip .ui-tooltip-tip,
+	.ui-tooltip .ui-tooltip-tip *{
+		position: absolute;
+
+		line-height: 0.1px !important;
+		font-size: 0.1px !important;
+		color: #123456;
+
+		background: transparent;
+		border: 0px dashed transparent;
 	}
 
+	.ui-tooltip .ui-tooltip-tip canvas{ position: static; }#qtip-overlay{
+	position: absolute;
+	left: -10000em;
+	top: -10000em;
+
+	background-color: black;
+
+	opacity: 0.7;
+	filter:alpha(opacity=70);
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+}
 
 /*! Light tooltip style */
 .ui-tooltip-light .ui-tooltip-titlebar,
@@ -263,39 +293,8 @@
 
 	.ui-tooltip-blue .ui-state-default .ui-tooltip-icon{
 		background-position: -2px 0;
-	}.ui-tooltip .ui-tooltip-tip{
-	margin: 0 auto;
-	overflow: hidden;
-
-	background: transparent !important;
-	border: 0px dashed transparent !important;
-	z-index: 10;
-}
-
-	.ui-tooltip .ui-tooltip-tip,
-	.ui-tooltip .ui-tooltip-tip *{
-		position: absolute;
-
-		line-height: 0.1px !important;
-		font-size: 0.1px !important;
-		color: #123456;
-
-		background: transparent;
-		border: 0px dashed transparent;
 	}
 
-	.ui-tooltip .ui-tooltip-tip canvas{ position: static; }#qtip-overlay{
-	position: absolute;
-	left: -10000em;
-	top: -10000em;
-
-	background-color: black;
-
-	opacity: 0.7;
-	filter:alpha(opacity=70);
-	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-}
-
 /*! Add shadows to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE6+, Safari 2+ */
 .ui-tooltip-shadow{
 	-webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);

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: Sun May 22 21:33:23 2011 +0100
+* Date: Sun May 22 21:37:07 2011 +0100
 */
 
 /*jslint browser: true, onevar: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: true */
@@ -31,6 +31,7 @@
 		widget = 'ui-widget',
 		disabled = 'ui-state-disabled',
 		selector = 'div.qtip.'+uitooltip,
+		defaultClass = uitooltip + '-default',
 		focusClass = uitooltip + '-focus',
 		hoverClass = uitooltip + '-hover',
 		hideOffset = '-31000px',
@@ -173,7 +174,7 @@ function QTip(target, options, id, attr)
 	function setWidget() {
 		var on = options.style.widget;
 
-		tooltip.toggleClass(widget, on);
+		tooltip.toggleClass(widget, on).toggleClass(defaultClass, !on);
 		elements.content.toggleClass(widget+'-content', on);
 
 		if(elements.titlebar){
@@ -694,7 +695,7 @@ function QTip(target, options, id, attr)
 			// Create tooltip element
 			tooltip = elements.tooltip = $('<div/>', {
 					'id': tooltipID,
-					'class': uitooltip + ' qtip ui-helper-reset ' + options.style.classes,
+					'class': uitooltip + ' qtip ui-helper-reset ' + defaultClass + ' ' + options.style.classes,
 					'width': options.style.width || '',
 
 					/* ARIA specific attributes */

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/dist/jquery.qtip.pack.js b/dist/jquery.qtip.pack.js
diff --git a/src/core.css b/src/core.css
@@ -101,152 +101,24 @@
 
 
 /*! Default tooltip style */
-.ui-tooltip-titlebar,
-.ui-tooltip-content{
+.ui-tooltip-default .ui-tooltip-titlebar,
+.ui-tooltip-default .ui-tooltip-content{
 	border-color: #F1D031;
 	background-color: #FFFFA3;
 	color: #555;
 }
 
-	.ui-tooltip-titlebar{
+	.ui-tooltip-default .ui-tooltip-titlebar{
 		background-color: #FFEF93;
 	}
 
-	.ui-tooltip-titlebar .ui-tooltip-icon{
+	.ui-tooltip-default .ui-tooltip-icon{
 		border-color: #CCC;
 		background: #F1F1F1;
 		color: #777;
 	}
 
-	.ui-tooltip-titlebar .ui-state-hover{
+	.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{
 		border-color: #AAA;
 		color: #111;
-	}
-
-
-/*! Light tooltip style */
-.ui-tooltip-light .ui-tooltip-titlebar,
-.ui-tooltip-light .ui-tooltip-content{
-	border-color: #E2E2E2;
-	color: #454545;
-}
-
-	.ui-tooltip-light .ui-tooltip-content{
-		background-color: white;
-	}
-
-	.ui-tooltip-light .ui-tooltip-titlebar{
-		background-color: #f1f1f1;
-	}
-
-
-/*! Dark tooltip style */
-.ui-tooltip-dark .ui-tooltip-titlebar,
-.ui-tooltip-dark .ui-tooltip-content{
-	border-color: #303030;
-	color: #f3f3f3;
-}
-
-	.ui-tooltip-dark .ui-tooltip-content{
-		background-color: #505050;
-	}
-
-	.ui-tooltip-dark .ui-tooltip-titlebar{
-		background-color: #404040;
-	}
-
-	.ui-tooltip-dark .ui-tooltip-icon{
-		border-color: #444;
-	}
-
-	.ui-tooltip-dark .ui-tooltip-titlebar .ui-state-hover{
-		border-color: #303030;
-	}
-
-
-/*! Cream tooltip style */
-.ui-tooltip-cream .ui-tooltip-titlebar,
-.ui-tooltip-cream .ui-tooltip-content{
-	border-color: #F9E98E;
-	color: #A27D35;
-}
-
-	.ui-tooltip-cream .ui-tooltip-content{
-		background-color: #FBF7AA;
-	}
-
-	.ui-tooltip-cream .ui-tooltip-titlebar{
-		background-color: #F0DE7D;
-	}
-
-	.ui-tooltip-cream .ui-state-default .ui-tooltip-icon{
-		background-position: -82px 0;
-	}
-
-
-/*! Red tooltip style */
-.ui-tooltip-red .ui-tooltip-titlebar,
-.ui-tooltip-red .ui-tooltip-content{
-	border-color: #D95252;
-	color: #912323;
-}
-
-	.ui-tooltip-red .ui-tooltip-content{
-		background-color: #F78B83;
-	}
-
-	.ui-tooltip-red .ui-tooltip-titlebar{
-		background-color: #F06D65;
-	}
-
-	.ui-tooltip-red .ui-state-default .ui-tooltip-icon{
-		background-position: -102px 0;
-	}
-
-	.ui-tooltip-red .ui-tooltip-icon{
-		border-color: #D95252;
-	}
-
-	.ui-tooltip-red .ui-tooltip-titlebar .ui-state-hover{
-		border-color: #D95252;
-	}
-
-
-/*! Green tooltip style */
-.ui-tooltip-green .ui-tooltip-titlebar,
-.ui-tooltip-green .ui-tooltip-content{
-	border-color: #90D93F;
-	color: #3F6219;
-}
-
-	.ui-tooltip-green .ui-tooltip-content{
-		background-color: #CAED9E;
-	}
-
-	.ui-tooltip-green .ui-tooltip-titlebar{
-		background-color: #B0DE78;
-	}
-
-	.ui-tooltip-green .ui-state-default .ui-tooltip-icon{
-		background-position: -42px 0;
-	}
-
-
-/*! Blue tooltip style */
-.ui-tooltip-blue .ui-tooltip-titlebar,
-.ui-tooltip-blue .ui-tooltip-content{
-	border-color: #ADD9ED;
-	color: #5E99BD;
-}
-
-	.ui-tooltip-blue .ui-tooltip-content{
-		background-color: #E5F6FE;
-	}
-
-	.ui-tooltip-blue .ui-tooltip-titlebar{
-		background-color: #D0E9F5;
-	}
-
-	.ui-tooltip-blue .ui-state-default .ui-tooltip-icon{
-		background-position: -2px 0;
 	}
diff --git a/src/core.js b/src/core.js
@@ -135,7 +135,7 @@ function QTip(target, options, id, attr)
 	function setWidget() {
 		var on = options.style.widget;
 
-		tooltip.toggleClass(widget, on);
+		tooltip.toggleClass(widget, on).toggleClass(defaultClass, !on);
 		elements.content.toggleClass(widget+'-content', on);
 
 		if(elements.titlebar){
@@ -656,7 +656,7 @@ function QTip(target, options, id, attr)
 			// Create tooltip element
 			tooltip = elements.tooltip = $('<div/>', {
 					'id': tooltipID,
-					'class': uitooltip + ' qtip ui-helper-reset ' + options.style.classes,
+					'class': uitooltip + ' qtip ui-helper-reset ' + defaultClass + ' ' + options.style.classes,
 					'width': options.style.width || '',
 
 					/* ARIA specific attributes */

diff --git a/src/intro.js b/src/intro.js
@@ -17,6 +17,7 @@
 		widget = 'ui-widget',
 		disabled = 'ui-state-disabled',
 		selector = 'div.qtip.'+uitooltip,
+		defaultClass = uitooltip + '-default',
 		focusClass = uitooltip + '-focus',
 		hoverClass = uitooltip + '-hover',
 		hideOffset = '-31000px',