├── .gitignore ├── css-circle-menu-featured.png ├── fonts ├── font-awesome │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 └── oxygen │ ├── oxygen-v5-latin-300.eot │ ├── oxygen-v5-latin-300.ttf │ ├── oxygen-v5-latin-300.woff │ ├── oxygen-v5-latin-300.woff2 │ ├── oxygen-v5-latin-700.eot │ ├── oxygen-v5-latin-700.ttf │ ├── oxygen-v5-latin-700.woff │ ├── oxygen-v5-latin-700.woff2 │ ├── oxygen-v5-latin-regular.eot │ ├── oxygen-v5-latin-regular.ttf │ ├── oxygen-v5-latin-regular.woff │ ├── oxygen-v5-latin-regular.woff2 │ └── oxygen-v5-latin-700.svg ├── js ├── dist │ └── circleMenu.min.js ├── lib │ ├── githubIcons.js │ └── carbonAd.js └── src │ └── circleMenu.js ├── img ├── house.svg ├── pin.svg ├── search.svg ├── photo.svg └── tools.svg ├── bower.json ├── package.json ├── gulpfile.js ├── sass ├── _circle-menu-helpers.scss ├── _variables.scss ├── common.scss └── circle-menu.scss ├── index.html ├── css ├── common.min.css ├── circle-menu.min.css ├── common.css ├── circle-menu.css ├── font-awesome.min.css └── font-awesome.css └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /css-circle-menu-featured.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/css-circle-menu-featured.png -------------------------------------------------------------------------------- /fonts/font-awesome/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/font-awesome/FontAwesome.otf -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-300.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/oxygen/oxygen-v5-latin-300.eot -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-300.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/oxygen/oxygen-v5-latin-300.ttf -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-300.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/oxygen/oxygen-v5-latin-300.woff -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-300.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/oxygen/oxygen-v5-latin-300.woff2 -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-700.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/oxygen/oxygen-v5-latin-700.eot -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-700.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/oxygen/oxygen-v5-latin-700.ttf -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-700.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/oxygen/oxygen-v5-latin-700.woff -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/oxygen/oxygen-v5-latin-700.woff2 -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/oxygen/oxygen-v5-latin-regular.eot -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/oxygen/oxygen-v5-latin-regular.ttf -------------------------------------------------------------------------------- /fonts/font-awesome/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/font-awesome/fontawesome-webfont.eot -------------------------------------------------------------------------------- /fonts/font-awesome/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/font-awesome/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /fonts/font-awesome/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/font-awesome/fontawesome-webfont.woff -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/oxygen/oxygen-v5-latin-regular.woff -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/oxygen/oxygen-v5-latin-regular.woff2 -------------------------------------------------------------------------------- /fonts/font-awesome/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callmenick/CSS-Circle-Menu/HEAD/fonts/font-awesome/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /js/dist/circleMenu.min.js: -------------------------------------------------------------------------------- 1 | !function(e){"use strict";e.cssCircleMenu=function(e){function s(){a.addEventListener("click",function(e){e.preventDefault(),t()})}function t(){a.classList.contains("is-active")?c():i()}function i(){n.classList.add("is-active"),a.classList.add("is-active"),o.classList.add("is-active")}function c(){n.classList.remove("is-active"),a.classList.remove("is-active"),o.classList.remove("is-active")}var n=document.querySelector(e),a=n?n.querySelector(".js-menu-toggle"):void 0,o=n?n.querySelector(".js-menu-mask"):void 0;if(!(n&&a&&o))throw new Error("Invalid elements, check the structure.");return s(),{openMenu:i,closeMenu:c}}}(window); -------------------------------------------------------------------------------- /img/house.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/pin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-circle-menu", 3 | "version": "2.0.0", 4 | "homepage": "https://github.com/callmenick/CSS-Circle-Menu", 5 | "authors": [ 6 | "Nick Salloum " 7 | ], 8 | "description": "Circular fly-out navigation menu with CSS", 9 | "main": "gulpfile.js", 10 | "ignore": [ 11 | "*", 12 | "!css/circle-menu.css", 13 | "!css/circle-menu.min.css", 14 | "!gulpfile.js", 15 | "!js/src/circleMenu.js", 16 | "!js/dist/circleMenu.min.js", 17 | "!sass/circle-menu.scss", 18 | "!sass/_circle-menu-helpers.scss" 19 | ], 20 | "keywords": [ 21 | "CSS", 22 | "CSS3", 23 | "menu", 24 | "flyout", 25 | "menu", 26 | "circular", 27 | "menu", 28 | "transitions", 29 | "transforms" 30 | ], 31 | "license": "MIT" 32 | } 33 | -------------------------------------------------------------------------------- /img/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/photo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-circle-menu", 3 | "version": "2.0.0", 4 | "description": "My circular fly-out CSS navigation menu component, built with CSS3.", 5 | "main": "gulpfile.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "gulp": "^3.9.1", 9 | "gulp-autoprefixer": "^3.1.0", 10 | "gulp-concat": "^2.6.0", 11 | "gulp-minify-css": "^1.2.4", 12 | "gulp-notify": "^2.2.0", 13 | "gulp-plumber": "^1.1.0", 14 | "gulp-rename": "^1.2.2", 15 | "gulp-sass": "^2.3.2", 16 | "gulp-uglify": "^1.5.4", 17 | "gulp-util": "^3.0.7", 18 | "node-notifier": "^4.6.0" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/callmenick/CSS-Circle-Menu.git" 23 | }, 24 | "author": "Nick Salloum ", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/callmenick/CSS-Circle-Menu/issues" 28 | }, 29 | "homepage": "https://github.com/callmenick/CSS-Circle-Menu#readme" 30 | } 31 | -------------------------------------------------------------------------------- /js/lib/githubIcons.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | var gitWatch = document.createElement("iframe"); 3 | gitWatch.setAttribute( "src", "http://ghbtns.com/github-btn.html?user=callmenick&repo=CSS-Circle-Menu&type=watch&count=true" ); 4 | gitWatch.setAttribute( "allowtransparency", "true" ); 5 | gitWatch.setAttribute( "frameborder", "0" ); 6 | gitWatch.setAttribute( "scrolling", "0" ); 7 | gitWatch.style.width = "110px"; 8 | gitWatch.style.height = "20px"; 9 | document.getElementById("github-icons").appendChild(gitWatch); 10 | 11 | var gitFork = document.createElement("iframe"); 12 | gitFork.setAttribute( "src", "http://ghbtns.com/github-btn.html?user=callmenick&repo=CSS-Circle-Menu&type=fork&count=true" ); 13 | gitFork.setAttribute( "allowtransparency", "true" ); 14 | gitFork.setAttribute( "frameborder", "0" ); 15 | gitFork.setAttribute( "scrolling", "0" ); 16 | gitFork.style.width = "95px"; 17 | gitFork.style.height = "20px"; 18 | document.getElementById("github-icons").appendChild(gitFork); 19 | })(); -------------------------------------------------------------------------------- /js/lib/carbonAd.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | var carbonad_script = document.createElement("script"); 3 | carbonad_script.type = 'text/javascript'; 4 | carbonad_script.async = true; 5 | carbonad_script.id = "_carbonads_js"; 6 | carbonad_script.src = "//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=callmenickcom"; 7 | document.body.appendChild(carbonad_script); 8 | 9 | var ad; 10 | 11 | var interval = window.setInterval( function() { 12 | ad = document.getElementById("carbonads"); 13 | if ( ad !== null ) { 14 | clearInterval(interval); 15 | adClose(); 16 | } 17 | }, 100 ); 18 | 19 | function adClose() { 20 | var close = document.createElement("a"); 21 | close.className = "carbonad__close"; 22 | close.innerHTML = "x close"; 23 | close.setAttribute("href", "#"); 24 | ad.appendChild(close); 25 | 26 | close.addEventListener( "click", function(e) { 27 | e.preventDefault(); 28 | ad.parentNode.removeChild(ad); 29 | }) 30 | } 31 | 32 | })(); -------------------------------------------------------------------------------- /img/tools.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/src/circleMenu.js: -------------------------------------------------------------------------------- 1 | (function(window) { 2 | 'use strict'; 3 | 4 | window.cssCircleMenu = function(el) { 5 | var $menu = document.querySelector(el); 6 | var $menuToggle = $menu ? $menu.querySelector('.js-menu-toggle') : undefined; 7 | var $menuMask = $menu ? $menu.querySelector('.js-menu-mask') : undefined; 8 | 9 | if (!$menu || !$menuToggle || !$menuMask) { 10 | throw new Error('Invalid elements, check the structure.'); 11 | } else { 12 | init(); 13 | } 14 | 15 | return { 16 | openMenu: openMenu, 17 | closeMenu: closeMenu 18 | }; 19 | 20 | function init() { 21 | $menuToggle.addEventListener('click', function(e) { 22 | e.preventDefault(); 23 | toggleMenu(); 24 | }); 25 | } 26 | 27 | function toggleMenu() { 28 | $menuToggle.classList.contains('is-active') 29 | ? closeMenu() 30 | : openMenu(); 31 | } 32 | 33 | function openMenu() { 34 | $menu.classList.add('is-active'); 35 | $menuToggle.classList.add('is-active'); 36 | $menuMask.classList.add('is-active'); 37 | } 38 | 39 | function closeMenu() { 40 | $menu.classList.remove('is-active'); 41 | $menuToggle.classList.remove('is-active'); 42 | $menuMask.classList.remove('is-active'); 43 | } 44 | }; 45 | })(window); 46 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // require gulp 2 | var gulp = require('gulp'); 3 | 4 | // require plugins 5 | var autoprefixer = require('gulp-autoprefixer'); 6 | var concat = require('gulp-concat'); 7 | var cssmin = require('gulp-minify-css'); 8 | var gutil = require('gulp-util'); 9 | var notifier = require('node-notifier'); 10 | var notify = require('gulp-notify'); 11 | var plumber = require('gulp-plumber'); 12 | var rename = require('gulp-rename'); 13 | var sass = require('gulp-sass'); 14 | var uglify = require('gulp-uglify'); 15 | 16 | // js task 17 | gulp.task('js', function() { 18 | return gulp.src('./js/src/**/*.js') 19 | .pipe(uglify().on('error', function(err) { 20 | console.log('Uglify error:', err); 21 | this.emit('end'); 22 | })) 23 | .pipe(rename({ 24 | suffix: '.min' 25 | })) 26 | .pipe(gulp.dest('./js/dist/')); 27 | }); 28 | 29 | // styles task 30 | gulp.task('styles', function() { 31 | return gulp.src('./sass/**/*.scss') 32 | .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) 33 | .pipe(autoprefixer()) 34 | .pipe(gulp.dest('./css/')) 35 | .pipe(cssmin()) 36 | .pipe(rename({ 37 | suffix: '.min' 38 | })) 39 | .pipe(gulp.dest('./css/')); 40 | }); 41 | 42 | // default task 43 | gulp.task('default', ['js', 'styles']); 44 | 45 | // watch task 46 | gulp.task('watch', ['js', 'styles'], function() { 47 | gulp.watch('./js/src/**/*.js', ['js']); 48 | gulp.watch('./sass/*.scss', ['styles']); 49 | }); 50 | -------------------------------------------------------------------------------- /sass/_circle-menu-helpers.scss: -------------------------------------------------------------------------------- 1 | // ----------------------------------------------------------------------------- 2 | // 3 | // Math helpers 4 | // 5 | // ----------------------------------------------------------------------------- 6 | 7 | @function pow($number, $exp) { 8 | $value: 1; 9 | @if $exp > 0 { 10 | @for $i from 1 through $exp { 11 | $value: $value * $number; 12 | } 13 | } 14 | @else if $exp < 0 { 15 | @for $i from 1 through -$exp { 16 | $value: $value / $number; 17 | } 18 | } 19 | @return $value; 20 | } 21 | 22 | @function fact($number) { 23 | $value: 1; 24 | @if $number > 0 { 25 | @for $i from 1 through $number { 26 | $value: $value * $i; 27 | } 28 | } 29 | @return $value; 30 | } 31 | 32 | @function pi() { 33 | @return 3.14159265359; 34 | } 35 | 36 | @function rad($angle) { 37 | $unit: unit($angle); 38 | $unitless: $angle / ($angle * 0 + 1); 39 | // If the angle has 'deg' as unit, convert to radians. 40 | @if $unit == deg { 41 | $unitless: $unitless / 180 * pi(); 42 | } 43 | @return $unitless; 44 | } 45 | 46 | @function sin($angle) { 47 | $sin: 0; 48 | $angle: rad($angle); 49 | // Iterate a bunch of times. 50 | @for $i from 0 through 10 { 51 | $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1); 52 | } 53 | @return $sin; 54 | } 55 | 56 | @function cos($angle) { 57 | $cos: 0; 58 | $angle: rad($angle); 59 | // Iterate a bunch of times. 60 | @for $i from 0 through 10 { 61 | $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i); 62 | } 63 | @return $cos; 64 | } 65 | 66 | @function tan($angle) { 67 | @return sin($angle) / cos($angle); 68 | } 69 | -------------------------------------------------------------------------------- /sass/_variables.scss: -------------------------------------------------------------------------------- 1 | // ============================================================================= 2 | // FONTS 3 | // ============================================================================= 4 | 5 | $font-family--primary: "Oxygen", Helvetica, sans-serif; 6 | 7 | $font-size--xsmall: 12px; 8 | $font-size--small: 14px; 9 | $font-size--smedium: 16px; 10 | $font-size--medium: 18px; 11 | $font-size--large: 22px; 12 | $font-size--xlarge: 28px; 13 | $font-size--xxlarge: 36px; 14 | 15 | $font-size--ultra: 42px; 16 | $font-size--ultra-large: 48px; 17 | $font-size--ultra-xlarge: 60px; 18 | $font-size--ultra-xxlarge: 84px; 19 | 20 | $line-height--small: 1.2; 21 | $line-height--medium: 1.8; 22 | $line-height--large: 2.2; 23 | 24 | // ============================================================================= 25 | // COLORS 26 | // ============================================================================= 27 | 28 | $color--neutral-xxdark: rgb(21, 21, 21); 29 | $color--neutral-xdark: rgb(39, 39, 39); 30 | $color--neutral-dark: rgb(59, 59, 59); 31 | $color--neutral: rgb(109, 109, 109); 32 | $color--neutral-light: rgb(129, 129, 129); 33 | $color--neutral-xlight: rgb(179, 179, 179); 34 | $color--neutral-xxlight: rgb(231, 231, 231); 35 | $color--neutral-xxxlight: rgb(241, 241, 241); 36 | 37 | $color--blue-dark: rgb(0, 100, 140); 38 | $color--blue: rgb(40, 170, 220); 39 | $color--blue-light: rgb(70, 200, 250); 40 | 41 | $color--theme: rgb(255, 40, 80); 42 | $color--theme-dark: darken($color--theme, 20%); 43 | $color--theme-light: lighten($color--theme, 20%); 44 | 45 | $color--theme-alt: rgb(60, 255, 120); 46 | 47 | // ============================================================================= 48 | // BREAKPOINTS 49 | // ============================================================================= 50 | 51 | $breakpoint--small: 480px; 52 | $breakpoint--medium: 720px; 53 | $breakpoint--large: 1020px; 54 | $breakpoint--xlarge: 1200px; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Circular Fly-Out Navigation Menu 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 20 |
21 |

Circular Fly-Out Navigation Menu

22 |
23 |
24 | 25 |
26 |
27 |

This is a circular flyout menu made with Sass and CSS3 transitions, transforms, and animations. Click the icon in the bottom-right corner to witness the magic. Get the source code for this demo here on GitHub.

