├── hover.jpg ├── two-up.png ├── photo-stack.png ├── sequence-logo.png ├── modern-slide-in.png ├── logo-transparent.png ├── .gitignore ├── .editorconfig ├── less ├── effects │ ├── 2d-transitions │ │ ├── _grow.less │ │ ├── _skew.less │ │ ├── _rotate.less │ │ ├── _shrink.less │ │ ├── _forward.less │ │ ├── _backward.less │ │ ├── _grow-rotate.less │ │ ├── _bounce-in.less │ │ ├── _bounce-out.less │ │ ├── _float.less │ │ ├── _sink.less │ │ ├── _skew-forward.less │ │ ├── _skew-backward.less │ │ ├── _pop.less │ │ ├── _push.less │ │ ├── _pulse.less │ │ ├── _pulse-grow.less │ │ ├── _pulse-shrink.less │ │ ├── _buzz.less │ │ ├── _wobble-skew.less │ │ ├── _wobble-top.less │ │ ├── _wobble-vertical.less │ │ ├── _wobble-bottom.less │ │ ├── _wobble-horizontal.less │ │ ├── _bob.less │ │ ├── _hang.less │ │ ├── _wobble-to-bottom-right.less │ │ ├── _wobble-to-top-right.less │ │ └── _buzz-out.less │ ├── shadow-and-glow-transitions │ │ ├── _glow.less │ │ ├── _shadow.less │ │ ├── _box-shadow-outset.less │ │ ├── _grow-shadow.less │ │ ├── _box-shadow-inset.less │ │ ├── _float-shadow.less │ │ └── _shadow-radial.less │ ├── border-transitions │ │ ├── _round-corners.less │ │ ├── _hollow.less │ │ ├── _border-fade.less │ │ ├── _trim.less │ │ ├── _overline-from-left.less │ │ ├── _overline-from-right.less │ │ ├── _underline-from-left.less │ │ ├── _underline-from-right.less │ │ ├── _overline-from-center.less │ │ ├── _underline-from-center.less │ │ ├── _overline-reveal.less │ │ ├── _reveal.less │ │ ├── _underline-reveal.less │ │ ├── _ripple-out.less │ │ ├── _ripple-in.less │ │ ├── _outline-out.less │ │ └── _outline-in.less │ ├── background-transitions │ │ ├── _fade.less │ │ ├── _back-pulse.less │ │ ├── _rectangle-in.less │ │ ├── _rectangle-out.less │ │ ├── _sweep-to-top.less │ │ ├── _sweep-to-bottom.less │ │ ├── _sweep-to-left.less │ │ ├── _sweep-to-right.less │ │ ├── _radial-in.less │ │ ├── _radial-out.less │ │ ├── _shutter-in-vertical.less │ │ ├── _shutter-in-horizontal.less │ │ ├── _shutter-out-vertical.less │ │ ├── _shutter-out-horizontal.less │ │ ├── _bounce-to-left.less │ │ ├── _bounce-to-right.less │ │ ├── _bounce-to-top.less │ │ └── _bounce-to-bottom.less │ ├── icons │ │ ├── _icon-fade.less │ │ ├── _icon-spin.less │ │ ├── _icon-back.less │ │ ├── _icon-float.less │ │ ├── _icon-shrink.less │ │ ├── _icon-sink.less │ │ ├── _icon-forward.less │ │ ├── _icon-grow.less │ │ ├── _icon-rotate.less │ │ ├── _icon-grow-rotate.less │ │ ├── _icon-bounce.less │ │ ├── _icon-up.less │ │ ├── _icon-down.less │ │ ├── _icon-pulse.less │ │ ├── _icon-sink-away.less │ │ ├── _icon-float-away.less │ │ ├── _icon-bounce-out.less │ │ ├── _icon-pulse-grow.less │ │ ├── _icon-pulse-shrink.less │ │ ├── _icon-buzz.less │ │ ├── _icon-pop.less │ │ ├── _icon-push.less │ │ ├── _icon-drop.less │ │ ├── _icon-wobble-vertical.less │ │ ├── _icon-wobble-horizontal.less │ │ ├── _icon-bob.less │ │ ├── _icon-hang.less │ │ └── _icon-buzz-out.less │ ├── speech-bubbles │ │ ├── _bubble-top.less │ │ ├── _bubble-left.less │ │ ├── _bubble-right.less │ │ ├── _bubble-bottom.less │ │ ├── _bubble-float-top.less │ │ ├── _bubble-float-left.less │ │ ├── _bubble-float-right.less │ │ └── _bubble-float-bottom.less │ └── curls │ │ ├── _curl-top-right.less │ │ ├── _curl-bottom-left.less │ │ ├── _curl-bottom-right.less │ │ └── _curl-top-left.less ├── _hacks.less ├── _mixins.less └── _options.less ├── scss ├── effects │ ├── 2d-transitions │ │ ├── _grow.scss │ │ ├── _skew.scss │ │ ├── _rotate.scss │ │ ├── _shrink.scss │ │ ├── _backward.scss │ │ ├── _forward.scss │ │ ├── _grow-rotate.scss │ │ ├── _bounce-in.scss │ │ ├── _bounce-out.scss │ │ ├── _sink.scss │ │ ├── _float.scss │ │ ├── _skew-forward.scss │ │ ├── _skew-backward.scss │ │ ├── _pop.scss │ │ ├── _push.scss │ │ ├── _pulse.scss │ │ ├── _pulse-grow.scss │ │ ├── _pulse-shrink.scss │ │ ├── _buzz.scss │ │ ├── _wobble-skew.scss │ │ ├── _wobble-top.scss │ │ ├── _wobble-vertical.scss │ │ ├── _wobble-horizontal.scss │ │ ├── _wobble-bottom.scss │ │ ├── _bob.scss │ │ ├── _hang.scss │ │ ├── _wobble-to-bottom-right.scss │ │ ├── _wobble-to-top-right.scss │ │ └── _buzz-out.scss │ ├── shadow-and-glow-transitions │ │ ├── _glow.scss │ │ ├── _shadow.scss │ │ ├── _box-shadow-outset.scss │ │ ├── _grow-shadow.scss │ │ ├── _box-shadow-inset.scss │ │ ├── _float-shadow.scss │ │ └── _shadow-radial.scss │ ├── border-transitions │ │ ├── _round-corners.scss │ │ ├── _hollow.scss │ │ ├── _border-fade.scss │ │ ├── _trim.scss │ │ ├── _overline-from-left.scss │ │ ├── _overline-from-right.scss │ │ ├── _underline-from-left.scss │ │ ├── _underline-from-right.scss │ │ ├── _overline-from-center.scss │ │ ├── _underline-from-center.scss │ │ ├── _overline-reveal.scss │ │ ├── _underline-reveal.scss │ │ ├── _reveal.scss │ │ ├── _ripple-out.scss │ │ ├── _ripple-in.scss │ │ ├── _outline-out.scss │ │ └── _outline-in.scss │ ├── background-transitions │ │ ├── _fade.scss │ │ ├── _back-pulse.scss │ │ ├── _rectangle-in.scss │ │ ├── _rectangle-out.scss │ │ ├── _sweep-to-top.scss │ │ ├── _sweep-to-left.scss │ │ ├── _sweep-to-right.scss │ │ ├── _sweep-to-bottom.scss │ │ ├── _radial-in.scss │ │ ├── _radial-out.scss │ │ ├── _shutter-in-vertical.scss │ │ ├── _shutter-in-horizontal.scss │ │ ├── _shutter-out-vertical.scss │ │ ├── _shutter-out-horizontal.scss │ │ ├── _bounce-to-left.scss │ │ ├── _bounce-to-right.scss │ │ ├── _bounce-to-top.scss │ │ └── _bounce-to-bottom.scss │ ├── icons │ │ ├── _icon-fade.scss │ │ ├── _icon-spin.scss │ │ ├── _icon-back.scss │ │ ├── _icon-float.scss │ │ ├── _icon-shrink.scss │ │ ├── _icon-sink.scss │ │ ├── _icon-forward.scss │ │ ├── _icon-grow.scss │ │ ├── _icon-rotate.scss │ │ ├── _icon-grow-rotate.scss │ │ ├── _icon-bounce.scss │ │ ├── _icon-up.scss │ │ ├── _icon-down.scss │ │ ├── _icon-sink-away.scss │ │ ├── _icon-float-away.scss │ │ ├── _icon-pulse.scss │ │ ├── _icon-pulse-grow.scss │ │ ├── _icon-bounce-out.scss │ │ ├── _icon-pulse-shrink.scss │ │ ├── _icon-buzz.scss │ │ ├── _icon-pop.scss │ │ ├── _icon-push.scss │ │ ├── _icon-drop.scss │ │ ├── _icon-wobble-vertical.scss │ │ ├── _icon-wobble-horizontal.scss │ │ ├── _icon-bob.scss │ │ ├── _icon-hang.scss │ │ └── _icon-buzz-out.scss │ ├── speech-bubbles │ │ ├── _bubble-left.scss │ │ ├── _bubble-top.scss │ │ ├── _bubble-bottom.scss │ │ ├── _bubble-right.scss │ │ ├── _bubble-float-top.scss │ │ ├── _bubble-float-left.scss │ │ ├── _bubble-float-right.scss │ │ └── _bubble-float-bottom.scss │ └── curls │ │ ├── _curl-top-right.scss │ │ ├── _curl-bottom-left.scss │ │ ├── _curl-bottom-right.scss │ │ └── _curl-top-left.scss ├── _hacks.scss ├── _mixins.scss └── _options.scss ├── package.json ├── bower.json ├── HISTORY.md ├── CONTRIBUTING.md ├── license.txt ├── Gruntfile.js └── css └── demo-page.css /hover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IanLunn/Hover/HEAD/hover.jpg -------------------------------------------------------------------------------- /two-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IanLunn/Hover/HEAD/two-up.png -------------------------------------------------------------------------------- /photo-stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IanLunn/Hover/HEAD/photo-stack.png -------------------------------------------------------------------------------- /sequence-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IanLunn/Hover/HEAD/sequence-logo.png -------------------------------------------------------------------------------- /modern-slide-in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IanLunn/Hover/HEAD/modern-slide-in.png -------------------------------------------------------------------------------- /logo-transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IanLunn/Hover/HEAD/logo-transparent.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | node_modules 16 | 17 | .sass-cache 18 | 19 | .DS_Store -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = tab 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_grow.less: -------------------------------------------------------------------------------- 1 | /* Grow */ 2 | .grow() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | .prefixed(transform, scale(1.1)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_skew.less: -------------------------------------------------------------------------------- 1 | /* Skew */ 2 | .skew() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | .prefixed(transform, skew(-10deg)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_rotate.less: -------------------------------------------------------------------------------- 1 | /* Rotate */ 2 | .rotate() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | .prefixed(transform, rotate(4deg)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_shrink.less: -------------------------------------------------------------------------------- 1 | /* Shrink */ 2 | .shrink() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | .prefixed(transform, scale(.9)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_forward.less: -------------------------------------------------------------------------------- 1 | /* Forward */ 2 | .forward() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | .prefixed(transform, translateX(8px)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/shadow-and-glow-transitions/_glow.less: -------------------------------------------------------------------------------- 1 | /* Glow */ 2 | .glow() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, box-shadow); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | box-shadow: 0 0 8px @shadowColor; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_backward.less: -------------------------------------------------------------------------------- 1 | /* Backward */ 2 | .backward() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | .prefixed(transform, translateX(-8px)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_round-corners.less: -------------------------------------------------------------------------------- 1 | /* Round Corners */ 2 | .round-corners() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, border-radius); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | border-radius: 1em; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_grow-rotate.less: -------------------------------------------------------------------------------- 1 | /* Grow Rotate */ 2 | .grow-rotate() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | .prefixed(transform, scale(1.1) rotate(4deg)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/shadow-and-glow-transitions/_shadow.less: -------------------------------------------------------------------------------- 1 | /* Shadow */ 2 | .shadow() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, box-shadow); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_grow.scss: -------------------------------------------------------------------------------- 1 | /* Grow */ 2 | @mixin grow { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | @include prefixed(transform, scale(1.1)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_skew.scss: -------------------------------------------------------------------------------- 1 | /* Skew */ 2 | @mixin skew { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | @include prefixed(transform, skew(-10deg)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_bounce-in.less: -------------------------------------------------------------------------------- 1 | /* Bounce In */ 2 | .bounce-in() { 3 | .hacks(); 4 | .prefixed(transition-duration, @slowDuration); 5 | 6 | &:hover, 7 | &:focus, 8 | &:active { 9 | .prefixed(transform, scale(1.2)); 10 | .prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_rotate.scss: -------------------------------------------------------------------------------- 1 | /* Rotate */ 2 | @mixin rotate { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | @include prefixed(transform, rotate(4deg)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_shrink.scss: -------------------------------------------------------------------------------- 1 | /* Shrink */ 2 | @mixin shrink { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | @include prefixed(transform, scale(.9)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/effects/shadow-and-glow-transitions/_glow.scss: -------------------------------------------------------------------------------- 1 | /* Glow */ 2 | @mixin glow { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, box-shadow); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | box-shadow: 0 0 8px $shadowColor; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_bounce-out.less: -------------------------------------------------------------------------------- 1 | /* Bounce Out */ 2 | .bounce-out() { 3 | .hacks(); 4 | .prefixed(transition-duration, @slowDuration); 5 | 6 | &:hover, 7 | &:focus, 8 | &:active { 9 | .prefixed(transform, scale(.8)); 10 | .prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_round-corners.scss: -------------------------------------------------------------------------------- 1 | /* Round Corners */ 2 | @mixin round-corners { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, border-radius); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | border-radius: 1em; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_backward.scss: -------------------------------------------------------------------------------- 1 | /* Backward */ 2 | @mixin backward { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | @include prefixed(transform, translateX(-8px)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_forward.scss: -------------------------------------------------------------------------------- 1 | /* Forward */ 2 | @mixin forward { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | @include prefixed(transform, translateX(8px)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/shadow-and-glow-transitions/_box-shadow-outset.less: -------------------------------------------------------------------------------- 1 | /* Box Shadow Outset */ 2 | .box-shadow-outset() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, box-shadow); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | box-shadow: 2px 2px 2px @shadowColor; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_float.less: -------------------------------------------------------------------------------- 1 | /* Float */ 2 | .float() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, transform); 6 | .prefixed(transition-timing-function, ease-out); 7 | 8 | &:hover, 9 | &:focus, 10 | &:active { 11 | .prefixed(transform, translateY(-8px)); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_sink.less: -------------------------------------------------------------------------------- 1 | /* Sink */ 2 | .sink() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, transform); 6 | .prefixed(transition-timing-function, ease-out); 7 | 8 | &:hover, 9 | &:focus, 10 | &:active { 11 | .prefixed(transform, translateY(8px)); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /scss/effects/shadow-and-glow-transitions/_shadow.scss: -------------------------------------------------------------------------------- 1 | /* Shadow */ 2 | @mixin shadow { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, box-shadow); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_skew-forward.less: -------------------------------------------------------------------------------- 1 | /* Skew Forward */ 2 | .skew-forward() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, transform); 6 | .prefixed(transform-origin, 0 100%); 7 | 8 | &:hover, 9 | &:focus, 10 | &:active { 11 | .prefixed(transform, skew(-10deg)); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_fade.less: -------------------------------------------------------------------------------- 1 | /* Fade */ 2 | .fade() { 3 | .hacks(); 4 | overflow: hidden; 5 | .prefixed(transition-duration, @mediumDuration); 6 | .prefixed(transition-property, ~"color, background-color"); 7 | 8 | &:hover, 9 | &:focus, 10 | &:active { 11 | background-color: @activeColor; 12 | color: white; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_skew-backward.less: -------------------------------------------------------------------------------- 1 | /* Skew Backward */ 2 | .skew-backward() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, transform); 6 | .prefixed(transform-origin, 0 100%); 7 | 8 | &:hover, 9 | &:focus, 10 | &:active { 11 | .prefixed(transform, skew(10deg)); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_grow-rotate.scss: -------------------------------------------------------------------------------- 1 | /* Grow Rotate */ 2 | @mixin grow-rotate { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, transform); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | @include prefixed(transform, scale(1.1) rotate(4deg)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_bounce-in.scss: -------------------------------------------------------------------------------- 1 | /* Bounce In */ 2 | @mixin bounce-in { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $slowDuration); 5 | 6 | &:hover, 7 | &:focus, 8 | &:active { 9 | @include prefixed(transform, scale(1.2)); 10 | @include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_bounce-out.scss: -------------------------------------------------------------------------------- 1 | /* Bounce Out */ 2 | @mixin bounce-out { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $slowDuration); 5 | 6 | &:hover, 7 | &:focus, 8 | &:active { 9 | @include prefixed(transform, scale(.8)); 10 | @include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36)); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-fade.less: -------------------------------------------------------------------------------- 1 | /* Icon Fade */ 2 | .icon-fade() { 3 | .hacks(); 4 | 5 | .hvr-icon { 6 | .prefixed(transform, translateZ(0)); 7 | .prefixed(transition-duration, .5s); 8 | .prefixed(transition-property, color); 9 | } 10 | 11 | &:hover, 12 | &:focus, 13 | &:active { 14 | 15 | .hvr-icon { 16 | color: #0F9E5E; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /scss/effects/shadow-and-glow-transitions/_box-shadow-outset.scss: -------------------------------------------------------------------------------- 1 | /* Box Shadow Outset */ 2 | @mixin box-shadow-outset { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, box-shadow); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | box-shadow: 2px 2px 2px $shadowColor; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_fade.scss: -------------------------------------------------------------------------------- 1 | /* Fade */ 2 | @mixin fade { 3 | @include hacks(); 4 | overflow: hidden; 5 | @include prefixed(transition-duration, $mediumDuration); 6 | @include prefixed(transition-property, "color, background-color"); 7 | 8 | &:hover, 9 | &:focus, 10 | &:active { 11 | background-color: $activeColor; 12 | color: white; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_sink.scss: -------------------------------------------------------------------------------- 1 | /* Sink */ 2 | @mixin sink { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, transform); 6 | @include prefixed(transition-timing-function, ease-out); 7 | 8 | &:hover, 9 | &:focus, 10 | &:active { 11 | @include prefixed(transform, translateY(8px)); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /less/effects/shadow-and-glow-transitions/_grow-shadow.less: -------------------------------------------------------------------------------- 1 | /* Grow Shadow */ 2 | .grow-shadow() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, "box-shadow, transform"); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); 11 | .prefixed(transform, scale(1.1)); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_float.scss: -------------------------------------------------------------------------------- 1 | /* Float */ 2 | @mixin float { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, transform); 6 | @include prefixed(transition-timing-function, ease-out); 7 | 8 | &:hover, 9 | &:focus, 10 | &:active { 11 | @include prefixed(transform, translateY(-8px)); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_skew-forward.scss: -------------------------------------------------------------------------------- 1 | /* Skew Forward */ 2 | @mixin skew-forward { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, transform); 6 | @include prefixed(transform-origin, 0 100%); 7 | 8 | &:hover, 9 | &:focus, 10 | &:active { 11 | @include prefixed(transform, skew(-10deg)); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_skew-backward.scss: -------------------------------------------------------------------------------- 1 | /* Skew Backward */ 2 | @mixin skew-backward { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, transform); 6 | @include prefixed(transform-origin, 0 100%); 7 | 8 | &:hover, 9 | &:focus, 10 | &:active { 11 | @include prefixed(transform, skew(10deg)); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-fade.scss: -------------------------------------------------------------------------------- 1 | /* Icon Fade */ 2 | @mixin icon-fade { 3 | @include hacks(); 4 | 5 | .hvr-icon { 6 | @include prefixed(transform, translateZ(0)); 7 | @include prefixed(transition-duration, .5s); 8 | @include prefixed(transition-property, color); 9 | } 10 | 11 | &:hover, 12 | &:focus, 13 | &:active { 14 | 15 | .hvr-icon { 16 | color: #0F9E5E; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-spin.less: -------------------------------------------------------------------------------- 1 | /* Icon Spin */ 2 | .icon-spin() { 3 | .hacks(); 4 | 5 | .hvr-icon { 6 | .prefixed(transition-duration, 1s); 7 | .prefixed(transition-property, transform); 8 | .prefixed(transition-timing-function, ease-in-out); 9 | } 10 | 11 | &:hover, 12 | &:focus, 13 | &:active { 14 | 15 | .hvr-icon { 16 | .prefixed(transform, rotate(360deg)); 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /scss/effects/shadow-and-glow-transitions/_grow-shadow.scss: -------------------------------------------------------------------------------- 1 | /* Grow Shadow */ 2 | @mixin grow-shadow { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, "box-shadow, transform"); 6 | 7 | &:hover, 8 | &:focus, 9 | &:active { 10 | box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); 11 | @include prefixed(transform, scale(1.1)); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-spin.scss: -------------------------------------------------------------------------------- 1 | /* Icon Spin */ 2 | @mixin icon-spin { 3 | @include hacks(); 4 | 5 | .hvr-icon { 6 | @include prefixed(transition-duration, 1s); 7 | @include prefixed(transition-property, transform); 8 | @include prefixed(transition-timing-function, ease-in-out); 9 | } 10 | 11 | &:hover, 12 | &:focus, 13 | &:active { 14 | 15 | .hvr-icon { 16 | @include prefixed(transform, rotate(360deg)); 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_pop.less: -------------------------------------------------------------------------------- 1 | /* Pop */ 2 | .keyframes(~"@{nameSpace}-pop", { 3 | 50% { 4 | .prefixed(transform, scale(1.2)); 5 | } 6 | }); 7 | 8 | .pop() { 9 | .hacks(); 10 | 11 | &:hover, 12 | &:focus, 13 | &:active { 14 | .prefixed(animation-name, ~"@{nameSpace}-pop"); 15 | .prefixed(animation-duration, @mediumDuration); 16 | .prefixed(animation-timing-function, linear); 17 | .prefixed(animation-iteration-count, 1); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_hollow.less: -------------------------------------------------------------------------------- 1 | /* Hollow */ 2 | .hollow() { 3 | @borderWidth: 4px; 4 | 5 | .hacks(); 6 | .prefixed(transition-duration, @mediumDuration); 7 | .prefixed(transition-property, background); 8 | box-shadow: 9 | inset 0 0 0 @borderWidth @primaryColor, 10 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ 11 | 12 | &:hover, 13 | &:focus, 14 | &:active { 15 | background: none; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_hollow.scss: -------------------------------------------------------------------------------- 1 | /* Hollow */ 2 | @mixin hollow { 3 | $borderWidth: 4px; 4 | 5 | @include hacks(); 6 | @include prefixed(transition-duration, $mediumDuration); 7 | @include prefixed(transition-property, background); 8 | box-shadow: 9 | inset 0 0 0 $borderWidth $primaryColor, 10 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ 11 | 12 | &:hover, 13 | &:focus, 14 | &:active { 15 | background: none; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-back.less: -------------------------------------------------------------------------------- 1 | /* Icon Back */ 2 | .icon-back() { 3 | .hacks(); 4 | .prefixed(transition-duration, @fastDuration); 5 | 6 | .hvr-icon { 7 | .prefixed(transform, translateZ(0)); 8 | .prefixed(transition-duration, @fastDuration); 9 | .prefixed(transition-property, transform); 10 | .prefixed(transition-timing-function, ease-out); 11 | } 12 | 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | 17 | .hvr-icon { 18 | .prefixed(transform, translateX(-4px)); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_pop.scss: -------------------------------------------------------------------------------- 1 | /* Pop */ 2 | @include keyframes(#{$nameSpace}-pop) { 3 | 50% { 4 | @include prefixed(transform, scale(1.2)); 5 | } 6 | } 7 | 8 | @mixin pop { 9 | @include hacks(); 10 | 11 | &:hover, 12 | &:focus, 13 | &:active { 14 | @include prefixed(animation-name, #{$nameSpace}-pop); 15 | @include prefixed(animation-duration, $mediumDuration); 16 | @include prefixed(animation-timing-function, linear); 17 | @include prefixed(animation-iteration-count, 1); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_push.less: -------------------------------------------------------------------------------- 1 | /* Push */ 2 | .keyframes(~"@{nameSpace}-push", { 3 | 50% { 4 | .prefixed(transform, scale(.8)); 5 | } 6 | 7 | 100% { 8 | .prefixed(transform, scale(1)); 9 | } 10 | }); 11 | 12 | .push() { 13 | .hacks(); 14 | 15 | &:hover, 16 | &:focus, 17 | &:active { 18 | .prefixed(animation-name, ~"@{nameSpace}-push"); 19 | .prefixed(animation-duration, .3s); 20 | .prefixed(animation-timing-function, linear); 21 | .prefixed(animation-iteration-count, 1); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-float.less: -------------------------------------------------------------------------------- 1 | /* Icon Float */ 2 | .icon-float() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | 6 | .hvr-icon { 7 | .prefixed(transform, translateZ(0)); 8 | .prefixed(transition-duration, @mediumDuration); 9 | .prefixed(transition-property, transform); 10 | .prefixed(transition-timing-function, ease-out); 11 | } 12 | 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | 17 | .hvr-icon { 18 | .prefixed(transform, translateY(-4px)); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-shrink.less: -------------------------------------------------------------------------------- 1 | /* Icon Shrink */ 2 | .icon-shrink() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | 6 | .hvr-icon { 7 | .prefixed(transform, translateZ(0)); 8 | .prefixed(transition-duration, @mediumDuration); 9 | .prefixed(transition-property, transform); 10 | .prefixed(transition-timing-function, ease-out); 11 | } 12 | 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | 17 | .hvr-icon { 18 | .prefixed(transform, scale(.8)); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-sink.less: -------------------------------------------------------------------------------- 1 | /* Icon Sink */ 2 | .icon-sink() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | 6 | .hvr-icon { 7 | .prefixed(transform, translateZ(0)); 8 | .prefixed(transition-duration, @mediumDuration); 9 | .prefixed(transition-property, transform); 10 | .prefixed(transition-timing-function, ease-out); 11 | } 12 | 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | 17 | .hvr-icon { 18 | .prefixed(transform, translateY(4px)); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-forward.less: -------------------------------------------------------------------------------- 1 | /* Icon Forward */ 2 | .icon-forward() { 3 | .hacks(); 4 | .prefixed(transition-duration, @fastDuration); 5 | 6 | .hvr-icon { 7 | .prefixed(transform, translateZ(0)); 8 | .prefixed(transition-duration, @fastDuration); 9 | .prefixed(transition-property, transform); 10 | .prefixed(transition-timing-function, ease-out); 11 | } 12 | 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | 17 | .hvr-icon { 18 | .prefixed(transform, translateX(4px)); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-grow.less: -------------------------------------------------------------------------------- 1 | /* Icon Grow */ 2 | .icon-grow() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | 6 | .hvr-icon { 7 | .prefixed(transform, translateZ(0)); 8 | .prefixed(transition-duration, @mediumDuration); 9 | .prefixed(transition-property, transform); 10 | .prefixed(transition-timing-function, ease-out); 11 | } 12 | 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | 17 | .hvr-icon { 18 | .prefixed(transform, scale(1.3) translateZ(0)); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_pulse.less: -------------------------------------------------------------------------------- 1 | /* Pulse */ 2 | .keyframes(~"@{nameSpace}-pulse", { 3 | 25% { 4 | .prefixed(transform, scale(1.1)); 5 | } 6 | 7 | 75% { 8 | .prefixed(transform, scale(.9)); 9 | } 10 | }); 11 | 12 | .pulse() { 13 | .hacks(); 14 | 15 | &:hover, 16 | &:focus, 17 | &:active { 18 | .prefixed(animation-name, ~"@{nameSpace}-pulse"); 19 | .prefixed(animation-duration, 1s); 20 | .prefixed(animation-timing-function, linear); 21 | .prefixed(animation-iteration-count, infinite); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_pulse-grow.less: -------------------------------------------------------------------------------- 1 | /* Pulse Grow */ 2 | .keyframes(~"@{nameSpace}-pulse-grow", { 3 | to { 4 | .prefixed(transform, scale(1.1)); 5 | } 6 | }); 7 | 8 | .pulse-grow() { 9 | .hacks(); 10 | 11 | &:hover, 12 | &:focus, 13 | &:active { 14 | .prefixed(animation-name, ~"@{nameSpace}-pulse-grow"); 15 | .prefixed(animation-duration, @mediumDuration); 16 | .prefixed(animation-timing-function, linear); 17 | .prefixed(animation-iteration-count, infinite); 18 | .prefixed(animation-direction, alternate); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-rotate.less: -------------------------------------------------------------------------------- 1 | /* Icon Rotate */ 2 | .icon-rotate() { 3 | @duration: @mediumDuration; 4 | 5 | .hacks(); 6 | .prefixed(transition-duration, @duration); 7 | 8 | .hvr-icon { 9 | .prefixed(transform, translateZ(0)); 10 | .prefixed(transition-duration, @duration); 11 | .prefixed(transition-property, transform); 12 | .prefixed(transition-timing-function, ease-out); 13 | } 14 | 15 | &:hover, 16 | &:focus, 17 | &:active { 18 | 19 | .hvr-icon { 20 | .prefixed(transform, rotate(20deg)); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_pulse-shrink.less: -------------------------------------------------------------------------------- 1 | /* Pulse Shrink */ 2 | .keyframes(~"@{nameSpace}-pulse-shrink", { 3 | to { 4 | .prefixed(transform, scale(.9)); 5 | } 6 | }); 7 | 8 | .pulse-shrink() { 9 | .hacks(); 10 | 11 | &:hover, 12 | &:focus, 13 | &:active { 14 | .prefixed(animation-name, ~"@{nameSpace}-pulse-shrink"); 15 | .prefixed(animation-duration, @mediumDuration); 16 | .prefixed(animation-timing-function, linear); 17 | .prefixed(animation-iteration-count, infinite); 18 | .prefixed(animation-direction, alternate); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_buzz.less: -------------------------------------------------------------------------------- 1 | /* Buzz */ 2 | .keyframes(~"@{nameSpace}-buzz", { 3 | 50% { 4 | .prefixed(transform, translateX(3px) rotate(2deg)); 5 | } 6 | 7 | 100% { 8 | .prefixed(transform, translateX(-3px) rotate(-2deg)); 9 | } 10 | }); 11 | 12 | .buzz() { 13 | .hacks(); 14 | 15 | &:hover, 16 | &:focus, 17 | &:active { 18 | .prefixed(animation-name, ~"@{nameSpace}-buzz"); 19 | .prefixed(animation-duration, .15s); 20 | .prefixed(animation-timing-function, linear); 21 | .prefixed(animation-iteration-count, infinite); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /less/effects/shadow-and-glow-transitions/_box-shadow-inset.less: -------------------------------------------------------------------------------- 1 | /* Box Shadow Inset */ 2 | .box-shadow-inset() { 3 | .hacks(); 4 | .prefixed(transition-duration, @mediumDuration); 5 | .prefixed(transition-property, box-shadow); 6 | 7 | box-shadow: inset 0 0 0 @shadowColor, 8 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ 9 | 10 | &:hover, 11 | &:focus, 12 | &:active { 13 | box-shadow: inset 2px 2px 2px @shadowColor, 14 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-grow-rotate.less: -------------------------------------------------------------------------------- 1 | /* Icon Grow Rotate */ 2 | .icon-grow-rotate() { 3 | @duration: @mediumDuration; 4 | 5 | .hacks(); 6 | .prefixed(transition-duration, @duration); 7 | 8 | .hvr-icon { 9 | .prefixed(transform, translateZ(0)); 10 | .prefixed(transition-duration, @duration); 11 | .prefixed(transition-property, transform); 12 | .prefixed(transition-timing-function, ease-out); 13 | } 14 | 15 | &:hover, 16 | &:focus, 17 | &:active { 18 | 19 | .hvr-icon { 20 | .prefixed(transform, scale(1.5) rotate(12deg)); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-back.scss: -------------------------------------------------------------------------------- 1 | /* Icon Back */ 2 | @mixin icon-back { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $fastDuration); 5 | 6 | .hvr-icon { 7 | @include prefixed(transform, translateZ(0)); 8 | @include prefixed(transition-duration, $fastDuration); 9 | @include prefixed(transition-property, transform); 10 | @include prefixed(transition-timing-function, ease-out); 11 | } 12 | 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | 17 | .hvr-icon { 18 | @include prefixed(transform, translateX(-4px)); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_push.scss: -------------------------------------------------------------------------------- 1 | /* Push */ 2 | @include keyframes(#{$nameSpace}-push) { 3 | 50% { 4 | @include prefixed(transform, scale(.8)); 5 | } 6 | 7 | 100% { 8 | @include prefixed(transform, scale(1)); 9 | } 10 | } 11 | 12 | @mixin push { 13 | @include hacks(); 14 | 15 | &:hover, 16 | &:focus, 17 | &:active { 18 | @include prefixed(animation-name, #{$nameSpace}-push); 19 | @include prefixed(animation-duration, .3s); 20 | @include prefixed(animation-timing-function, linear); 21 | @include prefixed(animation-iteration-count, 1); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-float.scss: -------------------------------------------------------------------------------- 1 | /* Icon Float */ 2 | @mixin icon-float { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | 6 | .hvr-icon { 7 | @include prefixed(transform, translateZ(0)); 8 | @include prefixed(transition-duration, $mediumDuration); 9 | @include prefixed(transition-property, transform); 10 | @include prefixed(transition-timing-function, ease-out); 11 | } 12 | 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | 17 | .hvr-icon { 18 | @include prefixed(transform, translateY(-4px)); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-shrink.scss: -------------------------------------------------------------------------------- 1 | /* Icon Shrink */ 2 | @mixin icon-shrink { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | 6 | .hvr-icon { 7 | @include prefixed(transform, translateZ(0)); 8 | @include prefixed(transition-duration, $mediumDuration); 9 | @include prefixed(transition-property, transform); 10 | @include prefixed(transition-timing-function, ease-out); 11 | } 12 | 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | 17 | .hvr-icon { 18 | @include prefixed(transform, scale(.8)); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-sink.scss: -------------------------------------------------------------------------------- 1 | /* Icon Sink */ 2 | @mixin icon-sink { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | 6 | .hvr-icon { 7 | @include prefixed(transform, translateZ(0)); 8 | @include prefixed(transition-duration, $mediumDuration); 9 | @include prefixed(transition-property, transform); 10 | @include prefixed(transition-timing-function, ease-out); 11 | } 12 | 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | 17 | .hvr-icon { 18 | @include prefixed(transform, translateY(4px)); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-forward.scss: -------------------------------------------------------------------------------- 1 | /* Icon Forward */ 2 | @mixin icon-forward { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $fastDuration); 5 | 6 | .hvr-icon { 7 | @include prefixed(transform, translateZ(0)); 8 | @include prefixed(transition-duration, $fastDuration); 9 | @include prefixed(transition-property, transform); 10 | @include prefixed(transition-timing-function, ease-out); 11 | } 12 | 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | 17 | .hvr-icon { 18 | @include prefixed(transform, translateX(4px)); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-grow.scss: -------------------------------------------------------------------------------- 1 | /* Icon Grow */ 2 | @mixin icon-grow { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | 6 | .hvr-icon { 7 | @include prefixed(transform, translateZ(0)); 8 | @include prefixed(transition-duration, $mediumDuration); 9 | @include prefixed(transition-property, transform); 10 | @include prefixed(transition-timing-function, ease-out); 11 | } 12 | 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | 17 | .hvr-icon { 18 | @include prefixed(transform, scale(1.3) translateZ(0)); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_pulse.scss: -------------------------------------------------------------------------------- 1 | /* Pulse */ 2 | @include keyframes(#{$nameSpace}-pulse) { 3 | 25% { 4 | @include prefixed(transform, scale(1.1)); 5 | } 6 | 7 | 75% { 8 | @include prefixed(transform, scale(.9)); 9 | } 10 | } 11 | 12 | @mixin pulse { 13 | @include hacks(); 14 | 15 | &:hover, 16 | &:focus, 17 | &:active { 18 | @include prefixed(animation-name, #{$nameSpace}-pulse); 19 | @include prefixed(animation-duration, 1s); 20 | @include prefixed(animation-timing-function, linear); 21 | @include prefixed(animation-iteration-count, infinite); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/effects/shadow-and-glow-transitions/_box-shadow-inset.scss: -------------------------------------------------------------------------------- 1 | /* Box Shadow Inset */ 2 | @mixin box-shadow-inset { 3 | @include hacks(); 4 | @include prefixed(transition-duration, $mediumDuration); 5 | @include prefixed(transition-property, box-shadow); 6 | 7 | box-shadow: inset 0 0 0 $shadowColor, 8 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ 9 | 10 | &:hover, 11 | &:focus, 12 | &:active { 13 | box-shadow: inset 2px 2px 2px $shadowColor, 14 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-bounce.less: -------------------------------------------------------------------------------- 1 | /* Icon Bounce */ 2 | 3 | .icon-bounce() { 4 | .hacks(); 5 | .prefixed(transition-duration, @mediumDuration); 6 | 7 | .hvr-icon { 8 | .prefixed(transform, translateZ(0)); 9 | .prefixed(transition-duration, @mediumDuration); 10 | .prefixed(transition-property, transform); 11 | .prefixed(transition-timing-function, ease-out); 12 | } 13 | 14 | &:hover, 15 | &:focus, 16 | &:active { 17 | 18 | .hvr-icon { 19 | .prefixed(transform, scale(1.5)); 20 | .prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36)); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_border-fade.less: -------------------------------------------------------------------------------- 1 | /* Border Fade */ 2 | .border-fade() { 3 | @borderWidth: 4px; 4 | 5 | .hacks(); 6 | .prefixed(transition-duration, @mediumDuration); 7 | .prefixed(transition-property, box-shadow); 8 | box-shadow: 9 | inset 0 0 0 @borderWidth @primaryColor, 10 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ 11 | 12 | &:hover, 13 | &:focus, 14 | &:active { 15 | box-shadow: 16 | inset 0 0 0 @borderWidth @activeColor, 17 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-rotate.scss: -------------------------------------------------------------------------------- 1 | /* Icon Rotate */ 2 | @mixin icon-rotate { 3 | $duration: $mediumDuration; 4 | 5 | @include hacks(); 6 | @include prefixed(transition-duration, $duration); 7 | 8 | .hvr-icon { 9 | @include prefixed(transform, translateZ(0)); 10 | @include prefixed(transition-duration, $duration); 11 | @include prefixed(transition-property, transform); 12 | @include prefixed(transition-timing-function, ease-out); 13 | } 14 | 15 | &:hover, 16 | &:focus, 17 | &:active { 18 | 19 | .hvr-icon { 20 | @include prefixed(transform, rotate(20deg)); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_pulse-grow.scss: -------------------------------------------------------------------------------- 1 | /* Pulse Grow */ 2 | @include keyframes(#{$nameSpace}-pulse-grow) { 3 | to { 4 | @include prefixed(transform, scale(1.1)); 5 | } 6 | } 7 | 8 | @mixin pulse-grow { 9 | @include hacks(); 10 | 11 | &:hover, 12 | &:focus, 13 | &:active { 14 | @include prefixed(animation-name, #{$nameSpace}-pulse-grow); 15 | @include prefixed(animation-duration, $mediumDuration); 16 | @include prefixed(animation-timing-function, linear); 17 | @include prefixed(animation-iteration-count, infinite); 18 | @include prefixed(animation-direction, alternate); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_pulse-shrink.scss: -------------------------------------------------------------------------------- 1 | /* Pulse Shrink */ 2 | @include keyframes(#{$nameSpace}-pulse-shrink) { 3 | to { 4 | @include prefixed(transform, scale(.9)); 5 | } 6 | } 7 | 8 | @mixin pulse-shrink { 9 | @include hacks(); 10 | 11 | &:hover, 12 | &:focus, 13 | &:active { 14 | @include prefixed(animation-name, #{$nameSpace}-pulse-shrink); 15 | @include prefixed(animation-duration, $mediumDuration); 16 | @include prefixed(animation-timing-function, linear); 17 | @include prefixed(animation-iteration-count, infinite); 18 | @include prefixed(animation-direction, alternate); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_buzz.scss: -------------------------------------------------------------------------------- 1 | /* Buzz */ 2 | @include keyframes(#{$nameSpace}-buzz) { 3 | 50% { 4 | @include prefixed(transform, translateX(3px) rotate(2deg)); 5 | } 6 | 7 | 100% { 8 | @include prefixed(transform, translateX(-3px) rotate(-2deg)); 9 | } 10 | } 11 | 12 | @mixin buzz { 13 | @include hacks(); 14 | 15 | &:hover, 16 | &:focus, 17 | &:active { 18 | @include prefixed(animation-name, #{$nameSpace}-buzz); 19 | @include prefixed(animation-duration, .15s); 20 | @include prefixed(animation-timing-function, linear); 21 | @include prefixed(animation-iteration-count, infinite); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-grow-rotate.scss: -------------------------------------------------------------------------------- 1 | /* Icon Grow Rotate */ 2 | @mixin icon-grow-rotate { 3 | $duration: $mediumDuration; 4 | 5 | @include hacks(); 6 | @include prefixed(transition-duration, $duration); 7 | 8 | .hvr-icon { 9 | @include prefixed(transform, translateZ(0)); 10 | @include prefixed(transition-duration, $duration); 11 | @include prefixed(transition-property, transform); 12 | @include prefixed(transition-timing-function, ease-out); 13 | } 14 | 15 | &:hover, 16 | &:focus, 17 | &:active { 18 | 19 | .hvr-icon { 20 | @include prefixed(transform, scale(1.5) rotate(12deg)); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_border-fade.scss: -------------------------------------------------------------------------------- 1 | /* Border Fade */ 2 | @mixin border-fade { 3 | $borderWidth: 4px; 4 | 5 | @include hacks(); 6 | @include prefixed(transition-duration, $mediumDuration); 7 | @include prefixed(transition-property, box-shadow); 8 | box-shadow: 9 | inset 0 0 0 $borderWidth $primaryColor, 10 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ 11 | 12 | &:hover, 13 | &:focus, 14 | &:active { 15 | box-shadow: 16 | inset 0 0 0 $borderWidth $activeColor, 17 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_trim.less: -------------------------------------------------------------------------------- 1 | /* Trim */ 2 | .trim() { 3 | @outerBorderWidth: 4px; 4 | @innerBorderWidth: 4px; 5 | 6 | .hacks(); 7 | position: relative; 8 | 9 | &:before { 10 | content: ''; 11 | position: absolute; 12 | border: white solid @innerBorderWidth; 13 | top: @outerBorderWidth; 14 | left: @outerBorderWidth; 15 | right: @outerBorderWidth; 16 | bottom: @outerBorderWidth; 17 | opacity: 0; 18 | .prefixed(transition-duration, @mediumDuration); 19 | .prefixed(transition-property, opacity); 20 | } 21 | 22 | &:hover:before, 23 | &:focus:before, 24 | &:active:before { 25 | opacity: 1; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-up.less: -------------------------------------------------------------------------------- 1 | /* Icon Up */ 2 | .keyframes(~"@{nameSpace}-icon-up", { 3 | 0%, 4 | 50%, 5 | 100% { 6 | .prefixed(transform, translateY(0)); 7 | } 8 | 25%, 9 | 75% { 10 | .prefixed(transform, translateY(-6px)); 11 | } 12 | }); 13 | 14 | /* Icon Up */ 15 | .icon-up() { 16 | .hacks(); 17 | 18 | .hvr-icon { 19 | .prefixed(transform, translateZ(0)); 20 | } 21 | 22 | &:hover, 23 | &:focus, 24 | &:active { 25 | 26 | .hvr-icon { 27 | .prefixed(animation-name, ~"@{nameSpace}-icon-up"); 28 | .prefixed(animation-duration, .75s); 29 | .prefixed(animation-timing-function, ease-out); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-down.less: -------------------------------------------------------------------------------- 1 | /* Icon Down */ 2 | .keyframes(~"@{nameSpace}-icon-down", { 3 | 0%, 4 | 50%, 5 | 100% { 6 | .prefixed(transform, translateY(0)); 7 | } 8 | 25%, 9 | 75% { 10 | .prefixed(transform, translateY(6px)); 11 | } 12 | }); 13 | 14 | /* Icon Down */ 15 | .icon-down() { 16 | .hacks(); 17 | 18 | .hvr-icon { 19 | .prefixed(transform, translateZ(0)); 20 | } 21 | 22 | &:hover, 23 | &:focus, 24 | &:active { 25 | 26 | .hvr-icon { 27 | .prefixed(animation-name, ~"@{nameSpace}-icon-down"); 28 | .prefixed(animation-duration, .75s); 29 | .prefixed(animation-timing-function, ease-out); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-bounce.scss: -------------------------------------------------------------------------------- 1 | /* Icon Bounce */ 2 | 3 | @mixin icon-bounce { 4 | @include hacks(); 5 | @include prefixed(transition-duration, $mediumDuration); 6 | 7 | .hvr-icon { 8 | @include prefixed(transform, translateZ(0)); 9 | @include prefixed(transition-duration, $mediumDuration); 10 | @include prefixed(transition-property, transform); 11 | @include prefixed(transition-timing-function, ease-out); 12 | } 13 | 14 | &:hover, 15 | &:focus, 16 | &:active { 17 | 18 | .hvr-icon { 19 | @include prefixed(transform, scale(1.5)); 20 | @include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36)); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_overline-from-left.less: -------------------------------------------------------------------------------- 1 | /* Overline From Left */ 2 | .overline-from-left() { 3 | @duration: @mediumDuration; 4 | 5 | .hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 0; 14 | right: 100%; 15 | top: 0; 16 | background: @activeColor; 17 | height: 4px; 18 | .prefixed(transition-property, "right"); 19 | .prefixed(transition-duration, @duration); 20 | .prefixed(transition-timing-function, ease-out); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | &:before { 28 | right: 0; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_overline-from-right.less: -------------------------------------------------------------------------------- 1 | /* Overline From Right */ 2 | .overline-from-right() { 3 | @duration: @mediumDuration; 4 | 5 | .hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 100%; 14 | right: 0; 15 | top: 0; 16 | background: @activeColor; 17 | height: 4px; 18 | .prefixed(transition-property, "left"); 19 | .prefixed(transition-duration, @duration); 20 | .prefixed(transition-timing-function, ease-out); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | &:before { 28 | left: 0; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_trim.scss: -------------------------------------------------------------------------------- 1 | /* Trim */ 2 | @mixin trim { 3 | $outerBorderWidth: 4px; 4 | $innerBorderWidth: 4px; 5 | 6 | @include hacks(); 7 | position: relative; 8 | 9 | &:before { 10 | content: ''; 11 | position: absolute; 12 | border: white solid $innerBorderWidth; 13 | top: $outerBorderWidth; 14 | left: $outerBorderWidth; 15 | right: $outerBorderWidth; 16 | bottom: $outerBorderWidth; 17 | opacity: 0; 18 | @include prefixed(transition-duration, $mediumDuration); 19 | @include prefixed(transition-property, opacity); 20 | } 21 | 22 | &:hover:before, 23 | &:focus:before, 24 | &:active:before { 25 | opacity: 1; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_underline-from-left.less: -------------------------------------------------------------------------------- 1 | /* Underline From Left */ 2 | .underline-from-left() { 3 | @duration: @mediumDuration; 4 | 5 | .hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 0; 14 | right: 100%; 15 | bottom: 0; 16 | background: @activeColor; 17 | height: 4px; 18 | .prefixed(transition-property, "right"); 19 | .prefixed(transition-duration, @duration); 20 | .prefixed(transition-timing-function, ease-out); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | &:before { 28 | right: 0; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_underline-from-right.less: -------------------------------------------------------------------------------- 1 | /* Underline From Right */ 2 | .underline-from-right() { 3 | @duration: @mediumDuration; 4 | 5 | .hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 100%; 14 | right: 0; 15 | bottom: 0; 16 | background: @activeColor; 17 | height: 4px; 18 | .prefixed(transition-property, "left"); 19 | .prefixed(transition-duration, @duration); 20 | .prefixed(transition-timing-function, ease-out); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | &:before { 28 | left: 0; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /less/effects/speech-bubbles/_bubble-top.less: -------------------------------------------------------------------------------- 1 | /* Bubble Top */ 2 | .bubble-top() { 3 | .hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | z-index: -1; 10 | content: ''; 11 | border-style: solid; 12 | .prefixed(transition-duration, @mediumDuration); 13 | .prefixed(transition-property, transform); 14 | left: calc(~"50%" - @tipWidth); 15 | top: 0; 16 | border-width: 0 @tipWidth @tipHeight @tipWidth; 17 | border-color: transparent transparent @tipColor transparent; 18 | } 19 | 20 | &:hover:before, 21 | &:focus:before, 22 | &:active:before { 23 | .prefixed(transform, translateY(-(@tipHeight))); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /less/effects/speech-bubbles/_bubble-left.less: -------------------------------------------------------------------------------- 1 | /* Bubble Left */ 2 | .bubble-left() { 3 | .hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | z-index: -1; 10 | content: ''; 11 | border-style: solid; 12 | .prefixed(transition-duration, @mediumDuration); 13 | .prefixed(transition-property, transform); 14 | top: calc(~"50%" - @tipHeight); 15 | left: 0; 16 | border-width: @tipHeight @tipWidth @tipHeight 0; 17 | border-color: transparent @tipColor transparent transparent; 18 | } 19 | 20 | &:hover:before, 21 | &:focus:before, 22 | &:active:before { 23 | .prefixed(transform, translateX(-(@tipWidth))); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /less/effects/speech-bubbles/_bubble-right.less: -------------------------------------------------------------------------------- 1 | /* Bubble Right */ 2 | .bubble-right() { 3 | .hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | z-index: -1; 10 | content: ''; 11 | border-style: solid; 12 | .prefixed(transition-duration, @mediumDuration); 13 | .prefixed(transition-property, transform); 14 | top: calc(~"50%" - @tipHeight); 15 | right: 0; 16 | border-width: @tipHeight 0 @tipHeight @tipWidth; 17 | border-color: transparent transparent transparent @tipColor; 18 | } 19 | 20 | &:hover:before, 21 | &:focus:before, 22 | &:active:before { 23 | .prefixed(transform, translateX(@tipWidth)); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /less/effects/speech-bubbles/_bubble-bottom.less: -------------------------------------------------------------------------------- 1 | /* Bubble Bottom */ 2 | .bubble-bottom() { 3 | .hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | z-index: -1; 10 | content: ''; 11 | border-style: solid; 12 | .prefixed(transition-duration, @mediumDuration); 13 | .prefixed(transition-property, transform); 14 | left: calc(~"50%" - @tipWidth); 15 | bottom: 0; 16 | border-width: @tipHeight @tipWidth 0 @tipWidth; 17 | border-color: @tipColor transparent transparent transparent; 18 | } 19 | 20 | &:hover:before, 21 | &:focus:before, 22 | &:active:before { 23 | .prefixed(transform, translateY(@tipHeight)); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_overline-from-center.less: -------------------------------------------------------------------------------- 1 | /* Overline From Center */ 2 | .overline-from-center() { 3 | @duration: @mediumDuration; 4 | 5 | .hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 51%; 14 | right: 51%; 15 | top: 0; 16 | background: @activeColor; 17 | height: 4px; 18 | .prefixed(transition-property, "left, right"); 19 | .prefixed(transition-duration, @duration); 20 | .prefixed(transition-timing-function, ease-out); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | &:before { 28 | left: 0; 29 | right: 0; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-up.scss: -------------------------------------------------------------------------------- 1 | /* Icon Up */ 2 | @include keyframes(#{$nameSpace}-icon-up) { 3 | 0%, 4 | 50%, 5 | 100% { 6 | @include prefixed(transform, translateY(0)); 7 | } 8 | 25%, 9 | 75% { 10 | @include prefixed(transform, translateY(-6px)); 11 | } 12 | } 13 | 14 | /* Icon Up */ 15 | @mixin icon-up { 16 | @include hacks(); 17 | 18 | .hvr-icon { 19 | @include prefixed(transform, translateZ(0)); 20 | } 21 | 22 | &:hover, 23 | &:focus, 24 | &:active { 25 | 26 | .hvr-icon { 27 | @include prefixed(animation-name, #{$nameSpace}-icon-up); 28 | @include prefixed(animation-duration, .75s); 29 | @include prefixed(animation-timing-function, ease-out); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_underline-from-center.less: -------------------------------------------------------------------------------- 1 | /* Underline From Center */ 2 | .underline-from-center() { 3 | @duration: @mediumDuration; 4 | 5 | .hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 51%; 14 | right: 51%; 15 | bottom: 0; 16 | background: @activeColor; 17 | height: 4px; 18 | .prefixed(transition-property, "left, right"); 19 | .prefixed(transition-duration, @duration); 20 | .prefixed(transition-timing-function, ease-out); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | &:before { 28 | left: 0; 29 | right: 0; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-pulse.less: -------------------------------------------------------------------------------- 1 | /* Icon Pulse */ 2 | .keyframes(~"@{nameSpace}-icon-pulse", { 3 | 25% { 4 | .prefixed(transform, scale(1.3)); 5 | } 6 | 7 | 75% { 8 | .prefixed(transform, scale(.8)); 9 | } 10 | }); 11 | 12 | .icon-pulse() { 13 | .hacks(); 14 | 15 | .hvr-icon { 16 | .prefixed(transform, translateZ(0)); 17 | .prefixed(transition-timing-function, ease-out); 18 | } 19 | 20 | &:hover, 21 | &:focus, 22 | &:active { 23 | 24 | .hvr-icon { 25 | .prefixed(animation-name, ~"@{nameSpace}-icon-pulse"); 26 | .prefixed(animation-duration, 1s); 27 | .prefixed(animation-timing-function, linear); 28 | .prefixed(animation-iteration-count, infinite); 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-sink-away.less: -------------------------------------------------------------------------------- 1 | /* Icon Sink Away */ 2 | .keyframes(~"@{nameSpace}-icon-sink-away", { 3 | 0% { 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | .prefixed(transform, translateY(1em)); 10 | } 11 | }); 12 | 13 | /* Icon Sink Away */ 14 | .icon-sink-away() { 15 | .hacks(); 16 | 17 | .hvr-icon { 18 | .prefixed(transform, translateZ(0)); 19 | .prefixed(animation-duration, @slowDuration); 20 | .prefixed(animation-fill-mode, forwards); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | .hvr-icon { 28 | .prefixed(animation-name, ~"@{nameSpace}-icon-sink-away"); 29 | .prefixed(animation-timing-function, ease-out); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_overline-from-left.scss: -------------------------------------------------------------------------------- 1 | /* Overline From Left */ 2 | @mixin overline-from-left { 3 | $duration: $mediumDuration; 4 | 5 | @include hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 0; 14 | right: 100%; 15 | top: 0; 16 | background: $activeColor; 17 | height: 4px; 18 | @include prefixed(transition-property, "right"); 19 | @include prefixed(transition-duration, $duration); 20 | @include prefixed(transition-timing-function, ease-out); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | &:before { 28 | right: 0; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-float-away.less: -------------------------------------------------------------------------------- 1 | /* Icon Float Away */ 2 | .keyframes(~"@{nameSpace}-icon-float-away", { 3 | 0% { 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | .prefixed(transform, translateY(-1em)); 10 | } 11 | }); 12 | 13 | /* Icon Float Away */ 14 | .icon-float-away() { 15 | .hacks(); 16 | 17 | .hvr-icon { 18 | .prefixed(transform, translateZ(0)); 19 | .prefixed(animation-duration, @slowDuration); 20 | .prefixed(animation-fill-mode, forwards); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | .hvr-icon { 28 | .prefixed(animation-name, ~"@{nameSpace}-icon-float-away"); 29 | .prefixed(animation-timing-function, ease-out); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_overline-from-right.scss: -------------------------------------------------------------------------------- 1 | /* Overline From Right */ 2 | @mixin overline-from-right { 3 | $duration: $mediumDuration; 4 | 5 | @include hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 100%; 14 | right: 0; 15 | top: 0; 16 | background: $activeColor; 17 | height: 4px; 18 | @include prefixed(transition-property, "left"); 19 | @include prefixed(transition-duration, $duration); 20 | @include prefixed(transition-timing-function, ease-out); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | &:before { 28 | left: 0; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_underline-from-left.scss: -------------------------------------------------------------------------------- 1 | /* Underline From Left */ 2 | @mixin underline-from-left { 3 | $duration: $mediumDuration; 4 | 5 | @include hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 0; 14 | right: 100%; 15 | bottom: 0; 16 | background: $activeColor; 17 | height: 4px; 18 | @include prefixed(transition-property, "right"); 19 | @include prefixed(transition-duration, $duration); 20 | @include prefixed(transition-timing-function, ease-out); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | &:before { 28 | right: 0; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_underline-from-right.scss: -------------------------------------------------------------------------------- 1 | /* Underline From Right */ 2 | @mixin underline-from-right { 3 | $duration: $mediumDuration; 4 | 5 | @include hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 100%; 14 | right: 0; 15 | bottom: 0; 16 | background: $activeColor; 17 | height: 4px; 18 | @include prefixed(transition-property, "left"); 19 | @include prefixed(transition-duration, $duration); 20 | @include prefixed(transition-timing-function, ease-out); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | &:before { 28 | left: 0; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-down.scss: -------------------------------------------------------------------------------- 1 | /* Icon Down */ 2 | @include keyframes(#{$nameSpace}-icon-down) { 3 | 0%, 4 | 50%, 5 | 100% { 6 | @include prefixed(transform, translateY(0)); 7 | } 8 | 25%, 9 | 75% { 10 | @include prefixed(transform, translateY(6px)); 11 | } 12 | } 13 | 14 | /* Icon Down */ 15 | @mixin icon-down { 16 | @include hacks(); 17 | 18 | .hvr-icon { 19 | @include prefixed(transform, translateZ(0)); 20 | } 21 | 22 | &:hover, 23 | &:focus, 24 | &:active { 25 | 26 | .hvr-icon { 27 | @include prefixed(animation-name, #{$nameSpace}-icon-down); 28 | @include prefixed(animation-duration, .75s); 29 | @include prefixed(animation-timing-function, ease-out); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hover.css", 3 | "author": "Ian Lunn", 4 | "version": "2.3.2", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/IanLunn/Hover" 8 | }, 9 | "bugs": { 10 | "url": "https://github.com/IanLunn/Hover/issues" 11 | }, 12 | "style": "css/hover.css", 13 | "sass": "scss/hover.scss", 14 | "main": "css/hover.css", 15 | "devDependencies": { 16 | "grunt": "~0.4.1", 17 | "grunt-contrib-connect": "~0.5.0", 18 | "grunt-contrib-cssmin": "~0.7.0", 19 | "grunt-contrib-less": "^1.0.0", 20 | "grunt-contrib-sass": "~0.6.0", 21 | "grunt-contrib-watch": "~0.5.3", 22 | "grunt-version": "^0.3.0", 23 | "load-grunt-tasks": "~3.3.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /scss/effects/speech-bubbles/_bubble-left.scss: -------------------------------------------------------------------------------- 1 | /* Bubble Left */ 2 | @mixin bubble-left { 3 | @include hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | z-index: -1; 10 | content: ''; 11 | border-style: solid; 12 | @include prefixed(transition-duration, $mediumDuration); 13 | @include prefixed(transition-property, transform); 14 | top: calc(50% - #{$tipHeight}); 15 | left: 0; 16 | border-width: $tipHeight $tipWidth $tipHeight 0; 17 | border-color: transparent $tipColor transparent transparent; 18 | } 19 | 20 | &:hover:before, 21 | &:focus:before, 22 | &:active:before { 23 | @include prefixed(transform, translateX(-($tipWidth))); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /scss/effects/speech-bubbles/_bubble-top.scss: -------------------------------------------------------------------------------- 1 | /* Bubble Top */ 2 | @mixin bubble-top { 3 | @include hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | z-index: -1; 10 | content: ''; 11 | border-style: solid; 12 | @include prefixed(transition-duration, $mediumDuration); 13 | @include prefixed(transition-property, transform); 14 | left: calc(50% - #{$tipWidth}); 15 | top: 0; 16 | border-width: 0 $tipWidth $tipHeight $tipWidth; 17 | border-color: transparent transparent $tipColor transparent; 18 | } 19 | 20 | &:hover:before, 21 | &:focus:before, 22 | &:active:before { 23 | @include prefixed(transform, translateY(-($tipHeight))); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-bounce-out.less: -------------------------------------------------------------------------------- 1 | /* Icon Bounce Out */ 2 | .keyframes(~"@{nameSpace}-icon-bounce-out", { 3 | 50% { 4 | .prefixed(transform, scale(1.5)); 5 | } 6 | }); 7 | 8 | .icon-bounce-out() { 9 | .hacks(); 10 | .prefixed(transition-duration, @mediumDuration); 11 | 12 | .hvr-icon { 13 | .prefixed(transform, translateZ(0)); 14 | .prefixed(transition-duration, @mediumDuration); 15 | .prefixed(transition-property, transform); 16 | .prefixed(transition-timing-function, ease-out); 17 | } 18 | 19 | &:hover, 20 | &:focus, 21 | &:active { 22 | 23 | .hvr-icon { 24 | .prefixed(transform, scale(.9)); 25 | .prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36)); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-pulse-grow.less: -------------------------------------------------------------------------------- 1 | /* Icon Pulse Grow */ 2 | .keyframes(~"@{nameSpace}-icon-pulse-grow", { 3 | to { 4 | .prefixed(transform, scale(1.3)); 5 | } 6 | }); 7 | 8 | .icon-pulse-grow() { 9 | .hacks(); 10 | 11 | .hvr-icon { 12 | .prefixed(transform, translateZ(0)); 13 | .prefixed(transition-timing-function, ease-out); 14 | } 15 | 16 | &:hover, 17 | &:focus, 18 | &:active { 19 | 20 | .hvr-icon { 21 | .prefixed(animation-name, ~"@{nameSpace}-icon-pulse-grow"); 22 | .prefixed(animation-duration, @mediumDuration); 23 | .prefixed(animation-timing-function, linear); 24 | .prefixed(animation-iteration-count, infinite); 25 | .prefixed(animation-direction, alternate); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /scss/effects/speech-bubbles/_bubble-bottom.scss: -------------------------------------------------------------------------------- 1 | /* Bubble Bottom */ 2 | @mixin bubble-bottom { 3 | @include hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | z-index: -1; 10 | content: ''; 11 | border-style: solid; 12 | @include prefixed(transition-duration, $mediumDuration); 13 | @include prefixed(transition-property, transform); 14 | left: calc(50% - #{$tipWidth}); 15 | bottom: 0; 16 | border-width: $tipHeight $tipWidth 0 $tipWidth; 17 | border-color: $tipColor transparent transparent transparent; 18 | } 19 | 20 | &:hover:before, 21 | &:focus:before, 22 | &:active:before { 23 | @include prefixed(transform, translateY($tipHeight)); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /scss/effects/speech-bubbles/_bubble-right.scss: -------------------------------------------------------------------------------- 1 | /* Bubble Right */ 2 | @mixin bubble-right { 3 | @include hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | z-index: -1; 10 | content: ''; 11 | border-style: solid; 12 | @include prefixed(transition-duration, $mediumDuration); 13 | @include prefixed(transition-property, transform); 14 | top: calc(50% - #{$tipHeight}); 15 | right: 0; 16 | border-width: $tipHeight 0 $tipHeight $tipWidth; 17 | border-color: transparent transparent transparent $tipColor; 18 | } 19 | 20 | &:hover:before, 21 | &:focus:before, 22 | &:active:before { 23 | @include prefixed(transform, translateX($tipWidth)); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_overline-reveal.less: -------------------------------------------------------------------------------- 1 | /* Overline Reveal */ 2 | .overline-reveal() { 3 | @duration: @mediumDuration; 4 | 5 | .hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 0; 14 | right: 0; 15 | top: 0; 16 | background: @activeColor; 17 | height: 4px; 18 | .prefixed(transform, translateY(-4px)); 19 | .prefixed(transition-property, transform); 20 | .prefixed(transition-duration, @duration); 21 | .prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | 28 | &:before { 29 | .prefixed(transform, translateY(0)); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_overline-from-center.scss: -------------------------------------------------------------------------------- 1 | /* Overline From Center */ 2 | @mixin overline-from-center { 3 | $duration: $mediumDuration; 4 | 5 | @include hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 51%; 14 | right: 51%; 15 | top: 0; 16 | background: $activeColor; 17 | height: 4px; 18 | @include prefixed(transition-property, "left, right"); 19 | @include prefixed(transition-duration, $duration); 20 | @include prefixed(transition-timing-function, ease-out); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | &:before { 28 | left: 0; 29 | right: 0; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_reveal.less: -------------------------------------------------------------------------------- 1 | /* Reveal */ 2 | .reveal() { 3 | @duration: @fastDuration; 4 | 5 | .hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 0; 14 | right: 0; 15 | top: 0; 16 | bottom: 0; 17 | border-color: @activeColor; 18 | border-style: solid; 19 | border-width: 0; 20 | .prefixed(transition-property, border-width); 21 | .prefixed(transition-duration, @duration); 22 | .prefixed(transition-timing-function, ease-out); 23 | } 24 | 25 | &:hover, 26 | &:focus, 27 | &:active { 28 | 29 | &:before { 30 | .prefixed(transform, translateY(0)); 31 | border-width: 4px; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_underline-reveal.less: -------------------------------------------------------------------------------- 1 | /* Underline Reveal */ 2 | .underline-reveal() { 3 | @duration: @mediumDuration; 4 | 5 | .hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: @activeColor; 17 | height: 4px; 18 | .prefixed(transform, translateY(4px)); 19 | .prefixed(transition-property, transform); 20 | .prefixed(transition-duration, @duration); 21 | .prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | 28 | &:before { 29 | .prefixed(transform, translateY(0)); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-pulse-shrink.less: -------------------------------------------------------------------------------- 1 | /* Icon Pulse Shrink */ 2 | .keyframes(~"@{nameSpace}-icon-pulse-shrink", { 3 | to { 4 | .prefixed(transform, scale(.8)); 5 | } 6 | }); 7 | 8 | .icon-pulse-shrink() { 9 | .hacks(); 10 | 11 | .hvr-icon { 12 | .prefixed(transform, translateZ(0)); 13 | .prefixed(transition-timing-function, ease-out); 14 | } 15 | 16 | &:hover, 17 | &:focus, 18 | &:active { 19 | 20 | .hvr-icon { 21 | .prefixed(animation-name, ~"@{nameSpace}-icon-pulse-shrink"); 22 | .prefixed(animation-duration, @mediumDuration); 23 | .prefixed(animation-timing-function, linear); 24 | .prefixed(animation-iteration-count, infinite); 25 | .prefixed(animation-direction, alternate); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-buzz.less: -------------------------------------------------------------------------------- 1 | /* Icon Buzz */ 2 | .keyframes(~"@{nameSpace}-icon-buzz", { 3 | 50% { 4 | .prefixed(transform, translateX(3px) rotate(2deg)); 5 | } 6 | 7 | 100% { 8 | .prefixed(transform, translateX(-3px) rotate(-2deg)); 9 | } 10 | }); 11 | 12 | .icon-buzz() { 13 | .hacks(); 14 | .prefixed(transition-duration, @mediumDuration); 15 | 16 | .hvr-icon { 17 | .prefixed(transform, translateZ(0)); 18 | } 19 | 20 | &:hover, 21 | &:focus, 22 | &:active { 23 | 24 | .hvr-icon { 25 | .prefixed(animation-name, ~"@{nameSpace}-icon-buzz"); 26 | .prefixed(animation-duration, .15s); 27 | .prefixed(animation-timing-function, linear); 28 | .prefixed(animation-iteration-count, infinite); 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_underline-from-center.scss: -------------------------------------------------------------------------------- 1 | /* Underline From Center */ 2 | @mixin underline-from-center { 3 | $duration: $mediumDuration; 4 | 5 | @include hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 51%; 14 | right: 51%; 15 | bottom: 0; 16 | background: $activeColor; 17 | height: 4px; 18 | @include prefixed(transition-property, "left, right"); 19 | @include prefixed(transition-duration, $duration); 20 | @include prefixed(transition-timing-function, ease-out); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | &:before { 28 | left: 0; 29 | right: 0; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-sink-away.scss: -------------------------------------------------------------------------------- 1 | /* Icon Sink Away */ 2 | @include keyframes(#{$nameSpace}-icon-sink-away) { 3 | 0% { 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | @include prefixed(transform, translateY(1em)); 10 | } 11 | } 12 | 13 | /* Icon Sink Away */ 14 | @mixin icon-sink-away { 15 | @include hacks(); 16 | 17 | .hvr-icon { 18 | @include prefixed(transform, translateZ(0)); 19 | @include prefixed(animation-duration, #{$slowDuration}); 20 | @include prefixed(animation-fill-mode, forwards); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | .hvr-icon { 28 | @include prefixed(animation-name, #{$nameSpace}-icon-sink-away); 29 | @include prefixed(animation-timing-function, ease-out); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_ripple-out.less: -------------------------------------------------------------------------------- 1 | /* Ripple Out */ 2 | .keyframes(~"@{nameSpace}-ripple-out", { 3 | 100% { 4 | top: -(6px + 6px); 5 | right: -(6px + 6px); 6 | bottom: -(6px + 6px); 7 | left: -(6px + 6px); 8 | opacity: 0; 9 | } 10 | }); 11 | 12 | .ripple-out() { 13 | @outerBorderWidth: 6px; 14 | @innerBorderWidth: 6px; 15 | 16 | .hacks(); 17 | position: relative; 18 | 19 | &:before { 20 | content: ''; 21 | position: absolute; 22 | border: @primaryColor solid @outerBorderWidth; 23 | top: 0; 24 | right: 0; 25 | bottom: 0; 26 | left: 0; 27 | .prefixed(animation-duration, 1s); 28 | } 29 | 30 | &:hover:before, 31 | &:focus:before, 32 | &:active:before { 33 | .prefixed(animation-name, ~"@{nameSpace}-ripple-out"); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-float-away.scss: -------------------------------------------------------------------------------- 1 | /* Icon Float Away */ 2 | @include keyframes(#{$nameSpace}-icon-float-away) { 3 | 0% { 4 | opacity: 1; 5 | } 6 | 7 | 100% { 8 | opacity: 0; 9 | @include prefixed(transform, translateY(-1em)); 10 | } 11 | } 12 | 13 | /* Icon Float Away */ 14 | @mixin icon-float-away { 15 | @include hacks(); 16 | 17 | .hvr-icon { 18 | @include prefixed(transform, translateZ(0)); 19 | @include prefixed(animation-duration, #{$slowDuration}); 20 | @include prefixed(animation-fill-mode, forwards); 21 | } 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | 27 | .hvr-icon { 28 | @include prefixed(animation-name, #{$nameSpace}-icon-float-away); 29 | @include prefixed(animation-timing-function, ease-out); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_overline-reveal.scss: -------------------------------------------------------------------------------- 1 | /* Overline Reveal */ 2 | @mixin overline-reveal { 3 | $duration: $mediumDuration; 4 | 5 | @include hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 0; 14 | right: 0; 15 | top: 0; 16 | background: $activeColor; 17 | height: 4px; 18 | @include prefixed(transform, translateY(-4px)); 19 | @include prefixed(transition-property, transform); 20 | @include prefixed(transition-duration, $duration); 21 | @include prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | 28 | &:before { 29 | @include prefixed(transform, translateY(0)); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-pulse.scss: -------------------------------------------------------------------------------- 1 | /* Icon Pulse */ 2 | @include keyframes(#{$nameSpace}-icon-pulse) { 3 | 25% { 4 | @include prefixed(transform, scale(1.3)); 5 | } 6 | 7 | 75% { 8 | @include prefixed(transform, scale(.8)); 9 | } 10 | } 11 | 12 | @mixin icon-pulse { 13 | @include hacks(); 14 | 15 | .hvr-icon { 16 | @include prefixed(transform, translateZ(0)); 17 | @include prefixed(transition-timing-function, ease-out); 18 | } 19 | 20 | &:hover, 21 | &:focus, 22 | &:active { 23 | 24 | .hvr-icon { 25 | @include prefixed(animation-name, #{$nameSpace}-icon-pulse); 26 | @include prefixed(animation-duration, 1s); 27 | @include prefixed(animation-timing-function, linear); 28 | @include prefixed(animation-iteration-count, infinite); 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_ripple-in.less: -------------------------------------------------------------------------------- 1 | /* Ripple In */ 2 | .keyframes(~"@{nameSpace}-ripple-in", { 3 | 100% { 4 | top: 0; 5 | right: 0; 6 | bottom: 0; 7 | left: 0; 8 | opacity: 1; 9 | } 10 | }); 11 | 12 | .ripple-in() { 13 | @outerBorderWidth: 4px; 14 | @innerBorderWidth: 4px; 15 | 16 | .hacks(); 17 | position: relative; 18 | 19 | &:before { 20 | content: ''; 21 | position: absolute; 22 | border: @primaryColor solid @outerBorderWidth; 23 | top: -(6px + 6px); 24 | right: -(6px + 6px); 25 | bottom: -(6px + 6px); 26 | left: -(6px + 6px); 27 | opacity: 0; 28 | .prefixed(animation-duration, 1s); 29 | } 30 | 31 | &:hover:before, 32 | &:focus:before, 33 | &:active:before { 34 | .prefixed(animation-name, ~"@{nameSpace}-ripple-in"); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_underline-reveal.scss: -------------------------------------------------------------------------------- 1 | /* Underline Reveal */ 2 | @mixin underline-reveal { 3 | $duration: $mediumDuration; 4 | 5 | @include hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: $activeColor; 17 | height: 4px; 18 | @include prefixed(transform, translateY(4px)); 19 | @include prefixed(transition-property, transform); 20 | @include prefixed(transition-duration, $duration); 21 | @include prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | 28 | &:before { 29 | @include prefixed(transform, translateY(0)); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_back-pulse.less: -------------------------------------------------------------------------------- 1 | /* Back Pulse */ 2 | .keyframes(~"@{nameSpace}-back-pulse", { 3 | 50% { 4 | background-color: rgba(32, 152, 209, .75); 5 | } 6 | }); 7 | 8 | .back-pulse() { 9 | .hacks(); 10 | overflow: hidden; 11 | .prefixed(transition-duration, @slowDuration); 12 | .prefixed(transition-property, "color, background-color"); 13 | 14 | &:hover, 15 | &:focus, 16 | &:active { 17 | .prefixed(animation-name, ~"@{nameSpace}-back-pulse"); 18 | .prefixed(animation-duration, 1s); 19 | .prefixed(animation-delay, @slowDuration); 20 | .prefixed(animation-timing-function, linear); 21 | .prefixed(animation-iteration-count, infinite); 22 | background-color: @activeColor; 23 | background-color: rgba(32, 152, 209, 1); 24 | color: white; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_outline-out.less: -------------------------------------------------------------------------------- 1 | /* Outline Out */ 2 | .outline-out() { 3 | @outerBorderWidth: 4px; 4 | @innerBorderWidth: 4px; 5 | 6 | .hacks(); 7 | position: relative; 8 | 9 | &:before { 10 | content: ''; 11 | position: absolute; 12 | border: @primaryColor solid @outerBorderWidth; 13 | top: 0; 14 | right: 0; 15 | bottom: 0; 16 | left: 0; 17 | .prefixed(transition-duration, .3s); 18 | .prefixed(transition-property, "top, right, bottom, left"); 19 | } 20 | 21 | &:hover:before, 22 | &:focus:before, 23 | &:active:before { 24 | top: -(@outerBorderWidth + @innerBorderWidth); 25 | right: -(@outerBorderWidth + @innerBorderWidth); 26 | bottom: -(@outerBorderWidth + @innerBorderWidth); 27 | left: -(@outerBorderWidth + @innerBorderWidth); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_reveal.scss: -------------------------------------------------------------------------------- 1 | /* Reveal */ 2 | @mixin reveal { 3 | $duration: #{$fastDuration}; 4 | 5 | @include hacks(); 6 | position: relative; 7 | overflow: hidden; 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | left: 0; 14 | right: 0; 15 | top: 0; 16 | bottom: 0; 17 | border-color: #{$activeColor}; 18 | border-style: solid; 19 | border-width: 0; 20 | @include prefixed(transition-property, border-width); 21 | @include prefixed(transition-duration, #{$duration}); 22 | @include prefixed(transition-timing-function, ease-out); 23 | } 24 | 25 | &:hover, 26 | &:focus, 27 | &:active { 28 | 29 | &:before { 30 | @include prefixed(transform, translateY(0)); 31 | border-width: 4px; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-pop.less: -------------------------------------------------------------------------------- 1 | /* Icon Pop */ 2 | .keyframes(~"@{nameSpace}-icon-pop", { 3 | 50% { 4 | .prefixed(transform, scale(1.5)); 5 | } 6 | }); 7 | 8 | .icon-pop() { 9 | .hacks(); 10 | .prefixed(transition-duration, @mediumDuration); 11 | 12 | .hvr-icon { 13 | .prefixed(transform, translateZ(0)); 14 | .prefixed(transition-duration, @mediumDuration); 15 | .prefixed(transition-property, transform); 16 | .prefixed(transition-timing-function, ease-out); 17 | } 18 | 19 | &:hover, 20 | &:focus, 21 | &:active { 22 | 23 | .hvr-icon { 24 | .prefixed(animation-name, ~"@{nameSpace}-icon-pop"); 25 | .prefixed(animation-duration, @mediumDuration); 26 | .prefixed(animation-timing-function, linear); 27 | .prefixed(animation-iteration-count, 1); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-push.less: -------------------------------------------------------------------------------- 1 | /* Icon Push */ 2 | .keyframes(~"@{nameSpace}-icon-push", { 3 | 50% { 4 | .prefixed(transform, scale(.5)); 5 | } 6 | }); 7 | 8 | .icon-push() { 9 | .hacks(); 10 | .prefixed(transition-duration, @mediumDuration); 11 | 12 | .hvr-icon { 13 | .prefixed(transform, translateZ(0)); 14 | .prefixed(transition-duration, @mediumDuration); 15 | .prefixed(transition-property, transform); 16 | .prefixed(transition-timing-function, ease-out); 17 | } 18 | 19 | &:hover, 20 | &:focus, 21 | &:active { 22 | 23 | .hvr-icon { 24 | .prefixed(animation-name, ~"@{nameSpace}-icon-push"); 25 | .prefixed(animation-duration, @mediumDuration); 26 | .prefixed(animation-timing-function, linear); 27 | .prefixed(animation-iteration-count, 1); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_ripple-out.scss: -------------------------------------------------------------------------------- 1 | /* Ripple Out */ 2 | @include keyframes(#{$nameSpace}-ripple-out) { 3 | 100% { 4 | top: -(6px + 6px); 5 | right: -(6px + 6px); 6 | bottom: -(6px + 6px); 7 | left: -(6px + 6px); 8 | opacity: 0; 9 | } 10 | } 11 | 12 | @mixin ripple-out { 13 | $outerBorderWidth: 6px; 14 | $innerBorderWidth: 6px; 15 | 16 | @include hacks(); 17 | position: relative; 18 | 19 | &:before { 20 | content: ''; 21 | position: absolute; 22 | border: $primaryColor solid $outerBorderWidth; 23 | top: 0; 24 | right: 0; 25 | bottom: 0; 26 | left: 0; 27 | @include prefixed(animation-duration, 1s); 28 | } 29 | 30 | &:hover:before, 31 | &:focus:before, 32 | &:active:before { 33 | @include prefixed(animation-name, #{$nameSpace}-ripple-out); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-pulse-grow.scss: -------------------------------------------------------------------------------- 1 | /* Icon Pulse Grow */ 2 | @include keyframes(#{$nameSpace}-icon-pulse-grow) { 3 | to { 4 | @include prefixed(transform, scale(1.3)); 5 | } 6 | } 7 | 8 | @mixin icon-pulse-grow { 9 | @include hacks(); 10 | 11 | .hvr-icon { 12 | @include prefixed(transform, translateZ(0)); 13 | @include prefixed(transition-timing-function, ease-out); 14 | } 15 | 16 | &:hover, 17 | &:focus, 18 | &:active { 19 | 20 | .hvr-icon { 21 | @include prefixed(animation-name, #{$nameSpace}-icon-pulse-grow); 22 | @include prefixed(animation-duration, $mediumDuration); 23 | @include prefixed(animation-timing-function, linear); 24 | @include prefixed(animation-iteration-count, infinite); 25 | @include prefixed(animation-direction, alternate); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_rectangle-in.less: -------------------------------------------------------------------------------- 1 | /* Rectangle In */ 2 | .rectangle-in() { 3 | .hacks(); 4 | position: relative; 5 | background: @activeColor; 6 | .prefixed(transition-property, color); 7 | .prefixed(transition-duration, @mediumDuration); 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | background: @primaryColor; 18 | .prefixed(transform, scale(1)); 19 | .prefixed(transition-property, transform); 20 | .prefixed(transition-duration, @mediumDuration); 21 | .prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | .prefixed(transform, scale(0)); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-bounce-out.scss: -------------------------------------------------------------------------------- 1 | /* Icon Bounce Out */ 2 | @include keyframes(#{$nameSpace}-icon-bounce-out) { 3 | 50% { 4 | @include prefixed(transform, scale(1.5)); 5 | } 6 | } 7 | 8 | @mixin icon-bounce-out { 9 | @include hacks(); 10 | @include prefixed(transition-duration, $mediumDuration); 11 | 12 | .hvr-icon { 13 | @include prefixed(transform, translateZ(0)); 14 | @include prefixed(transition-duration, $mediumDuration); 15 | @include prefixed(transition-property, transform); 16 | @include prefixed(transition-timing-function, ease-out); 17 | } 18 | 19 | &:hover, 20 | &:focus, 21 | &:active { 22 | 23 | .hvr-icon { 24 | @include prefixed(transform, scale(.9)); 25 | @include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36)); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_rectangle-out.less: -------------------------------------------------------------------------------- 1 | /* Rectangle Out */ 2 | .rectangle-out() { 3 | .hacks(); 4 | position: relative; 5 | background: @primaryColor; 6 | .prefixed(transition-property, color); 7 | .prefixed(transition-duration, @mediumDuration); 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | background: @activeColor; 18 | .prefixed(transform, scale(0)); 19 | .prefixed(transition-property, transform); 20 | .prefixed(transition-duration, @mediumDuration); 21 | .prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | .prefixed(transform, scale(1)); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /less/effects/curls/_curl-top-right.less: -------------------------------------------------------------------------------- 1 | /* Curl Top Right */ 2 | .curl-top-right() { 3 | .hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | content: ''; 10 | height: 0; 11 | width: 0; 12 | top: 0; 13 | right: 0; 14 | background: @revealAreaColor; /* IE9 */ 15 | background: linear-gradient( 16 | 225deg, 17 | @revealAreaColor 45%, 18 | @curlLineColor 50%, 19 | @curlTransitionColor 56%, 20 | @curlLastColor 80% 21 | ); 22 | box-shadow: -1px 1px 1px rgba(0, 0, 0, .4); 23 | .prefixed(transition-duration, @mediumDuration); 24 | .prefixed(transition-property, ~"width, height"); 25 | } 26 | 27 | &:hover:before, 28 | &:focus:before, 29 | &:active:before { 30 | width: @curlWidth; 31 | height: @curlHeight; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-pulse-shrink.scss: -------------------------------------------------------------------------------- 1 | /* Icon Pulse Shrink */ 2 | @include keyframes(#{$nameSpace}-icon-pulse-shrink) { 3 | to { 4 | @include prefixed(transform, scale(.8)); 5 | } 6 | } 7 | 8 | @mixin icon-pulse-shrink { 9 | @include hacks(); 10 | 11 | .hvr-icon { 12 | @include prefixed(transform, translateZ(0)); 13 | @include prefixed(transition-timing-function, ease-out); 14 | } 15 | 16 | &:hover, 17 | &:focus, 18 | &:active { 19 | 20 | .hvr-icon { 21 | @include prefixed(animation-name, #{$nameSpace}-icon-pulse-shrink); 22 | @include prefixed(animation-duration, $mediumDuration); 23 | @include prefixed(animation-timing-function, linear); 24 | @include prefixed(animation-iteration-count, infinite); 25 | @include prefixed(animation-direction, alternate); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_ripple-in.scss: -------------------------------------------------------------------------------- 1 | /* Ripple In */ 2 | @include keyframes(#{$nameSpace}-ripple-in) { 3 | 100% { 4 | top: 0; 5 | right: 0; 6 | bottom: 0; 7 | left: 0; 8 | opacity: 1; 9 | } 10 | } 11 | 12 | @mixin ripple-in { 13 | $outerBorderWidth: 4px; 14 | $innerBorderWidth: 4px; 15 | 16 | @include hacks(); 17 | position: relative; 18 | 19 | &:before { 20 | content: ''; 21 | position: absolute; 22 | border: $primaryColor solid $outerBorderWidth; 23 | top: -(6px + 6px); 24 | right: -(6px + 6px); 25 | bottom: -(6px + 6px); 26 | left: -(6px + 6px); 27 | opacity: 0; 28 | @include prefixed(animation-duration, 1s); 29 | } 30 | 31 | &:hover:before, 32 | &:focus:before, 33 | &:active:before { 34 | @include prefixed(animation-name, #{$nameSpace}-ripple-in); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-buzz.scss: -------------------------------------------------------------------------------- 1 | /* Icon Buzz */ 2 | @include keyframes(#{$nameSpace}-icon-buzz) { 3 | 50% { 4 | @include prefixed(transform, translateX(3px) rotate(2deg)); 5 | } 6 | 7 | 100% { 8 | @include prefixed(transform, translateX(-3px) rotate(-2deg)); 9 | } 10 | } 11 | 12 | @mixin icon-buzz { 13 | @include hacks(); 14 | @include prefixed(transition-duration, $mediumDuration); 15 | 16 | .hvr-icon { 17 | @include prefixed(transform, translateZ(0)); 18 | } 19 | 20 | &:hover, 21 | &:focus, 22 | &:active { 23 | 24 | .hvr-icon { 25 | @include prefixed(animation-name, #{$nameSpace}-icon-buzz); 26 | @include prefixed(animation-duration, .15s); 27 | @include prefixed(animation-timing-function, linear); 28 | @include prefixed(animation-iteration-count, infinite); 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_sweep-to-top.less: -------------------------------------------------------------------------------- 1 | /* Sweep To Top */ 2 | .sweep-to-top() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-property, color); 6 | .prefixed(transition-duration, @mediumDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: @activeColor; 17 | .prefixed(transform, scaleY(0)); 18 | .prefixed(transform-origin, 50% 100%); 19 | .prefixed(transition-property, transform); 20 | .prefixed(transition-duration, @mediumDuration); 21 | .prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | .prefixed(transform, scaleY(1)); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /less/effects/curls/_curl-bottom-left.less: -------------------------------------------------------------------------------- 1 | /* Curl Bottom Left */ 2 | .curl-bottom-left() { 3 | .hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | content: ''; 10 | height: 0; 11 | width: 0; 12 | bottom: 0; 13 | left: 0; 14 | background: @revealAreaColor; /* IE9 */ 15 | background: linear-gradient( 16 | 45deg, 17 | @revealAreaColor 45%, 18 | @curlLineColor 50%, 19 | @curlTransitionColor 56%, 20 | @curlLastColor 80% 21 | ); 22 | box-shadow: 1px -1px 1px rgba(0, 0, 0, .4); 23 | .prefixed(transition-duration, @mediumDuration); 24 | .prefixed(transition-property, ~"width, height"); 25 | } 26 | 27 | &:hover:before, 28 | &:focus:before, 29 | &:active:before { 30 | width: @curlWidth; 31 | height: @curlHeight; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_outline-out.scss: -------------------------------------------------------------------------------- 1 | /* Outline Out */ 2 | @mixin outline-out { 3 | $outerBorderWidth: 4px; 4 | $innerBorderWidth: 4px; 5 | 6 | @include hacks(); 7 | position: relative; 8 | 9 | &:before { 10 | content: ''; 11 | position: absolute; 12 | border: $primaryColor solid $outerBorderWidth; 13 | top: 0; 14 | right: 0; 15 | bottom: 0; 16 | left: 0; 17 | @include prefixed(transition-duration, .3s); 18 | @include prefixed(transition-property, "top, right, bottom, left"); 19 | } 20 | 21 | &:hover:before, 22 | &:focus:before, 23 | &:active:before { 24 | top: -($outerBorderWidth + $innerBorderWidth); 25 | right: -($outerBorderWidth + $innerBorderWidth); 26 | bottom: -($outerBorderWidth + $innerBorderWidth); 27 | left: -($outerBorderWidth + $innerBorderWidth); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_sweep-to-bottom.less: -------------------------------------------------------------------------------- 1 | /* Sweep To Bottom */ 2 | .sweep-to-bottom() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-property, color); 6 | .prefixed(transition-duration, @mediumDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: @activeColor; 17 | .prefixed(transform, scaleY(0)); 18 | .prefixed(transform-origin, 50% 0); 19 | .prefixed(transition-property, transform); 20 | .prefixed(transition-duration, @mediumDuration); 21 | .prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | .prefixed(transform, scaleY(1)); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_sweep-to-left.less: -------------------------------------------------------------------------------- 1 | /* Sweep To Left */ 2 | .sweep-to-left() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-property, color); 6 | .prefixed(transition-duration, @mediumDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: @activeColor; 17 | .prefixed(transform, scaleX(0)); 18 | .prefixed(transform-origin, 100% 50%); 19 | .prefixed(transition-property, transform); 20 | .prefixed(transition-duration, @mediumDuration); 21 | .prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | .prefixed(transform, scaleX(1)); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_sweep-to-right.less: -------------------------------------------------------------------------------- 1 | /* Sweep To Right */ 2 | .sweep-to-right() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-property, color); 6 | .prefixed(transition-duration, @mediumDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: @activeColor; 17 | .prefixed(transform, scaleX(0)); 18 | .prefixed(transform-origin, 0 50%); 19 | .prefixed(transition-property, transform); 20 | .prefixed(transition-duration, @mediumDuration); 21 | .prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | .prefixed(transform, scaleX(1)); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /less/effects/curls/_curl-bottom-right.less: -------------------------------------------------------------------------------- 1 | /* Curl Bottom Right */ 2 | .curl-bottom-right() { 3 | .hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | content: ''; 10 | height: 0; 11 | width: 0; 12 | bottom: 0; 13 | right: 0; 14 | background: @revealAreaColor; /* IE9 */ 15 | background: linear-gradient( 16 | 315deg, 17 | @revealAreaColor 45%, 18 | @curlLineColor 50%, 19 | @curlTransitionColor 56%, 20 | @curlLastColor 80% 21 | ); 22 | box-shadow: -1px -1px 1px rgba(0, 0, 0, .4); 23 | .prefixed(transition-duration, @mediumDuration); 24 | .prefixed(transition-property, ~"width, height"); 25 | } 26 | 27 | &:hover:before, 28 | &:focus:before, 29 | &:active:before { 30 | width: @curlWidth; 31 | height: @curlHeight; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_wobble-skew.less: -------------------------------------------------------------------------------- 1 | /* Wobble Skew */ 2 | .keyframes(~"@{nameSpace}-wobble-skew", { 3 | 16.65% { 4 | .prefixed(transform, skew(-12deg)); 5 | } 6 | 7 | 33.3% { 8 | .prefixed(transform, skew(10deg)); 9 | } 10 | 11 | 49.95% { 12 | .prefixed(transform, skew(-6deg)); 13 | } 14 | 15 | 66.6% { 16 | .prefixed(transform, skew(4deg)); 17 | } 18 | 19 | 83.25% { 20 | .prefixed(transform, skew(-2deg)); 21 | } 22 | 23 | 100% { 24 | .prefixed(transform, skew(0)); 25 | } 26 | }); 27 | 28 | .wobble-skew() { 29 | .hacks(); 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | .prefixed(animation-name, ~"@{nameSpace}-wobble-skew"); 35 | .prefixed(animation-duration, 1s); 36 | .prefixed(animation-timing-function, ease-in-out); 37 | .prefixed(animation-iteration-count, 1); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /less/effects/speech-bubbles/_bubble-float-top.less: -------------------------------------------------------------------------------- 1 | /* Bubble Float Top */ 2 | .bubble-float-top() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-duration, @mediumDuration); 6 | .prefixed(transition-property, transform); 7 | 8 | &:before { 9 | position: absolute; 10 | z-index: -1; 11 | content: ''; 12 | left: calc(~"50%" - @tipWidth); 13 | top: 0; 14 | border-style: solid; 15 | border-width: 0 @tipWidth @tipHeight @tipWidth; 16 | border-color: transparent transparent @tipColor transparent; 17 | .prefixed(transition-duration, @mediumDuration); 18 | .prefixed(transition-property, transform); 19 | } 20 | 21 | &:hover, 22 | &:focus, 23 | &:active { 24 | .prefixed(transform, translateY(@tipHeight)); 25 | 26 | &:before { 27 | .prefixed(transform, translateY(-(@tipHeight))); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/effects/curls/_curl-top-right.scss: -------------------------------------------------------------------------------- 1 | /* Curl Top Right */ 2 | @mixin curl-top-right { 3 | @include hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | content: ''; 10 | height: 0; 11 | width: 0; 12 | top: 0; 13 | right: 0; 14 | background: $revealAreaColor; /* IE9 */ 15 | background: linear-gradient( 16 | 225deg, 17 | $revealAreaColor 45%, 18 | $curlLineColor 50%, 19 | $curlTransitionColor 56%, 20 | $curlLastColor 80% 21 | ); 22 | box-shadow: -1px 1px 1px rgba(0, 0, 0, .4); 23 | @include prefixed(transition-duration, $mediumDuration); 24 | @include prefixed(transition-property, "width, height"); 25 | } 26 | 27 | &:hover:before, 28 | &:focus:before, 29 | &:active:before { 30 | width: $curlWidth; 31 | height: $curlHeight; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /less/effects/speech-bubbles/_bubble-float-left.less: -------------------------------------------------------------------------------- 1 | /* Bubble Float Left */ 2 | .bubble-float-left() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-duration, @mediumDuration); 6 | .prefixed(transition-property, transform); 7 | 8 | &:before { 9 | position: absolute; 10 | z-index: -1; 11 | content: ''; 12 | top: calc(~"50%" - @tipHeight); 13 | left: 0; 14 | border-style: solid; 15 | border-width: @tipHeight @tipWidth @tipHeight 0; 16 | border-color: transparent @tipColor transparent transparent; 17 | .prefixed(transition-duration, @mediumDuration); 18 | .prefixed(transition-property, transform); 19 | } 20 | 21 | &:hover, 22 | &:focus, 23 | &:active { 24 | .prefixed(transform, translateX(@tipWidth)); 25 | 26 | &:before { 27 | .prefixed(transform, translateX(-(@tipWidth))); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/effects/curls/_curl-bottom-left.scss: -------------------------------------------------------------------------------- 1 | /* Curl Bottom Left */ 2 | @mixin curl-bottom-left { 3 | @include hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | content: ''; 10 | height: 0; 11 | width: 0; 12 | bottom: 0; 13 | left: 0; 14 | background: $revealAreaColor; /* IE9 */ 15 | background: linear-gradient( 16 | 45deg, 17 | $revealAreaColor 45%, 18 | $curlLineColor 50%, 19 | $curlTransitionColor 56%, 20 | $curlLastColor 80% 21 | ); 22 | box-shadow: 1px -1px 1px rgba(0, 0, 0, .4); 23 | @include prefixed(transition-duration, $mediumDuration); 24 | @include prefixed(transition-property, "width, height"); 25 | } 26 | 27 | &:hover:before, 28 | &:focus:before, 29 | &:active:before { 30 | width: $curlWidth; 31 | height: $curlHeight; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hover", 3 | "homepage": "http://ianlunn.github.io/Hover", 4 | "authors": [ 5 | "Ian Lunn " 6 | ], 7 | "description": "A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.", 8 | "main": "css/hover.css", 9 | "keywords": [ 10 | "Hover", 11 | "hover", 12 | "hover.css", 13 | "Hover Effects", 14 | "CSS Effects", 15 | "CSS3 Effects", 16 | "CSS Hover Effects", 17 | "CSS3 Hover Effects" 18 | ], 19 | "license": "SEE LICENSE IN LICENSE.txt", 20 | "private": false, 21 | "ignore": [ 22 | "**/.*", 23 | "node_modules", 24 | "bower_components", 25 | "test", 26 | "tests" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_radial-in.less: -------------------------------------------------------------------------------- 1 | /* Radial In */ 2 | .radial-in() { 3 | .hacks(); 4 | position: relative; 5 | overflow: hidden; 6 | background: @activeColor; 7 | .prefixed(transition-property, color); 8 | .prefixed(transition-duration, @mediumDuration); 9 | 10 | &:before { 11 | content: ""; 12 | position: absolute; 13 | z-index: -1; 14 | top: 0; 15 | left: 0; 16 | right: 0; 17 | bottom: 0; 18 | background: @primaryColor; 19 | border-radius: 100%; 20 | .prefixed(transform, scale(2)); 21 | .prefixed(transition-property, transform); 22 | .prefixed(transition-duration, @mediumDuration); 23 | .prefixed(transition-timing-function, ease-out); 24 | } 25 | 26 | &:hover, 27 | &:focus, 28 | &:active { 29 | color: white; 30 | 31 | &:before { 32 | .prefixed(transform, scale(0)); 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_radial-out.less: -------------------------------------------------------------------------------- 1 | /* Radial Out */ 2 | .radial-out() { 3 | .hacks(); 4 | position: relative; 5 | overflow: hidden; 6 | background: @primaryColor; 7 | .prefixed(transition-property, color); 8 | .prefixed(transition-duration, @mediumDuration); 9 | 10 | &:before { 11 | content: ""; 12 | position: absolute; 13 | z-index: -1; 14 | top: 0; 15 | left: 0; 16 | right: 0; 17 | bottom: 0; 18 | background: @activeColor; 19 | border-radius: 100%; 20 | .prefixed(transform, scale(0)); 21 | .prefixed(transition-property, transform); 22 | .prefixed(transition-duration, @mediumDuration); 23 | .prefixed(transition-timing-function, ease-out); 24 | } 25 | 26 | &:hover, 27 | &:focus, 28 | &:active { 29 | color: white; 30 | 31 | &:before { 32 | .prefixed(transform, scale(2)); 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /less/effects/speech-bubbles/_bubble-float-right.less: -------------------------------------------------------------------------------- 1 | /* Bubble Float Right */ 2 | .bubble-float-right() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-duration, @mediumDuration); 6 | .prefixed(transition-property, transform); 7 | 8 | &:before { 9 | position: absolute; 10 | z-index: -1; 11 | top: calc(~"50%" - @tipHeight); 12 | right: 0; 13 | content: ''; 14 | border-style: solid; 15 | border-width: @tipHeight 0 @tipHeight @tipWidth; 16 | border-color: transparent transparent transparent @tipColor; 17 | .prefixed(transition-duration, @mediumDuration); 18 | .prefixed(transition-property, transform); 19 | } 20 | 21 | &:hover, 22 | &:focus, 23 | &:active { 24 | .prefixed(transform, translateX(-(@tipWidth))); 25 | 26 | &:before { 27 | .prefixed(transform, translateX(@tipWidth)); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/effects/curls/_curl-bottom-right.scss: -------------------------------------------------------------------------------- 1 | /* Curl Bottom Right */ 2 | @mixin curl-bottom-right { 3 | @include hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | content: ''; 10 | height: 0; 11 | width: 0; 12 | bottom: 0; 13 | right: 0; 14 | background: $revealAreaColor; /* IE9 */ 15 | background: linear-gradient( 16 | 315deg, 17 | $revealAreaColor 45%, 18 | $curlLineColor 50%, 19 | $curlTransitionColor 56%, 20 | $curlLastColor 80% 21 | ); 22 | box-shadow: -1px -1px 1px rgba(0, 0, 0, .4); 23 | @include prefixed(transition-duration, $mediumDuration); 24 | @include prefixed(transition-property, "width, height"); 25 | } 26 | 27 | &:hover:before, 28 | &:focus:before, 29 | &:active:before { 30 | width: $curlWidth; 31 | height: $curlHeight; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /less/_hacks.less: -------------------------------------------------------------------------------- 1 | // As is often the case, some devices/browsers need additional code to get CSS to work 2 | // in the most desired way. These mixins are used to quickly drop in hacks for each element 3 | // Find out more here: https://github.com/IanLunn/Hover/wiki/Hacks-Explained 4 | 5 | .hardwareAccel() { 6 | // Improve performance on mobile/tablet devices 7 | // Perspective reduces blurryness of text in Chrome 8 | .prefixed(transform, perspective(1px) translateZ(0)); 9 | } 10 | 11 | .improveAntiAlias() { 12 | // Improve aliasing on mobile/tablet devices 13 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 14 | } 15 | 16 | .forceBlockLevel() { 17 | // Transforms need to be block-level to work 18 | display: inline-block; 19 | vertical-align: middle; 20 | } 21 | 22 | .hacks() { 23 | .forceBlockLevel(); 24 | .hardwareAccel(); 25 | .improveAntiAlias(); 26 | } 27 | -------------------------------------------------------------------------------- /less/effects/speech-bubbles/_bubble-float-bottom.less: -------------------------------------------------------------------------------- 1 | /* Bubble Float Bottom */ 2 | .bubble-float-bottom() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-duration, @mediumDuration); 6 | .prefixed(transition-property, transform); 7 | 8 | &:before { 9 | position: absolute; 10 | z-index: -1; 11 | content: ''; 12 | left: calc(~"50%" - @tipWidth); 13 | bottom: 0; 14 | border-style: solid; 15 | border-width: @tipHeight @tipWidth 0 @tipWidth; 16 | border-color: @tipColor transparent transparent transparent; 17 | .prefixed(transition-duration, @mediumDuration); 18 | .prefixed(transition-property, transform); 19 | } 20 | 21 | &:hover, 22 | &:focus, 23 | &:active { 24 | .prefixed(transform, translateY(-(@tipHeight))); 25 | 26 | &:before { 27 | .prefixed(transform, translateY(@tipHeight)); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_back-pulse.scss: -------------------------------------------------------------------------------- 1 | /* Back Pulse */ 2 | @include keyframes(#{$nameSpace}-back-pulse) { 3 | 50% { 4 | background-color: rgba(32, 152, 209, .75); 5 | } 6 | } 7 | 8 | @mixin back-pulse { 9 | @include hacks(); 10 | overflow: hidden; 11 | @include prefixed(transition-duration, $slowDuration); 12 | @include prefixed(transition-property, "color, background-color"); 13 | 14 | &:hover, 15 | &:focus, 16 | &:active { 17 | @include prefixed(animation-name, #{$nameSpace}-back-pulse); 18 | @include prefixed(animation-duration, 1s); 19 | @include prefixed(animation-delay, $slowDuration); 20 | @include prefixed(animation-timing-function, linear); 21 | @include prefixed(animation-iteration-count, infinite); 22 | background-color: $activeColor; 23 | background-color: rgba(32, 152, 209, 1); 24 | color: white; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_wobble-top.less: -------------------------------------------------------------------------------- 1 | /* Wobble Top */ 2 | .keyframes(~"@{nameSpace}-wobble-top", { 3 | 16.65% { 4 | .prefixed(transform, skew(-12deg)); 5 | } 6 | 7 | 33.3% { 8 | .prefixed(transform, skew(10deg)); 9 | } 10 | 11 | 49.95% { 12 | .prefixed(transform, skew(-6deg)); 13 | } 14 | 15 | 66.6% { 16 | .prefixed(transform, skew(4deg)); 17 | } 18 | 19 | 83.25% { 20 | .prefixed(transform, skew(-2deg)); 21 | } 22 | 23 | 100% { 24 | .prefixed(transform, skew(0)); 25 | } 26 | }); 27 | 28 | .wobble-top() { 29 | .hacks(); 30 | .prefixed(transform-origin, 0 100%); 31 | 32 | &:hover, 33 | &:focus, 34 | &:active { 35 | .prefixed(animation-name, ~"@{nameSpace}-wobble-top"); 36 | .prefixed(animation-duration, 1s); 37 | .prefixed(animation-timing-function, ease-in-out); 38 | .prefixed(animation-iteration-count, 1); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_shutter-in-vertical.less: -------------------------------------------------------------------------------- 1 | /* Shutter In Vertical */ 2 | .shutter-in-vertical() { 3 | .hacks(); 4 | position: relative; 5 | background: @activeColor; 6 | .prefixed(transition-property, color); 7 | .prefixed(transition-duration, @mediumDuration); 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | top: 0; 14 | bottom: 0; 15 | left: 0; 16 | right: 0; 17 | background: @primaryColor; 18 | .prefixed(transform, scaleY(1)); 19 | .prefixed(transform-origin, 50%); 20 | .prefixed(transition-property, transform); 21 | .prefixed(transition-duration, @mediumDuration); 22 | .prefixed(transition-timing-function, ease-out); 23 | } 24 | 25 | &:hover, 26 | &:focus, 27 | &:active { 28 | color: white; 29 | 30 | &:before { 31 | .prefixed(transform, scaleY(0)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_wobble-vertical.less: -------------------------------------------------------------------------------- 1 | /* Wobble Vertical */ 2 | .keyframes(~"@{nameSpace}-wobble-vertical", { 3 | 16.65% { 4 | .prefixed(transform, translateY(8px)); 5 | } 6 | 7 | 33.3% { 8 | .prefixed(transform, translateY(-6px)); 9 | } 10 | 11 | 49.95% { 12 | .prefixed(transform, translateY(4px)); 13 | } 14 | 15 | 66.6% { 16 | .prefixed(transform, translateY(-2px)); 17 | } 18 | 19 | 83.25% { 20 | .prefixed(transform, translateY(1px)); 21 | } 22 | 23 | 100% { 24 | .prefixed(transform, translateY(0)); 25 | } 26 | }); 27 | 28 | .wobble-vertical() { 29 | .hacks(); 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | .prefixed(animation-name, ~"@{nameSpace}-wobble-vertical"); 35 | .prefixed(animation-duration, 1s); 36 | .prefixed(animation-timing-function, ease-in-out); 37 | .prefixed(animation-iteration-count, 1); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_shutter-in-horizontal.less: -------------------------------------------------------------------------------- 1 | /* Shutter In Horizontal */ 2 | .shutter-in-horizontal() { 3 | .hacks(); 4 | position: relative; 5 | background: @activeColor; 6 | .prefixed(transition-property, color); 7 | .prefixed(transition-duration, @mediumDuration); 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | top: 0; 14 | bottom: 0; 15 | left: 0; 16 | right: 0; 17 | background: @primaryColor; 18 | .prefixed(transform, scaleX(1)); 19 | .prefixed(transform-origin, 50%); 20 | .prefixed(transition-property, transform); 21 | .prefixed(transition-duration, @mediumDuration); 22 | .prefixed(transition-timing-function, ease-out); 23 | } 24 | 25 | &:hover, 26 | &:focus, 27 | &:active { 28 | color: white; 29 | 30 | &:before { 31 | .prefixed(transform, scaleX(0)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_shutter-out-vertical.less: -------------------------------------------------------------------------------- 1 | /* Shutter Out Vertical */ 2 | .shutter-out-vertical() { 3 | .hacks(); 4 | position: relative; 5 | background: @primaryColor; 6 | .prefixed(transition-property, color); 7 | .prefixed(transition-duration, @mediumDuration); 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | top: 0; 14 | bottom: 0; 15 | left: 0; 16 | right: 0; 17 | background: @activeColor; 18 | .prefixed(transform, scaleY(0)); 19 | .prefixed(transform-origin, 50%); 20 | .prefixed(transition-property, transform); 21 | .prefixed(transition-duration, @mediumDuration); 22 | .prefixed(transition-timing-function, ease-out); 23 | } 24 | 25 | &:hover, 26 | &:focus, 27 | &:active { 28 | color: white; 29 | 30 | &:before { 31 | .prefixed(transform, scaleY(1)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_rectangle-in.scss: -------------------------------------------------------------------------------- 1 | /* Rectangle In */ 2 | @mixin rectangle-in { 3 | @include hacks(); 4 | position: relative; 5 | background: $activeColor; 6 | @include prefixed(transition-property, color); 7 | @include prefixed(transition-duration, $mediumDuration); 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | background: $primaryColor; 18 | @include prefixed(transform, scale(1)); 19 | @include prefixed(transition-property, transform); 20 | @include prefixed(transition-duration, $mediumDuration); 21 | @include prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | @include prefixed(transform, scale(0)); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_rectangle-out.scss: -------------------------------------------------------------------------------- 1 | /* Rectangle Out */ 2 | @mixin rectangle-out { 3 | @include hacks(); 4 | position: relative; 5 | background: $primaryColor; 6 | @include prefixed(transition-property, color); 7 | @include prefixed(transition-duration, $mediumDuration); 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | bottom: 0; 17 | background: $activeColor; 18 | @include prefixed(transform, scale(0)); 19 | @include prefixed(transition-property, transform); 20 | @include prefixed(transition-duration, $mediumDuration); 21 | @include prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | @include prefixed(transform, scale(1)); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_wobble-bottom.less: -------------------------------------------------------------------------------- 1 | /* Wobble Bottom */ 2 | .keyframes(~"@{nameSpace}-wobble-bottom", { 3 | 16.65% { 4 | .prefixed(transform, skew(-12deg)); 5 | } 6 | 7 | 33.3% { 8 | .prefixed(transform, skew(10deg)); 9 | } 10 | 11 | 49.95% { 12 | .prefixed(transform, skew(-6deg)); 13 | } 14 | 15 | 66.6% { 16 | .prefixed(transform, skew(4deg)); 17 | } 18 | 19 | 83.25% { 20 | .prefixed(transform, skew(-2deg)); 21 | } 22 | 23 | 100% { 24 | .prefixed(transform, skew(0)); 25 | } 26 | }); 27 | 28 | .wobble-bottom() { 29 | .hacks(); 30 | .prefixed(transform-origin, 100% 0); 31 | 32 | &:hover, 33 | &:focus, 34 | &:active { 35 | .prefixed(animation-name, ~"@{nameSpace}-wobble-bottom"); 36 | .prefixed(animation-duration, 1s); 37 | .prefixed(animation-timing-function, ease-in-out); 38 | .prefixed(animation-iteration-count, 1); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_shutter-out-horizontal.less: -------------------------------------------------------------------------------- 1 | /* Shutter Out Horizontal */ 2 | .shutter-out-horizontal() { 3 | .hacks(); 4 | position: relative; 5 | background: @primaryColor; 6 | .prefixed(transition-property, color); 7 | .prefixed(transition-duration, @mediumDuration); 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | top: 0; 14 | bottom: 0; 15 | left: 0; 16 | right: 0; 17 | background: @activeColor; 18 | .prefixed(transform, scaleX(0)); 19 | .prefixed(transform-origin, 50%); 20 | .prefixed(transition-property, transform); 21 | .prefixed(transition-duration, @mediumDuration); 22 | .prefixed(transition-timing-function, ease-out); 23 | } 24 | 25 | &:hover, 26 | &:focus, 27 | &:active { 28 | color: white; 29 | 30 | &:before { 31 | .prefixed(transform, scaleX(1)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_wobble-horizontal.less: -------------------------------------------------------------------------------- 1 | /* Wobble Horizontal */ 2 | .keyframes(~"@{nameSpace}-wobble-horizontal", { 3 | 16.65% { 4 | .prefixed(transform, translateX(8px)); 5 | } 6 | 7 | 33.3% { 8 | .prefixed(transform, translateX(-6px)); 9 | } 10 | 11 | 49.95% { 12 | .prefixed(transform, translateX(4px)); 13 | } 14 | 15 | 66.6% { 16 | .prefixed(transform, translateX(-2px)); 17 | } 18 | 19 | 83.25% { 20 | .prefixed(transform, translateX(1px)); 21 | } 22 | 23 | 100% { 24 | .prefixed(transform, translateX(0)); 25 | } 26 | }); 27 | 28 | .wobble-horizontal() { 29 | .hacks(); 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | .prefixed(animation-name, ~"@{nameSpace}-wobble-horizontal"); 35 | .prefixed(animation-duration, 1s); 36 | .prefixed(animation-timing-function, ease-in-out); 37 | .prefixed(animation-iteration-count, 1); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-pop.scss: -------------------------------------------------------------------------------- 1 | /* Icon Pop */ 2 | @include keyframes(#{$nameSpace}-icon-pop) { 3 | 50% { 4 | @include prefixed(transform, scale(1.5)); 5 | } 6 | } 7 | 8 | @mixin icon-pop { 9 | @include hacks(); 10 | @include prefixed(transition-duration, $mediumDuration); 11 | 12 | .hvr-icon { 13 | @include prefixed(transform, translateZ(0)); 14 | @include prefixed(transition-duration, $mediumDuration); 15 | @include prefixed(transition-property, transform); 16 | @include prefixed(transition-timing-function, ease-out); 17 | } 18 | 19 | &:hover, 20 | &:focus, 21 | &:active { 22 | 23 | .hvr-icon { 24 | @include prefixed(animation-name, #{$nameSpace}-icon-pop); 25 | @include prefixed(animation-duration, $mediumDuration); 26 | @include prefixed(animation-timing-function, linear); 27 | @include prefixed(animation-iteration-count, 1); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-push.scss: -------------------------------------------------------------------------------- 1 | /* Icon Push */ 2 | @include keyframes(#{$nameSpace}-icon-push) { 3 | 50% { 4 | @include prefixed(transform, scale(.5)); 5 | } 6 | } 7 | 8 | @mixin icon-push { 9 | @include hacks(); 10 | @include prefixed(transition-duration, $mediumDuration); 11 | 12 | .hvr-icon { 13 | @include prefixed(transform, translateZ(0)); 14 | @include prefixed(transition-duration, $mediumDuration); 15 | @include prefixed(transition-property, transform); 16 | @include prefixed(transition-timing-function, ease-out); 17 | } 18 | 19 | &:hover, 20 | &:focus, 21 | &:active { 22 | 23 | .hvr-icon { 24 | @include prefixed(animation-name, #{$nameSpace}-icon-push); 25 | @include prefixed(animation-duration, $mediumDuration); 26 | @include prefixed(animation-timing-function, linear); 27 | @include prefixed(animation-iteration-count, 1); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_sweep-to-top.scss: -------------------------------------------------------------------------------- 1 | /* Sweep To Top */ 2 | @mixin sweep-to-top { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-property, color); 6 | @include prefixed(transition-duration, $mediumDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: $activeColor; 17 | @include prefixed(transform, scaleY(0)); 18 | @include prefixed(transform-origin, 50% 100%); 19 | @include prefixed(transition-property, transform); 20 | @include prefixed(transition-duration, $mediumDuration); 21 | @include prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | @include prefixed(transform, scaleY(1)); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_bounce-to-left.less: -------------------------------------------------------------------------------- 1 | /* Bounce To Left */ 2 | .bounce-to-left() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-property, color); 6 | .prefixed(transition-duration, @slowDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: @activeColor; 17 | .prefixed(transform, scaleX(0)); 18 | .prefixed(transform-origin, 100% 50%); 19 | .prefixed(transition-property, transform); 20 | .prefixed(transition-duration, @slowDuration); 21 | .prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | .prefixed(transform, scaleX(1)); 31 | .prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_bounce-to-right.less: -------------------------------------------------------------------------------- 1 | /* Bounce To Right */ 2 | .bounce-to-right() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-property, color); 6 | .prefixed(transition-duration, @slowDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: @activeColor; 17 | .prefixed(transform, scaleX(0)); 18 | .prefixed(transform-origin, 0 50%); 19 | .prefixed(transition-property, transform); 20 | .prefixed(transition-duration, @slowDuration); 21 | .prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | .prefixed(transform, scaleX(1)); 31 | .prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_bounce-to-top.less: -------------------------------------------------------------------------------- 1 | /* Bounce To Top */ 2 | .bounce-to-top() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-property, color); 6 | .prefixed(transition-duration, @slowDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: @activeColor; 17 | .prefixed(transform, scaleY(0)); 18 | .prefixed(transform-origin, 50% 100%); 19 | .prefixed(transition-property, transform); 20 | .prefixed(transition-duration, @slowDuration); 21 | .prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | .prefixed(transform, scaleY(1)); 31 | .prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_sweep-to-left.scss: -------------------------------------------------------------------------------- 1 | /* Sweep To Left */ 2 | @mixin sweep-to-left { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-property, color); 6 | @include prefixed(transition-duration, $mediumDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: $activeColor; 17 | @include prefixed(transform, scaleX(0)); 18 | @include prefixed(transform-origin, 100% 50%); 19 | @include prefixed(transition-property, transform); 20 | @include prefixed(transition-duration, $mediumDuration); 21 | @include prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | @include prefixed(transform, scaleX(1)); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_sweep-to-right.scss: -------------------------------------------------------------------------------- 1 | /* Sweep To Right */ 2 | @mixin sweep-to-right { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-property, color); 6 | @include prefixed(transition-duration, $mediumDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: $activeColor; 17 | @include prefixed(transform, scaleX(0)); 18 | @include prefixed(transform-origin, 0 50%); 19 | @include prefixed(transition-property, transform); 20 | @include prefixed(transition-duration, $mediumDuration); 21 | @include prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | @include prefixed(transform, scaleX(1)); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /scss/effects/speech-bubbles/_bubble-float-top.scss: -------------------------------------------------------------------------------- 1 | /* Bubble Float Top */ 2 | @mixin bubble-float-top { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-duration, $mediumDuration); 6 | @include prefixed(transition-property, transform); 7 | 8 | &:before { 9 | position: absolute; 10 | z-index: -1; 11 | content: ''; 12 | left: calc(50% - #{$tipWidth}); 13 | top: 0; 14 | border-style: solid; 15 | border-width: 0 $tipWidth $tipHeight $tipWidth; 16 | border-color: transparent transparent $tipColor transparent; 17 | @include prefixed(transition-duration, $mediumDuration); 18 | @include prefixed(transition-property, transform); 19 | } 20 | 21 | &:hover, 22 | &:focus, 23 | &:active { 24 | @include prefixed(transform, translateY($tipHeight)); 25 | 26 | &:before { 27 | @include prefixed(transform, translateY(-($tipHeight))); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /less/effects/background-transitions/_bounce-to-bottom.less: -------------------------------------------------------------------------------- 1 | /* Bounce To Bottom */ 2 | .bounce-to-bottom() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-property, color); 6 | .prefixed(transition-duration, @slowDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: @activeColor; 17 | .prefixed(transform, scaleY(0)); 18 | .prefixed(transform-origin, 50% 0); 19 | .prefixed(transition-property, transform); 20 | .prefixed(transition-duration, @slowDuration); 21 | .prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | .prefixed(transform, scaleY(1)); 31 | .prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_sweep-to-bottom.scss: -------------------------------------------------------------------------------- 1 | /* Sweep To Bottom */ 2 | @mixin sweep-to-bottom { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-property, color); 6 | @include prefixed(transition-duration, $mediumDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: $activeColor; 17 | @include prefixed(transform, scaleY(0)); 18 | @include prefixed(transform-origin, 50% 0); 19 | @include prefixed(transition-property, transform); 20 | @include prefixed(transition-duration, $mediumDuration); 21 | @include prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | @include prefixed(transform, scaleY(1)); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /scss/effects/speech-bubbles/_bubble-float-left.scss: -------------------------------------------------------------------------------- 1 | /* Bubble Float Left */ 2 | @mixin bubble-float-left { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-duration, $mediumDuration); 6 | @include prefixed(transition-property, transform); 7 | 8 | &:before { 9 | position: absolute; 10 | z-index: -1; 11 | content: ''; 12 | top: calc(50% - #{$tipHeight}); 13 | left: 0; 14 | border-style: solid; 15 | border-width: $tipHeight $tipWidth $tipHeight 0; 16 | border-color: transparent $tipColor transparent transparent; 17 | @include prefixed(transition-duration, $mediumDuration); 18 | @include prefixed(transition-property, transform); 19 | } 20 | 21 | &:hover, 22 | &:focus, 23 | &:active { 24 | @include prefixed(transform, translateX($tipWidth)); 25 | 26 | &:before { 27 | @include prefixed(transform, translateX(-($tipWidth))); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/_hacks.scss: -------------------------------------------------------------------------------- 1 | // As is often the case, some devices/browsers need additional code to get CSS to work 2 | // in the most desired way. These mixins are used to quickly drop in hacks for each element 3 | // Find out more here: https://github.com/IanLunn/Hover/wiki/Hacks-Explained 4 | 5 | @mixin hardwareAccel() { 6 | // Improve performance on mobile/tablet devices 7 | // Perspective reduces blurryness of text in Chrome 8 | @include prefixed(transform, perspective(1px) translateZ(0)); 9 | } 10 | 11 | @mixin improveAntiAlias() { 12 | // Improve aliasing on mobile/tablet devices 13 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 14 | } 15 | 16 | @mixin forceBlockLevel() { 17 | // Transforms need to be block-level to work 18 | display: inline-block; 19 | vertical-align: middle; 20 | } 21 | 22 | @mixin hacks() { 23 | @include forceBlockLevel(); 24 | @include hardwareAccel(); 25 | @include improveAntiAlias(); 26 | } 27 | -------------------------------------------------------------------------------- /scss/effects/speech-bubbles/_bubble-float-right.scss: -------------------------------------------------------------------------------- 1 | /* Bubble Float Right */ 2 | @mixin bubble-float-right { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-duration, $mediumDuration); 6 | @include prefixed(transition-property, transform); 7 | 8 | &:before { 9 | position: absolute; 10 | z-index: -1; 11 | top: calc(50% - #{$tipHeight}); 12 | right: 0; 13 | content: ''; 14 | border-style: solid; 15 | border-width: $tipHeight 0 $tipHeight $tipWidth; 16 | border-color: transparent transparent transparent $tipColor; 17 | @include prefixed(transition-duration, $mediumDuration); 18 | @include prefixed(transition-property, transform); 19 | } 20 | 21 | &:hover, 22 | &:focus, 23 | &:active { 24 | @include prefixed(transform, translateX(-($tipWidth))); 25 | 26 | &:before { 27 | @include prefixed(transform, translateX($tipWidth)); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_radial-in.scss: -------------------------------------------------------------------------------- 1 | /* Radial In */ 2 | @mixin radial-in { 3 | @include hacks(); 4 | position: relative; 5 | overflow: hidden; 6 | background: $activeColor; 7 | @include prefixed(transition-property, color); 8 | @include prefixed(transition-duration, $mediumDuration); 9 | 10 | &:before { 11 | content: ""; 12 | position: absolute; 13 | z-index: -1; 14 | top: 0; 15 | left: 0; 16 | right: 0; 17 | bottom: 0; 18 | background: $primaryColor; 19 | border-radius: 100%; 20 | @include prefixed(transform, scale(2)); 21 | @include prefixed(transition-property, transform); 22 | @include prefixed(transition-duration, $mediumDuration); 23 | @include prefixed(transition-timing-function, ease-out); 24 | } 25 | 26 | &:hover, 27 | &:focus, 28 | &:active { 29 | color: white; 30 | 31 | &:before { 32 | @include prefixed(transform, scale(0)); 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /scss/effects/speech-bubbles/_bubble-float-bottom.scss: -------------------------------------------------------------------------------- 1 | /* Bubble Float Bottom */ 2 | @mixin bubble-float-bottom { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-duration, $mediumDuration); 6 | @include prefixed(transition-property, transform); 7 | 8 | &:before { 9 | position: absolute; 10 | z-index: -1; 11 | content: ''; 12 | left: calc(50% - #{$tipWidth}); 13 | bottom: 0; 14 | border-style: solid; 15 | border-width: $tipHeight $tipWidth 0 $tipWidth; 16 | border-color: $tipColor transparent transparent transparent; 17 | @include prefixed(transition-duration, $mediumDuration); 18 | @include prefixed(transition-property, transform); 19 | } 20 | 21 | &:hover, 22 | &:focus, 23 | &:active { 24 | @include prefixed(transform, translateY(-($tipHeight))); 25 | 26 | &:before { 27 | @include prefixed(transform, translateY($tipHeight)); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_radial-out.scss: -------------------------------------------------------------------------------- 1 | /* Radial Out */ 2 | @mixin radial-out { 3 | @include hacks(); 4 | position: relative; 5 | overflow: hidden; 6 | background: $primaryColor; 7 | @include prefixed(transition-property, color); 8 | @include prefixed(transition-duration, $mediumDuration); 9 | 10 | &:before { 11 | content: ""; 12 | position: absolute; 13 | z-index: -1; 14 | top: 0; 15 | left: 0; 16 | right: 0; 17 | bottom: 0; 18 | background: $activeColor; 19 | border-radius: 100%; 20 | @include prefixed(transform, scale(0)); 21 | @include prefixed(transition-property, transform); 22 | @include prefixed(transition-duration, $mediumDuration); 23 | @include prefixed(transition-timing-function, ease-out); 24 | } 25 | 26 | &:hover, 27 | &:focus, 28 | &:active { 29 | color: white; 30 | 31 | &:before { 32 | @include prefixed(transform, scale(2)); 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_bob.less: -------------------------------------------------------------------------------- 1 | /* Bob */ 2 | .keyframes(~"@{nameSpace}-bob", { 3 | 0% { 4 | .prefixed(transform, translateY(-8px)); 5 | } 6 | 50% { 7 | .prefixed(transform, translateY(-4px)); 8 | } 9 | 100% { 10 | .prefixed(transform, translateY(-8px)); 11 | } 12 | }); 13 | 14 | .keyframes(~"@{nameSpace}-bob-float", { 15 | 100% { 16 | .prefixed(transform, translateY(-8px)); 17 | } 18 | }); 19 | 20 | .bob() { 21 | .hacks(); 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | .prefixed(animation-name, ~"@{nameSpace}-bob-float, @{nameSpace}-bob"); 27 | .prefixed(animation-duration, ~".3s, 1.5s"); 28 | .prefixed(animation-delay, ~"0s, .3s"); 29 | .prefixed(animation-timing-function, ~"ease-out, ease-in-out"); 30 | .prefixed(animation-iteration-count, ~"1, infinite"); 31 | .prefixed(animation-fill-mode, ~"forwards"); 32 | .prefixed(animation-direction, ~"normal, alternate"); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_hang.less: -------------------------------------------------------------------------------- 1 | /* Hang */ 2 | .keyframes(~"@{nameSpace}-hang", { 3 | 0% { 4 | .prefixed(transform, translateY(8px)); 5 | } 6 | 50% { 7 | .prefixed(transform, translateY(4px)); 8 | } 9 | 100% { 10 | .prefixed(transform, translateY(8px)); 11 | } 12 | }); 13 | 14 | .keyframes(~"@{nameSpace}-hang-sink", { 15 | 100% { 16 | .prefixed(transform, translateY(8px)); 17 | } 18 | }); 19 | 20 | .hang() { 21 | .hacks(); 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | .prefixed(animation-name, ~"@{nameSpace}-hang-sink, @{nameSpace}-hang"); 27 | .prefixed(animation-duration, ~".3s, 1.5s"); 28 | .prefixed(animation-delay, ~"0s, .3s"); 29 | .prefixed(animation-timing-function, ~"ease-out, ease-in-out"); 30 | .prefixed(animation-iteration-count, ~"1, infinite"); 31 | .prefixed(animation-fill-mode, ~"forwards"); 32 | .prefixed(animation-direction, ~"normal, alternate"); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_wobble-skew.scss: -------------------------------------------------------------------------------- 1 | /* Wobble Skew */ 2 | @include keyframes(#{$nameSpace}-wobble-skew) { 3 | 16.65% { 4 | @include prefixed(transform, skew(-12deg)); 5 | } 6 | 7 | 33.3% { 8 | @include prefixed(transform, skew(10deg)); 9 | } 10 | 11 | 49.95% { 12 | @include prefixed(transform, skew(-6deg)); 13 | } 14 | 15 | 66.6% { 16 | @include prefixed(transform, skew(4deg)); 17 | } 18 | 19 | 83.25% { 20 | @include prefixed(transform, skew(-2deg)); 21 | } 22 | 23 | 100% { 24 | @include prefixed(transform, skew(0)); 25 | } 26 | } 27 | 28 | @mixin wobble-skew { 29 | @include hacks(); 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | @include prefixed(animation-name, #{$nameSpace}-wobble-skew); 35 | @include prefixed(animation-duration, 1s); 36 | @include prefixed(animation-timing-function, ease-in-out); 37 | @include prefixed(animation-iteration-count, 1); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_wobble-to-bottom-right.less: -------------------------------------------------------------------------------- 1 | /* Wobble To Bottom Right */ 2 | .keyframes(~"@{nameSpace}-wobble-to-bottom-right", { 3 | 16.65% { 4 | .prefixed(transform, translate(8px, 8px)); 5 | } 6 | 7 | 33.3% { 8 | .prefixed(transform, translate(-6px, -6px)); 9 | } 10 | 11 | 49.95% { 12 | .prefixed(transform, translate(4px, 4px)); 13 | } 14 | 15 | 66.6% { 16 | .prefixed(transform, translate(-2px, -2px)); 17 | } 18 | 19 | 83.25% { 20 | .prefixed(transform, translate(1px, 1px)); 21 | } 22 | 23 | 100% { 24 | .prefixed(transform, translate(0, 0)); 25 | } 26 | }); 27 | 28 | .wobble-to-bottom-right() { 29 | .hacks(); 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | .prefixed(animation-name, ~"@{nameSpace}-wobble-to-bottom-right"); 35 | .prefixed(animation-duration, 1s); 36 | .prefixed(animation-timing-function, ease-in-out); 37 | .prefixed(animation-iteration-count, 1); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-drop.less: -------------------------------------------------------------------------------- 1 | /* Icon Drop */ 2 | .keyframes(~"@{nameSpace}-icon-drop", { 3 | 0% { 4 | opacity: 0; 5 | 6 | } 7 | 8 | 50% { 9 | opacity: 0; 10 | .prefixed(transform, translateY(-100%)); 11 | } 12 | 13 | 51%, 14 | 100% { 15 | opacity: 1; 16 | } 17 | }); 18 | 19 | /* Icon Drop */ 20 | .icon-drop() { 21 | .hacks(); 22 | 23 | .hvr-icon { 24 | .prefixed(transform, translateZ(0)); 25 | } 26 | 27 | &:hover, 28 | &:focus, 29 | &:active { 30 | 31 | .hvr-icon { 32 | opacity: 0; 33 | .prefixed(transition-duration, @mediumDuration); 34 | .prefixed(animation-name, ~"@{nameSpace}-icon-drop"); 35 | .prefixed(animation-duration, @slowDuration); 36 | .prefixed(animation-delay, @mediumDuration); 37 | .prefixed(animation-fill-mode, forwards); 38 | .prefixed(animation-timing-function, ease-in-out); 39 | .prefixed(animation-timing-function, cubic-bezier(.52,1.64,.37,.66)); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_shutter-in-vertical.scss: -------------------------------------------------------------------------------- 1 | /* Shutter In Vertical */ 2 | @mixin shutter-in-vertical { 3 | @include hacks(); 4 | position: relative; 5 | background: $activeColor; 6 | @include prefixed(transition-property, color); 7 | @include prefixed(transition-duration, $mediumDuration); 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | top: 0; 14 | bottom: 0; 15 | left: 0; 16 | right: 0; 17 | background: $primaryColor; 18 | @include prefixed(transform, scaleY(1)); 19 | @include prefixed(transform-origin, 50%); 20 | @include prefixed(transition-property, transform); 21 | @include prefixed(transition-duration, $mediumDuration); 22 | @include prefixed(transition-timing-function, ease-out); 23 | } 24 | 25 | &:hover, 26 | &:focus, 27 | &:active { 28 | color: white; 29 | 30 | &:before { 31 | @include prefixed(transform, scaleY(0)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_shutter-in-horizontal.scss: -------------------------------------------------------------------------------- 1 | /* Shutter In Horizontal */ 2 | @mixin shutter-in-horizontal { 3 | @include hacks(); 4 | position: relative; 5 | background: $activeColor; 6 | @include prefixed(transition-property, color); 7 | @include prefixed(transition-duration, $mediumDuration); 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | top: 0; 14 | bottom: 0; 15 | left: 0; 16 | right: 0; 17 | background: $primaryColor; 18 | @include prefixed(transform, scaleX(1)); 19 | @include prefixed(transform-origin, 50%); 20 | @include prefixed(transition-property, transform); 21 | @include prefixed(transition-duration, $mediumDuration); 22 | @include prefixed(transition-timing-function, ease-out); 23 | } 24 | 25 | &:hover, 26 | &:focus, 27 | &:active { 28 | color: white; 29 | 30 | &:before { 31 | @include prefixed(transform, scaleX(0)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_shutter-out-vertical.scss: -------------------------------------------------------------------------------- 1 | /* Shutter Out Vertical */ 2 | @mixin shutter-out-vertical { 3 | @include hacks(); 4 | position: relative; 5 | background: $primaryColor; 6 | @include prefixed(transition-property, color); 7 | @include prefixed(transition-duration, $mediumDuration); 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | top: 0; 14 | bottom: 0; 15 | left: 0; 16 | right: 0; 17 | background: $activeColor; 18 | @include prefixed(transform, scaleY(0)); 19 | @include prefixed(transform-origin, 50%); 20 | @include prefixed(transition-property, transform); 21 | @include prefixed(transition-duration, $mediumDuration); 22 | @include prefixed(transition-timing-function, ease-out); 23 | } 24 | 25 | &:hover, 26 | &:focus, 27 | &:active { 28 | color: white; 29 | 30 | &:before { 31 | @include prefixed(transform, scaleY(1)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_shutter-out-horizontal.scss: -------------------------------------------------------------------------------- 1 | /* Shutter Out Horizontal */ 2 | @mixin shutter-out-horizontal { 3 | @include hacks(); 4 | position: relative; 5 | background: $primaryColor; 6 | @include prefixed(transition-property, color); 7 | @include prefixed(transition-duration, $mediumDuration); 8 | 9 | &:before { 10 | content: ""; 11 | position: absolute; 12 | z-index: -1; 13 | top: 0; 14 | bottom: 0; 15 | left: 0; 16 | right: 0; 17 | background: $activeColor; 18 | @include prefixed(transform, scaleX(0)); 19 | @include prefixed(transform-origin, 50%); 20 | @include prefixed(transition-property, transform); 21 | @include prefixed(transition-duration, $mediumDuration); 22 | @include prefixed(transition-timing-function, ease-out); 23 | } 24 | 25 | &:hover, 26 | &:focus, 27 | &:active { 28 | color: white; 29 | 30 | &:before { 31 | @include prefixed(transform, scaleX(1)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /less/effects/curls/_curl-top-left.less: -------------------------------------------------------------------------------- 1 | /* Curl Top Left */ 2 | .curl-top-left() { 3 | .hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | content: ''; 10 | height: 0; 11 | width: 0; 12 | top: 0; 13 | left: 0; 14 | background: @revealAreaColor; /* IE9 */ 15 | background: linear-gradient( 16 | 135deg, 17 | @revealAreaColor 45%, 18 | @curlLineColor 50%, 19 | @curlTransitionColor 56%, 20 | @curlLastColor 80% 21 | ); 22 | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 23 | 24 | z-index: 1000; 25 | box-shadow: 1px 1px 1px rgba(0, 0, 0, .4); 26 | .prefixed(transition-duration, @mediumDuration); 27 | .prefixed(transition-property, ~"width, height"); 28 | } 29 | 30 | &:hover:before, 31 | &:focus:before, 32 | &:active:before { 33 | width: @curlWidth; 34 | height: @curlHeight; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_wobble-top.scss: -------------------------------------------------------------------------------- 1 | /* Wobble Top */ 2 | @include keyframes(#{$nameSpace}-wobble-top) { 3 | 16.65% { 4 | @include prefixed(transform, skew(-12deg)); 5 | } 6 | 7 | 33.3% { 8 | @include prefixed(transform, skew(10deg)); 9 | } 10 | 11 | 49.95% { 12 | @include prefixed(transform, skew(-6deg)); 13 | } 14 | 15 | 66.6% { 16 | @include prefixed(transform, skew(4deg)); 17 | } 18 | 19 | 83.25% { 20 | @include prefixed(transform, skew(-2deg)); 21 | } 22 | 23 | 100% { 24 | @include prefixed(transform, skew(0)); 25 | } 26 | } 27 | 28 | @mixin wobble-top { 29 | @include hacks(); 30 | @include prefixed(transform-origin, 0 100%); 31 | 32 | &:hover, 33 | &:focus, 34 | &:active { 35 | @include prefixed(animation-name, #{$nameSpace}-wobble-top); 36 | @include prefixed(animation-duration, 1s); 37 | @include prefixed(animation-timing-function, ease-in-out); 38 | @include prefixed(animation-iteration-count, 1); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_wobble-vertical.scss: -------------------------------------------------------------------------------- 1 | /* Wobble Vertical */ 2 | @include keyframes(#{$nameSpace}-wobble-vertical) { 3 | 16.65% { 4 | @include prefixed(transform, translateY(8px)); 5 | } 6 | 7 | 33.3% { 8 | @include prefixed(transform, translateY(-6px)); 9 | } 10 | 11 | 49.95% { 12 | @include prefixed(transform, translateY(4px)); 13 | } 14 | 15 | 66.6% { 16 | @include prefixed(transform, translateY(-2px)); 17 | } 18 | 19 | 83.25% { 20 | @include prefixed(transform, translateY(1px)); 21 | } 22 | 23 | 100% { 24 | @include prefixed(transform, translateY(0)); 25 | } 26 | } 27 | 28 | @mixin wobble-vertical { 29 | @include hacks(); 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | @include prefixed(animation-name, #{$nameSpace}-wobble-vertical); 35 | @include prefixed(animation-duration, 1s); 36 | @include prefixed(animation-timing-function, ease-in-out); 37 | @include prefixed(animation-iteration-count, 1); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_wobble-to-top-right.less: -------------------------------------------------------------------------------- 1 | /* Wobble To Top Right */ 2 | .keyframes(~"@{nameSpace}-wobble-to-top-right", { 3 | 16.65% { 4 | .prefixed(transform, translate(8px, -8px)); 5 | } 6 | 7 | 33.3% { 8 | .prefixed(transform, translate(-6px, 6px)); 9 | } 10 | 11 | 49.95% { 12 | .prefixed(transform, translate(4px, -4px)); 13 | } 14 | 15 | 66.6% { 16 | .prefixed(transform, translate(-2px, 2px)); 17 | } 18 | 19 | 83.25% { 20 | .prefixed(transform, translate(1px, -1px)); 21 | } 22 | 23 | 100% { 24 | .prefixed(transform, translate(0, 0)); 25 | } 26 | }); 27 | 28 | .wobble-to-top-right() { 29 | .hacks(); 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | .prefixed(animation-name, ~"@{nameSpace}-wobble-to-top-right"); 35 | .prefixed(animation-duration, 1s); 36 | .prefixed(animation-timing-function, ease-in-out); 37 | .prefixed(animation-iteration-count, 1); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // prefix declarations 2 | @mixin prefixed($property, $value) { 3 | @if $webkit == true { 4 | -webkit-#{$property}: #{$value}; 5 | } 6 | 7 | @if $moz == true { 8 | -moz-#{$property}: #{$value}; 9 | } 10 | 11 | @if $ms == true { 12 | -ms-#{$property}: #{$value}; 13 | } 14 | 15 | @if $o == true { 16 | -o-#{$property}: #{$value}; 17 | } 18 | 19 | #{$property}: #{$value}; 20 | } 21 | 22 | // prefix keyframes 23 | @mixin keyframes($name) { 24 | @if $webkit == true { 25 | @-webkit-keyframes #{$name} { 26 | @content; 27 | } 28 | } 29 | 30 | @if $moz == true { 31 | @-moz-keyframes #{$name} { 32 | @content; 33 | } 34 | } 35 | 36 | @if $ms == true { 37 | @-ms-keyframes #{$name} { 38 | @content; 39 | } 40 | } 41 | 42 | @if $o == true { 43 | @-o-keyframes #{$name} { 44 | @content; 45 | } 46 | } 47 | 48 | @keyframes #{$name} { 49 | @content; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_wobble-horizontal.scss: -------------------------------------------------------------------------------- 1 | /* Wobble Horizontal */ 2 | @include keyframes(#{$nameSpace}-wobble-horizontal) { 3 | 16.65% { 4 | @include prefixed(transform, translateX(8px)); 5 | } 6 | 7 | 33.3% { 8 | @include prefixed(transform, translateX(-6px)); 9 | } 10 | 11 | 49.95% { 12 | @include prefixed(transform, translateX(4px)); 13 | } 14 | 15 | 66.6% { 16 | @include prefixed(transform, translateX(-2px)); 17 | } 18 | 19 | 83.25% { 20 | @include prefixed(transform, translateX(1px)); 21 | } 22 | 23 | 100% { 24 | @include prefixed(transform, translateX(0)); 25 | } 26 | } 27 | 28 | @mixin wobble-horizontal { 29 | @include hacks(); 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | @include prefixed(animation-name, #{$nameSpace}-wobble-horizontal); 35 | @include prefixed(animation-duration, 1s); 36 | @include prefixed(animation-timing-function, ease-in-out); 37 | @include prefixed(animation-iteration-count, 1); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_wobble-bottom.scss: -------------------------------------------------------------------------------- 1 | /* Wobble Bottom */ 2 | @include keyframes(#{$nameSpace}-wobble-bottom) { 3 | 16.65% { 4 | @include prefixed(transform, skew(-12deg)); 5 | } 6 | 7 | 33.3% { 8 | @include prefixed(transform, skew(10deg)); 9 | } 10 | 11 | 49.95% { 12 | @include prefixed(transform, skew(-6deg)); 13 | } 14 | 15 | 66.6% { 16 | @include prefixed(transform, skew(4deg)); 17 | } 18 | 19 | 83.25% { 20 | @include prefixed(transform, skew(-2deg)); 21 | } 22 | 23 | 100% { 24 | @include prefixed(transform, skew(0)); 25 | } 26 | } 27 | 28 | @mixin wobble-bottom { 29 | @include hacks(); 30 | @include prefixed(transform-origin, 100% 0); 31 | 32 | &:hover, 33 | &:focus, 34 | &:active { 35 | @include prefixed(animation-name, #{$nameSpace}-wobble-bottom); 36 | @include prefixed(animation-duration, 1s); 37 | @include prefixed(animation-timing-function, ease-in-out); 38 | @include prefixed(animation-iteration-count, 1); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_bounce-to-left.scss: -------------------------------------------------------------------------------- 1 | /* Bounce To Left */ 2 | @mixin bounce-to-left { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-property, color); 6 | @include prefixed(transition-duration, $slowDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: $activeColor; 17 | @include prefixed(transform, scaleX(0)); 18 | @include prefixed(transform-origin, 100% 50%); 19 | @include prefixed(transition-property, transform); 20 | @include prefixed(transition-duration, $slowDuration); 21 | @include prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | @include prefixed(transform, scaleX(1)); 31 | @include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_bounce-to-right.scss: -------------------------------------------------------------------------------- 1 | /* Bounce To Right */ 2 | @mixin bounce-to-right { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-property, color); 6 | @include prefixed(transition-duration, $slowDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: $activeColor; 17 | @include prefixed(transform, scaleX(0)); 18 | @include prefixed(transform-origin, 0 50%); 19 | @include prefixed(transition-property, transform); 20 | @include prefixed(transition-duration, $slowDuration); 21 | @include prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | @include prefixed(transform, scaleX(1)); 31 | @include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_bounce-to-top.scss: -------------------------------------------------------------------------------- 1 | /* Bounce To Top */ 2 | @mixin bounce-to-top { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-property, color); 6 | @include prefixed(transition-duration, $slowDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: $activeColor; 17 | @include prefixed(transform, scaleY(0)); 18 | @include prefixed(transform-origin, 50% 100%); 19 | @include prefixed(transition-property, transform); 20 | @include prefixed(transition-duration, $slowDuration); 21 | @include prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | @include prefixed(transform, scaleY(1)); 31 | @include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/background-transitions/_bounce-to-bottom.scss: -------------------------------------------------------------------------------- 1 | /* Bounce To Bottom */ 2 | @mixin bounce-to-bottom { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-property, color); 6 | @include prefixed(transition-duration, $slowDuration); 7 | 8 | &:before { 9 | content: ""; 10 | position: absolute; 11 | z-index: -1; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background: $activeColor; 17 | @include prefixed(transform, scaleY(0)); 18 | @include prefixed(transform-origin, 50% 0); 19 | @include prefixed(transition-property, transform); 20 | @include prefixed(transition-duration, $slowDuration); 21 | @include prefixed(transition-timing-function, ease-out); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | color: white; 28 | 29 | &:before { 30 | @include prefixed(transform, scaleY(1)); 31 | @include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66)); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/curls/_curl-top-left.scss: -------------------------------------------------------------------------------- 1 | /* Curl Top Left */ 2 | @mixin curl-top-left { 3 | @include hacks(); 4 | position: relative; 5 | 6 | &:before { 7 | pointer-events: none; 8 | position: absolute; 9 | content: ''; 10 | height: 0; 11 | width: 0; 12 | top: 0; 13 | left: 0; 14 | background: $revealAreaColor; /* IE9 */ 15 | background: linear-gradient( 16 | 135deg, 17 | $revealAreaColor 45%, 18 | $curlLineColor 50%, 19 | $curlTransitionColor 56%, 20 | $curlLastColor 80% 21 | ); 22 | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 23 | 24 | z-index: 1000; 25 | box-shadow: 1px 1px 1px rgba(0, 0, 0, .4); 26 | @include prefixed(transition-duration, $mediumDuration); 27 | @include prefixed(transition-property, "width, height"); 28 | } 29 | 30 | &:hover:before, 31 | &:focus:before, 32 | &:active:before { 33 | width: $curlWidth; 34 | height: $curlHeight; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /less/_mixins.less: -------------------------------------------------------------------------------- 1 | // prefix declarations 2 | .prefixed(@property, @value) { 3 | & when (@webkit = true) { 4 | -webkit-@{property}: @value; 5 | } 6 | 7 | & when (@moz = true) { 8 | -moz-@{property}: @value; 9 | } 10 | 11 | & when (@ms = true) { 12 | -ms-@{property}: @value; 13 | } 14 | 15 | & when (@o = true) { 16 | -o-@{property}: @value; 17 | } 18 | 19 | @{property}: @value; 20 | } 21 | 22 | // prefix keyframes 23 | .keyframes(@name; @content) { 24 | & when (@webkit = true) { 25 | @-webkit-keyframes @name { 26 | @content(); 27 | } 28 | } 29 | 30 | & when (@moz = true) { 31 | @-moz-keyframes @name { 32 | @content(); 33 | } 34 | } 35 | 36 | & when (@ms = true) { 37 | @-ms-keyframes @name { 38 | @content(); 39 | } 40 | } 41 | 42 | & when (@o = true) { 43 | @-o-keyframes @name { 44 | @content(); 45 | } 46 | } 47 | 48 | @keyframes @name { 49 | @content(); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /less/effects/border-transitions/_outline-in.less: -------------------------------------------------------------------------------- 1 | /* Outline In */ 2 | .outline-in() { 3 | @outerBorderWidth: 4px; 4 | @innerBorderWidth: 4px; 5 | 6 | .hacks(); 7 | position: relative; 8 | 9 | &:before { 10 | pointer-events: none; 11 | content: ''; 12 | position: absolute; 13 | border: @primaryColor solid @outerBorderWidth; 14 | top: -(@outerBorderWidth + @innerBorderWidth) * 2; 15 | right: -(@outerBorderWidth + @innerBorderWidth) * 2; 16 | bottom: -(@outerBorderWidth + @innerBorderWidth) * 2; 17 | left: -(@outerBorderWidth + @innerBorderWidth) * 2; 18 | opacity: 0; 19 | .prefixed(transition-duration, .3s); 20 | .prefixed(transition-property, "top, right, bottom, left"); 21 | } 22 | 23 | &:hover:before, 24 | &:focus:before, 25 | &:active:before { 26 | top: -(@outerBorderWidth + @innerBorderWidth); 27 | right: -(@outerBorderWidth + @innerBorderWidth); 28 | bottom: -(@outerBorderWidth + @innerBorderWidth); 29 | left: -(@outerBorderWidth + @innerBorderWidth); 30 | opacity: 1; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_bob.scss: -------------------------------------------------------------------------------- 1 | /* Bob */ 2 | @include keyframes(#{$nameSpace}-bob) { 3 | 0% { 4 | @include prefixed(transform, translateY(-8px)); 5 | } 6 | 50% { 7 | @include prefixed(transform, translateY(-4px)); 8 | } 9 | 100% { 10 | @include prefixed(transform, translateY(-8px)); 11 | } 12 | } 13 | 14 | @include keyframes(#{$nameSpace}-bob-float) { 15 | 100% { 16 | @include prefixed(transform, translateY(-8px)); 17 | } 18 | } 19 | 20 | @mixin bob { 21 | @include hacks(); 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | @include prefixed(animation-name, "#{$nameSpace}-bob-float, #{$nameSpace}-bob"); 27 | @include prefixed(animation-duration, ".3s, 1.5s"); 28 | @include prefixed(animation-delay, "0s, .3s"); 29 | @include prefixed(animation-timing-function, "ease-out, ease-in-out"); 30 | @include prefixed(animation-iteration-count, "1, infinite"); 31 | @include prefixed(animation-fill-mode, "forwards"); 32 | @include prefixed(animation-direction, "normal, alternate"); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_hang.scss: -------------------------------------------------------------------------------- 1 | /* Hang */ 2 | @include keyframes(#{$nameSpace}-hang) { 3 | 0% { 4 | @include prefixed(transform, translateY(8px)); 5 | } 6 | 50% { 7 | @include prefixed(transform, translateY(4px)); 8 | } 9 | 100% { 10 | @include prefixed(transform, translateY(8px)); 11 | } 12 | } 13 | 14 | @include keyframes(#{$nameSpace}-hang-sink) { 15 | 100% { 16 | @include prefixed(transform, translateY(8px)); 17 | } 18 | } 19 | 20 | @mixin hang { 21 | @include hacks(); 22 | 23 | &:hover, 24 | &:focus, 25 | &:active { 26 | @include prefixed(animation-name, "#{$nameSpace}-hang-sink, #{$nameSpace}-hang"); 27 | @include prefixed(animation-duration, ".3s, 1.5s"); 28 | @include prefixed(animation-delay, "0s, .3s"); 29 | @include prefixed(animation-timing-function, "ease-out, ease-in-out"); 30 | @include prefixed(animation-iteration-count, "1, infinite"); 31 | @include prefixed(animation-fill-mode, "forwards"); 32 | @include prefixed(animation-direction, "normal, alternate"); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_wobble-to-bottom-right.scss: -------------------------------------------------------------------------------- 1 | /* Wobble To Bottom Right */ 2 | @include keyframes(#{$nameSpace}-wobble-to-bottom-right) { 3 | 16.65% { 4 | @include prefixed(transform, translate(8px, 8px)); 5 | } 6 | 7 | 33.3% { 8 | @include prefixed(transform, translate(-6px, -6px)); 9 | } 10 | 11 | 49.95% { 12 | @include prefixed(transform, translate(4px, 4px)); 13 | } 14 | 15 | 66.6% { 16 | @include prefixed(transform, translate(-2px, -2px)); 17 | } 18 | 19 | 83.25% { 20 | @include prefixed(transform, translate(1px, 1px)); 21 | } 22 | 23 | 100% { 24 | @include prefixed(transform, translate(0, 0)); 25 | } 26 | } 27 | 28 | @mixin wobble-to-bottom-right { 29 | @include hacks(); 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | @include prefixed(animation-name, #{$nameSpace}-wobble-to-bottom-right); 35 | @include prefixed(animation-duration, 1s); 36 | @include prefixed(animation-timing-function, ease-in-out); 37 | @include prefixed(animation-iteration-count, 1); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-drop.scss: -------------------------------------------------------------------------------- 1 | /* Icon Drop */ 2 | @include keyframes(#{$nameSpace}-icon-drop) { 3 | 0% { 4 | opacity: 0; 5 | 6 | } 7 | 8 | 50% { 9 | opacity: 0; 10 | @include prefixed(transform, translateY(-100%)); 11 | } 12 | 13 | 51%, 14 | 100% { 15 | opacity: 1; 16 | } 17 | } 18 | 19 | /* Icon Drop */ 20 | @mixin icon-drop { 21 | @include hacks(); 22 | 23 | .hvr-icon { 24 | @include prefixed(transform, translateZ(0)); 25 | } 26 | 27 | &:hover, 28 | &:focus, 29 | &:active { 30 | 31 | .hvr-icon { 32 | opacity: 0; 33 | @include prefixed(transition-duration, #{$mediumDuration}); 34 | @include prefixed(animation-name, #{$nameSpace}-icon-drop); 35 | @include prefixed(animation-duration, #{$slowDuration}); 36 | @include prefixed(animation-delay, #{$mediumDuration}); 37 | @include prefixed(animation-fill-mode, forwards); 38 | @include prefixed(animation-timing-function, ease-in-out); 39 | @include prefixed(animation-timing-function, cubic-bezier(.52,1.64,.37,.66)); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /scss/effects/border-transitions/_outline-in.scss: -------------------------------------------------------------------------------- 1 | /* Outline In */ 2 | @mixin outline-in { 3 | $outerBorderWidth: 4px; 4 | $innerBorderWidth: 4px; 5 | 6 | @include hacks(); 7 | position: relative; 8 | 9 | &:before { 10 | pointer-events: none; 11 | content: ''; 12 | position: absolute; 13 | border: $primaryColor solid $outerBorderWidth; 14 | top: -($outerBorderWidth + $innerBorderWidth) * 2; 15 | right: -($outerBorderWidth + $innerBorderWidth) * 2; 16 | bottom: -($outerBorderWidth + $innerBorderWidth) * 2; 17 | left: -($outerBorderWidth + $innerBorderWidth) * 2; 18 | opacity: 0; 19 | @include prefixed(transition-duration, .3s); 20 | @include prefixed(transition-property, "top, right, bottom, left"); 21 | } 22 | 23 | &:hover:before, 24 | &:focus:before, 25 | &:active:before { 26 | top: -($outerBorderWidth + $innerBorderWidth); 27 | right: -($outerBorderWidth + $innerBorderWidth); 28 | bottom: -($outerBorderWidth + $innerBorderWidth); 29 | left: -($outerBorderWidth + $innerBorderWidth); 30 | opacity: 1; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-wobble-vertical.less: -------------------------------------------------------------------------------- 1 | /* Icon Wobble Vertical */ 2 | .keyframes(~"@{nameSpace}-icon-wobble-vertical", { 3 | 16.65% { 4 | .prefixed(transform, translateY(6px)); 5 | } 6 | 7 | 33.3% { 8 | .prefixed(transform, translateY(-5px)); 9 | } 10 | 11 | 49.95% { 12 | .prefixed(transform, translateY(4px)); 13 | } 14 | 15 | 66.6% { 16 | .prefixed(transform, translateY(-2px)); 17 | } 18 | 19 | 83.25% { 20 | .prefixed(transform, translateY(1px)); 21 | } 22 | 23 | 100% { 24 | .prefixed(transform, translateY(0)); 25 | } 26 | }); 27 | 28 | .icon-wobble-vertical() { 29 | .hacks(); 30 | .prefixed(transition-duration, @mediumDuration); 31 | 32 | .hvr-icon { 33 | .prefixed(transform, translateZ(0)); 34 | } 35 | 36 | &:hover, 37 | &:focus, 38 | &:active { 39 | 40 | .hvr-icon { 41 | .prefixed(animation-name, ~"@{nameSpace}-icon-wobble-vertical"); 42 | .prefixed(animation-duration, 1s); 43 | .prefixed(animation-timing-function, ease-in-out); 44 | .prefixed(animation-iteration-count, 1); 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-wobble-horizontal.less: -------------------------------------------------------------------------------- 1 | /* Icon Wobble Horizontal */ 2 | .keyframes(~"@{nameSpace}-icon-wobble-horizontal", { 3 | 16.65% { 4 | .prefixed(transform, translateX(6px)); 5 | } 6 | 7 | 33.3% { 8 | .prefixed(transform, translateX(-5px)); 9 | } 10 | 11 | 49.95% { 12 | .prefixed(transform, translateX(4px)); 13 | } 14 | 15 | 66.6% { 16 | .prefixed(transform, translateX(-2px)); 17 | } 18 | 19 | 83.25% { 20 | .prefixed(transform, translateX(1px)); 21 | } 22 | 23 | 100% { 24 | .prefixed(transform, translateX(0)); 25 | } 26 | }); 27 | 28 | .icon-wobble-horizontal() { 29 | .hacks(); 30 | .prefixed(transition-duration, @mediumDuration); 31 | 32 | .hvr-icon { 33 | .prefixed(transform, translateZ(0)); 34 | } 35 | 36 | &:hover, 37 | &:focus, 38 | &:active { 39 | 40 | .hvr-icon { 41 | .prefixed(animation-name, ~"@{nameSpace}-icon-wobble-horizontal"); 42 | .prefixed(animation-duration, 1s); 43 | .prefixed(animation-timing-function, ease-in-out); 44 | .prefixed(animation-iteration-count, 1); 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_wobble-to-top-right.scss: -------------------------------------------------------------------------------- 1 | /* Wobble To Top Right */ 2 | @include keyframes(#{$nameSpace}-wobble-to-top-right) { 3 | 16.65% { 4 | @include prefixed(transform, translate(8px, -8px)); 5 | } 6 | 7 | 33.3% { 8 | @include prefixed(transform, translate(-6px, 6px)); 9 | } 10 | 11 | 49.95% { 12 | @include prefixed(transform, translate(4px, -4px)); 13 | } 14 | 15 | 66.6% { 16 | @include prefixed(transform, translate(-2px, 2px)); 17 | } 18 | 19 | 83.25% { 20 | @include prefixed(transform, translate(1px, -1px)); 21 | } 22 | 23 | 100% { 24 | @include prefixed(transform, translate(0, 0)); 25 | } 26 | } 27 | 28 | @mixin wobble-to-top-right { 29 | @include hacks(); 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | @include prefixed(animation-name, #{$nameSpace}-wobble-to-top-right); 35 | @include prefixed(animation-duration, 1s); 36 | @include prefixed(animation-timing-function, ease-in-out); 37 | @include prefixed(animation-iteration-count, 1); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-bob.less: -------------------------------------------------------------------------------- 1 | /* Icon Bob */ 2 | .keyframes(~"@{nameSpace}-icon-bob", { 3 | 0% { 4 | .prefixed(transform, translateY(-6px)); 5 | } 6 | 50% { 7 | .prefixed(transform, translateY(-2px)); 8 | } 9 | 100% { 10 | .prefixed(transform, translateY(-6px)); 11 | } 12 | }); 13 | 14 | .keyframes(~"@{nameSpace}-icon-bob-float", { 15 | 100% { 16 | .prefixed(transform, translateY(-6px)); 17 | } 18 | }); 19 | 20 | .icon-bob() { 21 | .hacks(); 22 | .prefixed(transition-duration, @mediumDuration); 23 | 24 | .hvr-icon { 25 | .prefixed(transform, translateZ(0)); 26 | } 27 | 28 | &:hover, 29 | &:focus, 30 | &:active { 31 | 32 | .hvr-icon { 33 | .prefixed(animation-name, ~"@{nameSpace}-icon-bob-float, @{nameSpace}-icon-bob"); 34 | .prefixed(animation-duration, ~".3s, 1.5s"); 35 | .prefixed(animation-delay, ~"0s, .3s"); 36 | .prefixed(animation-timing-function, ~"ease-out, ease-in-out"); 37 | .prefixed(animation-iteration-count, ~"1, infinite"); 38 | .prefixed(animation-fill-mode, ~"forwards"); 39 | .prefixed(animation-direction, ~"normal, alternate"); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-hang.less: -------------------------------------------------------------------------------- 1 | /* Icon Hang */ 2 | .keyframes(~"@{nameSpace}-icon-hang", { 3 | 0% { 4 | .prefixed(transform, translateY(6px)); 5 | } 6 | 50% { 7 | .prefixed(transform, translateY(2px)); 8 | } 9 | 100% { 10 | .prefixed(transform, translateY(6px)); 11 | } 12 | }); 13 | 14 | .keyframes(~"@{nameSpace}-icon-hang-sink", { 15 | 100% { 16 | .prefixed(transform, translateY(6px)); 17 | } 18 | }); 19 | 20 | .icon-hang() { 21 | .hacks(); 22 | .prefixed(transition-duration, @mediumDuration); 23 | 24 | .hvr-icon { 25 | .prefixed(transform, translateZ(0)); 26 | } 27 | 28 | &:hover, 29 | &:focus, 30 | &:active { 31 | 32 | .hvr-icon { 33 | .prefixed(animation-name, ~"@{nameSpace}-icon-hang-sink, @{nameSpace}-icon-hang"); 34 | .prefixed(animation-duration, ~".3s, 1.5s"); 35 | .prefixed(animation-delay, ~"0s, .3s"); 36 | .prefixed(animation-timing-function, ~"ease-out, ease-in-out"); 37 | .prefixed(animation-iteration-count, ~"1, infinite"); 38 | .prefixed(animation-fill-mode, ~"forwards"); 39 | .prefixed(animation-direction, ~"normal, alternate"); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /less/effects/shadow-and-glow-transitions/_float-shadow.less: -------------------------------------------------------------------------------- 1 | /* Float Shadow */ 2 | .float-shadow() { 3 | .hacks(); 4 | position: relative; 5 | .prefixed(transition-duration, @mediumDuration); 6 | .prefixed(transition-property, transform); 7 | 8 | &:before { 9 | pointer-events: none; 10 | position: absolute; 11 | z-index: -1; 12 | content: ''; 13 | top: 100%; 14 | left: 5%; 15 | height: 10px; 16 | width: 90%; 17 | opacity: 0; 18 | background: -webkit-radial-gradient(center, ellipse, rgba(0,0,0,.35) 0%, rgba(0, 0, 0, 0) 80%); 19 | background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */ 20 | .prefixed(transition-duration, @mediumDuration); 21 | .prefixed(transition-property, "transform, opacity"); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | .prefixed(transform, translateY(-5px)); /* move the element up by 5px */ 28 | 29 | &:before { 30 | opacity: 1; 31 | .prefixed(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) */ 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-wobble-vertical.scss: -------------------------------------------------------------------------------- 1 | /* Icon Wobble Vertical */ 2 | @include keyframes(#{$nameSpace}-icon-wobble-vertical) { 3 | 16.65% { 4 | @include prefixed(transform, translateY(6px)); 5 | } 6 | 7 | 33.3% { 8 | @include prefixed(transform, translateY(-5px)); 9 | } 10 | 11 | 49.95% { 12 | @include prefixed(transform, translateY(4px)); 13 | } 14 | 15 | 66.6% { 16 | @include prefixed(transform, translateY(-2px)); 17 | } 18 | 19 | 83.25% { 20 | @include prefixed(transform, translateY(1px)); 21 | } 22 | 23 | 100% { 24 | @include prefixed(transform, translateY(0)); 25 | } 26 | } 27 | 28 | @mixin icon-wobble-vertical { 29 | @include hacks(); 30 | @include prefixed(transition-duration, $mediumDuration); 31 | 32 | .hvr-icon { 33 | @include prefixed(transform, translateZ(0)); 34 | } 35 | 36 | &:hover, 37 | &:focus, 38 | &:active { 39 | 40 | .hvr-icon { 41 | @include prefixed(animation-name, #{$nameSpace}-icon-wobble-vertical); 42 | @include prefixed(animation-duration, 1s); 43 | @include prefixed(animation-timing-function, ease-in-out); 44 | @include prefixed(animation-iteration-count, 1); 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-wobble-horizontal.scss: -------------------------------------------------------------------------------- 1 | /* Icon Wobble Horizontal */ 2 | @include keyframes(#{$nameSpace}-icon-wobble-horizontal) { 3 | 16.65% { 4 | @include prefixed(transform, translateX(6px)); 5 | } 6 | 7 | 33.3% { 8 | @include prefixed(transform, translateX(-5px)); 9 | } 10 | 11 | 49.95% { 12 | @include prefixed(transform, translateX(4px)); 13 | } 14 | 15 | 66.6% { 16 | @include prefixed(transform, translateX(-2px)); 17 | } 18 | 19 | 83.25% { 20 | @include prefixed(transform, translateX(1px)); 21 | } 22 | 23 | 100% { 24 | @include prefixed(transform, translateX(0)); 25 | } 26 | } 27 | 28 | @mixin icon-wobble-horizontal { 29 | @include hacks(); 30 | @include prefixed(transition-duration, $mediumDuration); 31 | 32 | .hvr-icon { 33 | @include prefixed(transform, translateZ(0)); 34 | } 35 | 36 | &:hover, 37 | &:focus, 38 | &:active { 39 | 40 | .hvr-icon { 41 | @include prefixed(animation-name, #{$nameSpace}-icon-wobble-horizontal); 42 | @include prefixed(animation-duration, 1s); 43 | @include prefixed(animation-timing-function, ease-in-out); 44 | @include prefixed(animation-iteration-count, 1); 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /less/_options.less: -------------------------------------------------------------------------------- 1 | // DEFAULT OPTIONS 2 | 3 | // Prefix for Hover class names 4 | @nameSpace: hvr; 5 | 6 | // Durations 7 | @fastDuration: .1s; 8 | @mediumDuration: .3s; 9 | @slowDuration: .5s; 10 | 11 | // Colors 12 | @primaryColor: #e1e1e1; 13 | @secondaryColor: #666; 14 | @highlightColor: #ccc; 15 | @activeColor: #2098D1; 16 | @shadowColor: rgba(0, 0, 0, .6); 17 | 18 | // Speech bubbles options 19 | @tipWidth: 10px; //the width of the speech bubble tip 20 | @tipHeight: 10px; //the height of the speech bubble tip 21 | @tipColor: @primaryColor; 22 | 23 | // Arrows options 24 | @spaceBetweenTextAndArrows: 2.2em; 25 | 26 | // Curl dimensions 27 | @curlWidth: 25px; 28 | @curlHeight: 25px; 29 | 30 | // Curl colors 31 | @revealAreaColor: white; // reveal area behind the curl 32 | @curlLineColor: #aaa; // crease line 33 | @curlTransitionColor: #ccc; // color transitioning from crease line to final color 34 | @curlLastColor: white; // final color of the back of the curl 35 | 36 | // Browser Prefixes - Which CSS prefixes should be used? 37 | @webkit: true; 38 | @moz: false; 39 | @ms: false; 40 | @o: false; 41 | 42 | // Compile with or without classes 43 | @includeClasses: true; 44 | -------------------------------------------------------------------------------- /less/effects/shadow-and-glow-transitions/_shadow-radial.less: -------------------------------------------------------------------------------- 1 | /* Shadow Radial */ 2 | .shadow-radial() { 3 | .hacks(); 4 | position: relative; 5 | 6 | &:before, 7 | &:after { 8 | pointer-events: none; 9 | position: absolute; 10 | content: ''; 11 | left: 0; 12 | width: 100%; 13 | box-sizing: border-box; 14 | background-repeat: no-repeat; 15 | height: 5px; 16 | opacity: 0; 17 | .prefixed(transition-duration, @mediumDuration); 18 | .prefixed(transition-property, opacity); 19 | } 20 | 21 | &:before { 22 | bottom: 100%; 23 | background: -webkit-radial-gradient(50% 150%, ellipse, @shadowColor 0%, rgba(0, 0, 0, 0) 80%); 24 | background: radial-gradient(ellipse at 50% 150%, @shadowColor 0%, rgba(0, 0, 0, 0) 80%); 25 | } 26 | 27 | &:after { 28 | top: 100%; 29 | background: -webkit-radial-gradient(50% -50%, ellipse, @shadowColor 0%, rgba(0, 0, 0, 0) 80%); 30 | background: radial-gradient(ellipse at 50% -50%, @shadowColor 0%, rgba(0, 0, 0, 0) 80%); 31 | } 32 | 33 | &:hover:before, 34 | &:focus:before, 35 | &:active:before, 36 | &:hover:after, 37 | &:focus:after, 38 | &:active:after { 39 | opacity: 1; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /scss/effects/shadow-and-glow-transitions/_float-shadow.scss: -------------------------------------------------------------------------------- 1 | /* Float Shadow */ 2 | @mixin float-shadow { 3 | @include hacks(); 4 | position: relative; 5 | @include prefixed(transition-duration, $mediumDuration); 6 | @include prefixed(transition-property, transform); 7 | 8 | &:before { 9 | pointer-events: none; 10 | position: absolute; 11 | z-index: -1; 12 | content: ''; 13 | top: 100%; 14 | left: 5%; 15 | height: 10px; 16 | width: 90%; 17 | opacity: 0; 18 | background: -webkit-radial-gradient(center, ellipse, rgba(0,0,0,.35) 0%, rgba(0, 0, 0, 0) 80%); 19 | background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */ 20 | @include prefixed(transition-duration, $mediumDuration); 21 | @include prefixed(transition-property, "transform, opacity"); 22 | } 23 | 24 | &:hover, 25 | &:focus, 26 | &:active { 27 | @include prefixed(transform, translateY(-5px)); /* move the element up by 5px */ 28 | 29 | &:before { 30 | opacity: 1; 31 | @include prefixed(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) */ 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scss/effects/shadow-and-glow-transitions/_shadow-radial.scss: -------------------------------------------------------------------------------- 1 | /* Shadow Radial */ 2 | @mixin shadow-radial { 3 | @include hacks(); 4 | position: relative; 5 | 6 | &:before, 7 | &:after { 8 | pointer-events: none; 9 | position: absolute; 10 | content: ''; 11 | left: 0; 12 | width: 100%; 13 | box-sizing: border-box; 14 | background-repeat: no-repeat; 15 | height: 5px; 16 | opacity: 0; 17 | @include prefixed(transition-duration, $mediumDuration); 18 | @include prefixed(transition-property, opacity); 19 | } 20 | 21 | &:before { 22 | bottom: 100%; 23 | background: -webkit-radial-gradient(50% 150%, ellipse, $shadowColor 0%, rgba(0, 0, 0, 0) 80%); 24 | background: radial-gradient(ellipse at 50% 150%, $shadowColor 0%, rgba(0, 0, 0, 0) 80%); 25 | } 26 | 27 | &:after { 28 | top: 100%; 29 | background: -webkit-radial-gradient(50% -50%, ellipse, $shadowColor 0%, rgba(0, 0, 0, 0) 80%); 30 | background: radial-gradient(ellipse at 50% -50%, $shadowColor 0%, rgba(0, 0, 0, 0) 80%); 31 | } 32 | 33 | &:hover:before, 34 | &:focus:before, 35 | &:active:before, 36 | &:hover:after, 37 | &:focus:after, 38 | &:active:after { 39 | opacity: 1; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /less/effects/2d-transitions/_buzz-out.less: -------------------------------------------------------------------------------- 1 | /* Buzz Out */ 2 | .keyframes(~"@{nameSpace}-buzz-out", { 3 | 10% { 4 | .prefixed(transform, translateX(3px) rotate(2deg)); 5 | } 6 | 7 | 20% { 8 | .prefixed(transform, translateX(-3px) rotate(-2deg)); 9 | } 10 | 11 | 30% { 12 | .prefixed(transform, translateX(3px) rotate(2deg)); 13 | } 14 | 15 | 40% { 16 | .prefixed(transform, translateX(-3px) rotate(-2deg)); 17 | } 18 | 19 | 50% { 20 | .prefixed(transform, translateX(2px) rotate(1deg)); 21 | } 22 | 23 | 60% { 24 | .prefixed(transform, translateX(-2px) rotate(-1deg)); 25 | } 26 | 27 | 70% { 28 | .prefixed(transform, translateX(2px) rotate(1deg)); 29 | } 30 | 31 | 80% { 32 | .prefixed(transform, translateX(-2px) rotate(-1deg)); 33 | } 34 | 35 | 90% { 36 | .prefixed(transform, translateX(1px) rotate(0)); 37 | } 38 | 39 | 100% { 40 | .prefixed(transform, translateX(-1px) rotate(0)); 41 | } 42 | }); 43 | 44 | .buzz-out() { 45 | .hacks(); 46 | 47 | &:hover, 48 | &:focus, 49 | &:active { 50 | .prefixed(animation-name, ~"@{nameSpace}-buzz-out"); 51 | .prefixed(animation-duration, .75s); 52 | .prefixed(animation-timing-function, linear); 53 | .prefixed(animation-iteration-count, 1); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-bob.scss: -------------------------------------------------------------------------------- 1 | /* Icon Bob */ 2 | @include keyframes(#{$nameSpace}-icon-bob) { 3 | 0% { 4 | @include prefixed(transform, translateY(-6px)); 5 | } 6 | 50% { 7 | @include prefixed(transform, translateY(-2px)); 8 | } 9 | 100% { 10 | @include prefixed(transform, translateY(-6px)); 11 | } 12 | } 13 | 14 | @include keyframes(#{$nameSpace}-icon-bob-float) { 15 | 100% { 16 | @include prefixed(transform, translateY(-6px)); 17 | } 18 | } 19 | 20 | @mixin icon-bob { 21 | @include hacks(); 22 | @include prefixed(transition-duration, $mediumDuration); 23 | 24 | .hvr-icon { 25 | @include prefixed(transform, translateZ(0)); 26 | } 27 | 28 | &:hover, 29 | &:focus, 30 | &:active { 31 | 32 | .hvr-icon { 33 | @include prefixed(animation-name, "#{$nameSpace}-icon-bob-float, #{$nameSpace}-icon-bob"); 34 | @include prefixed(animation-duration, ".3s, 1.5s"); 35 | @include prefixed(animation-delay, "0s, .3s"); 36 | @include prefixed(animation-timing-function, "ease-out, ease-in-out"); 37 | @include prefixed(animation-iteration-count, "1, infinite"); 38 | @include prefixed(animation-fill-mode, "forwards"); 39 | @include prefixed(animation-direction, "normal, alternate"); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-hang.scss: -------------------------------------------------------------------------------- 1 | /* Icon Hang */ 2 | @include keyframes(#{$nameSpace}-icon-hang) { 3 | 0% { 4 | @include prefixed(transform, translateY(6px)); 5 | } 6 | 50% { 7 | @include prefixed(transform, translateY(2px)); 8 | } 9 | 100% { 10 | @include prefixed(transform, translateY(6px)); 11 | } 12 | } 13 | 14 | @include keyframes(#{$nameSpace}-icon-hang-sink) { 15 | 100% { 16 | @include prefixed(transform, translateY(6px)); 17 | } 18 | } 19 | 20 | @mixin icon-hang { 21 | @include hacks(); 22 | @include prefixed(transition-duration, $mediumDuration); 23 | 24 | .hvr-icon { 25 | @include prefixed(transform, translateZ(0)); 26 | } 27 | 28 | &:hover, 29 | &:focus, 30 | &:active { 31 | 32 | .hvr-icon { 33 | @include prefixed(animation-name, "#{$nameSpace}-icon-hang-sink, #{$nameSpace}-icon-hang"); 34 | @include prefixed(animation-duration, ".3s, 1.5s"); 35 | @include prefixed(animation-delay, "0s, .3s"); 36 | @include prefixed(animation-timing-function, "ease-out, ease-in-out"); 37 | @include prefixed(animation-iteration-count, "1, infinite"); 38 | @include prefixed(animation-fill-mode, "forwards"); 39 | @include prefixed(animation-direction, "normal, alternate"); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /scss/effects/2d-transitions/_buzz-out.scss: -------------------------------------------------------------------------------- 1 | /* Buzz Out */ 2 | @include keyframes(#{$nameSpace}-buzz-out) { 3 | 10% { 4 | @include prefixed(transform, translateX(3px) rotate(2deg)); 5 | } 6 | 7 | 20% { 8 | @include prefixed(transform, translateX(-3px) rotate(-2deg)); 9 | } 10 | 11 | 30% { 12 | @include prefixed(transform, translateX(3px) rotate(2deg)); 13 | } 14 | 15 | 40% { 16 | @include prefixed(transform, translateX(-3px) rotate(-2deg)); 17 | } 18 | 19 | 50% { 20 | @include prefixed(transform, translateX(2px) rotate(1deg)); 21 | } 22 | 23 | 60% { 24 | @include prefixed(transform, translateX(-2px) rotate(-1deg)); 25 | } 26 | 27 | 70% { 28 | @include prefixed(transform, translateX(2px) rotate(1deg)); 29 | } 30 | 31 | 80% { 32 | @include prefixed(transform, translateX(-2px) rotate(-1deg)); 33 | } 34 | 35 | 90% { 36 | @include prefixed(transform, translateX(1px) rotate(0)); 37 | } 38 | 39 | 100% { 40 | @include prefixed(transform, translateX(-1px) rotate(0)); 41 | } 42 | } 43 | 44 | @mixin buzz-out { 45 | @include hacks(); 46 | 47 | &:hover, 48 | &:focus, 49 | &:active { 50 | @include prefixed(animation-name, #{$nameSpace}-buzz-out); 51 | @include prefixed(animation-duration, .75s); 52 | @include prefixed(animation-timing-function, linear); 53 | @include prefixed(animation-iteration-count, 1); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /scss/_options.scss: -------------------------------------------------------------------------------- 1 | // DEFAULT OPTIONS 2 | 3 | // Prefix for Hover class names 4 | $nameSpace: 'hvr' !default; 5 | 6 | // Durations 7 | $fastDuration: .1s !default; 8 | $mediumDuration: .3s !default; 9 | $slowDuration: .5s !default; 10 | 11 | // Colors 12 | $primaryColor: #e1e1e1 !default; 13 | $secondaryColor: #666 !default; 14 | $highlightColor: #ccc !default; 15 | $activeColor: #2098D1 !default; 16 | $shadowColor: rgba(0, 0, 0, .6) !default; 17 | 18 | // Speech bubbles options 19 | $tipWidth: 10px !default; //the width of the speech bubble tip 20 | $tipHeight: 10px !default; //the height of the speech bubble tip 21 | $tipColor: $primaryColor !default; 22 | 23 | // Arrows options 24 | $spaceBetweenTextAndArrows: 2.2em !default; 25 | 26 | // Curl dimensions 27 | $curlWidth: 25px !default; 28 | $curlHeight: 25px !default; 29 | 30 | // Curl colors 31 | $revealAreaColor: white !default; // reveal area behind the curl 32 | $curlLineColor: #aaa !default; // crease line 33 | $curlTransitionColor: #ccc !default; // color transitioning from crease line to final color 34 | $curlLastColor: white !default; // final color of the back of the curl 35 | 36 | // Browser Prefixes - Which CSS prefixes should be used? 37 | $webkit: true !default; 38 | $moz: false !default; 39 | $ms: false !default; 40 | $o: false !default; 41 | 42 | // Compile with or without classes 43 | $includeClasses: true !default; 44 | -------------------------------------------------------------------------------- /HISTORY.md: -------------------------------------------------------------------------------- 1 | ## 2.0.2 - Jan 27, 2015 2 | 3 | - Added `back-pulse` effect 4 | 5 | ## 2.0.1 - Jan 26, 2015 6 | 7 | - Added `includeClasses` option to Sass/LESS so you can now generate CSS with or without Hover.css default class names 8 | - Added `!default` flags to Sass variables in `_options.scss` 9 | 10 | ## 2.0.0 - Jan 7, 2015 11 | 12 | - Added lots of new effects 13 | - Added LESS support 14 | - Prefixed all effect names with `hvr-` (can be changed in `scss/_options.scss`) 15 | - Updated some effects for better performance and/or browser support 16 | - Moved default button styles out of library 17 | - Moved all effects into sub folders with the name of the category they belong to 18 | - Renamed `hover` and `hover shadow` effects to `bob` and `bob shadow` 19 | - Removed `hover shadow` effect due to browser inconsistencies courtesy of [this Webkit/Blink bug](https://github.com/IanLunn/Hover/issues/24) which can't be worked around 20 | - Updated `bob` (formerly `hover`) and `hang` effects to work around [this WebKit/Blink bug](https://github.com/IanLunn/Hover/issues/24) 21 | - Change default `animation-timing-function` and `transition-timing-function` values for various effects 22 | - Changed all instances of 'colour' to 'color' 23 | - Added small amount of JS to demo page to prevent `` elements from navigating (not required for hover.css to work) 24 | - Added "What's Included?" section to README.md 25 | -------------------------------------------------------------------------------- /less/effects/icons/_icon-buzz-out.less: -------------------------------------------------------------------------------- 1 | /* Icon Buzz Out */ 2 | .keyframes(~"@{nameSpace}-icon-buzz-out", { 3 | 10% { 4 | .prefixed(transform, translateX(3px) rotate(2deg)); 5 | } 6 | 7 | 20% { 8 | .prefixed(transform, translateX(-3px) rotate(-2deg)); 9 | } 10 | 11 | 30% { 12 | .prefixed(transform, translateX(3px) rotate(2deg)); 13 | } 14 | 15 | 40% { 16 | .prefixed(transform, translateX(-3px) rotate(-2deg)); 17 | } 18 | 19 | 50% { 20 | .prefixed(transform, translateX(2px) rotate(1deg)); 21 | } 22 | 23 | 60% { 24 | .prefixed(transform, translateX(-2px) rotate(-1deg)); 25 | } 26 | 27 | 70% { 28 | .prefixed(transform, translateX(2px) rotate(1deg)); 29 | } 30 | 31 | 80% { 32 | .prefixed(transform, translateX(-2px) rotate(-1deg)); 33 | } 34 | 35 | 90% { 36 | .prefixed(transform, translateX(1px) rotate(0)); 37 | } 38 | 39 | 100% { 40 | .prefixed(transform, translateX(-1px) rotate(0)); 41 | } 42 | }); 43 | 44 | .icon-buzz-out() { 45 | .hacks(); 46 | .prefixed(transition-duration, @mediumDuration); 47 | 48 | .hvr-icon { 49 | .prefixed(transform, translateZ(0)); 50 | } 51 | 52 | &:hover, 53 | &:focus, 54 | &:active { 55 | 56 | .hvr-icon { 57 | .prefixed(animation-name, ~"@{nameSpace}-icon-buzz-out"); 58 | .prefixed(animation-duration, .75s); 59 | .prefixed(animation-timing-function, linear); 60 | .prefixed(animation-iteration-count, 1); 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /scss/effects/icons/_icon-buzz-out.scss: -------------------------------------------------------------------------------- 1 | /* Icon Buzz Out */ 2 | @include keyframes(#{$nameSpace}-icon-buzz-out) { 3 | 10% { 4 | @include prefixed(transform, translateX(3px) rotate(2deg)); 5 | } 6 | 7 | 20% { 8 | @include prefixed(transform, translateX(-3px) rotate(-2deg)); 9 | } 10 | 11 | 30% { 12 | @include prefixed(transform, translateX(3px) rotate(2deg)); 13 | } 14 | 15 | 40% { 16 | @include prefixed(transform, translateX(-3px) rotate(-2deg)); 17 | } 18 | 19 | 50% { 20 | @include prefixed(transform, translateX(2px) rotate(1deg)); 21 | } 22 | 23 | 60% { 24 | @include prefixed(transform, translateX(-2px) rotate(-1deg)); 25 | } 26 | 27 | 70% { 28 | @include prefixed(transform, translateX(2px) rotate(1deg)); 29 | } 30 | 31 | 80% { 32 | @include prefixed(transform, translateX(-2px) rotate(-1deg)); 33 | } 34 | 35 | 90% { 36 | @include prefixed(transform, translateX(1px) rotate(0)); 37 | } 38 | 39 | 100% { 40 | @include prefixed(transform, translateX(-1px) rotate(0)); 41 | } 42 | } 43 | 44 | @mixin icon-buzz-out { 45 | @include hacks(); 46 | @include prefixed(transition-duration, $mediumDuration); 47 | 48 | .hvr-icon { 49 | @include prefixed(transform, translateZ(0)); 50 | } 51 | 52 | &:hover, 53 | &:focus, 54 | &:active { 55 | 56 | .hvr-icon { 57 | @include prefixed(animation-name, #{$nameSpace}-icon-buzz-out); 58 | @include prefixed(animation-duration, .75s); 59 | @include prefixed(animation-timing-function, linear); 60 | @include prefixed(animation-iteration-count, 1); 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Hover.css 2 | 3 | Thanks for considering to contribute to Hover.css. To improve your chances of having your hard work merged into Hover.css, here's a quick guide. 4 | 5 | ## Guidelines for Effects 6 | 7 | 1. Effects should work with only one HTML element. This way, developers only need add a class to their element for your fancy effect to work on their page. CSS pseudo-elements are perfectly acceptable as they don't require additional changes to HTML. 8 | 9 | 2. Aim to provide subtle effects that enhance user experience. 10 | 11 | 3. Hover.css is available in Sass, LESS, and CSS formats. If you can, please submit your effects in as many of these formats as possible. Don't worry if you're unfamiliar with any though, we'll convert them for you. 12 | 13 | 4. Try not to use transitions and animations together on the same effect, [we've found this is buggy in Webkit/Blink browsers](https://github.com/IanLunn/Hover/issues/24). 14 | 15 | 5. Consider submitting an effect that is paired with an opposite, for example: `Bounce In`/`Bounce Out`, `Float`/`Sink`, `Icon Back`/`Icon Forward`. 16 | 17 | ## Browser Testing Effects 18 | 19 | The Hover.css project attempts to deliver effects that work in the latest versions of modern browsers (Firefox, Chrome, Safari, Opera, Internet Explorer 10+), as well as providing simple CSS fixes for older browsers where possible (a fallback color when `rgba()` is used for example). 20 | 21 | Fallbacks for older browsers are the responsibility of the developer adding Hover.css to their page, as described in the README's [Browser Support section](https://github.com/IanLunn/Hover#browser-support). 22 | 23 | Please be certain any effects you submit at least work in the latest versions of modern browsers, and advise us accordingly if that is not the case. 24 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | # Licenses 2 | 3 | Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the [Ian Lunn Design Limited Store](https://ianlunn.co.uk/store/licenses/) and [purchase a commercial license here](https://ianlunn.co.uk/store/hover-css/). 4 | 5 | ## Personal/Open Source 6 | 7 | For personal/open source use, Hover.css is made available under a [MIT license](https://opensource.org/licenses/MIT) 8 | 9 | - Use in unlimited personal applications 10 | - Your application can't be sold 11 | - Your modifications remain open-source 12 | - Free updates 13 | 14 | [Read full license](https://ianlunn.co.uk/store/licenses/personal/) 15 | 16 | ## Commercial 17 | 18 | For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses. 19 | 20 | ### Commercial License 21 | 22 | - Use in 1 application 23 | - Sell your application once only (e.g. a website sold to a client) 24 | - Your code is kept proprietary, to yourself 25 | - Free updates to the major version 26 | 27 | [Purchase](https://ianlunn.co.uk/store/hover-css/?attribute_pa_licenses=commercial) | [Read full license](https://ianlunn.co.uk/store/licenses/commercial/) 28 | 29 | ### Extended Commercial License 30 | 31 | - Use in unlimited applications 32 | - Sell your applications an unlimited number of times (e.g. a website template sold on a theme store)* 33 | - Your code is kept proprietary, to yourself 34 | - Free updates to the major version 35 | 36 | *With the exception of applications that allow end users to produce separate applications. See the OEM Commercial License. 37 | 38 | [Purchase](https://ianlunn.co.uk/store/hover-css/?attribute_pa_licenses=extended-commercial) | [Read full license](https://ianlunn.co.uk/store/licenses/extended-commercial/) 39 | 40 | ### OEM Commercial License 41 | 42 | Should your application enable end users to produce separate applications that incorporate Ian Lunn Design Limited's software, for example, a development toolkit, library, or application builder, you must obtain an OEM Commercial License. Please [contact us](https://ianlunn.co.uk/contact/) for more information about the OEM Commercial License. 43 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | grunt.initConfig({ 4 | pkg: grunt.file.readJSON('package.json'), 5 | 6 | version: { 7 | json: { 8 | src: ['package.json'] 9 | }, 10 | 11 | css: { 12 | options: { 13 | prefix: 'Version[:=]\\s*' 14 | }, 15 | src: ['css/hover.css', 'scss/hover.scss', 'less/hover.less'] 16 | } 17 | 18 | }, 19 | 20 | sass: { 21 | dist: { 22 | options: { 23 | style: 'expanded' 24 | }, 25 | files: { 26 | 'css/hover.css': 'scss/hover.scss' 27 | } 28 | } 29 | }, 30 | 31 | less: { 32 | dist: { 33 | options: { 34 | style: 'expanded' 35 | }, 36 | files: { 37 | 'css/hover.css': 'less/hover.less' 38 | } 39 | } 40 | }, 41 | 42 | cssmin: { 43 | combine: { 44 | files: { 45 | 'css/hover-min.css': ['css/hover.css'] 46 | } 47 | } 48 | }, 49 | 50 | 51 | watch: { 52 | options: { 53 | livereload: true, 54 | }, 55 | 56 | reload: { 57 | files: ['*.html', 'css/*.css'], 58 | options: { 59 | spawn: false 60 | } 61 | }, 62 | 63 | scss: { 64 | files: ['scss/**/*.scss'], 65 | tasks: ['sass', 'cssmin'], 66 | options: { 67 | spawn: false 68 | } 69 | }, 70 | 71 | less: { 72 | files: ['less/**/*.less'], 73 | tasks: ['less', 'cssmin'], 74 | options: { 75 | spawn: false 76 | } 77 | }, 78 | 79 | version: { 80 | files: ['package.json'], 81 | tasks: ['version'], 82 | options: { 83 | spawn: false 84 | } 85 | } 86 | }, 87 | 88 | connect: { 89 | server: { 90 | options: { 91 | livereload: true, 92 | hostname: '0.0.0.0', 93 | port: 8000, 94 | base: './' 95 | } 96 | } 97 | }, 98 | 99 | }); 100 | 101 | require('load-grunt-tasks')(grunt); 102 | 103 | grunt.registerTask('default', ['connect', 'watch']); 104 | }; 105 | -------------------------------------------------------------------------------- /css/demo-page.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Hover.css - Demo Page 3 | * Author: Ian Lunn @IanLunn 4 | * Author URL: http://ianlunn.co.uk/ 5 | * Github: https://github.com/IanLunn/Hover 6 | * Hover.css Copyright Ian Lunn 2017. 7 | */ 8 | 9 | /** 10 | * The following are default styles for the demo page, 11 | * you don't need to include these on your own site. 12 | */ 13 | 14 | @import url(http://fonts.googleapis.com/css?family=Roboto); 15 | 16 | body { 17 | margin: 0; 18 | padding: 40px 0 0 0; 19 | font-family: sans-serif; 20 | color: #333; 21 | line-height: 140%; 22 | } 23 | 24 | hr { 25 | margin-top: 2em; 26 | background-color: #ddd; 27 | border: none; 28 | height: 1px; 29 | } 30 | 31 | 32 | nav ul { 33 | margin: 0; 34 | padding: 0; 35 | text-align: center; 36 | font-size: .875em; 37 | font-weight: 700; 38 | } 39 | nav li { 40 | list-style: none; 41 | display: block; 42 | margin-left: 1em; 43 | margin-right: 1em; 44 | } 45 | @media only screen and (min-width: 768px) { 46 | nav li { 47 | display: inline-block; 48 | } 49 | } 50 | 51 | .sep { 52 | color: #ddd; 53 | margin: 0 4px; 54 | } 55 | 56 | #carbonads { 57 | --width: 180px; 58 | --font-size: 14px; 59 | } 60 | 61 | #carbonads { 62 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; 63 | display: block; 64 | overflow: hidden; 65 | margin: 0 auto; 66 | margin-bottom: 20px; 67 | max-width: var(--width); 68 | border-radius: 4px; 69 | text-align: center; 70 | box-shadow: 0 0 0 1px hsla(0, 0%, 0%, .1); 71 | background-color: hsl(0, 0%, 98%); 72 | font-size: var(--font-size); 73 | line-height: 1.5; 74 | } 75 | 76 | #carbonads a { 77 | color: inherit; 78 | text-decoration: none; 79 | } 80 | 81 | #carbonads a:hover { 82 | color: inherit; 83 | } 84 | 85 | #carbonads span { 86 | position: relative; 87 | display: block; 88 | overflow: hidden; 89 | } 90 | 91 | .carbon-img { 92 | display: block; 93 | margin-bottom: 8px; 94 | max-width: var(--width); 95 | line-height: 1; 96 | } 97 | 98 | .carbon-img img { 99 | display: block; 100 | margin: 0 auto; 101 | max-width: var(--width) !important; 102 | width: var(--width); 103 | height: auto; 104 | } 105 | 106 | .carbon-text { 107 | display: block; 108 | padding: 0 1em 8px; 109 | } 110 | 111 | .carbon-poweredby { 112 | display: block; 113 | padding: 10px var(--font-size); 114 | background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4); 115 | text-transform: uppercase; 116 | letter-spacing: .5px; 117 | font-weight: 600; 118 | font-size: 9px; 119 | line-height: 0; 120 | } 121 | 122 | @media only screen and (min-width: 320px) and (max-width: 759px) { 123 | #carbonads { 124 | float: none; 125 | margin: 0 auto; 126 | max-width: 330px; 127 | } 128 | #carbonads span { 129 | position: relative; 130 | } 131 | #carbonads > span { 132 | max-width: none; 133 | } 134 | .carbon-img { 135 | float: left; 136 | margin: 0; 137 | } 138 | 139 | .carbon-img img { 140 | max-width: 130px !important; 141 | } 142 | .carbon-text { 143 | float: left; 144 | margin-bottom: 0; 145 | padding: 8px 20px; 146 | text-align: left; 147 | max-width: calc(100% - 130px - 3em); 148 | } 149 | .carbon-poweredby { 150 | left: 130px; 151 | bottom: 0; 152 | display: block; 153 | width: 100%; 154 | } 155 | } 156 | 157 | .main { 158 | max-width: 800px; 159 | margin: 0 auto; 160 | padding: 0 20px; 161 | } 162 | 163 | .browsehappy { 164 | position: absolute; 165 | top: 0; 166 | right: 0; 167 | left: 0; 168 | padding: 1em; 169 | background: black; 170 | color: white; 171 | text-align: center; 172 | } 173 | 174 | img { 175 | border: none; 176 | } 177 | 178 | small { 179 | display: block; 180 | } 181 | 182 | p, 183 | [class^="hvr-"] { 184 | font-family: 'Roboto', sans-serif; 185 | } 186 | 187 | [class^="hvr-"] { 188 | margin: .4em; 189 | padding: 1em; 190 | cursor: pointer; 191 | background: #e1e1e1; 192 | text-decoration: none; 193 | color: #666; 194 | /* Prevent highlight colour when element is tapped */ 195 | -webkit-tap-highlight-color: rgba(0,0,0,0); 196 | 197 | /* Smooth fonts */ 198 | -webkit-font-smoothing: antialiased; 199 | -moz-osx-font-smoothing: grayscale; 200 | } 201 | 202 | .aligncenter { 203 | text-align: center; 204 | } 205 | 206 | .sup { 207 | vertical-align: super; 208 | margin-left: -1em; 209 | padding: .21875em; 210 | line-height: 100%; 211 | font-size: .21875em; 212 | border: #eee solid 1px; 213 | border-radius: 4px; 214 | color: inherit; 215 | } 216 | 217 | .sup:hover { 218 | background: #eee; 219 | } 220 | 221 | a { 222 | color: #2098D1; 223 | text-decoration: none; 224 | } 225 | 226 | .footer a:hover, 227 | .nav:hover { 228 | color: #207AD1; 229 | } 230 | 231 | .nav { 232 | display: inline-block; 233 | font-size: .8em; 234 | } 235 | 236 | .nav.hvr-icon-down, 237 | .nav.hvr-icon-forward { 238 | padding-right: 1.2em; 239 | } 240 | 241 | .nav.hvr-icon-down::before, 242 | .nav.hvr-icon-forward::before { 243 | right: 0; 244 | } 245 | 246 | .nav:hover, 247 | .nav:focus, 248 | .nav:active { 249 | text-decoration: none; 250 | } 251 | 252 | .intro { 253 | max-width: 680px; 254 | margin: 20px auto 0 auto; 255 | } 256 | 257 | .button.cta { 258 | display: inline-block; 259 | position: relative; 260 | margin: 1.2em 0 1em 0; 261 | padding: 1em; 262 | background: #2098D1; 263 | border: none; 264 | text-decoration: none; 265 | font-weight: 700; 266 | color: white; 267 | } 268 | 269 | .effects { 270 | margin-top: 6em; 271 | } 272 | 273 | h1 { 274 | text-align: center; 275 | font-size: 3em; 276 | } 277 | 278 | h2 { 279 | margin-top: 2em; 280 | } 281 | 282 | h3 { 283 | margin: 0; 284 | } 285 | 286 | .about { 287 | border-top: #333 solid 2px; 288 | border-bottom: #333 solid 2px; 289 | } 290 | 291 | .footer { 292 | overflow: hidden; 293 | width: auto; 294 | margin-top: 6em; 295 | font-size: .9em; 296 | } 297 | 298 | .footer a { 299 | text-decoration: none; 300 | } 301 | 302 | .credit { 303 | font-size: .8em; 304 | font-weight: normal; 305 | } 306 | 307 | .licenses { 308 | margin-top: 40px; 309 | margin-bottom: 60px; 310 | } 311 | 312 | .licenses:after { 313 | display: block; 314 | content: ''; 315 | clear: both; 316 | } 317 | 318 | .license { 319 | display: block !important; 320 | margin-bottom: 20px; 321 | text-align: center; 322 | border: #2098D1 solid 1px; 323 | } 324 | 325 | .license:focus, 326 | .license:hover { 327 | border-color: #207AD1; 328 | } 329 | 330 | .license:focus .button, 331 | .license:hover .button { 332 | background-color: #207AD1; 333 | color: white; 334 | } 335 | 336 | .license__content { 337 | padding: 25px 10px; 338 | } 339 | 340 | .license__title { 341 | margin: 0; 342 | font-size: 28px; 343 | line-height: 1.4; 344 | } 345 | 346 | .license__title div { 347 | font-size: 16px; 348 | font-weight: 400; 349 | } 350 | 351 | .license__desc { 352 | margin-top: 30px; 353 | margin-bottom: 0; 354 | font-size: 22px; 355 | font-weight: 700; 356 | } 357 | 358 | .license__button.cta { 359 | display: block; 360 | margin: 0; 361 | font-size: 22px; 362 | } 363 | 364 | @media only screen and (min-width: 568px) { 365 | .license { 366 | width: 48%; 367 | float: left; 368 | } 369 | 370 | .license:nth-child(2) { 371 | float: right; 372 | } 373 | 374 | .license__content { 375 | padding: 40px 10px; 376 | } 377 | } 378 | 379 | .download { 380 | margin-top: 2.6em; 381 | } 382 | 383 | .social-button { 384 | display: inline-block; 385 | vertical-align: middle; 386 | } 387 | 388 | .twitter-follow-button { 389 | display: block; 390 | margin: 0 auto; 391 | } 392 | 393 | .follow { 394 | margin-bottom: 20px; 395 | line-height: 200%; 396 | } 397 | 398 | .made-by { 399 | display: block; 400 | margin-top: 3em; 401 | padding-top: 3em; 402 | padding-bottom: 1em; 403 | font-family: $fontFeature; 404 | font-size: 1.125em; 405 | text-align: center; 406 | line-height: 1.6; 407 | background: #181818; 408 | color: #777; 409 | } 410 | 411 | .made-by svg { 412 | display: block; 413 | } 414 | 415 | .made-by ul, 416 | .made-by p { 417 | margin: 0; 418 | padding: 0; 419 | } 420 | 421 | .made-by ul { 422 | margin-bottom: .25em; 423 | } 424 | 425 | .made-by li { 426 | display: inline-block; 427 | vertical-align: middle; 428 | line-height: 1; 429 | } 430 | 431 | .made-by p { 432 | margin-top: .4em; 433 | font-size: .875em; 434 | } 435 | 436 | .made-by a { 437 | display: inline-block; 438 | padding: 0 .125em; 439 | color: #B1B1B1; 440 | transition-duration: .2s; 441 | transition-property: color; 442 | } 443 | 444 | .made-by a:focus, 445 | .made-by a:hover { 446 | color: white; 447 | } 448 | 449 | .made-by i { 450 | font-size: 26px; 451 | height: 30px; 452 | } 453 | 454 | .made-by .follow { 455 | margin-top: 2em; 456 | } 457 | 458 | .made-by .follow iframe { 459 | display: block; 460 | margin-left: auto; 461 | margin-right: auto; 462 | margin-bottom: .5em; 463 | } 464 | 465 | .made-by small { 466 | display: block; 467 | margin-top: 3em; 468 | font-size: .625em; 469 | } 470 | 471 | @-webkit-keyframes circle { 472 | 50% { 473 | -webkit-transform: scale(1.26923077); 474 | transform: scale(1.26923077); 475 | } 476 | } 477 | 478 | @keyframes circle { 479 | 50% { 480 | transform: scale(1.26923077); 481 | } 482 | } 483 | 484 | @-webkit-keyframes initials { 485 | 50% { 486 | -webkit-transform: translateY(-8px) translateZ(0); 487 | transform: translateY(-8px) translateZ(0); 488 | } 489 | } 490 | 491 | @keyframes initials { 492 | 50% { 493 | transform: translateY(-8px) translateZ(0); 494 | } 495 | } 496 | 497 | .ild-ident { 498 | display: block; 499 | } 500 | 501 | .ild-ident svg { 502 | display: block; 503 | overflow: visible; 504 | transform: scale(1) translateZ(0); 505 | } 506 | 507 | .ild-ident .circle-holder { 508 | transform: translate(-7px, -7px); 509 | } 510 | 511 | .ild-ident .circle { 512 | transform: translate(7px, 7px); 513 | } 514 | 515 | .ild-ident .active .i { 516 | animation: initials .4s ease-in-out; 517 | } 518 | 519 | .ild-ident .active .l { 520 | animation: initials .4s .2s ease-in-out; 521 | } 522 | 523 | .ild-ident .active .circle { 524 | animation: circle .5s .1s ease-in-out; 525 | } 526 | 527 | #forkongithub { 528 | display: none; 529 | } 530 | 531 | #forkongithub a { 532 | background: #000; 533 | color: #fff; 534 | text-decoration: none; 535 | font-family: arial, sans-serif; 536 | text-align: center; 537 | font-weight: bold; 538 | padding: 5px 40px; 539 | font-size: 1rem; 540 | line-height: 2rem; 541 | position: relative; 542 | -webkit-transition: 0.5s; 543 | transition: 0.5s; 544 | } 545 | 546 | #forkongithub a:hover, 547 | #forkongithub a:focus, 548 | #forkongithub a:active { 549 | background: #2098D1; 550 | color: #fff; 551 | } 552 | 553 | #forkongithub a::before, 554 | #forkongithub a::after { 555 | content: ""; 556 | width: 100%; 557 | display: block; 558 | position: absolute; 559 | top: 1px; 560 | left: 0; 561 | height: 1px; 562 | background: #fff; 563 | } 564 | 565 | #forkongithub a::after { 566 | bottom: 1px; 567 | top: auto; 568 | } 569 | 570 | .ad { 571 | margin-top: 3.5em; 572 | padding: 3em 1.5em; 573 | background: #f8f8f8; 574 | text-align: center; 575 | } 576 | 577 | .ad h2 { 578 | margin: 0; 579 | margin-bottom: 2em; 580 | line-height: 1.4; 581 | font-size: 1.2em; 582 | } 583 | 584 | .ad a { 585 | display: inline-block; 586 | margin: 0 auto 2em auto; 587 | } 588 | 589 | .ad__preview { 590 | font-size: 0; 591 | } 592 | 593 | .ad__preview a { 594 | display: block; 595 | width: 75%; 596 | } 597 | 598 | .ad__preview img { 599 | width: 100%; 600 | } 601 | 602 | @media only screen and (min-width: 360px) { 603 | h1 { 604 | font-size: 4em; 605 | } 606 | } 607 | 608 | @media screen and (min-width: 640px) { 609 | #forkongithub { 610 | position: absolute; 611 | display: block; 612 | top: 0; 613 | right: 0; 614 | width: 200px; 615 | overflow: hidden; 616 | height: 200px; 617 | } 618 | 619 | #forkongithub a { 620 | width: 200px; 621 | position: absolute; 622 | top: 60px; 623 | right: -60px; 624 | -webkit-transform: rotate(45deg); 625 | -ms-transform: rotate(45deg); 626 | transform: rotate(45deg); 627 | box-shadow: 4px 4px 10px rgba(0,0,0,0.8); 628 | } 629 | 630 | .ad__preview a { 631 | display: inline-block; 632 | width: 32%; 633 | } 634 | 635 | .ad__preview .second { 636 | margin: 0 2%; 637 | } 638 | } 639 | --------------------------------------------------------------------------------