├── .bowerrc ├── .gitignore ├── .jshintrc ├── Gruntfile.coffee ├── README.md ├── bower.json ├── client ├── images │ ├── assets │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── rect │ │ │ ├── 1.jpg │ │ │ ├── 10.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── 4.jpg │ │ │ ├── 5.jpg │ │ │ ├── 6.jpg │ │ │ ├── 7.jpg │ │ │ ├── 8.jpg │ │ │ └── 9.jpg │ └── bg_header.jpg ├── scripts │ ├── application.js │ └── main.coffee ├── styles │ ├── bourbon │ │ ├── _bourbon-deprecated-upcoming.scss │ │ ├── _bourbon.scss │ │ ├── addons │ │ │ ├── _button.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _font-family.scss │ │ │ ├── _hide-text.scss │ │ │ ├── _html5-input-types.scss │ │ │ ├── _position.scss │ │ │ ├── _prefixer.scss │ │ │ ├── _retina-image.scss │ │ │ ├── _size.scss │ │ │ ├── _timing-functions.scss │ │ │ └── _triangle.scss │ │ ├── css3 │ │ │ ├── _animation.scss │ │ │ ├── _appearance.scss │ │ │ ├── _backface-visibility.scss │ │ │ ├── _background-image.scss │ │ │ ├── _background.scss │ │ │ ├── _border-image.scss │ │ │ ├── _border-radius.scss │ │ │ ├── _box-sizing.scss │ │ │ ├── _columns.scss │ │ │ ├── _flex-box.scss │ │ │ ├── _font-face.scss │ │ │ ├── _hidpi-media-query.scss │ │ │ ├── _image-rendering.scss │ │ │ ├── _inline-block.scss │ │ │ ├── _keyframes.scss │ │ │ ├── _linear-gradient.scss │ │ │ ├── _perspective.scss │ │ │ ├── _placeholder.scss │ │ │ ├── _radial-gradient.scss │ │ │ ├── _transform.scss │ │ │ ├── _transition.scss │ │ │ └── _user-select.scss │ │ ├── functions │ │ │ ├── _compact.scss │ │ │ ├── _flex-grid.scss │ │ │ ├── _grid-width.scss │ │ │ ├── _linear-gradient.scss │ │ │ ├── _modular-scale.scss │ │ │ ├── _px-to-em.scss │ │ │ ├── _radial-gradient.scss │ │ │ ├── _tint-shade.scss │ │ │ └── _transition-property-name.scss │ │ └── helpers │ │ │ ├── _deprecated-webkit-gradient.scss │ │ │ ├── _gradient-positions-parser.scss │ │ │ ├── _linear-positions-parser.scss │ │ │ ├── _radial-arg-parser.scss │ │ │ ├── _radial-positions-parser.scss │ │ │ ├── _render-gradients.scss │ │ │ └── _shape-size-stripper.scss │ ├── circle │ │ ├── _effect1.scss │ │ ├── _effect10.scss │ │ ├── _effect11.scss │ │ ├── _effect12.scss │ │ ├── _effect13.scss │ │ ├── _effect14.scss │ │ ├── _effect15.scss │ │ ├── _effect16.scss │ │ ├── _effect17.scss │ │ ├── _effect18.scss │ │ ├── _effect19.scss │ │ ├── _effect2.scss │ │ ├── _effect20.scss │ │ ├── _effect3.scss │ │ ├── _effect4.scss │ │ ├── _effect5.scss │ │ ├── _effect6.scss │ │ ├── _effect7.scss │ │ ├── _effect8.scss │ │ └── _effect9.scss │ ├── docs-overrides.scss │ ├── docs.css │ ├── ihover.scss │ ├── shared │ │ ├── _default-styles.scss │ │ └── _variables.scss │ └── square │ │ ├── _effect1.scss │ │ ├── _effect10.scss │ │ ├── _effect11.scss │ │ ├── _effect12.scss │ │ ├── _effect13.scss │ │ ├── _effect14.scss │ │ ├── _effect15.scss │ │ ├── _effect2.scss │ │ ├── _effect3.scss │ │ ├── _effect4.scss │ │ ├── _effect5.scss │ │ ├── _effect6.scss │ │ ├── _effect7.scss │ │ ├── _effect8.scss │ │ └── _effect9.scss └── templates │ ├── index.jade │ └── layout.jade ├── dist ├── images │ ├── assets │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── rect │ │ │ ├── 1.jpg │ │ │ ├── 10.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── 4.jpg │ │ │ ├── 5.jpg │ │ │ ├── 6.jpg │ │ │ ├── 7.jpg │ │ │ ├── 8.jpg │ │ │ └── 9.jpg │ └── bg_header.jpg ├── index.html ├── scripts │ └── app.js └── styles │ └── main.css ├── package.json ├── preview ├── preview.png └── thumb.png └── src ├── ihover.css └── ihover.min.css /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "client/bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | demo 3 | .tmp 4 | .sass-cache 5 | client/bower_components 6 | client/index.html 7 | 8 | .DS_Store 9 | npm-debug.log -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": true, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": true, 12 | "newcap": true, 13 | "noarg": true, 14 | "quotmark": "single", 15 | "regexp": true, 16 | "undef": true, 17 | "unused": true, 18 | "strict": true, 19 | "trailing": true, 20 | "smarttabs": true, 21 | "globals": { 22 | "angular": false 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Gruntfile.coffee: -------------------------------------------------------------------------------- 1 | "use strict" 2 | LIVERELOAD_PORT = 35728 3 | lrSnippet = require("connect-livereload")(port: LIVERELOAD_PORT) 4 | 5 | # var conf = require('./conf.'+process.env.NODE_ENV); 6 | mountFolder = (connect, dir) -> 7 | connect.static require("path").resolve(dir) 8 | 9 | 10 | # # Globbing 11 | # for performance reasons we're only matching one level down: 12 | # 'test/spec/{,*}*.js' 13 | # use this if you want to recursively match all subfolders: 14 | # 'test/spec/**/*.js' 15 | module.exports = (grunt) -> 16 | require("load-grunt-tasks") grunt 17 | require("time-grunt") grunt 18 | 19 | # configurable paths 20 | yeomanConfig = 21 | app: "client" 22 | dist: "dist" 23 | 24 | try 25 | yeomanConfig.app = require("./bower.json").appPath or yeomanConfig.app 26 | grunt.initConfig 27 | yeoman: yeomanConfig 28 | watch: 29 | coffee: 30 | files: ["<%= yeoman.app %>/scripts/**/*.coffee"] 31 | tasks: ["coffee:dist"] 32 | 33 | # less: 34 | # files: ["<%= yeoman.app %>/styles/**/*.less"] 35 | # tasks: ["less:server"] 36 | 37 | compass: 38 | files: ["<%= yeoman.app %>/styles/**/*.scss"] 39 | tasks: ["compass:server"] 40 | 41 | jade: 42 | files: ["<%= yeoman.app %>/templates/*.jade"] 43 | tasks: ["jade:server"] 44 | 45 | livereload: 46 | options: 47 | livereload: LIVERELOAD_PORT 48 | 49 | files: [ 50 | "<%= yeoman.app %>/templates/*.jade" 51 | # "<%= yeoman.app %>/styles/**/*.less" 52 | "<%= yeoman.app %>/styles/**/*.scss" 53 | ".tmp/styles/**/*.css" 54 | "{.tmp,<%= yeoman.app %>}/scripts/**/*.js" 55 | "{.tmp,<%= yeoman.app %>}/scripts/**/*.coffee" 56 | "<%= yeoman.app %>/images/**/*.{png,jpg,jpeg,gif,webp,svg}" 57 | ] 58 | 59 | connect: 60 | options: 61 | port: 9000 62 | 63 | # Change this to '0.0.0.0' to access the server from outside. 64 | hostname: "localhost" 65 | 66 | livereload: 67 | options: 68 | middleware: (connect) -> 69 | [lrSnippet, mountFolder(connect, ".tmp"), mountFolder(connect, yeomanConfig.app)] 70 | 71 | test: 72 | options: 73 | middleware: (connect) -> 74 | [mountFolder(connect, ".tmp"), mountFolder(connect, "test")] 75 | 76 | dist: 77 | options: 78 | middleware: (connect) -> 79 | [mountFolder(connect, yeomanConfig.dist)] 80 | 81 | open: 82 | server: 83 | url: "http://localhost:<%= connect.options.port %>" 84 | 85 | clean: 86 | dist: 87 | files: [ 88 | dot: true 89 | src: [".tmp", "<%= yeoman.dist %>/*", "!<%= yeoman.dist %>/.git*"] 90 | ] 91 | 92 | server: ".tmp" 93 | 94 | jshint: 95 | options: 96 | jshintrc: ".jshintrc" 97 | 98 | all: ["Gruntfile.js", "<%= yeoman.app %>/scripts/**/*.js"] 99 | 100 | jade: 101 | server: 102 | options: 103 | pretty: true 104 | files: [ 105 | expand: true 106 | cwd: "<%= yeoman.app %>/templates" 107 | src: [ 108 | "*.jade" 109 | "!layout.jade" 110 | ] 111 | dest: "<%= yeoman.app %>/" 112 | ext: ".html" 113 | ] 114 | dist: 115 | options: 116 | pretty: true 117 | files: [ 118 | expand: true 119 | cwd: "<%= yeoman.app %>/templates" 120 | src: [ 121 | "*.jade" 122 | "!layout.jade" 123 | ] 124 | dest: "<%= yeoman.app %>/" 125 | ext: ".html" 126 | ] 127 | 128 | # less: 129 | # server: 130 | # options: 131 | # strictMath: true 132 | # dumpLineNumbers: true 133 | # sourceMap: true 134 | # sourceMapRootpath: "" 135 | # outputSourceFiles: true 136 | # files: [ 137 | # expand: true 138 | # cwd: "<%= yeoman.app %>/styles" 139 | # src: ["ihover.less", "docs-overrides.less"] 140 | # dest: ".tmp/styles" 141 | # ext: ".css" 142 | # ] 143 | # min: 144 | # options: 145 | # strictMath: true 146 | # compress: true 147 | # sourceMapRootpath: "" 148 | # outputSourceFiles: true 149 | # files: [ 150 | # expand: true 151 | # cwd: "<%= yeoman.app %>/styles" 152 | # src: "ihover.less" 153 | # dest: ".tmp/styles" 154 | # ext: ".css" 155 | # ] 156 | # dist: 157 | # options: 158 | # cleancss: true, 159 | # report: 'min' 160 | # files: 161 | # '.tmp/styles/ihover.css': '<%= yeoman.app %>/styles/ihover.less' 162 | # '.tmp/styles/docs-overrides.css': '<%= yeoman.app %>/styles/docs-overrides.less' 163 | 164 | compass: 165 | options: 166 | sassDir: "<%= yeoman.app %>/styles" 167 | cssDir: ".tmp/styles" 168 | generatedImagesDir: ".tmp/assets/" 169 | imagesDir: "<%= yeoman.app %>/assets" 170 | javascriptsDir: "<%= yeoman.app %>/scripts" 171 | fontsDir: "<%= yeoman.app %>/fonts" 172 | importPath: "<%= yeoman.app %>/bower_components" 173 | httpImagesPath: "/assets" 174 | httpGeneratedImagesPath: "/assets" 175 | httpFontsPath: "/fonts" 176 | relativeAssets: true 177 | dist: 178 | options: 179 | noLineComments: true 180 | debugInfo: false 181 | outputStyle: 'expanded' 182 | min: 183 | options: 184 | noLineComments: true 185 | debugInfo: false 186 | outputStyle: 'compressed' 187 | server: 188 | options: 189 | debugInfo: true 190 | # if you want to use the compass config.rb file for configuration: 191 | # compass: 192 | # dist: 193 | # options: 194 | # config: 'config.rb' 195 | 196 | coffee: 197 | server: 198 | options: 199 | sourceMap: true 200 | # join: true, 201 | sourceRoot: "" 202 | files: [ 203 | expand: true 204 | cwd: "<%= yeoman.app %>/scripts" 205 | src: "**/*.coffee" 206 | dest: ".tmp/scripts" 207 | ext: ".js" 208 | ] 209 | dist: 210 | options: 211 | sourceMap: false 212 | # join: true, 213 | sourceRoot: "" 214 | files: [ 215 | expand: true 216 | cwd: "<%= yeoman.app %>/scripts" 217 | src: "**/*.coffee" 218 | dest: ".tmp/scripts" 219 | ext: ".js" 220 | ] 221 | 222 | useminPrepare: 223 | html: "<%= yeoman.app %>/index.html" 224 | options: 225 | dest: "<%= yeoman.dist %>" 226 | flow: 227 | steps: 228 | 'css': ["concat"] 229 | 'js': ["concat"] 230 | post: [] 231 | 232 | usemin: 233 | html: ["<%= yeoman.dist %>/**/*.html", "!<%= yeoman.dist %>/bower_components/**"] 234 | css: ["<%= yeoman.dist %>/styles/**/*.css"] 235 | options: 236 | dirs: ["<%= yeoman.dist %>"] 237 | 238 | htmlmin: 239 | dist: 240 | options: {} 241 | files: [ 242 | expand: true 243 | cwd: "<%= yeoman.app %>" 244 | src: ["*.html", "views/*.html"] 245 | dest: "<%= yeoman.dist %>" 246 | ] 247 | 248 | 249 | # Put files not handled in other tasks here 250 | copy: 251 | dist: 252 | files: [ 253 | expand: true 254 | dot: true 255 | cwd: "<%= yeoman.app %>" 256 | dest: "<%= yeoman.dist %>" 257 | src: [ 258 | "fonts/**/*" 259 | "images/**/*" 260 | ] 261 | ] 262 | styles: 263 | expand: true 264 | cwd: "<%= yeoman.app %>/styles" 265 | dest: ".tmp/styles/" 266 | src: "**/*.css" 267 | 268 | concurrent: 269 | server: ["coffee:server", "jade:server", "compass:server", "copy:styles"] 270 | dist: ["coffee:dist", "jade:dist", "compass:dist", "copy:styles", "htmlmin"] 271 | 272 | 273 | 274 | concat: 275 | options: 276 | separator: grunt.util.linefeed + ';' + grunt.util.linefeed 277 | dist: 278 | src: ["<%= yeoman.dist %>/jquery/jquery.min.js"] 279 | dest: "<%= yeoman.dist %>/scripts/app.js" 280 | 281 | # 282 | # 'concat', 'uglify' not need, "usemin" with take care of them 283 | # uglify: 284 | # dist: 285 | # files: 286 | # "<%= yeoman.dist %>/scripts/app.js": [".tmp/**/*.js"] 287 | 288 | 289 | grunt.registerTask "server", (target) -> 290 | return grunt.task.run(["build", "open", "connect:dist:keepalive"]) if target is "dist" 291 | grunt.task.run ["clean:server", "concurrent:server", "connect:livereload", "open", "watch"] 292 | 293 | grunt.registerTask "build", ["clean:dist", "jade:server", "useminPrepare", "concurrent:dist", "copy:dist", "concat", "usemin"] 294 | grunt.registerTask "default", ["jshint", "build"] -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ![thumbnail](./preview/thumb.png) 3 | 4 | ## Intro 5 | iHover is a collection of hover effects using pure CSS, inspired by [this codrops article](https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/), powered by Sass. 6 | 7 | **Demo**: https://gudh.github.io/ihover/dist/index.html 8 | 9 | * Pure CSS! 10 | * Sass CSS 11 | * Modular code 12 | * Bootstrap compatible (Bootstrap is not needed though) 13 | * Well documented 14 | 15 | 16 | ## Install 17 | The production code is inside "src" folder, you can use Bower to install it: 18 | ``` 19 | $ bower install ihover 20 | ``` 21 | 22 | 23 | ## Preview 24 | ![preview image](./preview/preview.png) 25 | 26 | 27 | ## License 28 | Licensed under MIT. 29 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ihover", 3 | "ignore": [ 4 | "preview" 5 | ], 6 | "devDependencies": { 7 | "bootstrap": "~3.1.0", 8 | "jquery": "~1.11.0", 9 | "google-code-prettify": "~1.0.1", 10 | "jquery.smooth-scroll": "~1.4.13", 11 | "bourbon": "~3.1.8" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /client/images/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/1.jpg -------------------------------------------------------------------------------- /client/images/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/2.jpg -------------------------------------------------------------------------------- /client/images/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/3.jpg -------------------------------------------------------------------------------- /client/images/assets/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/4.jpg -------------------------------------------------------------------------------- /client/images/assets/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/5.jpg -------------------------------------------------------------------------------- /client/images/assets/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/6.jpg -------------------------------------------------------------------------------- /client/images/assets/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/7.jpg -------------------------------------------------------------------------------- /client/images/assets/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/8.jpg -------------------------------------------------------------------------------- /client/images/assets/rect/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/rect/1.jpg -------------------------------------------------------------------------------- /client/images/assets/rect/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/rect/10.jpg -------------------------------------------------------------------------------- /client/images/assets/rect/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/rect/2.jpg -------------------------------------------------------------------------------- /client/images/assets/rect/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/rect/3.jpg -------------------------------------------------------------------------------- /client/images/assets/rect/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/rect/4.jpg -------------------------------------------------------------------------------- /client/images/assets/rect/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/rect/5.jpg -------------------------------------------------------------------------------- /client/images/assets/rect/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/rect/6.jpg -------------------------------------------------------------------------------- /client/images/assets/rect/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/rect/7.jpg -------------------------------------------------------------------------------- /client/images/assets/rect/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/rect/8.jpg -------------------------------------------------------------------------------- /client/images/assets/rect/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/assets/rect/9.jpg -------------------------------------------------------------------------------- /client/images/bg_header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/client/images/bg_header.jpg -------------------------------------------------------------------------------- /client/scripts/application.js: -------------------------------------------------------------------------------- 1 | // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT 2 | // IT'S ALL JUST JUNK FOR OUR DOCS! 3 | // ++++++++++++++++++++++++++++++++++++++++++ 4 | 5 | /*! 6 | * Copyright 2013 Twitter, Inc. 7 | * 8 | * Licensed under the Creative Commons Attribution 3.0 Unported License. For 9 | * details, see http://creativecommons.org/licenses/by/3.0/. 10 | */ 11 | 12 | 13 | !function ($) { 14 | 15 | $(function(){ 16 | 17 | // IE10 viewport hack for Surface/desktop Windows 8 bug 18 | // 19 | // See Getting Started docs for more information 20 | if (navigator.userAgent.match(/IEMobile\/10\.0/)) { 21 | var msViewportStyle = document.createElement("style"); 22 | msViewportStyle.appendChild( 23 | document.createTextNode( 24 | "@-ms-viewport{width:auto!important}" 25 | ) 26 | ); 27 | document.getElementsByTagName("head")[0]. 28 | appendChild(msViewportStyle); 29 | } 30 | 31 | 32 | var $window = $(window) 33 | var $body = $(document.body) 34 | 35 | var navHeight = $('.navbar').outerHeight(true) + 10 36 | 37 | $body.scrollspy({ 38 | target: '.bs-sidebar', 39 | offset: navHeight 40 | }) 41 | 42 | $window.on('load', function () { 43 | $body.scrollspy('refresh') 44 | }) 45 | 46 | $('.bs-docs-container [href=#]').click(function (e) { 47 | e.preventDefault() 48 | }) 49 | 50 | // back to top 51 | setTimeout(function () { 52 | var $sideBar = $('.bs-sidebar') 53 | 54 | $sideBar.affix({ 55 | offset: { 56 | top: function () { 57 | var offsetTop = $sideBar.offset().top 58 | var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10) 59 | var navOuterHeight = $('.bs-docs-nav').height() 60 | 61 | return (this.top = offsetTop - navOuterHeight - sideBarMargin) 62 | } 63 | , bottom: function () { 64 | return (this.bottom = $('.bs-footer').outerHeight(true)) 65 | } 66 | } 67 | }) 68 | }, 100) 69 | 70 | setTimeout(function () { 71 | $('.bs-top').affix() 72 | }, 100) 73 | 74 | // tooltip demo 75 | $('.tooltip-demo').tooltip({ 76 | selector: "[data-toggle=tooltip]", 77 | container: "body" 78 | }) 79 | 80 | $('.tooltip-test').tooltip() 81 | $('.popover-test').popover() 82 | 83 | $('.bs-docs-navbar').tooltip({ 84 | selector: "a[data-toggle=tooltip]", 85 | container: ".bs-docs-navbar .nav" 86 | }) 87 | 88 | // popover demo 89 | $("[data-toggle=popover]") 90 | .popover() 91 | 92 | // button state demo 93 | $('#fat-btn') 94 | .click(function () { 95 | var btn = $(this) 96 | btn.button('loading') 97 | setTimeout(function () { 98 | btn.button('reset') 99 | }, 3000) 100 | }) 101 | }) 102 | 103 | }(jQuery) 104 | -------------------------------------------------------------------------------- /client/scripts/main.coffee: -------------------------------------------------------------------------------- 1 | (($)-> 2 | $('.bs-sidenav a').smoothScroll() 3 | window.prettyPrint && prettyPrint() 4 | )(jQuery) -------------------------------------------------------------------------------- /client/styles/bourbon/_bourbon-deprecated-upcoming.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // These mixins/functions are deprecated 3 | // They will be removed in the next MAJOR version release 4 | //************************************************************************// 5 | @mixin box-shadow ($shadows...) { 6 | @include prefixer(box-shadow, $shadows, spec); 7 | @warn "box-shadow is deprecated and will be removed in the next major version release"; 8 | } 9 | 10 | @mixin background-size ($lengths...) { 11 | @include prefixer(background-size, $lengths, spec); 12 | @warn "background-size is deprecated and will be removed in the next major version release"; 13 | } 14 | -------------------------------------------------------------------------------- /client/styles/bourbon/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Custom Helpers 2 | @import "helpers/deprecated-webkit-gradient"; 3 | @import "helpers/gradient-positions-parser"; 4 | @import "helpers/linear-positions-parser"; 5 | @import "helpers/radial-arg-parser"; 6 | @import "helpers/radial-positions-parser"; 7 | @import "helpers/render-gradients"; 8 | @import "helpers/shape-size-stripper"; 9 | 10 | // Custom Functions 11 | @import "functions/compact"; 12 | @import "functions/flex-grid"; 13 | @import "functions/grid-width"; 14 | @import "functions/linear-gradient"; 15 | @import "functions/modular-scale"; 16 | @import "functions/px-to-em"; 17 | @import "functions/radial-gradient"; 18 | @import "functions/tint-shade"; 19 | @import "functions/transition-property-name"; 20 | 21 | // CSS3 Mixins 22 | @import "css3/animation"; 23 | @import "css3/appearance"; 24 | @import "css3/backface-visibility"; 25 | @import "css3/background"; 26 | @import "css3/background-image"; 27 | @import "css3/border-image"; 28 | @import "css3/border-radius"; 29 | @import "css3/box-sizing"; 30 | @import "css3/columns"; 31 | @import "css3/flex-box"; 32 | @import "css3/font-face"; 33 | @import "css3/hidpi-media-query"; 34 | @import "css3/image-rendering"; 35 | @import "css3/inline-block"; 36 | @import "css3/keyframes"; 37 | @import "css3/linear-gradient"; 38 | @import "css3/perspective"; 39 | @import "css3/radial-gradient"; 40 | @import "css3/transform"; 41 | @import "css3/transition"; 42 | @import "css3/user-select"; 43 | @import "css3/placeholder"; 44 | 45 | // Addons & other mixins 46 | @import "addons/button"; 47 | @import "addons/clearfix"; 48 | @import "addons/font-family"; 49 | @import "addons/hide-text"; 50 | @import "addons/html5-input-types"; 51 | @import "addons/position"; 52 | @import "addons/prefixer"; 53 | @import "addons/retina-image"; 54 | @import "addons/size"; 55 | @import "addons/timing-functions"; 56 | @import "addons/triangle"; 57 | 58 | // Soon to be deprecated Mixins 59 | @import "bourbon-deprecated-upcoming"; 60 | -------------------------------------------------------------------------------- /client/styles/bourbon/addons/_button.scss: -------------------------------------------------------------------------------- 1 | @mixin button ($style: simple, $base-color: #4294f0) { 2 | 3 | @if type-of($style) == color { 4 | $base-color: $style; 5 | $style: simple; 6 | } 7 | 8 | // Grayscale button 9 | @if $base-color == grayscale($base-color) { 10 | @if $style == simple { 11 | @include simple($base-color, $grayscale: true); 12 | } 13 | 14 | @else if $style == shiny { 15 | @include shiny($base-color, $grayscale: true); 16 | } 17 | 18 | @else if $style == pill { 19 | @include pill($base-color, $grayscale: true); 20 | } 21 | } 22 | 23 | // Colored button 24 | @else { 25 | @if $style == simple { 26 | @include simple($base-color); 27 | } 28 | 29 | @else if $style == shiny { 30 | @include shiny($base-color); 31 | } 32 | 33 | @else if $style == pill { 34 | @include pill($base-color); 35 | } 36 | } 37 | 38 | &:disabled { 39 | opacity: 0.5; 40 | cursor: not-allowed; 41 | } 42 | } 43 | 44 | 45 | // Simple Button 46 | //************************************************************************// 47 | @mixin simple($base-color, $grayscale: false) { 48 | $color: hsl(0, 0, 100%); 49 | $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 50 | $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); 51 | $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); 52 | $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); 53 | 54 | @if lightness($base-color) > 70% { 55 | $color: hsl(0, 0, 20%); 56 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 57 | } 58 | 59 | @if $grayscale == true { 60 | $border: grayscale($border); 61 | $inset-shadow: grayscale($inset-shadow); 62 | $stop-gradient: grayscale($stop-gradient); 63 | $text-shadow: grayscale($text-shadow); 64 | } 65 | 66 | border: 1px solid $border; 67 | border-radius: 3px; 68 | box-shadow: inset 0 1px 0 0 $inset-shadow; 69 | color: $color; 70 | display: inline-block; 71 | font-size: 11px; 72 | font-weight: bold; 73 | @include linear-gradient ($base-color, $stop-gradient); 74 | padding: 7px 18px; 75 | text-decoration: none; 76 | text-shadow: 0 1px 0 $text-shadow; 77 | background-clip: padding-box; 78 | 79 | &:hover:not(:disabled) { 80 | $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); 81 | $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); 82 | $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); 83 | 84 | @if $grayscale == true { 85 | $base-color-hover: grayscale($base-color-hover); 86 | $inset-shadow-hover: grayscale($inset-shadow-hover); 87 | $stop-gradient-hover: grayscale($stop-gradient-hover); 88 | } 89 | 90 | box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 91 | cursor: pointer; 92 | @include linear-gradient ($base-color-hover, $stop-gradient-hover); 93 | } 94 | 95 | &:active:not(:disabled) { 96 | $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 97 | $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); 98 | 99 | @if $grayscale == true { 100 | $border-active: grayscale($border-active); 101 | $inset-shadow-active: grayscale($inset-shadow-active); 102 | } 103 | 104 | border: 1px solid $border-active; 105 | box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee; 106 | } 107 | } 108 | 109 | 110 | // Shiny Button 111 | //************************************************************************// 112 | @mixin shiny($base-color, $grayscale: false) { 113 | $color: hsl(0, 0, 100%); 114 | $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); 115 | $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); 116 | $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); 117 | $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); 118 | $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); 119 | $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); 120 | $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); 121 | 122 | @if lightness($base-color) > 70% { 123 | $color: hsl(0, 0, 20%); 124 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 125 | } 126 | 127 | @if $grayscale == true { 128 | $border: grayscale($border); 129 | $border-bottom: grayscale($border-bottom); 130 | $fourth-stop: grayscale($fourth-stop); 131 | $inset-shadow: grayscale($inset-shadow); 132 | $second-stop: grayscale($second-stop); 133 | $text-shadow: grayscale($text-shadow); 134 | $third-stop: grayscale($third-stop); 135 | } 136 | 137 | border: 1px solid $border; 138 | border-bottom: 1px solid $border-bottom; 139 | border-radius: 5px; 140 | box-shadow: inset 0 1px 0 0 $inset-shadow; 141 | color: $color; 142 | display: inline-block; 143 | font-size: 14px; 144 | font-weight: bold; 145 | @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); 146 | padding: 8px 20px; 147 | text-align: center; 148 | text-decoration: none; 149 | text-shadow: 0 -1px 1px $text-shadow; 150 | 151 | &:hover:not(:disabled) { 152 | $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); 153 | $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); 154 | $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); 155 | $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); 156 | 157 | @if $grayscale == true { 158 | $first-stop-hover: grayscale($first-stop-hover); 159 | $second-stop-hover: grayscale($second-stop-hover); 160 | $third-stop-hover: grayscale($third-stop-hover); 161 | $fourth-stop-hover: grayscale($fourth-stop-hover); 162 | } 163 | 164 | cursor: pointer; 165 | @include linear-gradient(top, $first-stop-hover 0%, 166 | $second-stop-hover 50%, 167 | $third-stop-hover 50%, 168 | $fourth-stop-hover 100%); 169 | } 170 | 171 | &:active:not(:disabled) { 172 | $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); 173 | 174 | @if $grayscale == true { 175 | $inset-shadow-active: grayscale($inset-shadow-active); 176 | } 177 | 178 | box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff; 179 | } 180 | } 181 | 182 | 183 | // Pill Button 184 | //************************************************************************// 185 | @mixin pill($base-color, $grayscale: false) { 186 | $color: hsl(0, 0, 100%); 187 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); 188 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); 189 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); 190 | $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); 191 | $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); 192 | $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); 193 | 194 | @if lightness($base-color) > 70% { 195 | $color: hsl(0, 0, 20%); 196 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 197 | } 198 | 199 | @if $grayscale == true { 200 | $border-bottom: grayscale($border-bottom); 201 | $border-sides: grayscale($border-sides); 202 | $border-top: grayscale($border-top); 203 | $inset-shadow: grayscale($inset-shadow); 204 | $stop-gradient: grayscale($stop-gradient); 205 | $text-shadow: grayscale($text-shadow); 206 | } 207 | 208 | border: 1px solid $border-top; 209 | border-color: $border-top $border-sides $border-bottom; 210 | border-radius: 16px; 211 | box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3; 212 | color: $color; 213 | display: inline-block; 214 | font-size: 11px; 215 | font-weight: normal; 216 | line-height: 1; 217 | @include linear-gradient ($base-color, $stop-gradient); 218 | padding: 5px 16px; 219 | text-align: center; 220 | text-decoration: none; 221 | text-shadow: 0 -1px 1px $text-shadow; 222 | background-clip: padding-box; 223 | 224 | &:hover:not(:disabled) { 225 | $base-color-hover: adjust-color($base-color, $lightness: -4.5%); 226 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); 227 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); 228 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); 229 | $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); 230 | $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); 231 | $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); 232 | 233 | @if $grayscale == true { 234 | $base-color-hover: grayscale($base-color-hover); 235 | $border-bottom: grayscale($border-bottom); 236 | $border-sides: grayscale($border-sides); 237 | $border-top: grayscale($border-top); 238 | $inset-shadow-hover: grayscale($inset-shadow-hover); 239 | $stop-gradient-hover: grayscale($stop-gradient-hover); 240 | $text-shadow-hover: grayscale($text-shadow-hover); 241 | } 242 | 243 | border: 1px solid $border-top; 244 | border-color: $border-top $border-sides $border-bottom; 245 | box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 246 | cursor: pointer; 247 | @include linear-gradient ($base-color-hover, $stop-gradient-hover); 248 | text-shadow: 0 -1px 1px $text-shadow-hover; 249 | background-clip: padding-box; 250 | } 251 | 252 | &:active:not(:disabled) { 253 | $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); 254 | $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); 255 | $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); 256 | $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); 257 | $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); 258 | 259 | @if $grayscale == true { 260 | $active-color: grayscale($active-color); 261 | $border-active: grayscale($border-active); 262 | $border-bottom-active: grayscale($border-bottom-active); 263 | $inset-shadow-active: grayscale($inset-shadow-active); 264 | $text-shadow-active: grayscale($text-shadow-active); 265 | } 266 | 267 | background: $active-color; 268 | border: 1px solid $border-active; 269 | border-bottom: 1px solid $border-bottom-active; 270 | box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff; 271 | text-shadow: 0 -1px 1px $text-shadow-active; 272 | } 273 | } 274 | -------------------------------------------------------------------------------- /client/styles/bourbon/addons/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Micro clearfix provides an easy way to contain floats without adding additional markup 2 | // 3 | // Example usage: 4 | // 5 | // // Contain all floats within .wrapper 6 | // .wrapper { 7 | // @include clearfix; 8 | // .content, 9 | // .sidebar { 10 | // float : left; 11 | // } 12 | // } 13 | 14 | @mixin clearfix { 15 | *zoom: 1; 16 | 17 | &:before, 18 | &:after { 19 | content: " "; 20 | display: table; 21 | } 22 | 23 | &:after { 24 | clear: both; 25 | } 26 | } 27 | 28 | // Acknowledgements 29 | // Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/) 30 | -------------------------------------------------------------------------------- /client/styles/bourbon/addons/_font-family.scss: -------------------------------------------------------------------------------- 1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif; 2 | $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; 3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; 4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; 5 | $verdana: Verdana, Geneva, sans-serif; 6 | -------------------------------------------------------------------------------- /client/styles/bourbon/addons/_hide-text.scss: -------------------------------------------------------------------------------- 1 | @mixin hide-text { 2 | color: transparent; 3 | font: 0/0 a; 4 | text-shadow: none; 5 | } 6 | -------------------------------------------------------------------------------- /client/styles/bourbon/addons/_html5-input-types.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Generate a variable ($all-text-inputs) with a list of all html5 3 | // input types that have a text-based input, excluding textarea. 4 | // http://diveintohtml5.org/forms.html 5 | //************************************************************************// 6 | $inputs-list: 'input[type="email"]', 7 | 'input[type="number"]', 8 | 'input[type="password"]', 9 | 'input[type="search"]', 10 | 'input[type="tel"]', 11 | 'input[type="text"]', 12 | 'input[type="url"]', 13 | 14 | // Webkit & Gecko may change the display of these in the future 15 | 'input[type="color"]', 16 | 'input[type="date"]', 17 | 'input[type="datetime"]', 18 | 'input[type="datetime-local"]', 19 | 'input[type="month"]', 20 | 'input[type="time"]', 21 | 'input[type="week"]'; 22 | 23 | $unquoted-inputs-list: (); 24 | @each $input-type in $inputs-list { 25 | $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma); 26 | } 27 | 28 | $all-text-inputs: $unquoted-inputs-list; 29 | 30 | 31 | // Hover Pseudo-class 32 | //************************************************************************// 33 | $all-text-inputs-hover: (); 34 | @each $input-type in $unquoted-inputs-list { 35 | $input-type-hover: $input-type + ":hover"; 36 | $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma); 37 | } 38 | 39 | // Focus Pseudo-class 40 | //************************************************************************// 41 | $all-text-inputs-focus: (); 42 | @each $input-type in $unquoted-inputs-list { 43 | $input-type-focus: $input-type + ":focus"; 44 | $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma); 45 | } 46 | 47 | // You must use interpolation on the variable: 48 | // #{$all-text-inputs} 49 | // #{$all-text-inputs-hover} 50 | // #{$all-text-inputs-focus} 51 | 52 | // Example 53 | //************************************************************************// 54 | // #{$all-text-inputs}, textarea { 55 | // border: 1px solid red; 56 | // } 57 | -------------------------------------------------------------------------------- /client/styles/bourbon/addons/_position.scss: -------------------------------------------------------------------------------- 1 | @mixin position ($position: relative, $coordinates: 0 0 0 0) { 2 | 3 | @if type-of($position) == list { 4 | $coordinates: $position; 5 | $position: relative; 6 | } 7 | 8 | $top: nth($coordinates, 1); 9 | $right: nth($coordinates, 2); 10 | $bottom: nth($coordinates, 3); 11 | $left: nth($coordinates, 4); 12 | 13 | position: $position; 14 | 15 | @if $top == auto { 16 | top: $top; 17 | } 18 | @else if not(unitless($top)) { 19 | top: $top; 20 | } 21 | 22 | @if $right == auto { 23 | right: $right; 24 | } 25 | @else if not(unitless($right)) { 26 | right: $right; 27 | } 28 | 29 | @if $bottom == auto { 30 | bottom: $bottom; 31 | } 32 | @else if not(unitless($bottom)) { 33 | bottom: $bottom; 34 | } 35 | 36 | @if $left == auto { 37 | left: $left; 38 | } 39 | @else if not(unitless($left)) { 40 | left: $left; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /client/styles/bourbon/addons/_prefixer.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec); 3 | //************************************************************************// 4 | $prefix-for-webkit: true !default; 5 | $prefix-for-mozilla: true !default; 6 | $prefix-for-microsoft: true !default; 7 | $prefix-for-opera: true !default; 8 | $prefix-for-spec: true !default; // required for keyframe mixin 9 | 10 | @mixin prefixer ($property, $value, $prefixes) { 11 | @each $prefix in $prefixes { 12 | @if $prefix == webkit { 13 | @if $prefix-for-webkit { 14 | -webkit-#{$property}: $value; 15 | } 16 | } 17 | @else if $prefix == moz { 18 | @if $prefix-for-mozilla { 19 | -moz-#{$property}: $value; 20 | } 21 | } 22 | @else if $prefix == ms { 23 | @if $prefix-for-microsoft { 24 | -ms-#{$property}: $value; 25 | } 26 | } 27 | @else if $prefix == o { 28 | @if $prefix-for-opera { 29 | -o-#{$property}: $value; 30 | } 31 | } 32 | @else if $prefix == spec { 33 | @if $prefix-for-spec { 34 | #{$property}: $value; 35 | } 36 | } 37 | @else { 38 | @warn "Unrecognized prefix: #{$prefix}"; 39 | } 40 | } 41 | } 42 | 43 | @mixin disable-prefix-for-all() { 44 | $prefix-for-webkit: false; 45 | $prefix-for-mozilla: false; 46 | $prefix-for-microsoft: false; 47 | $prefix-for-opera: false; 48 | $prefix-for-spec: false; 49 | } 50 | -------------------------------------------------------------------------------- /client/styles/bourbon/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) { 2 | @if $asset-pipeline { 3 | background-image: image-url("#{$filename}.#{$extension}"); 4 | } 5 | @else { 6 | background-image: url("#{$filename}.#{$extension}"); 7 | } 8 | 9 | @include hidpi { 10 | 11 | @if $asset-pipeline { 12 | @if $retina-filename { 13 | background-image: image-url("#{$retina-filename}.#{$extension}"); 14 | } 15 | @else { 16 | background-image: image-url("#{$filename}@2x.#{$extension}"); 17 | } 18 | } 19 | 20 | @else { 21 | @if $retina-filename { 22 | background-image: url("#{$retina-filename}.#{$extension}"); 23 | } 24 | @else { 25 | background-image: url("#{$filename}@2x.#{$extension}"); 26 | } 27 | } 28 | 29 | background-size: $background-size; 30 | 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /client/styles/bourbon/addons/_size.scss: -------------------------------------------------------------------------------- 1 | @mixin size($size) { 2 | @if length($size) == 1 { 3 | @if $size == auto { 4 | width: $size; 5 | height: $size; 6 | } 7 | 8 | @else if unitless($size) { 9 | width: $size + px; 10 | height: $size + px; 11 | } 12 | 13 | @else if not(unitless($size)) { 14 | width: $size; 15 | height: $size; 16 | } 17 | } 18 | 19 | // Width x Height 20 | @if length($size) == 2 { 21 | $width: nth($size, 1); 22 | $height: nth($size, 2); 23 | 24 | @if $width == auto { 25 | width: $width; 26 | } 27 | @else if not(unitless($width)) { 28 | width: $width; 29 | } 30 | @else if unitless($width) { 31 | width: $width + px; 32 | } 33 | 34 | @if $height == auto { 35 | height: $height; 36 | } 37 | @else if not(unitless($height)) { 38 | height: $height; 39 | } 40 | @else if unitless($height) { 41 | height: $height + px; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /client/styles/bourbon/addons/_timing-functions.scss: -------------------------------------------------------------------------------- 1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) 2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html 3 | 4 | // EASE IN 5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 13 | 14 | // EASE OUT 15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 23 | 24 | // EASE IN OUT 25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 33 | -------------------------------------------------------------------------------- /client/styles/bourbon/addons/_triangle.scss: -------------------------------------------------------------------------------- 1 | @mixin triangle ($size, $color, $direction) { 2 | height: 0; 3 | width: 0; 4 | 5 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 6 | border-color: transparent; 7 | border-style: solid; 8 | border-width: $size / 2; 9 | 10 | @if $direction == up { 11 | border-bottom-color: $color; 12 | 13 | } @else if $direction == right { 14 | border-left-color: $color; 15 | 16 | } @else if $direction == down { 17 | border-top-color: $color; 18 | 19 | } @else if $direction == left { 20 | border-right-color: $color; 21 | } 22 | } 23 | 24 | @else if ($direction == up-right) or ($direction == up-left) { 25 | border-top: $size solid $color; 26 | 27 | @if $direction == up-right { 28 | border-left: $size solid transparent; 29 | 30 | } @else if $direction == up-left { 31 | border-right: $size solid transparent; 32 | } 33 | } 34 | 35 | @else if ($direction == down-right) or ($direction == down-left) { 36 | border-bottom: $size solid $color; 37 | 38 | @if $direction == down-right { 39 | border-left: $size solid transparent; 40 | 41 | } @else if $direction == down-left { 42 | border-right: $size solid transparent; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_animation.scss: -------------------------------------------------------------------------------- 1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property- 2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. 3 | 4 | // Official animation shorthand property. 5 | @mixin animation ($animations...) { 6 | @include prefixer(animation, $animations, webkit moz spec); 7 | } 8 | 9 | // Individual Animation Properties 10 | @mixin animation-name ($names...) { 11 | @include prefixer(animation-name, $names, webkit moz spec); 12 | } 13 | 14 | 15 | @mixin animation-duration ($times...) { 16 | @include prefixer(animation-duration, $times, webkit moz spec); 17 | } 18 | 19 | 20 | @mixin animation-timing-function ($motions...) { 21 | // ease | linear | ease-in | ease-out | ease-in-out 22 | @include prefixer(animation-timing-function, $motions, webkit moz spec); 23 | } 24 | 25 | 26 | @mixin animation-iteration-count ($values...) { 27 | // infinite | 28 | @include prefixer(animation-iteration-count, $values, webkit moz spec); 29 | } 30 | 31 | 32 | @mixin animation-direction ($directions...) { 33 | // normal | alternate 34 | @include prefixer(animation-direction, $directions, webkit moz spec); 35 | } 36 | 37 | 38 | @mixin animation-play-state ($states...) { 39 | // running | paused 40 | @include prefixer(animation-play-state, $states, webkit moz spec); 41 | } 42 | 43 | 44 | @mixin animation-delay ($times...) { 45 | @include prefixer(animation-delay, $times, webkit moz spec); 46 | } 47 | 48 | 49 | @mixin animation-fill-mode ($modes...) { 50 | // none | forwards | backwards | both 51 | @include prefixer(animation-fill-mode, $modes, webkit moz spec); 52 | } 53 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance ($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Backface-visibility mixin 3 | //************************************************************************// 4 | @mixin backface-visibility($visibility) { 5 | @include prefixer(backface-visibility, $visibility, webkit spec); 6 | } 7 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_background-image.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background-image property for adding multiple background images with 3 | // gradients, or for stringing multiple gradients together. 4 | //************************************************************************// 5 | 6 | @mixin background-image($images...) { 7 | background-image: _add-prefix($images, webkit); 8 | background-image: _add-prefix($images); 9 | } 10 | 11 | @function _add-prefix($images, $vendor: false) { 12 | $images-prefixed: (); 13 | $gradient-positions: false; 14 | @for $i from 1 through length($images) { 15 | $type: type-of(nth($images, $i)); // Get type of variable - List or String 16 | 17 | // If variable is a list - Gradient 18 | @if $type == list { 19 | $gradient-type: nth(nth($images, $i), 1); // linear or radial 20 | $gradient-pos: null; 21 | $gradient-args: null; 22 | 23 | @if ($gradient-type == linear) or ($gradient-type == radial) { 24 | $gradient-pos: nth(nth($images, $i), 2); // Get gradient position 25 | $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue) 26 | } 27 | @else { 28 | $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) 29 | } 30 | 31 | $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); 32 | $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 33 | $images-prefixed: append($images-prefixed, $gradient, comma); 34 | } 35 | // If variable is a string - Image 36 | @else if $type == string { 37 | $images-prefixed: join($images-prefixed, nth($images, $i), comma); 38 | } 39 | } 40 | @return $images-prefixed; 41 | } 42 | 43 | //Examples: 44 | //@include background-image(linear-gradient(top, orange, red)); 45 | //@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); 46 | //@include background-image(url("/images/a.png"), linear-gradient(orange, red)); 47 | //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png")); 48 | //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red)); 49 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_background.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background property for adding multiple backgrounds using shorthand 3 | // notation. 4 | //************************************************************************// 5 | 6 | @mixin background( 7 | $background-1 , $background-2: false, 8 | $background-3: false, $background-4: false, 9 | $background-5: false, $background-6: false, 10 | $background-7: false, $background-8: false, 11 | $background-9: false, $background-10: false, 12 | $fallback: false 13 | ) { 14 | $backgrounds: compact($background-1, $background-2, 15 | $background-3, $background-4, 16 | $background-5, $background-6, 17 | $background-7, $background-8, 18 | $background-9, $background-10); 19 | 20 | $fallback-color: false; 21 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 22 | $fallback-color: $fallback; 23 | } 24 | @else { 25 | $fallback-color: _extract-background-color($backgrounds); 26 | } 27 | 28 | @if $fallback-color { 29 | background-color: $fallback-color; 30 | } 31 | background: _background-add-prefix($backgrounds, webkit); 32 | background: _background-add-prefix($backgrounds); 33 | } 34 | 35 | @function _extract-background-color($backgrounds) { 36 | $final-bg-layer: nth($backgrounds, length($backgrounds)); 37 | @if type-of($final-bg-layer) == list { 38 | @for $i from 1 through length($final-bg-layer) { 39 | $value: nth($final-bg-layer, $i); 40 | @if type-of($value) == color { 41 | @return $value; 42 | } 43 | } 44 | } 45 | @return false; 46 | } 47 | 48 | @function _background-add-prefix($backgrounds, $vendor: false) { 49 | $backgrounds-prefixed: (); 50 | 51 | @for $i from 1 through length($backgrounds) { 52 | $shorthand: nth($backgrounds, $i); // Get member for current index 53 | $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image) 54 | 55 | // If shorthand is a list (gradient) 56 | @if $type == list { 57 | $first-member: nth($shorthand, 1); // Get first member of shorthand 58 | 59 | // Linear Gradient 60 | @if index(linear radial, nth($first-member, 1)) { 61 | $gradient-type: nth($first-member, 1); // linear || radial 62 | $gradient-args: false; 63 | $gradient-positions: false; 64 | $shorthand-start: false; 65 | @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,... 66 | $gradient-positions: nth($first-member, 2); 67 | $gradient-args: nth($first-member, 3); 68 | $shorthand-start: 2; 69 | } 70 | @else { // Linear gradient only - lg(red,orange),... 71 | $gradient-positions: nth($shorthand, 2); 72 | $gradient-args: nth($shorthand, 3); // Get gradient (red, blue) 73 | } 74 | 75 | $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions); 76 | $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 77 | 78 | // Append any additional shorthand args to gradient 79 | @if $shorthand-start { 80 | @for $j from $shorthand-start through length($shorthand) { 81 | $gradient: join($gradient, nth($shorthand, $j), space); 82 | } 83 | } 84 | $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma); 85 | } 86 | // Image with additional properties 87 | @else { 88 | $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma); 89 | } 90 | } 91 | // If shorthand is a simple string (color or image) 92 | @else if $type == string { 93 | $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma); 94 | } 95 | } 96 | @return $backgrounds-prefixed; 97 | } 98 | 99 | //Examples: 100 | //@include background(linear-gradient(top, orange, red)); 101 | //@include background(radial-gradient(circle at 40% 40%, orange, red)); 102 | //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red)); 103 | //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png")); 104 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_border-image.scss: -------------------------------------------------------------------------------- 1 | @mixin border-image($images) { 2 | -webkit-border-image: _border-add-prefix($images, webkit); 3 | -moz-border-image: _border-add-prefix($images, moz); 4 | -o-border-image: _border-add-prefix($images, o); 5 | border-image: _border-add-prefix($images); 6 | } 7 | 8 | @function _border-add-prefix($images, $vendor: false) { 9 | $border-image: null; 10 | $images-type: type-of(nth($images, 1)); 11 | $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial) 12 | 13 | // If input is a gradient 14 | @if $images-type == string { 15 | @if ($first-var == "linear") or ($first-var == "radial") { 16 | $gradient-type: nth($images, 1); // Get type of gradient (linear || radial) 17 | $gradient-pos: nth($images, 2); // Get gradient position 18 | $gradient-args: nth($images, 3); // Get actual gradient (red, blue) 19 | $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); 20 | $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 21 | } 22 | // If input is a URL 23 | @else { 24 | $border-image: $images; 25 | } 26 | } 27 | // If input is gradient or url + additional args 28 | @else if $images-type == list { 29 | $type: type-of(nth($images, 1)); // Get type of variable - List or String 30 | 31 | // If variable is a list - Gradient 32 | @if $type == list { 33 | $gradient: nth($images, 1); 34 | $gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial) 35 | $gradient-pos: nth($gradient, 2); // Get gradient position 36 | $gradient-args: nth($gradient, 3); // Get actual gradient (red, blue) 37 | $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); 38 | $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); 39 | 40 | @for $i from 2 through length($images) { 41 | $border-image: append($border-image, nth($images, $i)); 42 | } 43 | } 44 | } 45 | @return $border-image; 46 | } 47 | 48 | //Examples: 49 | // @include border-image(url("image.png")); 50 | // @include border-image(url("image.png") 20 stretch); 51 | // @include border-image(linear-gradient(45deg, orange, yellow)); 52 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch); 53 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); 54 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); 55 | 56 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_border-radius.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Shorthand Border-radius mixins 3 | //************************************************************************// 4 | @mixin border-top-radius($radii) { 5 | @include prefixer(border-top-left-radius, $radii, spec); 6 | @include prefixer(border-top-right-radius, $radii, spec); 7 | } 8 | 9 | @mixin border-bottom-radius($radii) { 10 | @include prefixer(border-bottom-left-radius, $radii, spec); 11 | @include prefixer(border-bottom-right-radius, $radii, spec); 12 | } 13 | 14 | @mixin border-left-radius($radii) { 15 | @include prefixer(border-top-left-radius, $radii, spec); 16 | @include prefixer(border-bottom-left-radius, $radii, spec); 17 | } 18 | 19 | @mixin border-right-radius($radii) { 20 | @include prefixer(border-top-right-radius, $radii, spec); 21 | @include prefixer(border-bottom-right-radius, $radii, spec); 22 | } 23 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @mixin box-sizing ($box) { 2 | // content-box | border-box | inherit 3 | @include prefixer(box-sizing, $box, webkit moz spec); 4 | } 5 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($arg: auto) { 2 | // || 3 | @include prefixer(columns, $arg, webkit moz spec); 4 | } 5 | 6 | @mixin column-count($int: auto) { 7 | // auto || integer 8 | @include prefixer(column-count, $int, webkit moz spec); 9 | } 10 | 11 | @mixin column-gap($length: normal) { 12 | // normal || length 13 | @include prefixer(column-gap, $length, webkit moz spec); 14 | } 15 | 16 | @mixin column-fill($arg: auto) { 17 | // auto || length 18 | @include prefixer(columns-fill, $arg, webkit moz spec); 19 | } 20 | 21 | @mixin column-rule($arg) { 22 | // || || 23 | @include prefixer(column-rule, $arg, webkit moz spec); 24 | } 25 | 26 | @mixin column-rule-color($color) { 27 | @include prefixer(column-rule-color, $color, webkit moz spec); 28 | } 29 | 30 | @mixin column-rule-style($style: none) { 31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 32 | @include prefixer(column-rule-style, $style, webkit moz spec); 33 | } 34 | 35 | @mixin column-rule-width ($width: none) { 36 | @include prefixer(column-rule-width, $width, webkit moz spec); 37 | } 38 | 39 | @mixin column-span($arg: none) { 40 | // none || all 41 | @include prefixer(column-span, $arg, webkit moz spec); 42 | } 43 | 44 | @mixin column-width($length: auto) { 45 | // auto || length 46 | @include prefixer(column-width, $length, webkit moz spec); 47 | } 48 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_flex-box.scss: -------------------------------------------------------------------------------- 1 | // CSS3 Flexible Box Model and property defaults 2 | 3 | // Custom shorthand notation for flexbox 4 | @mixin box($orient: inline-axis, $pack: start, $align: stretch) { 5 | @include display-box; 6 | @include box-orient($orient); 7 | @include box-pack($pack); 8 | @include box-align($align); 9 | } 10 | 11 | @mixin display-box { 12 | display: -webkit-box; 13 | display: -moz-box; 14 | display: box; 15 | } 16 | 17 | @mixin box-orient($orient: inline-axis) { 18 | // horizontal|vertical|inline-axis|block-axis|inherit 19 | @include prefixer(box-orient, $orient, webkit moz spec); 20 | } 21 | 22 | @mixin box-pack($pack: start) { 23 | // start|end|center|justify 24 | @include prefixer(box-pack, $pack, webkit moz spec); 25 | } 26 | 27 | @mixin box-align($align: stretch) { 28 | // start|end|center|baseline|stretch 29 | @include prefixer(box-align, $align, webkit moz spec); 30 | } 31 | 32 | @mixin box-direction($direction: normal) { 33 | // normal|reverse|inherit 34 | @include prefixer(box-direction, $direction, webkit moz spec); 35 | } 36 | 37 | @mixin box-lines($lines: single) { 38 | // single|multiple 39 | @include prefixer(box-lines, $lines, webkit moz spec); 40 | } 41 | 42 | @mixin box-ordinal-group($int: 1) { 43 | @include prefixer(box-ordinal-group, $int, webkit moz spec); 44 | } 45 | 46 | @mixin box-flex($value: 0.0) { 47 | @include prefixer(box-flex, $value, webkit moz spec); 48 | } 49 | 50 | @mixin box-flex-group($int: 1) { 51 | @include prefixer(box-flex-group, $int, webkit moz spec); 52 | } 53 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_font-face.scss: -------------------------------------------------------------------------------- 1 | // Order of the includes matters, and it is: normal, bold, italic, bold+italic. 2 | 3 | @mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) { 4 | @font-face { 5 | font-family: $font-family; 6 | font-weight: $weight; 7 | font-style: $style; 8 | 9 | @if $asset-pipeline == true { 10 | src: font-url('#{$file-path}.eot'); 11 | src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), 12 | font-url('#{$file-path}.woff') format('woff'), 13 | font-url('#{$file-path}.ttf') format('truetype'), 14 | font-url('#{$file-path}.svg##{$font-family}') format('svg'); 15 | } @else { 16 | src: url('#{$file-path}.eot'); 17 | src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), 18 | url('#{$file-path}.woff') format('woff'), 19 | url('#{$file-path}.ttf') format('truetype'), 20 | url('#{$file-path}.svg##{$font-family}') format('svg'); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_hidpi-media-query.scss: -------------------------------------------------------------------------------- 1 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) 2 | @mixin hidpi($ratio: 1.3) { 3 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio), 4 | only screen and (min--moz-device-pixel-ratio: $ratio), 5 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), 6 | only screen and (min-resolution: #{round($ratio*96)}dpi), 7 | only screen and (min-resolution: #{$ratio}dppx) { 8 | @content; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_image-rendering.scss: -------------------------------------------------------------------------------- 1 | @mixin image-rendering ($mode:optimizeQuality) { 2 | 3 | @if ($mode == optimize-contrast) { 4 | image-rendering: -moz-crisp-edges; 5 | image-rendering: -o-crisp-edges; 6 | image-rendering: -webkit-optimize-contrast; 7 | image-rendering: optimize-contrast; 8 | } 9 | 10 | @else { 11 | image-rendering: $mode; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_inline-block.scss: -------------------------------------------------------------------------------- 1 | // Legacy support for inline-block in IE7 (maybe IE6) 2 | @mixin inline-block { 3 | display: inline-block; 4 | vertical-align: baseline; 5 | zoom: 1; 6 | *display: inline; 7 | *vertical-align: auto; 8 | } 9 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_keyframes.scss: -------------------------------------------------------------------------------- 1 | // Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content 2 | @mixin keyframes($name) { 3 | $original-prefix-for-webkit: $prefix-for-webkit; 4 | $original-prefix-for-mozilla: $prefix-for-mozilla; 5 | $original-prefix-for-microsoft: $prefix-for-microsoft; 6 | $original-prefix-for-opera: $prefix-for-opera; 7 | $original-prefix-for-spec: $prefix-for-spec; 8 | 9 | @if $original-prefix-for-webkit { 10 | @include disable-prefix-for-all(); 11 | $prefix-for-webkit: true; 12 | @-webkit-keyframes #{$name} { 13 | @content; 14 | } 15 | } 16 | @if $original-prefix-for-mozilla { 17 | @include disable-prefix-for-all(); 18 | $prefix-for-mozilla: true; 19 | @-moz-keyframes #{$name} { 20 | @content; 21 | } 22 | } 23 | @if $original-prefix-for-opera { 24 | @include disable-prefix-for-all(); 25 | $prefix-for-opera: true; 26 | @-o-keyframes #{$name} { 27 | @content; 28 | } 29 | } 30 | @if $original-prefix-for-spec { 31 | @include disable-prefix-for-all(); 32 | $prefix-for-spec: true; 33 | @keyframes #{$name} { 34 | @content; 35 | } 36 | } 37 | 38 | $prefix-for-webkit: $original-prefix-for-webkit; 39 | $prefix-for-mozilla: $original-prefix-for-mozilla; 40 | $prefix-for-microsoft: $original-prefix-for-microsoft; 41 | $prefix-for-opera: $original-prefix-for-opera; 42 | $prefix-for-spec: $original-prefix-for-spec; 43 | } 44 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_linear-gradient.scss: -------------------------------------------------------------------------------- 1 | @mixin linear-gradient($pos, $G1, $G2: false, 2 | $G3: false, $G4: false, 3 | $G5: false, $G6: false, 4 | $G7: false, $G8: false, 5 | $G9: false, $G10: false, 6 | $deprecated-pos1: left top, 7 | $deprecated-pos2: left bottom, 8 | $fallback: false) { 9 | // Detect what type of value exists in $pos 10 | $pos-type: type-of(nth($pos, 1)); 11 | $pos-spec: null; 12 | $pos-degree: null; 13 | 14 | // If $pos is missing from mixin, reassign vars and add default position 15 | @if ($pos-type == color) or (nth($pos, 1) == "transparent") { 16 | $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; 17 | $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; 18 | $pos: null; 19 | } 20 | 21 | @if $pos { 22 | $positions: _linear-positions-parser($pos); 23 | $pos-degree: nth($positions, 1); 24 | $pos-spec: nth($positions, 2); 25 | } 26 | 27 | $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); 28 | 29 | // Set $G1 as the default fallback color 30 | $fallback-color: nth($G1, 1); 31 | 32 | // If $fallback is a color use that color as the fallback color 33 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 34 | $fallback-color: $fallback; 35 | } 36 | 37 | background-color: $fallback-color; 38 | background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0 39 | background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome 40 | background-image: unquote("linear-gradient(#{$pos-spec}#{$full})"); 41 | } 42 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_perspective.scss: -------------------------------------------------------------------------------- 1 | @mixin perspective($depth: none) { 2 | // none | 3 | @include prefixer(perspective, $depth, webkit moz spec); 4 | } 5 | 6 | @mixin perspective-origin($value: 50% 50%) { 7 | @include prefixer(perspective-origin, $value, webkit moz spec); 8 | } 9 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_placeholder.scss: -------------------------------------------------------------------------------- 1 | $placeholders: '-webkit-input-placeholder', 2 | '-moz-placeholder', 3 | '-ms-input-placeholder'; 4 | 5 | @mixin placeholder { 6 | @each $placeholder in $placeholders { 7 | @if $placeholder == "-webkit-input-placeholder" { 8 | &::#{$placeholder} { 9 | @content; 10 | } 11 | } 12 | @else if $placeholder == "-moz-placeholder" { 13 | // FF 18- 14 | &:#{$placeholder} { 15 | @content; 16 | } 17 | 18 | // FF 19+ 19 | &::#{$placeholder} { 20 | @content; 21 | } 22 | } 23 | @else { 24 | &:#{$placeholder} { 25 | @content; 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // Requires Sass 3.1+ 2 | @mixin radial-gradient($G1, $G2, 3 | $G3: false, $G4: false, 4 | $G5: false, $G6: false, 5 | $G7: false, $G8: false, 6 | $G9: false, $G10: false, 7 | $pos: null, 8 | $shape-size: null, 9 | $deprecated-pos1: center center, 10 | $deprecated-pos2: center center, 11 | $deprecated-radius1: 0, 12 | $deprecated-radius2: 460, 13 | $fallback: false) { 14 | 15 | $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 16 | $G1: nth($data, 1); 17 | $G2: nth($data, 2); 18 | $pos: nth($data, 3); 19 | $shape-size: nth($data, 4); 20 | 21 | $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); 22 | 23 | // Strip deprecated cover/contain for spec 24 | $shape-size-spec: _shape-size-stripper($shape-size); 25 | 26 | // Set $G1 as the default fallback color 27 | $first-color: nth($full, 1); 28 | $fallback-color: nth($first-color, 1); 29 | 30 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 31 | $fallback-color: $fallback; 32 | } 33 | 34 | // Add Commas and spaces 35 | $shape-size: if($shape-size, '#{$shape-size}, ', null); 36 | $pos: if($pos, '#{$pos}, ', null); 37 | $pos-spec: if($pos, 'at #{$pos}', null); 38 | $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); 39 | 40 | background-color: $fallback-color; 41 | background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4 42 | background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); 43 | background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); 44 | } 45 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($property: none) { 2 | // none | 3 | @include prefixer(transform, $property, webkit moz ms o spec); 4 | } 5 | 6 | @mixin transform-origin($axes: 50%) { 7 | // x-axis - left | center | right | length | % 8 | // y-axis - top | center | bottom | length | % 9 | // z-axis - length 10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec); 11 | } 12 | 13 | @mixin transform-style ($style: flat) { 14 | @include prefixer(transform-style, $style, webkit moz ms o spec); 15 | } 16 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_transition.scss: -------------------------------------------------------------------------------- 1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 2 | // Example: @include transition (all, 2.0s, ease-in-out); 3 | // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); 4 | // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); 5 | 6 | @mixin transition ($properties...) { 7 | @if length($properties) >= 1 { 8 | @include prefixer(transition, $properties, webkit moz spec); 9 | } 10 | 11 | @else { 12 | $properties: all 0.15s ease-out 0; 13 | @include prefixer(transition, $properties, webkit moz spec); 14 | } 15 | } 16 | 17 | @mixin transition-property ($properties...) { 18 | -webkit-transition-property: transition-property-names($properties, 'webkit'); 19 | -moz-transition-property: transition-property-names($properties, 'moz'); 20 | transition-property: transition-property-names($properties, false); 21 | } 22 | 23 | @mixin transition-duration ($times...) { 24 | @include prefixer(transition-duration, $times, webkit moz spec); 25 | } 26 | 27 | @mixin transition-timing-function ($motions...) { 28 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 29 | @include prefixer(transition-timing-function, $motions, webkit moz spec); 30 | } 31 | 32 | @mixin transition-delay ($times...) { 33 | @include prefixer(transition-delay, $times, webkit moz spec); 34 | } 35 | -------------------------------------------------------------------------------- /client/styles/bourbon/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($arg: none) { 2 | @include prefixer(user-select, $arg, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /client/styles/bourbon/functions/_compact.scss: -------------------------------------------------------------------------------- 1 | // Remove `false` values from a list 2 | 3 | @function compact($vars...) { 4 | $list: (); 5 | @each $var in $vars { 6 | @if $var { 7 | $list: append($list, $var, comma); 8 | } 9 | } 10 | @return $list; 11 | } 12 | -------------------------------------------------------------------------------- /client/styles/bourbon/functions/_flex-grid.scss: -------------------------------------------------------------------------------- 1 | // Flexible grid 2 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 3 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 4 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 5 | @return percentage($width / $container-width); 6 | } 7 | 8 | // Flexible gutter 9 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($gutter / $container-width); 12 | } 13 | 14 | // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. 15 | // This function takes the fluid grid equation (target / context = result) and uses columns to help define each. 16 | // 17 | // The calculation presumes that your column structure will be missing the last gutter: 18 | // 19 | // -- column -- gutter -- column -- gutter -- column 20 | // 21 | // $fg-column: 60px; // Column Width 22 | // $fg-gutter: 25px; // Gutter Width 23 | // $fg-max-columns: 12; // Total Columns For Main Container 24 | // 25 | // div { 26 | // width: flex-grid(4); // returns (315px / 995px) = 31.65829%; 27 | // margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; 28 | // 29 | // p { 30 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 31 | // float: left; 32 | // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; 33 | // } 34 | // 35 | // blockquote { 36 | // float: left; 37 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 38 | // } 39 | // } -------------------------------------------------------------------------------- /client/styles/bourbon/functions/_grid-width.scss: -------------------------------------------------------------------------------- 1 | @function grid-width($n) { 2 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 3 | } 4 | 5 | // The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. 6 | // 7 | // $gw-column: 100px; // Column Width 8 | // $gw-gutter: 40px; // Gutter Width 9 | // 10 | // div { 11 | // width: grid-width(4); // returns 520px; 12 | // margin-left: $gw-gutter; // returns 40px; 13 | // } 14 | -------------------------------------------------------------------------------- /client/styles/bourbon/functions/_linear-gradient.scss: -------------------------------------------------------------------------------- 1 | @function linear-gradient($pos, $gradients...) { 2 | $type: linear; 3 | $pos-type: type-of(nth($pos, 1)); 4 | 5 | // if $pos doesn't exist, fix $gradient 6 | @if ($pos-type == color) or (nth($pos, 1) == "transparent") { 7 | $gradients: zip($pos $gradients); 8 | $pos: false; 9 | } 10 | 11 | $type-gradient: $type, $pos, $gradients; 12 | @return $type-gradient; 13 | } 14 | -------------------------------------------------------------------------------- /client/styles/bourbon/functions/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | @function modular-scale($value, $increment, $ratio) { 2 | @if $increment > 0 { 3 | @for $i from 1 through $increment { 4 | $value: ($value * $ratio); 5 | } 6 | } 7 | 8 | @if $increment < 0 { 9 | $increment: abs($increment); 10 | @for $i from 1 through $increment { 11 | $value: ($value / $ratio); 12 | } 13 | } 14 | 15 | @return $value; 16 | } 17 | 18 | // div { 19 | // Increment Up GR with positive value 20 | // font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px 21 | // 22 | // Increment Down GR with negative value 23 | // font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px 24 | // 25 | // Can be used with ceil(round up) or floor(round down) 26 | // font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px 27 | // font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px 28 | // } 29 | // 30 | // modularscale.com 31 | 32 | @function golden-ratio($value, $increment) { 33 | @return modular-scale($value, $increment, 1.618) 34 | } 35 | 36 | // div { 37 | // font-size: golden-ratio(14px, 1); // returns: 22.652px 38 | // } 39 | // 40 | // goldenratiocalculator.com 41 | -------------------------------------------------------------------------------- /client/styles/bourbon/functions/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to ems 2 | // eg. for a relational value of 12px write em(12) when the parent is 16px 3 | // if the parent is another value say 24px write em(12, 24) 4 | 5 | @function em($pxval, $base: 16) { 6 | @return ($pxval / $base) * 1em; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /client/styles/bourbon/functions/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // This function is required and used by the background-image mixin. 2 | @function radial-gradient($G1, $G2, 3 | $G3: false, $G4: false, 4 | $G5: false, $G6: false, 5 | $G7: false, $G8: false, 6 | $G9: false, $G10: false, 7 | $pos: null, 8 | $shape-size: null) { 9 | 10 | $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 11 | $G1: nth($data, 1); 12 | $G2: nth($data, 2); 13 | $pos: nth($data, 3); 14 | $shape-size: nth($data, 4); 15 | 16 | $type: radial; 17 | $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); 18 | 19 | $type-gradient: $type, $shape-size $pos, $gradient; 20 | @return $type-gradient; 21 | } 22 | 23 | 24 | -------------------------------------------------------------------------------- /client/styles/bourbon/functions/_tint-shade.scss: -------------------------------------------------------------------------------- 1 | // Add percentage of white to a color 2 | @function tint($color, $percent){ 3 | @return mix(white, $color, $percent); 4 | } 5 | 6 | // Add percentage of black to a color 7 | @function shade($color, $percent){ 8 | @return mix(black, $color, $percent); 9 | } 10 | -------------------------------------------------------------------------------- /client/styles/bourbon/functions/_transition-property-name.scss: -------------------------------------------------------------------------------- 1 | // Return vendor-prefixed property names if appropriate 2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 3 | //************************************************************************// 4 | @function transition-property-names($props, $vendor: false) { 5 | $new-props: (); 6 | 7 | @each $prop in $props { 8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 9 | } 10 | 11 | @return $new-props; 12 | } 13 | 14 | @function transition-property-name($prop, $vendor: false) { 15 | // put other properties that need to be prefixed here aswell 16 | @if $vendor and $prop == transform { 17 | @return unquote('-'+$vendor+'-'+$prop); 18 | } 19 | @else { 20 | @return $prop; 21 | } 22 | } -------------------------------------------------------------------------------- /client/styles/bourbon/helpers/_deprecated-webkit-gradient.scss: -------------------------------------------------------------------------------- 1 | // Render Deprecated Webkit Gradient - Linear || Radial 2 | //************************************************************************// 3 | @function _deprecated-webkit-gradient($type, 4 | $deprecated-pos1, $deprecated-pos2, 5 | $full, 6 | $deprecated-radius1: false, $deprecated-radius2: false) { 7 | $gradient-list: (); 8 | $gradient: false; 9 | $full-length: length($full); 10 | $percentage: false; 11 | $gradient-type: $type; 12 | 13 | @for $i from 1 through $full-length { 14 | $gradient: nth($full, $i); 15 | 16 | @if length($gradient) == 2 { 17 | $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); 18 | $gradient-list: join($gradient-list, $color-stop, comma); 19 | } 20 | @else if $gradient != null { 21 | @if $i == $full-length { 22 | $percentage: 100%; 23 | } 24 | @else { 25 | $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%"; 26 | } 27 | $color-stop: color-stop(unquote($percentage), $gradient); 28 | $gradient-list: join($gradient-list, $color-stop, comma); 29 | } 30 | } 31 | 32 | @if $type == radial { 33 | $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list); 34 | } 35 | @else if $type == linear { 36 | $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list); 37 | } 38 | @return $gradient; 39 | } 40 | -------------------------------------------------------------------------------- /client/styles/bourbon/helpers/_gradient-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _gradient-positions-parser($gradient-type, $gradient-positions) { 2 | @if $gradient-positions 3 | and ($gradient-type == linear) 4 | and (type-of($gradient-positions) != color) { 5 | $gradient-positions: _linear-positions-parser($gradient-positions); 6 | } 7 | @else if $gradient-positions 8 | and ($gradient-type == radial) 9 | and (type-of($gradient-positions) != color) { 10 | $gradient-positions: _radial-positions-parser($gradient-positions); 11 | } 12 | @return $gradient-positions; 13 | } 14 | -------------------------------------------------------------------------------- /client/styles/bourbon/helpers/_linear-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-positions-parser($pos) { 2 | $type: type-of(nth($pos, 1)); 3 | $spec: null; 4 | $degree: null; 5 | $side: null; 6 | $corner: null; 7 | $length: length($pos); 8 | // Parse Side and corner positions 9 | @if ($length > 1) { 10 | @if nth($pos, 1) == "to" { // Newer syntax 11 | $side: nth($pos, 2); 12 | 13 | @if $length == 2 { // eg. to top 14 | // Swap for backwards compatability 15 | $degree: _position-flipper(nth($pos, 2)); 16 | } 17 | @else if $length == 3 { // eg. to top left 18 | $corner: nth($pos, 3); 19 | } 20 | } 21 | @else if $length == 2 { // Older syntax ("top left") 22 | $side: _position-flipper(nth($pos, 1)); 23 | $corner: _position-flipper(nth($pos, 2)); 24 | } 25 | 26 | @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 27 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 28 | } 29 | @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 30 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 31 | } 32 | @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 33 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 34 | } 35 | @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 36 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 37 | } 38 | $spec: to $side $corner; 39 | } 40 | @else if $length == 1 { 41 | // Swap for backwards compatability 42 | @if $type == string { 43 | $degree: $pos; 44 | $spec: to _position-flipper($pos); 45 | } 46 | @else { 47 | $degree: -270 - $pos; //rotate the gradient opposite from spec 48 | $spec: $pos; 49 | } 50 | } 51 | $degree: unquote($degree + ","); 52 | $spec: unquote($spec + ","); 53 | @return $degree $spec; 54 | } 55 | 56 | @function _position-flipper($pos) { 57 | @return if($pos == left, right, null) 58 | if($pos == right, left, null) 59 | if($pos == top, bottom, null) 60 | if($pos == bottom, top, null); 61 | } 62 | -------------------------------------------------------------------------------- /client/styles/bourbon/helpers/_radial-arg-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-arg-parser($G1, $G2, $pos, $shape-size) { 2 | @each $value in $G1, $G2 { 3 | $first-val: nth($value, 1); 4 | $pos-type: type-of($first-val); 5 | $spec-at-index: null; 6 | 7 | // Determine if spec was passed to mixin 8 | @if type-of($value) == list { 9 | $spec-at-index: if(index($value, at), index($value, at), false); 10 | } 11 | @if $spec-at-index { 12 | @if $spec-at-index > 1 { 13 | @for $i from 1 through ($spec-at-index - 1) { 14 | $shape-size: $shape-size nth($value, $i); 15 | } 16 | @for $i from ($spec-at-index + 1) through length($value) { 17 | $pos: $pos nth($value, $i); 18 | } 19 | } 20 | @else if $spec-at-index == 1 { 21 | @for $i from ($spec-at-index + 1) through length($value) { 22 | $pos: $pos nth($value, $i); 23 | } 24 | } 25 | $G1: false; 26 | } 27 | 28 | // If not spec calculate correct values 29 | @else { 30 | @if ($pos-type != color) or ($first-val != "transparent") { 31 | @if ($pos-type == number) 32 | or ($first-val == "center") 33 | or ($first-val == "top") 34 | or ($first-val == "right") 35 | or ($first-val == "bottom") 36 | or ($first-val == "left") { 37 | 38 | $pos: $value; 39 | 40 | @if $pos == $G1 { 41 | $G1: false; 42 | } 43 | } 44 | 45 | @else if 46 | ($first-val == "ellipse") 47 | or ($first-val == "circle") 48 | or ($first-val == "closest-side") 49 | or ($first-val == "closest-corner") 50 | or ($first-val == "farthest-side") 51 | or ($first-val == "farthest-corner") 52 | or ($first-val == "contain") 53 | or ($first-val == "cover") { 54 | 55 | $shape-size: $value; 56 | 57 | @if $value == $G1 { 58 | $G1: false; 59 | } 60 | 61 | @else if $value == $G2 { 62 | $G2: false; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | @return $G1, $G2, $pos, $shape-size; 69 | } 70 | -------------------------------------------------------------------------------- /client/styles/bourbon/helpers/_radial-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-positions-parser($gradient-pos) { 2 | $shape-size: nth($gradient-pos, 1); 3 | $pos: nth($gradient-pos, 2); 4 | $shape-size-spec: _shape-size-stripper($shape-size); 5 | 6 | $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 7 | unquote(if($shape-size, "#{$shape-size},", null)); 8 | $pos-spec: if($pos, "at #{$pos}", null); 9 | 10 | $spec: "#{$shape-size-spec} #{$pos-spec}"; 11 | 12 | // Add comma 13 | @if ($spec != ' ') { 14 | $spec: "#{$spec}," 15 | } 16 | 17 | @return $pre-spec $spec; 18 | } 19 | -------------------------------------------------------------------------------- /client/styles/bourbon/helpers/_render-gradients.scss: -------------------------------------------------------------------------------- 1 | // User for linear and radial gradients within background-image or border-image properties 2 | 3 | @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 4 | $pre-spec: null; 5 | $spec: null; 6 | $vendor-gradients: null; 7 | @if $gradient-type == linear { 8 | @if $gradient-positions { 9 | $pre-spec: nth($gradient-positions, 1); 10 | $spec: nth($gradient-positions, 2); 11 | } 12 | } 13 | @else if $gradient-type == radial { 14 | $pre-spec: nth($gradient-positions, 1); 15 | $spec: nth($gradient-positions, 2); 16 | } 17 | 18 | @if $vendor { 19 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 20 | } 21 | @else if $vendor == false { 22 | $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 23 | $vendor-gradients: unquote($vendor-gradients); 24 | } 25 | @return $vendor-gradients; 26 | } 27 | -------------------------------------------------------------------------------- /client/styles/bourbon/helpers/_shape-size-stripper.scss: -------------------------------------------------------------------------------- 1 | @function _shape-size-stripper($shape-size) { 2 | $shape-size-spec: null; 3 | @each $value in $shape-size { 4 | @if ($value == "cover") or ($value == "contain") { 5 | $value: null; 6 | } 7 | $shape-size-spec: "#{$shape-size-spec} #{$value}"; 8 | } 9 | @return $shape-size-spec; 10 | } 11 | -------------------------------------------------------------------------------- /client/styles/circle/_effect1.scss: -------------------------------------------------------------------------------- 1 | 2 | // 3 | // -------------------------------------------------- 4 | .ih-item.circle.effect1 { 5 | 6 | .spinner { 7 | width: 230px; 8 | height: 230px; 9 | border: 10px solid #ecab18; 10 | border-right-color: #1ad280; 11 | border-bottom-color: #1ad280; 12 | border-radius: 50%; 13 | @include transition( all .8s ease-in-out ); 14 | } 15 | 16 | .img { 17 | position: absolute; 18 | top: 10px; 19 | bottom: 0; 20 | left: 10px; 21 | right: 0; 22 | width: auto; 23 | height: auto; 24 | &:before { 25 | display: none; 26 | } 27 | } 28 | 29 | &.colored { 30 | .info { 31 | background: $overlay_colored_fallback; 32 | background: $overlay_colored; 33 | } 34 | } 35 | 36 | .info { 37 | top: 10px; 38 | bottom: 0; 39 | left: 10px; 40 | right: 0; 41 | background: $overlay_dark_fallback; 42 | background: $overlay_dark; 43 | opacity: 0; 44 | @include transition( all .8s ease-in-out ); 45 | 46 | h3 { 47 | color: #fff; 48 | text-transform: uppercase; 49 | position: relative; 50 | letter-spacing: 2px; 51 | font-size: 22px; 52 | margin: 0 30px; 53 | padding: 55px 0 0 0; 54 | height: 110px; 55 | text-shadow: 56 | 0 0 1px #fff, 57 | 0 1px 2px rgba(0,0,0,0.3); 58 | } 59 | 60 | p { 61 | color: #bbb; 62 | padding: 10px 5px; 63 | font-style: italic; 64 | margin: 0 30px; 65 | font-size: 12px; 66 | border-top: 1px solid rgba(255,255,255,0.5); 67 | } 68 | } 69 | 70 | a:hover { 71 | .spinner { 72 | @include transform( rotate(180deg) ); 73 | } 74 | 75 | .info { 76 | opacity: 1; 77 | } 78 | } 79 | } -------------------------------------------------------------------------------- /client/styles/circle/_effect10.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect10 { 5 | .img { 6 | z-index: 11; 7 | @include transform( scale(1) ); 8 | @include transition( all 0.35s ease-in-out ); 9 | } 10 | 11 | &.colored { 12 | .info { 13 | background: $overlay_colored_fallback; 14 | } 15 | } 16 | 17 | .info { 18 | background: $overlay_dark_fallback; 19 | opacity: 0; 20 | @include transform( scale(0) ); 21 | @include transition( all .35s ease-in-out ); 22 | 23 | h3 { 24 | color: #fff; 25 | text-transform: uppercase; 26 | position: relative; 27 | letter-spacing: 2px; 28 | font-size: 22px; 29 | text-shadow: 30 | 0 0 1px #fff, 31 | 0 1px 2px rgba(0,0,0,0.3); 32 | } 33 | 34 | p { 35 | color: #bbb; 36 | font-style: italic; 37 | font-size: 12px; 38 | border-top: 1px solid rgba(255,255,255,0.5); 39 | } 40 | } 41 | 42 | a:hover { 43 | .info { 44 | visibility: visible; 45 | opacity: 1; 46 | @include transform( scale(1) ); 47 | } 48 | } 49 | } 50 | 51 | // ------------------------- 52 | .ih-item.circle.effect10.top_to_bottom { 53 | .info { 54 | h3 { 55 | margin: 0 30px; 56 | padding: 25px 0 0 0; 57 | height: 78px; 58 | } 59 | 60 | p { 61 | margin: 0 30px; 62 | padding: 5px; 63 | } 64 | } 65 | 66 | a:hover { 67 | .img { 68 | @include transform( translateY(50px) scale(.5) ); 69 | } 70 | } 71 | } 72 | 73 | // ------------------------- 74 | .ih-item.circle.effect10.bottom_to_top { 75 | .info { 76 | h3 { 77 | margin: 95px 30px 0; 78 | padding: 25px 0 0 0; 79 | height: 78px; 80 | } 81 | 82 | p { 83 | margin: 0 30px; 84 | padding: 5px; 85 | } 86 | } 87 | 88 | a:hover { 89 | .img { 90 | @include transform( translateY(-50px) scale(.5) ); 91 | } 92 | } 93 | } 94 | 95 | 96 | -------------------------------------------------------------------------------- /client/styles/circle/_effect11.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect11 { 5 | @include perspective(900px); 6 | .img { 7 | opacity: 1; 8 | @include transform-origin( 50% 50% ); 9 | @include transition( all 0.35s ease-in-out ); 10 | } 11 | 12 | 13 | &.colored { 14 | .info { 15 | background: $overlay_colored_fallback; 16 | } 17 | } 18 | 19 | .info { 20 | background: $overlay_dark_fallback; 21 | opacity: 0; 22 | visibility: hidden; 23 | @include transition( all .35s ease .35s ); 24 | 25 | h3 { 26 | color: #fff; 27 | text-transform: uppercase; 28 | position: relative; 29 | letter-spacing: 2px; 30 | font-size: 22px; 31 | margin: 0 30px; 32 | padding: 55px 0 0 0; 33 | height: 110px; 34 | text-shadow: 35 | 0 0 1px #fff, 36 | 0 1px 2px rgba(0,0,0,0.3); 37 | } 38 | 39 | p { 40 | color: #bbb; 41 | padding: 10px 5px; 42 | font-style: italic; 43 | margin: 0 30px; 44 | font-size: 12px; 45 | border-top: 1px solid rgba(255,255,255,0.5); 46 | } 47 | } 48 | 49 | a:hover { 50 | .img { 51 | opacity: 0; 52 | } 53 | 54 | .info { 55 | visibility: visible; 56 | opacity: 1; 57 | } 58 | } 59 | } 60 | 61 | // ------------------------- 62 | .ih-item.circle.effect11.left_to_right { 63 | .img { 64 | @include transform( translateZ(0) rotateY(0) ); 65 | } 66 | 67 | .info { 68 | @include transform( translateZ(-1000px) rotateY(-90deg) ); 69 | } 70 | 71 | a:hover { 72 | .img { 73 | @include transform( translateZ(-1000px) rotateY(90deg) ); 74 | } 75 | 76 | .info { 77 | @include transform( translateZ(0) rotateY(0) ); 78 | } 79 | } 80 | } 81 | 82 | // ------------------------- 83 | .ih-item.circle.effect11.right_to_left { 84 | .img { 85 | @include transform( translateZ(0) rotateY(0) ); 86 | } 87 | 88 | .info { 89 | @include transform( translateZ(-1000px) rotateY(90deg) ); 90 | } 91 | 92 | a:hover { 93 | .img { 94 | @include transform( translateZ(-1000px) rotateY(-90deg) ); 95 | } 96 | 97 | .info { 98 | @include transform( translateZ(0) rotateY(0) ); 99 | } 100 | } 101 | } 102 | 103 | 104 | // ------------------------- 105 | .ih-item.circle.effect11.top_to_bottom { 106 | .img { 107 | @include transform( translateZ(0) rotateX(0) ); 108 | } 109 | 110 | .info { 111 | @include transform( translateZ(-1000px) rotateX(90deg) ); 112 | } 113 | 114 | a:hover { 115 | .img { 116 | @include transform( translateZ(-1000px) rotateX(-90deg) ); 117 | } 118 | 119 | .info { 120 | @include transform( translateZ(0) rotateX(0) ); 121 | } 122 | } 123 | } 124 | 125 | 126 | // ------------------------- 127 | .ih-item.circle.effect11.bottom_to_top { 128 | .img { 129 | @include transform( translateZ(0) rotateX(0) ); 130 | } 131 | 132 | .info { 133 | @include transform( translateZ(-1000px) rotateX(-90deg) ); 134 | } 135 | 136 | a:hover { 137 | .img { 138 | @include transform( translateZ(-1000px) rotateX(90deg) ); 139 | } 140 | 141 | .info { 142 | @include transform( translateZ(0) rotateX(0) ); 143 | } 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /client/styles/circle/_effect12.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect12 { 5 | .img { 6 | opacity: 1; 7 | @include transition( all 0.35s ease-in-out ); 8 | } 9 | 10 | 11 | &.colored { 12 | .info { 13 | background: $overlay_colored_fallback; 14 | } 15 | } 16 | 17 | .info { 18 | background: $overlay_dark_fallback; 19 | opacity: 0; 20 | visibility: hidden; 21 | pointer-events: none; 22 | @include transform( scale(.5) ); 23 | @include transition( all .35s ease-in-out); 24 | 25 | h3 { 26 | color: #fff; 27 | text-transform: uppercase; 28 | position: relative; 29 | letter-spacing: 2px; 30 | font-size: 22px; 31 | margin: 0 30px; 32 | padding: 55px 0 0 0; 33 | height: 110px; 34 | text-shadow: 35 | 0 0 1px #fff, 36 | 0 1px 2px rgba(0,0,0,0.3); 37 | } 38 | 39 | p { 40 | color: #bbb; 41 | padding: 10px 5px; 42 | font-style: italic; 43 | margin: 0 30px; 44 | font-size: 12px; 45 | border-top: 1px solid rgba(255,255,255,0.5); 46 | } 47 | } 48 | 49 | a:hover { 50 | .img { 51 | opacity: 0; 52 | pointer-events: none; 53 | } 54 | 55 | .info { 56 | opacity: 1; 57 | visibility: visible; 58 | } 59 | } 60 | } 61 | 62 | // ------------------------- 63 | .ih-item.circle.effect12.left_to_right { 64 | .img { 65 | @include transform( translateX(0) rotate(0) ); 66 | } 67 | 68 | .info { 69 | @include transform( translateX(100%) rotate(180deg) ); 70 | } 71 | 72 | a:hover { 73 | .img { 74 | @include transform( translateX(100%) rotate(180deg) ); 75 | } 76 | 77 | .info { 78 | @include transform( translateX(0) rotate(0) ); 79 | @include transition-delay( .4s ); 80 | } 81 | } 82 | } 83 | 84 | // ------------------------- 85 | .ih-item.circle.effect12.right_to_left { 86 | .img { 87 | @include transform( translateX(0) rotate(0) ); 88 | } 89 | 90 | .info { 91 | @include transform( translateX(-100%) rotate(-180deg) ); 92 | } 93 | 94 | a:hover { 95 | .img { 96 | @include transform( translateX(-100%) rotate(-180deg) ); 97 | } 98 | 99 | .info { 100 | @include transform( translateX(0) rotate(0) ); 101 | @include transition-delay( .4s ); 102 | } 103 | } 104 | } 105 | 106 | 107 | // ------------------------- 108 | .ih-item.circle.effect12.top_to_bottom { 109 | .img { 110 | @include transform( translateY(0) rotate(0) ); 111 | } 112 | 113 | .info { 114 | @include transform( translateY(-100%) rotate(-180deg) ); 115 | } 116 | 117 | a:hover { 118 | .img { 119 | @include transform( translateY(-100%) rotate(-180deg) ); 120 | } 121 | 122 | .info { 123 | @include transform( translateY(0) rotate(0) ); 124 | @include transition-delay( .4s ); 125 | } 126 | } 127 | } 128 | 129 | 130 | // ------------------------- 131 | .ih-item.circle.effect12.bottom_to_top { 132 | .img { 133 | @include transform( translateY(0) rotate(0) ); 134 | } 135 | 136 | .info { 137 | @include transform( translateY(100%) rotate(180deg) ); 138 | } 139 | 140 | a:hover { 141 | .img { 142 | @include transform( translateY(100%) rotate(180deg) ); 143 | } 144 | 145 | .info { 146 | @include transform( translateY(0) rotate(0) ); 147 | @include transition-delay( .4s ); 148 | } 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /client/styles/circle/_effect13.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect13 { 5 | &.colored { 6 | .info { 7 | background: $overlay_colored_fallback; 8 | background: $overlay_colored; 9 | } 10 | } 11 | 12 | .info { 13 | background: $overlay_dark_fallback; 14 | background: $overlay_dark; 15 | opacity: 0; 16 | pointer-events: none; 17 | @include transition( all .35s ease-in-out ); 18 | 19 | h3 { 20 | visibility: hidden; 21 | color: #fff; 22 | text-transform: uppercase; 23 | position: relative; 24 | letter-spacing: 2px; 25 | font-size: 22px; 26 | margin: 0 30px; 27 | padding: 55px 0 0 0; 28 | height: 110px; 29 | text-shadow: 30 | 0 0 1px #fff, 31 | 0 1px 2px rgba(0,0,0,0.3); 32 | @include transition( all .35s ease-in-out ); 33 | } 34 | 35 | p { 36 | visibility: hidden; 37 | color: #bbb; 38 | padding: 10px 5px; 39 | font-style: italic; 40 | margin: 0 30px; 41 | font-size: 12px; 42 | border-top: 1px solid rgba(255,255,255,0.5); 43 | @include transition( all .35s ease-in-out ); 44 | } 45 | } 46 | 47 | a:hover { 48 | .info { 49 | opacity: 1; 50 | } 51 | 52 | h3 { 53 | visibility: visible; 54 | } 55 | 56 | p { 57 | visibility: visible; 58 | } 59 | } 60 | } 61 | 62 | 63 | 64 | // ------------------------- 65 | .ih-item.circle.effect13.from_left_and_right { 66 | .info { 67 | h3 { 68 | @include transform( translateX(-100%) ); 69 | } 70 | 71 | p { 72 | @include transform( translateX(100%) ); 73 | } 74 | } 75 | 76 | a:hover { 77 | h3 { 78 | @include transform( translateX(0) ); 79 | } 80 | 81 | p { 82 | @include transform( translateX(0) ); 83 | } 84 | } 85 | } 86 | 87 | // ------------------------- 88 | .ih-item.circle.effect13.top_to_bottom { 89 | .info { 90 | h3 { 91 | @include transform( translateY(-100%) ); 92 | } 93 | 94 | p { 95 | @include transform( translateY(-100%) ); 96 | } 97 | } 98 | 99 | a:hover { 100 | h3 { 101 | @include transform( translateY(0) ); 102 | } 103 | 104 | p { 105 | @include transform( translateY(0) ); 106 | } 107 | } 108 | } 109 | 110 | // ------------------------- 111 | .ih-item.circle.effect13.bottom_to_top { 112 | .info { 113 | h3 { 114 | @include transform( translateY(100%) ); 115 | } 116 | 117 | p { 118 | @include transform( translateY(100%) ); 119 | } 120 | } 121 | 122 | a:hover { 123 | h3 { 124 | @include transform( translateY(0) ); 125 | } 126 | 127 | p { 128 | @include transform( translateY(0) ); 129 | } 130 | } 131 | } 132 | 133 | -------------------------------------------------------------------------------- /client/styles/circle/_effect14.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect14 { 5 | @include perspective(900px); 6 | .img { 7 | visibility: visible; 8 | opacity: 1; 9 | @include transition( all 0.4s ease-out ); 10 | } 11 | 12 | 13 | &.colored { 14 | .info { 15 | background: $overlay_colored_fallback; 16 | } 17 | } 18 | 19 | .info { 20 | background: $overlay_dark_fallback; 21 | opacity: 0; 22 | visibility: hidden; 23 | @include transition( all .35s ease-in-out .3s); 24 | 25 | h3 { 26 | color: #fff; 27 | text-transform: uppercase; 28 | position: relative; 29 | letter-spacing: 2px; 30 | font-size: 22px; 31 | margin: 0 30px; 32 | padding: 55px 0 0 0; 33 | height: 110px; 34 | text-shadow: 35 | 0 0 1px #fff, 36 | 0 1px 2px rgba(0,0,0,0.3); 37 | } 38 | 39 | p { 40 | color: #bbb; 41 | padding: 10px 5px; 42 | font-style: italic; 43 | margin: 0 30px; 44 | font-size: 12px; 45 | border-top: 1px solid rgba(255,255,255,0.5); 46 | } 47 | } 48 | 49 | a:hover { 50 | .img { 51 | opacity: 0; 52 | visibility: hidden; 53 | } 54 | 55 | .info { 56 | visibility: visible; 57 | opacity: 1; 58 | } 59 | } 60 | } 61 | 62 | // ------------------------- 63 | .ih-item.circle.effect14.left_to_right { 64 | .img { 65 | @include transform( rotateY(0) ); 66 | @include transform-origin( 100% 50% ); 67 | } 68 | 69 | .info { 70 | @include transform( rotateY(90deg) ); 71 | @include transform-origin( 0% 50% ); 72 | } 73 | 74 | a:hover { 75 | .img { 76 | @include transform( rotateY(-90deg) ); 77 | } 78 | 79 | .info { 80 | @include transform( rotateY(0) ); 81 | } 82 | } 83 | } 84 | 85 | // ------------------------- 86 | .ih-item.circle.effect14.right_to_left { 87 | .img { 88 | @include transform( rotateY(0) ); 89 | @include transform-origin( 0% 50% ); 90 | } 91 | 92 | .info { 93 | @include transform( rotateY(-90deg) ); 94 | @include transform-origin( 100% 50% ); 95 | } 96 | 97 | a:hover { 98 | .img { 99 | @include transform( rotateY(90deg) ); 100 | } 101 | 102 | .info { 103 | @include transform( rotateY(0) ); 104 | } 105 | } 106 | } 107 | 108 | 109 | // ------------------------- 110 | .ih-item.circle.effect14.top_to_bottom { 111 | .img { 112 | @include transform( rotateX(0) ); 113 | @include transform-origin( 50% 100% ); 114 | } 115 | 116 | .info { 117 | @include transform( rotateX(-90deg) ); 118 | @include transform-origin( 50% 0 ); 119 | } 120 | 121 | a:hover { 122 | .img { 123 | @include transform( rotateX(90deg) ); 124 | } 125 | 126 | .info { 127 | @include transform( rotateX(0) ); 128 | } 129 | } 130 | } 131 | 132 | 133 | // ------------------------- 134 | .ih-item.circle.effect14.bottom_to_top { 135 | .img { 136 | @include transform( rotateX(0) ); 137 | @include transform-origin( 50% 0 ); 138 | } 139 | 140 | .info { 141 | @include transform( rotateX(90deg) ); 142 | @include transform-origin( 50% 100% ); 143 | } 144 | 145 | a:hover { 146 | .img { 147 | @include transform( rotateX(-90deg) ); 148 | } 149 | 150 | .info { 151 | @include transform( rotateX(0) ); 152 | } 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /client/styles/circle/_effect15.scss: -------------------------------------------------------------------------------- 1 | 2 | .ih-item.circle.effect15 { 3 | .img { 4 | opacity: 1; 5 | visibility: visible; 6 | @include transform( scale(1) rotate(0) ); 7 | @include transition( all 0.35s ease-in-out ); 8 | } 9 | 10 | 11 | &.colored { 12 | .info { 13 | background: $overlay_colored_fallback; 14 | } 15 | } 16 | 17 | .info { 18 | background: $overlay_dark_fallback; 19 | opacity: 0; 20 | visibility: hidden; 21 | @include transform( scale(.5) rotate(-720deg) ); 22 | @include transition( all .35s ease-in-out .3s ); 23 | 24 | h3 { 25 | color: #fff; 26 | text-transform: uppercase; 27 | position: relative; 28 | letter-spacing: 2px; 29 | font-size: 22px; 30 | margin: 0 30px; 31 | padding: 55px 0 0 0; 32 | height: 110px; 33 | text-shadow: 34 | 0 0 1px #fff, 35 | 0 1px 2px rgba(0,0,0,0.3); 36 | } 37 | 38 | p { 39 | color: #bbb; 40 | padding: 10px 5px; 41 | font-style: italic; 42 | margin: 0 30px; 43 | font-size: 12px; 44 | border-top: 1px solid rgba(255,255,255,0.5); 45 | } 46 | } 47 | 48 | a:hover { 49 | .img { 50 | opacity: 0; 51 | visibility: hidden; 52 | @include transform( scale(.5) rotate(720deg) ); 53 | } 54 | 55 | .info { 56 | opacity: 1; 57 | visibility: visible; 58 | @include transform( scale(1) rotate(0) ); 59 | } 60 | } 61 | 62 | } 63 | 64 | 65 | -------------------------------------------------------------------------------- /client/styles/circle/_effect16.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect16 { 5 | .img { 6 | z-index: 11; 7 | @include transition( all 0.35s ease-in-out ); 8 | } 9 | 10 | &.colored { 11 | .info { 12 | background: $overlay_colored_fallback; 13 | } 14 | } 15 | 16 | .info { 17 | background: $overlay_dark_fallback; 18 | @include transition( all .35s ease-in-out ); 19 | 20 | h3 { 21 | color: #fff; 22 | text-transform: uppercase; 23 | position: relative; 24 | letter-spacing: 2px; 25 | font-size: 22px; 26 | margin: 0 30px; 27 | padding: 55px 0 0 0; 28 | height: 110px; 29 | text-shadow: 30 | 0 0 1px #fff, 31 | 0 1px 2px rgba(0,0,0,0.3); 32 | } 33 | 34 | p { 35 | color: #bbb; 36 | padding: 10px 5px; 37 | font-style: italic; 38 | margin: 0 30px; 39 | font-size: 12px; 40 | border-top: 1px solid rgba(255,255,255,0.5); 41 | @include transition( all .35s ease-in-out ); 42 | } 43 | } 44 | } 45 | 46 | // ------------------------- 47 | .ih-item.circle.effect16.left_to_right { 48 | .img { 49 | @include transform-origin( 95% 40% ); 50 | &:after { 51 | content: ''; 52 | width: 8px; 53 | height: 8px; 54 | position: absolute; 55 | border-radius: 50%; 56 | top: 40%; 57 | left: 95%; 58 | margin: -4px 0 0 -4px; 59 | background: rgba(0, 0, 0, .8); 60 | box-shadow: 0 0 1px rgba(255,255,255,0.9); 61 | } 62 | } 63 | 64 | a:hover { 65 | .img { 66 | @include transform( rotate(-120deg) ); 67 | } 68 | } 69 | } 70 | 71 | // ------------------------- 72 | .ih-item.circle.effect16.right_to_left { 73 | .img { 74 | @include transform-origin( 5% 40% ); 75 | &:after { 76 | content: ''; 77 | width: 8px; 78 | height: 8px; 79 | position: absolute; 80 | border-radius: 50%; 81 | top: 40%; 82 | left: 5%; 83 | margin: -4px 0 0 -4px; 84 | background: rgba(0, 0, 0, .8); 85 | box-shadow: 0 0 1px rgba(255,255,255,0.9); 86 | } 87 | } 88 | 89 | a:hover { 90 | .img { 91 | @include transform( rotate(120deg) ); 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /client/styles/circle/_effect17.scss: -------------------------------------------------------------------------------- 1 | .ih-item.circle.effect17 { 2 | .info { 3 | opacity: 0; 4 | @include transform( scale(0) ); 5 | @include transition( all .35s ease-in-out ); 6 | 7 | h3 { 8 | color: #fff; 9 | text-transform: uppercase; 10 | position: relative; 11 | letter-spacing: 2px; 12 | font-size: 22px; 13 | margin: 0 30px; 14 | padding: 55px 0 0 0; 15 | height: 110px; 16 | text-shadow: 17 | 0 0 1px #fff, 18 | 0 1px 2px rgba(0,0,0,0.3); 19 | } 20 | 21 | p { 22 | color: #bbb; 23 | padding: 10px 5px; 24 | font-style: italic; 25 | margin: 0 30px; 26 | font-size: 12px; 27 | border-top: 1px solid rgba(255,255,255,0.5); 28 | opacity: 0; 29 | @include transition( all .35s ease-in-out ); 30 | } 31 | } 32 | 33 | a:hover { 34 | .img { 35 | &:before { 36 | box-shadow: 37 | inset 0 0 0 110px $overlay_dark_fallback, 38 | inset 0 0 0 16px rgba(255,255,255,0.8), 39 | 0 1px 2px rgba(0,0,0,0.1); 40 | 41 | box-shadow: 42 | inset 0 0 0 110px $overlay_dark, 43 | inset 0 0 0 16px rgba(255,255,255,0.8), 44 | 0 1px 2px rgba(0,0,0,0.1); 45 | } 46 | } 47 | 48 | .info { 49 | opacity: 1; 50 | @include transform( scale(1) ); 51 | 52 | p { 53 | opacity: 1; 54 | } 55 | } 56 | } 57 | 58 | &.colored { 59 | a:hover { 60 | .img { 61 | &:before { 62 | box-shadow: 63 | inset 0 0 0 110px $overlay_colored_fallback, 64 | inset 0 0 0 16px rgba(255,255,255,0.8), 65 | 0 1px 2px rgba(0,0,0,0.1); 66 | 67 | box-shadow: 68 | inset 0 0 0 110px $overlay_colored, 69 | inset 0 0 0 16px rgba(255,255,255,0.8), 70 | 0 1px 2px rgba(0,0,0,0.1); 71 | } 72 | } 73 | } 74 | } 75 | } -------------------------------------------------------------------------------- /client/styles/circle/_effect18.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect18 { 5 | @include perspective(900px); 6 | 7 | .img { 8 | z-index: 11; 9 | @include transition( all .5s ease-in-out ); 10 | } 11 | 12 | &.colored { 13 | .info { 14 | .info-back { 15 | background: $overlay_colored_fallback; 16 | } 17 | } 18 | } 19 | 20 | .info { 21 | @include transform-style(preserve-3d); 22 | .info-back { 23 | opacity: 1; 24 | border-radius: 50%; 25 | width: 100%; 26 | height: 100%; 27 | background: $overlay_dark_fallback; 28 | } 29 | 30 | h3 { 31 | color: #fff; 32 | text-transform: uppercase; 33 | position: relative; 34 | letter-spacing: 2px; 35 | font-size: 22px; 36 | margin: 0 30px; 37 | padding: 55px 0 0 0; 38 | height: 110px; 39 | text-shadow: 40 | 0 0 1px #fff, 41 | 0 1px 2px rgba(0,0,0,0.3); 42 | } 43 | 44 | p { 45 | color: #bbb; 46 | padding: 10px 5px; 47 | font-style: italic; 48 | margin: 0 30px; 49 | font-size: 12px; 50 | border-top: 1px solid rgba(255,255,255,0.5); 51 | } 52 | } 53 | } 54 | 55 | // ------------------------- 56 | .ih-item.circle.effect18.bottom_to_top { 57 | 58 | .img { 59 | @include transform-origin( 50% 0 ); 60 | } 61 | 62 | a:hover { 63 | .img { 64 | @include transform( rotate3d(1,0,0,180deg) ); 65 | } 66 | } 67 | } 68 | 69 | 70 | // ------------------------- 71 | .ih-item.circle.effect18.top_to_bottom { 72 | .img { 73 | @include transform-origin( 50% 100% ); 74 | } 75 | 76 | a:hover { 77 | .img { 78 | @include transform( rotate3d(1,0,0,-180deg) ); 79 | } 80 | } 81 | } 82 | 83 | // ------------------------- 84 | .ih-item.circle.effect18.left_to_right { 85 | .img { 86 | @include transform-origin( 100% 50% ); 87 | } 88 | 89 | a:hover { 90 | .img { 91 | @include transform( rotate3d(0,1,0,180deg) ); 92 | } 93 | } 94 | } 95 | 96 | // ------------------------- 97 | .ih-item.circle.effect18.right_to_left { 98 | .img { 99 | @include transform-origin( 0% 50% ); 100 | } 101 | 102 | a:hover { 103 | .img { 104 | @include transform( rotate3d(0,1,0,-180deg) ); 105 | } 106 | } 107 | } 108 | 109 | -------------------------------------------------------------------------------- /client/styles/circle/_effect19.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | // 4 | // -------------------------------------------------- 5 | .ih-item.circle.effect19 { 6 | &.colored { 7 | .info { 8 | background: $overlay_colored_fallback; 9 | background: $overlay_colored; 10 | } 11 | } 12 | 13 | .info { 14 | background: $overlay_dark_fallback; 15 | background: $overlay_dark; 16 | opacity: 0; 17 | @include transform( scale(0) ); 18 | @include transition( all .35s ease-in-out ); 19 | 20 | h3 { 21 | color: #fff; 22 | text-transform: uppercase; 23 | letter-spacing: 2px; 24 | font-size: 22px; 25 | margin: 0 30px; 26 | padding: 45px 0 0 0; 27 | height: 140px; 28 | text-shadow: 29 | 0 0 1px #fff, 30 | 0 1px 2px rgba(0,0,0,0.3); 31 | } 32 | 33 | p { 34 | color: #bbb; 35 | padding: 10px 5px; 36 | font-style: italic; 37 | margin: 0 30px; 38 | font-size: 12px; 39 | border-top: 1px solid rgba(255,255,255,0.5); 40 | } 41 | } 42 | 43 | a:hover { 44 | .info { 45 | opacity: 1; 46 | @include transform( scale(1) ); 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /client/styles/circle/_effect2.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect2 { 5 | .img { 6 | opacity: 1; 7 | @include transform( scale(1) ); 8 | @include transition( all 0.35s ease-in-out ); 9 | } 10 | 11 | 12 | &.colored { 13 | .info { 14 | background: $overlay_colored_fallback; 15 | background: $overlay_colored; 16 | } 17 | } 18 | 19 | .info { 20 | background: $overlay_dark_fallback; 21 | background: $overlay_dark; 22 | opacity: 0; 23 | pointer-events: none; 24 | @include transition( all .35s ease-in-out ); 25 | 26 | h3 { 27 | color: #fff; 28 | text-transform: uppercase; 29 | position: relative; 30 | letter-spacing: 2px; 31 | font-size: 22px; 32 | margin: 0 30px; 33 | padding: 55px 0 0 0; 34 | height: 110px; 35 | text-shadow: 36 | 0 0 1px #fff, 37 | 0 1px 2px rgba(0,0,0,0.3); 38 | } 39 | 40 | p { 41 | color: #bbb; 42 | padding: 10px 5px; 43 | font-style: italic; 44 | margin: 0 30px; 45 | font-size: 12px; 46 | border-top: 1px solid rgba(255,255,255,0.5); 47 | } 48 | } 49 | } 50 | 51 | // ------------------------- 52 | .ih-item.circle.effect2.left_to_right { 53 | .info { 54 | @include transform( translateX(-100%) ); 55 | } 56 | 57 | a:hover { 58 | .img { 59 | @include transform( rotate(-90deg) ); 60 | } 61 | .info { 62 | opacity: 1; 63 | @include transform( translateX(0) ); 64 | } 65 | } 66 | } 67 | 68 | // ------------------------- 69 | .ih-item.circle.effect2.right_to_left { 70 | .info { 71 | @include transform( translateX(100%) ); 72 | } 73 | 74 | a:hover { 75 | .img { 76 | @include transform( rotate(90deg) ); 77 | } 78 | .info { 79 | opacity: 1; 80 | @include transform( translateX(0) ); 81 | } 82 | } 83 | } 84 | 85 | 86 | // ------------------------- 87 | .ih-item.circle.effect2.top_to_bottom { 88 | .info { 89 | @include transform( translateY(-100%) ); 90 | } 91 | 92 | a:hover { 93 | .img { 94 | @include transform( rotate(-90deg) ); 95 | } 96 | .info { 97 | opacity: 1; 98 | @include transform( translateY(0) ); 99 | } 100 | } 101 | } 102 | 103 | 104 | // ------------------------- 105 | .ih-item.circle.effect2.bottom_to_top { 106 | .info { 107 | @include transform( translateY(100%) ); 108 | } 109 | 110 | a:hover { 111 | .img { 112 | @include transform( rotate(90deg) ); 113 | } 114 | .info { 115 | opacity: 1; 116 | @include transform( translateY(0) ); 117 | } 118 | } 119 | } 120 | 121 | 122 | -------------------------------------------------------------------------------- /client/styles/circle/_effect20.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect20 { 5 | @include perspective(900px); 6 | 7 | .img { 8 | @include transition( all .35s linear ); 9 | @include transform-origin( 50% 0% ); 10 | } 11 | 12 | &.colored { 13 | .info { 14 | .info-back { 15 | background: $overlay_colored_fallback; 16 | } 17 | } 18 | } 19 | 20 | .info { 21 | @include transform-style(preserve-3d); 22 | .info-back { 23 | opacity: 1; 24 | visibility: hidden; 25 | border-radius: 50%; 26 | width: 100%; 27 | height: 100%; 28 | background: $overlay_dark_fallback; 29 | @include transition( all .35s linear ); 30 | @include transform-origin( 50% 0% ); 31 | @include backface-visibility(hidden); 32 | } 33 | 34 | h3 { 35 | color: #fff; 36 | text-transform: uppercase; 37 | position: relative; 38 | letter-spacing: 2px; 39 | font-size: 22px; 40 | margin: 0 30px; 41 | padding: 55px 0 0 0; 42 | height: 110px; 43 | text-shadow: 44 | 0 0 1px #fff, 45 | 0 1px 2px rgba(0,0,0,0.3); 46 | } 47 | 48 | p { 49 | color: #bbb; 50 | padding: 10px 5px; 51 | font-style: italic; 52 | margin: 0 30px; 53 | font-size: 12px; 54 | border-top: 1px solid rgba(255,255,255,0.5); 55 | } 56 | } 57 | 58 | a:hover { 59 | .img { 60 | opacity: 0; 61 | } 62 | .info { 63 | .info-back { 64 | opacity: 1; 65 | visibility: visible; 66 | } 67 | } 68 | } 69 | } 70 | 71 | // ------------------------- 72 | .ih-item.circle.effect20.top_to_bottom { 73 | .info { 74 | .info-back { 75 | @include transform( translate3d(0,0,-220px) rotate3d(1,0,0,90deg) ); 76 | } 77 | } 78 | 79 | a:hover { 80 | .img { 81 | @include transform( translate3d(0,280px,0) rotate3d(1,0,0,-90deg) ); 82 | } 83 | 84 | .info { 85 | .info-back { 86 | @include transform( rotate3d(1,0,0,0deg) ); 87 | } 88 | } 89 | } 90 | } 91 | 92 | // ------------------------- 93 | .ih-item.circle.effect20.bottom_to_top { 94 | .info { 95 | .info-back { 96 | @include transform( translate3d(0,280px,0) rotate3d(1,0,0,-90deg) ); 97 | } 98 | } 99 | 100 | a:hover { 101 | .img { 102 | @include transform( translate3d(0,0,-220px) rotate3d(1,0,0,90deg) ); 103 | } 104 | 105 | .info { 106 | .info-back { 107 | @include transform( rotate3d(1,0,0,0deg) ); 108 | } 109 | } 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /client/styles/circle/_effect3.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect3 { 5 | .img { 6 | z-index: 11; 7 | @include transition( all 0.35s ease-in-out ); 8 | } 9 | 10 | 11 | &.colored { 12 | .info { 13 | background: $overlay_colored_fallback; 14 | } 15 | } 16 | 17 | .info { 18 | background: $overlay_dark_fallback; 19 | opacity: 0; 20 | pointer-events: none; 21 | @include transition( all .35s ease-in-out ); 22 | 23 | h3 { 24 | color: #fff; 25 | text-transform: uppercase; 26 | position: relative; 27 | letter-spacing: 2px; 28 | font-size: 22px; 29 | margin: 0 30px; 30 | padding: 55px 0 0 0; 31 | height: 110px; 32 | text-shadow: 33 | 0 0 1px #fff, 34 | 0 1px 2px rgba(0,0,0,0.3); 35 | } 36 | 37 | p { 38 | color: #bbb; 39 | padding: 10px 5px; 40 | font-style: italic; 41 | margin: 0 30px; 42 | font-size: 12px; 43 | border-top: 1px solid rgba(255,255,255,0.5); 44 | } 45 | } 46 | } 47 | 48 | // ------------------------- 49 | .ih-item.circle.effect3.left_to_right { 50 | .img { 51 | @include transform( scale(1) translateX(0) ); 52 | } 53 | 54 | .info { 55 | @include transform( translateX(-100%) ); 56 | } 57 | 58 | a:hover { 59 | .img { 60 | @include transform( scale(.5) translateX(100%) ); 61 | } 62 | .info { 63 | opacity: 1; 64 | @include transform( translateX(0) ); 65 | } 66 | } 67 | } 68 | 69 | // ------------------------- 70 | .ih-item.circle.effect3.right_to_left { 71 | .img { 72 | @include transform( scale(1) translateX(0) ); 73 | } 74 | 75 | .info { 76 | @include transform( translateX(100%) ); 77 | } 78 | 79 | a:hover { 80 | .img { 81 | @include transform( scale(.5) translateX(-100%) ); 82 | } 83 | .info { 84 | opacity: 1; 85 | @include transform( translateX(0) ); 86 | } 87 | } 88 | } 89 | 90 | 91 | // ------------------------- 92 | .ih-item.circle.effect3.top_to_bottom { 93 | .img { 94 | @include transform( scale(1) translateY(0) ); 95 | } 96 | 97 | .info { 98 | @include transform( translateY(-100%) ); 99 | } 100 | 101 | a:hover { 102 | .img { 103 | @include transform( scale(.5) translateY(100%) ); 104 | } 105 | .info { 106 | opacity: 1; 107 | @include transform( translateY(0) ); 108 | } 109 | } 110 | } 111 | 112 | 113 | // ------------------------- 114 | .ih-item.circle.effect3.bottom_to_top { 115 | .img { 116 | @include transform( scale(1) translateY(0) ); 117 | } 118 | 119 | .info { 120 | @include transform( translateY(100%) ); 121 | } 122 | 123 | a:hover { 124 | .img { 125 | @include transform( scale(.5) translateY(-100%) ); 126 | } 127 | .info { 128 | opacity: 1; 129 | @include transform( translateY(0) ); 130 | } 131 | } 132 | } 133 | 134 | 135 | -------------------------------------------------------------------------------- /client/styles/circle/_effect4.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect4 { 5 | .img { 6 | opacity: 1; 7 | @include transition( all 0.4s ease-in-out ); 8 | } 9 | 10 | 11 | &.colored { 12 | .info { 13 | background: $overlay_colored_fallback; 14 | } 15 | } 16 | 17 | .info { 18 | background: $overlay_dark_fallback; 19 | opacity: 0; 20 | visibility: hidden; 21 | pointer-events: none; 22 | @include transition( all .35s ease ); 23 | 24 | h3 { 25 | color: #fff; 26 | text-transform: uppercase; 27 | position: relative; 28 | letter-spacing: 2px; 29 | font-size: 22px; 30 | margin: 0 30px; 31 | padding: 55px 0 0 0; 32 | height: 110px; 33 | text-shadow: 34 | 0 0 1px #fff, 35 | 0 1px 2px rgba(0,0,0,0.3); 36 | } 37 | 38 | p { 39 | color: #bbb; 40 | padding: 10px 5px; 41 | font-style: italic; 42 | margin: 0 30px; 43 | font-size: 12px; 44 | border-top: 1px solid rgba(255,255,255,0.5); 45 | @include transition( all .35s ease-in-out ); 46 | } 47 | } 48 | 49 | a:hover { 50 | .img { 51 | opacity: 0; 52 | pointer-events: none; 53 | } 54 | 55 | .info { 56 | visibility: visible; 57 | opacity: 1; 58 | } 59 | } 60 | } 61 | 62 | // ------------------------- 63 | .ih-item.circle.effect4.left_to_right { 64 | .img { 65 | @include transform( translateX(0) ); 66 | } 67 | 68 | .info { 69 | @include transform( translateX(-100%) ); 70 | } 71 | 72 | a:hover { 73 | .img { 74 | @include transform( translateX(100%) ); 75 | } 76 | 77 | .info { 78 | @include transform( translateX(0) ); 79 | } 80 | } 81 | } 82 | 83 | // ------------------------- 84 | .ih-item.circle.effect4.right_to_left { 85 | .img { 86 | @include transform( translateX(0) ); 87 | } 88 | 89 | .info { 90 | @include transform( translateX(100%) ); 91 | } 92 | 93 | a:hover { 94 | .img { 95 | @include transform( translateX(-100%) ); 96 | } 97 | 98 | .info { 99 | @include transform( translateX(0) ); 100 | } 101 | } 102 | } 103 | 104 | 105 | // ------------------------- 106 | .ih-item.circle.effect4.top_to_bottom { 107 | .img { 108 | @include transform( translateY(0) ); 109 | } 110 | 111 | .info { 112 | @include transform( translateY(100%) ); 113 | } 114 | 115 | a:hover { 116 | .img { 117 | @include transform( translateY(-100%) ); 118 | } 119 | 120 | .info { 121 | @include transform( translateY(0) ); 122 | } 123 | } 124 | } 125 | 126 | 127 | // ------------------------- 128 | .ih-item.circle.effect4.bottom_to_top { 129 | .img { 130 | @include transform( translateY(0) ); 131 | } 132 | 133 | .info { 134 | @include transform( translateY(-100%) ); 135 | } 136 | 137 | a:hover { 138 | .img { 139 | @include transform( translateY(100%) ); 140 | } 141 | 142 | .info { 143 | @include transform( translateY(0) ); 144 | } 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /client/styles/circle/_effect5.scss: -------------------------------------------------------------------------------- 1 | 2 | .ih-item.circle.effect5 { 3 | @include perspective(900px); 4 | 5 | &.colored { 6 | .info { 7 | .info-back { 8 | background: $overlay_colored_fallback; 9 | background: $overlay_colored; 10 | } 11 | } 12 | } 13 | 14 | .info { 15 | // // opacity: 0; 16 | @include transition( all .35s ease-in-out ); 17 | @include transform-style(preserve-3d); 18 | .info-back { 19 | visibility: hidden; 20 | border-radius: 50%; 21 | width: 100%; 22 | height: 100%; 23 | background: $overlay_dark_fallback; 24 | background: $overlay_dark; 25 | @include transform( rotate3d(0,1,0,180deg) ); 26 | @include backface-visibility(hidden); 27 | } 28 | 29 | h3 { 30 | color: #fff; 31 | text-transform: uppercase; 32 | position: relative; 33 | letter-spacing: 2px; 34 | font-size: 22px; 35 | margin: 0 30px; 36 | padding: 55px 0 0 0; 37 | height: 110px; 38 | text-shadow: 39 | 0 0 1px #fff, 40 | 0 1px 2px rgba(0,0,0,0.3); 41 | } 42 | 43 | p { 44 | color: #bbb; 45 | padding: 10px 5px; 46 | font-style: italic; 47 | margin: 0 30px; 48 | font-size: 12px; 49 | border-top: 1px solid rgba(255,255,255,0.5); 50 | } 51 | } 52 | 53 | a:hover { 54 | .info { 55 | // opacity: 1; 56 | @include transform( rotate3d(0,1,0,-180deg) ); 57 | .info-back { 58 | visibility: visible; 59 | } 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /client/styles/circle/_effect6.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect6 { 5 | .img { 6 | opacity: 1; 7 | @include transform( scale(1) ); 8 | @include transition( all 0.35s ease-in-out ); 9 | } 10 | 11 | &.colored { 12 | .info { 13 | background: $overlay_colored_fallback; 14 | } 15 | } 16 | 17 | .info { 18 | background: $overlay_dark_fallback; 19 | opacity: 0; 20 | @include transition( all .35s ease-in-out ); 21 | 22 | h3 { 23 | color: #fff; 24 | text-transform: uppercase; 25 | position: relative; 26 | letter-spacing: 2px; 27 | font-size: 22px; 28 | margin: 0 30px; 29 | padding: 55px 0 0 0; 30 | height: 110px; 31 | text-shadow: 32 | 0 0 1px #fff, 33 | 0 1px 2px rgba(0,0,0,0.3); 34 | } 35 | 36 | p { 37 | color: #bbb; 38 | padding: 10px 5px; 39 | font-style: italic; 40 | margin: 0 30px; 41 | font-size: 12px; 42 | border-top: 1px solid rgba(255,255,255,0.5); 43 | } 44 | } 45 | 46 | } 47 | 48 | // ------------------------- 49 | .ih-item.circle.effect6.scale_up { 50 | .info { 51 | @include transform( scale(.5) ); 52 | } 53 | 54 | a:hover { 55 | .img { 56 | opacity: 0; 57 | @include transform( scale(1.5) ); 58 | } 59 | 60 | .info { 61 | opacity: 1; 62 | @include transform( scale(1) ); 63 | } 64 | } 65 | } 66 | 67 | // ------------------------- 68 | .ih-item.circle.effect6.scale_down { 69 | .info { 70 | @include transform( scale(1.5) ); 71 | } 72 | 73 | a:hover { 74 | .img { 75 | opacity: 0; 76 | @include transform( scale(.5) ); 77 | } 78 | 79 | .info { 80 | opacity: 1; 81 | @include transform( scale(1) ); 82 | } 83 | } 84 | } 85 | 86 | .ih-item.circle.effect6.scale_down_up { 87 | .info { 88 | @include transform( scale(.5) ); 89 | @include transition( all .35s ease-in-out .2s ); 90 | } 91 | 92 | a:hover { 93 | .img { 94 | opacity: 0; 95 | @include transform( scale(.5) ); 96 | } 97 | 98 | .info { 99 | opacity: 1; 100 | @include transform( scale(1) ); 101 | } 102 | } 103 | } 104 | 105 | -------------------------------------------------------------------------------- /client/styles/circle/_effect7.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect7 { 5 | .img { 6 | opacity: 1; 7 | @include transform( scale(1) ); 8 | @include transition( all 0.35s ease-out ); 9 | } 10 | 11 | 12 | &.colored { 13 | .info { 14 | background: $overlay_colored_fallback; 15 | } 16 | } 17 | 18 | .info { 19 | background: $overlay_dark_fallback; 20 | opacity: 0; 21 | visibility: hidden; 22 | pointer-events: none; 23 | @include transition( all .35s ease .2s); 24 | 25 | h3 { 26 | color: #fff; 27 | text-transform: uppercase; 28 | position: relative; 29 | letter-spacing: 2px; 30 | font-size: 22px; 31 | margin: 0 30px; 32 | padding: 55px 0 0 0; 33 | height: 110px; 34 | text-shadow: 35 | 0 0 1px #fff, 36 | 0 1px 2px rgba(0,0,0,0.3); 37 | } 38 | 39 | p { 40 | color: #bbb; 41 | padding: 10px 5px; 42 | font-style: italic; 43 | margin: 0 30px; 44 | font-size: 12px; 45 | border-top: 1px solid rgba(255,255,255,0.5); 46 | } 47 | } 48 | 49 | a:hover { 50 | .img { 51 | opacity: 0; 52 | @include transform( scale(.5) ); 53 | } 54 | 55 | .info { 56 | visibility: visible; 57 | opacity: 1; 58 | } 59 | } 60 | } 61 | 62 | // ------------------------- 63 | .ih-item.circle.effect7.left_to_right { 64 | .info { 65 | @include transform( translateX(-100%) ); 66 | } 67 | 68 | a:hover { 69 | .info { 70 | @include transform( translateX(0) ); 71 | } 72 | } 73 | } 74 | 75 | // ------------------------- 76 | .ih-item.circle.effect7.right_to_left { 77 | .info { 78 | @include transform( translateX(100%) ); 79 | } 80 | 81 | a:hover { 82 | .info { 83 | @include transform( translateX(0) ); 84 | } 85 | } 86 | } 87 | 88 | 89 | // ------------------------- 90 | .ih-item.circle.effect7.top_to_bottom { 91 | .info { 92 | @include transform( translateY(100%) ); 93 | } 94 | 95 | a:hover { 96 | .info { 97 | @include transform( translateY(0) ); 98 | } 99 | } 100 | } 101 | 102 | 103 | // ------------------------- 104 | .ih-item.circle.effect7.bottom_to_top { 105 | .info { 106 | @include transform( translateY(-100%) ); 107 | } 108 | 109 | a:hover { 110 | .info { 111 | @include transform( translateY(0) ); 112 | } 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /client/styles/circle/_effect8.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | // shared 4 | // ------------------------- 5 | .ih-item.circle.effect8 { 6 | &.colored { 7 | .info { 8 | background: $overlay_colored_fallback; 9 | } 10 | } 11 | 12 | // thanks to the trick http://stackoverflow.com/questions/5395024/transform-scale-after-rotate 13 | .img-container { 14 | @include transform( scale(1) ); 15 | @include transition( all .3s ease-in-out ); 16 | 17 | .img { 18 | opacity: 1; 19 | @include transition( all .3s ease-in-out .3s ); 20 | } 21 | } 22 | 23 | .info-container { 24 | position: absolute; 25 | top: 0; 26 | bottom: 0; 27 | left:0; 28 | right: 0; 29 | text-align: center; 30 | border-radius: 50%; 31 | opacity: 0; 32 | pointer-events: none; 33 | @include transition( all .3s ease-in-out .3s ); 34 | } 35 | 36 | .info { 37 | width: 100%; 38 | height: 100%; 39 | background: $overlay_dark_fallback; 40 | pointer-events: none; 41 | @include transform( scale(.5) ); 42 | @include transition( all .35s ease-in-out .6s); 43 | 44 | h3 { 45 | color: #fff; 46 | text-transform: uppercase; 47 | letter-spacing: 2px; 48 | font-size: 22px; 49 | margin: 0 30px; 50 | padding: 45px 0 0 0; 51 | height: 140px; 52 | text-shadow: 53 | 0 0 1px #fff, 54 | 0 1px 2px rgba(0,0,0,0.3); 55 | } 56 | 57 | p { 58 | color: #bbb; 59 | padding: 10px 5px; 60 | font-style: italic; 61 | margin: 0 30px; 62 | font-size: 12px; 63 | border-top: 1px solid rgba(255,255,255,0.5); 64 | } 65 | } 66 | 67 | a:hover { 68 | .img-container { 69 | pointer-events: none; 70 | @include transform( scale(.5) ); 71 | 72 | .img { 73 | opacity: 0; 74 | pointer-events: none; 75 | } 76 | } 77 | 78 | .info-container { 79 | opacity: 1; 80 | 81 | .info { 82 | @include transform( scale(1) ); 83 | } 84 | } 85 | } 86 | } 87 | 88 | // ------------------------- 89 | .ih-item.circle.effect8.left_to_right { 90 | .img-container { 91 | .img { 92 | @include transform( translateX(0) ); 93 | } 94 | } 95 | 96 | .info-container { 97 | @include transform( translateX(100%) ); 98 | } 99 | 100 | a:hover { 101 | .img-container { 102 | .img { 103 | @include transform( translateX(-100%) ); 104 | } 105 | } 106 | 107 | .info-container { 108 | @include transform( translateX(0) ); 109 | } 110 | } 111 | } 112 | 113 | // ------------------------- 114 | .ih-item.circle.effect8.right_to_left { 115 | .img-container { 116 | .img { 117 | @include transform( translateX(0) ); 118 | } 119 | } 120 | 121 | .info-container { 122 | @include transform( translateX(-100%) ); 123 | } 124 | 125 | a:hover { 126 | .img-container { 127 | .img { 128 | @include transform( translateX(100%) ); 129 | } 130 | } 131 | 132 | .info-container { 133 | @include transform( translateX(0) ); 134 | } 135 | } 136 | } 137 | 138 | // ------------------------- 139 | .ih-item.circle.effect8.top_to_bottom { 140 | .img-container { 141 | .img { 142 | @include transform( translateY(0) ); 143 | 144 | } 145 | } 146 | 147 | .info-container { 148 | @include transform( translateY(-100%) ); 149 | } 150 | 151 | a:hover { 152 | .img-container { 153 | .img { 154 | @include transform( translateY(100%) ); 155 | } 156 | } 157 | 158 | .info-container { 159 | @include transform( translateY(0) ); 160 | } 161 | } 162 | } 163 | 164 | // ------------------------- 165 | .ih-item.circle.effect8.bottom_to_top { 166 | .img-container { 167 | .img { 168 | @include transform( translateY(0) ); 169 | } 170 | } 171 | 172 | .info-container { 173 | @include transform( translateY(100%) ); 174 | } 175 | 176 | a:hover { 177 | .img-container { 178 | .img { 179 | @include transform( translateY(-100%) ); 180 | } 181 | } 182 | 183 | .info-container { 184 | @include transform( translateY(0) ); 185 | } 186 | } 187 | } 188 | 189 | 190 | -------------------------------------------------------------------------------- /client/styles/circle/_effect9.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.circle.effect9 { 5 | .img { 6 | opacity: 1; 7 | @include transition( all 0.35s ease-out ); 8 | } 9 | 10 | 11 | &.colored { 12 | .info { 13 | background: $overlay_colored_fallback; 14 | } 15 | } 16 | 17 | .info { 18 | background: $overlay_dark_fallback; 19 | opacity: 0; 20 | visibility: hidden; 21 | pointer-events: none; 22 | @include transform( scale(.5) ); 23 | @include transition( all .35s ease .2s); 24 | 25 | h3 { 26 | color: #fff; 27 | text-transform: uppercase; 28 | position: relative; 29 | letter-spacing: 2px; 30 | font-size: 22px; 31 | margin: 0 30px; 32 | padding: 55px 0 0 0; 33 | height: 110px; 34 | text-shadow: 35 | 0 0 1px #fff, 36 | 0 1px 2px rgba(0,0,0,0.3); 37 | } 38 | 39 | p { 40 | color: #bbb; 41 | padding: 10px 5px; 42 | font-style: italic; 43 | margin: 0 30px; 44 | font-size: 12px; 45 | border-top: 1px solid rgba(255,255,255,0.5); 46 | } 47 | } 48 | 49 | a:hover { 50 | .img { 51 | opacity: 0; 52 | pointer-events: none; 53 | @include transform( scale(.5) ); 54 | } 55 | 56 | .info { 57 | visibility: visible; 58 | opacity: 1; 59 | @include transform( scale(1) ); 60 | } 61 | } 62 | } 63 | 64 | // ------------------------- 65 | .ih-item.circle.effect9.left_to_right { 66 | .img { 67 | @include transform( translateX(0) rotate(0) ); 68 | } 69 | 70 | a:hover { 71 | .img { 72 | @include transform( translateX(100%) rotate(180deg) ); 73 | } 74 | } 75 | } 76 | 77 | // ------------------------- 78 | .ih-item.circle.effect9.right_to_left { 79 | .img { 80 | @include transform( translateX(0) rotate(0) ); 81 | } 82 | 83 | a:hover { 84 | .img { 85 | @include transform( translateX(-100%) rotate(-180deg) ); 86 | } 87 | } 88 | } 89 | 90 | 91 | // ------------------------- 92 | .ih-item.circle.effect9.top_to_bottom { 93 | .img { 94 | @include transform( translateY(0) ); 95 | } 96 | 97 | a:hover { 98 | .img { 99 | @include transform( translateY(-100%) ); 100 | } 101 | } 102 | } 103 | 104 | 105 | // ------------------------- 106 | .ih-item.circle.effect9.bottom_to_top { 107 | .img { 108 | @include transform( translateY(0) ); 109 | } 110 | 111 | a:hover { 112 | .img { 113 | @include transform( translateY(100%) ); 114 | } 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /client/styles/docs-overrides.scss: -------------------------------------------------------------------------------- 1 | 2 | // overrides default docs, just for demo 3 | // -------------------------------------------------- 4 | 5 | $font-family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; 6 | $font-family-serif: "Lustria", Georgia, "Times New Roman", Times, serif; 7 | 8 | // fonts 9 | body { 10 | font-family: $font-family-sans-serif; 11 | } 12 | 13 | h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { 14 | font-family: $font-family-serif; 15 | } 16 | 17 | 18 | // top header 19 | .top-header { 20 | background-color: #2D2B41; 21 | &.bs-docs-nav { 22 | border-color: darken(#2D2B41, 5%); 23 | } 24 | } 25 | 26 | .bs-docs-nav .navbar-nav > .active > a, 27 | .bs-docs-nav .navbar-nav > .active > a:hover { 28 | background-color: darken(#2D2B41, 5%); 29 | } 30 | .bs-docs-nav .navbar-toggle { 31 | border-color: darken(#2D2B41, 5%); 32 | &:hover { 33 | background-color: lighten(#2D2B41, 5%); 34 | border-color: darken(#2D2B41, 5%); 35 | } 36 | } 37 | .navbar-nav { 38 | margin: 0 -15px; 39 | @media (min-width: 768px) { 40 | margin: 0; 41 | } 42 | } 43 | .bs-docs-nav .navbar-collapse { 44 | border-color: transparent; 45 | } 46 | 47 | 48 | // header 49 | .header { 50 | background: url('../images/bg_header.jpg') repeat-x; 51 | 52 | } 53 | .bs-docs-home, .bs-header { 54 | color: #c8c8e6; 55 | } 56 | 57 | // content 58 | .highlight pre { 59 | white-space: pre; 60 | } 61 | 62 | .section-heading { 63 | padding-top: 80px; 64 | &.first-child { 65 | margin-top: 0; 66 | padding-top: 0; 67 | } 68 | } 69 | 70 | .row { 71 | margin-top: 15px; 72 | margin-bottom: 15px; 73 | } 74 | 75 | // footer 76 | .bs-footer { 77 | background-color: #2C2C44; 78 | color: #575781; 79 | a { 80 | color: #575781; 81 | } 82 | } 83 | 84 | 85 | body { 86 | position: relative; 87 | padding-top: 50px; 88 | } 89 | -------------------------------------------------------------------------------- /client/styles/ihover.scss: -------------------------------------------------------------------------------- 1 | @import 2 | // Shared part of all effects 3 | // ------------------------- 4 | "bourbon/bourbon" // mixins for Sass: http://bourbon.io/docs/ 5 | , "shared/variables" 6 | , "shared/default-styles" // some styling 7 | 8 | // Circle 9 | // ------------------------- 10 | 11 | // Circle only effects 12 | , "circle/effect1" // Border rotate / Overlay fadeIn 13 | 14 | // Others 15 | , "circle/effect2" // Image rotate / Overlay slideIn 16 | , "circle/effect3" // 17 | , "circle/effect4" // Image slideOut / Cover slideIn (different easing) 18 | , "circle/effect5" // Single: Overlay flip 19 | , "circle/effect6" // Image scaleUp(Down) fadeOut / Cover scaleUp(Down) fadeIn 20 | , "circle/effect7" // Image scaleDown fadeOut / Cover slideIn 21 | , "circle/effect8" // scaleDown > Slide together > ScaleUp (in order) 22 | , "circle/effect9" // Image slideOut fadeOut / Cover scaleUp fadeIn 23 | , "circle/effect10" // 24 | , "circle/effect11" // Flip, four directions 25 | , "circle/effect12" // Rotate out and in, four direction 26 | , "circle/effect13" // Overlay fadeIn / Text slideIn 27 | , "circle/effect14" // Open / Close 28 | , "circle/effect15" // Single: rotate in and out 29 | , "circle/effect16" 30 | , "circle/effect17" 31 | , "circle/effect18" 32 | , "circle/effect19" 33 | , "circle/effect20" 34 | 35 | 36 | // Square 37 | // ------------------------- 38 | 39 | // Square only effects 40 | , "square/effect1" // 41 | , "square/effect2" // 42 | , "square/effect3" // 43 | , "square/effect4" // 44 | 45 | // Others 46 | , "square/effect5" // Image scaleDown / Cover rotate scaleUp 47 | , "square/effect6" // Image zoomIn / Overly fadeIn / Text slideIn 48 | , "square/effect7" // Single: Image zoomIn / Overly fadeIn / Text scaleDown fadeIn 49 | , "square/effect8" // Image scaleUp(Down) fadeOut / Cover scaleUp(Down) fadeIn 50 | , "square/effect9" // Image open, four directions 51 | , "square/effect10" // Image slideOut / Cover slideIn 52 | , "square/effect11" // Image scaleDown fadeOut / Cover slideIn 53 | , "square/effect12" // 54 | , "square/effect13" // Image zoomIn / Overlay slideIn 55 | , "square/effect14" // Image slideOut fadeOut / Cover scaleUp fadeIn 56 | , "square/effect15" // Open / Close 57 | ; 58 | 59 | 60 | -------------------------------------------------------------------------------- /client/styles/shared/_default-styles.scss: -------------------------------------------------------------------------------- 1 | // Shared style 2 | // -------------------------------------------------- 3 | 4 | // All item 5 | // ------------------------- 6 | .ih-item { 7 | position: relative; 8 | @include transition( all 0.35s ease-in-out ); 9 | &, 10 | * { 11 | @include box-sizing(border-box); 12 | } 13 | 14 | a { 15 | color: #333; 16 | &:hover { 17 | text-decoration: none; 18 | } 19 | } 20 | 21 | img { 22 | width: 100%; 23 | height: 100%; 24 | } 25 | } 26 | 27 | // Circle item 28 | // ------------------------- 29 | .ih-item.circle { 30 | position: relative; 31 | width: 220px; 32 | height: 220px; 33 | border-radius: 50%; 34 | 35 | .img { 36 | position: relative; 37 | width: 220px; 38 | height: 220px; 39 | border-radius: 50%; 40 | &:before { 41 | position: absolute; 42 | display: block; 43 | content: ''; 44 | width: 100%; 45 | height: 100%; 46 | border-radius: 50%; 47 | box-shadow: 48 | inset 0 0 0 16px rgba(255,255,255,0.6), 49 | 0 1px 2px rgba(0,0,0,0.3); 50 | @include transition( all 0.35s ease-in-out ); 51 | } 52 | 53 | img { 54 | border-radius: 50%; 55 | } 56 | } 57 | 58 | .info { 59 | position: absolute; 60 | top: 0; 61 | bottom: 0; 62 | left:0; 63 | right: 0; 64 | text-align: center; 65 | border-radius: 50%; 66 | @include backface-visibility(hidden); 67 | } 68 | } 69 | 70 | 71 | // Square item 72 | // ------------------------- 73 | .ih-item.square { 74 | position: relative; 75 | width: 316px; // 300px + 8px * 2 (border) 76 | height: 216px; // 200px + 8px * 2 (border) 77 | border: 8px solid #fff; 78 | box-shadow: 1px 1px 3px rgba(0,0,0,0.3); 79 | 80 | .info { 81 | position: absolute; 82 | top: 0; 83 | bottom: 0; 84 | left:0; 85 | right: 0; 86 | text-align: center; 87 | @include backface-visibility(hidden); 88 | } 89 | 90 | } -------------------------------------------------------------------------------- /client/styles/shared/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // Variables 3 | // -------------------------------------------------- 4 | $overlay_dark: rgba(0, 0, 0, .6); // color of overlay background 5 | $overlay_dark_fallback: #333; // for IE 8 & non-tranparent 6 | $overlay_dark_dark: #111; 7 | 8 | $overlay_colored: rgba(26, 74, 114, .6); // color of colored overlay background 9 | $overlay_colored_fallback: #1a4a72; // for IE 8 & non-tranparent 10 | $overlay_colored_dark: darken($overlay_colored, 15%); -------------------------------------------------------------------------------- /client/styles/square/_effect1.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.square.effect1 { 5 | overflow: hidden; 6 | 7 | &.colored { 8 | .info { 9 | background: $overlay_colored_fallback; 10 | } 11 | } 12 | 13 | .img { 14 | z-index: 11; 15 | position: absolute; // for z-index 16 | @include transition( all .35s ease-in-out ); 17 | @include transform( scale(1) ); 18 | } 19 | 20 | .info { 21 | background: $overlay_dark_fallback; 22 | visibility: hidden; 23 | opacity: 0; 24 | @include transform( scale(0) ); 25 | @include transition( all .35s ease-in-out ); 26 | } 27 | 28 | a:hover { 29 | .info { 30 | visibility: visible; 31 | opacity: 1; 32 | @include transform( scale(1) ); 33 | } 34 | } 35 | } 36 | 37 | // ------------------------- 38 | .ih-item.square.effect1.left_and_right { 39 | .info { 40 | h3 { 41 | position: absolute; 42 | top: 12px; 43 | left: 12px; 44 | text-transform: uppercase; 45 | color: #fff; 46 | text-align: center; 47 | font-size: 17px; 48 | margin: 0; 49 | } 50 | 51 | p { 52 | position: absolute; 53 | right: 12px; 54 | bottom: 12px; 55 | margin: 0; 56 | font-style: italic; 57 | font-size: 12px; 58 | color: #bbb; 59 | } 60 | } 61 | 62 | a:hover { 63 | .img { 64 | @include transform( scale(.6) ); 65 | } 66 | } 67 | } 68 | 69 | // ------------------------- 70 | .ih-item.square.effect1.top_to_bottom { 71 | .info { 72 | h3 { 73 | text-transform: uppercase; 74 | color: #fff; 75 | text-align: center; 76 | font-size: 17px; 77 | padding: 10px 10px 0 4px; 78 | margin: 10px 0 0 0; 79 | } 80 | 81 | p { 82 | font-style: italic; 83 | font-size: 12px; 84 | color: #bbb; 85 | padding: 5px; 86 | text-align: center; 87 | } 88 | } 89 | 90 | a:hover { 91 | .img { 92 | @include transform( translateY(30px) scale(.6) ); 93 | } 94 | } 95 | } 96 | 97 | // ------------------------- 98 | .ih-item.square.effect1.bottom_to_top { 99 | .info { 100 | h3 { 101 | text-transform: uppercase; 102 | color: #fff; 103 | text-align: center; 104 | font-size: 17px; 105 | padding: 10px 10px 0 4px; 106 | margin: 134px 0 0 0; 107 | } 108 | 109 | p { 110 | font-style: italic; 111 | font-size: 12px; 112 | color: #bbb; 113 | padding: 5px; 114 | text-align: center; 115 | } 116 | } 117 | 118 | a:hover { 119 | .img { 120 | @include transform( translateY(-30px) scale(.6) ); 121 | } 122 | } 123 | } -------------------------------------------------------------------------------- /client/styles/square/_effect10.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.square.effect10 { 5 | overflow: hidden; 6 | 7 | &.colored { 8 | .info { 9 | background: $overlay_colored_fallback; 10 | 11 | h3 { 12 | background: $overlay_colored_dark; 13 | } 14 | } 15 | } 16 | 17 | .img { 18 | @include transition( all .35s ease-in-out ); 19 | } 20 | 21 | .info { 22 | background: $overlay_dark_fallback; 23 | visibility: hidden; 24 | opacity: 0; 25 | @include transition( all .35s ease-in-out ); 26 | 27 | h3 { 28 | text-transform: uppercase; 29 | color: #fff; 30 | text-align: center; 31 | font-size: 17px; 32 | padding: 10px; 33 | background: $overlay_dark_dark; 34 | margin: 30px 0 0 0; 35 | } 36 | 37 | p { 38 | font-style: italic; 39 | font-size: 12px; 40 | position: relative; 41 | color: #bbb; 42 | padding: 20px 20px 20px; 43 | text-align: center; 44 | } 45 | } 46 | 47 | a:hover { 48 | .info { 49 | visibility: visible; 50 | opacity: 1; 51 | } 52 | } 53 | } 54 | 55 | // ------------------------- 56 | .ih-item.square.effect10.left_to_right { 57 | .img { 58 | @include transform( translateX(0) ); 59 | } 60 | 61 | .info { 62 | @include transform( translateX(-100%) ); 63 | } 64 | 65 | a:hover { 66 | .img { 67 | @include transform( translateX(100%) ); 68 | } 69 | 70 | .info { 71 | @include transform( translateX(0) ); 72 | } 73 | } 74 | } 75 | 76 | // ------------------------- 77 | .ih-item.square.effect10.right_to_left { 78 | .img { 79 | @include transform( translateX(0) ); 80 | } 81 | 82 | .info { 83 | @include transform( translateX(100%) ); 84 | } 85 | 86 | a:hover { 87 | .img { 88 | @include transform( translateX(-100%) ); 89 | } 90 | 91 | .info { 92 | @include transform( translateX(0) ); 93 | } 94 | } 95 | } 96 | 97 | 98 | // ------------------------- 99 | .ih-item.square.effect10.top_to_bottom { 100 | .img { 101 | @include transform( translateY(0) ); 102 | } 103 | 104 | .info { 105 | @include transform( translateY(-100%) ); 106 | } 107 | 108 | a:hover { 109 | .img { 110 | @include transform( translateY(100%) ); 111 | } 112 | 113 | .info { 114 | @include transform( translateY(0) ); 115 | } 116 | } 117 | } 118 | 119 | 120 | // ------------------------- 121 | .ih-item.square.effect10.bottom_to_top { 122 | .img { 123 | @include transform( translateY(0) ); 124 | } 125 | 126 | .info { 127 | @include transform( translateY(100%) ); 128 | } 129 | 130 | a:hover { 131 | .img { 132 | @include transform( translateY(-100%) ); 133 | } 134 | 135 | .info { 136 | @include transform( translateY(0) ); 137 | } 138 | } 139 | } 140 | 141 | -------------------------------------------------------------------------------- /client/styles/square/_effect11.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.square.effect11 { 5 | overflow: hidden; 6 | 7 | &.colored { 8 | .info { 9 | background: $overlay_colored_fallback; 10 | 11 | h3 { 12 | background: $overlay_colored_dark; 13 | } 14 | } 15 | } 16 | 17 | .img { 18 | opacity: 1; 19 | @include transform( scale(1) ); 20 | @include transition( all .35s ease-in-out ); 21 | } 22 | 23 | .info { 24 | background: $overlay_dark_fallback; 25 | visibility: hidden; 26 | opacity: 0; 27 | @include transition( all .35s ease .2s); 28 | 29 | h3 { 30 | text-transform: uppercase; 31 | color: #fff; 32 | text-align: center; 33 | font-size: 17px; 34 | padding: 10px; 35 | background: $overlay_dark_dark; 36 | margin: 30px 0 0 0; 37 | } 38 | 39 | p { 40 | font-style: italic; 41 | font-size: 12px; 42 | position: relative; 43 | color: #bbb; 44 | padding: 20px 20px 20px; 45 | text-align: center; 46 | } 47 | } 48 | 49 | a:hover { 50 | .img { 51 | opacity: 0; 52 | @include transform( scale(.5) ); 53 | } 54 | 55 | .info { 56 | visibility: visible; 57 | opacity: 1; 58 | } 59 | } 60 | } 61 | 62 | // ------------------------- 63 | .ih-item.square.effect11.left_to_right { 64 | .info { 65 | @include transform( translateX(-100%) ); 66 | } 67 | 68 | a:hover { 69 | .info { 70 | @include transform( translateX(0) ); 71 | } 72 | } 73 | } 74 | 75 | // ------------------------- 76 | .ih-item.square.effect11.right_to_left { 77 | .info { 78 | @include transform( translateX(100%) ); 79 | } 80 | 81 | a:hover { 82 | .info { 83 | @include transform( translateX(0) ); 84 | } 85 | } 86 | } 87 | 88 | 89 | // ------------------------- 90 | .ih-item.square.effect11.top_to_bottom { 91 | .info { 92 | @include transform( translateY(-100%) ); 93 | } 94 | 95 | a:hover { 96 | .info { 97 | @include transform( translateY(0) ); 98 | } 99 | } 100 | } 101 | 102 | 103 | // ------------------------- 104 | .ih-item.square.effect11.bottom_to_top { 105 | .info { 106 | @include transform( translateY(100%) ); 107 | } 108 | 109 | a:hover { 110 | .info { 111 | @include transform( translateY(0) ); 112 | } 113 | } 114 | } 115 | 116 | -------------------------------------------------------------------------------- /client/styles/square/_effect12.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.square.effect12 { 5 | overflow: hidden; 6 | &.colored { 7 | .info { 8 | background: $overlay_colored_fallback; 9 | background: $overlay_colored; 10 | 11 | h3 { 12 | background: $overlay_colored_dark; 13 | } 14 | } 15 | } 16 | 17 | .img { 18 | @include transition( all .35s ease-in ); 19 | } 20 | 21 | .info { 22 | background: $overlay_dark_fallback; 23 | background: $overlay_dark; 24 | visibility: hidden; 25 | opacity: 0; 26 | @include transition( all .35s ease-in ); 27 | 28 | h3 { 29 | text-transform: uppercase; 30 | color: #fff; 31 | text-align: center; 32 | font-size: 17px; 33 | padding: 10px; 34 | background: $overlay_dark_dark; 35 | margin: 30px 0 0 0; 36 | @include transition( all .35s ease-in ); 37 | } 38 | 39 | p { 40 | font-style: italic; 41 | font-size: 12px; 42 | position: relative; 43 | color: #bbb; 44 | padding: 20px 20px 20px; 45 | text-align: center; 46 | @include transition( all .35s ease-in ); 47 | } 48 | } 49 | 50 | a:hover { 51 | .info { 52 | visibility: visible; 53 | opacity: 1; 54 | @include transition-delay( .2s ); 55 | 56 | h3 { 57 | @include transition-delay( .3s ); 58 | } 59 | 60 | p { 61 | @include transition-delay( .25s ); 62 | } 63 | } 64 | } 65 | } 66 | 67 | // ------------------------- 68 | .ih-item.square.effect12.left_to_right { 69 | .info { 70 | @include transform( translate(-460px, -100px) rotate(-180deg) ); 71 | 72 | h3 { 73 | @include transform( translateY(-100px) ); 74 | } 75 | 76 | p { 77 | @include transform( translateX(-300px) rotate(-90deg) ); 78 | } 79 | } 80 | 81 | a:hover { 82 | .info { 83 | @include transform( translate(0px, 0px) ); 84 | 85 | h3 { 86 | @include transform( translateY(0px) ); 87 | } 88 | 89 | p { 90 | @include transform( translateX(0px) rotate(0deg) ); 91 | } 92 | } 93 | } 94 | } 95 | 96 | // ------------------------- 97 | .ih-item.square.effect12.right_to_left { 98 | .info { 99 | @include transform( translate(460px, -100px) rotate(180deg) ); 100 | 101 | h3 { 102 | @include transform( translateY(-100px) ); 103 | } 104 | 105 | p { 106 | @include transform( translateX(300px) rotate(90deg) ); 107 | } 108 | } 109 | 110 | a:hover { 111 | .info { 112 | @include transform( translate(0px, 0px) ); 113 | 114 | h3 { 115 | @include transform( translateY(0px) ); 116 | } 117 | 118 | p { 119 | @include transform( translateX(0px) rotate(0deg) ); 120 | } 121 | } 122 | } 123 | } 124 | 125 | // ------------------------- 126 | .ih-item.square.effect12.top_to_bottom { 127 | .info { 128 | @include transform( translate(-265px, -145px) rotate(-45deg) ); 129 | 130 | h3 { 131 | @include transform( translate(200px, -200px) ); 132 | } 133 | 134 | p { 135 | @include transform( translate(200px, -200px) ); 136 | } 137 | } 138 | 139 | a:hover { 140 | .info { 141 | @include transform( translate(0px, 0px) ); 142 | @include transition-delay( .2s ); 143 | 144 | h3 { 145 | @include transform( translate(0px,0px) ); 146 | @include transition-delay( .3s ); 147 | } 148 | 149 | p { 150 | @include transform( translate(0px,0px) ); 151 | @include transition-delay( .4s ); 152 | } 153 | } 154 | } 155 | } 156 | 157 | 158 | // ------------------------- 159 | .ih-item.square.effect12.bottom_to_top { 160 | .info { 161 | @include transform( translate(265px, 145px) rotate(45deg) ); 162 | 163 | h3 { 164 | @include transform( translate(200px, -200px) ); 165 | } 166 | 167 | p { 168 | @include transform( translate(-200px, 200px) ); 169 | } 170 | } 171 | 172 | a:hover { 173 | .info { 174 | @include transform( translate(0px, 0px) ); 175 | @include transition-delay( .2s ); 176 | 177 | h3 { 178 | @include transform( translate(0px,0px) ); 179 | @include transition-delay( .3s ); 180 | } 181 | 182 | p { 183 | @include transform( translate(0px,0px) ); 184 | @include transition-delay( .4s ); 185 | } 186 | } 187 | } 188 | } 189 | 190 | 191 | -------------------------------------------------------------------------------- /client/styles/square/_effect13.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.square.effect13 { 5 | overflow: hidden; 6 | 7 | &.colored { 8 | .info { 9 | background: $overlay_colored_fallback; 10 | background: $overlay_colored; 11 | 12 | h3 { 13 | background: $overlay_colored_dark; 14 | } 15 | } 16 | } 17 | 18 | .img { 19 | @include transition( all .35s ease-in-out ); 20 | @include transform( scale(1) ); 21 | } 22 | 23 | .info { 24 | background: $overlay_dark_fallback; 25 | background: $overlay_dark; 26 | visibility: hidden; 27 | opacity: 0; 28 | pointer-events: none; 29 | @include transition( all .35s ease-in-out ); 30 | 31 | h3 { 32 | text-transform: uppercase; 33 | color: #fff; 34 | text-align: center; 35 | font-size: 17px; 36 | padding: 10px; 37 | background: $overlay_dark_dark; 38 | margin: 30px 0 0 0; 39 | } 40 | 41 | p { 42 | font-style: italic; 43 | font-size: 12px; 44 | position: relative; 45 | color: #bbb; 46 | padding: 20px 20px 20px; 47 | text-align: center; 48 | } 49 | } 50 | 51 | a:hover { 52 | .img { 53 | @include transform( scale(1.2) ); 54 | } 55 | 56 | .info { 57 | visibility: visible; 58 | opacity: 1; 59 | } 60 | } 61 | } 62 | 63 | // ------------------------- 64 | .ih-item.square.effect13.left_to_right { 65 | .info { 66 | @include transform( translateX(-100%) ); 67 | } 68 | 69 | a:hover { 70 | .info { 71 | @include transform( translateX(0) ); 72 | } 73 | } 74 | } 75 | 76 | // ------------------------- 77 | .ih-item.square.effect13.right_to_left { 78 | .info { 79 | @include transform( translateX(100%) ); 80 | } 81 | 82 | a:hover { 83 | .info { 84 | @include transform( translateX(0) ); 85 | } 86 | } 87 | } 88 | 89 | 90 | // ------------------------- 91 | .ih-item.square.effect13.top_to_bottom { 92 | .info { 93 | @include transform( translateY(-100%) ); 94 | } 95 | 96 | a:hover { 97 | .info { 98 | @include transform( translateY(0) ); 99 | } 100 | } 101 | } 102 | 103 | 104 | // ------------------------- 105 | .ih-item.square.effect13.bottom_to_top { 106 | .info { 107 | @include transform( translateY(100%) ); 108 | } 109 | 110 | a:hover { 111 | .info { 112 | @include transform( translateY(0) ); 113 | } 114 | } 115 | } 116 | 117 | 118 | -------------------------------------------------------------------------------- /client/styles/square/_effect14.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.square.effect14 { 5 | &.colored { 6 | .info { 7 | background: $overlay_colored_fallback; 8 | 9 | h3 { 10 | background: $overlay_colored_dark; 11 | } 12 | } 13 | } 14 | 15 | .img { 16 | opacity: 1; 17 | @include transition( all .35s ease-in-out ); 18 | } 19 | 20 | .info { 21 | background: $overlay_dark_fallback; 22 | visibility: hidden; 23 | opacity: 0; 24 | pointer-events: none; 25 | @include transform( scale(.5) ); 26 | @include transition( all .35s ease .2s); 27 | 28 | h3 { 29 | text-transform: uppercase; 30 | color: #fff; 31 | text-align: center; 32 | font-size: 17px; 33 | padding: 10px; 34 | background: $overlay_dark_dark; 35 | margin: 30px 0 0 0; 36 | } 37 | 38 | p { 39 | font-style: italic; 40 | font-size: 12px; 41 | position: relative; 42 | color: #bbb; 43 | padding: 20px 20px 20px; 44 | text-align: center; 45 | } 46 | } 47 | 48 | a:hover { 49 | .img { 50 | opacity: 0; 51 | pointer-events: none; 52 | @include transform( scale(.5) ); 53 | } 54 | 55 | .info { 56 | visibility: visible; 57 | opacity: 1; 58 | @include transform( scale(1) ); 59 | } 60 | } 61 | } 62 | 63 | // ------------------------- 64 | .ih-item.square.effect14.left_to_right { 65 | .img { 66 | @include transform( translateX(0) rotate(0) ); 67 | } 68 | 69 | a:hover { 70 | .img { 71 | @include transform( translateX(100%) rotate(180deg) ); 72 | } 73 | } 74 | } 75 | 76 | // ------------------------- 77 | .ih-item.square.effect14.right_to_left { 78 | .img { 79 | @include transform( translateX(0) rotate(0) ); 80 | } 81 | 82 | a:hover { 83 | .img { 84 | @include transform( translateX(-100%) rotate(-180deg) ); 85 | } 86 | } 87 | } 88 | 89 | 90 | // ------------------------- 91 | .ih-item.square.effect14.top_to_bottom { 92 | .img { 93 | @include transform( translateY(0) ); 94 | } 95 | 96 | a:hover { 97 | .img { 98 | @include transform( translateY(-100%) ); 99 | } 100 | } 101 | } 102 | 103 | 104 | // ------------------------- 105 | .ih-item.square.effect14.bottom_to_top { 106 | .img { 107 | @include transform( translateY(0) ); 108 | } 109 | 110 | a:hover { 111 | .img { 112 | @include transform( translateY(100%) ); 113 | } 114 | } 115 | } 116 | 117 | -------------------------------------------------------------------------------- /client/styles/square/_effect15.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.square.effect15 { 5 | overflow: hidden; 6 | @include perspective(900px); 7 | 8 | &.colored { 9 | .info { 10 | background: $overlay_colored_fallback; 11 | } 12 | } 13 | 14 | .img { 15 | opacity: 1; 16 | @include transition( all .4s ease-in-out ); 17 | } 18 | 19 | .info { 20 | background: $overlay_dark_fallback; 21 | opacity: 0; 22 | @include transition( all .35s ease-in-out .3s); 23 | 24 | h3 { 25 | text-transform: uppercase; 26 | color: #fff; 27 | text-align: center; 28 | font-size: 17px; 29 | padding: 10px; 30 | background: $overlay_dark_dark; 31 | margin: 30px 0 0 0; 32 | } 33 | 34 | p { 35 | font-style: italic; 36 | font-size: 12px; 37 | position: relative; 38 | color: #bbb; 39 | padding: 20px 20px 20px; 40 | text-align: center; 41 | } 42 | } 43 | 44 | a:hover { 45 | .img { 46 | opacity: 0; 47 | visibility: hidden; 48 | } 49 | 50 | .info { 51 | visibility: visible; 52 | opacity: 1; 53 | } 54 | } 55 | } 56 | 57 | // ------------------------- 58 | .ih-item.square.effect15.left_to_right { 59 | .img { 60 | @include transform( rotateY(0) ); 61 | @include transform-origin( 100% 50% ); 62 | } 63 | 64 | .info { 65 | @include transform( rotateY(90deg) ); 66 | @include transform-origin( 0% 50% ); 67 | } 68 | 69 | a:hover { 70 | .img { 71 | @include transform( rotateY(-90deg) ); 72 | } 73 | 74 | .info { 75 | @include transform( rotateY(0) ); 76 | } 77 | } 78 | } 79 | 80 | 81 | // ------------------------- 82 | .ih-item.square.effect15.right_to_left { 83 | .img { 84 | @include transform( rotateY(0) ); 85 | @include transform-origin( 0% 50% ); 86 | } 87 | 88 | .info { 89 | @include transform( rotateY(-90deg) ); 90 | @include transform-origin( 100% 50% ); 91 | } 92 | 93 | a:hover { 94 | .img { 95 | @include transform( rotateY(90deg) ); 96 | } 97 | 98 | .info { 99 | @include transform( rotateY(0) ); 100 | } 101 | } 102 | } 103 | 104 | // ------------------------- 105 | .ih-item.square.effect15.top_to_bottom { 106 | .img { 107 | @include transform( rotateX(0) ); 108 | @include transform-origin( 50% 100% ); 109 | } 110 | 111 | .info { 112 | @include transform( rotateX(-90deg) ); 113 | @include transform-origin( 50% 0 ); 114 | } 115 | 116 | a:hover { 117 | .img { 118 | @include transform( rotateX(90deg) ); 119 | } 120 | 121 | .info { 122 | @include transform( rotateX(0) ); 123 | } 124 | } 125 | } 126 | 127 | // ------------------------- 128 | .ih-item.square.effect15.bottom_to_top { 129 | .img { 130 | @include transform( rotateX(0) ); 131 | @include transform-origin( 50% 0 ); 132 | } 133 | 134 | .info { 135 | @include transform( rotateX(90deg) ); 136 | @include transform-origin( 50% 100% ); 137 | } 138 | 139 | a:hover { 140 | .img { 141 | @include transform( rotateX(-90deg) ); 142 | } 143 | 144 | .info { 145 | @include transform( rotateX(0) ); 146 | } 147 | } 148 | } -------------------------------------------------------------------------------- /client/styles/square/_effect2.scss: -------------------------------------------------------------------------------- 1 | .ih-item.square.effect2 { 2 | overflow: hidden; 3 | &.colored { 4 | .info { 5 | background: $overlay_colored_fallback; 6 | 7 | h3 { 8 | background: $overlay_colored_dark; 9 | } 10 | } 11 | } 12 | 13 | .img { 14 | opacity: 1; 15 | @include transition( all .5s ease-in-out ); 16 | @include transform( rotate(0deg) scale(1) ); 17 | } 18 | 19 | .info { 20 | background: $overlay_dark_fallback; 21 | visibility: hidden; 22 | @include transition( all .35s .3s ease-in-out ); 23 | 24 | h3 { 25 | text-transform: uppercase; 26 | color: #fff; 27 | text-align: center; 28 | font-size: 17px; 29 | padding: 10px; 30 | background: $overlay_dark_dark; 31 | margin: 30px 0 0 0; 32 | @include transform( translateY(-200px) ); 33 | @include transition( all .35s .6s ease-in-out ); 34 | } 35 | 36 | p { 37 | font-style: italic; 38 | font-size: 12px; 39 | position: relative; 40 | color: #bbb; 41 | padding: 20px 20px 20px; 42 | text-align: center; 43 | @include transform( translateY(-200px) ); 44 | @include transition( all .35s .5s linear ); 45 | } 46 | } 47 | 48 | a:hover { 49 | .img { 50 | @include transform( rotate(720deg) scale(0) ); 51 | opacity: 0; 52 | } 53 | 54 | .info { 55 | visibility: visible; 56 | 57 | h3, 58 | p { 59 | @include transform( translateY(0) ); 60 | } 61 | } 62 | } 63 | } -------------------------------------------------------------------------------- /client/styles/square/_effect3.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.square.effect3 { 5 | overflow: hidden; 6 | 7 | &.colored { 8 | .info { 9 | background: $overlay_colored_fallback; 10 | } 11 | } 12 | 13 | .img { 14 | @include transform( translateY(0) ); 15 | @include transition( all .35s ease-in-out ); 16 | } 17 | 18 | .info { 19 | height: 65px; 20 | background: $overlay_dark_fallback; 21 | opacity: 0; 22 | @include transition( all .35s ease-in-out ); 23 | 24 | h3 { 25 | text-transform: uppercase; 26 | color: #fff; 27 | text-align: center; 28 | font-size: 17px; 29 | padding: 10px 10px 0 4px; 30 | margin: 4px 0 0 0; 31 | } 32 | 33 | p { 34 | font-style: italic; 35 | font-size: 12px; 36 | position: relative; 37 | color: #bbb; 38 | padding: 5px; 39 | text-align: center; 40 | } 41 | } 42 | 43 | a:hover { 44 | .info { 45 | visibility: visible; 46 | opacity: 1; 47 | } 48 | } 49 | } 50 | 51 | // ------------------------- 52 | .ih-item.square.effect3.bottom_to_top { 53 | .info { 54 | top: auto; 55 | @include transform( translateY(100%) ); 56 | } 57 | 58 | a:hover { 59 | .img { 60 | @include transform( translateY(-50px) ); 61 | } 62 | 63 | .info { 64 | @include transform( translateY(0) ); 65 | } 66 | } 67 | } 68 | 69 | // ------------------------- 70 | .ih-item.square.effect3.top_to_bottom { 71 | .info { 72 | bottom: auto; 73 | @include transform( translateY(-100%) ); 74 | } 75 | 76 | a:hover { 77 | .img { 78 | @include transform( translateY(50px) ); 79 | } 80 | 81 | .info { 82 | @include transform( translateY(0) ); 83 | } 84 | } 85 | } -------------------------------------------------------------------------------- /client/styles/square/_effect4.scss: -------------------------------------------------------------------------------- 1 | .ih-item.square.effect4 { 2 | overflow: hidden; 3 | position: relative; 4 | 5 | &.colored { 6 | .info { 7 | background: $overlay_colored_dark; 8 | } 9 | 10 | .mask1, 11 | .mask2 { 12 | background: $overlay_colored_fallback; 13 | background: $overlay_colored; 14 | } 15 | } 16 | 17 | .img { 18 | @include transition( all .35s ease-in-out ); 19 | } 20 | 21 | .mask1, 22 | .mask2 { 23 | position: absolute; 24 | background: $overlay_dark_fallback; 25 | background: $overlay_dark; 26 | height: 361px; 27 | width: 361px; 28 | @include transition( all .35s ease-in-out); 29 | } 30 | 31 | .mask1 { 32 | left: auto; 33 | right: 0; 34 | top: 0; 35 | @include transform( rotate(56.5deg) translateX(-180px) ); 36 | @include transform-origin( 100% 0% ); 37 | } 38 | 39 | .mask2 { 40 | top: auto; 41 | bottom: 0; 42 | left: 0; 43 | @include transform( rotate(56.5deg) translateX(180px) ); 44 | @include transform-origin( 0% 100% ); 45 | } 46 | 47 | .info { 48 | background: $overlay_dark_dark; 49 | height: 0; 50 | visibility: hidden; 51 | width: 361px; 52 | @include transform( rotate(-33.5deg) translate(-112px, 166px) ); 53 | @include transform-origin( 0% 100% ); 54 | @include transition( all .35s ease-in-out .35s); 55 | 56 | 57 | h3 { 58 | text-transform: uppercase; 59 | color: #fff; 60 | text-align: center; 61 | font-size: 17px; 62 | padding: 10px; 63 | background: transparent; 64 | margin-top: 5px; 65 | border-bottom: 1px solid rgba(255, 255, 255, 0.2); 66 | opacity: 0; 67 | @include transition( all .35s ease-in-out .35s); 68 | } 69 | 70 | p { 71 | font-style: italic; 72 | font-size: 12px; 73 | position: relative; 74 | color: #bbb; 75 | padding: 20px 20px 20px; 76 | text-align: center; 77 | opacity: 0; 78 | @include transition( all .35s ease-in-out .35s); 79 | } 80 | } 81 | 82 | a:hover { 83 | .mask1 { 84 | @include transform( rotate(56.5deg) translateX(1px) ); 85 | } 86 | 87 | .mask2 { 88 | @include transform( rotate(56.5deg) translateX(-1px) ); 89 | } 90 | 91 | .info { 92 | width: 300px; 93 | height: 120px; 94 | visibility: visible; 95 | top: 40px; 96 | @include transform( rotate(0deg) translate(0, 0) ); 97 | 98 | h3, 99 | p { 100 | opacity: 1; 101 | } 102 | } 103 | } 104 | } -------------------------------------------------------------------------------- /client/styles/square/_effect5.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.square.effect5 { 5 | &.colored { 6 | .info { 7 | background: $overlay_colored_fallback; 8 | 9 | h3 { 10 | background: $overlay_colored_dark; 11 | } 12 | } 13 | } 14 | 15 | .img { 16 | @include transition( all .35s ease-in-out ); 17 | @include transform( scale(1) ); 18 | } 19 | 20 | .info { 21 | background: $overlay_dark_fallback; 22 | opacity: 0; 23 | @include transition( all .35s ease-in-out ); 24 | 25 | h3 { 26 | text-transform: uppercase; 27 | color: #fff; 28 | text-align: center; 29 | font-size: 17px; 30 | padding: 10px; 31 | background: $overlay_dark_dark; 32 | margin: 30px 0 0 0; 33 | } 34 | 35 | p { 36 | font-style: italic; 37 | font-size: 12px; 38 | position: relative; 39 | color: #bbb; 40 | padding: 20px 20px 20px; 41 | text-align: center; 42 | } 43 | } 44 | 45 | a:hover { 46 | .img { 47 | @include transform( scale(0) ); 48 | @include transition-delay(0); 49 | } 50 | 51 | .info { 52 | visibility: visible; 53 | opacity: 1; 54 | @include transform( scale(1) rotate(0deg) ); 55 | @include transition-delay(.3s); 56 | } 57 | } 58 | } 59 | 60 | // ------------------------- 61 | .ih-item.square.effect5.left_to_right { 62 | .info { 63 | @include transform( scale(0) rotate(-180deg) ); 64 | } 65 | } 66 | 67 | // ------------------------- 68 | .ih-item.square.effect5.right_to_left { 69 | .info { 70 | @include transform( scale(0) rotate(180deg) ); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /client/styles/square/_effect6.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.square.effect6 { 5 | overflow: hidden; 6 | 7 | &.colored { 8 | .info { 9 | background: $overlay_colored_fallback; 10 | background: $overlay_colored; 11 | 12 | h3 { 13 | background: $overlay_colored_dark; 14 | } 15 | } 16 | } 17 | 18 | .img { 19 | @include transition( all .35s ease-in-out ); 20 | @include transform( scale(1) ); 21 | } 22 | 23 | .info { 24 | background: $overlay_dark_fallback; 25 | background: $overlay_dark; 26 | visibility: hidden; 27 | opacity: 0; 28 | @include transition( all .35s ease-in-out ); 29 | 30 | h3 { 31 | text-transform: uppercase; 32 | color: #fff; 33 | text-align: center; 34 | font-size: 17px; 35 | padding: 10px; 36 | background: $overlay_dark_dark; 37 | margin: 30px 0 0 0; 38 | @include transition( all .35s ease-in-out ); 39 | } 40 | 41 | p { 42 | font-style: italic; 43 | font-size: 12px; 44 | position: relative; 45 | color: #bbb; 46 | padding: 20px 20px 20px; 47 | text-align: center; 48 | @include transition( all .35s .1s linear ); 49 | } 50 | } 51 | 52 | a:hover { 53 | .img { 54 | @include transform( scale(1.2) ); 55 | } 56 | 57 | .info { 58 | visibility: visible; 59 | opacity: 1; 60 | } 61 | } 62 | } 63 | 64 | // ------------------------- 65 | .ih-item.square.effect6.from_top_and_bottom { 66 | .info { 67 | h3 { 68 | @include transform( translateY(-100%) ); 69 | } 70 | 71 | p { 72 | @include transform( translateY(100%) ); 73 | } 74 | } 75 | 76 | a:hover { 77 | .info { 78 | h3, 79 | p { 80 | @include transform( translateY(0) ); 81 | } 82 | } 83 | } 84 | } 85 | 86 | // ------------------------- 87 | .ih-item.square.effect6.from_left_and_right { 88 | .info { 89 | h3 { 90 | @include transform( translateX(-100%) ); 91 | } 92 | 93 | p { 94 | @include transform( translateX(100%) ); 95 | } 96 | } 97 | 98 | a:hover { 99 | .info { 100 | h3, 101 | p { 102 | @include transform( translateX(0) ); 103 | } 104 | } 105 | } 106 | } 107 | 108 | // ------------------------- 109 | .ih-item.square.effect6.top_to_bottom { 110 | .info { 111 | h3 { 112 | @include transform( translateY(-100%) ); 113 | } 114 | 115 | p { 116 | @include transform( translateY(-100%) ); 117 | } 118 | } 119 | 120 | a:hover { 121 | .info { 122 | h3, 123 | p { 124 | @include transform( translateY(0) ); 125 | } 126 | } 127 | } 128 | } 129 | 130 | // ------------------------- 131 | .ih-item.square.effect6.bottom_to_top { 132 | .info { 133 | h3 { 134 | @include transform( translateY(100%) ); 135 | } 136 | 137 | p { 138 | @include transform( translateY(100%) ); 139 | } 140 | } 141 | 142 | a:hover { 143 | .info { 144 | h3, 145 | p { 146 | @include transform( translateY(0) ); 147 | } 148 | } 149 | } 150 | } -------------------------------------------------------------------------------- /client/styles/square/_effect7.scss: -------------------------------------------------------------------------------- 1 | .ih-item.square.effect7 { 2 | overflow: hidden; 3 | 4 | &.colored { 5 | .info { 6 | background: $overlay_colored_fallback; 7 | background: $overlay_colored; 8 | 9 | h3 { 10 | background: $overlay_colored_dark; 11 | } 12 | } 13 | } 14 | 15 | .img { 16 | @include transition( all .35s ease-in-out ); 17 | @include transform( scale(1) ); 18 | } 19 | 20 | .info { 21 | background: $overlay_dark_fallback; 22 | background: $overlay_dark; 23 | visibility: hidden; 24 | opacity: 0; 25 | @include transition( all .35s ease-in-out ); 26 | 27 | h3 { 28 | text-transform: uppercase; 29 | color: #fff; 30 | text-align: center; 31 | font-size: 17px; 32 | padding: 10px; 33 | background: $overlay_dark_dark; 34 | margin: 30px 0 0 0; 35 | @include transform( scale(4) ); 36 | @include transition( all .35s .1s ease-in-out ); 37 | } 38 | 39 | p { 40 | font-style: italic; 41 | font-size: 12px; 42 | position: relative; 43 | color: #bbb; 44 | padding: 20px 20px 20px; 45 | text-align: center; 46 | @include transform( scale(5) ); 47 | @include transition( all .35s .3s linear ); 48 | } 49 | } 50 | 51 | a:hover { 52 | .img { 53 | @include transform( scale(1.2) ); 54 | } 55 | 56 | .info { 57 | visibility: visible; 58 | opacity: 1; 59 | 60 | h3, 61 | p { 62 | @include transform( scale(1) ); 63 | } 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /client/styles/square/_effect8.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.square.effect8 { 5 | overflow: hidden; 6 | 7 | &.colored { 8 | .info { 9 | background: $overlay_colored_fallback; 10 | 11 | h3 { 12 | background: $overlay_colored_dark; 13 | } 14 | } 15 | } 16 | 17 | .img { 18 | opacity: 1; 19 | @include transition( all .35s ease-in-out ); 20 | } 21 | 22 | .info { 23 | background: $overlay_dark_fallback; 24 | visibility: hidden; 25 | opacity: 0; 26 | @include transition( all .35s ease-in-out ); 27 | 28 | h3 { 29 | text-transform: uppercase; 30 | color: #fff; 31 | text-align: center; 32 | font-size: 17px; 33 | padding: 10px; 34 | background: $overlay_dark_dark; 35 | margin: 30px 0 0 0; 36 | @include transition( all .35s .1s ease-in-out ); 37 | } 38 | 39 | p { 40 | font-style: italic; 41 | font-size: 12px; 42 | position: relative; 43 | color: #bbb; 44 | padding: 20px 20px 20px; 45 | text-align: center; 46 | @include transition( all .35s .15s linear ); 47 | } 48 | } 49 | 50 | a:hover { 51 | .img { 52 | opacity: 0; 53 | } 54 | 55 | .info { 56 | visibility: visible; 57 | opacity: 1; 58 | 59 | h3, 60 | p { 61 | } 62 | } 63 | } 64 | } 65 | 66 | // ------------------------- 67 | .ih-item.square.effect8.scale_up { 68 | .img { 69 | @include transform( scale(1) ); 70 | } 71 | 72 | .info { 73 | @include transform( scale(0) ); 74 | 75 | h3, 76 | p { 77 | @include transform( scale(0) ); 78 | } 79 | } 80 | 81 | a:hover { 82 | .img { 83 | @include transform( scale(5) ); 84 | } 85 | 86 | .info { 87 | @include transform( scale(1) ); 88 | 89 | h3, 90 | p { 91 | @include transform( scale(1) ); 92 | } 93 | } 94 | } 95 | } 96 | 97 | // ------------------------- 98 | .ih-item.square.effect8.scale_down { 99 | .img { 100 | @include transform( scale(1) ); 101 | } 102 | 103 | .info { 104 | @include transform( scale(5) ); 105 | 106 | h3, 107 | p { 108 | @include transform( scale(5) ); 109 | } 110 | } 111 | 112 | a:hover { 113 | .img { 114 | @include transform( scale(.5) ); 115 | } 116 | 117 | .info { 118 | @include transform( scale(1) ); 119 | 120 | h3, 121 | p { 122 | @include transform( scale(1) ); 123 | } 124 | } 125 | } 126 | } 127 | 128 | -------------------------------------------------------------------------------- /client/styles/square/_effect9.scss: -------------------------------------------------------------------------------- 1 | 2 | // Shared 3 | // ------------------------- 4 | .ih-item.square.effect9 { 5 | @include perspective(900px); 6 | 7 | &.colored { 8 | .info { 9 | .info-back { 10 | background: $overlay_colored_fallback; 11 | } 12 | 13 | h3 { 14 | background: $overlay_colored_dark; 15 | } 16 | } 17 | } 18 | 19 | .img { 20 | position: relative; 21 | z-index: 11; 22 | @include transition( all .5s ease-in-out ); 23 | } 24 | 25 | .info { 26 | z-index: 0; 27 | @include transform-style(preserve-3d); 28 | .info-back { 29 | opacity: 1; 30 | width: 100%; 31 | height: 100%; 32 | padding-top: 30px; 33 | background: $overlay_dark_fallback; 34 | } 35 | 36 | h3 { 37 | text-transform: uppercase; 38 | color: #fff; 39 | text-align: center; 40 | font-size: 17px; 41 | padding: 10px; 42 | background: $overlay_dark_dark; 43 | margin: 0; 44 | } 45 | 46 | p { 47 | font-style: italic; 48 | font-size: 12px; 49 | position: relative; 50 | color: #bbb; 51 | padding: 20px 20px 20px; 52 | text-align: center; 53 | } 54 | } 55 | } 56 | 57 | // ------------------------- 58 | .ih-item.square.effect9.left_to_right { 59 | .img { 60 | @include transform-origin( 100% 50% ); 61 | } 62 | 63 | a:hover { 64 | .img { 65 | @include transform( rotate3d(0,1,0,180deg) ); 66 | } 67 | } 68 | } 69 | 70 | // ------------------------- 71 | .ih-item.square.effect9.right_to_left { 72 | .img { 73 | @include transform-origin( 0% 50% ); 74 | } 75 | 76 | a:hover { 77 | .img { 78 | @include transform( rotate3d(0,1,0,-180deg) ); 79 | } 80 | } 81 | } 82 | 83 | // ------------------------- 84 | .ih-item.square.effect9.top_to_bottom { 85 | .img { 86 | @include transform-origin( 50% 100% ); 87 | } 88 | 89 | a:hover { 90 | .img { 91 | @include transform( rotate3d(1,0,0,-180deg) ); 92 | } 93 | } 94 | } 95 | 96 | // ------------------------- 97 | .ih-item.square.effect9.bottom_to_top { 98 | .img { 99 | @include transform-origin( 50% 0 ); 100 | } 101 | 102 | a:hover { 103 | .img { 104 | @include transform( rotate3d(1,0,0,180deg) ); 105 | } 106 | } 107 | } -------------------------------------------------------------------------------- /client/templates/layout.jade: -------------------------------------------------------------------------------- 1 | doctype 2 | html.no-js.iarouse 3 | head 4 | meta(charset='utf-8') 5 | meta(http-equiv='X-UA-Compatible', content='IE=edge') 6 | title 7 | meta(name='description', content='') 8 | meta(name='viewport', content='width=device-width, initial-scale=1.0') 9 | 10 | // stylesheets 11 | block stylesheets 12 | link(href='http://fonts.googleapis.com/css?family=Lustria|Lato:300,400,700,400italic', rel='stylesheet', type='text/css') 13 | // build:css({.tmp,client}) styles/main.css 14 | link(href="bower_components/bootstrap/dist/css/bootstrap.min.css", rel="stylesheet") 15 | link(href="bower_components/google-code-prettify/src/prettify.css", rel="stylesheet") 16 | link(href="styles/docs.css", rel="stylesheet") 17 | link(href="styles/ihover.css", rel="stylesheet") 18 | link(href="styles/docs-overrides.css", rel="stylesheet") 19 | // endbuild 20 | 21 | body(data-spy="scroll", data-target=".bs-docs-sidebar") 22 | 23 | //if lt IE 8 24 |

