Merge branch 'release-v1.3.0'

chinchang · Aug 4, 2013 · 8b4f645 · 8b4f645
2 parents a2f2f69 + aa6681d
commit 8b4f645
Show file tree

Hide file tree

Showing 14 changed files with 143 additions and 71 deletions.
diff --git a/grunt.js → Gruntfile.js b/grunt.js → Gruntfile.js
@@ -3,24 +3,25 @@ module.exports = function(grunt) {
 
 	// Project configuration.
 	grunt.initConfig({
-		pkg: '<json:package.json>',
+		pkg: grunt.file.readJSON('package.json'),
+
 		meta: {
 			banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
-				'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
-				'<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' +
+				'<%= grunt.template.today("yyyy-mm-dd") + "\\n" %>' +
+				'<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
 				'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
-				' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */'
+				' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n\n'
 		},
 
 		sass: {
 			dist: {
 				files: {
-						'<%= pkg.name %>.css': 'src/<%= pkg.name %>.scss'
+					'<%= pkg.name %>.css': 'src/<%= pkg.name %>.scss'
 				}
 			}
 		},
 
-		mincss: {
+		cssmin: {
 			compress: {
 				files: {
 					'<%= pkg.name %>.min.css': [ '<%= pkg.name %>.css' ]
@@ -30,13 +31,16 @@ module.exports = function(grunt) {
 
 		// concat banner to final lib files
 		concat: {
+			options: {
+				banner: '<%= meta.banner %>'
+			},
 			lib: {
-				src: ['<banner:meta.banner>', 'hint.css'],
-				dest: 'hint.css'
+				src: ['<%= pkg.name %>.css'],
+				dest: '<%= pkg.name %>.css'
 			},
 			minlib: {
-				src: ['<banner:meta.banner>', 'hint.min.css'],
-				dest: 'hint.min.css'
+				src: ['<%= pkg.name %>.min.css'],
+				dest: '<%= pkg.name %>.min.css'
 			}
 		},
 
@@ -47,11 +51,12 @@ module.exports = function(grunt) {
 	});
 
 	// Dependencies
-	grunt.loadNpmTasks('grunt-sass');
-	grunt.loadNpmTasks('grunt-contrib-mincss');
-
+	grunt.loadNpmTasks('grunt-contrib-sass');
+	grunt.loadNpmTasks('grunt-contrib-cssmin');
+	grunt.loadNpmTasks('grunt-contrib-concat');
+
 	// Default task.
 	grunt.registerTask('default', 'sass');
-	grunt.registerTask('deploy', 'sass mincss concat');
+	grunt.registerTask('deploy', ['sass', 'cssmin', 'concat']);
 
 };
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Hint.css [v1.2.2]
+# Hint.css [v1.3.0]
 *A tooltip library in CSS for your lovely websites*
 
 `hint.css` is written as a pure CSS resource using which you can create cool tooltips for your web app. It does not rely on JavaScript and rather uses **data-* attribute**, **pseudo elements**, **content property** and **CSS3 transitions** to create the tooltips. Also it uses **BEM** naming convention particularly for the modifiers.
@@ -9,12 +9,25 @@
 http://kushagragour.in/lab/hint/
 
 ## Get Started
-Download one of the 2 library version:
 
-- [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.css
-- [minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css
+Get the library using one of the following ways:
 
-And include it in the *HEAD* of your page:
+1. **Github**
+
+ - [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.css
+ - [minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css
+
+2. **Bower**
+
+ ```
+ bower install hint.css
+ ```
+
+3. **CDN**
+
+ [http://www.jsdelivr.com/#!hint.css](http://www.jsdelivr.com/#!hint.css)
+
+Now include the library in the *HEAD* of your page:
 
 ```html
 <link rel="stylesheet" href="hint.css"></link>
@@ -46,12 +59,14 @@ Use it with other available modifiers in various combinations. Available modifie
 - `hint--success`
 - `hint--always`
 - `hint--rounded`
+- `hint--bounce`
 
 Check out some examples at http://kushagragour.in/lab/hint/
 
 ## Who's Using This?
 - [CSS3 Playground](http://playground.webflow.com/)
 - [Inkpen](http://inkpen.in/)
+- [BitCast](https://www.bitcast.io/)
 
 Are you using **hint.css** in your awesome project too? Let us know on the [mailing list](mailto:hintcss@googlegroups.com).
 

diff --git a/bower.json b/bower.json
@@ -0,0 +1,11 @@
+{
+	"name": "hint.css",
+	"version": "1.3.0",
+	"main": "hint.min.css",
+	"author": "Kushagra Gour",
+	"ignore": [
+		"CONTRIBUTING.md",
+		"src/",
+		"Gruntfile.js"
+	]
+}
diff --git a/demo.html b/demo.html
@@ -26,6 +26,7 @@
 
 			a {
 				color: #1A5A7A;
+				outline: none;
 				text-decoration: none;
 			}
         </style>
@@ -72,15 +73,21 @@ <h3>A tooltip library in CSS</h3>
 			<a class="hint--bottom  hint--success" data-hint="This is a success tooltip">Hurray! You have seen all 4 context types.</a>
 		</p>
 
-    <h3>Extra</h3>
+	    <h3>Extra</h3>
 
-    <p>
+	    <p>
 			<a class="hint--left  hint--always" data-hint="...which always keep showing">You can also make tooltips...</a>
 		</p>
 
-    <p>
-      <a class="hint--top  hint--rounded" data-hint="We have rounded corners for you">Hmm...So you don't like sharp edges?</a>
-    </p>
+	    <p>
+	      <a class="hint--top  hint--rounded" data-hint="We have rounded corners for you">Hmm...So you don't like sharp edges?</a>
+	    </p>
+
+	    <h3>Effects</h3>
+
+	    <p>
+			<a class="hint--right  hint--bounce" data-hint="Bounce">Adding a <code>hint--bounce</code> class gives you that...</a>
+		</p>
 
     </body>
 </html>
diff --git a/hint.css b/hint.css
@@ -1,4 +1,4 @@
-/*! Hint.css - v1.2.2 - 2013-06-01
+/*! Hint.css - v1.3.0 - 2013-08-05
 * http://kushagragour.in/lab/hint/
 * Copyright (c) 2013 Kushagra Gour; Licensed MIT */
 
@@ -29,11 +29,11 @@
   position: relative;
   display: inline-block;
   /**
-	 * tooltip arrow
-	 */
+   * tooltip arrow
+   */
   /**
-	 * tooltip body
-	 */ }
+   * tooltip body
+   */ }
   .hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
     position: absolute;
     -webkit-transform: translate3d(0, 0, 0);
@@ -46,7 +46,7 @@
     -webkit-transition: 0.3s ease;
     -moz-transition: 0.3s ease;
     transition: 0.3s ease; }
-  .hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after {
+  .hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
     visibility: visible;
     opacity: 1; }
   .hint:before, [data-hint]:before {
@@ -102,7 +102,7 @@
 .hint--top:before, .hint--top:after {
   bottom: 100%;
   left: 50%; }
-.hint--top:hover:before, .hint--top:hover:after {
+.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {
   -webkit-transform: translateY(-8px);
   -moz-transform: translateY(-8px);
   transform: translateY(-8px); }
@@ -117,7 +117,7 @@
 .hint--bottom:before, .hint--bottom:after {
   top: 100%;
   left: 50%; }
-.hint--bottom:hover:before, .hint--bottom:hover:after {
+.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before {
   -webkit-transform: translateY(8px);
   -moz-transform: translateY(8px);
   transform: translateY(8px); }
@@ -133,7 +133,7 @@
 .hint--right:before, .hint--right:after {
   left: 100%;
   bottom: 50%; }
-.hint--right:hover:before, .hint--right:hover:after {
+.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before {
   -webkit-transform: translateX(8px);
   -moz-transform: translateX(8px);
   transform: translateX(8px); }
@@ -149,7 +149,7 @@
 .hint--left:before, .hint--left:after {
   right: 100%;
   bottom: 50%; }
-.hint--left:hover:before, .hint--left:hover:after {
+.hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before {
   -webkit-transform: translateX(-8px);
   -moz-transform: translateX(-8px);
   transform: translateX(-8px); }
@@ -171,7 +171,7 @@
  */
 .hint--error:after {
   background-color: #b34e4d;
-  text-shadow: 0 -1px 0px #5a2626; }
+  text-shadow: 0 -1px 0px #592726; }
 .hint--error.hint--top:before {
   border-top-color: #b34e4d; }
 .hint--error.hint--bottom:before {
@@ -186,7 +186,7 @@
  */
 .hint--warning:after {
   background-color: #c09854;
-  text-shadow: 0 -1px 0px #6d5228; }
+  text-shadow: 0 -1px 0px #6c5328; }
 .hint--warning.hint--top:before {
   border-top-color: #c09854; }
 .hint--warning.hint--bottom:before {
@@ -201,7 +201,7 @@
  */
 .hint--info:after {
   background-color: #3986ac;
-  text-shadow: 0 -1px 0px #193c4c; }
+  text-shadow: 0 -1px 0px #193b4d; }
 .hint--info.hint--top:before {
   border-top-color: #3986ac; }
 .hint--info.hint--bottom:before {
@@ -216,7 +216,7 @@
  */
 .hint--success:after {
   background-color: #458746;
-  text-shadow: 0 -1px 0px #1a331a; }
+  text-shadow: 0 -1px 0px #1a321a; }
 .hint--success.hint--top:before {
   border-top-color: #458746; }
 .hint--success.hint--bottom:before {
@@ -266,3 +266,17 @@
  */
 .hint--rounded:after {
   border-radius: 4px; }
+
+/**
+ * source: hint-effects.scss
+ *
+ * Defines various transition effects for the tooltips.
+ * 
+ * Classes added:
+ * 	1) hint--bounce
+ * 	
+ */
+.hint--bounce:before, .hint--bounce:after {
+  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
diff --git a/hint.min.css b/hint.min.css
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
 	"name": "hint",
 	"title": "Hint.css",
 	"description": "A tooltip library in CSS for your lovely websites.",
-	"version": "1.2.2",
+	"version": "1.3.0",
 	"homepage": "http://kushagragour.in/lab/hint/",
 	"author": {
 		"name": "Kushagra Gour",
@@ -24,8 +24,9 @@
 	],
 	"keywords": [],
 	"devDependencies": {
-		"grunt-sass": "~@0.2.5",
-		"grunt-contrib-mincss": "~0.3.2",
-		"grunt": "~0.4.0"
+		"grunt-contrib-concat": "~0.3.0",
+		"grunt-contrib-cssmin": "~0.6.0",
+		"grunt-contrib-sass": "~0.4.1",
+		"grunt": "~0.4.1"
 	}
 }
diff --git a/src/hint-always.scss b/src/hint-always.scss
@@ -8,15 +8,6 @@
  * 	
  */
 
-// mixin to set margin on tooltip using translate transform
-@mixin set-margin($property, $transitionDirection) {
-	&:after, &:before {
-		-webkit-transform: #{$property}($transitionDirection * $transitionDistance);
-		-moz-transform: #{$property}($transitionDirection * $transitionDistance);
-		transform: #{$property}($transitionDirection * $transitionDistance);
-	}
-}
-
 .hint--always {
 	&:after, &:before {
 		opacity: 1;

diff --git a/src/hint-core.scss b/src/hint-core.scss
@@ -28,17 +28,17 @@
 		// shows the tooltip.
 		visibility: hidden;
 		opacity: 0;
-		z-index: 1000000;
+		z-index: $zIndex;
 		// shouldn't receive pointer events, otherwise even hovering tooltip will make it appear
 		pointer-events: none;
 
-		// pseudo element transition is gonna come soon: https://bugs.webkit.org/show_bug.cgi?id=92591
 		-webkit-transition: 0.3s ease;
 		-moz-transition: 0.3s ease;
 		transition: 0.3s ease;
 	}
 
-	&:hover:before, &:hover:after {
+	&:hover:before, &:hover:after,
+	&:focus:before, &:focus:after {
 		visibility: visible;
 		opacity: 1;
 	}

diff --git a/src/hint-effects.scss b/src/hint-effects.scss
@@ -0,0 +1,17 @@
+/**
+ * source: hint-effects.scss
+ *
+ * Defines various transition effects for the tooltips.
+ * 
+ * Classes added:
+ * 	1) hint--bounce
+ * 	
+ */
+
+.hint--bounce {
+	&:before, &:after {
+		-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(.71,1.7,.77,1.24);
+		-moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(.71,1.7,.77,1.24);
+		transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(.71,1.7,.77,1.24);
+	}
+}