├── .gitignore ├── Gruntfile.js ├── README.md ├── css ├── _build │ └── main.css ├── animations.scss ├── foundations.scss ├── main.scss ├── mixins.scss ├── normalize.scss └── variables.scss ├── images ├── avatar.png ├── icons │ ├── icon-attach.svg │ ├── icon-delete.svg │ ├── icon-dislike.svg │ ├── icon-like.svg │ ├── icon-love.svg │ ├── icon-reply-all.svg │ ├── icon-reply.svg │ ├── icon-send.svg │ └── icon-spam.svg └── logo.svg ├── index.html ├── js ├── _build │ ├── main.js │ └── main.min.js ├── libs │ └── modernizr.js └── main.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore sass-cache files. 2 | *.sass-cache* 3 | node_modules -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | // 1. All configuration goes here 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON('package.json'), 6 | 7 | // 2. Configuration for concatinating files goes here. 8 | concat: { 9 | options: { 10 | separator: ';', 11 | }, 12 | dist: { 13 | src: [ 14 | 'js/libs/*.js', // All JS in the libs folder 15 | 'js/main.js' // This specific file 16 | ], 17 | dest: 'js/_build/main.js', 18 | }, 19 | }, 20 | 21 | uglify: { 22 | build: { 23 | src: 'js/_build/main.js', 24 | dest: 'js/_build/main.min.js' 25 | } 26 | }, 27 | 28 | imagemin: { 29 | dynamic: { 30 | files: [{ 31 | expand: true, 32 | cwd: 'images/', 33 | src: ['**/*.{png,jpg,gif}'], 34 | dest: 'images/build/' 35 | }] 36 | } 37 | }, 38 | 39 | sass: { 40 | dist: { 41 | options: { 42 | style: 'compressed' 43 | }, 44 | files: { 45 | 'css/_build/main.css': 'css/main.scss' 46 | } 47 | } 48 | }, 49 | 50 | watch: { 51 | options: { 52 | livereload: true, 53 | }, 54 | scripts: { 55 | files: ['js/*.js'], 56 | tasks: ['concat', 'uglify'], 57 | options: { 58 | spawn: false, 59 | }, 60 | }, 61 | css: { 62 | files: ['css/*.scss'], 63 | tasks: ['sass'], 64 | options: { 65 | spawn: false, 66 | } 67 | }, 68 | html: { 69 | files: ['index.html'], 70 | } 71 | }, 72 | 73 | connect: { 74 | // keepalive: true, 75 | server: { 76 | options: { 77 | port: 8000, 78 | base: './' 79 | } 80 | } 81 | } 82 | 83 | }); 84 | 85 | // 3. Where we tell Grunt we plan to use this plug-in. 86 | grunt.loadNpmTasks('grunt-contrib-concat'); 87 | grunt.loadNpmTasks('grunt-contrib-uglify'); 88 | grunt.loadNpmTasks('grunt-contrib-imagemin'); 89 | grunt.loadNpmTasks('grunt-contrib-sass'); 90 | grunt.loadNpmTasks('grunt-contrib-watch'); 91 | grunt.loadNpmTasks('grunt-contrib-connect'); 92 | 93 | // 4. Where we tell Grunt what to do when we type "grunt" into the terminal. 94 | grunt.registerTask('default', ['concat', 'uglify', 'imagemin', 'sass', 'watch']); 95 | 96 | grunt.registerTask('dev', ['connect', 'watch']); 97 | 98 | }; 99 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # UI Feedbacks 2 | 3 | A bunch of feedback ideas for your buttons. This demo does not rely on any particular coding technique, instead it just serves as an inspiration to give your interfaces some more dynamism. I hope you'll enjoy it! 4 | 5 | --- 6 | 7 | **Demo at: [creativespooks.com/ui-feedbacks](http://creativespooks.com/ui-feedbacks)** 8 | 9 | --- 10 | 11 | **Note:** more is coming. Suggestions are welcomed! 12 | 13 | 14 | ##Browser support 15 | 16 | I still didn't have the chance to test it on IE* nor IE* Mobile or older versions of Safari. I tested Chrome for Android and Safari Mobile (on the iOS Simulator). Both seems to work fine. 17 | 18 | | Chrome | Firefox | IE | Safari | 19 | |:-------|:--------|:---------|:-------| 20 | | 33 | 27 | 9-11 (?) | 7 | 21 | 22 | 23 | ## Known issues 24 | 25 | * Safari 7 (at least on Desktop) has a **terrible** upscaling of SVGs. Not sure if I can do anything for this issue. 26 | * Firefox seems to have some problems in transitioning paths inside inline SVGs. I'm playing around the code to make it work better. Plus, I get some artifacts in the rendering. I fear I won't be able to fix them. 27 | * ~~`previousElementSibling` is not supported by Safari. That's why the last section doesn't work. More infos here: [ChildNode.previousElementSibling](https://developer.mozilla.org/en-US/docs/Web/API/Childnode.previousElementSibling). Going to fix it as soon as possible!~~ **Update**: this seems to be fixed now. 28 | * ~~On touch devices (I could test just Chrome on Android), these feedbacks tend to remain in a "focused" state. I'm investigating on this, but shouldn't be a big problem.~~ **Update**: this should be fixed now. 29 | -------------------------------------------------------------------------------- /css/_build/main.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.menu:before,.appbar:before,.menu-group--left:before,.menu-group--right:before,.appbar-group:before,.menu-group:before,.wrapper:before,.header:before,.section:before,.menu:after,.appbar:after,.menu-group--left:after,.menu-group--right:after,.appbar-group:after,.menu-group:after,.wrapper:after,.header:after,.section:after{content:" ";display:table}.menu:after,.appbar:after,.menu-group--left:after,.menu-group--right:after,.appbar-group:after,.menu-group:after,.wrapper:after,.header:after,.section:after{clear:both}.menu,.appbar{text-align:center}.menu-group--left,.menu-group--right,.appbar-group,.menu-group{list-style:none;margin:0;padding:0}.menu-group--left{float:left}.menu-group--right{float:right}.appbar-group{display:inline-block}.menu-item,.appbar-item,.appbar-item-divider{display:block;float:left;margin:0;padding:0}.menu-item-content,.appbar-item-content{display:block}@-webkit-keyframes FXFlashSmall{50%{opacity:0.1}}@keyframes FXFlashSmall{50%{opacity:0.1}}@-webkit-keyframes FXRotate{100%{-webkit-transform:rotateZ(359deg)}}@keyframes FXRotate{100%{transform:rotateZ(359deg)}}@-webkit-keyframes FXLoader{0%{border-radius:25%}50%{-webkit-transform:rotateZ(44deg)}100%{opacity:0.5}}@keyframes FXLoader{0%{border-radius:25%}50%{transform:rotateZ(44deg)}100%{opacity:0.5}}.FXBounce{pointer-events:none;-webkit-animation:FXBounce 0.25s;animation:FXBounce 0.25s}@-webkit-keyframes FXBounce{50%{-webkit-transform:scale3d(0.75, 0.75, 0.75)}}@keyframes FXBounce{50%{transform:scale3d(0.75, 0.75, 0.75)}}@-webkit-keyframes FXProgress{0%{width:0%}100%{width:100%}}@keyframes FXProgress{0%{width:0%}100%{width:100%}}/*! github.com/nobilelucifero/tinyrn.css */*,*:after,*:before{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}body{font-family:"Roboto", "Helvetica Neue", Arial, sans-serif;font-weight:300;color:#333}h1,h2,h3{font-weight:300}a{text-decoration:none;color:inherit}p a{border-bottom:1px dotted}h1{margin-bottom:0;color:#2d9fc5}h1{font-size:2rem}h2{font-size:1.5rem;color:#aaa;margin-bottom:2.5rem}h3{margin-top:0;font-size:1.5rem}h4{margin:24px auto;margin:1.5rem auto}h4,p{font-size:18px;font-size:1.125rem}.js-feedback:focus{outline:0}.wrapper{margin:0 auto;max-width:45rem;padding:0 1.5rem}@media only screen and (min-width: 801px){.wrapper{padding:0 2.5rem}}.header{padding:2.5rem 0;text-align:center}.section{padding:2.5rem 0 2.5rem;text-align:center;background-color:#17c3e5}.section,.section h1,.section h2,.section h3,.section p{color:#fff}.section:nth-child(even){background-color:#15afce}.menu{position:relative;top:-1.5rem}.menu-group{margin:0}.logo-website{margin-top:0.25rem;margin-right:0.5em;padding-right:0.75em;font-size:0.875rem;border-right:1px solid #eee;border-bottom:0}.logo-website img{display:block;width:20px;height:auto}.author-badge{display:inline-block;margin-left:0.25em;line-height:1.875rem;font-size:0.875rem}.author-avatar{display:inline-block;position:relative;vertical-align:middle;overflow:hidden;margin-right:0.25em;width:1.875rem;height:1.875rem;border-radius:100%;box-shadow:0 0 0 4px rgba(45,159,197,0)}.author-avatar--media{display:block;width:100%;height:auto}.author-label{display:none}@media only screen and (min-width: 361px){.author-label{display:inline-block}}.author-sreenname{font-weight:500;border:1px dotted #fff;-webkit-transition:all .1s;transition:all .1s}.author-badge:hover .author-sreenname{border-bottom:1px dotted #333}.btn-source{display:inline-block;position:relative;top:-1px;line-height:1.8125rem;padding:0 0.75rem 0.0625rem;font-size:0.875rem;border:1px solid #ccc;border-radius:17px;font-weight:500;-webkit-transition:all .1s;transition:all .1s}.btn-source:after{content:'\203A';display:inline-block;position:relative;top:-0.0625rem;margin-left:0.5em}.no-touch .btn-source:hover:after{-webkit-animation:FXFlashSmall 0.5s 0.25s;animation:FXFlashSmall 0.5s 0.25s}.no-touch .btn-source:hover{border-color:#ddd;color:#2d9fc5}.btn-source--footer{margin-top:0.5rem;border-color:rgba(255,255,255,0.5)}.no-touch .btn-source--footer:hover{color:#fff;border-color:#fff}.logo{position:relative;padding:2.5rem 0}.logo:before,.logo:after{content:"";display:block;margin:0 auto;width:100%;max-width:5rem;min-width:2.5rem;height:1px;position:relative;background-color:rgba(0,0,0,0.1)}.logo:before{top:-0.5rem}.logo:after{bottom:-0.75rem}.appbar{margin-left:1.5rem;margin-right:1.5rem;margin-bottom:1.5rem}@media only screen and (min-width: 361px){.appbar{margin-left:2.5rem;margin-right:2.5rem}}.appbar--miniapp{display:inline-block;padding-top:0.375rem;background-color:#fff;color:#333;border-radius:2px;box-shadow:0 2px 0 rgba(0,0,0,0.15)}.appbar--miniapp .appbar-item-divider{background-color:rgba(0,0,0,0.25)}.appbar-group{text-align:center}.appbar-item,.appbar-item-divider{position:relative;margin:0 0.25rem;white-space:nowrap}.appbar-item-divider{background-color:rgba(255,255,255,0.5);width:1px;margin:0.375rem 0.25rem;height:1.75rem}.appbar-item-content{display:inline-block;min-width:2.5rem;height:2.5rem;line-height:2.25rem}.appbar-item-content.has--label-inline{padding:0 0.5625rem}.appbar-item-icon{display:inline-block;vertical-align:middle;width:1.375rem;height:1.375rem;line-height:1.375rem}.appbar-item-label{position:relative;display:block;width:2.5rem;height:0.75rem;line-height:0.75rem;font-size:0.625rem;font-weight:500;opacity:0;transition:all .25s}.no-touch .appbar--hovers-two .appbar-item:hover .appbar-item-label{opacity:1;-webkit-transform:translateY(-10%);transform:translateY(-10%)}.appbar-item-label--inline{display:inline-block;line-height:0.75rem;font-size:0.875rem;font-weight:500;padding-left:0.25rem}.appbar--hovers-one .appbar-item{-webkit-transition:all .5s ease-out;transition:all .5s ease-out}.no-touch .appbar--hovers-one .appbar-item:hover{-webkit-transform:scale3d(1.5, 1.5, 1.5);transform:scale3d(1.5, 1.5, 1.5);-webkit-transition:all .1s;transition:all .1s}.appbar--hovers-two .appbar-item{transition:all .25s ease-out}.no-touch .appbar--hovers-two .appbar-item:hover{-webkit-transform:translateY(-10%);transform:translateY(-10%)}.appbar-item-overlay{position:absolute;z-index:-1;top:0;width:2.5rem;height:2.5rem;line-height:2.5rem;opacity:0;-webkit-transition:all 0.25s;transition:all 0.25s;-webkit-transform:translateY(-12.5%);transform:translateY(-12.5%)}.appbar-item-overlay.is--active{z-index:1;opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.appbar-item-overlay.is--active+.appbar-item-content{z-index:1;opacity:0.35;-webkit-transition:opacity 0.25s;transition:opacity 0.25s}.toggle--theme-one{transition:all 0.25s}.toggle--theme-one.is--active{background-color:rgba(0,0,0,0.25);border-radius:4px;transition-delay:0.125s}.toggle--theme-two .heart-outline{fill:#333;opacity:1;-webkit-transition:all 0.25s 0.25s, fill 0.125s;transition:all 0.25s 0.25s, fill 0.125s}.no-touch .toggle--theme-two:hover .heart-outline{fill:#e9395f}.toggle--theme-two.is--active .heart-outline{opacity:0}.toggle--theme-two .heart-full{fill:#e9395f;opacity:0;-webkit-transform:scale3d(0.5, 0.5, 0.5);transform:scale3d(0.5, 0.5, 0.5);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:all 0.25s 0.25s;transition:all 0.25s 0.25s}.toggle--theme-two.is--active .heart-full{opacity:1;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}.button-like path,.button-dislike path{-webkit-transition:fill 0.125s;transition:fill 0.125s}.button-like .appbar-item-icon,.button-dislike .appbar-item-icon{-webkit-transition:all 0.125s;transition:all 0.125s}.button-like .like-outline{fill:#333}.no-touch .button-like:hover .appbar-item-icon{-webkit-transform:rotateZ(10deg);transform:rotateZ(10deg)}.no-touch .button-like:hover .like-outline,.button-like.is--active .like-outline{fill:#7eaa04}.button-dislike .dislike-outline{fill:#333}.no-touch .button-dislike:hover .appbar-item-icon{-webkit-transform:rotateZ(-10deg);transform:rotateZ(-10deg)}.no-touch .button-dislike:hover .dislike-outline,.button-dislike.is--active .dislike-outline{fill:#aa0420}.progessbar{display:inline-block;position:relative;top:-1px;width:100%;height:0.625rem;line-height:0.5rem;border:1px solid rgba(0,0,0,0.5);border-radius:0.625rem;overflow:hidden}.progessbar-value{position:absolute;z-index:-1;width:25%;height:100%;background-color:rgba(0,0,0,0.5)}.appbar-item-overlay.is--active .progessbar-value{-webkit-animation:FXProgress 1s ease-out forwards;animation:FXProgress 1s ease-out forwards}.loader{display:inline-block;position:relative;vertical-align:middle;top:-0.125rem;width:0.75rem;height:0.75rem;line-height:0.5rem;border-radius:100%}.loader .frame-01,.loader .frame-02,.loader .frame-03,.loader .frame-04{position:absolute;width:100%;height:100%;border-radius:100%;background-color:rgba(0,0,0,0.5);-webkit-animation:FXLoader 4s infinite;animation:FXLoader 4s infinite}.loader .frame-01{top:-0.5rem;left:-0.5rem;-webkit-animation-delay:4s;animation-delay:4s}.loader .frame-02{top:-0.5rem;right:-0.5rem;-webkit-animation-delay:1s;animation-delay:1s}.loader .frame-03{bottom:-0.5rem;right:-0.5rem;-webkit-animation-delay:2s;animation-delay:2s}.loader .frame-04{bottom:-0.5rem;left:-0.5rem;-webkit-animation-delay:3s;animation-delay:3s}.spinner{display:inline-block;position:relative;vertical-align:middle;top:-1px;width:1.25rem;height:1.25rem;line-height:1.125rem;border:1px solid rgba(0,0,0,0.5);border-radius:0.625rem;overflow:hidden;-webkit-animation:FXRotate 2s linear infinite;animation:FXRotate 2s linear infinite}.spinner:after{content:'';position:absolute;top:0;left:0;display:block;width:10px;height:10px;background-color:rgba(0,0,0,0.5)} 2 | -------------------------------------------------------------------------------- /css/animations.scss: -------------------------------------------------------------------------------- 1 | // FXFlashSmall animation 2 | @-webkit-keyframes FXFlashSmall { 3 | 50% { 4 | opacity: 0.1; 5 | } 6 | } 7 | @keyframes FXFlashSmall { 8 | 50% { 9 | opacity: 0.1; 10 | } 11 | } 12 | 13 | // FXRotate animation 14 | @-webkit-keyframes FXRotate { 15 | 100% { 16 | -webkit-transform: rotateZ(359deg); 17 | } 18 | } 19 | @keyframes FXRotate { 20 | 100% { 21 | transform: rotateZ(359deg); 22 | } 23 | } 24 | 25 | 26 | // FXLoader animation 27 | @-webkit-keyframes FXLoader { 28 | 0% { 29 | border-radius: 25%; 30 | } 31 | 50% { 32 | -webkit-transform: rotateZ(44deg); 33 | } 34 | 100% { 35 | opacity: 0.5; 36 | } 37 | } 38 | @keyframes FXLoader { 39 | 0% { 40 | border-radius: 25%; 41 | } 42 | 50% { 43 | transform: rotateZ(44deg); 44 | } 45 | 100% { 46 | opacity: 0.5; 47 | } 48 | } 49 | 50 | // FXBounce triggering class 51 | .FXBounce { 52 | pointer-events: none; 53 | -webkit-animation: FXBounce 0.25s; 54 | animation: FXBounce 0.25s; 55 | } 56 | 57 | // FXBounce animation 58 | @-webkit-keyframes FXBounce { 59 | 50% { -webkit-transform: scale3d(0.75, 0.75, 0.75) } 60 | } 61 | @keyframes FXBounce { 62 | 50% { transform: scale3d(0.75, 0.75, 0.75) } 63 | } 64 | 65 | @-webkit-keyframes FXProgress { 66 | 0% { width: 0% } 67 | 100% { width: 100% } 68 | } 69 | @keyframes FXProgress { 70 | 0% { width: 0% } 71 | 100% { width: 100% } 72 | } 73 | 74 | -------------------------------------------------------------------------------- /css/foundations.scss: -------------------------------------------------------------------------------- 1 | // Toolbar 2 | %toolbar { 3 | @extend %clearfix; 4 | text-align: center; 5 | } 6 | 7 | // Toolbar Group 8 | %toolbar-group { 9 | @extend %clearfix; 10 | list-style: none; 11 | margin: 0; 12 | padding: 0; 13 | } 14 | %toolbar-group--left { 15 | @extend %toolbar-group; 16 | float: left; 17 | } 18 | %toolbar-group--right { 19 | @extend %toolbar-group; 20 | float: right; 21 | } 22 | %toolbar-group--center { 23 | @extend %toolbar-group; 24 | display: inline-block; 25 | } 26 | 27 | // Toolbar Item 28 | %toolbar-item { 29 | display: block; 30 | float: left; 31 | margin: 0; 32 | padding: 0; 33 | } 34 | 35 | // Toolbar Item Content 36 | %toolbar-item-content { 37 | display: block; 38 | } 39 | -------------------------------------------------------------------------------- /css/main.scss: -------------------------------------------------------------------------------- 1 | // Normalize 2 | @import "normalize.scss"; 3 | // Mixins 4 | @import "mixins.scss"; 5 | // Variables 6 | @import "variables.scss"; 7 | // Foundation elements 8 | @import "foundations.scss"; 9 | // Animations 10 | @import "animations.scss"; 11 | 12 | /*! github.com/nobilelucifero/tinyrn.css */ 13 | *, *:after, *:before { 14 | text-rendering: optimizeLegibility; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | -webkit-box-sizing: border-box; 18 | -moz-box-sizing: border-box; 19 | box-sizing: border-box; 20 | } 21 | 22 | .hidden { 23 | position: absolute !important; 24 | height: 1px; width: 1px; 25 | overflow: hidden; 26 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 27 | clip: rect(1px, 1px, 1px, 1px); 28 | } 29 | 30 | body { 31 | font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; 32 | font-weight: 300; 33 | color: $textCopy; 34 | } 35 | 36 | h1, h2, h3 { 37 | font-weight: 300; 38 | } 39 | 40 | a { 41 | text-decoration: none; 42 | color: inherit; 43 | p & { 44 | border-bottom: 1px dotted; 45 | } 46 | } 47 | 48 | h1 { 49 | margin-bottom: 0; 50 | color: $brand-color; 51 | } 52 | 53 | h1 { 54 | font-size: 2rem; 55 | } 56 | 57 | h2 { 58 | font-size: 1.5rem; 59 | color: #aaa; 60 | margin-bottom: 2.5rem; 61 | } 62 | 63 | h3 { 64 | margin-top: 0; 65 | font-size: 1.5rem; 66 | } 67 | 68 | h4 { 69 | margin: 24px auto; 70 | margin: 1.5rem auto; 71 | } 72 | h4, p { 73 | font-size: 18px; 74 | font-size: 1.125rem; 75 | } 76 | 77 | .js-feedback:focus { 78 | outline: 0; 79 | } 80 | 81 | .wrapper { 82 | @extend %clearfix; 83 | margin: 0 auto; 84 | max-width: 45rem; 85 | padding: 0 1.5rem; 86 | 87 | // @media only screen and (min-width: 361px) { 88 | @media only screen and (min-width: 801px) { 89 | padding: 0 2.5rem; 90 | } 91 | } 92 | 93 | .header { 94 | @extend %clearfix; 95 | padding: 2.5rem 0; 96 | text-align: center; 97 | } 98 | 99 | .section { 100 | @extend %clearfix; 101 | padding: 2.5rem 0 2.5rem; 102 | text-align: center; 103 | background-color: $turquoise; 104 | 105 | // @media only screen and (min-width: 801px) { 106 | // float: left; 107 | // width: 50%; 108 | // } 109 | 110 | &, & h1, & h2, & h3, & p { 111 | color: $white; 112 | } 113 | } 114 | .section:nth-child(even) { 115 | background-color: $darkTurquoise; 116 | } 117 | .menu { 118 | @extend %toolbar; 119 | position: relative; 120 | top: -1.5rem; 121 | } 122 | .menu-group { 123 | @extend %toolbar-group; 124 | margin: 0; 125 | } 126 | .menu-group--left { 127 | @extend %toolbar-group--left; 128 | } 129 | .menu-group--right { 130 | @extend %toolbar-group--right; 131 | } 132 | .menu-item { 133 | @extend %toolbar-item; 134 | } 135 | .menu-item-content { 136 | @extend %toolbar-item-content; 137 | } 138 | .logo-website { 139 | margin-top: 0.25rem; 140 | margin-right: 0.5em; 141 | padding-right: 0.75em; 142 | font-size: 0.875rem; 143 | border-right: 1px solid #eee; 144 | border-bottom: 0; 145 | } 146 | .logo-website img { 147 | display: block; 148 | width: 20px; 149 | height: auto; 150 | } 151 | .author-badge { 152 | display: inline-block; 153 | margin-left: 0.25em; 154 | line-height: 1.875rem; 155 | font-size: 0.875rem; 156 | } 157 | .author-avatar { 158 | display: inline-block; 159 | position: relative; 160 | vertical-align: middle; 161 | overflow: hidden; 162 | margin-right: 0.25em; 163 | width: 1.875rem; 164 | height: 1.875rem; 165 | border-radius: 100%; 166 | box-shadow: 0 0 0 4px rgba($brand-color, 0); 167 | } 168 | .author-avatar--media { 169 | display: block; 170 | width: 100%; 171 | height: auto; 172 | } 173 | 174 | .author-label { 175 | display: none; 176 | @media only screen and (min-width: 361px) { 177 | display: inline-block; 178 | } 179 | } 180 | 181 | .author-sreenname { 182 | font-weight: 500; 183 | border: 1px dotted $textCopyInv; 184 | -webkit-transition: all .1s; 185 | transition: all .1s; 186 | 187 | .author-badge:hover & { 188 | border-bottom: 1px dotted $textCopy; 189 | } 190 | } 191 | .btn-source { 192 | display: inline-block; 193 | position: relative; 194 | top: -1px; 195 | line-height: 1.8125rem; 196 | padding: 0 0.75rem 0.0625rem; 197 | font-size: 0.875rem; 198 | border: 1px solid #ccc; 199 | border-radius: 17px; 200 | font-weight: 500; 201 | -webkit-transition: all .1s; 202 | transition: all .1s; 203 | 204 | &:after { 205 | content: '\203A'; 206 | display: inline-block; 207 | position: relative; 208 | top: -0.0625rem; 209 | margin-left: 0.5em; 210 | } 211 | .no-touch &:hover:after { 212 | -webkit-animation: FXFlashSmall 0.5s 0.25s; 213 | animation: FXFlashSmall 0.5s 0.25s; 214 | } 215 | .no-touch &:hover { 216 | border-color: #ddd; 217 | color: $brand-color; 218 | } 219 | } 220 | .btn-source--footer { 221 | margin-top: 0.5rem; 222 | border-color: rgba($white, 0.50); 223 | 224 | .no-touch &:hover { 225 | color: $white; 226 | border-color: rgba($white, 1); 227 | } 228 | } 229 | 230 | .logo { 231 | position: relative; 232 | padding: 2.5rem 0; 233 | 234 | &:before, &:after { 235 | content: ""; 236 | display: block; 237 | margin: 0 auto; 238 | width: 100%; 239 | max-width: 5rem; 240 | min-width: 2.5rem; 241 | height: 1px; 242 | position: relative; 243 | background-color: rgba(0, 0, 0, 0.10); 244 | } 245 | &:before { 246 | top: -0.5rem; 247 | } 248 | &:after { 249 | bottom: -0.75rem; 250 | } 251 | } 252 | 253 | .appbar { 254 | @extend %toolbar; 255 | margin-left: 1.5rem; 256 | margin-right: 1.5rem; 257 | margin-bottom: 1.5rem; 258 | 259 | @media only screen and (min-width: 361px) { 260 | margin-left: 2.5rem; 261 | margin-right: 2.5rem; 262 | } 263 | } 264 | .appbar--miniapp { 265 | display: inline-block; 266 | padding-top: 0.375rem; 267 | background-color: #fff; 268 | color: $textCopy; 269 | border-radius: 2px; 270 | box-shadow: 0 2px 0 rgba($black, 0.15); 271 | 272 | .appbar-item-divider { 273 | background-color: rgba($black, 0.25); 274 | } 275 | } 276 | .appbar-group { 277 | @extend %toolbar-group; 278 | @extend %toolbar-group--center; 279 | text-align: center; 280 | } 281 | .appbar-item, 282 | .appbar-item-divider { 283 | @extend %toolbar-item; 284 | position: relative; 285 | margin: 0 0.25rem; 286 | white-space: nowrap; 287 | } 288 | .appbar-item-divider { 289 | background-color: rgba($white, 0.5); 290 | width: 1px; 291 | margin: 0.375rem 0.25rem; 292 | height: 1.75rem; 293 | } 294 | .appbar-item-content { 295 | @extend %toolbar-item-content; 296 | display: inline-block; 297 | min-width: 2.5rem; 298 | height: 2.5rem; 299 | line-height: 2.25rem; 300 | 301 | &.has--label-inline { 302 | padding: 0 0.5625rem; 303 | } 304 | } 305 | .appbar-item-icon { 306 | display: inline-block; 307 | vertical-align: middle; 308 | width: 1.375rem; 309 | height: 1.375rem; 310 | line-height: 1.375rem; 311 | } 312 | .appbar-item-label { 313 | position: relative; 314 | display: block; 315 | width: 2.5rem; 316 | height: 0.75rem; 317 | line-height: 0.75rem; 318 | font-size: 0.625rem; 319 | font-weight: 500; 320 | opacity: 0; 321 | transition: all .25s; 322 | 323 | .no-touch .appbar--hovers-two .appbar-item:hover & { 324 | opacity: 1; 325 | -webkit-transform: translateY(-10%); 326 | transform: translateY(-10%); 327 | } 328 | } 329 | .appbar-item-label--inline { 330 | display: inline-block; 331 | line-height: 0.75rem; 332 | font-size: 0.875rem; 333 | font-weight: 500; 334 | padding-left: 0.25rem; 335 | } 336 | 337 | .appbar--hovers-one .appbar-item { 338 | -webkit-transition: all .5s ease-out; 339 | transition: all .5s ease-out; 340 | } 341 | .no-touch .appbar--hovers-one .appbar-item:hover { 342 | -webkit-transform: scale3d(1.5, 1.5, 1.5); 343 | transform: scale3d(1.5, 1.5, 1.5); 344 | -webkit-transition: all .1s; 345 | transition: all .1s; 346 | } 347 | .appbar--hovers-two .appbar-item { 348 | transition: all .25s ease-out; 349 | } 350 | .no-touch .appbar--hovers-two .appbar-item:hover { 351 | -webkit-transform: translateY(-10%); 352 | transform: translateY(-10%); 353 | } 354 | 355 | .appbar-item-overlay { 356 | position: absolute; 357 | z-index: -1; 358 | top: 0; 359 | width: 2.5rem; 360 | height: 2.5rem; 361 | line-height: 2.5rem; 362 | opacity: 0; 363 | -webkit-transition: all 0.25s; 364 | transition: all 0.25s; 365 | -webkit-transform: translateY(-12.5%); 366 | transform: translateY(-12.5%); 367 | } 368 | .appbar-item-overlay.is--active { 369 | z-index: 1; 370 | opacity: 1; 371 | -webkit-transform: translateY(0); 372 | transform: translateY(0); 373 | } 374 | .appbar-item-overlay.is--active + .appbar-item-content { 375 | z-index: 1; 376 | opacity: 0.35; 377 | -webkit-transition: opacity 0.25s; 378 | transition: opacity 0.25s; 379 | } 380 | .toggle--theme-one { 381 | transition: all 0.25s; 382 | &.is--active { 383 | background-color: rgba($black, 0.25); 384 | border-radius: 4px; 385 | transition-delay: 0.125s; 386 | } 387 | } 388 | 389 | // love icon 390 | .toggle--theme-two .heart-outline { 391 | fill: $textCopy; 392 | opacity: 1; 393 | -webkit-transition: all 0.25s 0.25s, fill 0.125s; 394 | transition: all 0.25s 0.25s, fill 0.125s; 395 | } 396 | .no-touch .toggle--theme-two:hover .heart-outline { 397 | fill: #e9395f; 398 | } 399 | .toggle--theme-two.is--active .heart-outline { 400 | opacity: 0; 401 | } 402 | .toggle--theme-two .heart-full { 403 | fill: #e9395f; 404 | opacity: 0; 405 | -webkit-transform: scale3d(0.5, 0.5, 0.5); 406 | transform: scale3d(0.5, 0.5, 0.5); 407 | -webkit-transform-origin: 50% 50%; 408 | transform-origin: 50% 50%; 409 | -webkit-transition: all 0.25s 0.25s; 410 | transition: all 0.25s 0.25s; 411 | } 412 | .toggle--theme-two.is--active .heart-full { 413 | opacity: 1; 414 | -webkit-transform: scale3d(1, 1, 1); 415 | transform: scale3d(1, 1, 1); 416 | } 417 | 418 | .button-like path, 419 | .button-dislike path { 420 | -webkit-transition: fill 0.125s; 421 | transition: fill 0.125s; 422 | } 423 | .button-like .appbar-item-icon, 424 | .button-dislike .appbar-item-icon { 425 | -webkit-transition: all 0.125s; 426 | transition: all 0.125s; 427 | } 428 | 429 | // like icon 430 | .button-like .like-outline { 431 | fill: $textCopy; 432 | } 433 | .no-touch .button-like:hover .appbar-item-icon { 434 | -webkit-transform: rotateZ(10deg); 435 | transform: rotateZ(10deg); 436 | } 437 | .no-touch .button-like:hover .like-outline, 438 | .button-like.is--active .like-outline { 439 | fill: #7eaa04; 440 | } 441 | 442 | 443 | // dislike icon 444 | .button-dislike .dislike-outline { 445 | fill: $textCopy; 446 | } 447 | .no-touch .button-dislike:hover .appbar-item-icon { 448 | -webkit-transform: rotateZ(-10deg); 449 | transform: rotateZ(-10deg); 450 | } 451 | .no-touch .button-dislike:hover .dislike-outline, 452 | .button-dislike.is--active .dislike-outline { 453 | fill: #aa0420; 454 | } 455 | 456 | 457 | .progessbar { 458 | display: inline-block; 459 | position: relative; 460 | top: -1px; 461 | width: 100%; 462 | height: 0.625rem; 463 | line-height: 0.5rem; 464 | border: 1px solid rgba($black, 0.50); 465 | border-radius: 0.625rem; 466 | overflow: hidden; 467 | } 468 | .progessbar-value { 469 | position: absolute; 470 | z-index: -1; 471 | width: 25%; 472 | height: 100%; 473 | background-color: rgba($black, 0.5); 474 | 475 | .appbar-item-overlay.is--active & { 476 | -webkit-animation: FXProgress 1s ease-out forwards; 477 | animation: FXProgress 1s ease-out forwards; 478 | } 479 | } 480 | 481 | .loader { 482 | display: inline-block; 483 | position: relative; 484 | vertical-align: middle; 485 | top: -0.125rem; 486 | width: 0.75rem; 487 | height: 0.75rem; 488 | line-height: 0.5rem; 489 | border-radius: 100%; 490 | } 491 | .loader .frame-01, 492 | .loader .frame-02, 493 | .loader .frame-03, 494 | .loader .frame-04 { 495 | position: absolute; 496 | width: 100%; 497 | height: 100%; 498 | border-radius: 100%; 499 | background-color: rgba($black, 0.50); 500 | -webkit-animation: FXLoader 4s infinite; 501 | animation: FXLoader 4s infinite; 502 | } 503 | 504 | .loader .frame-01 { 505 | top: -0.5rem; 506 | left: -0.5rem; 507 | -webkit-animation-delay: 4s; 508 | animation-delay: 4s; 509 | } 510 | .loader .frame-02 { 511 | top: -0.5rem; 512 | right: -0.5rem; 513 | -webkit-animation-delay: 1s; 514 | animation-delay: 1s; 515 | } 516 | .loader .frame-03 { 517 | bottom: -0.5rem; 518 | right: -0.5rem; 519 | -webkit-animation-delay: 2s; 520 | animation-delay: 2s; 521 | } 522 | .loader .frame-04 { 523 | bottom: -0.5rem; 524 | left: -0.5rem; 525 | -webkit-animation-delay: 3s; 526 | animation-delay: 3s; 527 | } 528 | 529 | .spinner { 530 | display: inline-block; 531 | position: relative; 532 | vertical-align: middle; 533 | top: -1px; 534 | width: 1.25rem; 535 | height: 1.25rem; 536 | line-height: 1.125rem; 537 | border: 1px solid rgba($black, 0.50); 538 | border-radius: 0.625rem; 539 | overflow: hidden; 540 | -webkit-animation: FXRotate 2s linear infinite; 541 | animation: FXRotate 2s linear infinite; 542 | 543 | &:after { 544 | content: ''; 545 | position: absolute; 546 | top: 0; 547 | left: 0; 548 | display: block; 549 | width: 10px; 550 | height: 10px; 551 | background-color: rgba($black, 0.50); 552 | } 553 | } 554 | -------------------------------------------------------------------------------- /css/mixins.scss: -------------------------------------------------------------------------------- 1 | // Clearfix 2 | %clearfix:before, 3 | %clearfix:after { 4 | content: " "; 5 | display: table; 6 | } 7 | %clearfix:after { 8 | clear: both; 9 | } 10 | -------------------------------------------------------------------------------- /css/normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.3 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address `[hidden]` styling not present in IE 8/9. 48 | * Hide the `template` element in IE, Safari, and Firefox < 22. 49 | */ 50 | 51 | [hidden], 52 | template { 53 | display: none; 54 | } 55 | 56 | /* ========================================================================== 57 | Base 58 | ========================================================================== */ 59 | 60 | /** 61 | * 1. Set default font family to sans-serif. 62 | * 2. Prevent iOS text size adjust after orientation change, without disabling 63 | * user zoom. 64 | */ 65 | 66 | html { 67 | font-family: sans-serif; /* 1 */ 68 | -ms-text-size-adjust: 100%; /* 2 */ 69 | -webkit-text-size-adjust: 100%; /* 2 */ 70 | } 71 | 72 | /** 73 | * Remove default margin. 74 | */ 75 | 76 | body { 77 | margin: 0; 78 | } 79 | 80 | /* ========================================================================== 81 | Links 82 | ========================================================================== */ 83 | 84 | /** 85 | * Remove the gray background color from active links in IE 10. 86 | */ 87 | 88 | a { 89 | background: transparent; 90 | } 91 | 92 | /** 93 | * Address `outline` inconsistency between Chrome and other browsers. 94 | */ 95 | 96 | a:focus { 97 | outline: thin dotted; 98 | } 99 | 100 | /** 101 | * Improve readability when focused and also mouse hovered in all browsers. 102 | */ 103 | 104 | a:active, 105 | a:hover { 106 | outline: 0; 107 | } 108 | 109 | /* ========================================================================== 110 | Typography 111 | ========================================================================== */ 112 | 113 | /** 114 | * Address variable `h1` font-size and margin within `section` and `article` 115 | * contexts in Firefox 4+, Safari 5, and Chrome. 116 | */ 117 | 118 | h1 { 119 | font-size: 2em; 120 | margin: 0.67em 0; 121 | } 122 | 123 | /** 124 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 125 | */ 126 | 127 | abbr[title] { 128 | border-bottom: 1px dotted; 129 | } 130 | 131 | /** 132 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 133 | */ 134 | 135 | b, 136 | strong { 137 | font-weight: bold; 138 | } 139 | 140 | /** 141 | * Address styling not present in Safari 5 and Chrome. 142 | */ 143 | 144 | dfn { 145 | font-style: italic; 146 | } 147 | 148 | /** 149 | * Address differences between Firefox and other browsers. 150 | */ 151 | 152 | hr { 153 | -moz-box-sizing: content-box; 154 | box-sizing: content-box; 155 | height: 0; 156 | } 157 | 158 | /** 159 | * Address styling not present in IE 8/9. 160 | */ 161 | 162 | mark { 163 | background: #ff0; 164 | color: #000; 165 | } 166 | 167 | /** 168 | * Correct font family set oddly in Safari 5 and Chrome. 169 | */ 170 | 171 | code, 172 | kbd, 173 | pre, 174 | samp { 175 | font-family: monospace, serif; 176 | font-size: 1em; 177 | } 178 | 179 | /** 180 | * Improve readability of pre-formatted text in all browsers. 181 | */ 182 | 183 | pre { 184 | white-space: pre-wrap; 185 | } 186 | 187 | /** 188 | * Set consistent quote types. 189 | */ 190 | 191 | q { 192 | quotes: "\201C" "\201D" "\2018" "\2019"; 193 | } 194 | 195 | /** 196 | * Address inconsistent and variable font size in all browsers. 197 | */ 198 | 199 | small { 200 | font-size: 80%; 201 | } 202 | 203 | /** 204 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 205 | */ 206 | 207 | sub, 208 | sup { 209 | font-size: 75%; 210 | line-height: 0; 211 | position: relative; 212 | vertical-align: baseline; 213 | } 214 | 215 | sup { 216 | top: -0.5em; 217 | } 218 | 219 | sub { 220 | bottom: -0.25em; 221 | } 222 | 223 | /* ========================================================================== 224 | Embedded content 225 | ========================================================================== */ 226 | 227 | /** 228 | * Remove border when inside `a` element in IE 8/9. 229 | */ 230 | 231 | img { 232 | border: 0; 233 | } 234 | 235 | /** 236 | * Correct overflow displayed oddly in IE 9. 237 | */ 238 | 239 | svg:not(:root) { 240 | overflow: hidden; 241 | } 242 | 243 | /* ========================================================================== 244 | Figures 245 | ========================================================================== */ 246 | 247 | /** 248 | * Address margin not present in IE 8/9 and Safari 5. 249 | */ 250 | 251 | figure { 252 | margin: 0; 253 | } 254 | 255 | /* ========================================================================== 256 | Forms 257 | ========================================================================== */ 258 | 259 | /** 260 | * Define consistent border, margin, and padding. 261 | */ 262 | 263 | fieldset { 264 | border: 1px solid #c0c0c0; 265 | margin: 0 2px; 266 | padding: 0.35em 0.625em 0.75em; 267 | } 268 | 269 | /** 270 | * 1. Correct `color` not being inherited in IE 8/9. 271 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 272 | */ 273 | 274 | legend { 275 | border: 0; /* 1 */ 276 | padding: 0; /* 2 */ 277 | } 278 | 279 | /** 280 | * 1. Correct font family not being inherited in all browsers. 281 | * 2. Correct font size not being inherited in all browsers. 282 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 283 | */ 284 | 285 | button, 286 | input, 287 | select, 288 | textarea { 289 | font-family: inherit; /* 1 */ 290 | font-size: 100%; /* 2 */ 291 | margin: 0; /* 3 */ 292 | } 293 | 294 | /** 295 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 296 | * the UA stylesheet. 297 | */ 298 | 299 | button, 300 | input { 301 | line-height: normal; 302 | } 303 | 304 | /** 305 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 306 | * All other form control elements do not inherit `text-transform` values. 307 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 308 | * Correct `select` style inheritance in Firefox 4+ and Opera. 309 | */ 310 | 311 | button, 312 | select { 313 | text-transform: none; 314 | } 315 | 316 | /** 317 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 318 | * and `video` controls. 319 | * 2. Correct inability to style clickable `input` types in iOS. 320 | * 3. Improve usability and consistency of cursor style between image-type 321 | * `input` and others. 322 | */ 323 | 324 | button, 325 | html input[type="button"], /* 1 */ 326 | input[type="reset"], 327 | input[type="submit"] { 328 | -webkit-appearance: button; /* 2 */ 329 | cursor: pointer; /* 3 */ 330 | } 331 | 332 | /** 333 | * Re-set default cursor for disabled elements. 334 | */ 335 | 336 | button[disabled], 337 | html input[disabled] { 338 | cursor: default; 339 | } 340 | 341 | /** 342 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 343 | * 2. Remove excess padding in IE 8/9/10. 344 | */ 345 | 346 | input[type="checkbox"], 347 | input[type="radio"] { 348 | box-sizing: border-box; /* 1 */ 349 | padding: 0; /* 2 */ 350 | } 351 | 352 | /** 353 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 354 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 355 | * (include `-moz` to future-proof). 356 | */ 357 | 358 | input[type="search"] { 359 | -webkit-appearance: textfield; /* 1 */ 360 | -moz-box-sizing: content-box; 361 | -webkit-box-sizing: content-box; /* 2 */ 362 | box-sizing: content-box; 363 | } 364 | 365 | /** 366 | * Remove inner padding and search cancel button in Safari 5 and Chrome 367 | * on OS X. 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Remove inner padding and border in Firefox 4+. 377 | */ 378 | 379 | button::-moz-focus-inner, 380 | input::-moz-focus-inner { 381 | border: 0; 382 | padding: 0; 383 | } 384 | 385 | /** 386 | * 1. Remove default vertical scrollbar in IE 8/9. 387 | * 2. Improve readability and alignment in all browsers. 388 | */ 389 | 390 | textarea { 391 | overflow: auto; /* 1 */ 392 | vertical-align: top; /* 2 */ 393 | } 394 | 395 | /* ========================================================================== 396 | Tables 397 | ========================================================================== */ 398 | 399 | /** 400 | * Remove most spacing between table cells. 401 | */ 402 | 403 | table { 404 | border-collapse: collapse; 405 | border-spacing: 0; 406 | } 407 | -------------------------------------------------------------------------------- /css/variables.scss: -------------------------------------------------------------------------------- 1 | // Base Colours 2 | $white: #fff; 3 | $black: #000; 4 | $turquoise: #17c3e5; // 5ccfe5 5 | $lightTurquoise: lighten($turquoise, 5%); // 5ccfe5 6 | $darkTurquoise: darken($turquoise, 5%); // 5ccfe5 7 | $spaceGrey: #738292; 8 | 9 | // Brand Colours 10 | $brand-color: #2d9fc5; 11 | 12 | // Text Colours 13 | $textCopy: #333; 14 | $textCopyInv: $white; 15 | $textLink: $brand-color; 16 | -------------------------------------------------------------------------------- /images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nobilelucifero/UI-Feedbacks/25e9dc2c7ed9003b29f4571d661a81907c162c62/images/avatar.png -------------------------------------------------------------------------------- /images/icons/icon-attach.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /images/icons/icon-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /images/icons/icon-dislike.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 21 | 22 | -------------------------------------------------------------------------------- /images/icons/icon-like.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 21 | 22 | -------------------------------------------------------------------------------- /images/icons/icon-love.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /images/icons/icon-reply-all.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /images/icons/icon-reply.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /images/icons/icon-send.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /images/icons/icon-spam.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Feedbacks Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 68 |
69 |

