From 5726f99ce917071cf1be2e6976583f83113e4ec2 Mon Sep 17 00:00:00 2001 From: Jaime Caballero Date: Sat, 6 Jun 2015 18:16:06 +0100 Subject: [PATCH 1/2] Autoprefixer and syntax cleanup --- Gruntfile.js | 11 +- css/sonar.css | 241 +++++++++++++++++------------------- css/sonar.min.css | 3 +- package.json | 5 +- sass/sonar.scss | 120 +++++++++--------- sass/sonar/_animations.scss | 19 +-- 6 files changed, 194 insertions(+), 205 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index bc4b398..e9ba840 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -77,6 +77,14 @@ module.exports = function(grunt) { dest: 'build/index.html' }] } + }, + autoprefixer: { + options: { + browsers: ['last 2 versions', 'Firefox >= 5', 'Opera >= 12', 'Safari >= 4', 'ie 8', 'ie 9'], + }, + dist: { + src: ['css/sonar.css', 'css/sonar.min.css'] + }, } }); @@ -86,8 +94,9 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-gh-pages'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-replace'); + grunt.loadNpmTasks('grunt-autoprefixer'); grunt.registerTask('default', ['watch']); - grunt.registerTask('build', ['sass:dev', 'sass:dist', 'copy', 'replace']); + grunt.registerTask('build', ['sass:dev', 'sass:dist', 'autoprefixer:dist', 'copy', 'replace']); grunt.registerTask('deploy', ['build', 'gh-pages']); }; diff --git a/css/sonar.css b/css/sonar.css index 9d15def..d06a5d2 100644 --- a/css/sonar.css +++ b/css/sonar.css @@ -105,7 +105,7 @@ Copyright (c) 2015 Alejandro U. Alvarez } .sonar::after { z-index: -1; - padding: 0px; + padding: 0; top: 0; left: 0; width: 100%; @@ -114,192 +114,183 @@ Copyright (c) 2015 Alejandro U. Alvarez display: block; position: absolute; -webkit-animation-name: sonar-base; - -moz-animation-name: sonar-base; - -o-animation-name: sonar-base; - animation-name: sonar-base; + -moz-animation-name: sonar-base; + -o-animation-name: sonar-base; + animation-name: sonar-base; -webkit-animation-iteration-count: 1; - -moz-animation-iteration-count: 1; - -o-animation-iteration-count: 1; - animation-iteration-count: 1; + -moz-animation-iteration-count: 1; + -o-animation-iteration-count: 1; + animation-iteration-count: 1; -webkit-animation-duration: 1s; - -moz-animation-duration: 1s; - -o-animation-duration: 1s; - animation-duration: 1s; + -moz-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - -o-box-sizing: content-box; - box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; } -.sonar.sonar-infinite::after { +.sonar.sonar-infinite:after { -webkit-animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - -o-animation-iteration-count: infinite; - animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + -o-animation-iteration-count: infinite; + animation-iteration-count: infinite; } -.sonar.sonar-delay::after { +.sonar.sonar-delay:after { -webkit-animation-delay: 1s; - -moz-animation-delay: 1s; - -o-animation-delay: 1s; - animation-delay: 1s; + -moz-animation-delay: 1s; + -o-animation-delay: 1s; + animation-delay: 1s; } -.sonar.sonar-delay-long::after { +.sonar.sonar-delay-long:after { -webkit-animation-delay: 2s; - -moz-animation-delay: 2s; - -o-animation-delay: 2s; - animation-delay: 2s; + -moz-animation-delay: 2s; + -o-animation-delay: 2s; + animation-delay: 2s; } -.sonar.sonar-delay-longer::after { +.sonar.sonar-delay-longer:after { -webkit-animation-delay: 4s; - -moz-animation-delay: 4s; - -o-animation-delay: 4s; - animation-delay: 4s; + -moz-animation-delay: 4s; + -o-animation-delay: 4s; + animation-delay: 4s; } -.sonar.sonar-delay-short::after { +.sonar.sonar-delay-short:after { -webkit-animation-delay: 0.5s; - -moz-animation-delay: 0.5s; - -o-animation-delay: 0.5s; - animation-delay: 0.5s; + -moz-animation-delay: 0.5s; + -o-animation-delay: 0.5s; + animation-delay: 0.5s; } -.sonar.sonar-delay-shorter::after { +.sonar.sonar-delay-shorter:after { -webkit-animation-delay: 0.25s; - -moz-animation-delay: 0.25s; - -o-animation-delay: 0.25s; - animation-delay: 0.25s; + -moz-animation-delay: 0.25s; + -o-animation-delay: 0.25s; + animation-delay: 0.25s; } -.sonar.sonar-slow::after { +.sonar.sonar-slow:after { -webkit-animation-duration: 2s; - -moz-animation-duration: 2s; - -o-animation-duration: 2s; - animation-duration: 2s; + -moz-animation-duration: 2s; + -o-animation-duration: 2s; + animation-duration: 2s; } -.sonar.sonar-slower::after { +.sonar.sonar-slower:after { -webkit-animation-duration: 4s; - -moz-animation-duration: 4s; - -o-animation-duration: 4s; - animation-duration: 4s; + -moz-animation-duration: 4s; + -o-animation-duration: 4s; + animation-duration: 4s; } -.sonar.sonar-fast::after { +.sonar.sonar-fast:after { -webkit-animation-duration: 0.5s; - -moz-animation-duration: 0.5s; - -o-animation-duration: 0.5s; - animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -o-animation-duration: 0.5s; + animation-duration: 0.5s; } -.sonar.sonar-faster::after { +.sonar.sonar-faster:after { -webkit-animation-duration: 0.25s; - -moz-animation-duration: 0.25s; - -o-animation-duration: 0.25s; - animation-duration: 0.25s; + -moz-animation-duration: 0.25s; + -o-animation-duration: 0.25s; + animation-duration: 0.25s; } -.sonar.sonar-stroke::after { +.sonar.sonar-stroke:after { border-width: 0; border-color: inherit; border-style: solid; - border-radius: inherit; - -webkit-animation-name: sonar-base, sonar-stroke; - -moz-animation-name: sonar-base, sonar-stroke; - -o-animation-name: sonar-base, sonar-stroke; - animation-name: sonar-base, sonar-stroke; -} -.sonar.sonar-stroke.sonar-hover::after { + -webkit-border-radius: inherit; + border-radius: inherit; + -webkit-animation: sonar-base, sonar-stroke; + -moz-animation: sonar-base, sonar-stroke; + -o-animation: sonar-base, sonar-stroke; + animation: sonar-base, sonar-stroke; +} +.sonar.sonar-stroke.sonar-hover:after { -webkit-animation-name: none; - -moz-animation-name: none; - -o-animation-name: none; - animation-name: none; + -moz-animation-name: none; + -o-animation-name: none; + animation-name: none; } -.sonar.sonar-stroke.sonar-hover.sonar-default::after { +.sonar.sonar-stroke.sonar-hover.sonar-default:after { border-color: #555555; } -.sonar.sonar-stroke.sonar-hover.sonar-primary::after { +.sonar.sonar-stroke.sonar-hover.sonar-primary:after { border-color: #337ab7; } -.sonar.sonar-stroke.sonar-hover.sonar-info::after { +.sonar.sonar-stroke.sonar-hover.sonar-info:after { border-color: #5bc0de; } -.sonar.sonar-stroke.sonar-hover.sonar-success::after { +.sonar.sonar-stroke.sonar-hover.sonar-success:after { border-color: #5cb85c; } -.sonar.sonar-stroke.sonar-hover.sonar-warning::after { +.sonar.sonar-stroke.sonar-hover.sonar-warning:after { border-color: #f0ad4e; } -.sonar.sonar-stroke.sonar-hover.sonar-danger::after { +.sonar.sonar-stroke.sonar-hover.sonar-danger:after { border-color: #d9534f; } -.sonar.sonar-stroke.sonar-hover:hover::after { - -webkit-animation-name: sonar-base, sonar-stroke; - -moz-animation-name: sonar-base, sonar-stroke; - -o-animation-name: sonar-base, sonar-stroke; - animation-name: sonar-base, sonar-stroke; +.sonar.sonar-stroke.sonar-hover:hover:after { + -webkit-animation: sonar-base, sonar-stroke; + -moz-animation: sonar-base, sonar-stroke; + -o-animation: sonar-base, sonar-stroke; + animation: sonar-base, sonar-stroke; } -.sonar.sonar-stroke.sonar-click::after { +.sonar.sonar-stroke.sonar-click:after { -webkit-animation-name: none; - -moz-animation-name: none; - -o-animation-name: none; - animation-name: none; + -moz-animation-name: none; + -o-animation-name: none; + animation-name: none; } -.sonar.sonar-stroke.sonar-click:focus::after { - -webkit-animation-name: sonar-base, sonar-stroke; - -moz-animation-name: sonar-base, sonar-stroke; - -o-animation-name: sonar-base, sonar-stroke; - animation-name: sonar-base, sonar-stroke; +.sonar.sonar-stroke.sonar-click:focus:after { + -webkit-animation: sonar-base, sonar-stroke; + -moz-animation: sonar-base, sonar-stroke; + -o-animation: sonar-base, sonar-stroke; + animation: sonar-base, sonar-stroke; } -.sonar.sonar-fill::after { +.sonar.sonar-fill:after { border: none; background: inherit; - border-radius: inherit; - -webkit-animation-name: sonar-base; - -moz-animation-name: sonar-base; - -o-animation-name: sonar-base; - animation-name: sonar-base; -} -.sonar.sonar-fill.sonar-default::after { + -webkit-border-radius: inherit; + border-radius: inherit; + -webkit-animation: sonar-base; + -moz-animation: sonar-base; + -o-animation: sonar-base; + animation: sonar-base; +} +.sonar.sonar-fill.sonar-default:after { background-color: #555555; } -.sonar.sonar-fill.sonar-primary::after { +.sonar.sonar-fill.sonar-primary:after { background-color: #337ab7; } -.sonar.sonar-fill.sonar-info::after { +.sonar.sonar-fill.sonar-info:after { background-color: #5bc0de; } -.sonar.sonar-fill.sonar-success::after { +.sonar.sonar-fill.sonar-success:after { background-color: #5cb85c; } -.sonar.sonar-fill.sonar-warning::after { +.sonar.sonar-fill.sonar-warning:after { background-color: #f0ad4e; } -.sonar.sonar-fill.sonar-danger::after { +.sonar.sonar-fill.sonar-danger:after { background-color: #d9534f; } -.sonar.sonar-fill.sonar-hover::after { +.sonar.sonar-fill.sonar-hover:after { -webkit-animation-name: none; - -moz-animation-name: none; - -o-animation-name: none; - animation-name: none; + -moz-animation-name: none; + -o-animation-name: none; + animation-name: none; } -.sonar.sonar-fill.sonar-hover:hover::after { - -webkit-animation-name: sonar-base; - -moz-animation-name: sonar-base; - -o-animation-name: sonar-base; - animation-name: sonar-base; - -webkit-animation-duration: 0.5s; - -moz-animation-duration: 0.5s; - -o-animation-duration: 0.5s; - animation-duration: 0.5s; +.sonar.sonar-fill.sonar-hover:hover:after { + -webkit-animation: sonar-base 0.5s; + -moz-animation: sonar-base 0.5s; + -o-animation: sonar-base 0.5s; + animation: sonar-base 0.5s; } -.sonar.sonar-fill.sonar-click::after { +.sonar.sonar-fill.sonar-click:after { -webkit-animation-name: none; - -moz-animation-name: none; - -o-animation-name: none; - animation-name: none; + -moz-animation-name: none; + -o-animation-name: none; + animation-name: none; } -.sonar.sonar-fill.sonar-click:focus::after { - -webkit-animation-name: sonar-base; - -moz-animation-name: sonar-base; - -o-animation-name: sonar-base; - animation-name: sonar-base; - -webkit-animation-duration: 0.5s; - -moz-animation-duration: 0.5s; - -o-animation-duration: 0.5s; - animation-duration: 0.5s; +.sonar.sonar-fill.sonar-click:focus:after { + -webkit-animation: sonar-base 0.5s; + -moz-animation: sonar-base 0.5s; + -o-animation: sonar-base 0.5s; + animation: sonar-base 0.5s; } - -/*# sourceMappingURL=sonar.css.map */ diff --git a/css/sonar.min.css b/css/sonar.min.css index 83121e6..1e18560 100644 --- a/css/sonar.min.css +++ b/css/sonar.min.css @@ -6,5 +6,4 @@ Copyright (c) 2015 Alejandro U. Alvarez sonar.css - http://urbanoalvarez.es/sonar.css/ Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Alejandro U. Alvarez -*/@-webkit-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-moz-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-o-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-webkit-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@-moz-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@-o-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}.sonar{position:relative}.sonar::after{z-index:-1;padding:0px;top:0;left:0;width:100%;height:100%;content:'';display:block;position:absolute;-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;-o-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.sonar.sonar-infinite::after{-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite}.sonar.sonar-delay::after{-webkit-animation-delay:1s;-moz-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s}.sonar.sonar-delay-long::after{-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}.sonar.sonar-delay-longer::after{-webkit-animation-delay:4s;-moz-animation-delay:4s;-o-animation-delay:4s;animation-delay:4s}.sonar.sonar-delay-short::after{-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;-o-animation-delay:0.5s;animation-delay:0.5s}.sonar.sonar-delay-shorter::after{-webkit-animation-delay:0.25s;-moz-animation-delay:0.25s;-o-animation-delay:0.25s;animation-delay:0.25s}.sonar.sonar-slow::after{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s}.sonar.sonar-slower::after{-webkit-animation-duration:4s;-moz-animation-duration:4s;-o-animation-duration:4s;animation-duration:4s}.sonar.sonar-fast::after{-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s}.sonar.sonar-faster::after{-webkit-animation-duration:0.25s;-moz-animation-duration:0.25s;-o-animation-duration:0.25s;animation-duration:0.25s}.sonar.sonar-stroke::after{border-width:0;border-color:inherit;border-style:solid;border-radius:inherit;-webkit-animation-name:sonar-base, sonar-stroke;-moz-animation-name:sonar-base, sonar-stroke;-o-animation-name:sonar-base, sonar-stroke;animation-name:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-hover::after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-stroke.sonar-hover.sonar-default::after{border-color:#555}.sonar.sonar-stroke.sonar-hover.sonar-primary::after{border-color:#337ab7}.sonar.sonar-stroke.sonar-hover.sonar-info::after{border-color:#5bc0de}.sonar.sonar-stroke.sonar-hover.sonar-success::after{border-color:#5cb85c}.sonar.sonar-stroke.sonar-hover.sonar-warning::after{border-color:#f0ad4e}.sonar.sonar-stroke.sonar-hover.sonar-danger::after{border-color:#d9534f}.sonar.sonar-stroke.sonar-hover:hover::after{-webkit-animation-name:sonar-base, sonar-stroke;-moz-animation-name:sonar-base, sonar-stroke;-o-animation-name:sonar-base, sonar-stroke;animation-name:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-click::after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-stroke.sonar-click:focus::after{-webkit-animation-name:sonar-base, sonar-stroke;-moz-animation-name:sonar-base, sonar-stroke;-o-animation-name:sonar-base, sonar-stroke;animation-name:sonar-base, sonar-stroke}.sonar.sonar-fill::after{border:none;background:inherit;border-radius:inherit;-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base}.sonar.sonar-fill.sonar-default::after{background-color:#555}.sonar.sonar-fill.sonar-primary::after{background-color:#337ab7}.sonar.sonar-fill.sonar-info::after{background-color:#5bc0de}.sonar.sonar-fill.sonar-success::after{background-color:#5cb85c}.sonar.sonar-fill.sonar-warning::after{background-color:#f0ad4e}.sonar.sonar-fill.sonar-danger::after{background-color:#d9534f}.sonar.sonar-fill.sonar-hover::after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-fill.sonar-hover:hover::after{-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s}.sonar.sonar-fill.sonar-click::after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-fill.sonar-click:focus::after{-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s} -/*# sourceMappingURL=sonar.min.css.map */ +*/@-webkit-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-moz-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-o-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-webkit-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@-moz-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@-o-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}.sonar{position:relative}.sonar::after{z-index:-1;padding:0;top:0;left:0;width:100%;height:100%;content:'';display:block;position:absolute;-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;-o-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.sonar.sonar-infinite:after{-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite}.sonar.sonar-delay:after{-webkit-animation-delay:1s;-moz-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s}.sonar.sonar-delay-long:after{-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}.sonar.sonar-delay-longer:after{-webkit-animation-delay:4s;-moz-animation-delay:4s;-o-animation-delay:4s;animation-delay:4s}.sonar.sonar-delay-short:after{-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;-o-animation-delay:0.5s;animation-delay:0.5s}.sonar.sonar-delay-shorter:after{-webkit-animation-delay:0.25s;-moz-animation-delay:0.25s;-o-animation-delay:0.25s;animation-delay:0.25s}.sonar.sonar-slow:after{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s}.sonar.sonar-slower:after{-webkit-animation-duration:4s;-moz-animation-duration:4s;-o-animation-duration:4s;animation-duration:4s}.sonar.sonar-fast:after{-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s}.sonar.sonar-faster:after{-webkit-animation-duration:0.25s;-moz-animation-duration:0.25s;-o-animation-duration:0.25s;animation-duration:0.25s}.sonar.sonar-stroke:after{border-width:0;border-color:inherit;border-style:solid;-webkit-border-radius:inherit;border-radius:inherit;-webkit-animation:sonar-base, sonar-stroke;-moz-animation:sonar-base, sonar-stroke;-o-animation:sonar-base, sonar-stroke;animation:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-hover:after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-stroke.sonar-hover.sonar-default:after{border-color:#555}.sonar.sonar-stroke.sonar-hover.sonar-primary:after{border-color:#337ab7}.sonar.sonar-stroke.sonar-hover.sonar-info:after{border-color:#5bc0de}.sonar.sonar-stroke.sonar-hover.sonar-success:after{border-color:#5cb85c}.sonar.sonar-stroke.sonar-hover.sonar-warning:after{border-color:#f0ad4e}.sonar.sonar-stroke.sonar-hover.sonar-danger:after{border-color:#d9534f}.sonar.sonar-stroke.sonar-hover:hover:after{-webkit-animation:sonar-base, sonar-stroke;-moz-animation:sonar-base, sonar-stroke;-o-animation:sonar-base, sonar-stroke;animation:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-click:after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-stroke.sonar-click:focus:after{-webkit-animation:sonar-base, sonar-stroke;-moz-animation:sonar-base, sonar-stroke;-o-animation:sonar-base, sonar-stroke;animation:sonar-base, sonar-stroke}.sonar.sonar-fill:after{border:none;background:inherit;-webkit-border-radius:inherit;border-radius:inherit;-webkit-animation:sonar-base;-moz-animation:sonar-base;-o-animation:sonar-base;animation:sonar-base}.sonar.sonar-fill.sonar-default:after{background-color:#555}.sonar.sonar-fill.sonar-primary:after{background-color:#337ab7}.sonar.sonar-fill.sonar-info:after{background-color:#5bc0de}.sonar.sonar-fill.sonar-success:after{background-color:#5cb85c}.sonar.sonar-fill.sonar-warning:after{background-color:#f0ad4e}.sonar.sonar-fill.sonar-danger:after{background-color:#d9534f}.sonar.sonar-fill.sonar-hover:after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-fill.sonar-hover:hover:after{-webkit-animation:sonar-base 0.5s;-moz-animation:sonar-base 0.5s;-o-animation:sonar-base 0.5s;animation:sonar-base 0.5s}.sonar.sonar-fill.sonar-click:after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-fill.sonar-click:focus:after{-webkit-animation:sonar-base 0.5s;-moz-animation:sonar-base 0.5s;-o-animation:sonar-base 0.5s;animation:sonar-base 0.5s} diff --git a/package.json b/package.json index bd18c42..4010f90 100644 --- a/package.json +++ b/package.json @@ -19,13 +19,14 @@ "licenses": "MIT", "homepage": "https://github.com/aurbano/sonar.css", "devDependencies": { - "grunt": "^0.4.5", + "grunt": "~0.4.5", "grunt-cli": "^0.1.13", "grunt-contrib-clean": "^0.6.0", "grunt-contrib-copy": "^0.8.0", "grunt-contrib-sass": "^0.9.2", "grunt-contrib-watch": "^0.6.1", "grunt-gh-pages": "^0.10.0", - "grunt-replace": "^0.9.2" + "grunt-replace": "^0.9.2", + "grunt-autoprefixer": "~3.0.1" } } diff --git a/sass/sonar.scss b/sass/sonar.scss index a464d17..f2594a3 100644 --- a/sass/sonar.scss +++ b/sass/sonar.scss @@ -16,7 +16,7 @@ position: relative; &::after { z-index: -1; - padding: 0px; + padding: 0; top: 0; left: 0; width: 100%; @@ -24,176 +24,178 @@ content: ''; display: block; position: absolute; + // Animate by default - @include animation("sonar-base"); - @include prefixer(animation-iteration-count, $iteration-count-base); - @include prefixer(animation-duration, $duration-base); - @include prefixer(box-sizing, content-box); + animation-name: sonar-base; + animation-iteration-count: $iteration-count-base; + animation-duration: $duration-base; + box-sizing: content-box; } - &.sonar-infinite::after { - @include prefixer(animation-iteration-count, infinite); + &.sonar-infinite { + &:after { + animation-iteration-count: infinite; + } } &.sonar-delay { - &::after { - @include prefixer(animation-delay, $time-base); + &:after { + animation-delay: $time-base; } } &.sonar-delay-long { - &::after { - @include prefixer(animation-delay, $time-slow); + &:after { + animation-delay: $time-slow; } } &.sonar-delay-longer { - &::after { - @include prefixer(animation-delay, $time-slower); + &:after { + animation-delay: $time-slower; } } &.sonar-delay-short { - &::after { - @include prefixer(animation-delay, $time-fast); + &:after { + animation-delay: $time-fast; } } &.sonar-delay-shorter { - &::after { - @include prefixer(animation-delay, $time-faster); + &:after { + animation-delay: $time-faster; } } &.sonar-slow{ - &::after{ - @include prefixer(animation-duration, $time-slow); + &:after{ + animation-duration: $time-slow; } } &.sonar-slower{ - &::after{ - @include prefixer(animation-duration, $time-slower); + &:after{ + animation-duration: $time-slower; } } &.sonar-fast{ - &::after{ - @include prefixer(animation-duration, $time-fast); + &:after{ + animation-duration: $time-fast; } } &.sonar-faster{ - &::after{ - @include prefixer(animation-duration, $time-faster); + &:after{ + animation-duration: $time-faster; } } &.sonar-stroke { - &::after { + &:after { border-width: 0; border-color: inherit; border-style: solid; border-radius: inherit; + // Animate by default - @include animation("sonar-base, sonar-stroke"); + animation: sonar-base, sonar-stroke; } &.sonar-hover { - &::after { - @include prefixer(animation-name, none); + &:after { + animation-name: none; } &.sonar-default { - &::after { + &:after { border-color: $gray; } } &.sonar-primary { - &::after { + &:after { border-color: $brand-primary; } } &.sonar-info { - &::after { + &:after { border-color: $brand-info; } } &.sonar-success { - &::after { + &:after { border-color: $brand-success; } } &.sonar-warning { - &::after { + &:after { border-color: $brand-warning; } } &.sonar-danger { - &::after { + &:after { border-color: $brand-danger; } } &:hover { - &::after { - @include animation("sonar-base, sonar-stroke"); + &:after { + animation: sonar-base, sonar-stroke; } } } &.sonar-click { - &::after { - @include prefixer(animation-name, none); + &:after { + animation-name: none; } &:focus { - &::after { - @include animation("sonar-base, sonar-stroke"); + &:after { + animation: sonar-base, sonar-stroke; } } } } &.sonar-fill { - &::after { + &:after { border: none; background: inherit; border-radius: inherit; - @include animation("sonar-base"); + animation: sonar-base; } &.sonar-default { - &::after { + &:after { background-color: $gray; } } &.sonar-primary { - &::after { + &:after { background-color: $brand-primary; } } &.sonar-info { - &::after { + &:after { background-color: $brand-info; } } &.sonar-success { - &::after { + &:after { background-color: $brand-success; } } &.sonar-warning { - &::after { + &:after { background-color: $brand-warning; } } &.sonar-danger { - &::after { + &:after { background-color: $brand-danger; } } &.sonar-hover { - &::after { - @include prefixer(animation-name, none); + &:after { + animation-name: none; } &:hover { - &::after { - @include animation("sonar-base"); - @include prefixer(animation-duration, $duration-base/2); + &:after { + animation: sonar-base $duration-base/2; } } } &.sonar-click { - &::after { - @include prefixer(animation-name, none); + &:after { + animation-name: none; } &:focus { - &::after { - @include animation("sonar-base"); - @include prefixer(animation-duration, $duration-base/2); + &:after { + animation: sonar-base $duration-base/2; } } } diff --git a/sass/sonar/_animations.scss b/sass/sonar/_animations.scss index 9a8393e..18f6ab2 100644 --- a/sass/sonar/_animations.scss +++ b/sass/sonar/_animations.scss @@ -8,22 +8,9 @@ Copyright (c) 2015 Alejandro U. Alvarez @mixin animation($names){ @include prefixer(animation-name, unquote('#{$names}')); } -@mixin prefixer($property, $value...) { - -webkit-#{$property}: unquote('#{$value}'); - -moz-#{$property}: unquote('#{$value}'); - -o-#{$property}: unquote('#{$value}'); - #{$property}: unquote('#{$value}'); -} - -@mixin keyframe($animation-name) { - @-webkit-keyframes #{$animation-name} { @content; } - @-moz-keyframes #{$animation-name} { @content; } - @-o-keyframes #{$animation-name} { @content; } - @keyframes #{$animation-name} { @content; } -} // Base animation -@include keyframe(sonar-base) { +@keyframes sonar-base { from { padding: 0; opacity: $opacity-start; @@ -36,8 +23,8 @@ Copyright (c) 2015 Alejandro U. Alvarez } } // Only the border -@include keyframe(sonar-stroke) { - from{ +@keyframes sonar-stroke { + from { border-width: $border-start; margin: -$border-start; } From a91fbbdeb29d7fdd99540e4ffa7de383302a6629 Mon Sep 17 00:00:00 2001 From: Jaime Caballero Date: Sat, 6 Jun 2015 18:31:32 +0100 Subject: [PATCH 2/2] Fix extra colons --- css/sonar.css | 58 +++++++++++++++++++++++++++-------------------- css/sonar.min.css | 2 +- sass/sonar.scss | 16 +++++++------ 3 files changed, 43 insertions(+), 33 deletions(-) diff --git a/css/sonar.css b/css/sonar.css index d06a5d2..7eee619 100644 --- a/css/sonar.css +++ b/css/sonar.css @@ -103,7 +103,7 @@ Copyright (c) 2015 Alejandro U. Alvarez .sonar { position: relative; } -.sonar::after { +.sonar:after { z-index: -1; padding: 0; top: 0; @@ -195,10 +195,10 @@ Copyright (c) 2015 Alejandro U. Alvarez border-style: solid; -webkit-border-radius: inherit; border-radius: inherit; - -webkit-animation: sonar-base, sonar-stroke; - -moz-animation: sonar-base, sonar-stroke; - -o-animation: sonar-base, sonar-stroke; - animation: sonar-base, sonar-stroke; + -webkit-animation-name: sonar-base, sonar-stroke; + -moz-animation-name: sonar-base, sonar-stroke; + -o-animation-name: sonar-base, sonar-stroke; + animation-name: sonar-base, sonar-stroke; } .sonar.sonar-stroke.sonar-hover:after { -webkit-animation-name: none; @@ -225,10 +225,10 @@ Copyright (c) 2015 Alejandro U. Alvarez border-color: #d9534f; } .sonar.sonar-stroke.sonar-hover:hover:after { - -webkit-animation: sonar-base, sonar-stroke; - -moz-animation: sonar-base, sonar-stroke; - -o-animation: sonar-base, sonar-stroke; - animation: sonar-base, sonar-stroke; + -webkit-animation-name: sonar-base, sonar-stroke; + -moz-animation-name: sonar-base, sonar-stroke; + -o-animation-name: sonar-base, sonar-stroke; + animation-name: sonar-base, sonar-stroke; } .sonar.sonar-stroke.sonar-click:after { -webkit-animation-name: none; @@ -237,20 +237,20 @@ Copyright (c) 2015 Alejandro U. Alvarez animation-name: none; } .sonar.sonar-stroke.sonar-click:focus:after { - -webkit-animation: sonar-base, sonar-stroke; - -moz-animation: sonar-base, sonar-stroke; - -o-animation: sonar-base, sonar-stroke; - animation: sonar-base, sonar-stroke; + -webkit-animation-name: sonar-base, sonar-stroke; + -moz-animation-name: sonar-base, sonar-stroke; + -o-animation-name: sonar-base, sonar-stroke; + animation-name: sonar-base, sonar-stroke; } .sonar.sonar-fill:after { border: none; background: inherit; -webkit-border-radius: inherit; border-radius: inherit; - -webkit-animation: sonar-base; - -moz-animation: sonar-base; - -o-animation: sonar-base; - animation: sonar-base; + -webkit-animation-name: sonar-base; + -moz-animation-name: sonar-base; + -o-animation-name: sonar-base; + animation-name: sonar-base; } .sonar.sonar-fill.sonar-default:after { background-color: #555555; @@ -277,10 +277,14 @@ Copyright (c) 2015 Alejandro U. Alvarez animation-name: none; } .sonar.sonar-fill.sonar-hover:hover:after { - -webkit-animation: sonar-base 0.5s; - -moz-animation: sonar-base 0.5s; - -o-animation: sonar-base 0.5s; - animation: sonar-base 0.5s; + -webkit-animation-name: sonar-base; + -moz-animation-name: sonar-base; + -o-animation-name: sonar-base; + animation-name: sonar-base; + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -o-animation-duration: 0.5s; + animation-duration: 0.5s; } .sonar.sonar-fill.sonar-click:after { -webkit-animation-name: none; @@ -289,8 +293,12 @@ Copyright (c) 2015 Alejandro U. Alvarez animation-name: none; } .sonar.sonar-fill.sonar-click:focus:after { - -webkit-animation: sonar-base 0.5s; - -moz-animation: sonar-base 0.5s; - -o-animation: sonar-base 0.5s; - animation: sonar-base 0.5s; + -webkit-animation-name: sonar-base; + -moz-animation-name: sonar-base; + -o-animation-name: sonar-base; + animation-name: sonar-base; + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -o-animation-duration: 0.5s; + animation-duration: 0.5s; } diff --git a/css/sonar.min.css b/css/sonar.min.css index 1e18560..a1e1ca2 100644 --- a/css/sonar.min.css +++ b/css/sonar.min.css @@ -6,4 +6,4 @@ Copyright (c) 2015 Alejandro U. Alvarez sonar.css - http://urbanoalvarez.es/sonar.css/ Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Alejandro U. Alvarez -*/@-webkit-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-moz-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-o-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-webkit-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@-moz-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@-o-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}.sonar{position:relative}.sonar::after{z-index:-1;padding:0;top:0;left:0;width:100%;height:100%;content:'';display:block;position:absolute;-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;-o-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.sonar.sonar-infinite:after{-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite}.sonar.sonar-delay:after{-webkit-animation-delay:1s;-moz-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s}.sonar.sonar-delay-long:after{-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}.sonar.sonar-delay-longer:after{-webkit-animation-delay:4s;-moz-animation-delay:4s;-o-animation-delay:4s;animation-delay:4s}.sonar.sonar-delay-short:after{-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;-o-animation-delay:0.5s;animation-delay:0.5s}.sonar.sonar-delay-shorter:after{-webkit-animation-delay:0.25s;-moz-animation-delay:0.25s;-o-animation-delay:0.25s;animation-delay:0.25s}.sonar.sonar-slow:after{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s}.sonar.sonar-slower:after{-webkit-animation-duration:4s;-moz-animation-duration:4s;-o-animation-duration:4s;animation-duration:4s}.sonar.sonar-fast:after{-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s}.sonar.sonar-faster:after{-webkit-animation-duration:0.25s;-moz-animation-duration:0.25s;-o-animation-duration:0.25s;animation-duration:0.25s}.sonar.sonar-stroke:after{border-width:0;border-color:inherit;border-style:solid;-webkit-border-radius:inherit;border-radius:inherit;-webkit-animation:sonar-base, sonar-stroke;-moz-animation:sonar-base, sonar-stroke;-o-animation:sonar-base, sonar-stroke;animation:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-hover:after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-stroke.sonar-hover.sonar-default:after{border-color:#555}.sonar.sonar-stroke.sonar-hover.sonar-primary:after{border-color:#337ab7}.sonar.sonar-stroke.sonar-hover.sonar-info:after{border-color:#5bc0de}.sonar.sonar-stroke.sonar-hover.sonar-success:after{border-color:#5cb85c}.sonar.sonar-stroke.sonar-hover.sonar-warning:after{border-color:#f0ad4e}.sonar.sonar-stroke.sonar-hover.sonar-danger:after{border-color:#d9534f}.sonar.sonar-stroke.sonar-hover:hover:after{-webkit-animation:sonar-base, sonar-stroke;-moz-animation:sonar-base, sonar-stroke;-o-animation:sonar-base, sonar-stroke;animation:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-click:after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-stroke.sonar-click:focus:after{-webkit-animation:sonar-base, sonar-stroke;-moz-animation:sonar-base, sonar-stroke;-o-animation:sonar-base, sonar-stroke;animation:sonar-base, sonar-stroke}.sonar.sonar-fill:after{border:none;background:inherit;-webkit-border-radius:inherit;border-radius:inherit;-webkit-animation:sonar-base;-moz-animation:sonar-base;-o-animation:sonar-base;animation:sonar-base}.sonar.sonar-fill.sonar-default:after{background-color:#555}.sonar.sonar-fill.sonar-primary:after{background-color:#337ab7}.sonar.sonar-fill.sonar-info:after{background-color:#5bc0de}.sonar.sonar-fill.sonar-success:after{background-color:#5cb85c}.sonar.sonar-fill.sonar-warning:after{background-color:#f0ad4e}.sonar.sonar-fill.sonar-danger:after{background-color:#d9534f}.sonar.sonar-fill.sonar-hover:after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-fill.sonar-hover:hover:after{-webkit-animation:sonar-base 0.5s;-moz-animation:sonar-base 0.5s;-o-animation:sonar-base 0.5s;animation:sonar-base 0.5s}.sonar.sonar-fill.sonar-click:after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-fill.sonar-click:focus:after{-webkit-animation:sonar-base 0.5s;-moz-animation:sonar-base 0.5s;-o-animation:sonar-base 0.5s;animation:sonar-base 0.5s} +*/@-webkit-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-moz-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-o-keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:15px;opacity:0;top:-15px;left:-15px}}@-webkit-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@-moz-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@-o-keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}@keyframes sonar-stroke{from{border-width:5px;margin:-5px}to{border-width:1px;top:-15px;left:-15px}}.sonar{position:relative}.sonar:after{z-index:-1;padding:0;top:0;left:0;width:100%;height:100%;content:'';display:block;position:absolute;-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;-o-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.sonar.sonar-infinite:after{-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite}.sonar.sonar-delay:after{-webkit-animation-delay:1s;-moz-animation-delay:1s;-o-animation-delay:1s;animation-delay:1s}.sonar.sonar-delay-long:after{-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}.sonar.sonar-delay-longer:after{-webkit-animation-delay:4s;-moz-animation-delay:4s;-o-animation-delay:4s;animation-delay:4s}.sonar.sonar-delay-short:after{-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;-o-animation-delay:0.5s;animation-delay:0.5s}.sonar.sonar-delay-shorter:after{-webkit-animation-delay:0.25s;-moz-animation-delay:0.25s;-o-animation-delay:0.25s;animation-delay:0.25s}.sonar.sonar-slow:after{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s}.sonar.sonar-slower:after{-webkit-animation-duration:4s;-moz-animation-duration:4s;-o-animation-duration:4s;animation-duration:4s}.sonar.sonar-fast:after{-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s}.sonar.sonar-faster:after{-webkit-animation-duration:0.25s;-moz-animation-duration:0.25s;-o-animation-duration:0.25s;animation-duration:0.25s}.sonar.sonar-stroke:after{border-width:0;border-color:inherit;border-style:solid;-webkit-border-radius:inherit;border-radius:inherit;-webkit-animation-name:sonar-base, sonar-stroke;-moz-animation-name:sonar-base, sonar-stroke;-o-animation-name:sonar-base, sonar-stroke;animation-name:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-hover:after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-stroke.sonar-hover.sonar-default:after{border-color:#555}.sonar.sonar-stroke.sonar-hover.sonar-primary:after{border-color:#337ab7}.sonar.sonar-stroke.sonar-hover.sonar-info:after{border-color:#5bc0de}.sonar.sonar-stroke.sonar-hover.sonar-success:after{border-color:#5cb85c}.sonar.sonar-stroke.sonar-hover.sonar-warning:after{border-color:#f0ad4e}.sonar.sonar-stroke.sonar-hover.sonar-danger:after{border-color:#d9534f}.sonar.sonar-stroke.sonar-hover:hover:after{-webkit-animation-name:sonar-base, sonar-stroke;-moz-animation-name:sonar-base, sonar-stroke;-o-animation-name:sonar-base, sonar-stroke;animation-name:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-click:after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-stroke.sonar-click:focus:after{-webkit-animation-name:sonar-base, sonar-stroke;-moz-animation-name:sonar-base, sonar-stroke;-o-animation-name:sonar-base, sonar-stroke;animation-name:sonar-base, sonar-stroke}.sonar.sonar-fill:after{border:none;background:inherit;-webkit-border-radius:inherit;border-radius:inherit;-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base}.sonar.sonar-fill.sonar-default:after{background-color:#555}.sonar.sonar-fill.sonar-primary:after{background-color:#337ab7}.sonar.sonar-fill.sonar-info:after{background-color:#5bc0de}.sonar.sonar-fill.sonar-success:after{background-color:#5cb85c}.sonar.sonar-fill.sonar-warning:after{background-color:#f0ad4e}.sonar.sonar-fill.sonar-danger:after{background-color:#d9534f}.sonar.sonar-fill.sonar-hover:after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-fill.sonar-hover:hover:after{-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s}.sonar.sonar-fill.sonar-click:after{-webkit-animation-name:none;-moz-animation-name:none;-o-animation-name:none;animation-name:none}.sonar.sonar-fill.sonar-click:focus:after{-webkit-animation-name:sonar-base;-moz-animation-name:sonar-base;-o-animation-name:sonar-base;animation-name:sonar-base;-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s} diff --git a/sass/sonar.scss b/sass/sonar.scss index f2594a3..9b914c8 100644 --- a/sass/sonar.scss +++ b/sass/sonar.scss @@ -14,7 +14,7 @@ /// Sonar code .sonar { position: relative; - &::after { + &:after { z-index: -1; padding: 0; top: 0; @@ -89,7 +89,7 @@ border-radius: inherit; // Animate by default - animation: sonar-base, sonar-stroke; + animation-name: sonar-base, sonar-stroke; } &.sonar-hover { &:after { @@ -127,7 +127,7 @@ } &:hover { &:after { - animation: sonar-base, sonar-stroke; + animation-name: sonar-base, sonar-stroke; } } } @@ -137,7 +137,7 @@ } &:focus { &:after { - animation: sonar-base, sonar-stroke; + animation-name: sonar-base, sonar-stroke; } } } @@ -147,7 +147,7 @@ border: none; background: inherit; border-radius: inherit; - animation: sonar-base; + animation-name: sonar-base; } &.sonar-default { &:after { @@ -185,7 +185,8 @@ } &:hover { &:after { - animation: sonar-base $duration-base/2; + animation-name: sonar-base; + animation-duration: $duration-base/2; } } } @@ -195,7 +196,8 @@ } &:focus { &:after { - animation: sonar-base $duration-base/2; + animation-name: sonar-base; + animation-duration: $duration-base/2; } } }