├── .editorconfig ├── .gitignore ├── CONTRIBUTING.md ├── Gruntfile.js ├── HISTORY.md ├── README.md ├── bower.json ├── css ├── demo-page.css ├── hover-min.css ├── hover.css └── hover.css.map ├── hover.jpg ├── index.html ├── less ├── _hacks.less ├── _mixins.less ├── _options.less ├── effects │ ├── 2d-transitions │ │ ├── _backward.less │ │ ├── _bob.less │ │ ├── _bounce-in.less │ │ ├── _bounce-out.less │ │ ├── _buzz-out.less │ │ ├── _buzz.less │ │ ├── _float.less │ │ ├── _forward.less │ │ ├── _grow-rotate.less │ │ ├── _grow.less │ │ ├── _hang.less │ │ ├── _pop.less │ │ ├── _pulse-grow.less │ │ ├── _pulse-shrink.less │ │ ├── _pulse.less │ │ ├── _push.less │ │ ├── _rotate.less │ │ ├── _shrink.less │ │ ├── _sink.less │ │ ├── _skew-backward.less │ │ ├── _skew-forward.less │ │ ├── _skew.less │ │ ├── _wobble-bottom.less │ │ ├── _wobble-horizontal.less │ │ ├── _wobble-skew.less │ │ ├── _wobble-to-bottom-right.less │ │ ├── _wobble-to-top-right.less │ │ ├── _wobble-top.less │ │ └── _wobble-vertical.less │ ├── background-transitions │ │ ├── _back-pulse.less │ │ ├── _bounce-to-bottom.less │ │ ├── _bounce-to-left.less │ │ ├── _bounce-to-right.less │ │ ├── _bounce-to-top.less │ │ ├── _fade.less │ │ ├── _radial-in.less │ │ ├── _radial-out.less │ │ ├── _rectangle-in.less │ │ ├── _rectangle-out.less │ │ ├── _shutter-in-horizontal.less │ │ ├── _shutter-in-vertical.less │ │ ├── _shutter-out-horizontal.less │ │ ├── _shutter-out-vertical.less │ │ ├── _sweep-to-bottom.less │ │ ├── _sweep-to-left.less │ │ ├── _sweep-to-right.less │ │ └── _sweep-to-top.less │ ├── border-transitions │ │ ├── _border-fade.less │ │ ├── _hollow.less │ │ ├── _outline-in.less │ │ ├── _outline-out.less │ │ ├── _overline-from-center.less │ │ ├── _overline-from-left.less │ │ ├── _overline-from-right.less │ │ ├── _overline-reveal.less │ │ ├── _reveal.less │ │ ├── _ripple-in.less │ │ ├── _ripple-out.less │ │ ├── _round-corners.less │ │ ├── _trim.less │ │ ├── _underline-from-center.less │ │ ├── _underline-from-left.less │ │ ├── _underline-from-right.less │ │ └── _underline-reveal.less │ ├── curls │ │ ├── _curl-bottom-left.less │ │ ├── _curl-bottom-right.less │ │ ├── _curl-top-left.less │ │ └── _curl-top-right.less │ ├── icons │ │ ├── _icon-back.less │ │ ├── _icon-bob.less │ │ ├── _icon-bounce-out.less │ │ ├── _icon-bounce.less │ │ ├── _icon-buzz-out.less │ │ ├── _icon-buzz.less │ │ ├── _icon-down.less │ │ ├── _icon-drop.less │ │ ├── _icon-fade.less │ │ ├── _icon-float-away.less │ │ ├── _icon-float.less │ │ ├── _icon-forward.less │ │ ├── _icon-grow-rotate.less │ │ ├── _icon-grow.less │ │ ├── _icon-hang.less │ │ ├── _icon-pop.less │ │ ├── _icon-pulse-grow.less │ │ ├── _icon-pulse-shrink.less │ │ ├── _icon-pulse.less │ │ ├── _icon-push.less │ │ ├── _icon-rotate.less │ │ ├── _icon-shrink.less │ │ ├── _icon-sink-away.less │ │ ├── _icon-sink.less │ │ ├── _icon-spin.less │ │ ├── _icon-up.less │ │ ├── _icon-wobble-horizontal.less │ │ └── _icon-wobble-vertical.less │ ├── shadow-and-glow-transitions │ │ ├── _box-shadow-inset.less │ │ ├── _box-shadow-outset.less │ │ ├── _float-shadow.less │ │ ├── _glow.less │ │ ├── _grow-shadow.less │ │ ├── _shadow-radial.less │ │ └── _shadow.less │ └── speech-bubbles │ │ ├── _bubble-bottom.less │ │ ├── _bubble-float-bottom.less │ │ ├── _bubble-float-left.less │ │ ├── _bubble-float-right.less │ │ ├── _bubble-float-top.less │ │ ├── _bubble-left.less │ │ ├── _bubble-right.less │ │ └── _bubble-top.less └── hover.less ├── license.txt ├── logo-transparent.png ├── modern-slide-in.png ├── package.json ├── photo-stack.png ├── scss ├── _hacks.scss ├── _mixins.scss ├── _options.scss ├── effects │ ├── 2d-transitions │ │ ├── _backward.scss │ │ ├── _bob.scss │ │ ├── _bounce-in.scss │ │ ├── _bounce-out.scss │ │ ├── _buzz-out.scss │ │ ├── _buzz.scss │ │ ├── _float.scss │ │ ├── _forward.scss │ │ ├── _grow-rotate.scss │ │ ├── _grow.scss │ │ ├── _hang.scss │ │ ├── _pop.scss │ │ ├── _pulse-grow.scss │ │ ├── _pulse-shrink.scss │ │ ├── _pulse.scss │ │ ├── _push.scss │ │ ├── _rotate.scss │ │ ├── _shrink.scss │ │ ├── _sink.scss │ │ ├── _skew-backward.scss │ │ ├── _skew-forward.scss │ │ ├── _skew.scss │ │ ├── _wobble-bottom.scss │ │ ├── _wobble-horizontal.scss │ │ ├── _wobble-skew.scss │ │ ├── _wobble-to-bottom-right.scss │ │ ├── _wobble-to-top-right.scss │ │ ├── _wobble-top.scss │ │ └── _wobble-vertical.scss │ ├── background-transitions │ │ ├── _back-pulse.scss │ │ ├── _bounce-to-bottom.scss │ │ ├── _bounce-to-left.scss │ │ ├── _bounce-to-right.scss │ │ ├── _bounce-to-top.scss │ │ ├── _fade.scss │ │ ├── _radial-in.scss │ │ ├── _radial-out.scss │ │ ├── _rectangle-in.scss │ │ ├── _rectangle-out.scss │ │ ├── _shutter-in-horizontal.scss │ │ ├── _shutter-in-vertical.scss │ │ ├── _shutter-out-horizontal.scss │ │ ├── _shutter-out-vertical.scss │ │ ├── _sweep-to-bottom.scss │ │ ├── _sweep-to-left.scss │ │ ├── _sweep-to-right.scss │ │ └── _sweep-to-top.scss │ ├── border-transitions │ │ ├── _border-fade.scss │ │ ├── _hollow.scss │ │ ├── _outline-in.scss │ │ ├── _outline-out.scss │ │ ├── _overline-from-center.scss │ │ ├── _overline-from-left.scss │ │ ├── _overline-from-right.scss │ │ ├── _overline-reveal.scss │ │ ├── _reveal.scss │ │ ├── _ripple-in.scss │ │ ├── _ripple-out.scss │ │ ├── _round-corners.scss │ │ ├── _trim.scss │ │ ├── _underline-from-center.scss │ │ ├── _underline-from-left.scss │ │ ├── _underline-from-right.scss │ │ └── _underline-reveal.scss │ ├── curls │ │ ├── _curl-bottom-left.scss │ │ ├── _curl-bottom-right.scss │ │ ├── _curl-top-left.scss │ │ └── _curl-top-right.scss │ ├── icons │ │ ├── _icon-back.scss │ │ ├── _icon-bob.scss │ │ ├── _icon-bounce-out.scss │ │ ├── _icon-bounce.scss │ │ ├── _icon-buzz-out.scss │ │ ├── _icon-buzz.scss │ │ ├── _icon-down.scss │ │ ├── _icon-drop.scss │ │ ├── _icon-fade.scss │ │ ├── _icon-float-away.scss │ │ ├── _icon-float.scss │ │ ├── _icon-forward.scss │ │ ├── _icon-grow-rotate.scss │ │ ├── _icon-grow.scss │ │ ├── _icon-hang.scss │ │ ├── _icon-pop.scss │ │ ├── _icon-pulse-grow.scss │ │ ├── _icon-pulse-shrink.scss │ │ ├── _icon-pulse.scss │ │ ├── _icon-push.scss │ │ ├── _icon-rotate.scss │ │ ├── _icon-shrink.scss │ │ ├── _icon-sink-away.scss │ │ ├── _icon-sink.scss │ │ ├── _icon-spin.scss │ │ ├── _icon-up.scss │ │ ├── _icon-wobble-horizontal.scss │ │ └── _icon-wobble-vertical.scss │ ├── shadow-and-glow-transitions │ │ ├── _box-shadow-inset.scss │ │ ├── _box-shadow-outset.scss │ │ ├── _float-shadow.scss │ │ ├── _glow.scss │ │ ├── _grow-shadow.scss │ │ ├── _shadow-radial.scss │ │ └── _shadow.scss │ └── speech-bubbles │ │ ├── _bubble-bottom.scss │ │ ├── _bubble-float-bottom.scss │ │ ├── _bubble-float-left.scss │ │ ├── _bubble-float-right.scss │ │ ├── _bubble-float-top.scss │ │ ├── _bubble-left.scss │ │ ├── _bubble-right.scss │ │ └── _bubble-top.scss └── hover.scss ├── sequence-logo.png └── two-up.png /.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 | -------------------------------------------------------------------------------- /.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 -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /hover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IanLunn/Hover/eb8629df13850d78bbcccd4fed68d231aec0c535/hover.jpg -------------------------------------------------------------------------------- /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/_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/_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/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/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/_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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/_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/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/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/_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 | -------------------------------------------------------------------------------- /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/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/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/_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/_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/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/_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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/_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/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 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /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/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/_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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /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/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-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/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/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 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/_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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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/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/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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-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-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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-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-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 | -------------------------------------------------------------------------------- /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/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/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-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 | -------------------------------------------------------------------------------- /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-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-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 | -------------------------------------------------------------------------------- /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/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-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 | -------------------------------------------------------------------------------- /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-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 | -------------------------------------------------------------------------------- /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-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 | -------------------------------------------------------------------------------- /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/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/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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /logo-transparent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IanLunn/Hover/eb8629df13850d78bbcccd4fed68d231aec0c535/logo-transparent.png -------------------------------------------------------------------------------- /modern-slide-in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IanLunn/Hover/eb8629df13850d78bbcccd4fed68d231aec0c535/modern-slide-in.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /photo-stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IanLunn/Hover/eb8629df13850d78bbcccd4fed68d231aec0c535/photo-stack.png -------------------------------------------------------------------------------- /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/_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/_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 | -------------------------------------------------------------------------------- /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/_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/_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 | -------------------------------------------------------------------------------- /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/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/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/_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 | -------------------------------------------------------------------------------- /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/_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/_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/_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 | -------------------------------------------------------------------------------- /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/_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/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/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/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 | -------------------------------------------------------------------------------- /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/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.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 | -------------------------------------------------------------------------------- /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/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-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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/_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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-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-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 | -------------------------------------------------------------------------------- /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/_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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/_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/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 | -------------------------------------------------------------------------------- /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/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/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/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 | -------------------------------------------------------------------------------- /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/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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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-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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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-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-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/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/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/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-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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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/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-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 | -------------------------------------------------------------------------------- /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-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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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/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/_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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-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/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/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/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 | -------------------------------------------------------------------------------- /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-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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /sequence-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IanLunn/Hover/eb8629df13850d78bbcccd4fed68d231aec0c535/sequence-logo.png -------------------------------------------------------------------------------- /two-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IanLunn/Hover/eb8629df13850d78bbcccd4fed68d231aec0c535/two-up.png --------------------------------------------------------------------------------