28 |
29 |
30 |
31 | 32 |
33 |
34 | © 2015, callmenick.com 35 |
36 |
37 | 38 | 71 | 72 | 73 | 77 | 78 | 79 | 80 | 81 | 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /css/common.min.css: -------------------------------------------------------------------------------- 1 | .carbon-poweredby,em,i{font-style:italic}@font-face{font-family:Oxygen;font-style:normal;font-weight:300;src:url(../fonts/oxygen/oxygen-v5-latin-300.eot);src:local("Oxygen Light"),local("Oxygen-Light"),url(../fonts/oxygen/oxygen-v5-latin-300.eot?#iefix) format("embedded-opentype"),url(../fonts/oxygen/oxygen-v5-latin-300.woff2) format("woff2"),url(../fonts/oxygen/oxygen-v5-latin-300.woff) format("woff"),url(../fonts/oxygen/oxygen-v5-latin-300.ttf) format("truetype"),url(../fonts/oxygen/oxygen-v5-latin-300.svg#Oxygen) format("svg")}@font-face{font-family:Oxygen;font-style:normal;font-weight:400;src:url(../fonts/oxygen/oxygen-v5-latin-regular.eot);src:local("Oxygen"),local("Oxygen-Regular"),url(../fonts/oxygen/oxygen-v5-latin-regular.eot?#iefix) format("embedded-opentype"),url(../fonts/oxygen/oxygen-v5-latin-regular.woff2) format("woff2"),url(../fonts/oxygen/oxygen-v5-latin-regular.woff) format("woff"),url(../fonts/oxygen/oxygen-v5-latin-regular.ttf) format("truetype"),url(../fonts/oxygen/oxygen-v5-latin-regular.svg#Oxygen) format("svg")}@font-face{font-family:Oxygen;font-style:normal;font-weight:700;src:url(../fonts/oxygen/oxygen-v5-latin-700.eot);src:local("Oxygen Bold"),local("Oxygen-Bold"),url(../fonts/oxygen/oxygen-v5-latin-700.eot?#iefix) format("embedded-opentype"),url(../fonts/oxygen/oxygen-v5-latin-700.woff2) format("woff2"),url(../fonts/oxygen/oxygen-v5-latin-700.woff) format("woff"),url(../fonts/oxygen/oxygen-v5-latin-700.ttf) format("truetype"),url(../fonts/oxygen/oxygen-v5-latin-700.svg#Oxygen) format("svg")}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box}body,html{margin:0;padding:0;height:100%}body{color:#6d6d6d;background-color:#272727;font-family:Oxygen,Helvetica,sans-serif;font-size:14px;line-height:1.8}h1,h2,h3,h4,h5,h6{color:#3b3b3b;font-weight:700;line-height:1.2}a{color:#ff2850;text-decoration:none}a:hover{color:#c10024}b,strong{font-weight:700}img{max-width:100%;height:auto}.container{margin:0 auto;padding:0 24px;max-width:960px}@media all and (min-width:480px){.container{padding:0 24px}}@media all and (min-width:720px){.container{padding:0 48px}}.demo-header{margin:0;padding:0}.demo-header-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;background-color:#ff2850}.demo-header-nav__link{padding:12px;color:#fff}.demo-header-nav__link:hover{color:#fff;background-color:#c10024}.demo-header__title{margin:24px;padding:0;color:#fff;font-size:28px;font-weight:300;text-align:center}@media all and (min-width:480px){.demo-header__title{margin:36px;font-size:42px}}.leader-text{color:#b3b3b3;font-size:18px;font-weight:300}.demo-sub-nav{margin:0 0 24px;padding:0}.demo-sub-nav__items{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;list-style:none;margin:0;padding:0}.demo-sub-nav__item{margin:0;padding:4px}.demo-sub-nav__link{display:block;margin:0;padding:4px 24px;border:2px solid #ff2850}.demo-sub-nav__item.active .demo-sub-nav__link,.demo-sub-nav__link:hover{color:#fff;background-color:#ff2850}@media all and (min-width:720px){.demo-sub-nav{margin:0 0 48px}}.carbon-img,.carbon-wrap{margin:0 0 4px;display:block}.demo-footer{padding:12px 0;text-align:center}@media all and (min-width:480px){.leader-text{font-size:22px}.demo-footer{padding:24px 0}}@media all and (min-width:720px){.demo-footer{padding:48px 0}}#carbonads{position:fixed;bottom:12px;left:12px;z-index:1000;padding:24px 12px 12px;width:154px;background-color:#fff;line-height:1.1;border:1px solid #e7e7e7}.carbon-img{padding:0;width:130px;height:100px}.carbon-text{color:#818181;font-size:12px}.carbon-poweredby{font-size:10px}.carbonad__close{display:block;position:absolute;top:0;left:12px;height:24px;font-size:11px;line-height:24px}@media all and (max-width:660px){#carbonads{display:none}} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Circle Fly-Out Navigation 2 | 3 | My circular fly-out CSS navigation menu component, built with CSS3. [View the demo here.](http://callmenick.com/_development/css-circle-menu/) 4 | 5 | ![Circle fly out menu](css-circle-menu-featured.png) 6 | 7 | ## Usage 8 | 9 | To use, include the CSS and JavaScript in your app. Markup your menu like this: 10 | 11 | ```html 12 | 26 | ``` 27 | 28 | Then, include your script like this: 29 | 30 | ```html 31 | 32 | ``` 33 | 34 | Finally, you can initialize the menu like this: 35 | 36 | ```html 37 | 41 | ``` 42 | 43 | The default number of menu items is 5. To use a different number of items, you'll have to [configure and build with Sass and Gulp.](#configuring-and-building-with-sass-and-gulp) 44 | 45 | ### Out of the box usage 46 | 47 | You can use this component out of the box by downloading the uncompressed or compressed files from the `css/` directory. 48 | 49 | ### Use as a Bower component 50 | 51 | The component is available as a bower package, and you can import it by running the following command: 52 | 53 | ``` 54 | bower install css-circle-menu 55 | ``` 56 | 57 | ## Configuring and Building with Sass and Gulp 58 | 59 | The component is built with Sass (SCSS) and uses a JavaScript module as well to handle events. Everything gets compiled and built with Gulp. To develop and compile from gulp, just run: 60 | 61 | ``` 62 | npm install 63 | gulp 64 | ``` 65 | 66 | To watch files during development, run 67 | 68 | ``` 69 | gulp watch 70 | ``` 71 | 72 | Using the Gulp workflow is hugely beneficial, because it makes the component much easier to work with and customise. If you're not using Gulp to compile the Sass, you will still need to leverage Compass to make use of the math helper functions. The following 11 variables are configurable in the Sass up front, and their defaults are written out for you to look at: 73 | 74 | ```scss 75 | // $menu-item-radius: 48px; [1] 76 | // $num-items: 5; [2] 77 | // $menu-theme-color: rgb(255, 40, 60); [3] 78 | // $spread-radius: 144px; [4] 79 | // $delay-increment: 0.1s; [5] 80 | // $menu-position: "bottom-right"; [6] 81 | // $mq-height: 480px; [7] 82 | // $mq-width: 480px; [8] 83 | // $button-bar-height: 4px; [9] 84 | // $button-bar-spacing: 4px; [10] 85 | // $button-lr-padding: 10px; [11] 86 | ``` 87 | 88 | You can edit these as you see fit. Here's the breakdown of these 11 configuration options: 89 | 90 | 1. Set up the initial menu item radius. 91 | 2. Decalare how many items our menu will contain. 92 | 3. Set up a theme colour. 93 | 4. The spread radius, which is how far the menu items spread from the origin. 94 | 5. The delay increment, which is how much delay there is between each menu 95 | item leaving from / returning to the origin. 96 | 6. The position of the menu, chosen from one of four values: 97 | `bottom-right` - bottom right corner (this is the default) 98 | `bottom-left` - bottom left corner 99 | `top-left` - top left corner 100 | `top-right` - top right corner 101 | 7. Minimum height at which menu increases size. 102 | 8. Minimum width at which menu increases size. 103 | 9. The height of a bar in the toggle button. 104 | 10. The spacing between bars in the toggle button. 105 | 11. The padding between the left and right of the toggle button container and 106 | the bars. 107 | 108 | Other variables will have to be customised further down in the Sass with your own discretion. Be sure to change up the Sass variable that defines the number of navigation items. 109 | 110 | ## License & Copyright 111 | 112 | Licensed under the [MIT license.](http://www.opensource.org/licenses/mit-license.php) 113 | 114 | Copyright 2016, [Call Me Nick.](http://callmenick.com) 115 | -------------------------------------------------------------------------------- /css/circle-menu.min.css: -------------------------------------------------------------------------------- 1 | .c-circle-menu{position:fixed;bottom:12px;right:12px;z-index:1000;width:48px;height:48px;border-radius:24px}@media (min-width:480px) and (min-height:480px){.c-circle-menu{width:96px;height:96px;border-radius:48px}}.c-circle-menu__items{display:block;list-style:none;position:absolute;z-index:2;margin:0;padding:0}.c-circle-menu__item{display:block;position:absolute;top:0;left:0;width:48px;height:48px;border-radius:24px;opacity:0;-webkit-transition:opacity,-webkit-transform;transition:opacity,-webkit-transform;transition:transform,opacity;transition:transform,opacity,-webkit-transform;-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-timing-function:cubic-bezier(.35,-.59,.47,.97);transition-timing-function:cubic-bezier(.35,-.59,.47,.97)}.c-circle-menu__item:nth-child(1){-webkit-transition-delay:.4s;transition-delay:.4s}.c-circle-menu__item:nth-child(2){-webkit-transition-delay:.3s;transition-delay:.3s}.c-circle-menu__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s}.c-circle-menu__item:nth-child(4){-webkit-transition-delay:.1s;transition-delay:.1s}.c-circle-menu__item:nth-child(5){-webkit-transition-delay:0s;transition-delay:0s}.c-circle-menu.is-active .c-circle-menu__item{-webkit-transition-timing-function:cubic-bezier(.35,.03,.47,1.59);transition-timing-function:cubic-bezier(.35,.03,.47,1.59);opacity:1}.c-circle-menu.is-active .c-circle-menu__item:nth-child(1){-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translate(-144px,0);transform:translate(-144px,0)}@media (min-width:480px) and (min-height:480px){.c-circle-menu__item{width:96px;height:96px;border-radius:48px}.c-circle-menu.is-active .c-circle-menu__item:nth-child(1){-webkit-transform:translate(-288px,0);transform:translate(-288px,0)}}.c-circle-menu.is-active .c-circle-menu__item:nth-child(2){-webkit-transition-delay:.1s;transition-delay:.1s;-webkit-transform:translate(-134px,-56px);transform:translate(-134px,-56px)}@media (min-width:480px) and (min-height:480px){.c-circle-menu.is-active .c-circle-menu__item:nth-child(2){-webkit-transform:translate(-267px,-111px);transform:translate(-267px,-111px)}}.c-circle-menu.is-active .c-circle-menu__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s;-webkit-transform:translate(-102px,-102px);transform:translate(-102px,-102px)}@media (min-width:480px) and (min-height:480px){.c-circle-menu.is-active .c-circle-menu__item:nth-child(3){-webkit-transform:translate(-204px,-204px);transform:translate(-204px,-204px)}}.c-circle-menu.is-active .c-circle-menu__item:nth-child(4){-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translate(-56px,-134px);transform:translate(-56px,-134px)}@media (min-width:480px) and (min-height:480px){.c-circle-menu.is-active .c-circle-menu__item:nth-child(4){-webkit-transform:translate(-111px,-267px);transform:translate(-111px,-267px)}}.c-circle-menu.is-active .c-circle-menu__item:nth-child(5){-webkit-transition-delay:.4s;transition-delay:.4s;-webkit-transform:translate(0,-144px);transform:translate(0,-144px)}.c-circle-menu__link{display:block;width:100%;height:100%;border-radius:24px;box-shadow:inset 0 0 0 2px #fff}@media (min-width:480px) and (min-height:480px){.c-circle-menu.is-active .c-circle-menu__item:nth-child(5){-webkit-transform:translate(0,-288px);transform:translate(0,-288px)}.c-circle-menu__link{border-radius:48px}}.c-circle-menu__link img{display:block;max-width:100%;height:auto}.c-circle-menu__link:hover{box-shadow:inset 0 0 0 2px #ff283c}.c-circle-menu__toggle{display:block;position:absolute;z-index:100;margin:0;padding:0;width:48px;height:48px;background-color:#ff283c;font:inherit;font-size:0;text-indent:-9999px;border-radius:24px;-webkit-transition:background .3s;transition:background .3s;cursor:pointer;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none}@media (min-width:480px) and (min-height:480px){.c-circle-menu__toggle{width:96px;height:96px;border-radius:48px}}.c-circle-menu__toggle.is-active,.c-circle-menu__toggle:focus,.c-circle-menu__toggle:hover{outline:0;background-color:#c10012}.c-circle-menu__toggle span,.c-circle-menu__toggle span::after,.c-circle-menu__toggle span::before{display:block;position:absolute;height:4px;background:#fff;border-radius:1px}.c-circle-menu__toggle span{top:22px;left:10px;right:10px;-webkit-transition:background .3s;transition:background .3s}@media (min-width:480px) and (min-height:480px){.c-circle-menu__toggle span,.c-circle-menu__toggle span::after,.c-circle-menu__toggle span::before{height:8px;border-radius:2px}.c-circle-menu__toggle span{top:44px;left:20px;right:20px}}.c-circle-menu__toggle span::after,.c-circle-menu__toggle span::before{left:0;width:100%;content:"";-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0s;transition-delay:.3s,0s}.c-circle-menu__toggle span::before{top:-8px;-webkit-transition-property:top,-webkit-transform;transition-property:top,-webkit-transform;transition-property:top,transform;transition-property:top,transform,-webkit-transform}.c-circle-menu__toggle span::after{bottom:-8px;-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,-webkit-transform;transition-property:bottom,transform;transition-property:bottom,transform,-webkit-transform}@media (min-width:480px) and (min-height:480px){.c-circle-menu__toggle span::before{top:-16px}.c-circle-menu__toggle span::after{bottom:-16px}}.c-circle-menu__toggle.is-active span{background:0 0}.c-circle-menu__toggle.is-active span::before{top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-circle-menu__toggle.is-active span::after{bottom:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-circle-menu__mask{position:fixed;top:0;left:0;z-index:1;visibility:hidden;opacity:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s}.c-circle-menu__mask.is-active{opacity:1;visibility:visible} -------------------------------------------------------------------------------- /css/common.css: -------------------------------------------------------------------------------- 1 | /* ----------------------------------------------------------------------------- 2 | 3 | Fonts 4 | 5 | ----------------------------------------------------------------------------- */ 6 | @font-face { 7 | font-family: 'Oxygen'; 8 | font-style: normal; 9 | font-weight: 300; 10 | src: url("../fonts/oxygen/oxygen-v5-latin-300.eot"); 11 | src: local("Oxygen Light"), local("Oxygen-Light"), url("../fonts/oxygen/oxygen-v5-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/oxygen/oxygen-v5-latin-300.woff2") format("woff2"), url("../fonts/oxygen/oxygen-v5-latin-300.woff") format("woff"), url("../fonts/oxygen/oxygen-v5-latin-300.ttf") format("truetype"), url("../fonts/oxygen/oxygen-v5-latin-300.svg#Oxygen") format("svg"); 12 | } 13 | 14 | @font-face { 15 | font-family: 'Oxygen'; 16 | font-style: normal; 17 | font-weight: 400; 18 | src: url("../fonts/oxygen/oxygen-v5-latin-regular.eot"); 19 | src: local("Oxygen"), local("Oxygen-Regular"), url("../fonts/oxygen/oxygen-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/oxygen/oxygen-v5-latin-regular.woff2") format("woff2"), url("../fonts/oxygen/oxygen-v5-latin-regular.woff") format("woff"), url("../fonts/oxygen/oxygen-v5-latin-regular.ttf") format("truetype"), url("../fonts/oxygen/oxygen-v5-latin-regular.svg#Oxygen") format("svg"); 20 | } 21 | 22 | @font-face { 23 | font-family: 'Oxygen'; 24 | font-style: normal; 25 | font-weight: 700; 26 | src: url("../fonts/oxygen/oxygen-v5-latin-700.eot"); 27 | src: local("Oxygen Bold"), local("Oxygen-Bold"), url("../fonts/oxygen/oxygen-v5-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/oxygen/oxygen-v5-latin-700.woff2") format("woff2"), url("../fonts/oxygen/oxygen-v5-latin-700.woff") format("woff"), url("../fonts/oxygen/oxygen-v5-latin-700.ttf") format("truetype"), url("../fonts/oxygen/oxygen-v5-latin-700.svg#Oxygen") format("svg"); 28 | } 29 | 30 | /* ----------------------------------------------------------------------------- 31 | 32 | Root 33 | 34 | ----------------------------------------------------------------------------- */ 35 | *, 36 | *::before, 37 | *::after { 38 | box-sizing: inherit; 39 | } 40 | 41 | html { 42 | box-sizing: border-box; 43 | } 44 | 45 | html, 46 | body { 47 | margin: 0; 48 | padding: 0; 49 | height: 100%; 50 | } 51 | 52 | body { 53 | color: #6d6d6d; 54 | background-color: #272727; 55 | font-family: "Oxygen", Helvetica, sans-serif; 56 | font-size: 14px; 57 | line-height: 1.8; 58 | } 59 | 60 | /* ----------------------------------------------------------------------------- 61 | 62 | Headings 63 | 64 | ----------------------------------------------------------------------------- */ 65 | h1, 66 | h2, 67 | h3, 68 | h4, 69 | h5, 70 | h6 { 71 | color: #3b3b3b; 72 | font-weight: 700; 73 | line-height: 1.2; 74 | } 75 | 76 | /* ----------------------------------------------------------------------------- 77 | 78 | Links 79 | 80 | ----------------------------------------------------------------------------- */ 81 | a { 82 | color: #ff2850; 83 | text-decoration: none; 84 | } 85 | 86 | a:hover { 87 | color: #c10024; 88 | } 89 | 90 | /* ----------------------------------------------------------------------------- 91 | 92 | Text Stuff 93 | 94 | ----------------------------------------------------------------------------- */ 95 | b, 96 | strong { 97 | font-weight: 700; 98 | } 99 | 100 | i, 101 | em { 102 | font-style: italic; 103 | } 104 | 105 | /* ----------------------------------------------------------------------------- 106 | 107 | Embedded Content 108 | 109 | ----------------------------------------------------------------------------- */ 110 | img { 111 | max-width: 100%; 112 | height: auto; 113 | } 114 | 115 | /* ----------------------------------------------------------------------------- 116 | 117 | Primary Layout 118 | 119 | ----------------------------------------------------------------------------- */ 120 | .container { 121 | margin: 0 auto; 122 | padding: 0 24px; 123 | max-width: 960px; 124 | } 125 | 126 | @media all and (min-width: 480px) { 127 | .container { 128 | padding: 0 24px; 129 | } 130 | } 131 | 132 | @media all and (min-width: 720px) { 133 | .container { 134 | padding: 0 48px; 135 | } 136 | } 137 | 138 | /* ----------------------------------------------------------------------------- 139 | 140 | Demo Header 141 | 142 | ----------------------------------------------------------------------------- */ 143 | .demo-header { 144 | margin: 0; 145 | padding: 0; 146 | } 147 | 148 | .demo-header-nav { 149 | display: -webkit-box; 150 | display: -ms-flexbox; 151 | display: flex; 152 | -webkit-box-pack: justify; 153 | -ms-flex-pack: justify; 154 | justify-content: space-between; 155 | background-color: #ff2850; 156 | } 157 | 158 | .demo-header-nav__link { 159 | padding: 12px; 160 | color: #fff; 161 | } 162 | 163 | .demo-header-nav__link:hover { 164 | color: #fff; 165 | background-color: #c10024; 166 | } 167 | 168 | .demo-header__title { 169 | margin: 24px; 170 | padding: 0; 171 | color: #fff; 172 | font-size: 28px; 173 | font-weight: 300; 174 | text-align: center; 175 | } 176 | 177 | @media all and (min-width: 480px) { 178 | .demo-header__title { 179 | margin: 36px; 180 | font-size: 42px; 181 | } 182 | } 183 | 184 | /* ----------------------------------------------------------------------------- 185 | 186 | Demo Content 187 | 188 | ----------------------------------------------------------------------------- */ 189 | .leader-text { 190 | color: #b3b3b3; 191 | font-size: 18px; 192 | font-weight: 300; 193 | } 194 | 195 | @media all and (min-width: 480px) { 196 | .leader-text { 197 | font-size: 22px; 198 | } 199 | } 200 | 201 | /* ----------------------------------------------------------------------------- 202 | 203 | Demo Sub Nav 204 | 205 | ----------------------------------------------------------------------------- */ 206 | .demo-sub-nav { 207 | margin: 0 0 24px 0; 208 | padding: 0; 209 | } 210 | 211 | .demo-sub-nav__items { 212 | display: -webkit-box; 213 | display: -ms-flexbox; 214 | display: flex; 215 | -ms-flex-flow: row wrap; 216 | flex-flow: row wrap; 217 | -webkit-box-pack: center; 218 | -ms-flex-pack: center; 219 | justify-content: center; 220 | list-style: none; 221 | margin: 0; 222 | padding: 0; 223 | } 224 | 225 | .demo-sub-nav__item { 226 | margin: 0; 227 | padding: 4px; 228 | } 229 | 230 | .demo-sub-nav__link { 231 | display: block; 232 | margin: 0; 233 | padding: 4px 24px; 234 | border: solid 2px #ff2850; 235 | } 236 | 237 | .demo-sub-nav__link:hover, 238 | .demo-sub-nav__item.active .demo-sub-nav__link { 239 | color: #fff; 240 | background-color: #ff2850; 241 | } 242 | 243 | @media all and (min-width: 720px) { 244 | .demo-sub-nav { 245 | margin: 0 0 48px 0; 246 | } 247 | } 248 | 249 | /* ----------------------------------------------------------------------------- 250 | 251 | Demo Footer 252 | 253 | ----------------------------------------------------------------------------- */ 254 | .demo-footer { 255 | padding: 12px 0; 256 | text-align: center; 257 | } 258 | 259 | @media all and (min-width: 480px) { 260 | .demo-footer { 261 | padding: 24px 0; 262 | } 263 | } 264 | 265 | @media all and (min-width: 720px) { 266 | .demo-footer { 267 | padding: 48px 0; 268 | } 269 | } 270 | 271 | /* ----------------------------------------------------------------------------- 272 | 273 | Carbon Ad 274 | 275 | ----------------------------------------------------------------------------- */ 276 | #carbonads { 277 | position: fixed; 278 | bottom: 12px; 279 | left: 12px; 280 | z-index: 1000; 281 | padding: 24px 12px 12px 12px; 282 | width: 154px; 283 | background-color: #fff; 284 | line-height: 1.1; 285 | border: solid 1px #e7e7e7; 286 | } 287 | 288 | .carbon-wrap { 289 | display: block; 290 | margin: 0 0 4px 0; 291 | } 292 | 293 | .carbon-img { 294 | display: block; 295 | margin: 0 0 4px 0; 296 | padding: 0; 297 | width: 130px; 298 | height: 100px; 299 | } 300 | 301 | .carbon-text { 302 | color: #818181; 303 | font-size: 12px; 304 | } 305 | 306 | .carbon-poweredby { 307 | font-size: 10px; 308 | font-style: italic; 309 | } 310 | 311 | .carbonad__close { 312 | display: block; 313 | position: absolute; 314 | top: 0; 315 | left: 12px; 316 | height: 24px; 317 | font-size: 11px; 318 | line-height: 24px; 319 | } 320 | 321 | @media all and (max-width: 660px) { 322 | #carbonads { 323 | display: none; 324 | } 325 | } 326 | -------------------------------------------------------------------------------- /sass/common.scss: -------------------------------------------------------------------------------- 1 | @import "_variables"; 2 | 3 | /* ----------------------------------------------------------------------------- 4 | 5 | Fonts 6 | 7 | ----------------------------------------------------------------------------- */ 8 | 9 | @font-face { 10 | font-family: 'Oxygen'; 11 | font-style: normal; 12 | font-weight: 300; 13 | src: url('../fonts/oxygen/oxygen-v5-latin-300.eot'); 14 | src: local('Oxygen Light'), local('Oxygen-Light'), 15 | url('../fonts/oxygen/oxygen-v5-latin-300.eot?#iefix') format('embedded-opentype'), 16 | url('../fonts/oxygen/oxygen-v5-latin-300.woff2') format('woff2'), 17 | url('../fonts/oxygen/oxygen-v5-latin-300.woff') format('woff'), 18 | url('../fonts/oxygen/oxygen-v5-latin-300.ttf') format('truetype'), 19 | url('../fonts/oxygen/oxygen-v5-latin-300.svg#Oxygen') format('svg'); 20 | } 21 | 22 | @font-face { 23 | font-family: 'Oxygen'; 24 | font-style: normal; 25 | font-weight: 400; 26 | src: url('../fonts/oxygen/oxygen-v5-latin-regular.eot'); 27 | src: local('Oxygen'), local('Oxygen-Regular'), 28 | url('../fonts/oxygen/oxygen-v5-latin-regular.eot?#iefix') format('embedded-opentype'), 29 | url('../fonts/oxygen/oxygen-v5-latin-regular.woff2') format('woff2'), 30 | url('../fonts/oxygen/oxygen-v5-latin-regular.woff') format('woff'), 31 | url('../fonts/oxygen/oxygen-v5-latin-regular.ttf') format('truetype'), 32 | url('../fonts/oxygen/oxygen-v5-latin-regular.svg#Oxygen') format('svg'); 33 | } 34 | 35 | @font-face { 36 | font-family: 'Oxygen'; 37 | font-style: normal; 38 | font-weight: 700; 39 | src: url('../fonts/oxygen/oxygen-v5-latin-700.eot'); 40 | src: local('Oxygen Bold'), local('Oxygen-Bold'), 41 | url('../fonts/oxygen/oxygen-v5-latin-700.eot?#iefix') format('embedded-opentype'), 42 | url('../fonts/oxygen/oxygen-v5-latin-700.woff2') format('woff2'), 43 | url('../fonts/oxygen/oxygen-v5-latin-700.woff') format('woff'), 44 | url('../fonts/oxygen/oxygen-v5-latin-700.ttf') format('truetype'), 45 | url('../fonts/oxygen/oxygen-v5-latin-700.svg#Oxygen') format('svg'); 46 | } 47 | 48 | /* ----------------------------------------------------------------------------- 49 | 50 | Root 51 | 52 | ----------------------------------------------------------------------------- */ 53 | 54 | *, 55 | *::before, 56 | *::after { 57 | box-sizing: inherit; 58 | } 59 | 60 | html { 61 | box-sizing: border-box; 62 | } 63 | 64 | html, 65 | body { 66 | margin: 0; 67 | padding: 0; 68 | height: 100%; 69 | } 70 | 71 | body { 72 | color: $color--neutral; 73 | background-color: rgb(39, 39, 39); 74 | font-family: $font-family--primary; 75 | font-size: $font-size--small; 76 | line-height: $line-height--medium; 77 | } 78 | 79 | /* ----------------------------------------------------------------------------- 80 | 81 | Headings 82 | 83 | ----------------------------------------------------------------------------- */ 84 | 85 | h1, 86 | h2, 87 | h3, 88 | h4, 89 | h5, 90 | h6 { 91 | color: $color--neutral-dark; 92 | font-weight: 700; 93 | line-height: $line-height--small; 94 | } 95 | 96 | /* ----------------------------------------------------------------------------- 97 | 98 | Links 99 | 100 | ----------------------------------------------------------------------------- */ 101 | 102 | a { 103 | color: $color--theme; 104 | text-decoration: none; 105 | } 106 | 107 | a:hover { 108 | color: $color--theme-dark; 109 | } 110 | 111 | /* ----------------------------------------------------------------------------- 112 | 113 | Text Stuff 114 | 115 | ----------------------------------------------------------------------------- */ 116 | 117 | b, 118 | strong { 119 | font-weight: 700; 120 | } 121 | 122 | i, 123 | em { 124 | font-style: italic; 125 | } 126 | 127 | /* ----------------------------------------------------------------------------- 128 | 129 | Embedded Content 130 | 131 | ----------------------------------------------------------------------------- */ 132 | 133 | img { 134 | max-width: 100%; 135 | height: auto; 136 | } 137 | 138 | /* ----------------------------------------------------------------------------- 139 | 140 | Primary Layout 141 | 142 | ----------------------------------------------------------------------------- */ 143 | 144 | .container { 145 | margin: 0 auto; 146 | padding: 0 24px; 147 | max-width: 960px; 148 | } 149 | 150 | @media all and (min-width: $breakpoint--small) { 151 | .container { 152 | padding: 0 24px; 153 | } 154 | } 155 | 156 | @media all and (min-width: $breakpoint--medium) { 157 | .container { 158 | padding: 0 48px; 159 | } 160 | } 161 | 162 | /* ----------------------------------------------------------------------------- 163 | 164 | Demo Header 165 | 166 | ----------------------------------------------------------------------------- */ 167 | 168 | .demo-header { 169 | margin: 0; 170 | padding: 0; 171 | } 172 | 173 | .demo-header-nav { 174 | display: flex; 175 | justify-content: space-between; 176 | background-color: $color--theme; 177 | } 178 | 179 | .demo-header-nav__link { 180 | padding: 12px; 181 | color: #fff; 182 | } 183 | 184 | .demo-header-nav__link:hover { 185 | color: #fff; 186 | background-color: $color--theme-dark; 187 | } 188 | 189 | .demo-header__title { 190 | margin: 24px; 191 | padding: 0; 192 | color: #fff; 193 | font-size: $font-size--xlarge; 194 | font-weight: 300; 195 | text-align: center; 196 | } 197 | 198 | @media all and (min-width: $breakpoint--small) { 199 | .demo-header__title { 200 | margin: 36px; 201 | font-size: $font-size--ultra; 202 | } 203 | } 204 | 205 | /* ----------------------------------------------------------------------------- 206 | 207 | Demo Content 208 | 209 | ----------------------------------------------------------------------------- */ 210 | 211 | .leader-text { 212 | color: $color--neutral-xlight; 213 | font-size: $font-size--medium; 214 | font-weight: 300; 215 | } 216 | 217 | @media all and (min-width: $breakpoint--small) { 218 | .leader-text { 219 | font-size: $font-size--large; 220 | } 221 | } 222 | 223 | /* ----------------------------------------------------------------------------- 224 | 225 | Demo Sub Nav 226 | 227 | ----------------------------------------------------------------------------- */ 228 | 229 | .demo-sub-nav { 230 | margin: 0 0 24px 0; 231 | padding: 0; 232 | } 233 | 234 | .demo-sub-nav__items { 235 | display: flex; 236 | flex-flow: row wrap; 237 | justify-content: center; 238 | list-style: none; 239 | margin: 0; 240 | padding: 0; 241 | } 242 | 243 | .demo-sub-nav__item { 244 | margin: 0; 245 | padding: 4px; 246 | } 247 | 248 | .demo-sub-nav__link { 249 | display: block; 250 | margin: 0; 251 | padding: 4px 24px; 252 | border: solid 2px $color--theme; 253 | } 254 | 255 | .demo-sub-nav__link:hover, 256 | .demo-sub-nav__item.active .demo-sub-nav__link { 257 | color: #fff; 258 | background-color: $color--theme; 259 | } 260 | 261 | @media all and (min-width: $breakpoint--medium) { 262 | .demo-sub-nav { 263 | margin: 0 0 48px 0; 264 | } 265 | } 266 | 267 | /* ----------------------------------------------------------------------------- 268 | 269 | Demo Footer 270 | 271 | ----------------------------------------------------------------------------- */ 272 | 273 | .demo-footer { 274 | padding: 12px 0; 275 | text-align: center; 276 | } 277 | 278 | @media all and (min-width: $breakpoint--small) { 279 | .demo-footer { 280 | padding: 24px 0; 281 | } 282 | } 283 | 284 | @media all and (min-width: $breakpoint--medium) { 285 | .demo-footer { 286 | padding: 48px 0; 287 | } 288 | } 289 | 290 | /* ----------------------------------------------------------------------------- 291 | 292 | Carbon Ad 293 | 294 | ----------------------------------------------------------------------------- */ 295 | 296 | #carbonads { 297 | position: fixed; 298 | bottom: 12px; left: 12px; 299 | z-index: 1000; 300 | padding: 24px 12px 12px 12px; 301 | width: 154px; 302 | background-color: #fff; 303 | line-height: 1.1; 304 | border: solid 1px $color--neutral-xxlight; 305 | } 306 | 307 | .carbon-wrap { 308 | display: block; 309 | margin: 0 0 4px 0; 310 | } 311 | 312 | .carbon-img { 313 | display: block; 314 | margin: 0 0 4px 0; 315 | padding: 0; 316 | width: 130px; 317 | height: 100px; 318 | } 319 | 320 | .carbon-text { 321 | color: rgb(129,129,129); 322 | font-size: 12px; 323 | } 324 | 325 | .carbon-poweredby { 326 | font-size: 10px; 327 | font-style: italic; 328 | } 329 | 330 | .carbonad__close { 331 | display: block; 332 | position: absolute; 333 | top: 0; 334 | left: 12px; 335 | height: 24px; 336 | font-size: 11px; 337 | line-height: 24px; 338 | } 339 | 340 | @media all and (max-width: 660px) { 341 | #carbonads { 342 | display: none; 343 | } 344 | } 345 | -------------------------------------------------------------------------------- /css/circle-menu.css: -------------------------------------------------------------------------------- 1 | /* ----------------------------------------------------------------------------- 2 | 3 | Circle Menu Component 4 | 5 | ----------------------------------------------------------------------------- */ 6 | /** 7 | * This is the actual menu component. It consists of a menu element with an 8 | * unordered list inside, and also a button to toggle the actual menu. 9 | * It's fixed to the bottom-right of the screen, and each of the items are 10 | * positioned absolutely inside the parent menu tag. The default set up above is 11 | * 5 menu items. Because all the transforms and such are calculated wrt 12 | * this number, you'll need to edit it accordingly depending on how many items 13 | * you decide to put in the markup. 14 | * 15 | * Example markup: 16 | * 17 | * 18 | *
    19 | *
  • 20 | * 21 | *
    • 22 | *
  • 23 | * 24 | *
    • 25 | * ... 26 | *
27 | * 28 | */ 29 | .c-circle-menu { 30 | position: fixed; 31 | bottom: 12px; 32 | right: 12px; 33 | z-index: 1000; 34 | width: 48px; 35 | height: 48px; 36 | border-radius: 24px; 37 | } 38 | 39 | @media (min-width: 480px) and (min-height: 480px) { 40 | .c-circle-menu { 41 | width: 96px; 42 | height: 96px; 43 | border-radius: 48px; 44 | } 45 | } 46 | 47 | .c-circle-menu__items { 48 | display: block; 49 | list-style: none; 50 | position: absolute; 51 | z-index: 2; 52 | margin: 0; 53 | padding: 0; 54 | } 55 | 56 | .c-circle-menu__item { 57 | display: block; 58 | position: absolute; 59 | top: 0; 60 | left: 0; 61 | width: 48px; 62 | height: 48px; 63 | border-radius: 24px; 64 | opacity: 0; 65 | -webkit-transition: opacity, -webkit-transform; 66 | transition: opacity, -webkit-transform; 67 | transition: transform, opacity; 68 | transition: transform, opacity, -webkit-transform; 69 | -webkit-transition-duration: 0.3s, 0.3s; 70 | transition-duration: 0.3s, 0.3s; 71 | -webkit-transition-timing-function: cubic-bezier(0.35, -0.59, 0.47, 0.97); 72 | transition-timing-function: cubic-bezier(0.35, -0.59, 0.47, 0.97); 73 | } 74 | 75 | @media (min-width: 480px) and (min-height: 480px) { 76 | .c-circle-menu__item { 77 | width: 96px; 78 | height: 96px; 79 | border-radius: 48px; 80 | } 81 | } 82 | 83 | /** 84 | * Transisition delays at the default state. 85 | */ 86 | .c-circle-menu__item:nth-child(1) { 87 | -webkit-transition-delay: 0.4s; 88 | transition-delay: 0.4s; 89 | } 90 | 91 | .c-circle-menu__item:nth-child(2) { 92 | -webkit-transition-delay: 0.3s; 93 | transition-delay: 0.3s; 94 | } 95 | 96 | .c-circle-menu__item:nth-child(3) { 97 | -webkit-transition-delay: 0.2s; 98 | transition-delay: 0.2s; 99 | } 100 | 101 | .c-circle-menu__item:nth-child(4) { 102 | -webkit-transition-delay: 0.1s; 103 | transition-delay: 0.1s; 104 | } 105 | 106 | .c-circle-menu__item:nth-child(5) { 107 | -webkit-transition-delay: 0s; 108 | transition-delay: 0s; 109 | } 110 | 111 | /** 112 | * We're using the .is-active class, which is added to the menu via JavaScript. 113 | * Once the menu is active, the items inherit the properties below. We will 114 | * manually write out the transform properties for first and last items, as we 115 | * already know their position. For all items in between though, we'll use some 116 | * polar-to-cartesian math and some Sass functions to get the positioning. 117 | */ 118 | .c-circle-menu.is-active .c-circle-menu__item { 119 | -webkit-transition-timing-function: cubic-bezier(0.35, 0.03, 0.47, 1.59); 120 | transition-timing-function: cubic-bezier(0.35, 0.03, 0.47, 1.59); 121 | } 122 | 123 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(1) { 124 | -webkit-transition-delay: 0s; 125 | transition-delay: 0s; 126 | -webkit-transform: translate(-144px, 0); 127 | transform: translate(-144px, 0); 128 | } 129 | 130 | @media (min-width: 480px) and (min-height: 480px) { 131 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(1) { 132 | -webkit-transform: translate(-288px, 0); 133 | transform: translate(-288px, 0); 134 | } 135 | } 136 | 137 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(2) { 138 | -webkit-transition-delay: 0.1s; 139 | transition-delay: 0.1s; 140 | -webkit-transform: translate(-134px, -56px); 141 | transform: translate(-134px, -56px); 142 | } 143 | 144 | @media (min-width: 480px) and (min-height: 480px) { 145 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(2) { 146 | -webkit-transform: translate(-267px, -111px); 147 | transform: translate(-267px, -111px); 148 | } 149 | } 150 | 151 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(3) { 152 | -webkit-transition-delay: 0.2s; 153 | transition-delay: 0.2s; 154 | -webkit-transform: translate(-102px, -102px); 155 | transform: translate(-102px, -102px); 156 | } 157 | 158 | @media (min-width: 480px) and (min-height: 480px) { 159 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(3) { 160 | -webkit-transform: translate(-204px, -204px); 161 | transform: translate(-204px, -204px); 162 | } 163 | } 164 | 165 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(4) { 166 | -webkit-transition-delay: 0.3s; 167 | transition-delay: 0.3s; 168 | -webkit-transform: translate(-56px, -134px); 169 | transform: translate(-56px, -134px); 170 | } 171 | 172 | @media (min-width: 480px) and (min-height: 480px) { 173 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(4) { 174 | -webkit-transform: translate(-111px, -267px); 175 | transform: translate(-111px, -267px); 176 | } 177 | } 178 | 179 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(5) { 180 | -webkit-transition-delay: 0.4s; 181 | transition-delay: 0.4s; 182 | -webkit-transform: translate(0, -144px); 183 | transform: translate(0, -144px); 184 | } 185 | 186 | @media (min-width: 480px) and (min-height: 480px) { 187 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(5) { 188 | -webkit-transform: translate(0, -288px); 189 | transform: translate(0, -288px); 190 | } 191 | } 192 | 193 | /** 194 | * Apart from the transform properties, we'll also make sure the items get 195 | * the correct opacity. 196 | */ 197 | .c-circle-menu.is-active .c-circle-menu__item { 198 | opacity: 1; 199 | } 200 | 201 | /** 202 | * Let's style the links now. This is just boilerplate stuff, and of course, 203 | * you'll probably want to change up the icons to match your needs. In any case, 204 | * we'll do it here for the sake of completion. 205 | */ 206 | .c-circle-menu__link { 207 | display: block; 208 | width: 100%; 209 | height: 100%; 210 | border-radius: 24px; 211 | box-shadow: inset 0 0 0 2px #fff; 212 | } 213 | 214 | @media (min-width: 480px) and (min-height: 480px) { 215 | .c-circle-menu__link { 216 | border-radius: 48px; 217 | } 218 | } 219 | 220 | .c-circle-menu__link img { 221 | display: block; 222 | max-width: 100%; 223 | height: auto; 224 | } 225 | 226 | .c-circle-menu__link:hover { 227 | box-shadow: inset 0 0 0 2px #ff283c; 228 | } 229 | 230 | /* ----------------------------------------------------------------------------- 231 | 232 | The Toggle Component 233 | 234 | ----------------------------------------------------------------------------- */ 235 | /** 236 | * The toggle is a button element, and as such requires some resets that are 237 | * unique to buttons. This button also inherits some funky stuff from my 238 | * CSS animating hamburger menu icons demo, which can be found at this url: 239 | * https://github.com/callmenick/Animating-Hamburger-Icons 240 | */ 241 | .c-circle-menu__toggle { 242 | display: block; 243 | position: absolute; 244 | z-index: 100; 245 | margin: 0; 246 | padding: 0; 247 | width: 48px; 248 | height: 48px; 249 | background-color: #ff283c; 250 | font: inherit; 251 | font-size: 0; 252 | text-indent: -9999px; 253 | border-radius: 24px; 254 | -webkit-transition: background 0.3s; 255 | transition: background 0.3s; 256 | /* reset some browser defaults */ 257 | cursor: pointer; 258 | border: none; 259 | -webkit-appearance: none; 260 | -moz-appearance: none; 261 | appearance: none; 262 | box-shadow: none; 263 | } 264 | 265 | @media (min-width: 480px) and (min-height: 480px) { 266 | .c-circle-menu__toggle { 267 | width: 96px; 268 | height: 96px; 269 | border-radius: 48px; 270 | } 271 | } 272 | 273 | .c-circle-menu__toggle:hover, 274 | .c-circle-menu__toggle:focus, 275 | .c-circle-menu__toggle.is-active { 276 | outline: none; 277 | background-color: #c10012; 278 | } 279 | 280 | .c-circle-menu__toggle span, 281 | .c-circle-menu__toggle span::before, 282 | .c-circle-menu__toggle span::after { 283 | display: block; 284 | position: absolute; 285 | height: 4px; 286 | background: #fff; 287 | border-radius: 1px; 288 | } 289 | 290 | @media (min-width: 480px) and (min-height: 480px) { 291 | .c-circle-menu__toggle span, 292 | .c-circle-menu__toggle span::before, 293 | .c-circle-menu__toggle span::after { 294 | height: 8px; 295 | border-radius: 2px; 296 | } 297 | } 298 | 299 | .c-circle-menu__toggle span { 300 | top: 22px; 301 | left: 10px; 302 | right: 10px; 303 | -webkit-transition: background 0.3s; 304 | transition: background 0.3s; 305 | } 306 | 307 | @media (min-width: 480px) and (min-height: 480px) { 308 | .c-circle-menu__toggle span { 309 | top: 44px; 310 | left: 20px; 311 | right: 20px; 312 | } 313 | } 314 | 315 | .c-circle-menu__toggle span::before, 316 | .c-circle-menu__toggle span::after { 317 | left: 0; 318 | width: 100%; 319 | content: ""; 320 | -webkit-transition-duration: 0.3s, 0.3s; 321 | transition-duration: 0.3s, 0.3s; 322 | -webkit-transition-delay: 0.3s, 0s; 323 | transition-delay: 0.3s, 0s; 324 | } 325 | 326 | .c-circle-menu__toggle span::before { 327 | top: -8px; 328 | -webkit-transition-property: top, -webkit-transform; 329 | transition-property: top, -webkit-transform; 330 | transition-property: top, transform; 331 | transition-property: top, transform, -webkit-transform; 332 | } 333 | 334 | @media (min-width: 480px) and (min-height: 480px) { 335 | .c-circle-menu__toggle span::before { 336 | top: -16px; 337 | } 338 | } 339 | 340 | .c-circle-menu__toggle span::after { 341 | bottom: -8px; 342 | -webkit-transition-property: bottom, -webkit-transform; 343 | transition-property: bottom, -webkit-transform; 344 | transition-property: bottom, transform; 345 | transition-property: bottom, transform, -webkit-transform; 346 | } 347 | 348 | @media (min-width: 480px) and (min-height: 480px) { 349 | .c-circle-menu__toggle span::after { 350 | bottom: -16px; 351 | } 352 | } 353 | 354 | /* button active state */ 355 | .c-circle-menu__toggle.is-active span { 356 | background: none; 357 | } 358 | 359 | .c-circle-menu__toggle.is-active span::before { 360 | top: 0; 361 | -webkit-transform: rotate(45deg); 362 | transform: rotate(45deg); 363 | -webkit-transition-delay: 0s, 0.3s; 364 | transition-delay: 0s, 0.3s; 365 | } 366 | 367 | .c-circle-menu__toggle.is-active span::after { 368 | bottom: 0; 369 | -webkit-transform: rotate(-45deg); 370 | transform: rotate(-45deg); 371 | -webkit-transition-delay: 0s, 0.3s; 372 | transition-delay: 0s, 0.3s; 373 | } 374 | 375 | /* ----------------------------------------------------------------------------- 376 | 377 | The Mask Component 378 | 379 | ----------------------------------------------------------------------------- */ 380 | /** 381 | * Here's the mask component, which actually gets created and inserted to the 382 | * DOM via JavaScript. It simply acts as an overlay to draw attention to the 383 | * menu when it is active. It also uses the .is-acvite state class. 384 | */ 385 | .c-circle-menu__mask { 386 | position: fixed; 387 | top: 0; 388 | left: 0; 389 | z-index: 1; 390 | visibility: hidden; 391 | opacity: 0; 392 | width: 100%; 393 | height: 100%; 394 | background-color: rgba(0, 0, 0, 0.8); 395 | -webkit-transition: opacity 0.3s, visibility 0.3s; 396 | transition: opacity 0.3s, visibility 0.3s; 397 | } 398 | 399 | .c-circle-menu__mask.is-active { 400 | opacity: 1; 401 | visibility: visible; 402 | } 403 | -------------------------------------------------------------------------------- /sass/circle-menu.scss: -------------------------------------------------------------------------------- 1 | @import "_circle-menu-helpers"; 2 | 3 | // ----------------------------------------------------------------------------- 4 | // 5 | // Configuration 6 | // 7 | // Configure the variables below to override defaults. If you want to tweak any 8 | // others, scroll through the individual sections below. More info about these 9 | // variables can be found by reading through the section comments, bue here's 10 | // a general rundown: 11 | // 12 | // 1. Set up the initial menu item radius. 13 | // 2. Decalare how many items our menu will contain. 14 | // 3. Set up a theme colour. 15 | // 4. The spread radius, which is how far the menu items spread from the origin. 16 | // 5. The delay increment, which is how much delay there is between each menu 17 | // item leaving from / returning to the origin. 18 | // 6. The position of the menu, chosen from one of four values: 19 | // `bottom-right` - bottom right corner (this is the default) 20 | // `bottom-left` - bottom left corner 21 | // `top-left` - top left corner 22 | // `top-right` - top right corner 23 | // 7. Minimum height at which menu increases size. 24 | // 8. Minimum width at which menu increases size. 25 | // 9. The height of a bar in the toggle button. 26 | // 10. The spacing between bars in the toggle button. 27 | // 11. The padding between the left and right of the toggle button container and 28 | // the bars. 29 | // 30 | // ----------------------------------------------------------------------------- 31 | 32 | // $menu-item-radius: 48px; [1] 33 | // $num-items: 5; [2] 34 | // $menu-theme-color: rgb(255, 40, 60); [3] 35 | // $spread-radius: 144px; [4] 36 | // $delay-increment: 0.1s; [5] 37 | // $menu-position: "bottom-right"; [6] 38 | // $mq-height: 480px; [7] 39 | // $mq-width: 480px; [8] 40 | // $button-bar-height: 4px; [9] 41 | // $button-bar-spacing: 4px; [10] 42 | // $button-lr-padding: 10px; [11] 43 | 44 | // ----------------------------------------------------------------------------- 45 | // 46 | // Menu Items Setup 47 | // 48 | // Some configuration for the appearance of the menu items. These include: 49 | // 50 | // 1. Set up the initial menu item radius. 51 | // 2. Calculate initial diameter as a function of the radius. 52 | // 3. Decalare how many items our menu will contain. 53 | // 4. Set up a theme colour - I chose pink. 54 | // 55 | // ----------------------------------------------------------------------------- 56 | 57 | $menu-item-radius: 24px !default; // [1] 58 | $menu-item-diameter: $menu-item-radius*2; // [2] 59 | $num-items: 5 !default; // [3] 60 | $menu-theme-color: rgb(255, 40, 60) !default; // [4] 61 | 62 | // ----------------------------------------------------------------------------- 63 | // 64 | // Menu Positional & Timing Setup 65 | // 66 | // These variables are strictly related to position and timing of menu 67 | // items. It's important to remember that they fly out along a spread radius, 68 | // so the number of items combined with the delays and spread radius will 69 | // be responsible for actually positioning the menu. Here's what is set 70 | // up: 71 | // 72 | // 1. The angular increment between menu items which is a function of the number 73 | // of menu items. 74 | // 2. The angle, which is initialised to the increment. 75 | // 3. The spread radius, which is how far the menu items spread from the origin. 76 | // 4. The delay increment, which is how much delay there is between each menu 77 | // item leaving from / returning to the origin. 78 | // 5. The initial delay, which is initialised to the delay increment. 79 | // 6. The "n minus 1 initial delay", which is the initial delay for the n-1 80 | // menu item. 81 | // 7. The final delay, which is the delay of the final menu item. 82 | // 83 | // ----------------------------------------------------------------------------- 84 | 85 | $increment: 90deg/($num-items - 1); // [1] 86 | $angle: $increment; // [2] 87 | $spread-radius: 144px !default; // [3] 88 | $delay-increment: 0.1s !default; // [4] 89 | $initial-delay: $delay-increment; // [5] 90 | $n-minus-1-initial-delay: ($num-items - 2) * $delay-increment; // [6] 91 | $final-delay: ($num-items - 1) * $delay-increment; // [7] 92 | 93 | // ----------------------------------------------------------------------------- 94 | // 95 | // Position Mixin 96 | // 97 | // By default, the menu is at the bottom right corner of the screen, and items 98 | // spread out in a quarter circle away from this point. You can change up the 99 | // $menu-position variable to move it to any of the four corners. Here's the 100 | // available options: 101 | // 102 | // `bottom-right` - bottom right corner (this is the default) 103 | // `bottom-left` - bottom left corner 104 | // `top-left` - top left corner 105 | // `top-right` - top right corner 106 | // 107 | // The functions below will check the variable and position accordingly. They 108 | // are: 109 | // 110 | // 1. get-menu-position, which positions the menu in the correct corner 111 | // 2. translate-menu-item, which calculates the coordinates to translate menu 112 | // items to, based on spread radius and angle. 113 | // 114 | // ----------------------------------------------------------------------------- 115 | 116 | $menu-position: "bottom-right" !default; 117 | 118 | // [1] 119 | 120 | @mixin get-menu-position() { 121 | @if ($menu-position == "bottom-right") { 122 | bottom: 12px; 123 | right: 12px; 124 | } 125 | 126 | @if ($menu-position == "bottom-left") { 127 | bottom: 12px; 128 | left: 12px; 129 | } 130 | 131 | @if ($menu-position == "top-left") { 132 | top: 12px; 133 | left: 12px; 134 | } 135 | 136 | @if ($menu-position == "top-right") { 137 | top: 12px; 138 | right: 12px; 139 | } 140 | } 141 | 142 | // [2] 143 | 144 | @mixin translate-menu-item($r, $theta, $n) { 145 | 146 | @if ($menu-position == "bottom-right") { 147 | @if ($n == "first") { 148 | transform: translate(-$r, 0); 149 | } @else if ($n == "last") { 150 | transform: translate(0, -$r); 151 | } @else { 152 | transform: translate(floor(-$r * cos($theta)), floor(-$r * sin($theta))); 153 | } 154 | } 155 | 156 | @if ($menu-position == "bottom-left") { 157 | @if ($n == "first") { 158 | transform: translate($r, 0); 159 | } @else if ($n == "last") { 160 | transform: translate(0, -$r); 161 | } @else { 162 | transform: translate(floor($r * cos($theta)), floor(-$r * sin($theta))); 163 | } 164 | } 165 | 166 | @if ($menu-position == "top-left") { 167 | @if ($n == "first") { 168 | transform: translate($r, 0); 169 | } @else if ($n == "last") { 170 | transform: translate(0, $r); 171 | } @else { 172 | transform: translate(floor($r * cos($theta)), floor($r * sin($theta))); 173 | } 174 | } 175 | 176 | @if ($menu-position == "top-right") { 177 | @if ($n == "first") { 178 | transform: translate(-$r, 0); 179 | } @else if ($n == "last") { 180 | transform: translate(0, $r); 181 | } @else { 182 | transform: translate(floor(-$r * cos($theta)), floor($r * sin($theta))); 183 | } 184 | } 185 | 186 | } 187 | 188 | // ----------------------------------------------------------------------------- 189 | // 190 | // Toggle Switch Setup 191 | // https://github.com/callmenick/Animating-Hamburger-Icons 192 | // 193 | // Set up some initial configuration variables for the toggle switch. The 194 | // following variables are set: 195 | // 196 | // 1. The initial height of a bar. 197 | // 2. The initial spacing in between bars. 198 | // 3. The left and right padding of the bars. 199 | // 200 | // ----------------------------------------------------------------------------- 201 | 202 | $button-bar-height: 4px !default; // [1] 203 | $button-bar-spacing: 4px !default; // [2] 204 | $button-lr-padding: 10px !default; // [3] 205 | 206 | // ----------------------------------------------------------------------------- 207 | // 208 | // Media Query Mixin 209 | // 210 | // This mixin is used in the actual CSS to make the menu items and spread radius 211 | // bigger beyond a certain minimum width and height. Edit the two variables 212 | // as you see fit. Variables are: 213 | // 214 | // 1. Minimum height at which menu increases size. 215 | // 2. Minimum width at which menu increases size. 216 | // 217 | // ----------------------------------------------------------------------------- 218 | 219 | $mq-height: 480px !default; 220 | $mq-width: 480px !default; 221 | 222 | @mixin mq { 223 | @media (min-width: #{$mq-width}) and (min-height: #{$mq-height}) { 224 | @content; 225 | } 226 | } 227 | 228 | /* ----------------------------------------------------------------------------- 229 | 230 | Circle Menu Component 231 | 232 | ----------------------------------------------------------------------------- */ 233 | 234 | /** 235 | * This is the actual menu component. It consists of a menu element with an 236 | * unordered list inside, and also a button to toggle the actual menu. 237 | * It's fixed to the bottom-right of the screen, and each of the items are 238 | * positioned absolutely inside the parent menu tag. The default set up above is 239 | * 5 menu items. Because all the transforms and such are calculated wrt 240 | * this number, you'll need to edit it accordingly depending on how many items 241 | * you decide to put in the markup. 242 | * 243 | * Example markup: 244 | * 245 | * 246 | *
    247 | *
  • 248 | * 249 | *
    • 250 | *
  • 251 | * 252 | *
    • 253 | * ... 254 | *
255 | * 256 | */ 257 | 258 | .c-circle-menu { 259 | position: fixed; 260 | @include get-menu-position; 261 | z-index: 1000; 262 | width: $menu-item-diameter; 263 | height: $menu-item-diameter; 264 | border-radius: $menu-item-radius; 265 | 266 | @include mq { 267 | width: $menu-item-diameter * 2; 268 | height: $menu-item-diameter * 2; 269 | border-radius: $menu-item-radius * 2; 270 | } 271 | } 272 | 273 | .c-circle-menu__items { 274 | display: block; 275 | list-style: none; 276 | position: absolute; 277 | z-index: 2; 278 | margin: 0; 279 | padding: 0; 280 | } 281 | 282 | .c-circle-menu__item { 283 | display: block; 284 | position: absolute; 285 | top: 0; 286 | left: 0; 287 | width: $menu-item-diameter; 288 | height: $menu-item-diameter; 289 | border-radius: $menu-item-radius; 290 | opacity: 0; 291 | transition: transform, opacity; 292 | transition-duration: 0.3s, 0.3s; 293 | transition-timing-function: cubic-bezier(.35, -.59, .47, .97); 294 | 295 | @include mq { 296 | width: $menu-item-diameter * 2; 297 | height: $menu-item-diameter * 2; 298 | border-radius: $menu-item-radius * 2; 299 | } 300 | } 301 | 302 | /** 303 | * Transisition delays at the default state. 304 | */ 305 | 306 | .c-circle-menu__item:nth-child(1) { 307 | transition-delay: $final-delay; 308 | } 309 | 310 | @for $i from 2 through ($num-items - 1) { 311 | .c-circle-menu__item:nth-child(#{$i}) { 312 | transition-delay: $n-minus-1-initial-delay; 313 | } 314 | $n-minus-1-initial-delay: $n-minus-1-initial-delay - $delay-increment; 315 | } 316 | 317 | .c-circle-menu__item:nth-child(#{$num-items}) { 318 | transition-delay: 0s; 319 | } 320 | 321 | /** 322 | * We're using the .is-active class, which is added to the menu via JavaScript. 323 | * Once the menu is active, the items inherit the properties below. We will 324 | * manually write out the transform properties for first and last items, as we 325 | * already know their position. For all items in between though, we'll use some 326 | * polar-to-cartesian math and some Sass functions to get the positioning. 327 | */ 328 | 329 | .c-circle-menu.is-active .c-circle-menu__item { 330 | transition-timing-function: cubic-bezier(.35, .03, .47, 1.59); 331 | } 332 | 333 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(1) { 334 | transition-delay: 0s; 335 | @include translate-menu-item($spread-radius, 0, "first"); 336 | 337 | @include mq { 338 | @include translate-menu-item($spread-radius * 2, 0deg, "first"); 339 | } 340 | } 341 | 342 | @for $i from 2 through ($num-items - 1) { 343 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(#{$i}) { 344 | transition-delay: $initial-delay; 345 | @include translate-menu-item($spread-radius, $angle, ""); 346 | 347 | @include mq { 348 | @include translate-menu-item($spread-radius * 2, $angle, ""); 349 | } 350 | } 351 | $initial-delay: $initial-delay + $delay-increment; 352 | $angle: $angle + $increment; 353 | } 354 | 355 | .c-circle-menu.is-active .c-circle-menu__item:nth-child(#{$num-items}) { 356 | transition-delay: $final-delay; 357 | @include translate-menu-item($spread-radius, 90deg, "last"); 358 | 359 | @include mq { 360 | @include translate-menu-item($spread-radius * 2, 90deg, "last"); 361 | } 362 | } 363 | 364 | /** 365 | * Apart from the transform properties, we'll also make sure the items get 366 | * the correct opacity. 367 | */ 368 | 369 | .c-circle-menu.is-active .c-circle-menu__item { 370 | opacity: 1; 371 | } 372 | 373 | /** 374 | * Let's style the links now. This is just boilerplate stuff, and of course, 375 | * you'll probably want to change up the icons to match your needs. In any case, 376 | * we'll do it here for the sake of completion. 377 | */ 378 | 379 | .c-circle-menu__link { 380 | display: block; 381 | width: 100%; 382 | height: 100%; 383 | border-radius: $menu-item-radius; 384 | box-shadow: inset 0 0 0 2px #fff; 385 | 386 | @include mq { 387 | border-radius: $menu-item-radius * 2; 388 | } 389 | } 390 | 391 | .c-circle-menu__link img { 392 | display: block; 393 | max-width: 100%; 394 | height: auto; 395 | } 396 | 397 | .c-circle-menu__link:hover { 398 | box-shadow: inset 0 0 0 2px $menu-theme-color; 399 | } 400 | 401 | /* ----------------------------------------------------------------------------- 402 | 403 | The Toggle Component 404 | 405 | ----------------------------------------------------------------------------- */ 406 | 407 | /** 408 | * The toggle is a button element, and as such requires some resets that are 409 | * unique to buttons. This button also inherits some funky stuff from my 410 | * CSS animating hamburger menu icons demo, which can be found at this url: 411 | * https://github.com/callmenick/Animating-Hamburger-Icons 412 | */ 413 | 414 | .c-circle-menu__toggle { 415 | display: block; 416 | position: absolute; 417 | z-index: 100; 418 | margin: 0; 419 | padding: 0; 420 | width: $menu-item-diameter; 421 | height: $menu-item-diameter; 422 | background-color: $menu-theme-color; 423 | font: inherit; 424 | font-size: 0; 425 | text-indent: -9999px; 426 | border-radius: $menu-item-radius; 427 | transition: background 0.3s; 428 | 429 | /* reset some browser defaults */ 430 | cursor: pointer; 431 | border: none; 432 | -webkit-appearance: none; 433 | -moz-appearance: none; 434 | appearance: none; 435 | box-shadow: none; 436 | 437 | @include mq { 438 | width: $menu-item-diameter * 2; 439 | height: $menu-item-diameter * 2; 440 | border-radius: $menu-item-radius * 2; 441 | } 442 | } 443 | 444 | .c-circle-menu__toggle:hover, 445 | .c-circle-menu__toggle:focus, 446 | .c-circle-menu__toggle.is-active { 447 | outline: none; 448 | background-color: darken($menu-theme-color, 20%); 449 | } 450 | 451 | .c-circle-menu__toggle span, 452 | .c-circle-menu__toggle span::before, 453 | .c-circle-menu__toggle span::after { 454 | display: block; 455 | position: absolute; 456 | height: $button-bar-height; 457 | background: #fff; 458 | border-radius: $button-bar-height/4; 459 | 460 | @include mq { 461 | height: $button-bar-height * 2; 462 | border-radius: ($button-bar-height * 2)/4; 463 | } 464 | } 465 | 466 | .c-circle-menu__toggle span { 467 | top: $menu-item-radius - $button-bar-height/2; 468 | left: $button-lr-padding; 469 | right: $button-lr-padding; 470 | transition: background 0.3s; 471 | 472 | @include mq { 473 | top: ($menu-item-radius * 2) - ($button-bar-height * 2)/2; 474 | left: $button-lr-padding * 2; 475 | right: $button-lr-padding * 2; 476 | } 477 | } 478 | 479 | .c-circle-menu__toggle span::before, 480 | .c-circle-menu__toggle span::after { 481 | left: 0; 482 | width: 100%; 483 | content: ""; 484 | transition-duration: 0.3s, 0.3s; 485 | transition-delay: 0.3s, 0s; 486 | } 487 | 488 | .c-circle-menu__toggle span::before { 489 | top: -$button-bar-height - $button-bar-spacing; 490 | transition-property: top, transform; 491 | 492 | @include mq { 493 | top: -($button-bar-height * 2) - ($button-bar-spacing * 2); 494 | } 495 | } 496 | 497 | .c-circle-menu__toggle span::after { 498 | bottom: -$button-bar-height - $button-bar-spacing; 499 | transition-property: bottom, transform; 500 | 501 | @include mq { 502 | bottom: -($button-bar-height * 2) - ($button-bar-spacing * 2); 503 | } 504 | } 505 | 506 | /* button active state */ 507 | 508 | .c-circle-menu__toggle.is-active span { 509 | background: none; 510 | } 511 | 512 | .c-circle-menu__toggle.is-active span::before { 513 | top: 0; 514 | transform: rotate(45deg); 515 | transition-delay: 0s, 0.3s; 516 | } 517 | 518 | .c-circle-menu__toggle.is-active span::after { 519 | bottom: 0; 520 | transform: rotate(-45deg); 521 | transition-delay: 0s, 0.3s; 522 | } 523 | 524 | /* ----------------------------------------------------------------------------- 525 | 526 | The Mask Component 527 | 528 | ----------------------------------------------------------------------------- */ 529 | 530 | /** 531 | * Here's the mask component, which actually gets created and inserted to the 532 | * DOM via JavaScript. It simply acts as an overlay to draw attention to the 533 | * menu when it is active. It also uses the .is-acvite state class. 534 | */ 535 | 536 | .c-circle-menu__mask { 537 | position: fixed; 538 | top: 0; 539 | left: 0; 540 | z-index: 1; 541 | visibility: hidden; 542 | opacity: 0; 543 | width: 100%; 544 | height: 100%; 545 | background-color: rgba(0, 0, 0, 0.8); 546 | transition: opacity 0.3s, visibility 0.3s; 547 | } 548 | 549 | .c-circle-menu__mask.is-active { 550 | opacity: 1; 551 | visibility: visible; 552 | } 553 | -------------------------------------------------------------------------------- /css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */.fa,.fa-stack{display:inline-block}.fa-fw,.fa-li{text-align:center}@font-face{font-family:FontAwesome;src:url(../fonts/font-awesome/fontawesome-webfont.eot?v=4.3.0);src:url(../fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.3.0)format('embedded-opentype'),url(../fonts/font-awesome/fontawesome-webfont.woff2?v=4.3.0)format('woff2'),url(../fonts/font-awesome/fontawesome-webfont.woff?v=4.3.0)format('woff'),url(../fonts/font-awesome/fontawesome-webfont.ttf?v=4.3.0)format('truetype'),url(../fonts/font-awesome/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular)format('svg');font-weight:400;font-style:normal}.fa{font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{-webkit-filter:none;filter:none}.fa-stack{position:relative;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-close:before,.fa-remove:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-repeat:before,.fa-rotate-right:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-image:before,.fa-photo:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-exclamation-triangle:before,.fa-warning:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-floppy-o:before,.fa-save:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-bars:before,.fa-navicon:before,.fa-reorder:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-bolt:before,.fa-flash:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-chain-broken:before,.fa-unlink:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-caret-square-o-down:before,.fa-toggle-down:before{content:"\f150"}.fa-caret-square-o-up:before,.fa-toggle-up:before{content:"\f151"}.fa-caret-square-o-right:before,.fa-toggle-right:before{content:"\f152"}.fa-eur:before,.fa-euro:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-inr:before,.fa-rupee:before{content:"\f156"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble:before{content:"\f158"}.fa-krw:before,.fa-won:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-caret-square-o-left:before,.fa-toggle-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-try:before,.fa-turkish-lira:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-bank:before,.fa-institution:before,.fa-university:before{content:"\f19c"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-image-o:before,.fa-file-photo-o:before,.fa-file-picture-o:before{content:"\f1c5"}.fa-file-archive-o:before,.fa-file-zip-o:before{content:"\f1c6"}.fa-file-audio-o:before,.fa-file-sound-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-ring:before,.fa-life-saver:before,.fa-support:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-empire:before,.fa-ge:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-paper-plane:before,.fa-send:before{content:"\f1d8"}.fa-paper-plane-o:before,.fa-send-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before,.fa-genderless:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-futbol-o:before,.fa-soccer-ball-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-ils:before,.fa-shekel:before,.fa-sheqel:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-bed:before,.fa-hotel:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"} -------------------------------------------------------------------------------- /css/font-awesome.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | /* FONT PATH 6 | * -------------------------- */ 7 | @font-face { 8 | font-family: 'FontAwesome'; 9 | src: url('../fonts/font-awesome/fontawesome-webfont.eot?v=4.3.0'); 10 | src: url('../fonts/font-awesome/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/font-awesome/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/font-awesome/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/font-awesome/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/font-awesome/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | .fa { 15 | display: inline-block; 16 | font: normal normal normal 14px/1 FontAwesome; 17 | font-size: inherit; 18 | text-rendering: auto; 19 | -webkit-font-smoothing: antialiased; 20 | -moz-osx-font-smoothing: grayscale; 21 | -webkit-transform: translate(0, 0); 22 | -ms-transform: translate(0, 0); 23 | transform: translate(0, 0); 24 | } 25 | /* makes the font 33% larger relative to the icon container */ 26 | .fa-lg { 27 | font-size: 1.33333333em; 28 | line-height: 0.75em; 29 | vertical-align: -15%; 30 | } 31 | .fa-2x { 32 | font-size: 2em; 33 | } 34 | .fa-3x { 35 | font-size: 3em; 36 | } 37 | .fa-4x { 38 | font-size: 4em; 39 | } 40 | .fa-5x { 41 | font-size: 5em; 42 | } 43 | .fa-fw { 44 | width: 1.28571429em; 45 | text-align: center; 46 | } 47 | .fa-ul { 48 | padding-left: 0; 49 | margin-left: 2.14285714em; 50 | list-style-type: none; 51 | } 52 | .fa-ul > li { 53 | position: relative; 54 | } 55 | .fa-li { 56 | position: absolute; 57 | left: -2.14285714em; 58 | width: 2.14285714em; 59 | top: 0.14285714em; 60 | text-align: center; 61 | } 62 | .fa-li.fa-lg { 63 | left: -1.85714286em; 64 | } 65 | .fa-border { 66 | padding: .2em .25em .15em; 67 | border: solid 0.08em #eeeeee; 68 | border-radius: .1em; 69 | } 70 | .pull-right { 71 | float: right; 72 | } 73 | .pull-left { 74 | float: left; 75 | } 76 | .fa.pull-left { 77 | margin-right: .3em; 78 | } 79 | .fa.pull-right { 80 | margin-left: .3em; 81 | } 82 | .fa-spin { 83 | -webkit-animation: fa-spin 2s infinite linear; 84 | animation: fa-spin 2s infinite linear; 85 | } 86 | .fa-pulse { 87 | -webkit-animation: fa-spin 1s infinite steps(8); 88 | animation: fa-spin 1s infinite steps(8); 89 | } 90 | @-webkit-keyframes fa-spin { 91 | 0% { 92 | -webkit-transform: rotate(0deg); 93 | transform: rotate(0deg); 94 | } 95 | 100% { 96 | -webkit-transform: rotate(359deg); 97 | transform: rotate(359deg); 98 | } 99 | } 100 | @keyframes fa-spin { 101 | 0% { 102 | -webkit-transform: rotate(0deg); 103 | transform: rotate(0deg); 104 | } 105 | 100% { 106 | -webkit-transform: rotate(359deg); 107 | transform: rotate(359deg); 108 | } 109 | } 110 | .fa-rotate-90 { 111 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 112 | -webkit-transform: rotate(90deg); 113 | -ms-transform: rotate(90deg); 114 | transform: rotate(90deg); 115 | } 116 | .fa-rotate-180 { 117 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 118 | -webkit-transform: rotate(180deg); 119 | -ms-transform: rotate(180deg); 120 | transform: rotate(180deg); 121 | } 122 | .fa-rotate-270 { 123 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 124 | -webkit-transform: rotate(270deg); 125 | -ms-transform: rotate(270deg); 126 | transform: rotate(270deg); 127 | } 128 | .fa-flip-horizontal { 129 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); 130 | -webkit-transform: scale(-1, 1); 131 | -ms-transform: scale(-1, 1); 132 | transform: scale(-1, 1); 133 | } 134 | .fa-flip-vertical { 135 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); 136 | -webkit-transform: scale(1, -1); 137 | -ms-transform: scale(1, -1); 138 | transform: scale(1, -1); 139 | } 140 | :root .fa-rotate-90, 141 | :root .fa-rotate-180, 142 | :root .fa-rotate-270, 143 | :root .fa-flip-horizontal, 144 | :root .fa-flip-vertical { 145 | -webkit-filter: none; 146 | filter: none; 147 | } 148 | .fa-stack { 149 | position: relative; 150 | display: inline-block; 151 | width: 2em; 152 | height: 2em; 153 | line-height: 2em; 154 | vertical-align: middle; 155 | } 156 | .fa-stack-1x, 157 | .fa-stack-2x { 158 | position: absolute; 159 | left: 0; 160 | width: 100%; 161 | text-align: center; 162 | } 163 | .fa-stack-1x { 164 | line-height: inherit; 165 | } 166 | .fa-stack-2x { 167 | font-size: 2em; 168 | } 169 | .fa-inverse { 170 | color: #ffffff; 171 | } 172 | /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen 173 | readers do not read off random characters that represent icons */ 174 | .fa-glass:before { 175 | content: "\f000"; 176 | } 177 | .fa-music:before { 178 | content: "\f001"; 179 | } 180 | .fa-search:before { 181 | content: "\f002"; 182 | } 183 | .fa-envelope-o:before { 184 | content: "\f003"; 185 | } 186 | .fa-heart:before { 187 | content: "\f004"; 188 | } 189 | .fa-star:before { 190 | content: "\f005"; 191 | } 192 | .fa-star-o:before { 193 | content: "\f006"; 194 | } 195 | .fa-user:before { 196 | content: "\f007"; 197 | } 198 | .fa-film:before { 199 | content: "\f008"; 200 | } 201 | .fa-th-large:before { 202 | content: "\f009"; 203 | } 204 | .fa-th:before { 205 | content: "\f00a"; 206 | } 207 | .fa-th-list:before { 208 | content: "\f00b"; 209 | } 210 | .fa-check:before { 211 | content: "\f00c"; 212 | } 213 | .fa-remove:before, 214 | .fa-close:before, 215 | .fa-times:before { 216 | content: "\f00d"; 217 | } 218 | .fa-search-plus:before { 219 | content: "\f00e"; 220 | } 221 | .fa-search-minus:before { 222 | content: "\f010"; 223 | } 224 | .fa-power-off:before { 225 | content: "\f011"; 226 | } 227 | .fa-signal:before { 228 | content: "\f012"; 229 | } 230 | .fa-gear:before, 231 | .fa-cog:before { 232 | content: "\f013"; 233 | } 234 | .fa-trash-o:before { 235 | content: "\f014"; 236 | } 237 | .fa-home:before { 238 | content: "\f015"; 239 | } 240 | .fa-file-o:before { 241 | content: "\f016"; 242 | } 243 | .fa-clock-o:before { 244 | content: "\f017"; 245 | } 246 | .fa-road:before { 247 | content: "\f018"; 248 | } 249 | .fa-download:before { 250 | content: "\f019"; 251 | } 252 | .fa-arrow-circle-o-down:before { 253 | content: "\f01a"; 254 | } 255 | .fa-arrow-circle-o-up:before { 256 | content: "\f01b"; 257 | } 258 | .fa-inbox:before { 259 | content: "\f01c"; 260 | } 261 | .fa-play-circle-o:before { 262 | content: "\f01d"; 263 | } 264 | .fa-rotate-right:before, 265 | .fa-repeat:before { 266 | content: "\f01e"; 267 | } 268 | .fa-refresh:before { 269 | content: "\f021"; 270 | } 271 | .fa-list-alt:before { 272 | content: "\f022"; 273 | } 274 | .fa-lock:before { 275 | content: "\f023"; 276 | } 277 | .fa-flag:before { 278 | content: "\f024"; 279 | } 280 | .fa-headphones:before { 281 | content: "\f025"; 282 | } 283 | .fa-volume-off:before { 284 | content: "\f026"; 285 | } 286 | .fa-volume-down:before { 287 | content: "\f027"; 288 | } 289 | .fa-volume-up:before { 290 | content: "\f028"; 291 | } 292 | .fa-qrcode:before { 293 | content: "\f029"; 294 | } 295 | .fa-barcode:before { 296 | content: "\f02a"; 297 | } 298 | .fa-tag:before { 299 | content: "\f02b"; 300 | } 301 | .fa-tags:before { 302 | content: "\f02c"; 303 | } 304 | .fa-book:before { 305 | content: "\f02d"; 306 | } 307 | .fa-bookmark:before { 308 | content: "\f02e"; 309 | } 310 | .fa-print:before { 311 | content: "\f02f"; 312 | } 313 | .fa-camera:before { 314 | content: "\f030"; 315 | } 316 | .fa-font:before { 317 | content: "\f031"; 318 | } 319 | .fa-bold:before { 320 | content: "\f032"; 321 | } 322 | .fa-italic:before { 323 | content: "\f033"; 324 | } 325 | .fa-text-height:before { 326 | content: "\f034"; 327 | } 328 | .fa-text-width:before { 329 | content: "\f035"; 330 | } 331 | .fa-align-left:before { 332 | content: "\f036"; 333 | } 334 | .fa-align-center:before { 335 | content: "\f037"; 336 | } 337 | .fa-align-right:before { 338 | content: "\f038"; 339 | } 340 | .fa-align-justify:before { 341 | content: "\f039"; 342 | } 343 | .fa-list:before { 344 | content: "\f03a"; 345 | } 346 | .fa-dedent:before, 347 | .fa-outdent:before { 348 | content: "\f03b"; 349 | } 350 | .fa-indent:before { 351 | content: "\f03c"; 352 | } 353 | .fa-video-camera:before { 354 | content: "\f03d"; 355 | } 356 | .fa-photo:before, 357 | .fa-image:before, 358 | .fa-picture-o:before { 359 | content: "\f03e"; 360 | } 361 | .fa-pencil:before { 362 | content: "\f040"; 363 | } 364 | .fa-map-marker:before { 365 | content: "\f041"; 366 | } 367 | .fa-adjust:before { 368 | content: "\f042"; 369 | } 370 | .fa-tint:before { 371 | content: "\f043"; 372 | } 373 | .fa-edit:before, 374 | .fa-pencil-square-o:before { 375 | content: "\f044"; 376 | } 377 | .fa-share-square-o:before { 378 | content: "\f045"; 379 | } 380 | .fa-check-square-o:before { 381 | content: "\f046"; 382 | } 383 | .fa-arrows:before { 384 | content: "\f047"; 385 | } 386 | .fa-step-backward:before { 387 | content: "\f048"; 388 | } 389 | .fa-fast-backward:before { 390 | content: "\f049"; 391 | } 392 | .fa-backward:before { 393 | content: "\f04a"; 394 | } 395 | .fa-play:before { 396 | content: "\f04b"; 397 | } 398 | .fa-pause:before { 399 | content: "\f04c"; 400 | } 401 | .fa-stop:before { 402 | content: "\f04d"; 403 | } 404 | .fa-forward:before { 405 | content: "\f04e"; 406 | } 407 | .fa-fast-forward:before { 408 | content: "\f050"; 409 | } 410 | .fa-step-forward:before { 411 | content: "\f051"; 412 | } 413 | .fa-eject:before { 414 | content: "\f052"; 415 | } 416 | .fa-chevron-left:before { 417 | content: "\f053"; 418 | } 419 | .fa-chevron-right:before { 420 | content: "\f054"; 421 | } 422 | .fa-plus-circle:before { 423 | content: "\f055"; 424 | } 425 | .fa-minus-circle:before { 426 | content: "\f056"; 427 | } 428 | .fa-times-circle:before { 429 | content: "\f057"; 430 | } 431 | .fa-check-circle:before { 432 | content: "\f058"; 433 | } 434 | .fa-question-circle:before { 435 | content: "\f059"; 436 | } 437 | .fa-info-circle:before { 438 | content: "\f05a"; 439 | } 440 | .fa-crosshairs:before { 441 | content: "\f05b"; 442 | } 443 | .fa-times-circle-o:before { 444 | content: "\f05c"; 445 | } 446 | .fa-check-circle-o:before { 447 | content: "\f05d"; 448 | } 449 | .fa-ban:before { 450 | content: "\f05e"; 451 | } 452 | .fa-arrow-left:before { 453 | content: "\f060"; 454 | } 455 | .fa-arrow-right:before { 456 | content: "\f061"; 457 | } 458 | .fa-arrow-up:before { 459 | content: "\f062"; 460 | } 461 | .fa-arrow-down:before { 462 | content: "\f063"; 463 | } 464 | .fa-mail-forward:before, 465 | .fa-share:before { 466 | content: "\f064"; 467 | } 468 | .fa-expand:before { 469 | content: "\f065"; 470 | } 471 | .fa-compress:before { 472 | content: "\f066"; 473 | } 474 | .fa-plus:before { 475 | content: "\f067"; 476 | } 477 | .fa-minus:before { 478 | content: "\f068"; 479 | } 480 | .fa-asterisk:before { 481 | content: "\f069"; 482 | } 483 | .fa-exclamation-circle:before { 484 | content: "\f06a"; 485 | } 486 | .fa-gift:before { 487 | content: "\f06b"; 488 | } 489 | .fa-leaf:before { 490 | content: "\f06c"; 491 | } 492 | .fa-fire:before { 493 | content: "\f06d"; 494 | } 495 | .fa-eye:before { 496 | content: "\f06e"; 497 | } 498 | .fa-eye-slash:before { 499 | content: "\f070"; 500 | } 501 | .fa-warning:before, 502 | .fa-exclamation-triangle:before { 503 | content: "\f071"; 504 | } 505 | .fa-plane:before { 506 | content: "\f072"; 507 | } 508 | .fa-calendar:before { 509 | content: "\f073"; 510 | } 511 | .fa-random:before { 512 | content: "\f074"; 513 | } 514 | .fa-comment:before { 515 | content: "\f075"; 516 | } 517 | .fa-magnet:before { 518 | content: "\f076"; 519 | } 520 | .fa-chevron-up:before { 521 | content: "\f077"; 522 | } 523 | .fa-chevron-down:before { 524 | content: "\f078"; 525 | } 526 | .fa-retweet:before { 527 | content: "\f079"; 528 | } 529 | .fa-shopping-cart:before { 530 | content: "\f07a"; 531 | } 532 | .fa-folder:before { 533 | content: "\f07b"; 534 | } 535 | .fa-folder-open:before { 536 | content: "\f07c"; 537 | } 538 | .fa-arrows-v:before { 539 | content: "\f07d"; 540 | } 541 | .fa-arrows-h:before { 542 | content: "\f07e"; 543 | } 544 | .fa-bar-chart-o:before, 545 | .fa-bar-chart:before { 546 | content: "\f080"; 547 | } 548 | .fa-twitter-square:before { 549 | content: "\f081"; 550 | } 551 | .fa-facebook-square:before { 552 | content: "\f082"; 553 | } 554 | .fa-camera-retro:before { 555 | content: "\f083"; 556 | } 557 | .fa-key:before { 558 | content: "\f084"; 559 | } 560 | .fa-gears:before, 561 | .fa-cogs:before { 562 | content: "\f085"; 563 | } 564 | .fa-comments:before { 565 | content: "\f086"; 566 | } 567 | .fa-thumbs-o-up:before { 568 | content: "\f087"; 569 | } 570 | .fa-thumbs-o-down:before { 571 | content: "\f088"; 572 | } 573 | .fa-star-half:before { 574 | content: "\f089"; 575 | } 576 | .fa-heart-o:before { 577 | content: "\f08a"; 578 | } 579 | .fa-sign-out:before { 580 | content: "\f08b"; 581 | } 582 | .fa-linkedin-square:before { 583 | content: "\f08c"; 584 | } 585 | .fa-thumb-tack:before { 586 | content: "\f08d"; 587 | } 588 | .fa-external-link:before { 589 | content: "\f08e"; 590 | } 591 | .fa-sign-in:before { 592 | content: "\f090"; 593 | } 594 | .fa-trophy:before { 595 | content: "\f091"; 596 | } 597 | .fa-github-square:before { 598 | content: "\f092"; 599 | } 600 | .fa-upload:before { 601 | content: "\f093"; 602 | } 603 | .fa-lemon-o:before { 604 | content: "\f094"; 605 | } 606 | .fa-phone:before { 607 | content: "\f095"; 608 | } 609 | .fa-square-o:before { 610 | content: "\f096"; 611 | } 612 | .fa-bookmark-o:before { 613 | content: "\f097"; 614 | } 615 | .fa-phone-square:before { 616 | content: "\f098"; 617 | } 618 | .fa-twitter:before { 619 | content: "\f099"; 620 | } 621 | .fa-facebook-f:before, 622 | .fa-facebook:before { 623 | content: "\f09a"; 624 | } 625 | .fa-github:before { 626 | content: "\f09b"; 627 | } 628 | .fa-unlock:before { 629 | content: "\f09c"; 630 | } 631 | .fa-credit-card:before { 632 | content: "\f09d"; 633 | } 634 | .fa-rss:before { 635 | content: "\f09e"; 636 | } 637 | .fa-hdd-o:before { 638 | content: "\f0a0"; 639 | } 640 | .fa-bullhorn:before { 641 | content: "\f0a1"; 642 | } 643 | .fa-bell:before { 644 | content: "\f0f3"; 645 | } 646 | .fa-certificate:before { 647 | content: "\f0a3"; 648 | } 649 | .fa-hand-o-right:before { 650 | content: "\f0a4"; 651 | } 652 | .fa-hand-o-left:before { 653 | content: "\f0a5"; 654 | } 655 | .fa-hand-o-up:before { 656 | content: "\f0a6"; 657 | } 658 | .fa-hand-o-down:before { 659 | content: "\f0a7"; 660 | } 661 | .fa-arrow-circle-left:before { 662 | content: "\f0a8"; 663 | } 664 | .fa-arrow-circle-right:before { 665 | content: "\f0a9"; 666 | } 667 | .fa-arrow-circle-up:before { 668 | content: "\f0aa"; 669 | } 670 | .fa-arrow-circle-down:before { 671 | content: "\f0ab"; 672 | } 673 | .fa-globe:before { 674 | content: "\f0ac"; 675 | } 676 | .fa-wrench:before { 677 | content: "\f0ad"; 678 | } 679 | .fa-tasks:before { 680 | content: "\f0ae"; 681 | } 682 | .fa-filter:before { 683 | content: "\f0b0"; 684 | } 685 | .fa-briefcase:before { 686 | content: "\f0b1"; 687 | } 688 | .fa-arrows-alt:before { 689 | content: "\f0b2"; 690 | } 691 | .fa-group:before, 692 | .fa-users:before { 693 | content: "\f0c0"; 694 | } 695 | .fa-chain:before, 696 | .fa-link:before { 697 | content: "\f0c1"; 698 | } 699 | .fa-cloud:before { 700 | content: "\f0c2"; 701 | } 702 | .fa-flask:before { 703 | content: "\f0c3"; 704 | } 705 | .fa-cut:before, 706 | .fa-scissors:before { 707 | content: "\f0c4"; 708 | } 709 | .fa-copy:before, 710 | .fa-files-o:before { 711 | content: "\f0c5"; 712 | } 713 | .fa-paperclip:before { 714 | content: "\f0c6"; 715 | } 716 | .fa-save:before, 717 | .fa-floppy-o:before { 718 | content: "\f0c7"; 719 | } 720 | .fa-square:before { 721 | content: "\f0c8"; 722 | } 723 | .fa-navicon:before, 724 | .fa-reorder:before, 725 | .fa-bars:before { 726 | content: "\f0c9"; 727 | } 728 | .fa-list-ul:before { 729 | content: "\f0ca"; 730 | } 731 | .fa-list-ol:before { 732 | content: "\f0cb"; 733 | } 734 | .fa-strikethrough:before { 735 | content: "\f0cc"; 736 | } 737 | .fa-underline:before { 738 | content: "\f0cd"; 739 | } 740 | .fa-table:before { 741 | content: "\f0ce"; 742 | } 743 | .fa-magic:before { 744 | content: "\f0d0"; 745 | } 746 | .fa-truck:before { 747 | content: "\f0d1"; 748 | } 749 | .fa-pinterest:before { 750 | content: "\f0d2"; 751 | } 752 | .fa-pinterest-square:before { 753 | content: "\f0d3"; 754 | } 755 | .fa-google-plus-square:before { 756 | content: "\f0d4"; 757 | } 758 | .fa-google-plus:before { 759 | content: "\f0d5"; 760 | } 761 | .fa-money:before { 762 | content: "\f0d6"; 763 | } 764 | .fa-caret-down:before { 765 | content: "\f0d7"; 766 | } 767 | .fa-caret-up:before { 768 | content: "\f0d8"; 769 | } 770 | .fa-caret-left:before { 771 | content: "\f0d9"; 772 | } 773 | .fa-caret-right:before { 774 | content: "\f0da"; 775 | } 776 | .fa-columns:before { 777 | content: "\f0db"; 778 | } 779 | .fa-unsorted:before, 780 | .fa-sort:before { 781 | content: "\f0dc"; 782 | } 783 | .fa-sort-down:before, 784 | .fa-sort-desc:before { 785 | content: "\f0dd"; 786 | } 787 | .fa-sort-up:before, 788 | .fa-sort-asc:before { 789 | content: "\f0de"; 790 | } 791 | .fa-envelope:before { 792 | content: "\f0e0"; 793 | } 794 | .fa-linkedin:before { 795 | content: "\f0e1"; 796 | } 797 | .fa-rotate-left:before, 798 | .fa-undo:before { 799 | content: "\f0e2"; 800 | } 801 | .fa-legal:before, 802 | .fa-gavel:before { 803 | content: "\f0e3"; 804 | } 805 | .fa-dashboard:before, 806 | .fa-tachometer:before { 807 | content: "\f0e4"; 808 | } 809 | .fa-comment-o:before { 810 | content: "\f0e5"; 811 | } 812 | .fa-comments-o:before { 813 | content: "\f0e6"; 814 | } 815 | .fa-flash:before, 816 | .fa-bolt:before { 817 | content: "\f0e7"; 818 | } 819 | .fa-sitemap:before { 820 | content: "\f0e8"; 821 | } 822 | .fa-umbrella:before { 823 | content: "\f0e9"; 824 | } 825 | .fa-paste:before, 826 | .fa-clipboard:before { 827 | content: "\f0ea"; 828 | } 829 | .fa-lightbulb-o:before { 830 | content: "\f0eb"; 831 | } 832 | .fa-exchange:before { 833 | content: "\f0ec"; 834 | } 835 | .fa-cloud-download:before { 836 | content: "\f0ed"; 837 | } 838 | .fa-cloud-upload:before { 839 | content: "\f0ee"; 840 | } 841 | .fa-user-md:before { 842 | content: "\f0f0"; 843 | } 844 | .fa-stethoscope:before { 845 | content: "\f0f1"; 846 | } 847 | .fa-suitcase:before { 848 | content: "\f0f2"; 849 | } 850 | .fa-bell-o:before { 851 | content: "\f0a2"; 852 | } 853 | .fa-coffee:before { 854 | content: "\f0f4"; 855 | } 856 | .fa-cutlery:before { 857 | content: "\f0f5"; 858 | } 859 | .fa-file-text-o:before { 860 | content: "\f0f6"; 861 | } 862 | .fa-building-o:before { 863 | content: "\f0f7"; 864 | } 865 | .fa-hospital-o:before { 866 | content: "\f0f8"; 867 | } 868 | .fa-ambulance:before { 869 | content: "\f0f9"; 870 | } 871 | .fa-medkit:before { 872 | content: "\f0fa"; 873 | } 874 | .fa-fighter-jet:before { 875 | content: "\f0fb"; 876 | } 877 | .fa-beer:before { 878 | content: "\f0fc"; 879 | } 880 | .fa-h-square:before { 881 | content: "\f0fd"; 882 | } 883 | .fa-plus-square:before { 884 | content: "\f0fe"; 885 | } 886 | .fa-angle-double-left:before { 887 | content: "\f100"; 888 | } 889 | .fa-angle-double-right:before { 890 | content: "\f101"; 891 | } 892 | .fa-angle-double-up:before { 893 | content: "\f102"; 894 | } 895 | .fa-angle-double-down:before { 896 | content: "\f103"; 897 | } 898 | .fa-angle-left:before { 899 | content: "\f104"; 900 | } 901 | .fa-angle-right:before { 902 | content: "\f105"; 903 | } 904 | .fa-angle-up:before { 905 | content: "\f106"; 906 | } 907 | .fa-angle-down:before { 908 | content: "\f107"; 909 | } 910 | .fa-desktop:before { 911 | content: "\f108"; 912 | } 913 | .fa-laptop:before { 914 | content: "\f109"; 915 | } 916 | .fa-tablet:before { 917 | content: "\f10a"; 918 | } 919 | .fa-mobile-phone:before, 920 | .fa-mobile:before { 921 | content: "\f10b"; 922 | } 923 | .fa-circle-o:before { 924 | content: "\f10c"; 925 | } 926 | .fa-quote-left:before { 927 | content: "\f10d"; 928 | } 929 | .fa-quote-right:before { 930 | content: "\f10e"; 931 | } 932 | .fa-spinner:before { 933 | content: "\f110"; 934 | } 935 | .fa-circle:before { 936 | content: "\f111"; 937 | } 938 | .fa-mail-reply:before, 939 | .fa-reply:before { 940 | content: "\f112"; 941 | } 942 | .fa-github-alt:before { 943 | content: "\f113"; 944 | } 945 | .fa-folder-o:before { 946 | content: "\f114"; 947 | } 948 | .fa-folder-open-o:before { 949 | content: "\f115"; 950 | } 951 | .fa-smile-o:before { 952 | content: "\f118"; 953 | } 954 | .fa-frown-o:before { 955 | content: "\f119"; 956 | } 957 | .fa-meh-o:before { 958 | content: "\f11a"; 959 | } 960 | .fa-gamepad:before { 961 | content: "\f11b"; 962 | } 963 | .fa-keyboard-o:before { 964 | content: "\f11c"; 965 | } 966 | .fa-flag-o:before { 967 | content: "\f11d"; 968 | } 969 | .fa-flag-checkered:before { 970 | content: "\f11e"; 971 | } 972 | .fa-terminal:before { 973 | content: "\f120"; 974 | } 975 | .fa-code:before { 976 | content: "\f121"; 977 | } 978 | .fa-mail-reply-all:before, 979 | .fa-reply-all:before { 980 | content: "\f122"; 981 | } 982 | .fa-star-half-empty:before, 983 | .fa-star-half-full:before, 984 | .fa-star-half-o:before { 985 | content: "\f123"; 986 | } 987 | .fa-location-arrow:before { 988 | content: "\f124"; 989 | } 990 | .fa-crop:before { 991 | content: "\f125"; 992 | } 993 | .fa-code-fork:before { 994 | content: "\f126"; 995 | } 996 | .fa-unlink:before, 997 | .fa-chain-broken:before { 998 | content: "\f127"; 999 | } 1000 | .fa-question:before { 1001 | content: "\f128"; 1002 | } 1003 | .fa-info:before { 1004 | content: "\f129"; 1005 | } 1006 | .fa-exclamation:before { 1007 | content: "\f12a"; 1008 | } 1009 | .fa-superscript:before { 1010 | content: "\f12b"; 1011 | } 1012 | .fa-subscript:before { 1013 | content: "\f12c"; 1014 | } 1015 | .fa-eraser:before { 1016 | content: "\f12d"; 1017 | } 1018 | .fa-puzzle-piece:before { 1019 | content: "\f12e"; 1020 | } 1021 | .fa-microphone:before { 1022 | content: "\f130"; 1023 | } 1024 | .fa-microphone-slash:before { 1025 | content: "\f131"; 1026 | } 1027 | .fa-shield:before { 1028 | content: "\f132"; 1029 | } 1030 | .fa-calendar-o:before { 1031 | content: "\f133"; 1032 | } 1033 | .fa-fire-extinguisher:before { 1034 | content: "\f134"; 1035 | } 1036 | .fa-rocket:before { 1037 | content: "\f135"; 1038 | } 1039 | .fa-maxcdn:before { 1040 | content: "\f136"; 1041 | } 1042 | .fa-chevron-circle-left:before { 1043 | content: "\f137"; 1044 | } 1045 | .fa-chevron-circle-right:before { 1046 | content: "\f138"; 1047 | } 1048 | .fa-chevron-circle-up:before { 1049 | content: "\f139"; 1050 | } 1051 | .fa-chevron-circle-down:before { 1052 | content: "\f13a"; 1053 | } 1054 | .fa-html5:before { 1055 | content: "\f13b"; 1056 | } 1057 | .fa-css3:before { 1058 | content: "\f13c"; 1059 | } 1060 | .fa-anchor:before { 1061 | content: "\f13d"; 1062 | } 1063 | .fa-unlock-alt:before { 1064 | content: "\f13e"; 1065 | } 1066 | .fa-bullseye:before { 1067 | content: "\f140"; 1068 | } 1069 | .fa-ellipsis-h:before { 1070 | content: "\f141"; 1071 | } 1072 | .fa-ellipsis-v:before { 1073 | content: "\f142"; 1074 | } 1075 | .fa-rss-square:before { 1076 | content: "\f143"; 1077 | } 1078 | .fa-play-circle:before { 1079 | content: "\f144"; 1080 | } 1081 | .fa-ticket:before { 1082 | content: "\f145"; 1083 | } 1084 | .fa-minus-square:before { 1085 | content: "\f146"; 1086 | } 1087 | .fa-minus-square-o:before { 1088 | content: "\f147"; 1089 | } 1090 | .fa-level-up:before { 1091 | content: "\f148"; 1092 | } 1093 | .fa-level-down:before { 1094 | content: "\f149"; 1095 | } 1096 | .fa-check-square:before { 1097 | content: "\f14a"; 1098 | } 1099 | .fa-pencil-square:before { 1100 | content: "\f14b"; 1101 | } 1102 | .fa-external-link-square:before { 1103 | content: "\f14c"; 1104 | } 1105 | .fa-share-square:before { 1106 | content: "\f14d"; 1107 | } 1108 | .fa-compass:before { 1109 | content: "\f14e"; 1110 | } 1111 | .fa-toggle-down:before, 1112 | .fa-caret-square-o-down:before { 1113 | content: "\f150"; 1114 | } 1115 | .fa-toggle-up:before, 1116 | .fa-caret-square-o-up:before { 1117 | content: "\f151"; 1118 | } 1119 | .fa-toggle-right:before, 1120 | .fa-caret-square-o-right:before { 1121 | content: "\f152"; 1122 | } 1123 | .fa-euro:before, 1124 | .fa-eur:before { 1125 | content: "\f153"; 1126 | } 1127 | .fa-gbp:before { 1128 | content: "\f154"; 1129 | } 1130 | .fa-dollar:before, 1131 | .fa-usd:before { 1132 | content: "\f155"; 1133 | } 1134 | .fa-rupee:before, 1135 | .fa-inr:before { 1136 | content: "\f156"; 1137 | } 1138 | .fa-cny:before, 1139 | .fa-rmb:before, 1140 | .fa-yen:before, 1141 | .fa-jpy:before { 1142 | content: "\f157"; 1143 | } 1144 | .fa-ruble:before, 1145 | .fa-rouble:before, 1146 | .fa-rub:before { 1147 | content: "\f158"; 1148 | } 1149 | .fa-won:before, 1150 | .fa-krw:before { 1151 | content: "\f159"; 1152 | } 1153 | .fa-bitcoin:before, 1154 | .fa-btc:before { 1155 | content: "\f15a"; 1156 | } 1157 | .fa-file:before { 1158 | content: "\f15b"; 1159 | } 1160 | .fa-file-text:before { 1161 | content: "\f15c"; 1162 | } 1163 | .fa-sort-alpha-asc:before { 1164 | content: "\f15d"; 1165 | } 1166 | .fa-sort-alpha-desc:before { 1167 | content: "\f15e"; 1168 | } 1169 | .fa-sort-amount-asc:before { 1170 | content: "\f160"; 1171 | } 1172 | .fa-sort-amount-desc:before { 1173 | content: "\f161"; 1174 | } 1175 | .fa-sort-numeric-asc:before { 1176 | content: "\f162"; 1177 | } 1178 | .fa-sort-numeric-desc:before { 1179 | content: "\f163"; 1180 | } 1181 | .fa-thumbs-up:before { 1182 | content: "\f164"; 1183 | } 1184 | .fa-thumbs-down:before { 1185 | content: "\f165"; 1186 | } 1187 | .fa-youtube-square:before { 1188 | content: "\f166"; 1189 | } 1190 | .fa-youtube:before { 1191 | content: "\f167"; 1192 | } 1193 | .fa-xing:before { 1194 | content: "\f168"; 1195 | } 1196 | .fa-xing-square:before { 1197 | content: "\f169"; 1198 | } 1199 | .fa-youtube-play:before { 1200 | content: "\f16a"; 1201 | } 1202 | .fa-dropbox:before { 1203 | content: "\f16b"; 1204 | } 1205 | .fa-stack-overflow:before { 1206 | content: "\f16c"; 1207 | } 1208 | .fa-instagram:before { 1209 | content: "\f16d"; 1210 | } 1211 | .fa-flickr:before { 1212 | content: "\f16e"; 1213 | } 1214 | .fa-adn:before { 1215 | content: "\f170"; 1216 | } 1217 | .fa-bitbucket:before { 1218 | content: "\f171"; 1219 | } 1220 | .fa-bitbucket-square:before { 1221 | content: "\f172"; 1222 | } 1223 | .fa-tumblr:before { 1224 | content: "\f173"; 1225 | } 1226 | .fa-tumblr-square:before { 1227 | content: "\f174"; 1228 | } 1229 | .fa-long-arrow-down:before { 1230 | content: "\f175"; 1231 | } 1232 | .fa-long-arrow-up:before { 1233 | content: "\f176"; 1234 | } 1235 | .fa-long-arrow-left:before { 1236 | content: "\f177"; 1237 | } 1238 | .fa-long-arrow-right:before { 1239 | content: "\f178"; 1240 | } 1241 | .fa-apple:before { 1242 | content: "\f179"; 1243 | } 1244 | .fa-windows:before { 1245 | content: "\f17a"; 1246 | } 1247 | .fa-android:before { 1248 | content: "\f17b"; 1249 | } 1250 | .fa-linux:before { 1251 | content: "\f17c"; 1252 | } 1253 | .fa-dribbble:before { 1254 | content: "\f17d"; 1255 | } 1256 | .fa-skype:before { 1257 | content: "\f17e"; 1258 | } 1259 | .fa-foursquare:before { 1260 | content: "\f180"; 1261 | } 1262 | .fa-trello:before { 1263 | content: "\f181"; 1264 | } 1265 | .fa-female:before { 1266 | content: "\f182"; 1267 | } 1268 | .fa-male:before { 1269 | content: "\f183"; 1270 | } 1271 | .fa-gittip:before, 1272 | .fa-gratipay:before { 1273 | content: "\f184"; 1274 | } 1275 | .fa-sun-o:before { 1276 | content: "\f185"; 1277 | } 1278 | .fa-moon-o:before { 1279 | content: "\f186"; 1280 | } 1281 | .fa-archive:before { 1282 | content: "\f187"; 1283 | } 1284 | .fa-bug:before { 1285 | content: "\f188"; 1286 | } 1287 | .fa-vk:before { 1288 | content: "\f189"; 1289 | } 1290 | .fa-weibo:before { 1291 | content: "\f18a"; 1292 | } 1293 | .fa-renren:before { 1294 | content: "\f18b"; 1295 | } 1296 | .fa-pagelines:before { 1297 | content: "\f18c"; 1298 | } 1299 | .fa-stack-exchange:before { 1300 | content: "\f18d"; 1301 | } 1302 | .fa-arrow-circle-o-right:before { 1303 | content: "\f18e"; 1304 | } 1305 | .fa-arrow-circle-o-left:before { 1306 | content: "\f190"; 1307 | } 1308 | .fa-toggle-left:before, 1309 | .fa-caret-square-o-left:before { 1310 | content: "\f191"; 1311 | } 1312 | .fa-dot-circle-o:before { 1313 | content: "\f192"; 1314 | } 1315 | .fa-wheelchair:before { 1316 | content: "\f193"; 1317 | } 1318 | .fa-vimeo-square:before { 1319 | content: "\f194"; 1320 | } 1321 | .fa-turkish-lira:before, 1322 | .fa-try:before { 1323 | content: "\f195"; 1324 | } 1325 | .fa-plus-square-o:before { 1326 | content: "\f196"; 1327 | } 1328 | .fa-space-shuttle:before { 1329 | content: "\f197"; 1330 | } 1331 | .fa-slack:before { 1332 | content: "\f198"; 1333 | } 1334 | .fa-envelope-square:before { 1335 | content: "\f199"; 1336 | } 1337 | .fa-wordpress:before { 1338 | content: "\f19a"; 1339 | } 1340 | .fa-openid:before { 1341 | content: "\f19b"; 1342 | } 1343 | .fa-institution:before, 1344 | .fa-bank:before, 1345 | .fa-university:before { 1346 | content: "\f19c"; 1347 | } 1348 | .fa-mortar-board:before, 1349 | .fa-graduation-cap:before { 1350 | content: "\f19d"; 1351 | } 1352 | .fa-yahoo:before { 1353 | content: "\f19e"; 1354 | } 1355 | .fa-google:before { 1356 | content: "\f1a0"; 1357 | } 1358 | .fa-reddit:before { 1359 | content: "\f1a1"; 1360 | } 1361 | .fa-reddit-square:before { 1362 | content: "\f1a2"; 1363 | } 1364 | .fa-stumbleupon-circle:before { 1365 | content: "\f1a3"; 1366 | } 1367 | .fa-stumbleupon:before { 1368 | content: "\f1a4"; 1369 | } 1370 | .fa-delicious:before { 1371 | content: "\f1a5"; 1372 | } 1373 | .fa-digg:before { 1374 | content: "\f1a6"; 1375 | } 1376 | .fa-pied-piper:before { 1377 | content: "\f1a7"; 1378 | } 1379 | .fa-pied-piper-alt:before { 1380 | content: "\f1a8"; 1381 | } 1382 | .fa-drupal:before { 1383 | content: "\f1a9"; 1384 | } 1385 | .fa-joomla:before { 1386 | content: "\f1aa"; 1387 | } 1388 | .fa-language:before { 1389 | content: "\f1ab"; 1390 | } 1391 | .fa-fax:before { 1392 | content: "\f1ac"; 1393 | } 1394 | .fa-building:before { 1395 | content: "\f1ad"; 1396 | } 1397 | .fa-child:before { 1398 | content: "\f1ae"; 1399 | } 1400 | .fa-paw:before { 1401 | content: "\f1b0"; 1402 | } 1403 | .fa-spoon:before { 1404 | content: "\f1b1"; 1405 | } 1406 | .fa-cube:before { 1407 | content: "\f1b2"; 1408 | } 1409 | .fa-cubes:before { 1410 | content: "\f1b3"; 1411 | } 1412 | .fa-behance:before { 1413 | content: "\f1b4"; 1414 | } 1415 | .fa-behance-square:before { 1416 | content: "\f1b5"; 1417 | } 1418 | .fa-steam:before { 1419 | content: "\f1b6"; 1420 | } 1421 | .fa-steam-square:before { 1422 | content: "\f1b7"; 1423 | } 1424 | .fa-recycle:before { 1425 | content: "\f1b8"; 1426 | } 1427 | .fa-automobile:before, 1428 | .fa-car:before { 1429 | content: "\f1b9"; 1430 | } 1431 | .fa-cab:before, 1432 | .fa-taxi:before { 1433 | content: "\f1ba"; 1434 | } 1435 | .fa-tree:before { 1436 | content: "\f1bb"; 1437 | } 1438 | .fa-spotify:before { 1439 | content: "\f1bc"; 1440 | } 1441 | .fa-deviantart:before { 1442 | content: "\f1bd"; 1443 | } 1444 | .fa-soundcloud:before { 1445 | content: "\f1be"; 1446 | } 1447 | .fa-database:before { 1448 | content: "\f1c0"; 1449 | } 1450 | .fa-file-pdf-o:before { 1451 | content: "\f1c1"; 1452 | } 1453 | .fa-file-word-o:before { 1454 | content: "\f1c2"; 1455 | } 1456 | .fa-file-excel-o:before { 1457 | content: "\f1c3"; 1458 | } 1459 | .fa-file-powerpoint-o:before { 1460 | content: "\f1c4"; 1461 | } 1462 | .fa-file-photo-o:before, 1463 | .fa-file-picture-o:before, 1464 | .fa-file-image-o:before { 1465 | content: "\f1c5"; 1466 | } 1467 | .fa-file-zip-o:before, 1468 | .fa-file-archive-o:before { 1469 | content: "\f1c6"; 1470 | } 1471 | .fa-file-sound-o:before, 1472 | .fa-file-audio-o:before { 1473 | content: "\f1c7"; 1474 | } 1475 | .fa-file-movie-o:before, 1476 | .fa-file-video-o:before { 1477 | content: "\f1c8"; 1478 | } 1479 | .fa-file-code-o:before { 1480 | content: "\f1c9"; 1481 | } 1482 | .fa-vine:before { 1483 | content: "\f1ca"; 1484 | } 1485 | .fa-codepen:before { 1486 | content: "\f1cb"; 1487 | } 1488 | .fa-jsfiddle:before { 1489 | content: "\f1cc"; 1490 | } 1491 | .fa-life-bouy:before, 1492 | .fa-life-buoy:before, 1493 | .fa-life-saver:before, 1494 | .fa-support:before, 1495 | .fa-life-ring:before { 1496 | content: "\f1cd"; 1497 | } 1498 | .fa-circle-o-notch:before { 1499 | content: "\f1ce"; 1500 | } 1501 | .fa-ra:before, 1502 | .fa-rebel:before { 1503 | content: "\f1d0"; 1504 | } 1505 | .fa-ge:before, 1506 | .fa-empire:before { 1507 | content: "\f1d1"; 1508 | } 1509 | .fa-git-square:before { 1510 | content: "\f1d2"; 1511 | } 1512 | .fa-git:before { 1513 | content: "\f1d3"; 1514 | } 1515 | .fa-hacker-news:before { 1516 | content: "\f1d4"; 1517 | } 1518 | .fa-tencent-weibo:before { 1519 | content: "\f1d5"; 1520 | } 1521 | .fa-qq:before { 1522 | content: "\f1d6"; 1523 | } 1524 | .fa-wechat:before, 1525 | .fa-weixin:before { 1526 | content: "\f1d7"; 1527 | } 1528 | .fa-send:before, 1529 | .fa-paper-plane:before { 1530 | content: "\f1d8"; 1531 | } 1532 | .fa-send-o:before, 1533 | .fa-paper-plane-o:before { 1534 | content: "\f1d9"; 1535 | } 1536 | .fa-history:before { 1537 | content: "\f1da"; 1538 | } 1539 | .fa-genderless:before, 1540 | .fa-circle-thin:before { 1541 | content: "\f1db"; 1542 | } 1543 | .fa-header:before { 1544 | content: "\f1dc"; 1545 | } 1546 | .fa-paragraph:before { 1547 | content: "\f1dd"; 1548 | } 1549 | .fa-sliders:before { 1550 | content: "\f1de"; 1551 | } 1552 | .fa-share-alt:before { 1553 | content: "\f1e0"; 1554 | } 1555 | .fa-share-alt-square:before { 1556 | content: "\f1e1"; 1557 | } 1558 | .fa-bomb:before { 1559 | content: "\f1e2"; 1560 | } 1561 | .fa-soccer-ball-o:before, 1562 | .fa-futbol-o:before { 1563 | content: "\f1e3"; 1564 | } 1565 | .fa-tty:before { 1566 | content: "\f1e4"; 1567 | } 1568 | .fa-binoculars:before { 1569 | content: "\f1e5"; 1570 | } 1571 | .fa-plug:before { 1572 | content: "\f1e6"; 1573 | } 1574 | .fa-slideshare:before { 1575 | content: "\f1e7"; 1576 | } 1577 | .fa-twitch:before { 1578 | content: "\f1e8"; 1579 | } 1580 | .fa-yelp:before { 1581 | content: "\f1e9"; 1582 | } 1583 | .fa-newspaper-o:before { 1584 | content: "\f1ea"; 1585 | } 1586 | .fa-wifi:before { 1587 | content: "\f1eb"; 1588 | } 1589 | .fa-calculator:before { 1590 | content: "\f1ec"; 1591 | } 1592 | .fa-paypal:before { 1593 | content: "\f1ed"; 1594 | } 1595 | .fa-google-wallet:before { 1596 | content: "\f1ee"; 1597 | } 1598 | .fa-cc-visa:before { 1599 | content: "\f1f0"; 1600 | } 1601 | .fa-cc-mastercard:before { 1602 | content: "\f1f1"; 1603 | } 1604 | .fa-cc-discover:before { 1605 | content: "\f1f2"; 1606 | } 1607 | .fa-cc-amex:before { 1608 | content: "\f1f3"; 1609 | } 1610 | .fa-cc-paypal:before { 1611 | content: "\f1f4"; 1612 | } 1613 | .fa-cc-stripe:before { 1614 | content: "\f1f5"; 1615 | } 1616 | .fa-bell-slash:before { 1617 | content: "\f1f6"; 1618 | } 1619 | .fa-bell-slash-o:before { 1620 | content: "\f1f7"; 1621 | } 1622 | .fa-trash:before { 1623 | content: "\f1f8"; 1624 | } 1625 | .fa-copyright:before { 1626 | content: "\f1f9"; 1627 | } 1628 | .fa-at:before { 1629 | content: "\f1fa"; 1630 | } 1631 | .fa-eyedropper:before { 1632 | content: "\f1fb"; 1633 | } 1634 | .fa-paint-brush:before { 1635 | content: "\f1fc"; 1636 | } 1637 | .fa-birthday-cake:before { 1638 | content: "\f1fd"; 1639 | } 1640 | .fa-area-chart:before { 1641 | content: "\f1fe"; 1642 | } 1643 | .fa-pie-chart:before { 1644 | content: "\f200"; 1645 | } 1646 | .fa-line-chart:before { 1647 | content: "\f201"; 1648 | } 1649 | .fa-lastfm:before { 1650 | content: "\f202"; 1651 | } 1652 | .fa-lastfm-square:before { 1653 | content: "\f203"; 1654 | } 1655 | .fa-toggle-off:before { 1656 | content: "\f204"; 1657 | } 1658 | .fa-toggle-on:before { 1659 | content: "\f205"; 1660 | } 1661 | .fa-bicycle:before { 1662 | content: "\f206"; 1663 | } 1664 | .fa-bus:before { 1665 | content: "\f207"; 1666 | } 1667 | .fa-ioxhost:before { 1668 | content: "\f208"; 1669 | } 1670 | .fa-angellist:before { 1671 | content: "\f209"; 1672 | } 1673 | .fa-cc:before { 1674 | content: "\f20a"; 1675 | } 1676 | .fa-shekel:before, 1677 | .fa-sheqel:before, 1678 | .fa-ils:before { 1679 | content: "\f20b"; 1680 | } 1681 | .fa-meanpath:before { 1682 | content: "\f20c"; 1683 | } 1684 | .fa-buysellads:before { 1685 | content: "\f20d"; 1686 | } 1687 | .fa-connectdevelop:before { 1688 | content: "\f20e"; 1689 | } 1690 | .fa-dashcube:before { 1691 | content: "\f210"; 1692 | } 1693 | .fa-forumbee:before { 1694 | content: "\f211"; 1695 | } 1696 | .fa-leanpub:before { 1697 | content: "\f212"; 1698 | } 1699 | .fa-sellsy:before { 1700 | content: "\f213"; 1701 | } 1702 | .fa-shirtsinbulk:before { 1703 | content: "\f214"; 1704 | } 1705 | .fa-simplybuilt:before { 1706 | content: "\f215"; 1707 | } 1708 | .fa-skyatlas:before { 1709 | content: "\f216"; 1710 | } 1711 | .fa-cart-plus:before { 1712 | content: "\f217"; 1713 | } 1714 | .fa-cart-arrow-down:before { 1715 | content: "\f218"; 1716 | } 1717 | .fa-diamond:before { 1718 | content: "\f219"; 1719 | } 1720 | .fa-ship:before { 1721 | content: "\f21a"; 1722 | } 1723 | .fa-user-secret:before { 1724 | content: "\f21b"; 1725 | } 1726 | .fa-motorcycle:before { 1727 | content: "\f21c"; 1728 | } 1729 | .fa-street-view:before { 1730 | content: "\f21d"; 1731 | } 1732 | .fa-heartbeat:before { 1733 | content: "\f21e"; 1734 | } 1735 | .fa-venus:before { 1736 | content: "\f221"; 1737 | } 1738 | .fa-mars:before { 1739 | content: "\f222"; 1740 | } 1741 | .fa-mercury:before { 1742 | content: "\f223"; 1743 | } 1744 | .fa-transgender:before { 1745 | content: "\f224"; 1746 | } 1747 | .fa-transgender-alt:before { 1748 | content: "\f225"; 1749 | } 1750 | .fa-venus-double:before { 1751 | content: "\f226"; 1752 | } 1753 | .fa-mars-double:before { 1754 | content: "\f227"; 1755 | } 1756 | .fa-venus-mars:before { 1757 | content: "\f228"; 1758 | } 1759 | .fa-mars-stroke:before { 1760 | content: "\f229"; 1761 | } 1762 | .fa-mars-stroke-v:before { 1763 | content: "\f22a"; 1764 | } 1765 | .fa-mars-stroke-h:before { 1766 | content: "\f22b"; 1767 | } 1768 | .fa-neuter:before { 1769 | content: "\f22c"; 1770 | } 1771 | .fa-facebook-official:before { 1772 | content: "\f230"; 1773 | } 1774 | .fa-pinterest-p:before { 1775 | content: "\f231"; 1776 | } 1777 | .fa-whatsapp:before { 1778 | content: "\f232"; 1779 | } 1780 | .fa-server:before { 1781 | content: "\f233"; 1782 | } 1783 | .fa-user-plus:before { 1784 | content: "\f234"; 1785 | } 1786 | .fa-user-times:before { 1787 | content: "\f235"; 1788 | } 1789 | .fa-hotel:before, 1790 | .fa-bed:before { 1791 | content: "\f236"; 1792 | } 1793 | .fa-viacoin:before { 1794 | content: "\f237"; 1795 | } 1796 | .fa-train:before { 1797 | content: "\f238"; 1798 | } 1799 | .fa-subway:before { 1800 | content: "\f239"; 1801 | } 1802 | .fa-medium:before { 1803 | content: "\f23a"; 1804 | } 1805 | -------------------------------------------------------------------------------- /fonts/oxygen/oxygen-v5-latin-700.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 13 | 14 | 15 | 17 | 19 | 22 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 36 | 37 | 39 | 41 | 42 | 44 | 46 | 47 | 49 | 51 | 52 | 53 | 54 | 55 | 56 | 58 | 62 | 63 | 65 | 67 | 68 | 69 | 70 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 81 | 83 | 85 | 87 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 104 | 106 | 107 | 109 | 111 | 112 | 114 | 115 | 116 | 117 | 118 | 119 | 121 | 122 | 124 | 126 | 128 | 129 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 140 | 141 | 143 | 144 | 145 | 146 | 148 | 150 | 152 | 153 | 154 | 157 | 158 | 161 | 164 | 165 | 166 | 167 | 170 | 171 | 173 | 174 | 176 | 178 | 179 | 180 | 181 | 182 | 183 | 185 | 186 | 188 | 191 | 194 | 196 | 197 | 198 | 199 | 201 | 202 | 204 | 205 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 217 | 219 | 221 | 223 | 225 | 228 | 230 | 231 | 233 | 234 | 235 | 237 | 239 | 240 | 242 | 245 | 247 | 249 | 251 | 254 | 256 | 259 | 263 | 265 | 267 | 269 | 271 | 273 | 274 | 275 | 276 | 277 | 279 | 281 | 283 | 285 | 287 | 290 | 292 | 293 | 295 | 296 | 297 | 298 | 299 | 301 | 303 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | --------------------------------------------------------------------------------