you are using an outdated browser, please update!

25 | 26 | block header 27 | | Fork me on GitHub 28 | header.top-header.navbar.navbar-inverse.navbar-fixed-top.bs-docs-nav(role="banner") 29 | .container 30 | .navbar-header 31 | button.navbar-toggle(type="button", data-toggle="collapse", data-target=".bs-navbar-collapse") 32 | span.sr-only Toggle navigation 33 | span.icon-bar 34 | span.icon-bar 35 | span.icon-bar 36 | a.navbar-brand(href="http://iarouse.com/") iArouse 37 | nav.collapse.navbar-collapse.bs-navbar-collapse(role="navigation") 38 | ul.nav.navbar-nav 39 | li.active 40 | a(href="#") Demo 41 | 42 | block bs-header 43 | .header.bs-header#content 44 | .container 45 | h1 iHover 46 | p CSS3 hover effects pack 47 | 48 | 49 | //- Docs container 50 | .container.bs-docs-container 51 | .row 52 | .col-md-3 53 | .bs-sidebar.hidden-print 54 | ul.nav.bs-sidenav 55 | block docs-sidebar 56 | 57 | .col-md-9(role="main") 58 | block content 59 | 60 | 61 | // Footer 62 | block footer 63 | footer.bs-footer 64 | .container.text-center 65 | p Copyright 2013 66 | a(href="http://iarouse.com/") iArouse.com 67 | 68 | 69 | // Scripts 70 | block scripts 71 | // build:js({.tmp,client}) scripts/app.js 72 | script(src="bower_components/jquery/dist/jquery.min.js") 73 | script(src="bower_components/bootstrap/dist/js/bootstrap.min.js") 74 | script(src="bower_components/jquery.smooth-scroll/jquery.smooth-scroll.min.js") 75 | script(src="bower_components/google-code-prettify/src/prettify.js") 76 | script(src="scripts/application.js") 77 | script(src="scripts/main.js") 78 | // endbuild 79 | 80 | -------------------------------------------------------------------------------- /dist/images/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/1.jpg -------------------------------------------------------------------------------- /dist/images/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/2.jpg -------------------------------------------------------------------------------- /dist/images/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/3.jpg -------------------------------------------------------------------------------- /dist/images/assets/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/4.jpg -------------------------------------------------------------------------------- /dist/images/assets/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/5.jpg -------------------------------------------------------------------------------- /dist/images/assets/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/6.jpg -------------------------------------------------------------------------------- /dist/images/assets/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/7.jpg -------------------------------------------------------------------------------- /dist/images/assets/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/8.jpg -------------------------------------------------------------------------------- /dist/images/assets/rect/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/rect/1.jpg -------------------------------------------------------------------------------- /dist/images/assets/rect/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/rect/10.jpg -------------------------------------------------------------------------------- /dist/images/assets/rect/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/rect/2.jpg -------------------------------------------------------------------------------- /dist/images/assets/rect/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/rect/3.jpg -------------------------------------------------------------------------------- /dist/images/assets/rect/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/rect/4.jpg -------------------------------------------------------------------------------- /dist/images/assets/rect/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/rect/5.jpg -------------------------------------------------------------------------------- /dist/images/assets/rect/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/rect/6.jpg -------------------------------------------------------------------------------- /dist/images/assets/rect/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/rect/7.jpg -------------------------------------------------------------------------------- /dist/images/assets/rect/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/rect/8.jpg -------------------------------------------------------------------------------- /dist/images/assets/rect/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/assets/rect/9.jpg -------------------------------------------------------------------------------- /dist/images/bg_header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/dist/images/bg_header.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ihover", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "grunt": "~0.4.2", 6 | "grunt-contrib-copy": "~0.5.0", 7 | "grunt-contrib-concat": "~0.3.0", 8 | "grunt-contrib-coffee": "~0.8.2", 9 | "grunt-contrib-uglify": "~0.3.2", 10 | "grunt-contrib-jshint": "~0.8.0", 11 | "grunt-contrib-cssmin": "~0.7.0", 12 | "grunt-contrib-connect": "~0.6.0", 13 | "grunt-contrib-clean": "~0.5.0", 14 | "grunt-contrib-htmlmin": "~0.1.3", 15 | "grunt-contrib-watch": "~0.5.3", 16 | "grunt-contrib-less": "~0.9.0", 17 | "grunt-usemin": "~2.0.2", 18 | "grunt-open": "~0.2.3", 19 | "grunt-concurrent": "~0.4.3", 20 | "load-grunt-tasks": "~0.3.0", 21 | "time-grunt": "~0.2.8", 22 | "connect-livereload": "~0.3.2", 23 | "grunt-contrib-jade": "~0.9.1", 24 | "grunt-contrib-compass": "~0.7.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /preview/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/preview/preview.png -------------------------------------------------------------------------------- /preview/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gudh/ihover/e7768476c79654e8052758f2cf19acd1bf76f290/preview/thumb.png --------------------------------------------------------------------------------