├── .gitignore ├── Gruntfile.js ├── README.md ├── _config.yml ├── bower.json ├── dist ├── css │ ├── rippler.css │ ├── rippler.css.map │ └── rippler.min.css ├── js │ ├── jquery.rippler.js │ └── jquery.rippler.min.js └── svg │ └── circle.svg ├── docs ├── _includes │ ├── adpacks.html │ ├── example-setup.html │ ├── footer.html │ ├── head.html │ ├── header.html │ ├── social-follow.html │ └── social-link.html ├── _layouts │ ├── base.html │ └── home.html ├── assets │ ├── ico │ │ ├── favicon.ico │ │ └── touch-icon-144.png │ ├── images │ │ ├── sample.gif │ │ └── tokyo.jpg │ └── less │ │ ├── component │ │ └── syntax.less │ │ ├── docs.less │ │ ├── layout │ │ ├── base.less │ │ └── home.less │ │ └── variables.less └── index.html ├── package.json └── src ├── js ├── .jshintrc └── rippler.js ├── less ├── .csscomb.json ├── .csslintrc ├── core.less └── rippler.less └── svg └── circle.svg /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components 3 | _gh_pages 4 | docs/vendor 5 | docs/assets/css 6 | docs/svg 7 | docs/css 8 | docs/js -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | "use strict"; 4 | 5 | require('load-grunt-tasks')(grunt); 6 | require('time-grunt')(grunt); 7 | 8 | grunt.initConfig({ 9 | 10 | pkg: grunt.file.readJSON('package.json'), 11 | 12 | banner: 13 | '/*!\n' + 14 | ' * <%= pkg.name %> v<%= pkg.version %>\n' + 15 | ' * <%= pkg.url %>\n' + 16 | ' * Licensed under <%= pkg.licenses %>\n' + 17 | ' * Author : <%= pkg.author %>\n' + 18 | ' * <%= pkg.author_url %>\n' + 19 | ' */\n', 20 | // ==================================================== 21 | clean: { 22 | files: [ 23 | '<%= pkg.dist %>', 24 | '<%= pkg.docs %>/js/*.js', 25 | '<%= pkg.docs %>/css/*.css', 26 | '<%= pkg.docs %>/svg/*.svg', 27 | '<%= pkg.public %>' 28 | ] 29 | }, 30 | // ==================================================== 31 | less:{ 32 | source: { 33 | options: { 34 | strictMath: true, 35 | sourceMap: true, 36 | outputSourceFiles: true, 37 | sourceMapURL: ['<%= pkg.name %>.css.map'], 38 | sourceMapFilename: '<%= pkg.docs %>/css/<%= pkg.name %>.css.map' 39 | }, 40 | files: { 41 | '<%= pkg.docs %>/css/<%= pkg.name %>.css': '<%= pkg.source %>/less/<%= pkg.name %>.less' 42 | } 43 | }, 44 | minify: { 45 | options: { 46 | cleancss: true 47 | }, 48 | files: { 49 | '<%= pkg.docs %>/css/<%= pkg.name %>.min.css': '<%= pkg.docs %>/css/<%= pkg.name %>.css' 50 | } 51 | }, 52 | docs: { 53 | options: { 54 | strictMath: true, 55 | sourceMap: true, 56 | outputSourceFiles: true, 57 | sourceMapURL: ['<%= pkg.name %>.css.map'], 58 | sourceMapFilename: '<%= pkg.assets %>/css/docs.css.map' 59 | }, 60 | files: { 61 | '<%= pkg.assets %>/css/docs.css': '<%= pkg.assets %>/less/docs.less' 62 | } 63 | }, 64 | docsMin: { 65 | options: { 66 | cleancss: true 67 | }, 68 | files: { 69 | '<%= pkg.assets %>/css/docs.min.css': '<%= pkg.assets %>/css/docs.css' 70 | } 71 | } 72 | 73 | }, 74 | // ==================================================== 75 | autoprefixer: { 76 | options: { 77 | browsers: [ 78 | 'Android 2.3', 79 | 'Android >= 4', 80 | 'Chrome >= 20', 81 | 'Firefox >= 24', // Firefox 24 is the latest ESR 82 | 'Explorer >= 8', 83 | 'iOS >= 6', 84 | 'Opera >= 12', 85 | 'Safari >= 6' 86 | ] 87 | }, 88 | source: { 89 | options: { 90 | map: true 91 | }, 92 | src: '<%= pkg.docs %>/css/<%= pkg.name %>.css' 93 | }, 94 | docs: { 95 | options: { 96 | map: true 97 | }, 98 | src: '<%= pkg.assets %>/css/docs.css' 99 | } 100 | }, 101 | // ==================================================== 102 | csscomb: { 103 | options: { 104 | config: '<%= pkg.source %>/less/.csscomb.json' 105 | }, 106 | source: { 107 | expand: true, 108 | cwd: '<%= pkg.docs %>/css/', 109 | src: ['*.css', '!*.min.css'], 110 | dest: '<%= pkg.docs %>/css/' 111 | }, 112 | docs: { 113 | expand: true, 114 | cwd: '<%= pkg.assets %>/css/', 115 | src: ['*.css', '!*.min.css'], 116 | dest: '<%= pkg.assets %>/css/' 117 | } 118 | }, 119 | // ==================================================== 120 | usebanner: { 121 | options: { 122 | position: 'top', 123 | banner: '<%= banner %>' 124 | }, 125 | source: { 126 | src: '<%= pkg.docs %>/css/*.css' 127 | }, 128 | docs: { 129 | src: '<%= pkg.assets %>/css/*.css' 130 | } 131 | }, 132 | // ==================================================== 133 | csslint: { 134 | options: { 135 | csslintrc: '<%= pkg.source %>/less/.csslintrc' 136 | }, 137 | source: [ 138 | '<%= pkg.docs %>/css/<%= pkg.name %>.css', 139 | '<%= pkg.assets %>/css/docs.css' 140 | ] 141 | }, 142 | // ==================================================== 143 | uglify: { 144 | options: { 145 | banner: '<%= banner %>', 146 | report: 'min', 147 | mangle: false, 148 | compress:false, 149 | }, 150 | source:{ 151 | options: { 152 | indentLevel: 2, 153 | beautify: true 154 | }, 155 | files : { 156 | '<%= pkg.docs %>/js/jquery.<%= pkg.name %>.js' : [ 157 | '<%= pkg.source %>/js/<%= pkg.name %>.js' 158 | ] 159 | } 160 | }, 161 | minify:{ 162 | files : { 163 | '<%= pkg.docs %>/js/jquery.<%= pkg.name %>.min.js' : [ 164 | '<%= pkg.docs %>/js/jquery.<%= pkg.name %>.js' 165 | ] 166 | } 167 | } 168 | }, 169 | // ==================================================== 170 | jshint: { 171 | options: { 172 | jshintrc: '<%= pkg.source %>/js/.jshintrc', 173 | }, 174 | grunt: { 175 | src: 'Gruntfile.js' 176 | }, 177 | source: { 178 | src: [ 179 | '<%= pkg.docs %>/js/jquery.<%= pkg.name %>.js', 180 | '<%= pkg.docs %>/js/jquery.<%= pkg.name %>.min.js' 181 | ] 182 | } 183 | }, 184 | // ==================================================== 185 | validation: { 186 | options: { 187 | charset: 'utf-8', 188 | doctype: 'HTML5', 189 | failHard: true, 190 | reset: true, 191 | relaxerror: [ 192 | 'Bad value X-UA-Compatible for attribute http-equiv on element meta.', 193 | 'Element img is missing required attribute src.' 194 | ] 195 | }, 196 | files: { 197 | src: [ 198 | '<%= pkg.public %>/index.html', 199 | '<%= pkg.public %>/**/*.html' 200 | ] 201 | } 202 | }, 203 | // ==================================================== 204 | copy: { 205 | dist: { 206 | expand: true, 207 | cwd: '<%= pkg.docs %>', 208 | src: [ 209 | 'js/*.js', 210 | 'css/*.css', 211 | 'css/*.map', 212 | 'svg/*.svg' 213 | ], 214 | dest: '<%= pkg.dist %>' 215 | }, 216 | svg: { 217 | expand: true, 218 | cwd: '<%= pkg.source %>', 219 | src: [ 220 | 'svg/*.svg' 221 | ], 222 | dest: '<%= pkg.docs %>' 223 | } 224 | }, 225 | // ==================================================== 226 | connect: { 227 | server: { 228 | options: { 229 | port: 9999, 230 | hostname: '0.0.0.0', 231 | base: '<%= pkg.public %>/', 232 | open: { 233 | server: { 234 | path: 'http://<%= connect.server.options.hostname %>:<%= connect.server.options.port %>' 235 | } 236 | } 237 | } 238 | } 239 | }, 240 | // ==================================================== 241 | notify: { 242 | options: { 243 | title: '<%= pkg.name %> Grunt Notify', 244 | }, 245 | success:{ 246 | options: { 247 | message: 'Success!', 248 | } 249 | } 250 | }, 251 | // ==================================================== 252 | bower: { 253 | install: { 254 | options: { 255 | targetDir: '<%= pkg.docs %>/vendor', 256 | layout: 'byComponent', 257 | install: true, 258 | verbose: false, 259 | cleanTargetDir: true, 260 | cleanBowerDir: false 261 | } 262 | } 263 | }, 264 | // ==================================================== 265 | jekyll: { 266 | dist: { 267 | options: { 268 | config: '_config.yml' 269 | } 270 | } 271 | }, 272 | // ==================================================== 273 | watch: { 274 | options: { 275 | spawn: false, 276 | livereload : true 277 | }, 278 | grunt: { 279 | files: ['<%= jshint.grunt.src %>'], 280 | tasks: [ 281 | 'jshint:grunt', 282 | 'notify' 283 | ] 284 | }, 285 | js: { 286 | files: [ 287 | '<%= pkg.source %>/js/*.js' 288 | ], 289 | tasks: [ 290 | 'uglify', 291 | 'jshint:source', 292 | 'jekyll', 293 | 'notify' 294 | ] 295 | }, 296 | html: { 297 | files: [ 298 | '<%= pkg.docs %>/*.html', 299 | '<%= pkg.docs %>/_includes/*', 300 | '<%= pkg.docs %>/_posts/*', 301 | '<%= pkg.docs %>/_layouts/*' 302 | ], 303 | tasks: [ 304 | 'build-html', 305 | 'notify' 306 | ] 307 | }, 308 | less: { 309 | files: [ 310 | '<%= pkg.source %>/less/*.less', 311 | '<%= pkg.source %>/less/**/*.less' 312 | ], 313 | tasks: [ 314 | 'build-less', 315 | 'csslint', 316 | 'jekyll', 317 | 'notify' 318 | ] 319 | }, 320 | docsLess: { 321 | files: [ 322 | '<%= pkg.assets %>/less/*.less', 323 | '<%= pkg.assets %>/less/**/*.less' 324 | ], 325 | tasks: [ 326 | 'build-docsLess', 327 | 'csslint', 328 | 'jekyll', 329 | 'notify' 330 | ] 331 | }, 332 | svg: { 333 | files: [ 334 | '<%= pkg.source %>/svg/*.svg' 335 | ], 336 | tasks: [ 337 | 'build-svg', 338 | 'jekyll', 339 | 'notify' 340 | ] 341 | } 342 | }, 343 | // ==================================================== 344 | buildcontrol: { 345 | options: { 346 | dir: '<%= pkg.public %>', 347 | commit: true, 348 | push: true, 349 | message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%' 350 | }, 351 | pages: { 352 | options: { 353 | remote: 'git@github.com:<%= pkg.repository.user %>/<%= pkg.name %>.git', 354 | branch: 'gh-pages' 355 | } 356 | } 357 | } 358 | 359 | }); 360 | 361 | // ==================================================== 362 | grunt.registerTask('deploy', [ 363 | 'buildcontrol', 364 | 'notify' 365 | ]); 366 | 367 | // ==================================================== 368 | grunt.registerTask('build-less', [ 369 | 'less:source', 370 | 'autoprefixer:source', 371 | 'usebanner:source', 372 | 'csscomb:source', 373 | 'less:minify', 374 | ]); 375 | 376 | // ==================================================== 377 | grunt.registerTask('build-docsLess', [ 378 | 'less:docs', 379 | 'autoprefixer:docs', 380 | 'usebanner:docs', 381 | 'csscomb:docs', 382 | 'less:docsMin', 383 | ]); 384 | 385 | // ==================================================== 386 | grunt.registerTask('build-js', [ 387 | 'uglify' 388 | ]); 389 | 390 | // ==================================================== 391 | grunt.registerTask('build-svg', [ 392 | 'copy:svg' 393 | ]); 394 | 395 | // ==================================================== 396 | grunt.registerTask('build-html', [ 397 | 'jekyll' 398 | ]); 399 | 400 | // ==================================================== 401 | grunt.registerTask('test', [ 402 | 'jshint:source', 403 | 'csslint', 404 | ]); 405 | 406 | // ==================================================== 407 | grunt.registerTask('b', [ 408 | 'clean', 409 | 'bower', 410 | 'build-svg', 411 | 'build-less', 412 | 'build-docsLess', 413 | 'build-js', 414 | 'build-html', 415 | 'test', 416 | 'copy:dist' 417 | ]); 418 | 419 | // ==================================================== 420 | grunt.registerTask('default', function () { 421 | grunt.log.warn('`grunt` to start a watch.'); 422 | grunt.task.run([ 423 | 'connect', 424 | 'watch' 425 | ]); 426 | }); 427 | 428 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Bower version](https://badge.fury.io/bo/rippler.svg)](http://badge.fury.io/bo/rippler) 2 | [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/) 3 | 4 | Rippler 5 | ================== 6 | Effect that spreads like a wave in touch or click. 7 | You can also use the buttons on the bootstrap. 8 | 9 | ![demo image](./docs/assets/images/sample.gif) 10 | 11 | ## Example & Installation 12 | http://blivesta.github.io/rippler 13 | 14 | ## Sidenote 15 | 16 | Due to click errors on firefox and safari is rippler using 0 for default effectSize! 17 | 18 | ``` 19 | $(document).ready(function() { 20 | $(".rippler").rippler({ 21 | effectClass : 'rippler-effect' 22 | ,effectSize : 0 // Default size (width & height) 23 | ,addElement : 'div' // e.g. 'svg'(feature) 24 | ,duration : 400 25 | }); 26 | }); 27 | ``` 28 | 29 | ## License 30 | MIT license. 31 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | markdown: redcarpet 2 | pygments: true 3 | permalink: pretty 4 | exclude: ['vendor/bootstrap','vendor/jquery','vendor/drawer'] 5 | source: ./docs 6 | destination: ./_gh_pages 7 | encoding: UTF-8 8 | title: Rippler 9 | discription: Effect that spreads like a wave in touch or click. 10 | url: http://git.blivesta.com/rippler 11 | repo: rippler 12 | repo_url: https://github.com/blivesta/rippler 13 | author: blivesta 14 | author_url: http://blivesta.com 15 | current_version: 0.1.1 16 | twitter: blivesta 17 | tag: jquery,css3,svg 18 | git_fork_btn: http://ghbtns.com/github-btn.html?user=blivesta&repo=rippler&type=fork&count=true 19 | git_star_btn: http://ghbtns.com/github-btn.html?user=blivesta&repo=rippler&type=watch&count=true 20 | git_follow_btn: http://ghbtns.com/github-btn.html?user=blivesta&type=follow&count=false 21 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rippler", 3 | "description": "Effect that spreads like a wave in touch or click.", 4 | "version": "0.1.1", 5 | "keywords": [ 6 | "css3", 7 | "js", 8 | "less", 9 | "animation", 10 | "jquery", 11 | "pligin" 12 | ], 13 | "homepage": "http://git.blivesta.com/rippler", 14 | "main": [ 15 | "dist/less/**", 16 | "dist/css/rippler.css", 17 | "dist/css/rippler.min.css", 18 | "dist/js/rippler.js", 19 | "dist/js/rippler.min.js", 20 | "dist/svg/*.svg" 21 | ], 22 | "ignore": [ 23 | ".*", 24 | "src", 25 | "*.yml", 26 | "*.html", 27 | "*.json", 28 | "Gruntfile.js" 29 | ], 30 | "devDependencies": { 31 | "cooker": "~0.4.7" 32 | }, 33 | "exportsOverride": { 34 | "cooker": { 35 | "css": "dist/css/", 36 | "less": "dist/less/" 37 | } 38 | } 39 | 40 | 41 | } 42 | -------------------------------------------------------------------------------- /dist/css/rippler.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * rippler v0.1.1 3 | * http://blivesta.github.io/rippler/ 4 | * Licensed under MIT 5 | * Author : blivesta 6 | * http://blivesta.com/ 7 | */ 8 | 9 | .rippler { 10 | position: relative; 11 | overflow: hidden; 12 | cursor: pointer; 13 | -webkit-user-select: none; 14 | -moz-user-select: none; 15 | -ms-user-select: none; 16 | user-select: none; 17 | } 18 | .rippler:focus, 19 | .rippler:active { 20 | outline: none; 21 | } 22 | .rippler::-moz-focus-inner { 23 | border: 0; 24 | } 25 | .rippler-button { 26 | display: inline-block; 27 | } 28 | .rippler-img { 29 | display: block; 30 | } 31 | .rippler-circle-mask { 32 | border-radius: 50%; 33 | 34 | -webkit-mask: url(../svg/circle.svg) no-repeat; 35 | -webkit-mask-size: 100%; 36 | } 37 | .rippler-effect { 38 | position: absolute; 39 | opacity: .2; 40 | } 41 | .rippler-default .rippler-svg { 42 | fill: #fff; 43 | } 44 | .rippler-inverse .rippler-svg { 45 | fill: #000; 46 | } 47 | .rippler-bs-default .rippler-svg { 48 | fill: #000; 49 | } 50 | .rippler-bs-inverse .rippler-svg { 51 | fill: #000; 52 | } 53 | .rippler-bs-primary .rippler-svg { 54 | fill: #428bca; 55 | } 56 | .rippler-bs-info .rippler-svg { 57 | fill: #5bc0de; 58 | } 59 | .rippler-bs-success .rippler-svg { 60 | fill: #5cb85c; 61 | } 62 | .rippler-bs-warning .rippler-svg { 63 | fill: #ed9c28; 64 | } 65 | .rippler-bs-danger .rippler-svg { 66 | fill: #d2322d; 67 | } 68 | .rippler-div { 69 | border-radius: 50%; 70 | } 71 | .rippler-default .rippler-div { 72 | background-color: #fff; 73 | } 74 | .rippler-inverse .rippler-div { 75 | background-color: #000; 76 | } 77 | .rippler-bs-default .rippler-div { 78 | background-color: #000; 79 | } 80 | .rippler-bs-inverse .rippler-div { 81 | background-color: #000; 82 | } 83 | .rippler-bs-primary .rippler-div { 84 | background-color: #428bca; 85 | } 86 | .rippler-bs-info .rippler-div { 87 | background-color: #5bc0de; 88 | } 89 | .rippler-bs-success .rippler-div { 90 | background-color: #5cb85c; 91 | } 92 | .rippler-bs-warning .rippler-div { 93 | background-color: #ed9c28; 94 | } 95 | .rippler-bs-danger .rippler-div { 96 | background-color: #d2322d; 97 | } 98 | /*# sourceMappingURL=rippler.css.map */ 99 | -------------------------------------------------------------------------------- /dist/css/rippler.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"rippler.css","sources":["src/less/core.less","rippler.css"],"names":[],"mappings":"AAAA;EACE,oBAAA;EACA,kBAAA;EACA,2BAAA;EAAA,wBAAA;EAAA,uBAAA;EAAA,mBAAA;EACA,iBAAA;ECCD;ADAC;;EAEE,eAAA;ECEH;ADAC;EACE,WAAA;ECEH;ADGD;EACE,uBAAA;ECDD;ADKD;EACE,gBAAA;ECHD;ADMD;EACE,oBAAA;EACA,gDAAA;EACA,yBAAA;ECJD;ADOD;EACE,oBAAA;EACA,aAAA;ECLD;ADWC;EAAqB,YAAA;ECRtB;ADSC;EAAqB,YAAA;ECNtB;ADSC;EAAwB,YAAA;ECNzB;ADOC;EAAwB,YAAA;ECJzB;ADKC;EAAwB,eAAA;ECFzB;ADGC;EAAwB,eAAA;ECAzB;ADCC;EAAwB,eAAA;ECEzB;ADDC;EAAwB,eAAA;ECIzB;ADHC;EAAwB,eAAA;ECMzB;ADFD;EAEE,oBAAA;ECGD;ADDC;EAAqB,wBAAA;ECItB;ADHC;EAAqB,wBAAA;ECMtB;ADHC;EAAwB,wBAAA;ECMzB;ADLC;EAAwB,wBAAA;ECQzB;ADPC;EAAwB,2BAAA;ECUzB;ADTC;EAAwB,2BAAA;ECYzB;ADXC;EAAwB,2BAAA;ECczB;ADbC;EAAwB,2BAAA;ECgBzB;ADfC;EAAwB,2BAAA;ECkBzB","sourcesContent":[".rippler {\n position:relative;\n overflow:hidden;\n user-select:none;\n cursor: pointer;\n &:focus,\n &:active {\n outline:none;\n }\n &::-moz-focus-inner{\n border: 0;\n }\n}\n\n// button\n.rippler-button {\n display: inline-block;\n}\n\n// image\n.rippler-img {\n display:block;\n}\n\n.rippler-circle-mask {\n border-radius:50%;\n -webkit-mask: url(../svg/circle.svg) no-repeat;\n -webkit-mask-size:100%;\n}\n\n.rippler-effect {\n position:absolute;\n opacity:.2;\n}\n\n// \n// if addElement = 'svg'\n.rippler-svg {\n .rippler-default & { fill:#fff; }\n .rippler-inverse & { fill:#000; }\n\n // bootstrap state colors\n .rippler-bs-default & { fill:#000; }\n .rippler-bs-inverse & { fill:#000; }\n .rippler-bs-primary & { fill:#428bca; }\n .rippler-bs-info & { fill:#5bc0de; }\n .rippler-bs-success & { fill:#5cb85c; }\n .rippler-bs-warning & { fill:#ed9c28; }\n .rippler-bs-danger & { fill:#d2322d; }\n}\n\n// if addElement = 'div'\n.rippler-div {\n\n border-radius: 50%;\n\n .rippler-default & { background-color:#fff; }\n .rippler-inverse & { background-color:#000; }\n\n // bootstrap state colors\n .rippler-bs-default & { background-color:#000; }\n .rippler-bs-inverse & { background-color:#000; }\n .rippler-bs-primary & { background-color:#428bca; }\n .rippler-bs-info & { background-color:#5bc0de; }\n .rippler-bs-success & { background-color:#5cb85c; }\n .rippler-bs-warning & { background-color:#ed9c28; }\n .rippler-bs-danger & { background-color:#d2322d; }\n}\n",null]} -------------------------------------------------------------------------------- /dist/css/rippler.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * rippler v0.1.1 3 | * http://blivesta.github.io/rippler/ 4 | * Licensed under MIT 5 | * Author : blivesta 6 | * http://blivesta.com/ 7 | */.rippler{position:relative;overflow:hidden;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rippler:focus,.rippler:active{outline:0}.rippler::-moz-focus-inner{border:0}.rippler-button{display:inline-block}.rippler-img{display:block}.rippler-circle-mask{border-radius:50%;-webkit-mask:url(../svg/circle.svg) no-repeat;-webkit-mask-size:100%}.rippler-effect{position:absolute;opacity:.2}.rippler-default .rippler-svg{fill:#fff}.rippler-inverse .rippler-svg{fill:#000}.rippler-bs-default .rippler-svg{fill:#000}.rippler-bs-inverse .rippler-svg{fill:#000}.rippler-bs-primary .rippler-svg{fill:#428bca}.rippler-bs-info .rippler-svg{fill:#5bc0de}.rippler-bs-success .rippler-svg{fill:#5cb85c}.rippler-bs-warning .rippler-svg{fill:#ed9c28}.rippler-bs-danger .rippler-svg{fill:#d2322d}.rippler-div{border-radius:50%}.rippler-default .rippler-div{background-color:#fff}.rippler-inverse .rippler-div{background-color:#000}.rippler-bs-default .rippler-div{background-color:#000}.rippler-bs-inverse .rippler-div{background-color:#000}.rippler-bs-primary .rippler-div{background-color:#428bca}.rippler-bs-info .rippler-div{background-color:#5bc0de}.rippler-bs-success .rippler-div{background-color:#5cb85c}.rippler-bs-warning .rippler-div{background-color:#ed9c28}.rippler-bs-danger .rippler-div{background-color:#d2322d} -------------------------------------------------------------------------------- /dist/js/jquery.rippler.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * rippler v0.1.1 3 | * http://blivesta.github.io/rippler/ 4 | * Licensed under MIT 5 | * Author : blivesta 6 | * http://blivesta.com/ 7 | */ 8 | (function($) { 9 | "use strict"; 10 | var namespace = "rippler"; 11 | var methods = { 12 | init: function(options) { 13 | options = $.extend({ 14 | effectClass: "rippler-effect", 15 | effectSize: 16, 16 | addElement: "div", 17 | duration: 600 18 | }, options); 19 | return this.each(function() { 20 | var _this = this; 21 | var $this = $(this); 22 | var data = $this.data(namespace); 23 | if (!data) { 24 | options = $.extend({}, options); 25 | $this.data(namespace, { 26 | options: options 27 | }); 28 | if (typeof document.ontouchstart != "undefined") { 29 | $this.on("touchstart." + namespace, function(event) { 30 | var $self = $(this); 31 | methods.elementAdd.call(_this, $self, event); 32 | }); 33 | $this.on("touchend." + namespace, function(event) { 34 | var $self = $(this); 35 | methods.effect.call(_this, $self, event); 36 | }); 37 | } else { 38 | $this.on("mousedown." + namespace, function(event) { 39 | var $self = $(this); 40 | methods.elementAdd.call(_this, $self, event); 41 | }); 42 | $this.on("mouseup." + namespace, function(event) { 43 | var $self = $(this); 44 | methods.effect.call(_this, $self, event); 45 | }); 46 | } 47 | } 48 | }); 49 | }, 50 | template: function(options) { 51 | var $this = $(this); 52 | options = $this.data(namespace).options; 53 | var element; 54 | var svgElementClass = "rippler-svg"; 55 | var divElementClass = "rippler-div"; 56 | var circle = ''; 57 | var svgElement = '' + circle + ""; 58 | var divElement = '
'; 59 | if (options.addElement === "svg") { 60 | element = svgElement; 61 | } else { 62 | element = divElement; 63 | } 64 | return element; 65 | }, 66 | elementAdd: function($self, event, options) { 67 | var _this = this; 68 | var $this = $(this); 69 | options = $this.data(namespace).options; 70 | $self.append(methods.template.call(_this)); 71 | var $effect = $self.find("." + options.effectClass); 72 | var selfOffset = $self.offset(); 73 | var eventX = methods.targetX.call(_this, event); 74 | var eventY = methods.targetY.call(_this, event); 75 | $effect.css({ 76 | width: options.effectSize, 77 | height: options.effectSize, 78 | left: eventX - selfOffset.left - options.effectSize / 2, 79 | top: eventY - selfOffset.top - options.effectSize / 2 80 | }); 81 | return _this; 82 | }, 83 | effect: function($self, event, options) { 84 | var _this = this; 85 | var $this = $(this); 86 | options = $this.data(namespace).options; 87 | var $effect = $("." + options.effectClass); 88 | var selfOffset = $self.offset(); 89 | var thisW = $this.outerWidth(); 90 | var thisH = $this.outerHeight(); 91 | var effectMaxWidth = methods.diagonal(thisW, thisH) * 2; 92 | var eventX = methods.targetX.call(_this, event); 93 | var eventY = methods.targetY.call(_this, event); 94 | $effect.css({ 95 | width: effectMaxWidth, 96 | height: effectMaxWidth, 97 | left: eventX - selfOffset.left - effectMaxWidth / 2, 98 | top: eventY - selfOffset.top - effectMaxWidth / 2, 99 | transition: "all " + options.duration / 1e3 + "s ease-out" 100 | }); 101 | return methods.elementRemove.call(_this); 102 | }, 103 | elementRemove: function(options) { 104 | var _this = this; 105 | var $this = $(this); 106 | options = $this.data(namespace).options; 107 | var $effect = $("." + options.effectClass); 108 | setTimeout(function() { 109 | $effect.css({ 110 | opacity: 0, 111 | transition: "all " + options.duration / 1e3 + "s ease-out" 112 | }); 113 | setTimeout(function() { 114 | $effect.remove(); 115 | }, options.duration * 1.5); 116 | }, options.duration); 117 | return _this; 118 | }, 119 | targetX: function(event) { 120 | var e = event.originalEvent; 121 | var eventX; 122 | if (typeof document.ontouchstart != "undefined") { 123 | eventX = e.changedTouches[0].pageX; 124 | } else { 125 | eventX = e.pageX; 126 | } 127 | return eventX; 128 | }, 129 | targetY: function(event) { 130 | var e = event.originalEvent; 131 | var eventY; 132 | if (typeof document.ontouchstart != "undefined") { 133 | eventY = e.changedTouches[0].pageY; 134 | } else { 135 | eventY = e.pageY; 136 | } 137 | return eventY; 138 | }, 139 | diagonal: function(x, y) { 140 | if (x > 0 && y > 0) return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); else return false; 141 | }, 142 | destroy: function() { 143 | return this.each(function() { 144 | var $this = $(this); 145 | $(window).unbind("." + namespace); 146 | $this.removeData(namespace); 147 | }); 148 | } 149 | }; 150 | $.fn.rippler = function(method) { 151 | if (methods[method]) { 152 | return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 153 | } else if (typeof method === "object" || !method) { 154 | return methods.init.apply(this, arguments); 155 | } else { 156 | $.error("Method " + method + " does not exist on jQuery." + namespace); 157 | } 158 | }; 159 | })(jQuery); -------------------------------------------------------------------------------- /dist/js/jquery.rippler.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * rippler v0.1.1 3 | * http://blivesta.github.io/rippler/ 4 | * Licensed under MIT 5 | * Author : blivesta 6 | * http://blivesta.com/ 7 | */ 8 | (function($){"use strict";var namespace="rippler";var methods={init:function(options){options=$.extend({effectClass:"rippler-effect",effectSize:16,addElement:"div",duration:600},options);return this.each(function(){var _this=this;var $this=$(this);var data=$this.data(namespace);if(!data){options=$.extend({},options);$this.data(namespace,{options:options});if(typeof document.ontouchstart!="undefined"){$this.on("touchstart."+namespace,function(event){var $self=$(this);methods.elementAdd.call(_this,$self,event)});$this.on("touchend."+namespace,function(event){var $self=$(this);methods.effect.call(_this,$self,event)})}else{$this.on("mousedown."+namespace,function(event){var $self=$(this);methods.elementAdd.call(_this,$self,event)});$this.on("mouseup."+namespace,function(event){var $self=$(this);methods.effect.call(_this,$self,event)})}}})},template:function(options){var $this=$(this);options=$this.data(namespace).options;var element;var svgElementClass="rippler-svg";var divElementClass="rippler-div";var circle='';var svgElement=''+circle+"";var divElement='
';if(options.addElement==="svg"){element=svgElement}else{element=divElement}return element},elementAdd:function($self,event,options){var _this=this;var $this=$(this);options=$this.data(namespace).options;$self.append(methods.template.call(_this));var $effect=$self.find("."+options.effectClass);var selfOffset=$self.offset();var eventX=methods.targetX.call(_this,event);var eventY=methods.targetY.call(_this,event);$effect.css({width:options.effectSize,height:options.effectSize,left:eventX-selfOffset.left-options.effectSize/2,top:eventY-selfOffset.top-options.effectSize/2});return _this},effect:function($self,event,options){var _this=this;var $this=$(this);options=$this.data(namespace).options;var $effect=$("."+options.effectClass);var selfOffset=$self.offset();var thisW=$this.outerWidth();var thisH=$this.outerHeight();var effectMaxWidth=methods.diagonal(thisW,thisH)*2;var eventX=methods.targetX.call(_this,event);var eventY=methods.targetY.call(_this,event);$effect.css({width:effectMaxWidth,height:effectMaxWidth,left:eventX-selfOffset.left-effectMaxWidth/2,top:eventY-selfOffset.top-effectMaxWidth/2,transition:"all "+options.duration/1e3+"s ease-out"});return methods.elementRemove.call(_this)},elementRemove:function(options){var _this=this;var $this=$(this);options=$this.data(namespace).options;var $effect=$("."+options.effectClass);setTimeout(function(){$effect.css({opacity:0,transition:"all "+options.duration/1e3+"s ease-out"});setTimeout(function(){$effect.remove()},options.duration*1.5)},options.duration);return _this},targetX:function(event){var e=event.originalEvent;var eventX;if(typeof document.ontouchstart!="undefined"){eventX=e.changedTouches[0].pageX}else{eventX=e.pageX}return eventX},targetY:function(event){var e=event.originalEvent;var eventY;if(typeof document.ontouchstart!="undefined"){eventY=e.changedTouches[0].pageY}else{eventY=e.pageY}return eventY},diagonal:function(x,y){if(x>0&&y>0)return Math.sqrt(Math.pow(x,2)+Math.pow(y,2));else return false},destroy:function(){return this.each(function(){var $this=$(this);$(window).unbind("."+namespace);$this.removeData(namespace)})}};$.fn.rippler=function(method){if(methods[method]){return methods[method].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof method==="object"||!method){return methods.init.apply(this,arguments)}else{$.error("Method "+method+" does not exist on jQuery."+namespace)}}})(jQuery); -------------------------------------------------------------------------------- /dist/svg/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/_includes/adpacks.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /docs/_includes/example-setup.html: -------------------------------------------------------------------------------- 1 |

Step 1: Link required files

2 | {% highlight html %} 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {% endhighlight %} 15 | 16 |

Step 2: HTML markup

17 | {% highlight html %} 18 | 19 | 20 | 21 | 22 | 23 | {% endhighlight %} 24 | 25 |

Step 3: Call the rippler

26 | {% highlight js %} 27 | $(document).ready(function() { 28 | $(".rippler").rippler({ 29 | effectClass : 'rippler-effect' 30 | ,effectSize : 16 // Default size (width & height) 31 | ,addElement : 'div' // e.g. 'svg'(feature) 32 | ,duration : 400 33 | }); 34 | }); 35 | {% endhighlight %} 36 | 37 | -------------------------------------------------------------------------------- /docs/_includes/footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {% if page.layout == 'base' %} 4 | {% include social-link.html %} 5 | {% endif %} 6 | {% include social-follow.html %} 7 | 8 |
9 | 10 |
    11 |
  • Currently v{{ site.current_version }}
    • 12 |
  • ·
    • 13 |
  • Code licensed under the MIT.
    • 14 |
  • ·
    • 15 |
  • 16 | Author   17 | {{ site.author }} 18 |
    • 19 |
20 | 21 | 34 |
35 |
-------------------------------------------------------------------------------- /docs/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {% if page.layout == 'home' %} 8 | 9 | {% endif %} 10 | 11 | {% if page.layout == 'home' %} 12 | {{ site.title }} · {{ site.discription }} 13 | {% else %} 14 | {{ page.title }} · {{ site.title }} · {{ site.discription }} 15 | {% endif %} 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 57 | 58 | -------------------------------------------------------------------------------- /docs/_includes/header.html: -------------------------------------------------------------------------------- 1 | Fork me on GitHub 2 | 3 | -------------------------------------------------------------------------------- /docs/_includes/social-follow.html: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /docs/_includes/social-link.html: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /docs/_layouts/base.html: -------------------------------------------------------------------------------- 1 | {% include head.html %} 2 | 3 |
4 | 5 | {% include header.html %} 6 | 7 |
8 |
9 |

{{ page.title }}

10 |

{{ site.discription }}

11 | {% include adpacks.html %} 12 |
13 |
14 | 15 |
16 | 17 | 18 |
19 | 20 | {{ content }} 21 | 22 |
23 |
24 | 25 | {% include footer.html %} 26 | 27 |
28 | 29 | -------------------------------------------------------------------------------- /docs/_layouts/home.html: -------------------------------------------------------------------------------- 1 | {% include head.html %} 2 | 3 |
4 | {% include header.html %} 5 | 6 | 7 | {{ content }} 8 | 9 | {% include footer.html %} 10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /docs/assets/ico/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blivesta/rippler/2a7483085531aab67f3e6bf1a722ff07921a659c/docs/assets/ico/favicon.ico -------------------------------------------------------------------------------- /docs/assets/ico/touch-icon-144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blivesta/rippler/2a7483085531aab67f3e6bf1a722ff07921a659c/docs/assets/ico/touch-icon-144.png -------------------------------------------------------------------------------- /docs/assets/images/sample.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blivesta/rippler/2a7483085531aab67f3e6bf1a722ff07921a659c/docs/assets/images/sample.gif -------------------------------------------------------------------------------- /docs/assets/images/tokyo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blivesta/rippler/2a7483085531aab67f3e6bf1a722ff07921a659c/docs/assets/images/tokyo.jpg -------------------------------------------------------------------------------- /docs/assets/less/component/syntax.less: -------------------------------------------------------------------------------- 1 | .highlight { 2 | padding: 9px 14px; 3 | margin-bottom: 14px; 4 | background-color: #f7f7f9; 5 | border: 1px solid #e1e1e8; 6 | border-radius: 4px; 7 | } 8 | .highlight pre { 9 | padding: 0; 10 | margin-top: 0; 11 | margin-bottom: 0; 12 | white-space: nowrap; 13 | background-color: transparent; 14 | border: 0; 15 | } 16 | .highlight pre code { 17 | font-size: inherit; 18 | color: #333; /* Effectively the base text color */ 19 | } 20 | .highlight pre .lineno { 21 | display: inline-block; 22 | width: 22px; 23 | padding-right: 5px; 24 | margin-right: 10px; 25 | color: #bebec5; 26 | text-align: right; 27 | } 28 | 29 | /* .highlight { background: #ffffff; } */ 30 | .highlight .c { color: #999988; font-style: italic } /* Comment */ 31 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ 32 | .highlight .k { font-weight: bold } /* Keyword */ 33 | .highlight .o { font-weight: bold } /* Operator */ 34 | .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ 35 | .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ 36 | .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ 37 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ 38 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ 39 | .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ 40 | .highlight .ge { font-style: italic } /* Generic.Emph */ 41 | .highlight .gr { color: #aa0000 } /* Generic.Error */ 42 | .highlight .gh { color: #999999 } /* Generic.Heading */ 43 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ 44 | .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ 45 | .highlight .go { color: #888888 } /* Generic.Output */ 46 | .highlight .gp { color: #555555 } /* Generic.Prompt */ 47 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 48 | .highlight .gu { color: #aaaaaa } /* Generic.Subheading */ 49 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */ 50 | .highlight .kc { font-weight: bold } /* Keyword.Constant */ 51 | .highlight .kd { font-weight: bold } /* Keyword.Declaration */ 52 | .highlight .kp { font-weight: bold } /* Keyword.Pseudo */ 53 | .highlight .kr { font-weight: bold } /* Keyword.Reserved */ 54 | .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ 55 | .highlight .m { color: #009999 } /* Literal.Number */ 56 | .highlight .s { color: #d14 } /* Literal.String */ 57 | .highlight .na { color: #008080 } /* Name.Attribute */ 58 | .highlight .nb { color: #0086B3 } /* Name.Builtin */ 59 | .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ 60 | .highlight .no { color: #008080 } /* Name.Constant */ 61 | .highlight .ni { color: #800080 } /* Name.Entity */ 62 | .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ 63 | .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ 64 | .highlight .nn { color: #555555 } /* Name.Namespace */ 65 | .highlight .nt { color: #000080 } /* Name.Tag */ 66 | .highlight .nv { color: #008080 } /* Name.Variable */ 67 | .highlight .ow { font-weight: bold } /* Operator.Word */ 68 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */ 69 | .highlight .mf { color: #009999 } /* Literal.Number.Float */ 70 | .highlight .mh { color: #009999 } /* Literal.Number.Hex */ 71 | .highlight .mi { color: #009999 } /* Literal.Number.Integer */ 72 | .highlight .mo { color: #009999 } /* Literal.Number.Oct */ 73 | .highlight .sb { color: #d14 } /* Literal.String.Backtick */ 74 | .highlight .sc { color: #d14 } /* Literal.String.Char */ 75 | .highlight .sd { color: #d14 } /* Literal.String.Doc */ 76 | .highlight .s2 { color: #d14 } /* Literal.String.Double */ 77 | .highlight .se { color: #d14 } /* Literal.String.Escape */ 78 | .highlight .sh { color: #d14 } /* Literal.String.Heredoc */ 79 | .highlight .si { color: #d14 } /* Literal.String.Interpol */ 80 | .highlight .sx { color: #d14 } /* Literal.String.Other */ 81 | .highlight .sr { color: #009926 } /* Literal.String.Regex */ 82 | .highlight .s1 { color: #d14 } /* Literal.String.Single */ 83 | .highlight .ss { color: #990073 } /* Literal.String.Symbol */ 84 | .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ 85 | .highlight .vc { color: #008080 } /* Name.Variable.Class */ 86 | .highlight .vg { color: #008080 } /* Name.Variable.Global */ 87 | .highlight .vi { color: #008080 } /* Name.Variable.Instance */ 88 | .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ -------------------------------------------------------------------------------- /docs/assets/less/docs.less: -------------------------------------------------------------------------------- 1 | // cooker 2 | @import "../../vendor/cooker/less/variables.less"; 3 | @import "../../vendor/cooker/less/mixins.less"; 4 | 5 | @import "variables.less"; 6 | 7 | // ==================== 8 | @import "component/syntax.less"; 9 | @import "layout/base.less"; 10 | @import "layout/home.less"; -------------------------------------------------------------------------------- /docs/assets/less/layout/base.less: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | min-height:100%; 4 | height:100%; 5 | background:@site-bg-color; 6 | font-family: 'Open Sans', sans-serif; 7 | } 8 | 9 | hr { 10 | border-color:#ddd; 11 | } 12 | 13 | .container { 14 | max-width:768px; 15 | } 16 | 17 | h1, 18 | h2, 19 | h3, 20 | h4 { 21 | font-weight:300; 22 | } 23 | 24 | .label-class{ 25 | font-family: Menlo, Monaco, Consolas, "Courier New", monospace; 26 | background-color: @site-main-color-lighter; 27 | color:@site-main-color; 28 | padding:5px 10px; 29 | display: inline-block; 30 | font-weight: 100; 31 | margin-bottom: 5px; 32 | border-radius: 2px; 33 | } 34 | 35 | .icon-blivesta{ 36 | width:16px; 37 | height:16px; 38 | display:inline-block; 39 | background-color: #fff; 40 | background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%09%3Cpath%20d%3D%22M8.773%2C0L4.781%2C3.991l3.993%2C3.991l-4.01%2C4.009L8.773%2C16H16V0H8.773z%20M12.398%2C13.703l-2.017-2.016l2.017-2.016l2.016%2C2.016%0A%09L12.398%2C13.703z%20M12.398%2C6.259l-2.017-2.016l2.017-2.016l2.016%2C2.016L12.398%2C6.259z%22/%3E%0A%3C/svg%3E"); 41 | background-size: 16px; 42 | &.icon-sm { 43 | width:12px; 44 | height:12px; 45 | background-size: 12px; 46 | } 47 | &.icon-lg { 48 | width:24px; 49 | height:24px; 50 | background-size: 12px; 51 | } 52 | &.icon-circle{ 53 | border-radius: 50%; 54 | } 55 | } 56 | 57 | 58 | //=========================================== 59 | // cooker bug override 60 | //=========================================== 61 | .dropdown-toggle:hover{ 62 | cursor:pointer; 63 | } 64 | .button-border, 65 | .button-border-primary, 66 | .button-border-info{ 67 | background-color: transparent; 68 | } 69 | .button { 70 | font-weight:400; 71 | padding:20px; 72 | } 73 | 74 | // social 75 | //=========================================== 76 | .site-social{ 77 | padding-top: 10px; 78 | margin-bottom: 10px; 79 | li { 80 | overflow:hidden; 81 | height:20px; 82 | } 83 | .btn-gh { 84 | width:95px; 85 | } 86 | .btn-tw { 87 | width:99px; 88 | } 89 | .btn-gg{ 90 | width:73px; 91 | } 92 | .btn-fb{ 93 | width:115px; 94 | iframe { 95 | overflow:hidden; 96 | } 97 | } 98 | } 99 | 100 | // site-header 101 | //=========================================== 102 | .site-header { 103 | margin-bottom: 0; 104 | .navbar-nav > li > a, 105 | .site-header-brand { 106 | &:hover { 107 | opacity:.6; 108 | } 109 | } 110 | } 111 | .navbar-header { 112 | float: left; 113 | } 114 | .navbar-right { 115 | float: right !important; 116 | } 117 | 118 | // site-masthead 119 | //=========================================== 120 | .site-masthead { 121 | position:relative; 122 | padding:15px; 123 | padding-top: 20px; 124 | background-color: @site-main-color-dark; 125 | // background-image: linear-gradient( 126 | // 45deg, 127 | // @site-main-color-dark 0%, 128 | // @site-main-color-light 100% 129 | // ); 130 | color:#fff; 131 | text-shadow: 0 1px 0 rgba(0, 0, 0, .1); 132 | background: 133 | -webkit-linear-gradient(45deg, hsla(145, 33%, 47%, 1) 0%, hsla(145, 33%, 47%, 0) 70%), 134 | -webkit-linear-gradient(315deg, hsla(235, 54%, 43%, 1) 10%, hsla(235, 54%, 43%, 0) 80%), 135 | -webkit-linear-gradient(225deg, hsla(304, 30%, 49%, 1) 10%, hsla(304, 30%, 49%, 0) 80%), 136 | -webkit-linear-gradient(135deg, hsla(128, 56%, 45%, 1) 100%, hsla(128, 56%, 45%, 0) 70%); 137 | background: 138 | linear-gradient(45deg, hsla(145, 33%, 47%, 1) 0%, hsla(145, 33%, 47%, 0) 70%), 139 | linear-gradient(135deg, hsla(235, 54%, 43%, 1) 10%, hsla(235, 54%, 43%, 0) 80%), 140 | linear-gradient(225deg, hsla(304, 30%, 49%, 1) 10%, hsla(304, 30%, 49%, 0) 80%), 141 | linear-gradient(315deg, hsla(128, 56%, 45%, 1) 100%, hsla(128, 56%, 45%, 0) 70%); 142 | 143 | h1{ 144 | font-weight:800; 145 | margin-bottom:5px; 146 | opacity:.95; 147 | letter-spacing: -.05em; 148 | } 149 | .lead{ 150 | opacity: .7; 151 | } 152 | p { 153 | margin:0 auto 20px; 154 | font-weight:100; 155 | } 156 | a { 157 | color:#fff; 158 | } 159 | } 160 | 161 | // site-body 162 | //=========================================== 163 | .site-body{ 164 | padding-bottom:30px; 165 | line-height: 1.6; 166 | } 167 | 168 | // site-example-links 169 | //=========================================== 170 | .site-example-links { 171 | .button { 172 | display:block; 173 | margin-bottom:10px; 174 | } 175 | } 176 | 177 | // site-adpacks 178 | //=========================================== 179 | .site-adpacks { 180 | left: 10px; 181 | bottom: 10px; 182 | background: #fff; 183 | background: rgba(255,255,255,0.2); 184 | border-radius: 4px; 185 | padding: 15px; 186 | z-index: 99; 187 | max-width: 340px; 188 | text-align: left!important; 189 | .clearfix; 190 | font-size:12px; 191 | margin:0; 192 | margin-bottom:30px; 193 | } 194 | .site-home .site-adpacks { 195 | @media (min-width: 480px) { 196 | margin:60px auto 0 auto; 197 | } 198 | } 199 | .adpacks-wrap { 200 | .adpacks-img { 201 | float:left; 202 | width:145px; 203 | img { 204 | margin-right:15px; 205 | } 206 | } 207 | } 208 | .adpacks-poweredby{ 209 | margin-top:10px; 210 | display:block; 211 | } 212 | 213 | 214 | // section 215 | //=========================================== 216 | .site-section{ 217 | padding:40px 0; 218 | padding-bottom: 60px; 219 | border-bottom: @border-base; 220 | &:last-child{ 221 | border-bottom: none; 222 | } 223 | } 224 | 225 | .site-section-title{ 226 | margin-bottom: 20px; 227 | } 228 | 229 | .site-section-item { 230 | padding-bottom: 40px; 231 | &:last-child { 232 | padding-bottom: 0; 233 | } 234 | } 235 | 236 | .site-section-sub-title { 237 | margin-top: 0px; 238 | margin-bottom: 20px; 239 | } 240 | 241 | .site-icon-mark{ 242 | text-align: center; 243 | margin-top: 30px; 244 | margin-bottom: 30px; 245 | color:@site-main-color-lighter; 246 | .oi{ 247 | font-size: 54px; 248 | } 249 | } 250 | 251 | .site-section-body{ 252 | .site-example-nav{ 253 | font-size: 20px; 254 | line-height: 2.2; 255 | text-align: center; 256 | a{ 257 | white-space :nowrap; 258 | } 259 | } 260 | .lead{ 261 | margin-top: 30px !important; 262 | &:first-child{ 263 | margin-top: 0px; 264 | } 265 | } 266 | h2{ 267 | margin-top: 30px; 268 | margin-bottom: 30px; 269 | } 270 | .highlight{ 271 | margin-bottom: 60px; 272 | &:last-child{ 273 | margin-bottom: 0; 274 | } 275 | } 276 | } 277 | 278 | 279 | 280 | // site-footer 281 | //=========================================== 282 | .site-footer { 283 | padding-top:40px; 284 | padding-bottom:40px; 285 | border-top:1px solid #fff; 286 | background-color: #ddd; 287 | color:#777; 288 | hr { 289 | border-color:#ccc; 290 | } 291 | } 292 | 293 | //=========================================== 294 | .row{ 295 | margin:0; 296 | } 297 | .row.padding .col{ 298 | padding:20px; 299 | padding-bottom:0px; 300 | .highlight { 301 | margin-top:15px; 302 | margin-bottom: 0; 303 | } 304 | } 305 | 306 | //=========================================== 307 | .example-elm { 308 | min-width:280px; 309 | width:300px; 310 | min-height:280px; 311 | height:300px; 312 | background-color:@site-main-color; 313 | display: block; 314 | margin-left: auto; 315 | margin-right: auto; 316 | } 317 | .example-elm-circle { 318 | background-color:@site-main-color-lighter; 319 | } 320 | 321 | 322 | // 480px min 323 | //=========================================== 324 | @media (min-width: 480px) { 325 | 326 | .site-masthead{ } 327 | .site-example-links { 328 | .button { 329 | display:inline-block; 330 | margin-bottom:0px; 331 | } 332 | } 333 | } 334 | 335 | // 768px min 336 | //=========================================== 337 | @media (min-width: 768px) { 338 | .button { 339 | padding:10px 24px; 340 | } 341 | .container { 342 | width:auto; 343 | } 344 | } 345 | 346 | 347 | 348 | 349 | -------------------------------------------------------------------------------- /docs/assets/less/layout/home.less: -------------------------------------------------------------------------------- 1 | .site-home{ 2 | .site-masthead, 3 | .site-body p, 4 | .site-body h2, 5 | .site-body h3, 6 | .site-body h4, 7 | .site-footer, 8 | .list-inline { 9 | text-align:center; 10 | } 11 | .site-masthead { 12 | h1 { 13 | font-size:50px; 14 | } 15 | } 16 | .site-ads {} 17 | .site-body{ 18 | padding-top:30px; 19 | .site-ads { 20 | .site-ads-inner {} 21 | } 22 | } 23 | .site-section-body{ 24 | .site-example-nav{ 25 | font-size: 20px; 26 | line-height: 2.2; 27 | text-align: center; 28 | margin-top:20px; 29 | } 30 | // .site-example-nav, 31 | // .highlight { 32 | // .center-block; 33 | // max-width: 600px; 34 | // } 35 | .site-example-nav, 36 | .highlight { 37 | .center-block; 38 | margin-top: 40px; 39 | margin-bottom: 40px; 40 | } 41 | } 42 | .page-different-animation { 43 | .label-class { 44 | margin-bottom: 10px; 45 | } 46 | } 47 | // min-width: 480px 48 | //=========================================== 49 | @media (min-width: 480px) { 50 | .site-masthead { 51 | padding-top:70px; 52 | padding-bottom:70px; 53 | h1 { 54 | font-size:60px; 55 | } 56 | } 57 | } 58 | 59 | // min-width: 768px 60 | //=========================================== 61 | @media (min-width: 768px) { 62 | .site-masthead { 63 | padding-top:80px; 64 | padding-bottom:80px; 65 | h1 { 66 | font-size:70px; 67 | } 68 | } 69 | } 70 | // 71 | 72 | } 73 | 74 | -------------------------------------------------------------------------------- /docs/assets/less/variables.less: -------------------------------------------------------------------------------- 1 | @site-main-color: #556b7f; 2 | @site-main-color-light: #85a1bb; 3 | @site-main-color-lighter: #cbd5df; 4 | @site-main-color-dark: #242d35; 5 | @site-bg-color: #eee; 6 | 7 | @primary-color: @site-main-color; 8 | @secondary-color: #c85179; 9 | 10 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Effect that spreads like a wave in touch or click. 4 | class: 5 | base_url: "./" 6 | --- 7 |
8 |
9 |

{{ site.title }}

10 |

{{ page.title }}

11 |

Download on GitHub

12 | {% include social-link.html %} 13 |

Currently v{{ site.current_version }} ･ Author :  14 |   15 | blivesta 16 |
17 | Licensed under the MIT.

18 | {% include adpacks.html %} 19 |
20 |
21 | 22 |
23 |
24 |
25 |

Examples
Click Or Touch

26 |

27 | 28 |
29 |

You can also use the buttons on the bootstrap.

30 | 56 | 57 | 71 | 72 | {% highlight html %} 73 | rippler-inverse 74 | 75 | rippler-inverse 76 | rippler-default 77 | rippler-inverse 78 | rippler-default 79 | {% endhighlight %} 80 |
81 | 82 | 83 |
84 |

Link buttons with state colors

85 | 105 | 106 | 120 | {% highlight html %} 121 | ... 122 | ... 123 | ... 124 | ... 125 | ... 126 | {% endhighlight %} 127 |
128 | 129 |
130 |
131 | 132 |
133 |

Square Image

134 | 135 | 136 | 137 | {% highlight html %} 138 | 139 | 140 | 141 | {% endhighlight %} 142 |
143 | 144 |
145 |

Circle image

146 | 147 | 148 | 149 | {% highlight html %} 150 | 151 | 152 | 153 | {% endhighlight %} 154 |
155 | 156 |
157 |
158 | 159 | 160 |
161 |
162 | 163 |
164 |

Circle

165 |
166 |
167 | {% highlight html %} 168 |
169 | {% endhighlight %} 170 |
171 | 172 |
173 |

Square

174 |
175 | {% highlight html %} 176 |
177 | {% endhighlight %} 178 |
179 | 180 |
181 |
182 | 183 |
184 | 185 |
186 |

Browser support

187 |

188 |

Requires a browser that CSS3 is supported.

189 |
190 |
    191 |
  • IE10+
    • 192 |
  • Safari
    • 193 |
  • Chrome
    • 194 |
  • Firefox
    • 195 |
  • Opera
    • 196 |
197 |
198 |
199 | 200 |
201 |

Installation

202 |

203 |

204 |
205 |

Download on GitHub

206 | 207 | {% include example-setup.html %} 208 |
209 |
210 | 211 |
212 |
213 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rippler", 3 | "author": "blivesta", 4 | "version": "0.1.1", 5 | "url": "http://blivesta.github.io/rippler/", 6 | "author_url": "http://blivesta.com/", 7 | "licenses": "MIT", 8 | "source": "./src", 9 | "docs": "./docs", 10 | "dist": "./dist", 11 | "public": "./_gh_pages", 12 | "assets": "./docs/assets", 13 | "repository": { 14 | "user": "blivesta", 15 | "type": "git" 16 | }, 17 | "dependencies": {}, 18 | "devDependencies": { 19 | "grunt": "~0.4.4", 20 | "grunt-html-validation": "~0.1.13", 21 | "grunt-contrib-csslint": "~0.2.0", 22 | "grunt-contrib-cssmin": "~0.9.0", 23 | "grunt-csscomb": "~2.0.1", 24 | "grunt-autoprefixer": "~0.7.2", 25 | "grunt-contrib-less": "~0.11.0", 26 | "grunt-banner": "~0.2.0", 27 | "grunt-contrib-jshint": "~0.10.0", 28 | "grunt-contrib-uglify": "~0.4.0", 29 | "grunt-contrib-copy": "~0.5.0", 30 | "grunt-contrib-clean": "~0.5.0", 31 | "grunt-contrib-connect": "~0.7.1", 32 | "grunt-contrib-watch": "~0.6.1", 33 | "load-grunt-tasks": "~0.4.0", 34 | "time-grunt": "~0.3.1", 35 | "grunt-jekyll": "~0.4.1", 36 | "grunt-build-control": "~0.1.3", 37 | "grunt-notify": "~0.2.13", 38 | "grunt-bower-install": "~0.7.0", 39 | "grunt-bower-task": "~0.3.4" 40 | }, 41 | "engines": { 42 | "node": ">=0.10.1" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/js/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "asi" : true, 3 | "boss" : true, 4 | "browser" : true, 5 | "debug" : true, 6 | "devel" : true, 7 | "eqeqeq" : false, 8 | "eqnull" : true, 9 | "expr" : true, 10 | "laxbreak" : true, 11 | "unused" : true, 12 | "validthis": true 13 | } 14 | -------------------------------------------------------------------------------- /src/js/rippler.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | "use strict"; 3 | var namespace = 'rippler'; 4 | var methods = { 5 | init: function(options){ 6 | options = $.extend({ 7 | effectClass : 'rippler-effect' 8 | ,effectSize : 0 // Default size (width & height) 9 | ,addElement : 'div' // e.g. 'svg' (feature) 10 | ,duration : 600 11 | }, options); 12 | return this.each(function(){ 13 | var _this = this; 14 | var $this = $(this); 15 | var data = $this.data(namespace); 16 | 17 | if (!data) { 18 | options = $.extend({}, options); 19 | 20 | $this.data(namespace, { 21 | options: options 22 | }); 23 | 24 | if (typeof document.ontouchstart != "undefined") { 25 | $this.on("touchstart."+ namespace, function(event) { 26 | var $self = $(this); 27 | methods.elementAdd.call(_this, $self, event); 28 | }); 29 | $this.on("touchend." + namespace, function(event) { 30 | var $self = $(this); 31 | methods.effect.call(_this, $self, event); 32 | }); 33 | }else{ 34 | $this.on("mousedown."+ namespace, function(event) { 35 | var $self = $(this); 36 | methods.elementAdd.call(_this, $self, event); 37 | }); 38 | $this.on("mouseup."+ namespace, function(event) { 39 | var $self = $(this); 40 | methods.effect.call(_this, $self, event); 41 | }); 42 | 43 | } 44 | 45 | } 46 | }); // end each 47 | }, 48 | 49 | template: function(options){ 50 | var $this = $(this); 51 | options = $this.data(namespace).options; 52 | var element; 53 | var svgElementClass = 'rippler-svg'; 54 | var divElementClass = 'rippler-div'; 55 | 56 | var circle = ''; 57 | var svgElement = ''+circle+''; 58 | 59 | var divElement = '
'; 60 | 61 | if (options.addElement === 'svg'){ 62 | element = svgElement; 63 | } else { 64 | element = divElement; 65 | } 66 | return element; 67 | }, 68 | 69 | elementAdd: function($self, event, options){ 70 | var _this = this; 71 | var $this = $(this); 72 | options = $this.data(namespace).options; 73 | $self.append(methods.template.call(_this)); 74 | var $effect = $self.find('.' + options.effectClass); 75 | var selfOffset = $self.offset(); 76 | var eventX = methods.targetX.call(_this,event); 77 | var eventY = methods.targetY.call(_this,event); 78 | 79 | $effect.css({ 80 | 'width':options.effectSize 81 | ,'height':options.effectSize 82 | ,'left': ( eventX - selfOffset.left ) - ( options.effectSize / 2 ) 83 | ,'top': ( eventY - selfOffset.top ) - ( options.effectSize / 2 ) 84 | }); 85 | return _this; 86 | }, 87 | 88 | effect : function($self, event, options){ 89 | var _this = this; 90 | var $this = $(this); 91 | options = $this.data(namespace).options; 92 | var $effect = $('.' + options.effectClass); 93 | var selfOffset = $self.offset(); 94 | var thisW = $this.outerWidth(); 95 | var thisH = $this.outerHeight(); 96 | var effectMaxWidth = methods.diagonal(thisW, thisH) * 2; 97 | var eventX = methods.targetX.call(_this,event); 98 | var eventY = methods.targetY.call(_this,event); 99 | 100 | $effect.css({ 101 | 'width':effectMaxWidth 102 | ,'height':effectMaxWidth 103 | ,'left': ( eventX - selfOffset.left ) - ( effectMaxWidth / 2 ) 104 | ,'top': ( eventY - selfOffset.top ) - ( effectMaxWidth / 2 ) 105 | ,'transition':'all '+ ( options.duration / 1000 ) +'s ease-out' 106 | }); 107 | return methods.elementRemove.call(_this); 108 | }, 109 | 110 | elementRemove: function(options){ 111 | var _this = this; 112 | var $this = $(this); 113 | options = $this.data(namespace).options; 114 | var $effect = $('.' + options.effectClass); 115 | setTimeout(function(){ 116 | $effect.css({ 117 | 'opacity': 0 118 | ,'transition':'all '+ ( options.duration / 1000 ) +'s ease-out' 119 | }); 120 | setTimeout(function(){ 121 | $effect.remove(); 122 | }, options.duration * 1.5); 123 | }, options.duration); 124 | return _this; 125 | }, 126 | 127 | targetX: function(event){ 128 | var e = event.originalEvent; 129 | var eventX; 130 | if (typeof document.ontouchstart != "undefined") { 131 | eventX = e.changedTouches[0].pageX; 132 | }else{ 133 | eventX = e.pageX; 134 | } 135 | return eventX; 136 | }, 137 | 138 | targetY: function(event){ 139 | var e = event.originalEvent; 140 | var eventY; 141 | if (typeof document.ontouchstart != "undefined") { 142 | eventY = e.changedTouches[0].pageY; 143 | }else{ 144 | eventY = e.pageY; 145 | } 146 | return eventY; 147 | }, 148 | 149 | diagonal: function(x, y){ 150 | if (x > 0 && y > 0) return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); 151 | else return false; 152 | }, 153 | 154 | destroy: function(){ 155 | return this.each(function(){ 156 | var $this = $(this); 157 | $(window).unbind('.'+namespace); 158 | $this.removeData(namespace); 159 | }); 160 | } 161 | 162 | }; 163 | 164 | $.fn.rippler = function(method){ 165 | if ( methods[method] ) { 166 | return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); 167 | } else if ( typeof method === 'object' || ! method ) { 168 | return methods.init.apply( this, arguments ); 169 | } else { 170 | $.error( 'Method ' + method + ' does not exist on jQuery.'+namespace); 171 | } 172 | }; 173 | 174 | })(jQuery); -------------------------------------------------------------------------------- /src/less/.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "always-semicolon": true, 3 | "block-indent": 2, 4 | "colon-space": [0, 1], 5 | "color-case": "lower", 6 | "color-shorthand": true, 7 | "combinator-space": true, 8 | "element-case": "lower", 9 | "eof-newline": true, 10 | "leading-zero": false, 11 | "remove-empty-rulesets": true, 12 | "rule-indent": 2, 13 | "stick-brace": " ", 14 | "strip-spaces": true, 15 | "unitless-zero": true, 16 | "vendor-prefix-align": true, 17 | "sort-order": [ 18 | [ 19 | "position", 20 | "top", 21 | "right", 22 | "bottom", 23 | "left", 24 | "z-index", 25 | "display", 26 | "float", 27 | "width", 28 | "min-width", 29 | "max-width", 30 | "height", 31 | "min-height", 32 | "max-height", 33 | "-webkit-box-sizing", 34 | "-moz-box-sizing", 35 | "box-sizing", 36 | "-webkit-appearance", 37 | "padding", 38 | "padding-top", 39 | "padding-right", 40 | "padding-bottom", 41 | "padding-left", 42 | "margin", 43 | "margin-top", 44 | "margin-right", 45 | "margin-bottom", 46 | "margin-left", 47 | "overflow", 48 | "overflow-x", 49 | "overflow-y", 50 | "-webkit-overflow-scrolling", 51 | "-ms-overflow-x", 52 | "-ms-overflow-y", 53 | "-ms-overflow-style", 54 | "clip", 55 | "clear", 56 | "font", 57 | "font-family", 58 | "font-size", 59 | "font-style", 60 | "font-weight", 61 | "font-variant", 62 | "font-size-adjust", 63 | "font-stretch", 64 | "font-effect", 65 | "font-emphasize", 66 | "font-emphasize-position", 67 | "font-emphasize-style", 68 | "font-smooth", 69 | "-webkit-hyphens", 70 | "-moz-hyphens", 71 | "hyphens", 72 | "line-height", 73 | "color", 74 | "text-align", 75 | "-webkit-text-align-last", 76 | "-moz-text-align-last", 77 | "-ms-text-align-last", 78 | "text-align-last", 79 | "text-emphasis", 80 | "text-emphasis-color", 81 | "text-emphasis-style", 82 | "text-emphasis-position", 83 | "text-decoration", 84 | "text-indent", 85 | "text-justify", 86 | "text-outline", 87 | "-ms-text-overflow", 88 | "text-overflow", 89 | "text-overflow-ellipsis", 90 | "text-overflow-mode", 91 | "text-shadow", 92 | "text-transform", 93 | "text-wrap", 94 | "-webkit-text-size-adjust", 95 | "-ms-text-size-adjust", 96 | "letter-spacing", 97 | "-ms-word-break", 98 | "word-break", 99 | "word-spacing", 100 | "-ms-word-wrap", 101 | "word-wrap", 102 | "-moz-tab-size", 103 | "-o-tab-size", 104 | "tab-size", 105 | "white-space", 106 | "vertical-align", 107 | "list-style", 108 | "list-style-position", 109 | "list-style-type", 110 | "list-style-image", 111 | "pointer-events", 112 | "cursor", 113 | "visibility", 114 | "zoom", 115 | "flex-direction", 116 | "flex-order", 117 | "flex-pack", 118 | "flex-align", 119 | "table-layout", 120 | "empty-cells", 121 | "caption-side", 122 | "border-spacing", 123 | "border-collapse", 124 | "content", 125 | "quotes", 126 | "counter-reset", 127 | "counter-increment", 128 | "resize", 129 | "-webkit-user-select", 130 | "-moz-user-select", 131 | "-ms-user-select", 132 | "-o-user-select", 133 | "user-select", 134 | "nav-index", 135 | "nav-up", 136 | "nav-right", 137 | "nav-down", 138 | "nav-left", 139 | "background", 140 | "background-color", 141 | "background-image", 142 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", 143 | "filter:progid:DXImageTransform.Microsoft.gradient", 144 | "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", 145 | "filter", 146 | "background-repeat", 147 | "background-attachment", 148 | "background-position", 149 | "background-position-x", 150 | "background-position-y", 151 | "-webkit-background-clip", 152 | "-moz-background-clip", 153 | "background-clip", 154 | "background-origin", 155 | "-webkit-background-size", 156 | "-moz-background-size", 157 | "-o-background-size", 158 | "background-size", 159 | "border", 160 | "border-color", 161 | "border-style", 162 | "border-width", 163 | "border-top", 164 | "border-top-color", 165 | "border-top-style", 166 | "border-top-width", 167 | "border-right", 168 | "border-right-color", 169 | "border-right-style", 170 | "border-right-width", 171 | "border-bottom", 172 | "border-bottom-color", 173 | "border-bottom-style", 174 | "border-bottom-width", 175 | "border-left", 176 | "border-left-color", 177 | "border-left-style", 178 | "border-left-width", 179 | "border-radius", 180 | "border-top-left-radius", 181 | "border-top-right-radius", 182 | "border-bottom-right-radius", 183 | "border-bottom-left-radius", 184 | "-webkit-border-image", 185 | "-moz-border-image", 186 | "-o-border-image", 187 | "border-image", 188 | "-webkit-border-image-source", 189 | "-moz-border-image-source", 190 | "-o-border-image-source", 191 | "border-image-source", 192 | "-webkit-border-image-slice", 193 | "-moz-border-image-slice", 194 | "-o-border-image-slice", 195 | "border-image-slice", 196 | "-webkit-border-image-width", 197 | "-moz-border-image-width", 198 | "-o-border-image-width", 199 | "border-image-width", 200 | "-webkit-border-image-outset", 201 | "-moz-border-image-outset", 202 | "-o-border-image-outset", 203 | "border-image-outset", 204 | "-webkit-border-image-repeat", 205 | "-moz-border-image-repeat", 206 | "-o-border-image-repeat", 207 | "border-image-repeat", 208 | "outline", 209 | "outline-width", 210 | "outline-style", 211 | "outline-color", 212 | "outline-offset", 213 | "-webkit-box-shadow", 214 | "-moz-box-shadow", 215 | "box-shadow", 216 | "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", 217 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", 218 | "opacity", 219 | "-ms-interpolation-mode", 220 | "-webkit-transition", 221 | "-moz-transition", 222 | "-ms-transition", 223 | "-o-transition", 224 | "transition", 225 | "-webkit-transition-delay", 226 | "-moz-transition-delay", 227 | "-ms-transition-delay", 228 | "-o-transition-delay", 229 | "transition-delay", 230 | "-webkit-transition-timing-function", 231 | "-moz-transition-timing-function", 232 | "-ms-transition-timing-function", 233 | "-o-transition-timing-function", 234 | "transition-timing-function", 235 | "-webkit-transition-duration", 236 | "-moz-transition-duration", 237 | "-ms-transition-duration", 238 | "-o-transition-duration", 239 | "transition-duration", 240 | "-webkit-transition-property", 241 | "-moz-transition-property", 242 | "-ms-transition-property", 243 | "-o-transition-property", 244 | "transition-property", 245 | "-webkit-transform", 246 | "-moz-transform", 247 | "-ms-transform", 248 | "-o-transform", 249 | "transform", 250 | "-webkit-transform-origin", 251 | "-moz-transform-origin", 252 | "-ms-transform-origin", 253 | "-o-transform-origin", 254 | "transform-origin", 255 | "-webkit-animation", 256 | "-moz-animation", 257 | "-ms-animation", 258 | "-o-animation", 259 | "animation", 260 | "-webkit-animation-name", 261 | "-moz-animation-name", 262 | "-ms-animation-name", 263 | "-o-animation-name", 264 | "animation-name", 265 | "-webkit-animation-duration", 266 | "-moz-animation-duration", 267 | "-ms-animation-duration", 268 | "-o-animation-duration", 269 | "animation-duration", 270 | "-webkit-animation-play-state", 271 | "-moz-animation-play-state", 272 | "-ms-animation-play-state", 273 | "-o-animation-play-state", 274 | "animation-play-state", 275 | "-webkit-animation-timing-function", 276 | "-moz-animation-timing-function", 277 | "-ms-animation-timing-function", 278 | "-o-animation-timing-function", 279 | "animation-timing-function", 280 | "-webkit-animation-delay", 281 | "-moz-animation-delay", 282 | "-ms-animation-delay", 283 | "-o-animation-delay", 284 | "animation-delay", 285 | "-webkit-animation-iteration-count", 286 | "-moz-animation-iteration-count", 287 | "-ms-animation-iteration-count", 288 | "-o-animation-iteration-count", 289 | "animation-iteration-count", 290 | "-webkit-animation-direction", 291 | "-moz-animation-direction", 292 | "-ms-animation-direction", 293 | "-o-animation-direction", 294 | "animation-direction" 295 | ] 296 | ] 297 | } 298 | -------------------------------------------------------------------------------- /src/less/.csslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "adjoining-classes": false, 3 | "box-sizing": false, 4 | "box-model": false, 5 | "compatible-vendor-prefixes": false, 6 | "floats": false, 7 | "font-sizes": false, 8 | "gradients": false, 9 | "important": false, 10 | "known-properties": false, 11 | "outline-none": false, 12 | "qualified-headings": false, 13 | "regex-selectors": false, 14 | "shorthand": false, 15 | "text-indent": false, 16 | "unique-headings": false, 17 | "universal-selector": false, 18 | "unqualified-attributes": false 19 | } 20 | -------------------------------------------------------------------------------- /src/less/core.less: -------------------------------------------------------------------------------- 1 | .rippler { 2 | position:relative; 3 | overflow:hidden; 4 | user-select:none; 5 | cursor: pointer; 6 | &:focus, 7 | &:active { 8 | outline:none; 9 | } 10 | &::-moz-focus-inner{ 11 | border: 0; 12 | } 13 | } 14 | 15 | // button 16 | .rippler-button { 17 | display: inline-block; 18 | } 19 | 20 | // image 21 | .rippler-img { 22 | display:block; 23 | } 24 | 25 | .rippler-circle-mask { 26 | border-radius:50%; 27 | -webkit-mask: url(../svg/circle.svg) no-repeat; 28 | -webkit-mask-size:100%; 29 | } 30 | 31 | .rippler-effect { 32 | position:absolute; 33 | opacity:.2; 34 | } 35 | 36 | // 37 | // if addElement = 'svg' 38 | .rippler-svg { 39 | .rippler-default & { fill:#fff; } 40 | .rippler-inverse & { fill:#000; } 41 | 42 | // bootstrap state colors 43 | .rippler-bs-default & { fill:#000; } 44 | .rippler-bs-inverse & { fill:#000; } 45 | .rippler-bs-primary & { fill:#428bca; } 46 | .rippler-bs-info & { fill:#5bc0de; } 47 | .rippler-bs-success & { fill:#5cb85c; } 48 | .rippler-bs-warning & { fill:#ed9c28; } 49 | .rippler-bs-danger & { fill:#d2322d; } 50 | } 51 | 52 | // if addElement = 'div' 53 | .rippler-div { 54 | 55 | border-radius: 50%; 56 | 57 | .rippler-default & { background-color:#fff; } 58 | .rippler-inverse & { background-color:#000; } 59 | 60 | // bootstrap state colors 61 | .rippler-bs-default & { background-color:#000; } 62 | .rippler-bs-inverse & { background-color:#000; } 63 | .rippler-bs-primary & { background-color:#428bca; } 64 | .rippler-bs-info & { background-color:#5bc0de; } 65 | .rippler-bs-success & { background-color:#5cb85c; } 66 | .rippler-bs-warning & { background-color:#ed9c28; } 67 | .rippler-bs-danger & { background-color:#d2322d; } 68 | } 69 | -------------------------------------------------------------------------------- /src/less/rippler.less: -------------------------------------------------------------------------------- 1 | @import "core.less"; 2 | -------------------------------------------------------------------------------- /src/svg/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | --------------------------------------------------------------------------------