UI Feedbacks

70 |

71 | A bunch of feedback ideas for your buttons. This demo does not rely on any particular coding technique, instead it just serves as an inspiration to give your interfaces some more dynamism. I hope you'll enjoy it! 72 |

73 |
74 |
75 | 76 |
77 |

Default feedbacks

78 |
79 | 116 |
117 |
118 | 119 |
120 |

Involve :hover

121 |
122 | 159 |
160 |
161 | 205 |
206 |
207 | 208 |
209 |

They can be toggles

210 |
211 | 230 |
231 |
232 | 255 |
256 |
257 | 258 |
259 |

They can be actions

260 |
261 | 294 |
295 |
296 | 297 |
298 |

Share alike!

299 |

300 | Feedbacks and comments are welcomed.
301 | Feel free to ping me @nobilelucifero. 302 |

303 | View on Github 304 |
305 | 306 | 307 | -------------------------------------------------------------------------------- /js/_build/main.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.7.1 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function w(a){j.cssText=a}function x(a,b){return w(m.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}var d="2.7.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n={},o={},p={},q=[],r=q.slice,s,t=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:t(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c};for(var B in n)v(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},w(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._prefixes=m,e.testStyles=t,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f',a,""].join(""),j.id=m,(k?j:n).innerHTML+=f,n.appendChild(j),k||(n.style.background="",n.style.overflow="hidden",i=l.style.overflow,l.style.overflow="hidden",l.appendChild(n)),g=c(j,a),k?j.parentNode.removeChild(j):(n.parentNode.removeChild(n),l.style.overflow=i),!!g},u={}.hasOwnProperty;h=e(u,"undefined")||e(u.call,"undefined")?function(a,b){return b in a&&e(a.constructor.prototype[b],"undefined")}:function(a,b){return u.call(a,b)},Function.prototype.bind||(Function.prototype.bind=function(a){var b=this;if("function"!=typeof b)throw new TypeError;var c=s.call(arguments,1),d=function(){if(this instanceof d){var e=function(){};e.prototype=b.prototype;var f=new e,g=b.apply(f,c.concat(s.call(arguments)));return Object(g)===g?g:f}return b.apply(a,c.concat(s.call(arguments)))};return d}),q.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:t(["@media (",p.join("touch-enabled),("),m,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=9===a.offsetTop}),c};for(var v in q)h(q,v)&&(g=v.toLowerCase(),j[g]=q[v](),r.push((j[g]?"":"no-")+g));return j.addTest=function(a,b){if("object"==typeof a)for(var d in a)h(a,d)&&j.addTest(d,a[d]);else{if(a=a.toLowerCase(),j[a]!==c)return j;b="function"==typeof b?b():b,"undefined"!=typeof k&&k&&(l.className+=" "+(b?"":"no-")+a),j[a]=b}return j},d(""),n=f=null,function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=s.elements;return"string"==typeof a?a.split(" "):a}function e(a){var b=r[a[p]];return b||(b={},q++,a[p]=q,r[q]=b),b}function f(a,c,d){if(c||(c=b),k)return c.createElement(a);d||(d=e(c));var f;return f=d.cache[a]?d.cache[a].cloneNode():o.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!f.canHaveChildren||n.test(a)||f.tagUrn?f:d.frag.appendChild(f)}function g(a,c){if(a||(a=b),k)return a.createDocumentFragment();c=c||e(a);for(var f=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)f.createElement(h[g]);return f}function h(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return s.shivMethods?f(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(s,b.frag)}function i(a){a||(a=b);var d=e(a);return s.shivCSS&&!j&&!d.hasCSS&&(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),k||h(a,d),a}var j,k,l="3.7.0",m=a.html5||{},n=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,o=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,p="_html5shiv",q=0,r={};!function(){try{var a=b.createElement("a");a.innerHTML="",j="hidden"in a,k=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){j=!0,k=!0}}();var s={elements:m.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:l,shivCSS:m.shivCSS!==!1,supportsUnknownElements:k,shivMethods:m.shivMethods!==!1,type:"default",shivDocument:i,createElement:f,createDocumentFragment:g};a.html5=s,i(b)}(this,b),j._version=i,j._prefixes=p,j.testStyles=t,l.className=l.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(k?" js "+r.join(" "):""),j}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==q.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=r.shift();s=1,a?a.t?o(function(){("c"==a.t?m.injectCss:m.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):s=0}function i(a,c,d,e,f,i,j){function k(b){if(!n&&g(l.readyState)&&(t.r=n=1,!s&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&o(function(){v.removeChild(l)},50);for(var d in A[c])A[c].hasOwnProperty(d)&&A[c][d].onload()}}var j=j||m.errorTimeout,l=b.createElement(a),n=0,q=0,t={t:d,s:c,e:f,a:i,x:j};1===A[c]&&(q=1,A[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,q)},r.splice(e,0,t),"img"!=a&&(q||2===A[c]?(v.insertBefore(l,u?null:p),o(k,j)):A[c].push(l))}function j(a,b,c,d,f){return s=0,b=b||"j",e(a)?i("c"==b?x:w,a,b,this.i++,c,d,f):(r.splice(this.i++,0,a),1==r.length&&h()),this}function k(){var a=m;return a.loader={load:j,i:0},a}var l,m,n=b.documentElement,o=a.setTimeout,p=b.getElementsByTagName("script")[0],q={}.toString,r=[],s=0,t="MozAppearance"in n.style,u=t&&!!b.createRange().compareNode,v=u?n:p.parentNode,n=a.opera&&"[object Opera]"==q.call(a.opera),n=!!b.attachEvent&&!n,w=t?"object":n?"script":"img",x=n?"script":w,y=Array.isArray||function(a){return"[object Array]"==q.call(a)},z=[],A={},B={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}};m=function(a){function b(a){var b,c,d,a=a.split("!"),e=z.length,f=a.pop(),g=a.length,f={url:f,origUrl:f,prefixes:a};for(c=0;g>c;c++)d=a[c].split("="),(b=B[d.shift()])&&(f=b(f,d));for(c=0;e>c;c++)f=z[c](f);return f}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(A[i.url]?i.noexec=!0:A[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),A[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(l=function(){var a=[].slice.call(arguments);m.apply(this,a),n()}),g(a,l,b,0,j);else if(Object(a)===a)for(i in h=function(){var b,c=0;for(b in a)a.hasOwnProperty(b)&&c++;return c}(),a)a.hasOwnProperty(i)&&(!c&&!--h&&(d(l)?l=function(){var a=[].slice.call(arguments);m.apply(this,a),n()}:l[i]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),n()}}(m[i])),g(a[i],l,b,i,j))}else!c&&n()}var h,i,j=!!a.test,k=a.load||a.both,l=a.callback||f,m=l,n=a.complete||f;c(j?a.yep:a.nope,!!k),k&&c(k)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(y(a))for(i=0;ii;i++){var k=c[i];k.addEventListener("click",function(a){var b=this.href.match(/#/);f(this),b&&a.preventDefault()},!1)}}); -------------------------------------------------------------------------------- /js/libs/modernizr.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.7.1 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function w(a){j.cssText=a}function x(a,b){return w(m.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}var d="2.7.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n={},o={},p={},q=[],r=q.slice,s,t=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:t(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c};for(var B in n)v(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},w(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._prefixes=m,e.testStyles=t,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f