From db0e5d38b0b2400ebf8e951bce29c6099238892f Mon Sep 17 00:00:00 2001 From: Leandro D'Onofrio Date: Thu, 2 Jan 2014 20:54:50 -0300 Subject: [PATCH] Better organization --- .gitignore | 4 +- css/demo-page.css | 59 +- css/hover-min.css | 2 +- css/hover.css | 1379 ++++++++++++-------------- scss/hover.scss | 1358 +++---------------------- scss/hover/_border-fade.scss | 20 + scss/hover/_box-shadow-inset.scss | 17 + scss/hover/_box-shadow-outset.scss | 12 + scss/hover/_bubble-bottom.scss | 25 + scss/hover/_bubble-float-bottom.scss | 31 + scss/hover/_bubble-float-left.scss | 31 + scss/hover/_bubble-float-right.scss | 31 + scss/hover/_bubble-float-top.scss | 32 + scss/hover/_bubble-left.scss | 25 + scss/hover/_bubble-right.scss | 25 + scss/hover/_bubble-top.scss | 24 + scss/hover/_button.scss | 9 + scss/hover/_curl-bottom-left.scss | 32 + scss/hover/_curl-bottom-right.scss | 32 + scss/hover/_curl-top-left.scss | 35 + scss/hover/_curl-top-right.scss | 32 + scss/hover/_float-shadow.scss | 33 + scss/hover/_float.scss | 12 + scss/hover/_glow.scss | 12 + scss/hover/_grow-rotate.scss | 12 + scss/hover/_grow.scss | 12 + scss/hover/_hacks.scss | 22 + scss/hover/_hang.scss | 28 + scss/hover/_hollow.scss | 17 + scss/hover/_hover-shadow.scss | 73 ++ scss/hover/_hover.scss | 28 + scss/hover/_outline-inward.scss | 31 + scss/hover/_outline-outward.scss | 29 + scss/hover/_pop.scss | 23 + scss/hover/_pulse-grow.scss | 20 + scss/hover/_pulse-shrink.scss | 20 + scss/hover/_pulse.scss | 23 + scss/hover/_push.scss | 23 + scss/hover/_rotate.scss | 12 + scss/hover/_round-corners.scss | 12 + scss/hover/_shadow-radial.scss | 37 + scss/hover/_shrink.scss | 12 + scss/hover/_sink.scss | 12 + scss/hover/_skew-forward.scss | 13 + scss/hover/_skew.scss | 12 + scss/hover/_trim.scss | 27 + scss/hover/_variables.scss | 20 + scss/hover/_wobble-bottom.scss | 40 + scss/hover/_wobble-horizontal.scss | 39 + scss/hover/_wobble-top.scss | 40 + scss/hover/_wobble-vertical.scss | 39 + 51 files changed, 1953 insertions(+), 1995 deletions(-) create mode 100644 scss/hover/_border-fade.scss create mode 100644 scss/hover/_box-shadow-inset.scss create mode 100644 scss/hover/_box-shadow-outset.scss create mode 100644 scss/hover/_bubble-bottom.scss create mode 100644 scss/hover/_bubble-float-bottom.scss create mode 100644 scss/hover/_bubble-float-left.scss create mode 100644 scss/hover/_bubble-float-right.scss create mode 100644 scss/hover/_bubble-float-top.scss create mode 100644 scss/hover/_bubble-left.scss create mode 100644 scss/hover/_bubble-right.scss create mode 100644 scss/hover/_bubble-top.scss create mode 100644 scss/hover/_button.scss create mode 100644 scss/hover/_curl-bottom-left.scss create mode 100644 scss/hover/_curl-bottom-right.scss create mode 100644 scss/hover/_curl-top-left.scss create mode 100644 scss/hover/_curl-top-right.scss create mode 100644 scss/hover/_float-shadow.scss create mode 100644 scss/hover/_float.scss create mode 100644 scss/hover/_glow.scss create mode 100644 scss/hover/_grow-rotate.scss create mode 100644 scss/hover/_grow.scss create mode 100644 scss/hover/_hacks.scss create mode 100644 scss/hover/_hang.scss create mode 100644 scss/hover/_hollow.scss create mode 100644 scss/hover/_hover-shadow.scss create mode 100644 scss/hover/_hover.scss create mode 100644 scss/hover/_outline-inward.scss create mode 100644 scss/hover/_outline-outward.scss create mode 100644 scss/hover/_pop.scss create mode 100644 scss/hover/_pulse-grow.scss create mode 100644 scss/hover/_pulse-shrink.scss create mode 100644 scss/hover/_pulse.scss create mode 100644 scss/hover/_push.scss create mode 100644 scss/hover/_rotate.scss create mode 100644 scss/hover/_round-corners.scss create mode 100644 scss/hover/_shadow-radial.scss create mode 100644 scss/hover/_shrink.scss create mode 100644 scss/hover/_sink.scss create mode 100644 scss/hover/_skew-forward.scss create mode 100644 scss/hover/_skew.scss create mode 100644 scss/hover/_trim.scss create mode 100644 scss/hover/_variables.scss create mode 100644 scss/hover/_wobble-bottom.scss create mode 100644 scss/hover/_wobble-horizontal.scss create mode 100644 scss/hover/_wobble-top.scss create mode 100644 scss/hover/_wobble-vertical.scss diff --git a/.gitignore b/.gitignore index 6e51c1f..0a49eab 100644 --- a/.gitignore +++ b/.gitignore @@ -14,4 +14,6 @@ results npm-debug.log node_modules -.sass-cache \ No newline at end of file +.sass-cache + +.DS_Store \ No newline at end of file diff --git a/css/demo-page.css b/css/demo-page.css index 2c98953..0c95197 100644 --- a/css/demo-page.css +++ b/css/demo-page.css @@ -92,5 +92,62 @@ h2 { font-weight: 900; } +#forkongithub a { + background: #000; + color: #fff; + text-decoration: none; + font-family: arial, sans-serif; + text-align: center; + font-weight: bold; + padding: 5px 40px; + font-size: 1rem; + line-height: 2rem; + position: relative; + -webkit-transition: 0.5s; + transition: 0.5s; +} -#forkongithub a{background:#000;color:#fff;text-decoration:none;font-family:arial, sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#060;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:absolute;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}} \ No newline at end of file +#forkongithub a:hover { + background: #060; + color: #fff; +} + +#forkongithub a::before, +#forkongithub a::after { + content: ""; + width: 100%; + display: block; + position: absolute; + top: 1px; + left: 0; + height: 1px; + background: #fff; +} + +#forkongithub a::after { + bottom: 1px; + top: auto; +} + +@media screen and (min-width:800px) { + #forkongithub { + position: absolute; + display: block; + top: 0; + right: 0; + width: 200px; + overflow: hidden; + height: 200px; + } + + #forkongithub a { + width: 200px; + position: absolute; + top: 60px; + right: -60px; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-transform: rotate(45deg); + box-shadow: 4px 4px 10px rgba(0,0,0,0.8); + } +} \ No newline at end of file diff --git a/css/hover-min.css b/css/hover-min.css index def2e03..86a0e7e 100644 --- a/css/hover-min.css +++ b/css/hover-min.css @@ -1 +1 @@ -.button{margin:.4em;padding:1em;cursor:pointer;background:#ececec;text-decoration:none;color:#666}.grow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.grow:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.shrink{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.shrink:hover{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}@-webkit-keyframes pulse{25%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes pulse{25%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}}.pulse{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pulse:hover{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes pulse-grow{to{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}.pulse-grow{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pulse-grow:hover{-webkit-animation-name:pulse-grow;animation-name:pulse-grow;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes pulse-shrink{to{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes pulse-shrink{to{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}}.pulse-shrink{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pulse-shrink:hover{-webkit-animation-name:pulse-shrink;animation-name:pulse-shrink;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes push{50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes push{50%{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.push{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.push:hover{-webkit-animation-name:push;animation-name:push;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes pop{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pop{50%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.pop{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pop:hover{-webkit-animation-name:pop;animation-name:pop;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}.rotate{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.rotate:hover{-webkit-transform:rotate(4deg);-ms-transform:rotate(4deg);transform:rotate(4deg)}.grow-rotate{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.grow-rotate:hover{-webkit-transform:scale(1.1) rotate(4deg);-ms-transform:scale(1.1) rotate(4deg);transform:scale(1.1) rotate(4deg)}.float{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.float:hover{-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)}.sink{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.sink:hover{-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px)}@-webkit-keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@keyframes hover{50%{-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}}.hover{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.hover:hover{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-name:hover;animation-name:hover;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes hang{50%{-webkit-transform:translateY(3px);transform:translateY(3px)}100%{-webkit-transform:translateY(6px);transform:translateY(6px)}}@keyframes hang{50%{-webkit-transform:translateY(3px);-ms-transform:translateY(3px);transform:translateY(3px)}100%{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px)}}.hang{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.hang:hover{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);-webkit-animation-name:hang;animation-name:hang;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.skew{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.skew:hover{-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg)}.skew-forward{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.skew-forward:hover{-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg)}@-webkit-keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);-ms-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.wobble-vertical{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-vertical:hover{-webkit-animation-name:wobble-vertical;animation-name:wobble-vertical;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);-ms-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);-ms-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);-ms-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);-ms-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);-ms-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.wobble-horizontal{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-horizontal:hover{-webkit-animation-name:wobble-horizontal;animation-name:wobble-horizontal;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-top{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-top{16.65%{-webkit-transform:skew(-12deg);-ms-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);-ms-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);-ms-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);-ms-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);-ms-transform:skew(0);transform:skew(0)}}.wobble-top{display:inline-block;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-top:hover{-webkit-animation-name:wobble-top;animation-name:wobble-top;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);-ms-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);-ms-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);-ms-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);-ms-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);-ms-transform:skew(0);transform:skew(0)}}.wobble-bottom{display:inline-block;-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-bottom:hover{-webkit-animation-name:wobble-bottom;animation-name:wobble-bottom;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}.border-fade{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:inset 0 0 0 4px #ececec,0 0 1px rgba(0,0,0,0)}.border-fade:hover{box-shadow:inset 0 0 0 4px #666,0 0 1px rgba(0,0,0,0)}.hollow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background;transition-property:background;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:inset 0 0 0 4px #ececec,0 0 1px rgba(0,0,0,0)}.hollow:hover{background:0 0}.trim{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.trim:before{content:'';position:absolute;border:#fff solid 4px;top:4px;left:4px;right:4px;bottom:4px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity;transition-property:opacity}.trim:hover:before{opacity:1}.outline-outward{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.outline-outward:before{content:'';position:absolute;border:#ececec solid 4px;top:0;right:0;bottom:0;left:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top right bottom left;transition-property:top right bottom left}.outline-outward:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px}.outline-inward{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.outline-inward:before{content:'';position:absolute;border:#ececec solid 4px;top:-16px;right:-16px;bottom:-16px;left:-16px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top right bottom left;transition-property:top right bottom left}.outline-inward:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px;opacity:1}.round-corners{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:border-radius;transition-property:border-radius;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.round-corners:hover{border-radius:1em}.glow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.glow:hover{box-shadow:0 0 8px rgba(0,0,0,.6)}.box-shadow-outset{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.box-shadow-outset:hover{box-shadow:2px 2px 2px rgba(0,0,0,.6)}.box-shadow-inset{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;box-shadow:inset 0 0 0 rgba(0,0,0,.6),0 0 1px rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}.box-shadow-inset:hover{box-shadow:inset 2px 2px 2px rgba(0,0,0,.6),0 0 1px rgba(0,0,0,0)}.float-shadow{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.float-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform opacity;transition-property:transform opacity}.float-shadow:hover{-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)}.float-shadow:hover:before{opacity:1;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px)}@keyframes hover{50%{-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}}@-webkit-keyframes hover-shadow{0%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}50%{-webkit-transform:translateY(3px);transform:translateY(3px);opacity:1}100%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}}@keyframes hover-shadow{0%{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);opacity:.4}50%{-webkit-transform:translateY(3px);-ms-transform:translateY(3px);transform:translateY(3px);opacity:1}100%{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);opacity:.4}}.hover-shadow{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.hover-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform opacity;transition-property:transform opacity}.hover-shadow:hover{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-name:hover;animation-name:hover;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.hover-shadow:hover:before{opacity:.4;-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);-webkit-animation-name:hover-shadow;animation-name:hover-shadow;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.shadow-radial{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.shadow-radial:after,.shadow-radial:before{pointer-events:none;position:absolute;content:'';left:0;width:100%;-moz-box-sizing:border-box;box-sizing:border-box;height:5px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity;transition-property:opacity}.shadow-radial:before{bottom:100%;background:-webkit-radial-gradient(50% 150%,ellipse,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at 50% 150%,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%)}.shadow-radial:after{top:100%;background:-webkit-radial-gradient(50% -50%,ellipse,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at 50% -50%,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%)}.shadow-radial:hover:after,.shadow-radial:hover:before{opacity:1}.bubble-top{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-top:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;left:-webkit-calc(50% - 10px);left:calc(50% - 10px);border-width:0 10px 10px;border-color:transparent transparent #ececec;-webkit-transition-property:top;transition-property:top}.bubble-top:hover:before{top:-10px}.bubble-right{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-right:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:right;transition-property:right;top:-webkit-calc(50% - 10px);top:calc(50% - 10px);right:0;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #ececec}.bubble-right:hover:before{right:-10px}.bubble-bottom{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-bottom:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:bottom;transition-property:bottom;left:-webkit-calc(50% - 10px);left:calc(50% - 10px);bottom:0;border-width:10px 10px 0;border-color:#ececec transparent transparent}.bubble-bottom:hover:before{bottom:-10px}.bubble-left{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-left:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left;transition-property:left;top:-webkit-calc(50% - 10px);top:calc(50% - 10px);left:0;border-width:10px 10px 10px 0;border-color:transparent #ececec transparent transparent}.bubble-left:hover:before{left:-10px}.bubble-float-top{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-top:before{pointer-events:none;position:absolute;z-index:-1;content:'';left:-webkit-calc(50% - 10px);left:calc(50% - 10px);top:0;border-style:solid;border-width:0 10px 10px;border-color:transparent transparent #ececec;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top;transition-property:top}.bubble-float-top:hover{-webkit-transform:translateY(5px) translateZ(0);-ms-transform:translateY(5px) translateZ(0);transform:translateY(5px) translateZ(0)}.bubble-float-top:hover:before{top:-10px}.bubble-float-right{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-right:before{pointer-events:none;position:absolute;z-index:-1;top:-webkit-calc(50% - 10px);top:calc(50% - 10px);right:0;content:'';border-style:solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #ececec;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:right;transition-property:right}.bubble-float-right:hover{-webkit-transform:translateX(-5px);-ms-transform:translateX(-5px);transform:translateX(-5px)}.bubble-float-right:hover:before{right:-10px}.bubble-float-bottom{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-bottom:before{pointer-events:none;position:absolute;z-index:-1;content:'';left:-webkit-calc(50% - 10px);left:calc(50% - 10px);bottom:0;border-style:solid;border-width:10px 10px 0;border-color:#ececec transparent transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:bottom;transition-property:bottom}.bubble-float-bottom:hover{-webkit-transform:translateY(-5px) translateZ(0);-ms-transform:translateY(-5px) translateZ(0);transform:translateY(-5px) translateZ(0)}.bubble-float-bottom:hover:before{bottom:-10px}.bubble-float-left{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-left:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:-webkit-calc(50% - 10px);top:calc(50% - 10px);left:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #ececec transparent transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left;transition-property:left}.bubble-float-left:hover{-webkit-transform:translateX(5px);-ms-transform:translateX(5px);transform:translateX(5px)}.bubble-float-left:hover:before{left:-10px}.curl-top-left{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-top-left:before{pointer-events:none;position:absolute;content:'';height:0;width:0;top:0;left:0;background:#fff;background:-webkit-linear-gradient(315deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);background:linear-gradient(135deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');z-index:1000;box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width height;transition-property:width height}.curl-top-left:hover:before{width:25px;height:25px}.curl-top-right{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-top-right:before{pointer-events:none;position:absolute;content:'';height:0;width:0;top:0;right:0;background:#fff;background:-webkit-linear-gradient(225deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);background:linear-gradient(225deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:-1px 1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width height;transition-property:width height}.curl-top-right:hover:before{width:25px;height:25px}.curl-bottom-right{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-bottom-right:before{pointer-events:none;position:absolute;content:'';height:0;width:0;bottom:0;right:0;background:#fff;background:-webkit-linear-gradient(135deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);background:linear-gradient(315deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:-1px -1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width height;transition-property:width height}.curl-bottom-right:hover:before{width:25px;height:25px}.curl-bottom-left{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-bottom-left:before{pointer-events:none;position:absolute;content:'';height:0;width:0;bottom:0;left:0;background:#fff;background:-webkit-linear-gradient(45deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);background:linear-gradient(45deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:1px -1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width height;transition-property:width height}.curl-bottom-left:hover:before{width:25px;height:25px} \ No newline at end of file +.box-shadow-outset,.bubble-bottom,.bubble-float-bottom,.bubble-float-left,.bubble-float-right,.bubble-float-top,.bubble-left,.bubble-right,.bubble-top,.curl-bottom-left,.curl-bottom-right,.curl-top-left,.curl-top-right,.float,.float-shadow,.glow,.grow,.grow-rotate,.hang,.hover,.hover-shadow,.outline-inward,.outline-outward,.pop,.pulse,.pulse-grow,.pulse-shrink,.push,.rotate,.round-corners,.shadow-radial,.shrink,.sink,.skew,.skew-forward,.trim,.wobble-bottom,.wobble-horizontal,.wobble-top,.wobble-vertical{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}@-webkit-keyframes pulse{25%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes pulse{25%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}}@-webkit-keyframes pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes pulse-grow{to{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}@-webkit-keyframes pulse-shrink{to{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes pulse-shrink{to{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}}@-webkit-keyframes push{50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes push{50%{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes pop{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pop{50%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@keyframes hover{50%{-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}}@-webkit-keyframes hang{50%{-webkit-transform:translateY(3px);transform:translateY(3px)}100%{-webkit-transform:translateY(6px);transform:translateY(6px)}}@keyframes hang{50%{-webkit-transform:translateY(3px);-ms-transform:translateY(3px);transform:translateY(3px)}100%{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px)}}@-webkit-keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);-ms-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);-ms-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);-ms-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);-ms-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);-ms-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);-ms-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes wobble-top{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-top{16.65%{-webkit-transform:skew(-12deg);-ms-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);-ms-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);-ms-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);-ms-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);-ms-transform:skew(0);transform:skew(0)}}@-webkit-keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);-ms-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);-ms-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);-ms-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);-ms-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);-ms-transform:skew(0);transform:skew(0)}}@keyframes hover{50%{-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}}@-webkit-keyframes hover-shadow{0%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}50%{-webkit-transform:translateY(3px);transform:translateY(3px);opacity:1}100%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}}@keyframes hover-shadow{0%{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);opacity:.4}50%{-webkit-transform:translateY(3px);-ms-transform:translateY(3px);transform:translateY(3px);opacity:1}100%{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);opacity:.4}}.button{margin:.4em;padding:1em;cursor:pointer;background:#ececec;text-decoration:none;color:#666}.grow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.grow:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.shrink{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.shrink:hover{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}.pulse{display:inline-block}.pulse:hover{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.pulse-grow{display:inline-block}.pulse-grow:hover{-webkit-animation-name:pulse-grow;animation-name:pulse-grow;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.pulse-shrink{display:inline-block}.pulse-shrink:hover{-webkit-animation-name:pulse-shrink;animation-name:pulse-shrink;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.push{display:inline-block}.push:hover{-webkit-animation-name:push;animation-name:push;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}.pop{display:inline-block}.pop:hover{-webkit-animation-name:pop;animation-name:pop;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}.rotate{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.rotate:hover{-webkit-transform:rotate(4deg);-ms-transform:rotate(4deg);transform:rotate(4deg)}.grow-rotate{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.grow-rotate:hover{-webkit-transform:scale(1.1) rotate(4deg);-ms-transform:scale(1.1) rotate(4deg);transform:scale(1.1) rotate(4deg)}.float{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.float:hover{-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)}.sink{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.sink:hover{-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px)}.hover{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:-webkit-transform;transition-property:transform}.hover:hover{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-name:hover;animation-name:hover;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.hang{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:-webkit-transform;transition-property:transform}.hang:hover{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);-webkit-animation-name:hang;animation-name:hang;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.skew{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.skew:hover{-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg)}.skew-forward{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%}.skew-forward:hover{-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg)}.wobble-vertical{display:inline-block}.wobble-vertical:hover{-webkit-animation-name:wobble-vertical;animation-name:wobble-vertical;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}.wobble-horizontal{display:inline-block}.wobble-horizontal:hover{-webkit-animation-name:wobble-horizontal;animation-name:wobble-horizontal;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}.wobble-top{display:inline-block;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%}.wobble-top:hover{-webkit-animation-name:wobble-top;animation-name:wobble-top;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}.wobble-bottom{display:inline-block;-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.wobble-bottom:hover{-webkit-animation-name:wobble-bottom;animation-name:wobble-bottom;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}.border-fade{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:inset 0 0 0 4px #ececec,0 0 1px rgba(0,0,0,0)}.border-fade:hover{box-shadow:inset 0 0 0 4px #666,0 0 1px rgba(0,0,0,0)}.hollow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background;transition-property:background;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:inset 0 0 0 4px #ececec,0 0 1px rgba(0,0,0,0)}.hollow:hover{background:0 0}.trim{display:inline-block;position:relative}.trim:before{content:'';position:absolute;border:#fff solid 4px;top:4px;left:4px;right:4px;bottom:4px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity;transition-property:opacity}.trim:hover:before{opacity:1}.outline-outward{display:inline-block;position:relative}.outline-outward:before{content:'';position:absolute;border:#ececec solid 4px;top:0;right:0;bottom:0;left:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top right bottom left;transition-property:top right bottom left}.outline-outward:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px}.outline-inward{display:inline-block;position:relative}.outline-inward:before{content:'';position:absolute;border:#ececec solid 4px;top:-16px;right:-16px;bottom:-16px;left:-16px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top right bottom left;transition-property:top right bottom left}.outline-inward:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px;opacity:1}.round-corners{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:border-radius;transition-property:border-radius}.round-corners:hover{border-radius:1em}.glow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow}.glow:hover{box-shadow:0 0 8px rgba(0,0,0,.6)}.box-shadow-outset{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow}.box-shadow-outset:hover{box-shadow:2px 2px 2px rgba(0,0,0,.6)}.box-shadow-inset{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;box-shadow:inset 0 0 0 rgba(0,0,0,.6),0 0 1px rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}.box-shadow-inset:hover{box-shadow:inset 2px 2px 2px rgba(0,0,0,.6),0 0 1px rgba(0,0,0,0)}.float-shadow{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.float-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform opacity;transition-property:transform opacity}.float-shadow:hover{-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)}.float-shadow:hover:before{opacity:1;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px)}.hover-shadow{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.hover-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform opacity;transition-property:transform opacity}.hover-shadow:hover{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-name:hover;animation-name:hover;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.hover-shadow:hover:before{opacity:.4;-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);-webkit-animation-name:hover-shadow;animation-name:hover-shadow;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.shadow-radial{display:inline-block;position:relative}.shadow-radial:after,.shadow-radial:before{pointer-events:none;position:absolute;content:'';left:0;width:100%;-moz-box-sizing:border-box;box-sizing:border-box;height:5px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity;transition-property:opacity}.shadow-radial:before{bottom:100%;background:-webkit-radial-gradient(50% 150%,ellipse,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at 50% 150%,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%)}.shadow-radial:after{top:100%;background:-webkit-radial-gradient(50% -50%,ellipse,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at 50% -50%,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%)}.shadow-radial:hover:after,.shadow-radial:hover:before{opacity:1}.bubble-top{display:inline-block;position:relative}.bubble-top:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;left:-webkit-calc(50% - 10px);left:calc(50% - 10px);border-width:0 10px 10px;border-color:transparent transparent #ececec;-webkit-transition-property:top;transition-property:top}.bubble-top:hover:before{top:-10px}.bubble-right{display:inline-block;position:relative}.bubble-right:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:right;transition-property:right;top:-webkit-calc(50% - 10px);top:calc(50% - 10px);right:0;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #ececec}.bubble-right:hover:before{right:-10px}.bubble-bottom{display:inline-block;position:relative}.bubble-bottom:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:bottom;transition-property:bottom;left:-webkit-calc(50% - 10px);left:calc(50% - 10px);bottom:0;border-width:10px 10px 0;border-color:#ececec transparent transparent}.bubble-bottom:hover:before{bottom:-10px}.bubble-left{display:inline-block;position:relative}.bubble-left:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left;transition-property:left;top:-webkit-calc(50% - 10px);top:calc(50% - 10px);left:0;border-width:10px 10px 10px 0;border-color:transparent #ececec transparent transparent}.bubble-left:hover:before{left:-10px}.bubble-float-top{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.bubble-float-top:before{pointer-events:none;position:absolute;z-index:-1;content:'';left:-webkit-calc(50% - 10px);left:calc(50% - 10px);top:0;border-style:solid;border-width:0 10px 10px;border-color:transparent transparent #ececec;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top;transition-property:top}.bubble-float-top:hover{-webkit-transform:translateY(5px) translateZ(0);-ms-transform:translateY(5px) translateZ(0);transform:translateY(5px) translateZ(0)}.bubble-float-top:hover:before{top:-10px}.bubble-float-right{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.bubble-float-right:before{pointer-events:none;position:absolute;z-index:-1;top:-webkit-calc(50% - 10px);top:calc(50% - 10px);right:0;content:'';border-style:solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #ececec;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:right;transition-property:right}.bubble-float-right:hover{-webkit-transform:translateX(-5px);-ms-transform:translateX(-5px);transform:translateX(-5px)}.bubble-float-right:hover:before{right:-10px}.bubble-float-bottom{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.bubble-float-bottom:before{pointer-events:none;position:absolute;z-index:-1;content:'';left:-webkit-calc(50% - 10px);left:calc(50% - 10px);bottom:0;border-style:solid;border-width:10px 10px 0;border-color:#ececec transparent transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:bottom;transition-property:bottom}.bubble-float-bottom:hover{-webkit-transform:translateY(-5px) translateZ(0);-ms-transform:translateY(-5px) translateZ(0);transform:translateY(-5px) translateZ(0)}.bubble-float-bottom:hover:before{bottom:-10px}.bubble-float-left{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform}.bubble-float-left:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:-webkit-calc(50% - 10px);top:calc(50% - 10px);left:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #ececec transparent transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left;transition-property:left}.bubble-float-left:hover{-webkit-transform:translateX(5px);-ms-transform:translateX(5px);transform:translateX(5px)}.bubble-float-left:hover:before{left:-10px}.curl-top-left{display:inline-block;position:relative}.curl-top-left:before{pointer-events:none;position:absolute;content:'';height:0;width:0;top:0;left:0;background:#fff;background:-webkit-linear-gradient(315deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);background:linear-gradient(135deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');z-index:1000;box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width height;transition-property:width height}.curl-top-left:hover:before{width:25px;height:25px}.curl-top-right{display:inline-block;position:relative}.curl-top-right:before{pointer-events:none;position:absolute;content:'';height:0;width:0;top:0;right:0;background:#fff;background:-webkit-linear-gradient(225deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);background:linear-gradient(225deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:-1px 1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width height;transition-property:width height}.curl-top-right:hover:before{width:25px;height:25px}.curl-bottom-right{display:inline-block;position:relative}.curl-bottom-right:before{pointer-events:none;position:absolute;content:'';height:0;width:0;bottom:0;right:0;background:#fff;background:-webkit-linear-gradient(135deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);background:linear-gradient(315deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:-1px -1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width height;transition-property:width height}.curl-bottom-right:hover:before{width:25px;height:25px}.curl-bottom-left{display:inline-block;position:relative}.curl-bottom-left:before{pointer-events:none;position:absolute;content:'';height:0;width:0;bottom:0;left:0;background:#fff;background:-webkit-linear-gradient(45deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);background:linear-gradient(45deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:1px -1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width height;transition-property:width height}.curl-bottom-left:hover:before{width:25px;height:25px} \ No newline at end of file diff --git a/css/hover.css b/css/hover.css index c6c0369..36fe74d 100644 --- a/css/hover.css +++ b/css/hover.css @@ -11,61 +11,59 @@ * Hover.css Copyright Ian Lunn 2014. */ -/* Default styles for the demo buttons */ - -.button { - margin: .4em; - padding: 1em; - cursor: pointer; - background: #ececec; - text-decoration: none; - color: #666666; +.grow, +.shrink, +.pulse, +.pulse-grow, +.pulse-shrink, +.push, +.pop, +.rotate, +.grow-rotate, +.float, +.sink, +.hover, +.hang, +.skew, +.skew-forward, +.wobble-vertical, +.wobble-horizontal, +.wobble-top, +.wobble-bottom, +.trim, +.outline-outward, +.outline-inward, +.round-corners, +.glow, +.box-shadow-outset, +.float-shadow, +.hover-shadow, +.shadow-radial, +.bubble-top, +.bubble-right, +.bubble-bottom, +.bubble-left, +.bubble-float-top, +.bubble-float-right, +.bubble-float-bottom, +.bubble-float-left, +.curl-top-left, +.curl-top-right, +.curl-bottom-right, +.curl-bottom-left { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); } -/* 2D TRANSITIONS */ +/* Default styles for the demo buttons */ /* Grow */ -.grow { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.grow:hover { - -webkit-transform: scale(1.1); - -ms-transform: scale(1.1); - transform: scale(1.1); -} - /* Shrink */ -.shrink { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.shrink:hover { - -webkit-transform: scale(0.9); - -ms-transform: scale(0.9); - transform: scale(0.9); -} - /* Pulse */ @-webkit-keyframes pulse { @@ -94,26 +92,6 @@ } } -.pulse { - display: inline-block; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.pulse:hover { - -webkit-animation-name: pulse; - animation-name: pulse; - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; -} - /* Pulse Grow */ @-webkit-keyframes pulse-grow { @@ -131,28 +109,6 @@ } } -.pulse-grow { - display: inline-block; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.pulse-grow:hover { - -webkit-animation-name: pulse-grow; - animation-name: pulse-grow; - -webkit-animation-duration: 0.3s; - animation-duration: 0.3s; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-direction: alternate; - animation-direction: alternate; -} - /* Pulse Shrink */ @-webkit-keyframes pulse-shrink { @@ -170,28 +126,6 @@ } } -.pulse-shrink { - display: inline-block; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.pulse-shrink:hover { - -webkit-animation-name: pulse-shrink; - animation-name: pulse-shrink; - -webkit-animation-duration: 0.3s; - animation-duration: 0.3s; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-direction: alternate; - animation-direction: alternate; -} - /* Push */ @-webkit-keyframes push { @@ -220,26 +154,6 @@ } } -.push { - display: inline-block; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.push:hover { - -webkit-animation-name: push; - animation-name: push; - -webkit-animation-duration: 0.3s; - animation-duration: 0.3s; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; -} - /* Pop */ @-webkit-keyframes pop { @@ -268,110 +182,14 @@ } } -.pop { - display: inline-block; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.pop:hover { - -webkit-animation-name: pop; - animation-name: pop; - -webkit-animation-duration: 0.3s; - animation-duration: 0.3s; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; -} - /* Rotate */ -.rotate { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.rotate:hover { - -webkit-transform: rotate(4deg); - -ms-transform: rotate(4deg); - transform: rotate(4deg); -} - /* Grow Rotate */ -.grow-rotate { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.grow-rotate:hover { - -webkit-transform: scale(1.1) rotate(4deg); - -ms-transform: scale(1.1) rotate(4deg); - transform: scale(1.1) rotate(4deg); -} - /* Float */ -.float { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.float:hover { - -webkit-transform: translateY(-5px); - -ms-transform: translateY(-5px); - transform: translateY(-5px); -} - /* Sink */ -.sink { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.sink:hover { - -webkit-transform: translateY(5px); - -ms-transform: translateY(5px); - transform: translateY(5px); -} - /* Hover */ @-webkit-keyframes hover { @@ -400,37 +218,6 @@ } } -.hover { - display: inline-block; - -webkit-transition-duration: .5s; - transition-duration: .5s; - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.hover:hover { - -webkit-transform: translateY(-6px); - -ms-transform: translateY(-6px); - transform: translateY(-6px); - -webkit-animation-name: hover; - animation-name: hover; - -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-direction: alternate; - animation-direction: alternate; -} - /* Hang */ @-webkit-keyframes hang { @@ -459,82 +246,10 @@ } } -.hang { - display: inline-block; - -webkit-transition-duration: .5s; - transition-duration: .5s; - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.hang:hover { - -webkit-transform: translateY(6px); - -ms-transform: translateY(6px); - transform: translateY(6px); - -webkit-animation-name: hang; - animation-name: hang; - -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-direction: alternate; - animation-direction: alternate; -} - /* Skew */ -.skew { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.skew:hover { - -webkit-transform: skew(-10deg); - -ms-transform: skew(-10deg); - transform: skew(-10deg); -} - /* Skew Forward */ -.skew-forward { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-transform-origin: 0 100%; - -ms-transform-origin: 0 100%; - transform-origin: 0 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.skew-forward:hover { - -webkit-transform: skew(-10deg); - -ms-transform: skew(-10deg); - transform: skew(-10deg); -} - /* Wobble Vertical */ @-webkit-keyframes wobble-vertical { @@ -607,26 +322,6 @@ } } -.wobble-vertical { - display: inline-block; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.wobble-vertical:hover { - -webkit-animation-name: wobble-vertical; - animation-name: wobble-vertical; - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; -} - /* Wobble Horizontal */ @-webkit-keyframes wobble-horizontal { @@ -699,26 +394,6 @@ } } -.wobble-horizontal { - display: inline-block; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.wobble-horizontal:hover { - -webkit-animation-name: wobble-horizontal; - animation-name: wobble-horizontal; - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; -} - /* Wobble Top */ @-webkit-keyframes wobble-top { @@ -791,29 +466,6 @@ } } -.wobble-top { - display: inline-block; - -webkit-transform-origin: 0 100%; - -ms-transform-origin: 0 100%; - transform-origin: 0 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.wobble-top:hover { - -webkit-animation-name: wobble-top; - animation-name: wobble-top; - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; -} - /* Wobble Bottom */ @-webkit-keyframes wobble-bottom { @@ -886,301 +538,26 @@ } } -.wobble-bottom { - display: inline-block; - -webkit-transform-origin: 100% 0; - -ms-transform-origin: 100% 0; - transform-origin: 100% 0; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.wobble-bottom:hover { - -webkit-animation-name: wobble-bottom; - animation-name: wobble-bottom; - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; -} - -/* BORDER TRANSITIONS */ - /* Border Fade */ -.border-fade { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: box-shadow; - transition-property: box-shadow; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); - /* Hack to improve aliasing on mobile/tablet devices */ -} - -.border-fade:hover { - box-shadow: inset 0 0 0 4px #666666, 0 0 1px rgba(0, 0, 0, 0); - /* Hack to improve aliasing on mobile/tablet devices */ -} - /* Hollow */ -.hollow { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: background; - transition-property: background; - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - /* Hack to improve performance on mobile/tablet devices */ - box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); - /* Hack to improve aliasing on mobile/tablet devices */ -} - -.hollow:hover { - background: none; -} - /* Trim */ -.trim { - display: inline-block; - position: relative; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.trim:before { - content: ''; - position: absolute; - border: white solid 4px; - top: 4px; - left: 4px; - right: 4px; - bottom: 4px; - opacity: 0; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: opacity; - transition-property: opacity; -} - -.trim:hover:before { - opacity: 1; -} - /* Outline Outward */ -.outline-outward { - display: inline-block; - position: relative; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.outline-outward:before { - content: ''; - position: absolute; - border: #ececec solid 4px; - top: 0; - right: 0; - bottom: 0; - left: 0; - -webkit-transition-duration: .3s; - transition-duration: .3s; - -webkit-transition-property: top right bottom left; - transition-property: top right bottom left; -} - -.outline-outward:hover:before { - top: -8px; - right: -8px; - bottom: -8px; - left: -8px; -} - /* Outline Inward */ -.outline-inward { - display: inline-block; - position: relative; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.outline-inward:before { - content: ''; - position: absolute; - border: #ececec solid 4px; - top: -16px; - right: -16px; - bottom: -16px; - left: -16px; - opacity: 0; - -webkit-transition-duration: .3s; - transition-duration: .3s; - -webkit-transition-property: top right bottom left; - transition-property: top right bottom left; -} - -.outline-inward:hover:before { - top: -8px; - right: -8px; - bottom: -8px; - left: -8px; - opacity: 1; -} - /* Round Corners */ -.round-corners { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: border-radius; - transition-property: border-radius; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.round-corners:hover { - border-radius: 1em; -} - -/* SHADOW/GLOW TRANSITIONS */ - /* Glow */ -.glow { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: box-shadow; - transition-property: box-shadow; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.glow:hover { - box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); -} - /* Box Shadow Outset */ -.box-shadow-outset { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: box-shadow; - transition-property: box-shadow; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.box-shadow-outset:hover { - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); -} - /* Box Shadow Inset */ -.box-shadow-inset { - display: inline-block; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: box-shadow; - transition-property: box-shadow; - box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); - /* Hack to improve aliasing on mobile/tablet devices */ - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); -} - -.box-shadow-inset:hover { - box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); - /* Hack to improve aliasing on mobile/tablet devices */ -} - /* Float Shadow */ -.float-shadow { - display: inline-block; - position: relative; - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: -webkit-transform; - transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - -.float-shadow:before { - pointer-events: none; - position: absolute; - z-index: -1; - content: ''; - top: 100%; - left: 5%; - height: 10px; - width: 90%; - opacity: 0; - background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); - background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); - /* W3C */ - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: -webkit-transform opacity; - transition-property: transform opacity; -} - -.float-shadow:hover { - -webkit-transform: translateY(-5px); - -ms-transform: translateY(-5px); - transform: translateY(-5px); - /* move the element up by 5px */ -} - -.float-shadow:hover:before { - opacity: 1; - -webkit-transform: translateY(5px); - -ms-transform: translateY(5px); - transform: translateY(5px); - /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ -} - /* Hover Shadow */ @keyframes hover { @@ -1240,6 +617,574 @@ } } +/* Shadow Radial */ + +/* Bubble Top */ + +/* Bubble Right */ + +/* Bubble Bottom */ + +/* Bubble Left */ + +/* Bubble Float Top */ + +/* Bubble Float Right */ + +/* Bubble Float Bottom */ + +/* Bubble Float Left */ + +/* Curl Top Left */ + +/* Curl Top Right */ + +/* Curl Bottom Right */ + +/* Curl Bottom Left */ + +/* BASE BUTTON */ + +.button { + margin: .4em; + padding: 1em; + cursor: pointer; + background: #ececec; + text-decoration: none; + color: #666666; +} + +/* 2D TRANSITIONS */ + +.grow { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} + +.grow:hover { + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} + +.shrink { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} + +.shrink:hover { + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); + transform: scale(0.9); +} + +.pulse { + display: inline-block; +} + +.pulse:hover { + -webkit-animation-name: pulse; + animation-name: pulse; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +.pulse-grow { + display: inline-block; +} + +.pulse-grow:hover { + -webkit-animation-name: pulse-grow; + animation-name: pulse-grow; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +.pulse-shrink { + display: inline-block; +} + +.pulse-shrink:hover { + -webkit-animation-name: pulse-shrink; + animation-name: pulse-shrink; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +.push { + display: inline-block; +} + +.push:hover { + -webkit-animation-name: push; + animation-name: push; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +.pop { + display: inline-block; +} + +.pop:hover { + -webkit-animation-name: pop; + animation-name: pop; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +.rotate { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} + +.rotate:hover { + -webkit-transform: rotate(4deg); + -ms-transform: rotate(4deg); + transform: rotate(4deg); +} + +.grow-rotate { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} + +.grow-rotate:hover { + -webkit-transform: scale(1.1) rotate(4deg); + -ms-transform: scale(1.1) rotate(4deg); + transform: scale(1.1) rotate(4deg); +} + +.float { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} + +.float:hover { + -webkit-transform: translateY(-5px); + -ms-transform: translateY(-5px); + transform: translateY(-5px); +} + +.sink { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} + +.sink:hover { + -webkit-transform: translateY(5px); + -ms-transform: translateY(5px); + transform: translateY(5px); +} + +.hover { + display: inline-block; + -webkit-transition-duration: .5s; + transition-duration: .5s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} + +.hover:hover { + -webkit-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); + -webkit-animation-name: hover; + animation-name: hover; + -webkit-animation-duration: 1.5s; + animation-duration: 1.5s; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +.hang { + display: inline-block; + -webkit-transition-duration: .5s; + transition-duration: .5s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} + +.hang:hover { + -webkit-transform: translateY(6px); + -ms-transform: translateY(6px); + transform: translateY(6px); + -webkit-animation-name: hang; + animation-name: hang; + -webkit-animation-duration: 1.5s; + animation-duration: 1.5s; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +.skew { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} + +.skew:hover { + -webkit-transform: skew(-10deg); + -ms-transform: skew(-10deg); + transform: skew(-10deg); +} + +.skew-forward { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-transform-origin: 0 100%; + -ms-transform-origin: 0 100%; + transform-origin: 0 100%; +} + +.skew-forward:hover { + -webkit-transform: skew(-10deg); + -ms-transform: skew(-10deg); + transform: skew(-10deg); +} + +.wobble-vertical { + display: inline-block; +} + +.wobble-vertical:hover { + -webkit-animation-name: wobble-vertical; + animation-name: wobble-vertical; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +.wobble-horizontal { + display: inline-block; +} + +.wobble-horizontal:hover { + -webkit-animation-name: wobble-horizontal; + animation-name: wobble-horizontal; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +.wobble-top { + display: inline-block; + -webkit-transform-origin: 0 100%; + -ms-transform-origin: 0 100%; + transform-origin: 0 100%; +} + +.wobble-top:hover { + -webkit-animation-name: wobble-top; + animation-name: wobble-top; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +.wobble-bottom { + display: inline-block; + -webkit-transform-origin: 100% 0; + -ms-transform-origin: 100% 0; + transform-origin: 100% 0; +} + +.wobble-bottom:hover { + -webkit-animation-name: wobble-bottom; + animation-name: wobble-bottom; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* BORDER TRANSITIONS */ + +.border-fade { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} + +.border-fade:hover { + box-shadow: inset 0 0 0 4px #666666, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} + +.hollow { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: background; + transition-property: background; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + /* Hack to improve performance on mobile/tablet devices */ + box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} + +.hollow:hover { + background: none; +} + +.trim { + display: inline-block; + position: relative; +} + +.trim:before { + content: ''; + position: absolute; + border: white solid 4px; + top: 4px; + left: 4px; + right: 4px; + bottom: 4px; + opacity: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: opacity; + transition-property: opacity; +} + +.trim:hover:before { + opacity: 1; +} + +.outline-outward { + display: inline-block; + position: relative; +} + +.outline-outward:before { + content: ''; + position: absolute; + border: #ececec solid 4px; + top: 0; + right: 0; + bottom: 0; + left: 0; + -webkit-transition-duration: .3s; + transition-duration: .3s; + -webkit-transition-property: top right bottom left; + transition-property: top right bottom left; +} + +.outline-outward:hover:before { + top: -8px; + right: -8px; + bottom: -8px; + left: -8px; +} + +.outline-inward { + display: inline-block; + position: relative; +} + +.outline-inward:before { + content: ''; + position: absolute; + border: #ececec solid 4px; + top: -16px; + right: -16px; + bottom: -16px; + left: -16px; + opacity: 0; + -webkit-transition-duration: .3s; + transition-duration: .3s; + -webkit-transition-property: top right bottom left; + transition-property: top right bottom left; +} + +.outline-inward:hover:before { + top: -8px; + right: -8px; + bottom: -8px; + left: -8px; + opacity: 1; +} + +.round-corners { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: border-radius; + transition-property: border-radius; +} + +.round-corners:hover { + border-radius: 1em; +} + +/* SHADOW/GLOW TRANSITIONS */ + +.glow { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; +} + +.glow:hover { + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); +} + +.box-shadow-outset { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; +} + +.box-shadow-outset:hover { + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); +} + +.box-shadow-inset { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} + +.box-shadow-inset:hover { + box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} + +.float-shadow { + display: inline-block; + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} + +.float-shadow:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; + opacity: 0; + background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); + background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); + /* W3C */ + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform opacity; + transition-property: transform opacity; +} + +.float-shadow:hover { + -webkit-transform: translateY(-5px); + -ms-transform: translateY(-5px); + transform: translateY(-5px); + /* move the element up by 5px */ +} + +.float-shadow:hover:before { + opacity: 1; + -webkit-transform: translateY(5px); + -ms-transform: translateY(5px); + transform: translateY(5px); + /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ +} + .hover-shadow { display: inline-block; position: relative; @@ -1247,11 +1192,6 @@ transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hover-shadow:before { @@ -1310,16 +1250,9 @@ animation-direction: alternate; } -/* Shadow Radial */ - .shadow-radial { display: inline-block; position: relative; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .shadow-radial:before, @@ -1359,16 +1292,9 @@ /* SPEECH BUBBLES */ -/* Bubble Top */ - .bubble-top { display: inline-block; position: relative; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-top:before { @@ -1391,16 +1317,9 @@ top: -10px; } -/* Bubble Right */ - .bubble-right { display: inline-block; position: relative; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-right:before { @@ -1424,16 +1343,9 @@ right: -10px; } -/* Bubble Bottom */ - .bubble-bottom { display: inline-block; position: relative; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-bottom:before { @@ -1457,16 +1369,9 @@ bottom: -10px; } -/* Bubble Left */ - .bubble-left { display: inline-block; position: relative; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-left:before { @@ -1490,8 +1395,6 @@ left: -10px; } -/* Bubble Float Top */ - .bubble-float-top { display: inline-block; position: relative; @@ -1499,11 +1402,6 @@ transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-float-top:before { @@ -1533,8 +1431,6 @@ top: -10px; } -/* Bubble Float Right */ - .bubble-float-right { display: inline-block; position: relative; @@ -1542,11 +1438,6 @@ transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-float-right:before { @@ -1576,8 +1467,6 @@ right: -10px; } -/* Bubble Float Bottom */ - .bubble-float-bottom { display: inline-block; position: relative; @@ -1585,11 +1474,6 @@ transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-float-bottom:before { @@ -1619,8 +1503,6 @@ bottom: -10px; } -/* Bubble Float Left */ - .bubble-float-left { display: inline-block; position: relative; @@ -1628,11 +1510,6 @@ transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: transform; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .bubble-float-left:before { @@ -1664,16 +1541,9 @@ /* CURLS */ -/* Curl Top Left */ - .curl-top-left { display: inline-block; position: relative; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .curl-top-left:before { @@ -1703,16 +1573,9 @@ height: 25px; } -/* Curl Top Right */ - .curl-top-right { display: inline-block; position: relative; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .curl-top-right:before { @@ -1739,16 +1602,9 @@ height: 25px; } -/* Curl Bottom Right */ - .curl-bottom-right { display: inline-block; position: relative; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .curl-bottom-right:before { @@ -1775,16 +1631,9 @@ height: 25px; } -/* Curl Bottom Left */ - .curl-bottom-left { display: inline-block; position: relative; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .curl-bottom-left:before { diff --git a/scss/hover.scss b/scss/hover.scss index fdfb11b..cbc6186 100644 --- a/scss/hover.scss +++ b/scss/hover.scss @@ -11,1332 +11,236 @@ * Hover.css Copyright Ian Lunn 2014. */ +@import "hover/variables"; +@import "hover/hacks"; +@import "hover/button"; +@import "hover/grow"; +@import "hover/shrink"; +@import "hover/pulse"; +@import "hover/pulse-grow"; +@import "hover/pulse-shrink"; +@import "hover/push"; +@import "hover/pop"; +@import "hover/rotate"; +@import "hover/grow-rotate"; +@import "hover/float"; +@import "hover/sink"; +@import "hover/hover"; +@import "hover/hang"; +@import "hover/skew"; +@import "hover/skew-forward"; +@import "hover/wobble-vertical"; +@import "hover/wobble-horizontal"; +@import "hover/wobble-top"; +@import "hover/wobble-bottom"; +@import "hover/border-fade"; +@import "hover/hollow"; +@import "hover/trim"; +@import "hover/outline-outward"; +@import "hover/outline-inward"; +@import "hover/round-corners"; +@import "hover/glow"; +@import "hover/box-shadow-outset"; +@import "hover/box-shadow-inset"; +@import "hover/float-shadow"; +@import "hover/hover-shadow"; +@import "hover/shadow-radial"; +@import "hover/bubble-top"; +@import "hover/bubble-right"; +@import "hover/bubble-bottom"; +@import "hover/bubble-left"; +@import "hover/bubble-float-top"; +@import "hover/bubble-float-right"; +@import "hover/bubble-float-bottom"; +@import "hover/bubble-float-left"; +@import "hover/curl-top-left"; +@import "hover/curl-top-right"; +@import "hover/curl-bottom-right"; +@import "hover/curl-bottom-left"; -// Default options -$defaultDuration: .3s; -$primaryColour: #ececec; -$secondaryColour: #666; -$shadowColour: rgba(0, 0, 0, .6); - - - -// As is often the case, some devices/browsers need additional code to get CSS to work -// in the most desired way. These mixins are used to quickly drop in hacks for each element -@mixin hideTapHighlightColor() { - //Prevent highlight colour when element is tapped - -webkit-tap-highlight-color: rgba(0,0,0,0); -} - -@mixin hardwareAccel() { - //Improve performance on mobile/tablet devices - transform: translateZ(0); -} - -@mixin improveAntiAlias() { - //Improve aliasing on mobile/tablet devices - box-shadow: 0 0 1px rgba(0, 0, 0, 0); -} - - - -/* Default styles for the demo buttons */ +/* BASE BUTTON */ .button { - margin: .4em; - padding: 1em; - cursor: pointer; - background: $primaryColour; - text-decoration: none; - color: $secondaryColour; + @include button(); } - /* 2D TRANSITIONS */ -/* Grow */ .grow { - display: inline-block; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - transform: scale(1.1); - } + @include grow(); } - -/* Shrink */ .shrink { - display: inline-block; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - transform: scale(.9); - } -} - - -/* Pulse */ -@keyframes pulse { - 25% { - transform: scale(1.1); - } - - 75% { - transform: scale(.9); - } + @include shrink(); } .pulse { - display: inline-block; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - animation-name: pulse; - animation-duration: 1s; - animation-timing-function: linear; - animation-iteration-count: infinite; - } + @include pulse(); } - -/* Pulse Grow */ -@keyframes pulse-grow { - to { - transform: scale(1.1); - } +.pulse-grow{ + @include pulse-grow(); } -.pulse-grow { - display: inline-block; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - animation-name: pulse-grow; - animation-duration: $defaultDuration; - animation-timing-function: linear; - animation-iteration-count: infinite; - animation-direction: alternate; - } +.pulse-shrink{ + @include pulse-shrink(); } - -/* Pulse Shrink */ -@keyframes pulse-shrink { - to { - transform: scale(.9); - } +.push{ + @include push(); } -.pulse-shrink { - display: inline-block; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - animation-name: pulse-shrink; - animation-duration: $defaultDuration; - animation-timing-function: linear; - animation-iteration-count: infinite; - animation-direction: alternate; - } +.pop{ + @include pop(); } - -/* Push */ -@keyframes push { - 50% { - transform: scale(.8); - } - - 100% { - transform: scale(1); - } +.rotate{ + @include rotate(); } -.push { - display: inline-block; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - animation-name: push; - animation-duration: $defaultDuration; - animation-timing-function: linear; - animation-iteration-count: 1; - } +.grow-rotate{ + @include grow-rotate(); } - -/* Pop */ -@keyframes pop { - 50% { - transform: scale(1.2); - } - - 100% { - transform: scale(1); - } +.float{ + @include float(); } -.pop { - display: inline-block; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - animation-name: pop; - animation-duration: $defaultDuration; - animation-timing-function: linear; - animation-iteration-count: 1; - } +.sink{ + @include sink(); } - -/* Rotate */ -.rotate { - display: inline-block; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - transform: rotate(4deg); - } +.hover{ + @include hover(); } - -/* Grow Rotate */ -.grow-rotate { - display: inline-block; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - transform: scale(1.1) rotate(4deg); - } +.hang{ + @include hang(); } - -/* Float */ -.float { - display: inline-block; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - transform: translateY(-5px); - } +.skew{ + @include skew(); } - -/* Sink */ -.sink { - display: inline-block; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - transform: translateY(5px); - } +.skew-forward{ + @include skew-forward(); } - -/* Hover */ -@keyframes hover { - 50% { - transform: translateY(-3px); - } - - 100% { - transform: translateY(-6px); - } +.wobble-vertical{ + @include wobble-vertical(); } -.hover { - display: inline-block; - transition-duration: .5s; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - transform: translateY(-6px); - animation-name: hover; - animation-duration: 1.5s; - animation-delay: $defaultDuration; - animation-timing-function: linear; - animation-iteration-count: infinite; - animation-direction: alternate; - } +.wobble-horizontal{ + @include wobble-horizontal(); } - -/* Hang */ -@keyframes hang { - 50% { - transform: translateY(3px); - } - - 100% { - transform: translateY(6px); - } +.wobble-top{ + @include wobble-top(); } -.hang { - display: inline-block; - transition-duration: .5s; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - transform: translateY(6px); - animation-name: hang; - animation-duration: 1.5s; - animation-delay: $defaultDuration; - animation-timing-function: linear; - animation-iteration-count: infinite; - animation-direction: alternate; - } +.wobble-bottom{ + @include wobble-bottom(); } - -/* Skew */ -.skew { - display: inline-block; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - transform: skew(-10deg); - } -} - - -/* Skew Forward */ -.skew-forward { - display: inline-block; - transition-duration: $defaultDuration; - transition-property: transform; - transform-origin: 0 100%; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - transform: skew(-10deg); - } -} - - -/* Wobble Vertical */ -@keyframes wobble-vertical { - 16.65% { - transform: translateY(8px); - } - - 33.3% { - transform: translateY(-6px); - } - - 49.95% { - transform: translateY(4px); - } - - 66.6% { - transform: translateY(-2px); - } - - 83.25% { - transform: translateY(1px); - } - - 100% { - transform: translateY(0); - } -} - -.wobble-vertical { - display: inline-block; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - animation-name: wobble-vertical; - animation-duration: 1s; - animation-timing-function: ease-in-out; - animation-iteration-count: 1; - } -} - - -/* Wobble Horizontal */ -@keyframes wobble-horizontal { - 16.65% { - transform: translateX(8px); - } - - 33.3% { - transform: translateX(-6px); - } - - 49.95% { - transform: translateX(4px); - } - - 66.6% { - transform: translateX(-2px); - } - - 83.25% { - transform: translateX(1px); - } - - 100% { - transform: translateX(0); - } -} - -.wobble-horizontal { - display: inline-block; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - animation-name: wobble-horizontal; - animation-duration: 1s; - animation-timing-function: ease-in-out; - animation-iteration-count: 1; - } -} - - -/* Wobble Top */ -@keyframes wobble-top { - 16.65% { - transform: skew(-12deg); - } - - 33.3% { - transform: skew(10deg); - } - - 49.95% { - transform: skew(-6deg); - } - - 66.6% { - transform: skew(4deg); - } - - 83.25% { - transform: skew(-2deg); - } - - 100% { - transform: skew(0); - } -} - -.wobble-top { - display: inline-block; - transform-origin: 0 100%; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - animation-name: wobble-top; - animation-duration: 1s; - animation-timing-function: ease-in-out; - animation-iteration-count: 1; - } -} - - -/* Wobble Bottom */ -@keyframes wobble-bottom { - 16.65% { - transform: skew(-12deg); - } - - 33.3% { - transform: skew(10deg); - } - - 49.95% { - transform: skew(-6deg); - } - - 66.6% { - transform: skew(4deg); - } - - 83.25% { - transform: skew(-2deg); - } - - 100% { - transform: skew(0); - } -} - -.wobble-bottom { - display: inline-block; - transform-origin: 100% 0; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - animation-name: wobble-bottom; - animation-duration: 1s; - animation-timing-function: ease-in-out; - animation-iteration-count: 1; - } -} - - - - /* BORDER TRANSITIONS */ -/* Border Fade */ -.border-fade { - display: inline-block; - $borderWidth: 4px; - - transition-duration: $defaultDuration; - transition-property: box-shadow; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - box-shadow: - inset 0 0 0 $borderWidth $primaryColour, - 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ - - &:hover { - box-shadow: - inset 0 0 0 $borderWidth $secondaryColour, - 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ - } +.border-fade{ + @include border-fade(); } - -/* Hollow */ -.hollow { - display: inline-block; - $borderWidth: 4px; - - transition-duration: $defaultDuration; - transition-property: background; - - transform: translateZ(0); /* Hack to improve performance on mobile/tablet devices */ - box-shadow: - inset 0 0 0 $borderWidth $primaryColour, - 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ - - &:hover { - background: none; - } +.hollow{ + @include hollow(); } - -/* Trim */ -.trim { - display: inline-block; - $outerBorderWidth: 4px; - $innerBorderWidth: 4px; - - position: relative; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - content: ''; - position: absolute; - border: white solid $innerBorderWidth; - top: $outerBorderWidth; - left: $outerBorderWidth; - right: $outerBorderWidth; - bottom: $outerBorderWidth; - opacity: 0; - transition-duration: $defaultDuration; - transition-property: opacity; - } - - &:hover:before { - opacity: 1; - } +.trim{ + @include trim(); } - -/* Outline Outward */ -.outline-outward { - display: inline-block; - $outerBorderWidth: 4px; - $innerBorderWidth: 4px; - - position: relative; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - content: ''; - position: absolute; - border: $primaryColour solid $outerBorderWidth; - top: 0; - right: 0; - bottom: 0; - left: 0; - transition-duration: .3s; - transition-property: top right bottom left; - } - - &:hover:before { - top: -($outerBorderWidth + $innerBorderWidth); - right: -($outerBorderWidth + $innerBorderWidth); - bottom: -($outerBorderWidth + $innerBorderWidth); - left: -($outerBorderWidth + $innerBorderWidth); - } +.outline-outward{ + @include outline-outward(); } - -/* Outline Inward */ -.outline-inward { - display: inline-block; - $outerBorderWidth: 4px; - $innerBorderWidth: 4px; - - position: relative; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - content: ''; - position: absolute; - border: $primaryColour solid $outerBorderWidth; - top: -($outerBorderWidth + $innerBorderWidth) * 2; - right: -($outerBorderWidth + $innerBorderWidth) * 2; - bottom: -($outerBorderWidth + $innerBorderWidth) * 2; - left: -($outerBorderWidth + $innerBorderWidth) * 2; - opacity: 0; - transition-duration: .3s; - transition-property: top right bottom left; - } - - &:hover:before { - top: -($outerBorderWidth + $innerBorderWidth); - right: -($outerBorderWidth + $innerBorderWidth); - bottom: -($outerBorderWidth + $innerBorderWidth); - left: -($outerBorderWidth + $innerBorderWidth); - opacity: 1; - } +.outline-inward{ + @include outline-inward(); } - -/* Round Corners */ -.round-corners { - display: inline-block; - transition-duration: $defaultDuration; - transition-property: border-radius; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - border-radius: 1em; - } +.round-corners{ + @include round-corners(); } - - - /* SHADOW/GLOW TRANSITIONS */ -/* Glow */ -.glow { - display: inline-block; - transition-duration: $defaultDuration; - transition-property: box-shadow; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - box-shadow: 0 0 8px $shadowColour; - } +.glow{ + @include glow(); } - -/* Box Shadow Outset */ -.box-shadow-outset { - display: inline-block; - transition-duration: $defaultDuration; - transition-property: box-shadow; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:hover { - box-shadow: 2px 2px 2px $shadowColour; - } +.box-shadow-outset{ + @include box-shadow-outset(); } - -/* Box Shadow Inset */ -.box-shadow-inset { - display: inline-block; - transition-duration: $defaultDuration; - transition-property: box-shadow; - - box-shadow: inset 0 0 0 $shadowColour, - 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ - - @include hideTapHighlightColor(); - @include hardwareAccel(); - - &:hover { - box-shadow: inset 2px 2px 2px $shadowColour, - 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ - } +.box-shadow-inset{ + @include box-shadow-inset(); } - -/* Float Shadow */ -.float-shadow { - display: inline-block; - position: relative; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - z-index: -1; - content: ''; - top: 100%; - left: 5%; - height: 10px; - width: 90%; - opacity: 0; - background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */ - transition-duration: $defaultDuration; - transition-property: transform opacity; - } - - &:hover { - transform: translateY(-5px); /* move the element up by 5px */ - - &:before { - opacity: 1; - transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ - } - } +.float-shadow{ + @include float-shadow(); } - -/* Hover Shadow */ -@keyframes hover { - 50% { - transform: translateY(-3px); - } - - 100% { - transform: translateY(-6px); - } +.hover-shadow{ + @include hover-shadow(); } -@keyframes hover-shadow { - 0% { - transform: translateY(6px); - opacity: .4; - } - - 50% { - transform: translateY(3px); - opacity: 1; - } - - - 100% { - transform: translateY(6px); - opacity: .4; - } +.shadow-radial{ + @include shadow-radial(); } -.hover-shadow { - display: inline-block; - position: relative; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - z-index: -1; - content: ''; - top: 100%; - left: 5%; - height: 10px; - width: 90%; - opacity: 0; - background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */ - transition-duration: $defaultDuration; - transition-property: transform opacity; - } - - &:hover { - transform: translateY(-6px); - animation-name: hover; - animation-duration: 1.5s; - animation-delay: $defaultDuration; - animation-timing-function: linear; - animation-iteration-count: infinite; - animation-direction: alternate; - - &:before { - opacity: .4; - transform: translateY(6px); - animation-name: hover-shadow; - animation-duration: 1.5s; - animation-delay: .3s; - animation-timing-function: linear; - animation-iteration-count: infinite; - animation-direction: alternate; - } - } -} - - -/* Shadow Radial */ -.shadow-radial { - display: inline-block; - position: relative; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before, - &:after { - pointer-events: none; - position: absolute; - content: ''; - left: 0; - width: 100%; - box-sizing: border-box; - background-repeat: no-repeat; - height: 5px; - opacity: 0; - transition-duration: $defaultDuration; - transition-property: opacity; - } - - &:before { - bottom: 100%; - background: radial-gradient(ellipse at 50% 150%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%); - } - - &:after { - top: 100%; - background: radial-gradient(ellipse at 50% -50%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%); - } - - &:hover:before, - &:hover:after { - opacity: 1; - } -} - - - /* SPEECH BUBBLES */ -$tipWidth: 10px; //the width of the speech bubble tip -$tipHeight: 10px; //the height of the speech bubble tip -$tipColour: $primaryColour; - -/* Bubble Top */ -.bubble-top { - display: inline-block; - position: relative; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - z-index: -1; - content: ''; - border-style: solid; - transition-duration: $defaultDuration; - left: calc(50% - #{$tipWidth}); - border-width: 0 $tipWidth $tipHeight $tipWidth; - border-color: transparent transparent $tipColour transparent; - transition-property: top; - } - - &:hover:before { - top: -($tipHeight); - } +.bubble-top{ + @include bubble-top(); } - -/* Bubble Right */ -.bubble-right { - display: inline-block; - position: relative; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - z-index: -1; - content: ''; - border-style: solid; - transition-duration: $defaultDuration; - transition-property: right; - top: calc(50% - #{$tipHeight}); - right: 0; - border-width: $tipHeight 0 $tipHeight $tipWidth; - border-color: transparent transparent transparent $tipColour ; - } - - &:hover:before { - right: -($tipWidth); - } +.bubble-right{ + @include bubble-right(); } - -/* Bubble Bottom */ -.bubble-bottom { - display: inline-block; - position: relative; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - z-index: -1; - content: ''; - border-style: solid; - transition-duration: $defaultDuration; - transition-property: bottom; - left: calc(50% - #{$tipWidth}); - bottom: 0; - border-width: $tipHeight $tipWidth 0 $tipWidth; - border-color: $tipColour transparent transparent transparent; - } - - &:hover:before { - bottom: -($tipHeight); - } +.bubble-bottom{ + @include bubble-bottom(); } - -/* Bubble Left */ -.bubble-left { - display: inline-block; - position: relative; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - z-index: -1; - content: ''; - border-style: solid; - transition-duration: $defaultDuration; - transition-property: left; - top: calc(50% - #{$tipHeight}); - left: 0; - border-width: $tipHeight $tipWidth $tipHeight 0; - border-color: transparent $tipColour transparent transparent; - } - - &:hover:before { - left: -($tipWidth); - } +.bubble-left{ + @include bubble-left(); } - -/* Bubble Float Top */ -.bubble-float-top { - display: inline-block; - position: relative; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - z-index: -1; - content: ''; - left: calc(50% - #{$tipWidth}); - top: 0; - border-style: solid; - border-width: 0 $tipWidth $tipHeight $tipWidth; - border-color: transparent transparent $tipColour transparent; - transition-duration: $defaultDuration; - transition-property: top; - } - - - &:hover { - transform: translateY(5px) translateZ(0); - } - - &:hover:before { - top: -($tipHeight); - } +.bubble-float-top{ + @include bubble-float-top(); } -/* Bubble Float Right */ -.bubble-float-right { - display: inline-block; - position: relative; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - z-index: -1; - top: calc(50% - #{$tipHeight}); - right: 0; - content: ''; - border-style: solid; - border-width: $tipHeight 0 $tipHeight $tipWidth; - border-color: transparent transparent transparent $tipColour; - transition-duration: $defaultDuration; - transition-property: right; - } - - &:hover { - transform: translateX(-5px); - } - - &:hover:before { - right: -($tipWidth); - } +.bubble-float-right{ + @include bubble-float-right(); } - -/* Bubble Float Bottom */ -.bubble-float-bottom { - display: inline-block; - position: relative; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - z-index: -1; - content: ''; - left: calc(50% - #{$tipWidth}); - bottom: 0; - border-style: solid; - border-width: $tipHeight $tipWidth 0 $tipWidth; - border-color: $tipColour transparent transparent transparent; - transition-duration: $defaultDuration; - transition-property: bottom; - } - - &:hover { - transform: translateY(-5px) translateZ(0); - } - - &:hover:before { - bottom: -($tipHeight); - } +.bubble-float-bottom{ + @include bubble-float-bottom(); } - -/* Bubble Float Left */ -.bubble-float-left { - display: inline-block; - position: relative; - transition-duration: $defaultDuration; - transition-property: transform; - - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - z-index: -1; - content: ''; - top: calc(50% - #{$tipHeight}); - left: 0; - border-style: solid; - border-width: $tipHeight $tipWidth $tipHeight 0; - border-color: transparent $tipColour transparent transparent; - transition-duration: $defaultDuration; - transition-property: left; - } - - &:hover { - transform: translateX(5px); - } - - &:hover:before { - left: -($tipWidth); - } +.bubble-float-left{ + @include bubble-float-left(); } - - /* CURLS */ -// Curl dimensions -$curlWidth: 25px; -$curlHeight: 25px; - -// Curl colours -$revealAreaColour: white; // reveal area behind the curl -$curlLineColour: #aaa; // crease line -$curlTransitionColour: #ccc; // colour transitioning from crease line to final colour -$curlLastColour: white; // final colour of the back of the curl - - -/* Curl Top Left */ -.curl-top-left { - display: inline-block; - position: relative; - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - content: ''; - height: 0; - width: 0; - top: 0; - left: 0; - background: $revealAreaColour; /* IE9 */ - background: linear-gradient( - 135deg, - $revealAreaColour 45%, - $curlLineColour 50%, - $curlTransitionColour 56%, - $curlLastColour 80% - ); - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ - - z-index: 1000; - box-shadow: 1px 1px 1px rgba(0, 0, 0, .4); - transition-duration: $defaultDuration; - transition-property: width height; - } - - &:hover:before { - width: $curlWidth; - height: $curlHeight; - } +.curl-top-left{ + @include curl-top-left(); } - -/* Curl Top Right */ -.curl-top-right { - display: inline-block; - position: relative; - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - content: ''; - height: 0; - width: 0; - top: 0; - right: 0; - background: $revealAreaColour; /* IE9 */ - background: linear-gradient( - 225deg, - $revealAreaColour 45%, - $curlLineColour 50%, - $curlTransitionColour 56%, - $curlLastColour 80% - ); - box-shadow: -1px 1px 1px rgba(0, 0, 0, .4); - transition-duration: $defaultDuration; - transition-property: width height; - } - - &:hover:before { - width: $curlWidth; - height: $curlHeight; - } +.curl-top-right{ + @include curl-top-right(); } - -/* Curl Bottom Right */ -.curl-bottom-right { - display: inline-block; - position: relative; - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - content: ''; - height: 0; - width: 0; - bottom: 0; - right: 0; - background: $revealAreaColour; /* IE9 */ - background: linear-gradient( - 315deg, - $revealAreaColour 45%, - $curlLineColour 50%, - $curlTransitionColour 56%, - $curlLastColour 80% - ); - box-shadow: -1px -1px 1px rgba(0, 0, 0, .4); - transition-duration: $defaultDuration; - transition-property: width height; - } - - &:hover:before { - width: $curlWidth; - height: $curlHeight; - } +.curl-bottom-right{ + @include curl-bottom-right(); } - - -/* Curl Bottom Left */ -.curl-bottom-left { - display: inline-block; - position: relative; - @include hideTapHighlightColor(); - @include hardwareAccel(); - @include improveAntiAlias(); - - &:before { - pointer-events: none; - position: absolute; - content: ''; - height: 0; - width: 0; - bottom: 0; - left: 0; - background: $revealAreaColour; /* IE9 */ - background: linear-gradient( - 45deg, - $revealAreaColour 45%, - $curlLineColour 50%, - $curlTransitionColour 56%, - $curlLastColour 80% - ); - box-shadow: 1px -1px 1px rgba(0, 0, 0, .4); - transition-duration: $defaultDuration; - transition-property: width height; - } - - &:hover:before { - width: $curlWidth; - height: $curlHeight; - } +.curl-bottom-left{ + @include curl-bottom-left(); } \ No newline at end of file diff --git a/scss/hover/_border-fade.scss b/scss/hover/_border-fade.scss new file mode 100644 index 0000000..04c0936 --- /dev/null +++ b/scss/hover/_border-fade.scss @@ -0,0 +1,20 @@ +/* Border Fade */ +@mixin border-fade { + display: inline-block; + $borderWidth: 4px; + + transition-duration: $defaultDuration; + transition-property: box-shadow; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + box-shadow: + inset 0 0 0 $borderWidth $primaryColour, + 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ + + &:hover { + box-shadow: + inset 0 0 0 $borderWidth $secondaryColour, + 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ + } +} \ No newline at end of file diff --git a/scss/hover/_box-shadow-inset.scss b/scss/hover/_box-shadow-inset.scss new file mode 100644 index 0000000..9fe97da --- /dev/null +++ b/scss/hover/_box-shadow-inset.scss @@ -0,0 +1,17 @@ +/* Box Shadow Inset */ +@mixin box-shadow-inset { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: box-shadow; + + box-shadow: inset 0 0 0 $shadowColour, + 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ + + @include hideTapHighlightColor(); + @include hardwareAccel(); + + &:hover { + box-shadow: inset 2px 2px 2px $shadowColour, + 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ + } +} \ No newline at end of file diff --git a/scss/hover/_box-shadow-outset.scss b/scss/hover/_box-shadow-outset.scss new file mode 100644 index 0000000..1ba3301 --- /dev/null +++ b/scss/hover/_box-shadow-outset.scss @@ -0,0 +1,12 @@ +/* Box Shadow Outset */ +@mixin box-shadow-outset { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: box-shadow; + + @extend %hacks; + + &:hover { + box-shadow: 2px 2px 2px $shadowColour; + } +} \ No newline at end of file diff --git a/scss/hover/_bubble-bottom.scss b/scss/hover/_bubble-bottom.scss new file mode 100644 index 0000000..fd14334 --- /dev/null +++ b/scss/hover/_bubble-bottom.scss @@ -0,0 +1,25 @@ +/* Bubble Bottom */ +@mixin bubble-bottom { + display: inline-block; + position: relative; + + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + transition-duration: $defaultDuration; + transition-property: bottom; + left: calc(50% - #{$tipWidth}); + bottom: 0; + border-width: $tipHeight $tipWidth 0 $tipWidth; + border-color: $tipColour transparent transparent transparent; + } + + &:hover:before { + bottom: -($tipHeight); + } +} \ No newline at end of file diff --git a/scss/hover/_bubble-float-bottom.scss b/scss/hover/_bubble-float-bottom.scss new file mode 100644 index 0000000..4306972 --- /dev/null +++ b/scss/hover/_bubble-float-bottom.scss @@ -0,0 +1,31 @@ +/* Bubble Float Bottom */ +@mixin bubble-float-bottom { + display: inline-block; + position: relative; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + left: calc(50% - #{$tipWidth}); + bottom: 0; + border-style: solid; + border-width: $tipHeight $tipWidth 0 $tipWidth; + border-color: $tipColour transparent transparent transparent; + transition-duration: $defaultDuration; + transition-property: bottom; + } + + &:hover { + transform: translateY(-5px) translateZ(0); + } + + &:hover:before { + bottom: -($tipHeight); + } +} \ No newline at end of file diff --git a/scss/hover/_bubble-float-left.scss b/scss/hover/_bubble-float-left.scss new file mode 100644 index 0000000..4e58d9c --- /dev/null +++ b/scss/hover/_bubble-float-left.scss @@ -0,0 +1,31 @@ +/* Bubble Float Left */ +@mixin bubble-float-left { + display: inline-block; + position: relative; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: calc(50% - #{$tipHeight}); + left: 0; + border-style: solid; + border-width: $tipHeight $tipWidth $tipHeight 0; + border-color: transparent $tipColour transparent transparent; + transition-duration: $defaultDuration; + transition-property: left; + } + + &:hover { + transform: translateX(5px); + } + + &:hover:before { + left: -($tipWidth); + } +} \ No newline at end of file diff --git a/scss/hover/_bubble-float-right.scss b/scss/hover/_bubble-float-right.scss new file mode 100644 index 0000000..be2a4ea --- /dev/null +++ b/scss/hover/_bubble-float-right.scss @@ -0,0 +1,31 @@ +/* Bubble Float Right */ +@mixin bubble-float-right { + display: inline-block; + position: relative; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + top: calc(50% - #{$tipHeight}); + right: 0; + content: ''; + border-style: solid; + border-width: $tipHeight 0 $tipHeight $tipWidth; + border-color: transparent transparent transparent $tipColour; + transition-duration: $defaultDuration; + transition-property: right; + } + + &:hover { + transform: translateX(-5px); + } + + &:hover:before { + right: -($tipWidth); + } +} \ No newline at end of file diff --git a/scss/hover/_bubble-float-top.scss b/scss/hover/_bubble-float-top.scss new file mode 100644 index 0000000..b264f82 --- /dev/null +++ b/scss/hover/_bubble-float-top.scss @@ -0,0 +1,32 @@ +/* Bubble Float Top */ +@mixin bubble-float-top { + display: inline-block; + position: relative; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + left: calc(50% - #{$tipWidth}); + top: 0; + border-style: solid; + border-width: 0 $tipWidth $tipHeight $tipWidth; + border-color: transparent transparent $tipColour transparent; + transition-duration: $defaultDuration; + transition-property: top; + } + + + &:hover { + transform: translateY(5px) translateZ(0); + } + + &:hover:before { + top: -($tipHeight); + } +} \ No newline at end of file diff --git a/scss/hover/_bubble-left.scss b/scss/hover/_bubble-left.scss new file mode 100644 index 0000000..cb4247e --- /dev/null +++ b/scss/hover/_bubble-left.scss @@ -0,0 +1,25 @@ +/* Bubble Left */ +@mixin bubble-left { + display: inline-block; + position: relative; + + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + transition-duration: $defaultDuration; + transition-property: left; + top: calc(50% - #{$tipHeight}); + left: 0; + border-width: $tipHeight $tipWidth $tipHeight 0; + border-color: transparent $tipColour transparent transparent; + } + + &:hover:before { + left: -($tipWidth); + } +} \ No newline at end of file diff --git a/scss/hover/_bubble-right.scss b/scss/hover/_bubble-right.scss new file mode 100644 index 0000000..768cc56 --- /dev/null +++ b/scss/hover/_bubble-right.scss @@ -0,0 +1,25 @@ +/* Bubble Right */ +@mixin bubble-right { + display: inline-block; + position: relative; + + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + transition-duration: $defaultDuration; + transition-property: right; + top: calc(50% - #{$tipHeight}); + right: 0; + border-width: $tipHeight 0 $tipHeight $tipWidth; + border-color: transparent transparent transparent $tipColour ; + } + + &:hover:before { + right: -($tipWidth); + } +} \ No newline at end of file diff --git a/scss/hover/_bubble-top.scss b/scss/hover/_bubble-top.scss new file mode 100644 index 0000000..745952e --- /dev/null +++ b/scss/hover/_bubble-top.scss @@ -0,0 +1,24 @@ +/* Bubble Top */ +@mixin bubble-top { + display: inline-block; + position: relative; + + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + transition-duration: $defaultDuration; + left: calc(50% - #{$tipWidth}); + border-width: 0 $tipWidth $tipHeight $tipWidth; + border-color: transparent transparent $tipColour transparent; + transition-property: top; + } + + &:hover:before { + top: -($tipHeight); + } +} \ No newline at end of file diff --git a/scss/hover/_button.scss b/scss/hover/_button.scss new file mode 100644 index 0000000..3fea65e --- /dev/null +++ b/scss/hover/_button.scss @@ -0,0 +1,9 @@ +/* Default styles for the demo buttons */ +@mixin button { + margin: .4em; + padding: 1em; + cursor: pointer; + background: $primaryColour; + text-decoration: none; + color: $secondaryColour; +} \ No newline at end of file diff --git a/scss/hover/_curl-bottom-left.scss b/scss/hover/_curl-bottom-left.scss new file mode 100644 index 0000000..dec4dc2 --- /dev/null +++ b/scss/hover/_curl-bottom-left.scss @@ -0,0 +1,32 @@ +/* Curl Bottom Left */ +@mixin curl-bottom-left { + display: inline-block; + position: relative; + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + bottom: 0; + left: 0; + background: $revealAreaColour; /* IE9 */ + background: linear-gradient( + 45deg, + $revealAreaColour 45%, + $curlLineColour 50%, + $curlTransitionColour 56%, + $curlLastColour 80% + ); + box-shadow: 1px -1px 1px rgba(0, 0, 0, .4); + transition-duration: $defaultDuration; + transition-property: width height; + } + + &:hover:before { + width: $curlWidth; + height: $curlHeight; + } +} \ No newline at end of file diff --git a/scss/hover/_curl-bottom-right.scss b/scss/hover/_curl-bottom-right.scss new file mode 100644 index 0000000..15c43f5 --- /dev/null +++ b/scss/hover/_curl-bottom-right.scss @@ -0,0 +1,32 @@ +/* Curl Bottom Right */ +@mixin curl-bottom-right { + display: inline-block; + position: relative; + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + bottom: 0; + right: 0; + background: $revealAreaColour; /* IE9 */ + background: linear-gradient( + 315deg, + $revealAreaColour 45%, + $curlLineColour 50%, + $curlTransitionColour 56%, + $curlLastColour 80% + ); + box-shadow: -1px -1px 1px rgba(0, 0, 0, .4); + transition-duration: $defaultDuration; + transition-property: width height; + } + + &:hover:before { + width: $curlWidth; + height: $curlHeight; + } +} \ No newline at end of file diff --git a/scss/hover/_curl-top-left.scss b/scss/hover/_curl-top-left.scss new file mode 100644 index 0000000..3180d73 --- /dev/null +++ b/scss/hover/_curl-top-left.scss @@ -0,0 +1,35 @@ +/* Curl Top Left */ +@mixin curl-top-left { + display: inline-block; + position: relative; + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + top: 0; + left: 0; + background: $revealAreaColour; /* IE9 */ + background: linear-gradient( + 135deg, + $revealAreaColour 45%, + $curlLineColour 50%, + $curlTransitionColour 56%, + $curlLastColour 80% + ); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ + + z-index: 1000; + box-shadow: 1px 1px 1px rgba(0, 0, 0, .4); + transition-duration: $defaultDuration; + transition-property: width height; + } + + &:hover:before { + width: $curlWidth; + height: $curlHeight; + } +} \ No newline at end of file diff --git a/scss/hover/_curl-top-right.scss b/scss/hover/_curl-top-right.scss new file mode 100644 index 0000000..b7521bf --- /dev/null +++ b/scss/hover/_curl-top-right.scss @@ -0,0 +1,32 @@ +/* Curl Top Right */ +@mixin curl-top-right { + display: inline-block; + position: relative; + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + top: 0; + right: 0; + background: $revealAreaColour; /* IE9 */ + background: linear-gradient( + 225deg, + $revealAreaColour 45%, + $curlLineColour 50%, + $curlTransitionColour 56%, + $curlLastColour 80% + ); + box-shadow: -1px 1px 1px rgba(0, 0, 0, .4); + transition-duration: $defaultDuration; + transition-property: width height; + } + + &:hover:before { + width: $curlWidth; + height: $curlHeight; + } +} \ No newline at end of file diff --git a/scss/hover/_float-shadow.scss b/scss/hover/_float-shadow.scss new file mode 100644 index 0000000..22cb0c8 --- /dev/null +++ b/scss/hover/_float-shadow.scss @@ -0,0 +1,33 @@ +/* Float Shadow */ +@mixin float-shadow { + display: inline-block; + position: relative; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; + opacity: 0; + background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */ + transition-duration: $defaultDuration; + transition-property: transform opacity; + } + + &:hover { + transform: translateY(-5px); /* move the element up by 5px */ + + &:before { + opacity: 1; + transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ + } + } +} \ No newline at end of file diff --git a/scss/hover/_float.scss b/scss/hover/_float.scss new file mode 100644 index 0000000..25f4862 --- /dev/null +++ b/scss/hover/_float.scss @@ -0,0 +1,12 @@ +/* Float */ +@mixin float { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:hover { + transform: translateY(-5px); + } +} \ No newline at end of file diff --git a/scss/hover/_glow.scss b/scss/hover/_glow.scss new file mode 100644 index 0000000..5ccafef --- /dev/null +++ b/scss/hover/_glow.scss @@ -0,0 +1,12 @@ +/* Glow */ +@mixin glow { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: box-shadow; + + @extend %hacks; + + &:hover { + box-shadow: 0 0 8px $shadowColour; + } +} \ No newline at end of file diff --git a/scss/hover/_grow-rotate.scss b/scss/hover/_grow-rotate.scss new file mode 100644 index 0000000..7d70aaf --- /dev/null +++ b/scss/hover/_grow-rotate.scss @@ -0,0 +1,12 @@ +/* Grow Rotate */ +@mixin grow-rotate { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:hover { + transform: scale(1.1) rotate(4deg); + } +} \ No newline at end of file diff --git a/scss/hover/_grow.scss b/scss/hover/_grow.scss new file mode 100644 index 0000000..3b4983d --- /dev/null +++ b/scss/hover/_grow.scss @@ -0,0 +1,12 @@ +/* Grow */ +@mixin grow { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:hover { + transform: scale(1.1); + } +} \ No newline at end of file diff --git a/scss/hover/_hacks.scss b/scss/hover/_hacks.scss new file mode 100644 index 0000000..f0d2728 --- /dev/null +++ b/scss/hover/_hacks.scss @@ -0,0 +1,22 @@ +// As is often the case, some devices/browsers need additional code to get CSS to work +// in the most desired way. These mixins are used to quickly drop in hacks for each element +@mixin hideTapHighlightColor() { + //Prevent highlight colour when element is tapped + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +@mixin hardwareAccel() { + //Improve performance on mobile/tablet devices + transform: translateZ(0); +} + +@mixin improveAntiAlias() { + //Improve aliasing on mobile/tablet devices + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +%hacks{ + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); +} \ No newline at end of file diff --git a/scss/hover/_hang.scss b/scss/hover/_hang.scss new file mode 100644 index 0000000..607e68a --- /dev/null +++ b/scss/hover/_hang.scss @@ -0,0 +1,28 @@ +/* Hang */ +@keyframes hang { + 50% { + transform: translateY(3px); + } + + 100% { + transform: translateY(6px); + } +} + +@mixin hang { + display: inline-block; + transition-duration: .5s; + transition-property: transform; + + @extend %hacks; + + &:hover { + transform: translateY(6px); + animation-name: hang; + animation-duration: 1.5s; + animation-delay: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + } +} \ No newline at end of file diff --git a/scss/hover/_hollow.scss b/scss/hover/_hollow.scss new file mode 100644 index 0000000..d936436 --- /dev/null +++ b/scss/hover/_hollow.scss @@ -0,0 +1,17 @@ +/* Hollow */ +@mixin hollow { + display: inline-block; + $borderWidth: 4px; + + transition-duration: $defaultDuration; + transition-property: background; + + transform: translateZ(0); /* Hack to improve performance on mobile/tablet devices */ + box-shadow: + inset 0 0 0 $borderWidth $primaryColour, + 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ + + &:hover { + background: none; + } +} \ No newline at end of file diff --git a/scss/hover/_hover-shadow.scss b/scss/hover/_hover-shadow.scss new file mode 100644 index 0000000..0e629df --- /dev/null +++ b/scss/hover/_hover-shadow.scss @@ -0,0 +1,73 @@ +/* Hover Shadow */ +@keyframes hover { + 50% { + transform: translateY(-3px); + } + + 100% { + transform: translateY(-6px); + } +} + +@keyframes hover-shadow { + 0% { + transform: translateY(6px); + opacity: .4; + } + + 50% { + transform: translateY(3px); + opacity: 1; + } + + + 100% { + transform: translateY(6px); + opacity: .4; + } +} + +@mixin hover-shadow { + display: inline-block; + position: relative; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; + opacity: 0; + background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */ + transition-duration: $defaultDuration; + transition-property: transform opacity; + } + + &:hover { + transform: translateY(-6px); + animation-name: hover; + animation-duration: 1.5s; + animation-delay: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + + &:before { + opacity: .4; + transform: translateY(6px); + animation-name: hover-shadow; + animation-duration: 1.5s; + animation-delay: .3s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + } + } +} \ No newline at end of file diff --git a/scss/hover/_hover.scss b/scss/hover/_hover.scss new file mode 100644 index 0000000..631b52f --- /dev/null +++ b/scss/hover/_hover.scss @@ -0,0 +1,28 @@ +/* Hover */ +@keyframes hover { + 50% { + transform: translateY(-3px); + } + + 100% { + transform: translateY(-6px); + } +} + +@mixin hover { + display: inline-block; + transition-duration: .5s; + transition-property: transform; + + @extend %hacks; + + &:hover { + transform: translateY(-6px); + animation-name: hover; + animation-duration: 1.5s; + animation-delay: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + } +} \ No newline at end of file diff --git a/scss/hover/_outline-inward.scss b/scss/hover/_outline-inward.scss new file mode 100644 index 0000000..1bd4c4c --- /dev/null +++ b/scss/hover/_outline-inward.scss @@ -0,0 +1,31 @@ +/* Outline Inward */ +@mixin outline-inward { + display: inline-block; + $outerBorderWidth: 4px; + $innerBorderWidth: 4px; + + position: relative; + + @extend %hacks; + + &:before { + content: ''; + position: absolute; + border: $primaryColour solid $outerBorderWidth; + top: -($outerBorderWidth + $innerBorderWidth) * 2; + right: -($outerBorderWidth + $innerBorderWidth) * 2; + bottom: -($outerBorderWidth + $innerBorderWidth) * 2; + left: -($outerBorderWidth + $innerBorderWidth) * 2; + opacity: 0; + transition-duration: .3s; + transition-property: top right bottom left; + } + + &:hover:before { + top: -($outerBorderWidth + $innerBorderWidth); + right: -($outerBorderWidth + $innerBorderWidth); + bottom: -($outerBorderWidth + $innerBorderWidth); + left: -($outerBorderWidth + $innerBorderWidth); + opacity: 1; + } +} \ No newline at end of file diff --git a/scss/hover/_outline-outward.scss b/scss/hover/_outline-outward.scss new file mode 100644 index 0000000..f562b81 --- /dev/null +++ b/scss/hover/_outline-outward.scss @@ -0,0 +1,29 @@ +/* Outline Outward */ +@mixin outline-outward { + display: inline-block; + $outerBorderWidth: 4px; + $innerBorderWidth: 4px; + + position: relative; + + @extend %hacks; + + &:before { + content: ''; + position: absolute; + border: $primaryColour solid $outerBorderWidth; + top: 0; + right: 0; + bottom: 0; + left: 0; + transition-duration: .3s; + transition-property: top right bottom left; + } + + &:hover:before { + top: -($outerBorderWidth + $innerBorderWidth); + right: -($outerBorderWidth + $innerBorderWidth); + bottom: -($outerBorderWidth + $innerBorderWidth); + left: -($outerBorderWidth + $innerBorderWidth); + } +} \ No newline at end of file diff --git a/scss/hover/_pop.scss b/scss/hover/_pop.scss new file mode 100644 index 0000000..a204a5a --- /dev/null +++ b/scss/hover/_pop.scss @@ -0,0 +1,23 @@ +/* Pop */ +@keyframes pop { + 50% { + transform: scale(1.2); + } + + 100% { + transform: scale(1); + } +} + +@mixin pop { + display: inline-block; + + @extend %hacks; + + &:hover { + animation-name: pop; + animation-duration: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: 1; + } +} \ No newline at end of file diff --git a/scss/hover/_pulse-grow.scss b/scss/hover/_pulse-grow.scss new file mode 100644 index 0000000..87075c8 --- /dev/null +++ b/scss/hover/_pulse-grow.scss @@ -0,0 +1,20 @@ +/* Pulse Grow */ +@keyframes pulse-grow { + to { + transform: scale(1.1); + } +} + +@mixin pulse-grow { + display: inline-block; + + @extend %hacks; + + &:hover { + animation-name: pulse-grow; + animation-duration: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + } +} \ No newline at end of file diff --git a/scss/hover/_pulse-shrink.scss b/scss/hover/_pulse-shrink.scss new file mode 100644 index 0000000..9a6a4be --- /dev/null +++ b/scss/hover/_pulse-shrink.scss @@ -0,0 +1,20 @@ +/* Pulse Shrink */ +@keyframes pulse-shrink { + to { + transform: scale(.9); + } +} + +@mixin pulse-shrink { + display: inline-block; + + @extend %hacks; + + &:hover { + animation-name: pulse-shrink; + animation-duration: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + } +} \ No newline at end of file diff --git a/scss/hover/_pulse.scss b/scss/hover/_pulse.scss new file mode 100644 index 0000000..d68578d --- /dev/null +++ b/scss/hover/_pulse.scss @@ -0,0 +1,23 @@ +/* Pulse */ +@keyframes pulse { + 25% { + transform: scale(1.1); + } + + 75% { + transform: scale(.9); + } +} + +@mixin pulse { + display: inline-block; + + @extend %hacks; + + &:hover { + animation-name: pulse; + animation-duration: 1s; + animation-timing-function: linear; + animation-iteration-count: infinite; + } +} \ No newline at end of file diff --git a/scss/hover/_push.scss b/scss/hover/_push.scss new file mode 100644 index 0000000..3ea92ff --- /dev/null +++ b/scss/hover/_push.scss @@ -0,0 +1,23 @@ +/* Push */ +@keyframes push { + 50% { + transform: scale(.8); + } + + 100% { + transform: scale(1); + } +} + +@mixin push { + display: inline-block; + + @extend %hacks; + + &:hover { + animation-name: push; + animation-duration: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: 1; + } +} \ No newline at end of file diff --git a/scss/hover/_rotate.scss b/scss/hover/_rotate.scss new file mode 100644 index 0000000..9e92333 --- /dev/null +++ b/scss/hover/_rotate.scss @@ -0,0 +1,12 @@ +/* Rotate */ +@mixin rotate { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:hover { + transform: rotate(4deg); + } +} \ No newline at end of file diff --git a/scss/hover/_round-corners.scss b/scss/hover/_round-corners.scss new file mode 100644 index 0000000..13aeef7 --- /dev/null +++ b/scss/hover/_round-corners.scss @@ -0,0 +1,12 @@ +/* Round Corners */ +@mixin round-corners { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: border-radius; + + @extend %hacks; + + &:hover { + border-radius: 1em; + } +} \ No newline at end of file diff --git a/scss/hover/_shadow-radial.scss b/scss/hover/_shadow-radial.scss new file mode 100644 index 0000000..4ebe088 --- /dev/null +++ b/scss/hover/_shadow-radial.scss @@ -0,0 +1,37 @@ +/* Shadow Radial */ +@mixin shadow-radial { + display: inline-block; + position: relative; + + @extend %hacks; + + &:before, + &:after { + pointer-events: none; + position: absolute; + content: ''; + left: 0; + width: 100%; + box-sizing: border-box; + background-repeat: no-repeat; + height: 5px; + opacity: 0; + transition-duration: $defaultDuration; + transition-property: opacity; + } + + &:before { + bottom: 100%; + background: radial-gradient(ellipse at 50% 150%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%); + } + + &:after { + top: 100%; + background: radial-gradient(ellipse at 50% -50%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%); + } + + &:hover:before, + &:hover:after { + opacity: 1; + } +} \ No newline at end of file diff --git a/scss/hover/_shrink.scss b/scss/hover/_shrink.scss new file mode 100644 index 0000000..7c3e946 --- /dev/null +++ b/scss/hover/_shrink.scss @@ -0,0 +1,12 @@ +/* Shrink */ +@mixin shrink { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:hover { + transform: scale(.9); + } +} diff --git a/scss/hover/_sink.scss b/scss/hover/_sink.scss new file mode 100644 index 0000000..7b622b5 --- /dev/null +++ b/scss/hover/_sink.scss @@ -0,0 +1,12 @@ +/* Sink */ +@mixin sink { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:hover { + transform: translateY(5px); + } +} \ No newline at end of file diff --git a/scss/hover/_skew-forward.scss b/scss/hover/_skew-forward.scss new file mode 100644 index 0000000..97b42b8 --- /dev/null +++ b/scss/hover/_skew-forward.scss @@ -0,0 +1,13 @@ +/* Skew Forward */ +@mixin skew-forward { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + transform-origin: 0 100%; + + @extend %hacks; + + &:hover { + transform: skew(-10deg); + } +} \ No newline at end of file diff --git a/scss/hover/_skew.scss b/scss/hover/_skew.scss new file mode 100644 index 0000000..9f73f9b --- /dev/null +++ b/scss/hover/_skew.scss @@ -0,0 +1,12 @@ +/* Skew */ +@mixin skew { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @extend %hacks; + + &:hover { + transform: skew(-10deg); + } +} \ No newline at end of file diff --git a/scss/hover/_trim.scss b/scss/hover/_trim.scss new file mode 100644 index 0000000..d0c0b02 --- /dev/null +++ b/scss/hover/_trim.scss @@ -0,0 +1,27 @@ +/* Trim */ +@mixin trim { + display: inline-block; + $outerBorderWidth: 4px; + $innerBorderWidth: 4px; + + position: relative; + + @extend %hacks; + + &:before { + content: ''; + position: absolute; + border: white solid $innerBorderWidth; + top: $outerBorderWidth; + left: $outerBorderWidth; + right: $outerBorderWidth; + bottom: $outerBorderWidth; + opacity: 0; + transition-duration: $defaultDuration; + transition-property: opacity; + } + + &:hover:before { + opacity: 1; + } +} \ No newline at end of file diff --git a/scss/hover/_variables.scss b/scss/hover/_variables.scss new file mode 100644 index 0000000..33fa10a --- /dev/null +++ b/scss/hover/_variables.scss @@ -0,0 +1,20 @@ +// Default options +$defaultDuration: .3s; +$primaryColour: #ececec; +$secondaryColour: #666; +$shadowColour: rgba(0, 0, 0, .6); + +//Speech bubbles options +$tipWidth: 10px; //the width of the speech bubble tip +$tipHeight: 10px; //the height of the speech bubble tip +$tipColour: $primaryColour; + +// Curl dimensions +$curlWidth: 25px; +$curlHeight: 25px; + +// Curl colours +$revealAreaColour: white; // reveal area behind the curl +$curlLineColour: #aaa; // crease line +$curlTransitionColour: #ccc; // colour transitioning from crease line to final colour +$curlLastColour: white; // final colour of the back of the curl \ No newline at end of file diff --git a/scss/hover/_wobble-bottom.scss b/scss/hover/_wobble-bottom.scss new file mode 100644 index 0000000..0587ee9 --- /dev/null +++ b/scss/hover/_wobble-bottom.scss @@ -0,0 +1,40 @@ +/* Wobble Bottom */ +@keyframes wobble-bottom { + 16.65% { + transform: skew(-12deg); + } + + 33.3% { + transform: skew(10deg); + } + + 49.95% { + transform: skew(-6deg); + } + + 66.6% { + transform: skew(4deg); + } + + 83.25% { + transform: skew(-2deg); + } + + 100% { + transform: skew(0); + } +} + +@mixin wobble-bottom { + display: inline-block; + transform-origin: 100% 0; + + @extend %hacks; + + &:hover { + animation-name: wobble-bottom; + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-iteration-count: 1; + } +} \ No newline at end of file diff --git a/scss/hover/_wobble-horizontal.scss b/scss/hover/_wobble-horizontal.scss new file mode 100644 index 0000000..3156a40 --- /dev/null +++ b/scss/hover/_wobble-horizontal.scss @@ -0,0 +1,39 @@ +/* Wobble Horizontal */ +@keyframes wobble-horizontal { + 16.65% { + transform: translateX(8px); + } + + 33.3% { + transform: translateX(-6px); + } + + 49.95% { + transform: translateX(4px); + } + + 66.6% { + transform: translateX(-2px); + } + + 83.25% { + transform: translateX(1px); + } + + 100% { + transform: translateX(0); + } +} + +@mixin wobble-horizontal { + display: inline-block; + + @extend %hacks; + + &:hover { + animation-name: wobble-horizontal; + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-iteration-count: 1; + } +} \ No newline at end of file diff --git a/scss/hover/_wobble-top.scss b/scss/hover/_wobble-top.scss new file mode 100644 index 0000000..ab8571a --- /dev/null +++ b/scss/hover/_wobble-top.scss @@ -0,0 +1,40 @@ +/* Wobble Top */ +@keyframes wobble-top { + 16.65% { + transform: skew(-12deg); + } + + 33.3% { + transform: skew(10deg); + } + + 49.95% { + transform: skew(-6deg); + } + + 66.6% { + transform: skew(4deg); + } + + 83.25% { + transform: skew(-2deg); + } + + 100% { + transform: skew(0); + } +} + +@mixin wobble-top { + display: inline-block; + transform-origin: 0 100%; + + @extend %hacks; + + &:hover { + animation-name: wobble-top; + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-iteration-count: 1; + } +} \ No newline at end of file diff --git a/scss/hover/_wobble-vertical.scss b/scss/hover/_wobble-vertical.scss new file mode 100644 index 0000000..9d5c126 --- /dev/null +++ b/scss/hover/_wobble-vertical.scss @@ -0,0 +1,39 @@ +/* Wobble Vertical */ +@keyframes wobble-vertical { + 16.65% { + transform: translateY(8px); + } + + 33.3% { + transform: translateY(-6px); + } + + 49.95% { + transform: translateY(4px); + } + + 66.6% { + transform: translateY(-2px); + } + + 83.25% { + transform: translateY(1px); + } + + 100% { + transform: translateY(0); + } +} + +@mixin wobble-vertical { + display: inline-block; + + @extend %hacks; + + &:hover { + animation-name: wobble-vertical; + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-iteration-count: 1; + } +} \ No newline at end of file