From d260f7a1b427e929e5ee9887aefe8b3d422614bd Mon Sep 17 00:00:00 2001 From: "Alejandro U. Alvarez" Date: Sat, 6 Jun 2015 19:51:09 +0100 Subject: [PATCH] Changed units to em --- css/sonar.css | 222 ++++++------------------------------ css/sonar.min.css | 3 +- sass/sonar/_animations.scss | 2 +- sass/sonar/_variables.scss | 6 +- 4 files changed, 44 insertions(+), 189 deletions(-) diff --git a/css/sonar.css b/css/sonar.css index 7eee619..f7196e3 100644 --- a/css/sonar.css +++ b/css/sonar.css @@ -8,96 +8,27 @@ 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; + padding: 1.3em; 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; + top: -1.3em; + left: -1.3em; } } @keyframes sonar-stroke { from { - border-width: 5px; - margin: -5px; + border-width: 0.4em; + margin: -0.4em; } to { - border-width: 1px; - top: -15px; - left: -15px; + border-width: 0.1em; + top: -1.3em; + left: -1.3em; } } .sonar { @@ -113,98 +44,50 @@ Copyright (c) 2015 Alejandro U. Alvarez 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; + animation-name: sonar-base; + animation-iteration-count: 1; + animation-duration: 1s; + 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; + animation-iteration-count: infinite; } .sonar.sonar-delay:after { - -webkit-animation-delay: 1s; - -moz-animation-delay: 1s; - -o-animation-delay: 1s; - 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; + animation-delay: 2s; } .sonar.sonar-delay-longer:after { - -webkit-animation-delay: 4s; - -moz-animation-delay: 4s; - -o-animation-delay: 4s; - 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; + 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; + animation-delay: 0.25s; } .sonar.sonar-slow:after { - -webkit-animation-duration: 2s; - -moz-animation-duration: 2s; - -o-animation-duration: 2s; - 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; + 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; + 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; + 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; + border-radius: inherit; + 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; + animation-name: none; } .sonar.sonar-stroke.sonar-hover.sonar-default:after { border-color: #555555; @@ -225,32 +108,19 @@ Copyright (c) 2015 Alejandro U. Alvarez 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; + 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; + 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; + 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; + border-radius: inherit; + animation-name: sonar-base; } .sonar.sonar-fill.sonar-default:after { background-color: #555555; @@ -271,34 +141,18 @@ Copyright (c) 2015 Alejandro U. Alvarez background-color: #d9534f; } .sonar.sonar-fill.sonar-hover:after { - -webkit-animation-name: none; - -moz-animation-name: none; - -o-animation-name: none; - 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; + animation-name: sonar-base; + 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; + 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; + animation-name: sonar-base; + animation-duration: 0.5s; } + +/*# sourceMappingURL=sonar.css.map */ diff --git a/css/sonar.min.css b/css/sonar.min.css index a1e1ca2..1b4e875 100644 --- a/css/sonar.min.css +++ b/css/sonar.min.css @@ -6,4 +6,5 @@ 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-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} +*/@keyframes sonar-base{from{padding:0;opacity:0.6}to{padding:1.3em;opacity:0;top:-1.3em;left:-1.3em}}@keyframes sonar-stroke{from{border-width:0.4em;margin:-0.4em}to{border-width:0.1em;top:-1.3em;left:-1.3em}}.sonar{position:relative}.sonar:after{z-index:-1;padding:0;top:0;left:0;width:100%;height:100%;content:'';display:block;position:absolute;animation-name:sonar-base;animation-iteration-count:1;animation-duration:1s;box-sizing:content-box}.sonar.sonar-infinite:after{animation-iteration-count:infinite}.sonar.sonar-delay:after{animation-delay:1s}.sonar.sonar-delay-long:after{animation-delay:2s}.sonar.sonar-delay-longer:after{animation-delay:4s}.sonar.sonar-delay-short:after{animation-delay:0.5s}.sonar.sonar-delay-shorter:after{animation-delay:0.25s}.sonar.sonar-slow:after{animation-duration:2s}.sonar.sonar-slower:after{animation-duration:4s}.sonar.sonar-fast:after{animation-duration:0.5s}.sonar.sonar-faster:after{animation-duration:0.25s}.sonar.sonar-stroke:after{border-width:0;border-color:inherit;border-style:solid;border-radius:inherit;animation-name:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-hover:after{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{animation-name:sonar-base, sonar-stroke}.sonar.sonar-stroke.sonar-click:after{animation-name:none}.sonar.sonar-stroke.sonar-click:focus:after{animation-name:sonar-base, sonar-stroke}.sonar.sonar-fill:after{border:none;background:inherit;border-radius:inherit;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{animation-name:none}.sonar.sonar-fill.sonar-hover:hover:after{animation-name:sonar-base;animation-duration:0.5s}.sonar.sonar-fill.sonar-click:after{animation-name:none}.sonar.sonar-fill.sonar-click:focus:after{animation-name:sonar-base;animation-duration:0.5s} +/*# sourceMappingURL=sonar.min.css.map */ diff --git a/sass/sonar/_animations.scss b/sass/sonar/_animations.scss index 18f6ab2..77c4d0b 100644 --- a/sass/sonar/_animations.scss +++ b/sass/sonar/_animations.scss @@ -6,7 +6,7 @@ Copyright (c) 2015 Alejandro U. Alvarez */ @mixin animation($names){ - @include prefixer(animation-name, unquote('#{$names}')); + animation-name: unquote('#{$names}'); } // Base animation diff --git a/sass/sonar/_variables.scss b/sass/sonar/_variables.scss index ea035a0..b26e3f3 100644 --- a/sass/sonar/_variables.scss +++ b/sass/sonar/_variables.scss @@ -20,12 +20,12 @@ $brand-warning: #f0ad4e !default; $brand-danger: #d9534f !default; /// Sonar sizes -$animate-base: 15px; +$animate-base: 1.3em; /// Border animation -$border-base: 5px; +$border-base: 0.4em; $border-start: $border-base; -$border-end: 1px; +$border-end: 0.1em; /// Opacity animation $opacity-start: 0.6;