├── .bowerrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── Gruntfile.js ├── LICENSE.md ├── README.md ├── bower.json ├── karma └── karma-unit.tpl.js ├── package.json ├── production ├── assets │ ├── angularjs-foundation-boilerplate-1.0.0.css │ ├── angularjs-foundation-boilerplate-1.0.0.css.map │ ├── angularjs-foundation-boilerplate-1.0.0.js │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── foundation-yeti.png │ └── images │ │ └── foundation-fav-icon.ico └── index.html ├── protractor.config.js ├── src ├── app │ ├── about │ │ ├── about.module.js │ │ ├── controllers │ │ │ ├── AboutCtrl.js │ │ │ └── controllers.js │ │ ├── e2e │ │ │ └── about.e2e.js │ │ ├── styles │ │ │ ├── _about.scss │ │ │ └── _styles.scss │ │ ├── unit │ │ │ └── AboutCtrl.spec.js │ │ └── views │ │ │ └── about.tpl.html │ ├── app.js │ ├── common │ │ ├── common.module.js │ │ ├── directives │ │ │ ├── backButton.js │ │ │ └── directives.js │ │ └── services │ │ │ ├── Utils.js │ │ │ └── services.js │ ├── home │ │ ├── assets │ │ │ └── foundation-yeti.png │ │ ├── controllers │ │ │ ├── HomeCtrl.js │ │ │ └── controllers.js │ │ ├── directives │ │ │ └── directives.js │ │ ├── e2e │ │ │ └── home.e2e.js │ │ ├── home.module.js │ │ ├── services │ │ │ ├── HomeService.js │ │ │ └── services.js │ │ ├── styles │ │ │ ├── _home.scss │ │ │ └── _styles.scss │ │ ├── unit │ │ │ ├── HomeCtrl.spec.js │ │ │ └── HomeService.service.spec.js │ │ └── views │ │ │ └── home.tpl.html │ ├── layout │ │ ├── controllers │ │ │ ├── LayoutCtrl.js │ │ │ └── controllers.js │ │ ├── layout.module.js │ │ ├── styles │ │ │ ├── _layout.scss │ │ │ └── _styles.scss │ │ └── views │ │ │ └── layout.tpl.html │ ├── sample │ │ ├── controllers │ │ │ ├── SampleCtrl.js │ │ │ └── controllers.js │ │ ├── directives │ │ │ ├── directives.js │ │ │ └── sampleDirective.js │ │ ├── e2e │ │ │ └── sample.e2e.js │ │ ├── sample.module.js │ │ ├── services │ │ │ ├── SampleService.js │ │ │ └── services.js │ │ ├── styles │ │ │ ├── _sample.scss │ │ │ └── _styles.scss │ │ ├── unit │ │ │ ├── SampleCtrl.spec.js │ │ │ └── SampleService.service.spec.js │ │ └── views │ │ │ └── sample.tpl.html │ └── topbar │ │ ├── controllers │ │ ├── TopbarCtrl.js │ │ └── controllers.js │ │ ├── e2e │ │ └── topbar.e2e.js │ │ ├── styles │ │ ├── _styles.scss │ │ ├── _tabbar.scss │ │ └── _topbar.scss │ │ ├── topbar.module.js │ │ ├── unit │ │ └── topbar.spec.js │ │ └── views │ │ ├── tabbar.tpl.html │ │ └── topbar.tpl.html ├── assets │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ └── images │ │ └── foundation-fav-icon.ico ├── index.html └── styles │ ├── _font-awesome.scss │ ├── _mixins.scss │ ├── _settings.scss │ ├── _shared.scss │ └── main.scss └── vendor.config.js /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "vendor", 3 | "json": "bower.json" 4 | } 5 | 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs. 2 | # More information at http://EditorConfig.org 3 | 4 | # No .editorconfig files above the root directory 5 | root = true 6 | 7 | [*] 8 | indent_style = space 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | 14 | # Use 2 spaces for indentation in HTML, JavaScript, Ruby, SCSS, and XML 15 | 16 | [*.{html,js,rb,css,scss,xml}] 17 | indent_size = 2 18 | 19 | # Use 4 spaces for indentation in Markdown files 20 | 21 | [*.md] 22 | indent_size = 2 -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["angular"], 3 | 4 | "env": { 5 | "browser": true, 6 | "node": true, 7 | "amd" : true, 8 | "mocha" : true, 9 | "jasmine" : true, 10 | "phantomjs" : true, 11 | "jquery" : true 12 | }, 13 | 14 | "rules": { 15 | "strict": 0, 16 | "no-alert": 2, 17 | "no-caller": 2, 18 | "no-bitwise": 0, 19 | "no-console": 2, 20 | "no-debugger": 1, 21 | "no-empty": 1, 22 | "no-eval": 2, 23 | "no-ex-assign": 1, 24 | "no-floating-decimal": 0, 25 | "no-implied-eval": 1, 26 | "no-with": 1, 27 | "no-fallthrough": 1, 28 | "no-unreachable": 2, 29 | "no-underscore-dangle": 0, 30 | "no-undef-init": 1, 31 | "no-octal": 1, 32 | "no-obj-calls": 1, 33 | "no-new-wrappers": 1, 34 | "no-new": 1, 35 | "no-new-func": 1, 36 | "no-native-reassign": 1, 37 | "no-plusplus": 0, 38 | "no-delete-var": 1, 39 | "no-return-assign": 1, 40 | "no-new-object": 1, 41 | "no-label-var": 1, 42 | "no-ternary": 0, 43 | "no-self-compare": 0, 44 | "smarter-eqeqeq": 0, 45 | "brace-style": 1, 46 | "camelcase": 1, 47 | "curly": 1, 48 | "dot-notation": 1, 49 | "eqeqeq": 2, 50 | "new-parens": 1, 51 | "guard-for-in": 0, 52 | "radix": 0, 53 | "new-cap": 0, 54 | "quote-props": 0, 55 | "semi": 2, 56 | "use-isnan": 1, 57 | "quotes": [1, "single"], 58 | "max-params": [0, 3], 59 | "max-statements": [0, 10], 60 | "complexity": [0, 11], 61 | "wrap-iife": 1, 62 | "no-multi-str": 1, 63 | "no-multi-spaces": 1, 64 | "key-spacing": 0, 65 | "brace-style": 0, 66 | "no-unused-vars": 2, 67 | "no-shadow": 0, 68 | "no-undef": 1, 69 | "camelcase": 0, 70 | "comma-spacing": 1, 71 | "no-use-before-define": 0, 72 | 73 | // ANGULAR RULES 74 | "angular/controller-as": 0, 75 | "angular/typecheck-object": 0, 76 | "angular/timeout-service": 0, 77 | "angular/controller-as-vm": 0, 78 | "angular/controller-as-route": 0, 79 | "angular/controller-name": [1, "/[A-Z].*Controller|Ctrl$/"], //e.g HomeController or HomeCtrl 80 | "angular/on-watch": 0, 81 | "angular/di": 0 82 | }, 83 | 84 | "globals": { 85 | "document": true, 86 | "window": true, 87 | "before": true, 88 | "beforeEach": true, 89 | "inject": true, 90 | "$log": true, 91 | "_": true, 92 | "after": true, 93 | "afterEach": true, 94 | "angular": true, 95 | "require": true, 96 | "module": true, 97 | "define": true, 98 | "brackets": true, 99 | "jQuery": true, 100 | "$": true, 101 | "Mustache": true, 102 | "CallManager": true, 103 | "getEncodedServerAddr": true, 104 | "log4javascript": true, 105 | "console": true, 106 | "atmosphere": true, 107 | "jasmine": true, 108 | "exports": true, 109 | "describe": true, 110 | "browser": true, 111 | "it": true, 112 | "by": true, 113 | "waits": true, 114 | "expect": true, 115 | "runs": true, 116 | "element": true, 117 | "waitsFor": true, 118 | "it": false, 119 | "xit": false, 120 | "describe": false, 121 | "xdescribe": false, 122 | "beforeEach": false, 123 | "afterEach": false, 124 | "expect": false, 125 | "spyOn": false 126 | } 127 | 128 | } 129 | 130 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea/ 3 | .sass-cache/ 4 | npm-debug.log 5 | junit-report.xml 6 | tmp/ 7 | build/ 8 | public/ 9 | node_modules/ 10 | reports/ 11 | coverage/ 12 | vendor/ 13 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | module.exports = function (grunt) { 4 | 5 | /* 6 | * Load required Grunt tasks. These are installed based on the versions listed 7 | * in `package.json` when you do `npm install` in this directory. 8 | */ 9 | grunt.loadNpmTasks('grunt-contrib-clean'); 10 | grunt.loadNpmTasks('grunt-contrib-copy'); 11 | grunt.loadNpmTasks('grunt-contrib-concat'); 12 | grunt.loadNpmTasks('grunt-contrib-watch'); 13 | grunt.loadNpmTasks('grunt-contrib-uglify'); 14 | grunt.loadNpmTasks('grunt-ng-annotate'); 15 | grunt.loadNpmTasks('grunt-contrib-htmlmin'); 16 | grunt.loadNpmTasks('grunt-express'); 17 | grunt.loadNpmTasks('grunt-karma'); 18 | grunt.loadNpmTasks('grunt-html2js'); 19 | grunt.loadNpmTasks('grunt-run'); 20 | grunt.loadNpmTasks('grunt-newer'); 21 | grunt.loadNpmTasks('grunt-continue'); 22 | grunt.loadNpmTasks('grunt-eslint'); 23 | grunt.loadNpmTasks('grunt-sass'); 24 | 25 | /* 26 | * Load in our JavaScript Libraries 27 | */ 28 | var vendorConfig = require('./vendor.config.js'); 29 | 30 | /* 31 | * Load in our build configuration 32 | */ 33 | var userConfig = { 34 | /* 35 | * The `dev_build_dir` folder is where our projects are compiled during 36 | * development and the `prod_build_dir` folder is where our app resides once it's 37 | * completely built. 38 | */ 39 | dev_build_dir: 'public', 40 | prod_build_dir: 'production', 41 | 42 | /* 43 | * This is a collection of file patterns that refer to our app source code 44 | */ 45 | app_files: { 46 | js: ['src/app/**/*.js', '!src/app/**/*.spec.js', '!src/app/**/*.e2e.js', '!src/assets/**/*.js'], 47 | jsunit: ['src/app/**/*.spec.js'], 48 | e2e: ['src/app/**/*.e2e.js'], 49 | atpl: ['src/app/**/*.tpl.html'], 50 | html: ['src/index.html'], 51 | sass: 'src/styles/main.scss' 52 | }, 53 | 54 | /* 55 | * Configure the JavaScript vendor files 56 | */ 57 | vendor_files: vendorConfig 58 | 59 | }; 60 | 61 | /* 62 | * This is the configuration object Grunt uses to give each plugin its 63 | * instructions. 64 | */ 65 | var taskConfig = { 66 | /* 67 | * We read in our `package.json` file so we can access the package name and 68 | * version. It's already there, so we don't repeat ourselves here. 69 | */ 70 | pkg: grunt.file.readJSON('package.json'), 71 | 72 | /* 73 | * The banner is the comment that is placed at the top of our compiled 74 | * source files. It is first processed as a Grunt template, where the `<%=` 75 | * pairs are evaluated based on this very configuration object. 76 | */ 77 | meta: { 78 | banner: '/**\n' + 79 | ' * <%= pkg.name %> v<%= pkg.version %> <%= grunt.template.today("dd-mm-yyyy") %>\n' + 80 | ' * <%= pkg.homepage %>\n' + 81 | ' *\n' + 82 | ' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + 83 | ' */\n' 84 | }, 85 | 86 | /* 87 | * The directories to delete when `grunt clean` is executed. 88 | */ 89 | clean: { 90 | build: { 91 | src: ['<%= dev_build_dir %>', 'reports/'], 92 | options: { 93 | force: true 94 | } 95 | }, 96 | compile: { 97 | src: ['<%= prod_build_dir %>'], 98 | options: { 99 | force: true 100 | } 101 | } 102 | }, 103 | 104 | /* 105 | * The `copy` task just copies files from A to B. We use it here to copy 106 | * our project assets (images, fonts, etc.) and Javascript files into 107 | * `dev_build_dir`, and then to copy the assets to `prod_build_dir`. 108 | */ 109 | copy: { 110 | build_module_assets: { 111 | files: [ 112 | { 113 | dest: '<%= dev_build_dir %>/assets/', 114 | src: ['src/app/**/assets/**/*.*'], 115 | cwd: '.', 116 | expand: true, 117 | flatten: true 118 | } 119 | ] 120 | }, 121 | 122 | build_app_assets: { 123 | files: [ 124 | { 125 | src: ['**'], 126 | dest: '<%= dev_build_dir %>/assets/', 127 | cwd: 'src/assets', 128 | expand: true 129 | } 130 | ] 131 | }, 132 | build_appjs: { 133 | files: [ 134 | { 135 | src: ['<%= app_files.js %>'], 136 | dest: '<%= dev_build_dir %>/', 137 | cwd: '.', 138 | expand: true 139 | } 140 | ] 141 | }, 142 | build_vendorjs: { 143 | files: [ 144 | { 145 | src: ['<%= vendor_files.js %>'], 146 | dest: '<%= dev_build_dir %>/', 147 | cwd: '.', 148 | expand: true 149 | } 150 | ] 151 | }, 152 | compile_assets: { 153 | files: [ 154 | { 155 | src: ['**'], 156 | dest: '<%= prod_build_dir %>/assets', 157 | cwd: '<%= dev_build_dir %>/assets', 158 | expand: true 159 | } 160 | ] 161 | } 162 | }, 163 | 164 | /* 165 | * `grunt concat` concatenates multiple source files into a single file. 166 | */ 167 | concat: { 168 | 169 | /* 170 | * The `build_css` target concatenates compiled CSS and vendor CSS 171 | * together. 172 | */ 173 | build_css: { 174 | src: [ 175 | '<%= dev_build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css' 176 | ], 177 | dest: '<%= dev_build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css' 178 | }, 179 | 180 | /* 181 | * The `compile_js` target is the concatenation of our application source 182 | * code and all specified vendor source code into a single file. 183 | */ 184 | compile_js: { 185 | 186 | options: { 187 | banner: '<%= meta.banner %>' 188 | }, 189 | 190 | /* 191 | * Wraps all javascript app code into a closure 192 | * to prevent polluting the global namespace 193 | */ 194 | src: [ 195 | '(function ( window, angular, undefined ) {', 196 | '<%= vendor_files.js %>', 197 | '<%= dev_build_dir %>/src/**/*.js', 198 | '<%= html2js.app.dest %>', 199 | '})( window, window.angular );' 200 | ], 201 | dest: '<%= prod_build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.js' 202 | } 203 | }, 204 | 205 | /* 206 | * `ngAnnotate` annotates the sources before minifying. That is, it allows us 207 | * to code without the array syntax. 208 | */ 209 | ngAnnotate: { 210 | compile: { 211 | files: [ 212 | { 213 | src: ['<%= app_files.js %>'], 214 | cwd: '<%= dev_build_dir %>', 215 | dest: '<%= dev_build_dir %>', 216 | expand: true 217 | } 218 | ] 219 | } 220 | }, 221 | 222 | /* 223 | * Minify the sources! 224 | */ 225 | uglify: { 226 | compile: { 227 | files: { 228 | '<%= concat.compile_js.dest %>': '<%= concat.compile_js.dest %>' 229 | } 230 | } 231 | }, 232 | 233 | /* 234 | * This task handles our SASS compilation and uglification automatically. 235 | * Only our `main.scss` file is included in compilation. All other files 236 | * must be imported from this file. 237 | */ 238 | sass: { 239 | build: { 240 | options: { 241 | sourceMap: true, 242 | outputStyle: 'expanded' 243 | }, 244 | files: { 245 | '<%= dev_build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css': '<%= app_files.sass %>' 246 | } 247 | }, 248 | compile: { 249 | options: { 250 | sourceMap: false, 251 | outputStyle: 'compressed' 252 | }, 253 | files: { 254 | '<%= dev_build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css': '<%= app_files.sass %>' 255 | } 256 | } 257 | }, 258 | 259 | /* 260 | * HTMLMIN is a Grunt plugin that takes all of your html template files and 261 | * and minifies them by removing comments, white spaces, etc. 262 | * This plugin is used in combination with the 'html2js' and it's called before 263 | * to minimise the html before is put in the AngularJS templateCache. 264 | */ 265 | htmlmin: { 266 | index: { // Selects only the main 'index.html' file 267 | options: { // Target options 268 | removeComments: true, // Strip HTML comments 269 | removeCommentsFromCDATA: true, // Strip HTML comments from scripts and styles 270 | minifyJS: true, // Minify JavaScript inside script tags 271 | collapseWhitespace: true // Remove white spaces 272 | }, 273 | files: { 274 | '<%= prod_build_dir %>/index.html': '<%= prod_build_dir %>/index.html' 275 | } 276 | } 277 | }, 278 | 279 | /* 280 | * HTML2JS is a Grunt plugin that takes all of your template files and 281 | * places them into JavaScript files as strings that are added to 282 | * AngularJS's template cache. This means that the templates too become 283 | * part of the initial payload as one JavaScript file. Neat! 284 | */ 285 | html2js: { 286 | /* 287 | * These are the templates from `src/app`. 288 | */ 289 | app: { 290 | options: { 291 | module: 'app.templates', 292 | quoteChar: '\'', 293 | fileHeaderString: '/* eslint-disable */', 294 | fileFooterString: '/* eslint-enable */', 295 | base: 'src/app' 296 | }, 297 | src: ['<%= app_files.atpl %>'], 298 | dest: '<%= dev_build_dir %>/app.templates.js' 299 | }, 300 | 301 | /* 302 | * These are the minified templates 303 | */ 304 | min: { 305 | options: { 306 | module: 'app.templates', 307 | quoteChar: '\'', 308 | fileHeaderString: '/* eslint-disable */', 309 | fileFooterString: '/* eslint-enable */', 310 | base: 'src/app', 311 | htmlmin: { 312 | collapseBooleanAttributes: true, 313 | collapseWhitespace: true, 314 | removeAttributeQuotes: true, 315 | removeComments: true, 316 | removeEmptyAttributes: true, 317 | removeRedundantAttributes: true, 318 | removeScriptTypeAttributes: true, 319 | removeStyleLinkTypeAttributes: true 320 | } 321 | }, 322 | src: ['<%= app_files.atpl %>'], 323 | dest: '<%= dev_build_dir %>/app.templates.js' 324 | } 325 | 326 | }, 327 | 328 | /* 329 | * The Karma configurations. 330 | */ 331 | karma: { 332 | options: { 333 | configFile: '<%= dev_build_dir %>/karma-unit.js' 334 | }, 335 | continuous: { 336 | singleRun: true 337 | } 338 | }, 339 | 340 | /* 341 | * This task compiles the karma template so that changes to its file array 342 | * don't have to be managed manually. 343 | */ 344 | karmaconfig: { 345 | unit: { 346 | dir: '<%= dev_build_dir %>', 347 | src: ['<%= vendor_files.js %>', '<%= html2js.app.dest %>'] 348 | } 349 | }, 350 | 351 | parseUnit: { 352 | all: { 353 | dir: '<%= dev_build_dir %>', 354 | src: ['<%= app_files.jsunit %>'] 355 | } 356 | }, 357 | 358 | parseE2E: { 359 | all: { 360 | dir: '<%= dev_build_dir %>', 361 | src: ['<%= app_files.e2e %>'] 362 | } 363 | }, 364 | 365 | /* 366 | * The `index` task compiles the `index.html` file as a Grunt template. CSS 367 | * and JS files co-exist here but they get split apart later. 368 | */ 369 | index: { 370 | 371 | /* 372 | * During development, we don't want to have wait for compilation, 373 | * concatenation, minification, etc. So to avoid these steps, we simply 374 | * add all script files directly to the `` of `index.html`. The 375 | * `src` property contains the list of included files. 376 | */ 377 | build: { 378 | dir: '<%= dev_build_dir %>', 379 | src: [ 380 | '<%= vendor_files.js %>', 381 | '<%= dev_build_dir %>/src/**/*.js', 382 | '<%= html2js.app.dest %>', 383 | '<%= dev_build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css' 384 | ] 385 | }, 386 | /* 387 | * When it is time to have a completely compiled application, we can 388 | * alter the above to include only a single JavaScript and a single CSS 389 | * file. Now we're back! 390 | */ 391 | compile: { 392 | dir: '<%= prod_build_dir %>', 393 | src: [ 394 | '<%= concat.compile_js.dest %>', 395 | '<%= dev_build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css' 396 | ] 397 | } 398 | }, 399 | 400 | /* 401 | * Configure Express server --port 9000 402 | */ 403 | express: { 404 | development: { 405 | options: { 406 | port: 9000, 407 | //hostname: 'localhost', 408 | serverreload: false, 409 | bases: '<%= dev_build_dir %>', 410 | livereload: true 411 | } 412 | }, 413 | production: { 414 | options: { 415 | port: 9000, 416 | serverreload: false, 417 | bases: '<%= prod_build_dir %>', 418 | livereload: false 419 | } 420 | } 421 | }, 422 | 423 | /* 424 | * This task allows Grunt to run external tools (e.g. nodejs, serve, etc) 425 | */ 426 | run: { 427 | public: { 428 | exec: 'serve --cors --port 31000 ' + '<%= dev_build_dir %>/' 429 | }, 430 | production: { 431 | exec: 'serve --cors --port 32000 ' + '<%= prod_build_dir %>/' 432 | }, 433 | reports: { 434 | exec: 'serve --port 22000 reports/coverage/lcov-report' 435 | }, 436 | protractor: { 437 | exec: 'protractor protractor.config.js' 438 | } 439 | }, 440 | 441 | eslint: { 442 | options: { 443 | configFile: '.eslintrc', 444 | 445 | /* Available formats: stylish, compact, checkstyle, junit, */ 446 | format: 'stylish' 447 | }, 448 | target: ['src/app/**/*.js', '!src/app/**/*.spec.js', '!src/app/**/*.e2e.js'] 449 | }, 450 | 451 | /* 452 | * And for rapid development, we have a watch set up that checks to see if 453 | * any of the files listed below change, and then to execute the listed 454 | * tasks when they do. This just saves us from having to type 'grunt' into 455 | * the command-line every time we want to see what we're working on; we can 456 | * instead just leave 'grunt watch' running in a background terminal. 457 | * 458 | * But we don't need the same thing to happen for all the files. 459 | */ 460 | delta: { 461 | /* 462 | * When our JavaScript source files change, we want to run lint them and 463 | * run our unit tests. 464 | */ 465 | jssrc: { 466 | files: ['<%= app_files.js %>'], 467 | /* 468 | * Changes are detected but unit tests are not run 469 | * this creates faster live reload sessions 470 | */ 471 | tasks: ['newer:eslint', 'newer:copy:build_appjs' ], 472 | options: { 473 | spawn: false, 474 | livereload: true 475 | } 476 | }, 477 | 478 | /* 479 | * When a JavaScript unit test file changes, we only want to lint it and 480 | * run the unit tests. We don't want to do any live reloading. 481 | */ 482 | jsunit: { 483 | files: [ 484 | '<%= app_files.jsunit %>' 485 | ], 486 | tasks: [ 'newer:eslint', 'karmaconfig:unit', 'karma:continuous'], 487 | options: { 488 | spawn: false, 489 | livereload: false 490 | } 491 | }, 492 | 493 | e2e: { 494 | files: ['<%= app_files.e2e %>'], 495 | tasks: ['newer:eslint', 'run:protractor'], 496 | options: { 497 | spawn: false, 498 | livereload: false 499 | } 500 | }, 501 | 502 | /* 503 | * When assets are changed, copy them. Note that this will *not* copy new 504 | * files, so this is probably not very useful. 505 | */ 506 | assets: { 507 | files: ['src/assets/**/*'], 508 | tasks: ['newer:copy:build_app_assets'], 509 | options: { 510 | spawn: false, 511 | livereload: true 512 | } 513 | }, 514 | 515 | /* 516 | * When index.html changes, we need to compile it. 517 | */ 518 | html: { 519 | files: ['<%= app_files.html %>'], 520 | tasks: ['index:build'], 521 | options: { 522 | spawn: false, 523 | livereload: true 524 | } 525 | }, 526 | 527 | /* 528 | * When our templates change, we only rewrite the template cache. 529 | */ 530 | tpls: { 531 | files: ['<%= app_files.atpl %>'], 532 | tasks: [ 'html2js:app' ], 533 | options: { 534 | spawn: false, 535 | livereload: true 536 | } 537 | }, 538 | 539 | /* 540 | * When any SASS or CSS changes, we need to compile them. 541 | */ 542 | sass: { 543 | files: ['src/**/*.scss'], 544 | tasks: ['sass:build'], 545 | options: { 546 | spawn: false, 547 | livereload: true 548 | } 549 | } 550 | 551 | } 552 | 553 | }; 554 | 555 | /* 556 | * Track how long each task takes to run, used to optimize 557 | * grunt build times 558 | */ 559 | require('time-grunt')(grunt); 560 | 561 | /* 562 | * Use this function to catch events when watch is called: 563 | * 564 | * grunt.event.on('watch', function(action, filepath) { 565 | * grunt.log.write('message to console'); 566 | * }); 567 | */ 568 | 569 | grunt.initConfig(grunt.util._.extend(taskConfig, userConfig)); 570 | 571 | /* 572 | * In order to make it safe to just compile or copy *only* what was changed, 573 | * we need to ensure we are starting from a clean, fresh build. So we rename 574 | * the `watch` task to `delta` (that's why the configuration var above is 575 | * `delta`) and then add a new task called `watch` that does a clean build 576 | * before watching for changes. 577 | */ 578 | grunt.renameTask('watch', 'delta'); 579 | grunt.registerTask('watch', ['development', 'express:development', 'delta']); 580 | 581 | /* 582 | * Register our own grunt tasks. The default task is the development build 583 | */ 584 | grunt.registerTask('default', ['development']); 585 | grunt.registerTask('deploy', ['production', 'copy:deploy']); 586 | 587 | /* 588 | * The `build` task gets your app ready to run for development and testing. 589 | */ 590 | grunt.registerTask('development', [ 591 | 'clean:build', 592 | 'html2js:app', 593 | 'eslint', 594 | 'sass:build', 595 | 'concat:build_css', 596 | 'copy:build_app_assets', 'copy:build_module_assets', 597 | 'copy:build_appjs', 598 | 'copy:build_vendorjs', 'index:build' 599 | ]); 600 | 601 | /* 602 | * Run E2E tests 603 | */ 604 | grunt.registerTask('run:e2e', [ 605 | 'express:development', 606 | 'run:protractor' 607 | ]); 608 | 609 | /* 610 | * Run unit tests 611 | */ 612 | grunt.registerTask('run:unit', [ 613 | 'karmaconfig', 614 | 'karma:continuous' 615 | ]); 616 | 617 | /* 618 | * Creates and runs code coverage reports. 619 | */ 620 | grunt.registerTask('reports', [ 621 | 'run:unit', 622 | 'run:reports' 623 | ]); 624 | 625 | /* 626 | * This task runs code checks (ESLint), Unit Tests and E2E tests. 627 | * It produces reports on code coverage and unit test results. 628 | * Reports are stored in a 'reports' folder. 629 | */ 630 | grunt.registerTask('test', [ 631 | 'clean:build', 632 | 'eslint', 633 | 'html2js:app', 634 | 'sass:build', 635 | 'concat:build_css', 636 | 'copy:build_app_assets', 'copy:build_module_assets', 637 | 'copy:build_appjs', 'copy:build_vendorjs', 'index:build', 638 | 'run:unit', 639 | 'run:e2e' 640 | ]); 641 | 642 | /* 643 | * The `production` task gets your app ready for deployment by concatenating and 644 | * minifying your code. 645 | */ 646 | grunt.registerTask('production', [ 647 | 'clean:build', 648 | 'clean:compile', 649 | 'html2js:min', 650 | 'test', 651 | 'sass:compile', 652 | 'concat:build_css', 653 | 'copy:build_app_assets', 654 | 'copy:build_module_assets', 655 | 'copy:build_appjs', 656 | 'copy:build_vendorjs', 657 | 'index:build', 658 | 'copy:compile_assets', 659 | 'ngAnnotate', 660 | 'concat:compile_js', 661 | 'uglify', 662 | 'index:compile', 663 | 'htmlmin:index' 664 | ]); 665 | 666 | /* 667 | * A utility function to get all app JavaScript sources. 668 | */ 669 | function filterForJS(files) { 670 | return files.filter(function (file) { 671 | return file.match(/\.js$/); 672 | }); 673 | } 674 | 675 | /* 676 | * A utility function to get all app CSS sources. 677 | */ 678 | function filterForCSS(files) { 679 | return files.filter(function (file) { 680 | return file.match(/\.css$/); 681 | }); 682 | } 683 | 684 | /* 685 | * A utility function to get all app unit tests 686 | */ 687 | function filterForSpecFiles(files) { 688 | return files.filter(function (file) { 689 | return file.match(/\.spec.js$/); 690 | }); 691 | } 692 | 693 | /* 694 | * A utility function to get all app unit tests 695 | */ 696 | function filterForE2EFiles(files) { 697 | return files.filter(function (file) { 698 | return file.match(/\.e2e.js$/); 699 | }); 700 | } 701 | 702 | /* 703 | * The index.html template includes the stylesheet and javascript sources 704 | * based on dynamic names calculated in this Gruntfile. This task assembles 705 | * the list into variables for the template to use and then runs the 706 | * compilation. 707 | */ 708 | grunt.registerMultiTask('index', 'Process index.html template', function () { 709 | var dirRE = new RegExp('^(' + grunt.config('dev_build_dir') + '|' + grunt.config('prod_build_dir') + ')\/', 'g'); 710 | 711 | var jsFiles = filterForJS(this.filesSrc).map(function (file) { 712 | return file.replace(dirRE, ''); 713 | }); 714 | 715 | var cssFiles = filterForCSS(this.filesSrc).map(function (file) { 716 | return file.replace(dirRE, ''); 717 | }); 718 | 719 | grunt.file.copy('src/index.html', this.data.dir + '/index.html', { 720 | process: function (contents, path) { 721 | return grunt.template.process(contents, { 722 | data: { 723 | scripts: jsFiles, 724 | styles: cssFiles, 725 | version: grunt.config('pkg.version'), 726 | author: grunt.config('pkg.author'), 727 | date: grunt.template.today("yyyy") 728 | } 729 | }); 730 | } 731 | }); 732 | }); 733 | 734 | /* 735 | * In order to avoid having to specify manually the files needed for karma to 736 | * run, we use grunt to manage the list for us. The `karma/*` files are 737 | * compiled as grunt templates for use by Karma. Yay! 738 | */ 739 | grunt.registerMultiTask('karmaconfig', 'Process karma config templates', function () { 740 | var scripts = filterForJS(this.filesSrc); 741 | 742 | grunt.file.copy('karma/karma-unit.tpl.js', grunt.config('dev_build_dir') + '/karma-unit.js', { 743 | process: function (contents, path) { 744 | return grunt.template.process(contents, { 745 | data: { 746 | scripts: scripts 747 | } 748 | }); 749 | } 750 | }); 751 | 752 | }); 753 | 754 | grunt.registerMultiTask('parseUnit', 'Parse unit test files', function () { 755 | var jsFiles = filterForSpecFiles(this.filesSrc); 756 | 757 | grunt.log.writeln('Unit test files:'); 758 | grunt.log.writeln(JSON.stringify(jsFiles)); 759 | }); 760 | 761 | grunt.registerMultiTask('parseE2E', 'Parse E2E test file', function () { 762 | var jsFiles = filterForE2EFiles(this.filesSrc); 763 | 764 | grunt.log.writeln('E2E test files:'); 765 | grunt.log.writeln(JSON.stringify(jsFiles)); 766 | }); 767 | 768 | }; 769 | /* eslint-enable */ 770 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Cathal Mac Donnacha 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angularjs-foundation-boilerplate 2 | A simple and well structured boilerplate project based on AngularJS and Zurb's Foundation 3 | 4 | ## Features 5 | * Responsive layout 6 | * Mobile ready 7 | * SASS support 8 | * Grunt watch, build and local server tasks 9 | * Live reload 10 | * Organised folder structure 11 | * Minified CSS, HTML and JS build files 12 | * [Font Awesome](http://fortawesome.github.io/Font-Awesome/icons/) icons 13 | * Support for Unit & E2E Testing 14 | * Unit Test reporting 15 | * ESLint to detect incorrect coding patterns. 16 | * [Jasmine](http://jasmine.github.io/2.3/introduction.html) testing framework 17 | * [Karma](http://karma-runner.github.io/0.13/index.html) test runner 18 | * [Protractor](https://angular.github.io/protractor/#/) end-to-end test framework 19 | 20 | ## Live Demo 21 | [Check out the live demo](http://cmacdonnacha.github.io/angularjs-foundation-boilerplate/) 22 | 23 | ## Setup 24 | 1. Install [Git](https://git-scm.com/downloads) and [NodeJS](http://nodejs.org/) 25 | 2. Install Grunt and Bower globally: `npm install -g grunt-cli bower` 26 | 3. Install Karma globally: `npm install -g karma` 27 | 4. Install PhantomJS headless browser globally: `npm install -g phantomjs` 28 | 5. Install Protractor globally: `npm install -g protractor` 29 | 6. Install Selenium web driver binaries by running: `webdriver-manager update` (installs the Chrome driver by default) 30 | 7. Install a local Http server: `npm install -g serve` (for local web testing) 31 | 32 | **NOTE:** If you have previous versions of any of the above packages, it's recommended that you update them: `npm update -g` 33 | 34 | ## Install Project Dependencies 35 | 1. `git clone https://github.com/cmacdonnacha/angularjs-foundation-boilerplate.git myApp` 36 | 2. `cd myApp` 37 | 3. `npm install` - this installs both the required NodeJS modules and the bower component libraries. 38 | 39 | **IMPORTANT:** If you run into any issues please have a look at the **"Troubleshooting"** section at the bottom of this page. 40 | 41 | ## Quick Usage 42 | * `grunt watch` : Creates a development build folder called 'public' and serves it on: [`http://localhost:9000/`](http://localhost:9000/) 43 | * `grunt test` : Runs code checks, unit tests and E2E tests 44 | * `grunt run:unit` : Runs unit tests only 45 | * `grunt run:e2e` : Runs E2E tests only 46 | * `grunt production` : Creates a production build in a folder called **'production'** 47 | * `grunt run:production` : Serves the **'production'** build on: [`http://localhost:9000/`](http://localhost:9000/) if it exists. 48 | * `grunt eslint` : Runs an ESLint code check 49 | 50 | ## Running unit test reports 51 | 1. `grunt reports`: will create and serve the **'reports'** folder 52 | 2. Navigate to [`http://localhost:22000/`](http://localhost:22000/) 53 | 54 | ## Project Structure 55 | This project follows a **"Folders-by-Feature"** structure very similar to [John Papa's Styleguide](https://github.com/johnpapa/angular-styleguide#application-structure). From the folder structure below you can see that there are 6 separate components, a folder for each one. 56 | Each component is treated as a mini Angular app. This structure allows us developers to easily locate code and identify what each file represents at a glance. 57 | By retaining this structure the project is much more manageable as it grows. 58 | 59 | ![alt text](http://i.imgur.com/OaqOEI0.png "Folders-by-Feature structure") 60 | 61 | * The `app` folder contains the individual components: 62 | * `about`: Contains the about page related files. 63 | * `common`: Contains all common services, directives etc. used across the entire app. 64 | * `home`: Contains the home page related files. 65 | * `layout`: Acts as a container for other layout components (about, home, topbar etc.) 66 | * `sample`: A template component that can be duplicated whenever you want to create your own component (Copy and paste). 67 | * `topbar`: Contains the topbar related files. 68 | 69 | 70 | * Each component has its own sub-folder containing files associated with that component: 71 | * assets 72 | * controllers 73 | * directives 74 | * e2e tests 75 | * services 76 | * styles 77 | * unit tests 78 | * views 79 | 80 | **Note:** Not every component will contain all of these sub-folders, just add them as you need them. 81 | * The `assets` folder contains the globally used fonts and images. 82 | * The `styles` folder contains all of the global sass files needed to style the app. Let's have a closer look at each file: 83 | 84 | * `_font-awesome.scss`: Contains all of the font awesome icons taken from the `vendor/font-awesome` folder. Check [this](http://fortawesome.github.io/Font-Awesome/icons/) out to see all available icons. 85 | * `_mixins.scss`: This is where you can put your very own Sass Mixins that can be used globally throughout the app. This should only contain Mixins. 86 | * `_settings.scss`: Allows you to override the default Foundation styles with your own. This is detailed in a section below. 87 | * `_shared.scss`: This is where you can put your very own Sass that can be used globally throughout the app. Typically it's where you would add globally used Sass classes which would then use mixins from the `_mixins.scss` file. 88 | * `main.scss`: Brings everything together. Contains all of the Sass file imports. It's what tells the app where to grab the styles from. 89 | 90 | #### Adding a new component 91 | As you can see in this boilerpate project we have 6 sample components: `about`, `common`, `home`, `layout`, `sample` and `topbar`. Check out the [wiki](https://github.com/cmacdonnacha/angularjs-foundation-boilerplate/wiki/How-to-add-a-new-component) to see how you can go about adding your very own component. 92 | 93 | ## Making Foundation Styles your own 94 | Foundation is great because it comes with basic styling, leaving it up to you to give it your very own touch. You can do this by changing the `_settings.scss` file inside the `styles` folder: 95 | 96 | ![alt text](http://i.imgur.com/ScJMdQ6.png "Foundation _settings.scss file") 97 | 98 | Simply uncomment any of the sections in the `_settings.scss` file and you will override the default Foundation styling. Don't like the color of the topbar? No problem, change to a nice bright pink instead. Find out more [here.](http://foundation.zurb.com/docs/using-sass.html) 99 | 100 | ## Troubleshooting 101 | Even crème de menthe projects have their issues. Here are some problems you may face along with some suggestions on how to resolve them: 102 | 103 | #### 1. Issue: I'm getting the following error when running `npm install`: ***"Error: EPERM or operation not permitted or permission denied"*** 104 | This error means that NPM was not able to install one of the node modules to the file system. There are three major reasons why this could happen: 105 | 106 | * You don't have write access to the installation directory. 107 | * The permissions in the NPM cache got messed up. 108 | * You have over-zealous anti-virus software installed, and it's blocking file system writes. 109 | 110 | **Suggestion:** 111 | 112 | 1. Run `npm cache clean`. 113 | 2. Run `npm install` again. 114 | 115 | #### 2. Issue: I'm getting the following error when running `npm install`: ***"Error: Can't find Python executable 'python', you can set the PYTHON env variable."*** 116 | **Suggestion:** This error can be ignored (it's a warning really) as the node modules will install successfully anyway. The reason this error appears is because 117 | some node modules have dependencies on a clunky build tool called `node-gyp` that compiles C++ extensions for NodeJS, and it requires python. Long story short, 118 | if you don't have Python installed on your machine you will see these errors but it's nothing to worry about. 119 | 120 | #### 3. Issue: I'm getting an error when running the `grunt production` task. 121 | **Suggestion:** Make sure you have administrator permissions to delete folders from the directory. If you're still seeing the issue then manually delete the `production` folder and run `grunt production` again. 122 |
123 |
124 | 125 | #### 4. Issue: I'm getting the following error when running the `grunt test` task: ***"No selenium server jar found at the specified location"*** 126 | **Suggestion:** Run the following command and try again: `webdriver-manager update` 127 |
128 |
129 | 130 | #### 5. Issue: I'm still getting an error when running the `grunt test` task. 131 | **Suggestion:** Make sure you have Java installed. Close and re-launch the command line and try again. 132 |
133 |
134 | 135 | #### 6. Issue: I'm getting the following error ***"Error: Cannot find module 'stylus'"*** 136 | **Suggestion:** Run the following command: `npm install stylus -g` 137 |
138 |
139 | 140 | #### 7. Issue: I'm getting the following error when running the `grunt watch` task: ***"Error: 'libsass' bindings" not found. Try reinstalling 'node-sass'*** 141 | **Suggestion:** Run the following command: `npm install grunt-sass` 142 |
143 |
144 | 145 | #### 8. Issue: Bower hangs and cannot fetch the libraries when running `npm install` 146 | **Suggestion:** 147 | Set Git global options to fetch components over 'https' instead of 'git' by running the following command: 148 | `git config --global url."https://".insteadOf git://` 149 |
150 |
151 | 152 | #### 9. Issue: None of the above solutions have helped 153 | **Suggestion 1:** 154 | 155 | 1. Stop the `grunt watch` task. 156 | 2. Run `grunt clean` 157 | 3. Run `grunt watch` again. 158 | 159 | **Suggestion 2:** 160 | 161 | This project has been tested with the following tools: 162 | * **NodeJs:** 4.2.1 163 | * **Npm:** 2.14.7 164 | 165 | If you are running into issues while installing node packages then ensure you have the versions above installed. 166 | 167 | ## Contribute 168 | Believe it or not, **angularjs-foundation-boilerplate** is not perfect. If you want to improve it somehow then by all means go ahead and create a pull request :-) 169 | 170 | ## Changelog 171 | ### 1.0.1 172 | **06/11/2015** 173 | * Updated font awesome icons 174 | * Reduced size of favicon 175 | * Updated grunt file 176 | 177 | ### 1.0.0 178 | **30/10/2015** 179 | * Initial Release 180 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angularjs-foundation-boilerplate", 3 | "version": "1.0.0", 4 | "author": "Cathal Mac Donnacha", 5 | "description": "A simple and well structured boilerplate project based on AngularJS and Zurb's Foundation", 6 | "license": "MIT", 7 | "dependencies": {}, 8 | "devDependencies": { 9 | "angular": "~1.3.4", 10 | "angular-mocks": "~1.3.4", 11 | "angular-resource": "~1.3.4", 12 | "angular-ui-router": "~0.2.15", 13 | "angular-local-storage": "~0.2.2", 14 | "jquery": "~2.1.3", 15 | "animate.css": "~3.4.0", 16 | "font-awesome": "~4.4.0", 17 | "underscore": "~1.8.3", 18 | "foundation": "~5.5.3" 19 | }, 20 | "keywords": [ 21 | "angular", 22 | "foundation", 23 | "foundation for sites", 24 | "angularjs", 25 | "boilerplate", 26 | "starter", 27 | "front-end", 28 | "zurb" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /karma/karma-unit.tpl.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | module.exports = function ( karma ) { 4 | karma.set({ 5 | /** 6 | * From where to look for files, starting with the location of this file. 7 | */ 8 | basePath: '../', 9 | 10 | /** 11 | * This is the list of file patterns to load into the browser during testing. 12 | */ 13 | files: [ <% scripts.forEach( function ( file ) { %> '<%= file %>', <% }); %> 'src/app/**/*.js'], 14 | 15 | exclude: ['src/app/**/*.e2e.js', 'src/assets/**/*.js'], 16 | 17 | frameworks: [ 'jasmine' ], 18 | 19 | plugins: [ 'karma-jasmine', 'karma-phantomjs-launcher', 'karma-coverage', 'karma-junit-reporter' ], 20 | 21 | preprocessors: { 22 | 23 | /** 24 | * Exclude unit test code from the coverage report 25 | */ 26 | 'src/**/!(*spec).js': ['coverage'] 27 | }, 28 | 29 | /** 30 | * Configure the reporters 31 | */ 32 | reporters: ['progress', 'coverage', 'junit'], 33 | 34 | junitReporter: { 35 | outputFile: 'reports/junit/junit-report.xml', 36 | suite: '' 37 | }, 38 | 39 | coverageReporter: { 40 | type : 'lcov', 41 | dir : 'reports', 42 | subdir: 'coverage' 43 | }, 44 | 45 | /** 46 | * On which port should the browser connect, on which port is the test runner 47 | * operating, and what is the URL path for the browser to use. 48 | */ 49 | colors: true, 50 | port: 9018, 51 | runnerPort: 9100, 52 | urlRoot: '/', 53 | 54 | /** 55 | * Log Level 56 | * Possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG 57 | */ 58 | logLevel: karma.LOG_DISABLE, 59 | 60 | /** 61 | * Disable file watching by default. 62 | */ 63 | singleRun: false, 64 | autoWatch: false, 65 | 66 | /** 67 | * The list of browsers to launch to test on. This includes only "Firefox" by 68 | * default, but other browser names include: 69 | * Chrome, ChromeCanary, Firefox, Opera, Safari, PhantomJS 70 | * 71 | * You may also leave this blank and manually navigate your browser to 72 | * http://localhost:9018/ when you're running tests. The window/tab can be left 73 | * open and the tests will automatically occur there during the build. This has 74 | * the aesthetic advantage of not launching a browser every time you save. 75 | */ 76 | browsers: ['PhantomJS'] 77 | 78 | }); 79 | }; 80 | /* eslint-enable */ 81 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "Cathal Mac Donnacha", 3 | "name": "angularjs-foundation-boilerplate", 4 | "version": "1.0.0", 5 | "license": "MIT", 6 | "docs": "", 7 | "description": "A simple and well structured boilerplate project based on AngularJS and Zurb's Foundation", 8 | "licenses": { 9 | "type": "", 10 | "url": "" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "" 15 | }, 16 | "dependencies": {}, 17 | "devDependencies": { 18 | "eslint": "^1.7.3", 19 | "eslint-plugin-angular": "^0.13.0", 20 | "grunt": "^0.4.5", 21 | "grunt-cli": "^0.1.13", 22 | "grunt-continue": "^0.1.0", 23 | "grunt-ng-annotate": "^1.0.1", 24 | "grunt-contrib-clean": "^0.6.0", 25 | "grunt-contrib-compass": "^1.0.2", 26 | "grunt-contrib-concat": "^0.5.0", 27 | "grunt-contrib-copy": "^0.8.0", 28 | "grunt-contrib-htmlmin": "^0.6.0", 29 | "grunt-contrib-uglify": "^0.10.0", 30 | "grunt-contrib-watch": "^0.6.1", 31 | "grunt-eslint": "^17.3.1", 32 | "grunt-express": "^1.4.1", 33 | "grunt-html2js": "^0.3.0", 34 | "grunt-karma": "^0.12.1", 35 | "grunt-newer": "^1.1.0", 36 | "grunt-run": "^0.5.2", 37 | "grunt-sass": "^1.0.0", 38 | "karma": "^0.13.14", 39 | "karma-coverage": "^0.5.3", 40 | "karma-jasmine": "^0.3.1", 41 | "karma-junit-reporter": "^0.3.8", 42 | "karma-phantomjs-launcher": "^0.2.1", 43 | "time-grunt": "^1.0.0" 44 | }, 45 | "scripts": { 46 | "postinstall": "bower install --no-interactive --allow-root" 47 | }, 48 | "keywords": [ 49 | "angular", 50 | "foundation", 51 | "foundation for sites", 52 | "angularjs", 53 | "boilerplate", 54 | "starter", 55 | "project", 56 | "front-end", 57 | "zurb" 58 | ] 59 | } 60 | -------------------------------------------------------------------------------- /production/assets/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/production/assets/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /production/assets/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/production/assets/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /production/assets/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/production/assets/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /production/assets/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/production/assets/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /production/assets/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/production/assets/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /production/assets/foundation-yeti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/production/assets/foundation-yeti.png -------------------------------------------------------------------------------- /production/assets/images/foundation-fav-icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/production/assets/images/foundation-fav-icon.ico -------------------------------------------------------------------------------- /production/index.html: -------------------------------------------------------------------------------- 1 | AngularJS Foundation Boilerplate
-------------------------------------------------------------------------------- /protractor.config.js: -------------------------------------------------------------------------------- 1 | exports.config = { 2 | // commenting this line auto-starts the selenium server 3 | //seleniumAddress: 'http://localhost:4444/wd/hub', 4 | 5 | // A base URL for your application under test. Calls to protractor.get() 6 | // with relative paths will be prepended with this. 7 | baseUrl: 'http://localhost:9000/', 8 | 9 | // Jasmine is fully supported as a test and assertion framework. 10 | framework: 'jasmine', 11 | 12 | // Options to be passed to minijasminenode. 13 | // See the full list at https://github.com/juliemr/minijasminenode/tree/jasmine1 14 | jasmineNodeOpts: { 15 | // If true, display spec names. 16 | isVerbose: true, 17 | // If true, print colors to the terminal. 18 | showColors: true, 19 | // If true, include stack traces in failures. 20 | includeStackTrace: false, 21 | // Default time to wait in ms before a test fails. 22 | defaultTimeoutInterval: 30000 23 | }, 24 | 25 | // Spec patterns are relative to the location of this config. 26 | specs: [ 27 | 'src/app/**/*.e2e.js' 28 | ] 29 | }; 30 | -------------------------------------------------------------------------------- /src/app/about/about.module.js: -------------------------------------------------------------------------------- 1 | angular.module('app.about', [ 2 | 'ui.router', 3 | 'about.controllers' 4 | ]) 5 | 6 | .config(function config($stateProvider) { 7 | $stateProvider.state('about', { 8 | url: '/about', 9 | templateUrl: 'about/views/about.tpl.html' 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/app/about/controllers/AboutCtrl.js: -------------------------------------------------------------------------------- 1 | angular.module('about.controllers.AboutCtrl', []) 2 | .controller('AboutCtrl', function($scope) { 3 | $scope.title = 'About Page'; 4 | }); 5 | -------------------------------------------------------------------------------- /src/app/about/controllers/controllers.js: -------------------------------------------------------------------------------- 1 | angular.module('about.controllers', [ 2 | 'about.controllers.AboutCtrl' 3 | ]); 4 | -------------------------------------------------------------------------------- /src/app/about/e2e/about.e2e.js: -------------------------------------------------------------------------------- 1 | describe('test about page', function () { 2 | 3 | beforeEach(function() { 4 | browser.get('#/about'); 5 | }); 6 | 7 | }); 8 | -------------------------------------------------------------------------------- /src/app/about/styles/_about.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/src/app/about/styles/_about.scss -------------------------------------------------------------------------------- /src/app/about/styles/_styles.scss: -------------------------------------------------------------------------------- 1 | // Import all separate styles for this component here. Don't add any actual Sass to this file. 2 | @import "about"; 3 | -------------------------------------------------------------------------------- /src/app/about/unit/AboutCtrl.spec.js: -------------------------------------------------------------------------------- 1 | describe('AboutCtrl ', function () { 2 | 3 | var controller, scope; 4 | 5 | beforeEach(module('app.about')); 6 | 7 | beforeEach(inject(function ($controller, $rootScope) { 8 | scope = $rootScope.$new(); 9 | controller = $controller('AboutCtrl', { 10 | $scope: scope 11 | }); 12 | })); 13 | 14 | it('should set correct page title', function () { 15 | expect(scope.title).toBe('About Page'); 16 | }); 17 | 18 | }); 19 | -------------------------------------------------------------------------------- /src/app/about/views/about.tpl.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Well would you look at that, it's the {{title}}.

5 |

Navigating between pages is really easy thanks to ui-router.

6 |
7 | 8 | Go back home 9 |
10 |
11 |
12 | 13 | -------------------------------------------------------------------------------- /src/app/app.js: -------------------------------------------------------------------------------- 1 | angular.module('angularjs-foundation-boilerplate', [ 2 | 3 | /** 4 | * Dependencies must be injected in specific order: 5 | * 1) AngularJS dependencies 6 | * 2) Compiled HTML templates 7 | * 3) Common Services, Directives, Filters and Utilities 8 | * 4) App Layout component (e.g. Layout or Frame) 9 | * 5) Other App components (e.g. Topbar, About, etc) 10 | */ 11 | 12 | // AngularJS dependencies 13 | 'ui.router', 14 | 'ngResource', 15 | 16 | // Include compiled HTML templates 17 | 'app.templates', 18 | 19 | // Common/shared code 20 | 'app.common', 21 | 22 | // Layout 23 | 'app.layout', 24 | 25 | // Components 26 | 'app.topbar', 27 | 'app.home', 28 | 'app.about' 29 | ]) 30 | 31 | .run(['$state', function ($state) { 32 | $state.go('home'); 33 | }]); 34 | -------------------------------------------------------------------------------- /src/app/common/common.module.js: -------------------------------------------------------------------------------- 1 | angular.module('app.common', [ 2 | 'common.directives', 3 | 'common.services' 4 | ]); 5 | -------------------------------------------------------------------------------- /src/app/common/directives/backButton.js: -------------------------------------------------------------------------------- 1 | angular.module('common.directives.backButton', []) 2 | 3 | .directive('backButton', ['$window', function($window) { 4 | return { 5 | restrict: 'A', 6 | link: function (scope, elem) { 7 | elem.bind('click', function () { 8 | $window.history.back(); 9 | }); 10 | } 11 | }; 12 | }]); 13 | -------------------------------------------------------------------------------- /src/app/common/directives/directives.js: -------------------------------------------------------------------------------- 1 | angular.module('common.directives', [ 2 | 'common.directives.backButton' 3 | ]); 4 | -------------------------------------------------------------------------------- /src/app/common/services/Utils.js: -------------------------------------------------------------------------------- 1 | angular.module('common.services.Utils', []) 2 | .factory('Utils', function Utils() { 3 | 4 | var utils = { 5 | isNullOrUndefined: isNullOrUndefined, 6 | isUndefinedOrWhitespace: isUndefinedOrWhitespace, 7 | isNullOrWhitespace: isNullOrWhitespace, 8 | isNullOrUndefinedOrWhitespace: isNullorUndefinedOrWhitespace 9 | }; 10 | return utils; 11 | 12 | function isNullOrUndefined(object) { 13 | return object === null || angular.isUndefined(object) ? true : false; 14 | } 15 | 16 | function isUndefinedOrWhitespace(stringText) { 17 | return angular.isUndefined(stringText) || stringText.trim().length <= 0 ? true : false; 18 | } 19 | 20 | function isNullorUndefinedOrWhitespace(stringText) { 21 | if(stringText !== null) { 22 | return angular.isUndefined(stringText) || stringText.trim().length <= 0 ? true : false; 23 | } else { 24 | return true; 25 | } 26 | } 27 | 28 | function isNullOrWhitespace(stringText) { 29 | return stringText === null || stringText.trim().length <= 0 ? true : false; 30 | } 31 | }); 32 | -------------------------------------------------------------------------------- /src/app/common/services/services.js: -------------------------------------------------------------------------------- 1 | angular.module('common.services', [ 2 | 'common.services.Utils' 3 | ]); 4 | -------------------------------------------------------------------------------- /src/app/home/assets/foundation-yeti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/src/app/home/assets/foundation-yeti.png -------------------------------------------------------------------------------- /src/app/home/controllers/HomeCtrl.js: -------------------------------------------------------------------------------- 1 | angular.module('home.controllers.HomeCtrl', []) 2 | .controller('HomeCtrl', function($scope, HomeService) { 3 | $scope.title = 'Home Page'; 4 | $scope.homepageMessage = HomeService.getHelloMessage(); 5 | $scope.foundationItems = HomeService.foundationItems; 6 | }); 7 | -------------------------------------------------------------------------------- /src/app/home/controllers/controllers.js: -------------------------------------------------------------------------------- 1 | angular.module('home.controllers', [ 2 | 'home.controllers.HomeCtrl' 3 | ]); 4 | -------------------------------------------------------------------------------- /src/app/home/directives/directives.js: -------------------------------------------------------------------------------- 1 | angular.module('home.directives', [ 2 | 3 | ]); 4 | -------------------------------------------------------------------------------- /src/app/home/e2e/home.e2e.js: -------------------------------------------------------------------------------- 1 | describe('test home page', function () { 2 | 3 | beforeEach(function() { 4 | browser.get('#/home'); 5 | }); 6 | 7 | it('should ensure the page title is correct', function () { 8 | expect(browser.getTitle()).toEqual('AngularJS Foundation Boilerplate'); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /src/app/home/home.module.js: -------------------------------------------------------------------------------- 1 | angular.module('app.home', [ 2 | 'ui.router', 3 | 'home.controllers', 4 | 'home.services', 5 | 'home.directives' 6 | ]) 7 | 8 | .config(function config($stateProvider) { 9 | $stateProvider.state('home', { 10 | url: '/home', 11 | templateUrl: 'home/views/home.tpl.html' 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/app/home/services/HomeService.js: -------------------------------------------------------------------------------- 1 | 2 | angular.module('home.services.HomeService', []) 3 | .factory('HomeService', function() { 4 | 5 | var foundationItems = [ 6 | { 7 | title: 'CheatSheet', 8 | link: 'http://sudheerdev.github.io/Foundation5CheatSheet/' 9 | }, 10 | { 11 | title: 'Kitchen Sink', 12 | link: 'http://foundation.zurb.com/docs/components/kitchen_sink.html' 13 | }, 14 | { 15 | title: 'Foundation Documentation', 16 | link: 'http://foundation.zurb.com/docs/' 17 | } 18 | ]; 19 | 20 | var HomeService = { 21 | getHelloMessage: getHelloMessage, 22 | foundationItems: foundationItems 23 | }; 24 | return HomeService; 25 | 26 | function getHelloMessage() { 27 | return 'Ready to get started? Great! Below are some resources to help you out.'; 28 | } 29 | }); 30 | -------------------------------------------------------------------------------- /src/app/home/services/services.js: -------------------------------------------------------------------------------- 1 | angular.module('home.services', [ 2 | 'home.services.HomeService' 3 | ]); 4 | -------------------------------------------------------------------------------- /src/app/home/styles/_home.scss: -------------------------------------------------------------------------------- 1 | .img-circle-yeti { 2 | @include circle(30%, 30%); 3 | margin-bottom: 40px; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/home/styles/_styles.scss: -------------------------------------------------------------------------------- 1 | // Import all separate styles for this component here. Don't add any actual Sass to this file. 2 | @import "home"; 3 | -------------------------------------------------------------------------------- /src/app/home/unit/HomeCtrl.spec.js: -------------------------------------------------------------------------------- 1 | describe('HomeCtrl ', function () { 2 | 3 | var controller, scope; 4 | 5 | beforeEach(module('app.home')); 6 | 7 | beforeEach(inject(function ($controller, $rootScope) { 8 | scope = $rootScope.$new(); 9 | controller = $controller('HomeCtrl', { 10 | $scope: scope 11 | }); 12 | })); 13 | 14 | it('should set correct page title', function () { 15 | expect(scope.title).toBe('Home Page'); 16 | }); 17 | 18 | }); 19 | -------------------------------------------------------------------------------- /src/app/home/unit/HomeService.service.spec.js: -------------------------------------------------------------------------------- 1 | describe('Service: HomeService -', function () { 2 | 3 | var service, rootScope; 4 | 5 | beforeEach(module('home.services.HomeService')); 6 | beforeEach(inject(function ($rootScope, HomeService) { 7 | rootScope = $rootScope; 8 | service = HomeService; 9 | })); 10 | 11 | describe('getHelloMessage function', function () { 12 | beforeEach(function() { 13 | spyOn(service, 'getHelloMessage').and.callThrough(); 14 | }); 15 | 16 | it('should exist as a function', function () { 17 | service.getHelloMessage(); 18 | expect(service.getHelloMessage).toHaveBeenCalled(); 19 | }); 20 | 21 | it('should return the correct message', function () { 22 | var message = service.getHelloMessage(); 23 | expect(message).toBe('Ready to get started? Great! Below are some resources to help you out.'); 24 | }); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /src/app/home/views/home.tpl.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Behold, a Foundation AngularJS app!

5 |

{{homepageMessage}}

6 |
7 | 8 |
9 | 39 | 40 |
41 |
42 | 43 |
44 |
45 | 46 |
47 |
48 |
49 |
50 | -------------------------------------------------------------------------------- /src/app/layout/controllers/LayoutCtrl.js: -------------------------------------------------------------------------------- 1 | angular.module('layout.controllers.LayoutCtrl', []) 2 | .controller('LayoutCtrl', function($scope) { 3 | $scope.sampleArray = ['Item1', 'Item2', 'Item3']; 4 | }); 5 | -------------------------------------------------------------------------------- /src/app/layout/controllers/controllers.js: -------------------------------------------------------------------------------- 1 | angular.module('layout.controllers', [ 2 | 'layout.controllers.LayoutCtrl' 3 | ]); 4 | -------------------------------------------------------------------------------- /src/app/layout/layout.module.js: -------------------------------------------------------------------------------- 1 | angular.module('app.layout', [ 2 | 'ui.router', 3 | 'layout.controllers' 4 | ]) 5 | 6 | .config(function config($stateProvider) { 7 | $stateProvider.state('layout', { 8 | url: '/home', 9 | templateUrl: 'home/views/home.tpl.html' 10 | }); 11 | }) 12 | 13 | // Initialize Foundation 14 | .run(function($rootScope, $document) { 15 | $rootScope.$on('$viewContentLoaded', function () { 16 | $document.foundation({ 17 | offcanvas: { 18 | close_on_click: true 19 | } 20 | }); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /src/app/layout/styles/_layout.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/src/app/layout/styles/_layout.scss -------------------------------------------------------------------------------- /src/app/layout/styles/_styles.scss: -------------------------------------------------------------------------------- 1 | // Import all separate styles for this component here. Don't add any actual Sass to this file. 2 | @import "layout"; 3 | -------------------------------------------------------------------------------- /src/app/layout/views/layout.tpl.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
UI VIew
4 | 5 | 6 |
7 | -------------------------------------------------------------------------------- /src/app/sample/controllers/SampleCtrl.js: -------------------------------------------------------------------------------- 1 | angular.module('sample.controllers.SampleCtrl', []) 2 | .controller('SampleCtrl', function($scope) { 3 | $scope.title = 'This is a sample component'; 4 | }); 5 | -------------------------------------------------------------------------------- /src/app/sample/controllers/controllers.js: -------------------------------------------------------------------------------- 1 | angular.module('sample.controllers', [ 2 | 'sample.controllers.SampleCtrl' 3 | ]); 4 | -------------------------------------------------------------------------------- /src/app/sample/directives/directives.js: -------------------------------------------------------------------------------- 1 | angular.module('sample.directives', [ 2 | 'sample.directives.sampleDirective' 3 | ]); 4 | -------------------------------------------------------------------------------- /src/app/sample/directives/sampleDirective.js: -------------------------------------------------------------------------------- 1 | angular.module('sample.directives.sampleDirective', []) 2 | 3 | .directive('sampleDirective', ['$window', function() { 4 | return { 5 | restrict: 'A' 6 | 7 | }; 8 | }]); 9 | -------------------------------------------------------------------------------- /src/app/sample/e2e/sample.e2e.js: -------------------------------------------------------------------------------- 1 | describe('test sample', function () { 2 | 3 | beforeEach(function() { 4 | browser.get('#/home'); 5 | }); 6 | 7 | it('should test the UI somehow', function () { 8 | expect(browser.getTitle()).toEqual('AngularJS Foundation Boilerplate'); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /src/app/sample/sample.module.js: -------------------------------------------------------------------------------- 1 | angular.module('app.sample', [ 2 | 'ui.router', 3 | 'sample.controllers', 4 | 'sample.services', 5 | 'sample.directives' 6 | ]) 7 | 8 | .config(function config($stateProvider) { 9 | $stateProvider.state('sample', { 10 | url: '/sample', 11 | sampleUrl: 'sample/views/sample.tpl.html' 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/app/sample/services/SampleService.js: -------------------------------------------------------------------------------- 1 | angular.module('sample.services.SampleService', []) 2 | .factory('SampleService', function() { 3 | 4 | var SampleService = { 5 | getMessage: getMessage, 6 | addNumbers: addNumbers 7 | }; 8 | return SampleService; 9 | 10 | function getMessage() { 11 | return 'Hello, this is a sample service!'; 12 | } 13 | 14 | function addNumbers(num1, num2) { 15 | return num1 + num2; 16 | } 17 | }); 18 | -------------------------------------------------------------------------------- /src/app/sample/services/services.js: -------------------------------------------------------------------------------- 1 | angular.module('sample.services', [ 2 | 'sample.services.SampleService' 3 | ]); 4 | -------------------------------------------------------------------------------- /src/app/sample/styles/_sample.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/src/app/sample/styles/_sample.scss -------------------------------------------------------------------------------- /src/app/sample/styles/_styles.scss: -------------------------------------------------------------------------------- 1 | // Import all separate styles for this component here. Don't add any actual Sass to this file. 2 | @import "sample"; 3 | -------------------------------------------------------------------------------- /src/app/sample/unit/SampleCtrl.spec.js: -------------------------------------------------------------------------------- 1 | describe('SampleCtrl ', function () { 2 | 3 | var controller, scope; 4 | 5 | beforeEach(module('app.sample')); 6 | 7 | beforeEach(inject(function ($controller, $rootScope) { 8 | scope = $rootScope.$new(); 9 | controller = $controller('SampleCtrl', { 10 | $scope: scope 11 | }); 12 | })); 13 | 14 | it('should set correct page title', function () { 15 | expect(scope.title).toBe('This is a sample component'); 16 | }); 17 | 18 | }); 19 | -------------------------------------------------------------------------------- /src/app/sample/unit/SampleService.service.spec.js: -------------------------------------------------------------------------------- 1 | describe('Service: SampleService -', function () { 2 | 3 | var service, rootScope; 4 | 5 | beforeEach(module('sample.services.SampleService')); 6 | beforeEach(inject(function ($rootScope, SampleService) { 7 | rootScope = $rootScope; 8 | service = SampleService; 9 | })); 10 | 11 | describe('getMessage function', function () { 12 | beforeEach(function() { 13 | spyOn(service, 'getMessage').and.callThrough(); 14 | }); 15 | 16 | it('should exist as a function', function () { 17 | service.getMessage(); 18 | expect(service.getMessage).toHaveBeenCalled(); 19 | }); 20 | 21 | it('should return the correct message', function () { 22 | var message = service.getMessage(); 23 | expect(message).toBe('Hello, this is a sample service!'); 24 | }); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /src/app/sample/views/sample.tpl.html: -------------------------------------------------------------------------------- 1 |
2 |

{{title}}

3 |
4 | -------------------------------------------------------------------------------- /src/app/topbar/controllers/TopbarCtrl.js: -------------------------------------------------------------------------------- 1 | angular.module('topbar.controllers.TopbarCtrl', []) 2 | .controller('TopbarCtrl', function($state, $scope) { 3 | 4 | // Go to the 'about' state which shows the about page content. 5 | $scope.showAboutPage = function(){ 6 | $state.go('about'); 7 | }; 8 | }); 9 | -------------------------------------------------------------------------------- /src/app/topbar/controllers/controllers.js: -------------------------------------------------------------------------------- 1 | angular.module('topbar.controllers', [ 2 | 'topbar.controllers.TopbarCtrl' 3 | ]); 4 | -------------------------------------------------------------------------------- /src/app/topbar/e2e/topbar.e2e.js: -------------------------------------------------------------------------------- 1 | describe('test topbar', function () { 2 | 3 | beforeEach(function() { 4 | browser.get('#/home'); 5 | }); 6 | 7 | it('should display the dropdown button', function () { 8 | expect(element(by.id('dropdownButton')).isDisplayed()).toBeTruthy(); 9 | }); 10 | 11 | it('should click on the dropdown button and show the dropdown menu', function () { 12 | element(by.id('dropdownButton')).click(); 13 | expect(element(by.id('dropdownMenu')).isDisplayed()).toBeTruthy(); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /src/app/topbar/styles/_styles.scss: -------------------------------------------------------------------------------- 1 | // Import all separate styles for this component here. Don't add any actual Sass to this file. 2 | @import "topbar"; 3 | @import "tabbar"; 4 | -------------------------------------------------------------------------------- /src/app/topbar/styles/_tabbar.scss: -------------------------------------------------------------------------------- 1 | .off-canvas-wrap { 2 | .inner-wrap{ 3 | min-height: 100vh; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/app/topbar/styles/_topbar.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/src/app/topbar/styles/_topbar.scss -------------------------------------------------------------------------------- /src/app/topbar/topbar.module.js: -------------------------------------------------------------------------------- 1 | angular.module('app.topbar', [ 2 | 'topbar.controllers' 3 | ]); 4 | -------------------------------------------------------------------------------- /src/app/topbar/unit/topbar.spec.js: -------------------------------------------------------------------------------- 1 | describe('TopbarCtrl ', function () { 2 | 3 | var controller, scope; 4 | 5 | beforeEach(module('app.topbar')); 6 | 7 | beforeEach(inject(function ($controller, $rootScope) { 8 | scope = $rootScope.$new(); 9 | controller = $controller('TopbarCtrl', { 10 | $scope: scope 11 | }); 12 | })); 13 | 14 | }); 15 | -------------------------------------------------------------------------------- /src/app/topbar/views/tabbar.tpl.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 13 | 14 | 22 | 23 |
24 |
UI VIew
25 |
26 | 27 | 28 | 29 |
30 |
31 | -------------------------------------------------------------------------------- /src/app/topbar/views/topbar.tpl.html: -------------------------------------------------------------------------------- 1 |
2 | 30 |
31 | -------------------------------------------------------------------------------- /src/assets/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/src/assets/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/src/assets/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/src/assets/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/src/assets/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/src/assets/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /src/assets/images/foundation-fav-icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmacdonnacha/angularjs-foundation-boilerplate/39c211b3cc6f435776927d1c64f72ce401561743/src/assets/images/foundation-fav-icon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | AngularJS Foundation Boilerplate 9 | 10 | 11 | <% styles.forEach( function ( file ) { %> 12 | 13 | <% }); %> 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | <% scripts.forEach( function ( file ) { %> 22 | 23 | <% }); %> 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/styles/_font-awesome.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.4.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('../assets/fonts/fontawesome-webfont.eot?v=4.4.0'); 10 | src: url('../assets/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../assets/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../assets/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../assets/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../assets/fonts/fontawesome-webfont.svg?v=4.4.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 | } 22 | /* makes the font 33% larger relative to the icon container */ 23 | .fa-lg { 24 | font-size: 1.33333333em; 25 | line-height: 0.75em; 26 | vertical-align: -15%; 27 | } 28 | .fa-2x { 29 | font-size: 2em; 30 | } 31 | .fa-3x { 32 | font-size: 3em; 33 | } 34 | .fa-4x { 35 | font-size: 4em; 36 | } 37 | .fa-5x { 38 | font-size: 5em; 39 | } 40 | .fa-fw { 41 | width: 1.28571429em; 42 | text-align: center; 43 | } 44 | .fa-ul { 45 | padding-left: 0; 46 | margin-left: 2.14285714em; 47 | list-style-type: none; 48 | } 49 | .fa-ul > li { 50 | position: relative; 51 | } 52 | .fa-li { 53 | position: absolute; 54 | left: -2.14285714em; 55 | width: 2.14285714em; 56 | top: 0.14285714em; 57 | text-align: center; 58 | } 59 | .fa-li.fa-lg { 60 | left: -1.85714286em; 61 | } 62 | .fa-border { 63 | padding: .2em .25em .15em; 64 | border: solid 0.08em #eeeeee; 65 | border-radius: .1em; 66 | } 67 | .fa-pull-left { 68 | float: left; 69 | } 70 | .fa-pull-right { 71 | float: right; 72 | } 73 | .fa.fa-pull-left { 74 | margin-right: .3em; 75 | } 76 | .fa.fa-pull-right { 77 | margin-left: .3em; 78 | } 79 | /* Deprecated as of 4.4.0 */ 80 | .pull-right { 81 | float: right; 82 | } 83 | .pull-left { 84 | float: left; 85 | } 86 | .fa.pull-left { 87 | margin-right: .3em; 88 | } 89 | .fa.pull-right { 90 | margin-left: .3em; 91 | } 92 | .fa-spin { 93 | -webkit-animation: fa-spin 2s infinite linear; 94 | animation: fa-spin 2s infinite linear; 95 | } 96 | .fa-pulse { 97 | -webkit-animation: fa-spin 1s infinite steps(8); 98 | animation: fa-spin 1s infinite steps(8); 99 | } 100 | @-webkit-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 | @keyframes fa-spin { 111 | 0% { 112 | -webkit-transform: rotate(0deg); 113 | transform: rotate(0deg); 114 | } 115 | 100% { 116 | -webkit-transform: rotate(359deg); 117 | transform: rotate(359deg); 118 | } 119 | } 120 | .fa-rotate-90 { 121 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 122 | -webkit-transform: rotate(90deg); 123 | -ms-transform: rotate(90deg); 124 | transform: rotate(90deg); 125 | } 126 | .fa-rotate-180 { 127 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 128 | -webkit-transform: rotate(180deg); 129 | -ms-transform: rotate(180deg); 130 | transform: rotate(180deg); 131 | } 132 | .fa-rotate-270 { 133 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 134 | -webkit-transform: rotate(270deg); 135 | -ms-transform: rotate(270deg); 136 | transform: rotate(270deg); 137 | } 138 | .fa-flip-horizontal { 139 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); 140 | -webkit-transform: scale(-1, 1); 141 | -ms-transform: scale(-1, 1); 142 | transform: scale(-1, 1); 143 | } 144 | .fa-flip-vertical { 145 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); 146 | -webkit-transform: scale(1, -1); 147 | -ms-transform: scale(1, -1); 148 | transform: scale(1, -1); 149 | } 150 | :root .fa-rotate-90, 151 | :root .fa-rotate-180, 152 | :root .fa-rotate-270, 153 | :root .fa-flip-horizontal, 154 | :root .fa-flip-vertical { 155 | filter: none; 156 | } 157 | .fa-stack { 158 | position: relative; 159 | display: inline-block; 160 | width: 2em; 161 | height: 2em; 162 | line-height: 2em; 163 | vertical-align: middle; 164 | } 165 | .fa-stack-1x, 166 | .fa-stack-2x { 167 | position: absolute; 168 | left: 0; 169 | width: 100%; 170 | text-align: center; 171 | } 172 | .fa-stack-1x { 173 | line-height: inherit; 174 | } 175 | .fa-stack-2x { 176 | font-size: 2em; 177 | } 178 | .fa-inverse { 179 | color: #ffffff; 180 | } 181 | /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen 182 | readers do not read off random characters that represent icons */ 183 | .fa-glass:before { 184 | content: "\f000"; 185 | } 186 | .fa-music:before { 187 | content: "\f001"; 188 | } 189 | .fa-search:before { 190 | content: "\f002"; 191 | } 192 | .fa-envelope-o:before { 193 | content: "\f003"; 194 | } 195 | .fa-heart:before { 196 | content: "\f004"; 197 | } 198 | .fa-star:before { 199 | content: "\f005"; 200 | } 201 | .fa-star-o:before { 202 | content: "\f006"; 203 | } 204 | .fa-user:before { 205 | content: "\f007"; 206 | } 207 | .fa-film:before { 208 | content: "\f008"; 209 | } 210 | .fa-th-large:before { 211 | content: "\f009"; 212 | } 213 | .fa-th:before { 214 | content: "\f00a"; 215 | } 216 | .fa-th-list:before { 217 | content: "\f00b"; 218 | } 219 | .fa-check:before { 220 | content: "\f00c"; 221 | } 222 | .fa-remove:before, 223 | .fa-close:before, 224 | .fa-times:before { 225 | content: "\f00d"; 226 | } 227 | .fa-search-plus:before { 228 | content: "\f00e"; 229 | } 230 | .fa-search-minus:before { 231 | content: "\f010"; 232 | } 233 | .fa-power-off:before { 234 | content: "\f011"; 235 | } 236 | .fa-signal:before { 237 | content: "\f012"; 238 | } 239 | .fa-gear:before, 240 | .fa-cog:before { 241 | content: "\f013"; 242 | } 243 | .fa-trash-o:before { 244 | content: "\f014"; 245 | } 246 | .fa-home:before { 247 | content: "\f015"; 248 | } 249 | .fa-file-o:before { 250 | content: "\f016"; 251 | } 252 | .fa-clock-o:before { 253 | content: "\f017"; 254 | } 255 | .fa-road:before { 256 | content: "\f018"; 257 | } 258 | .fa-download:before { 259 | content: "\f019"; 260 | } 261 | .fa-arrow-circle-o-down:before { 262 | content: "\f01a"; 263 | } 264 | .fa-arrow-circle-o-up:before { 265 | content: "\f01b"; 266 | } 267 | .fa-inbox:before { 268 | content: "\f01c"; 269 | } 270 | .fa-play-circle-o:before { 271 | content: "\f01d"; 272 | } 273 | .fa-rotate-right:before, 274 | .fa-repeat:before { 275 | content: "\f01e"; 276 | } 277 | .fa-refresh:before { 278 | content: "\f021"; 279 | } 280 | .fa-list-alt:before { 281 | content: "\f022"; 282 | } 283 | .fa-lock:before { 284 | content: "\f023"; 285 | } 286 | .fa-flag:before { 287 | content: "\f024"; 288 | } 289 | .fa-headphones:before { 290 | content: "\f025"; 291 | } 292 | .fa-volume-off:before { 293 | content: "\f026"; 294 | } 295 | .fa-volume-down:before { 296 | content: "\f027"; 297 | } 298 | .fa-volume-up:before { 299 | content: "\f028"; 300 | } 301 | .fa-qrcode:before { 302 | content: "\f029"; 303 | } 304 | .fa-barcode:before { 305 | content: "\f02a"; 306 | } 307 | .fa-tag:before { 308 | content: "\f02b"; 309 | } 310 | .fa-tags:before { 311 | content: "\f02c"; 312 | } 313 | .fa-book:before { 314 | content: "\f02d"; 315 | } 316 | .fa-bookmark:before { 317 | content: "\f02e"; 318 | } 319 | .fa-print:before { 320 | content: "\f02f"; 321 | } 322 | .fa-camera:before { 323 | content: "\f030"; 324 | } 325 | .fa-font:before { 326 | content: "\f031"; 327 | } 328 | .fa-bold:before { 329 | content: "\f032"; 330 | } 331 | .fa-italic:before { 332 | content: "\f033"; 333 | } 334 | .fa-text-height:before { 335 | content: "\f034"; 336 | } 337 | .fa-text-width:before { 338 | content: "\f035"; 339 | } 340 | .fa-align-left:before { 341 | content: "\f036"; 342 | } 343 | .fa-align-center:before { 344 | content: "\f037"; 345 | } 346 | .fa-align-right:before { 347 | content: "\f038"; 348 | } 349 | .fa-align-justify:before { 350 | content: "\f039"; 351 | } 352 | .fa-list:before { 353 | content: "\f03a"; 354 | } 355 | .fa-dedent:before, 356 | .fa-outdent:before { 357 | content: "\f03b"; 358 | } 359 | .fa-indent:before { 360 | content: "\f03c"; 361 | } 362 | .fa-video-camera:before { 363 | content: "\f03d"; 364 | } 365 | .fa-photo:before, 366 | .fa-image:before, 367 | .fa-picture-o:before { 368 | content: "\f03e"; 369 | } 370 | .fa-pencil:before { 371 | content: "\f040"; 372 | } 373 | .fa-map-marker:before { 374 | content: "\f041"; 375 | } 376 | .fa-adjust:before { 377 | content: "\f042"; 378 | } 379 | .fa-tint:before { 380 | content: "\f043"; 381 | } 382 | .fa-edit:before, 383 | .fa-pencil-square-o:before { 384 | content: "\f044"; 385 | } 386 | .fa-share-square-o:before { 387 | content: "\f045"; 388 | } 389 | .fa-check-square-o:before { 390 | content: "\f046"; 391 | } 392 | .fa-arrows:before { 393 | content: "\f047"; 394 | } 395 | .fa-step-backward:before { 396 | content: "\f048"; 397 | } 398 | .fa-fast-backward:before { 399 | content: "\f049"; 400 | } 401 | .fa-backward:before { 402 | content: "\f04a"; 403 | } 404 | .fa-play:before { 405 | content: "\f04b"; 406 | } 407 | .fa-pause:before { 408 | content: "\f04c"; 409 | } 410 | .fa-stop:before { 411 | content: "\f04d"; 412 | } 413 | .fa-forward:before { 414 | content: "\f04e"; 415 | } 416 | .fa-fast-forward:before { 417 | content: "\f050"; 418 | } 419 | .fa-step-forward:before { 420 | content: "\f051"; 421 | } 422 | .fa-eject:before { 423 | content: "\f052"; 424 | } 425 | .fa-chevron-left:before { 426 | content: "\f053"; 427 | } 428 | .fa-chevron-right:before { 429 | content: "\f054"; 430 | } 431 | .fa-plus-circle:before { 432 | content: "\f055"; 433 | } 434 | .fa-minus-circle:before { 435 | content: "\f056"; 436 | } 437 | .fa-times-circle:before { 438 | content: "\f057"; 439 | } 440 | .fa-check-circle:before { 441 | content: "\f058"; 442 | } 443 | .fa-question-circle:before { 444 | content: "\f059"; 445 | } 446 | .fa-info-circle:before { 447 | content: "\f05a"; 448 | } 449 | .fa-crosshairs:before { 450 | content: "\f05b"; 451 | } 452 | .fa-times-circle-o:before { 453 | content: "\f05c"; 454 | } 455 | .fa-check-circle-o:before { 456 | content: "\f05d"; 457 | } 458 | .fa-ban:before { 459 | content: "\f05e"; 460 | } 461 | .fa-arrow-left:before { 462 | content: "\f060"; 463 | } 464 | .fa-arrow-right:before { 465 | content: "\f061"; 466 | } 467 | .fa-arrow-up:before { 468 | content: "\f062"; 469 | } 470 | .fa-arrow-down:before { 471 | content: "\f063"; 472 | } 473 | .fa-mail-forward:before, 474 | .fa-share:before { 475 | content: "\f064"; 476 | } 477 | .fa-expand:before { 478 | content: "\f065"; 479 | } 480 | .fa-compress:before { 481 | content: "\f066"; 482 | } 483 | .fa-plus:before { 484 | content: "\f067"; 485 | } 486 | .fa-minus:before { 487 | content: "\f068"; 488 | } 489 | .fa-asterisk:before { 490 | content: "\f069"; 491 | } 492 | .fa-exclamation-circle:before { 493 | content: "\f06a"; 494 | } 495 | .fa-gift:before { 496 | content: "\f06b"; 497 | } 498 | .fa-leaf:before { 499 | content: "\f06c"; 500 | } 501 | .fa-fire:before { 502 | content: "\f06d"; 503 | } 504 | .fa-eye:before { 505 | content: "\f06e"; 506 | } 507 | .fa-eye-slash:before { 508 | content: "\f070"; 509 | } 510 | .fa-warning:before, 511 | .fa-exclamation-triangle:before { 512 | content: "\f071"; 513 | } 514 | .fa-plane:before { 515 | content: "\f072"; 516 | } 517 | .fa-calendar:before { 518 | content: "\f073"; 519 | } 520 | .fa-random:before { 521 | content: "\f074"; 522 | } 523 | .fa-comment:before { 524 | content: "\f075"; 525 | } 526 | .fa-magnet:before { 527 | content: "\f076"; 528 | } 529 | .fa-chevron-up:before { 530 | content: "\f077"; 531 | } 532 | .fa-chevron-down:before { 533 | content: "\f078"; 534 | } 535 | .fa-retweet:before { 536 | content: "\f079"; 537 | } 538 | .fa-shopping-cart:before { 539 | content: "\f07a"; 540 | } 541 | .fa-folder:before { 542 | content: "\f07b"; 543 | } 544 | .fa-folder-open:before { 545 | content: "\f07c"; 546 | } 547 | .fa-arrows-v:before { 548 | content: "\f07d"; 549 | } 550 | .fa-arrows-h:before { 551 | content: "\f07e"; 552 | } 553 | .fa-bar-chart-o:before, 554 | .fa-bar-chart:before { 555 | content: "\f080"; 556 | } 557 | .fa-twitter-square:before { 558 | content: "\f081"; 559 | } 560 | .fa-facebook-square:before { 561 | content: "\f082"; 562 | } 563 | .fa-camera-retro:before { 564 | content: "\f083"; 565 | } 566 | .fa-key:before { 567 | content: "\f084"; 568 | } 569 | .fa-gears:before, 570 | .fa-cogs:before { 571 | content: "\f085"; 572 | } 573 | .fa-comments:before { 574 | content: "\f086"; 575 | } 576 | .fa-thumbs-o-up:before { 577 | content: "\f087"; 578 | } 579 | .fa-thumbs-o-down:before { 580 | content: "\f088"; 581 | } 582 | .fa-star-half:before { 583 | content: "\f089"; 584 | } 585 | .fa-heart-o:before { 586 | content: "\f08a"; 587 | } 588 | .fa-sign-out:before { 589 | content: "\f08b"; 590 | } 591 | .fa-linkedin-square:before { 592 | content: "\f08c"; 593 | } 594 | .fa-thumb-tack:before { 595 | content: "\f08d"; 596 | } 597 | .fa-external-link:before { 598 | content: "\f08e"; 599 | } 600 | .fa-sign-in:before { 601 | content: "\f090"; 602 | } 603 | .fa-trophy:before { 604 | content: "\f091"; 605 | } 606 | .fa-github-square:before { 607 | content: "\f092"; 608 | } 609 | .fa-upload:before { 610 | content: "\f093"; 611 | } 612 | .fa-lemon-o:before { 613 | content: "\f094"; 614 | } 615 | .fa-phone:before { 616 | content: "\f095"; 617 | } 618 | .fa-square-o:before { 619 | content: "\f096"; 620 | } 621 | .fa-bookmark-o:before { 622 | content: "\f097"; 623 | } 624 | .fa-phone-square:before { 625 | content: "\f098"; 626 | } 627 | .fa-twitter:before { 628 | content: "\f099"; 629 | } 630 | .fa-facebook-f:before, 631 | .fa-facebook:before { 632 | content: "\f09a"; 633 | } 634 | .fa-github:before { 635 | content: "\f09b"; 636 | } 637 | .fa-unlock:before { 638 | content: "\f09c"; 639 | } 640 | .fa-credit-card:before { 641 | content: "\f09d"; 642 | } 643 | .fa-feed:before, 644 | .fa-rss:before { 645 | content: "\f09e"; 646 | } 647 | .fa-hdd-o:before { 648 | content: "\f0a0"; 649 | } 650 | .fa-bullhorn:before { 651 | content: "\f0a1"; 652 | } 653 | .fa-bell:before { 654 | content: "\f0f3"; 655 | } 656 | .fa-certificate:before { 657 | content: "\f0a3"; 658 | } 659 | .fa-hand-o-right:before { 660 | content: "\f0a4"; 661 | } 662 | .fa-hand-o-left:before { 663 | content: "\f0a5"; 664 | } 665 | .fa-hand-o-up:before { 666 | content: "\f0a6"; 667 | } 668 | .fa-hand-o-down:before { 669 | content: "\f0a7"; 670 | } 671 | .fa-arrow-circle-left:before { 672 | content: "\f0a8"; 673 | } 674 | .fa-arrow-circle-right:before { 675 | content: "\f0a9"; 676 | } 677 | .fa-arrow-circle-up:before { 678 | content: "\f0aa"; 679 | } 680 | .fa-arrow-circle-down:before { 681 | content: "\f0ab"; 682 | } 683 | .fa-globe:before { 684 | content: "\f0ac"; 685 | } 686 | .fa-wrench:before { 687 | content: "\f0ad"; 688 | } 689 | .fa-tasks:before { 690 | content: "\f0ae"; 691 | } 692 | .fa-filter:before { 693 | content: "\f0b0"; 694 | } 695 | .fa-briefcase:before { 696 | content: "\f0b1"; 697 | } 698 | .fa-arrows-alt:before { 699 | content: "\f0b2"; 700 | } 701 | .fa-group:before, 702 | .fa-users:before { 703 | content: "\f0c0"; 704 | } 705 | .fa-chain:before, 706 | .fa-link:before { 707 | content: "\f0c1"; 708 | } 709 | .fa-cloud:before { 710 | content: "\f0c2"; 711 | } 712 | .fa-flask:before { 713 | content: "\f0c3"; 714 | } 715 | .fa-cut:before, 716 | .fa-scissors:before { 717 | content: "\f0c4"; 718 | } 719 | .fa-copy:before, 720 | .fa-files-o:before { 721 | content: "\f0c5"; 722 | } 723 | .fa-paperclip:before { 724 | content: "\f0c6"; 725 | } 726 | .fa-save:before, 727 | .fa-floppy-o:before { 728 | content: "\f0c7"; 729 | } 730 | .fa-square:before { 731 | content: "\f0c8"; 732 | } 733 | .fa-navicon:before, 734 | .fa-reorder:before, 735 | .fa-bars:before { 736 | content: "\f0c9"; 737 | } 738 | .fa-list-ul:before { 739 | content: "\f0ca"; 740 | } 741 | .fa-list-ol:before { 742 | content: "\f0cb"; 743 | } 744 | .fa-strikethrough:before { 745 | content: "\f0cc"; 746 | } 747 | .fa-underline:before { 748 | content: "\f0cd"; 749 | } 750 | .fa-table:before { 751 | content: "\f0ce"; 752 | } 753 | .fa-magic:before { 754 | content: "\f0d0"; 755 | } 756 | .fa-truck:before { 757 | content: "\f0d1"; 758 | } 759 | .fa-pinterest:before { 760 | content: "\f0d2"; 761 | } 762 | .fa-pinterest-square:before { 763 | content: "\f0d3"; 764 | } 765 | .fa-google-plus-square:before { 766 | content: "\f0d4"; 767 | } 768 | .fa-google-plus:before { 769 | content: "\f0d5"; 770 | } 771 | .fa-money:before { 772 | content: "\f0d6"; 773 | } 774 | .fa-caret-down:before { 775 | content: "\f0d7"; 776 | } 777 | .fa-caret-up:before { 778 | content: "\f0d8"; 779 | } 780 | .fa-caret-left:before { 781 | content: "\f0d9"; 782 | } 783 | .fa-caret-right:before { 784 | content: "\f0da"; 785 | } 786 | .fa-columns:before { 787 | content: "\f0db"; 788 | } 789 | .fa-unsorted:before, 790 | .fa-sort:before { 791 | content: "\f0dc"; 792 | } 793 | .fa-sort-down:before, 794 | .fa-sort-desc:before { 795 | content: "\f0dd"; 796 | } 797 | .fa-sort-up:before, 798 | .fa-sort-asc:before { 799 | content: "\f0de"; 800 | } 801 | .fa-envelope:before { 802 | content: "\f0e0"; 803 | } 804 | .fa-linkedin:before { 805 | content: "\f0e1"; 806 | } 807 | .fa-rotate-left:before, 808 | .fa-undo:before { 809 | content: "\f0e2"; 810 | } 811 | .fa-legal:before, 812 | .fa-gavel:before { 813 | content: "\f0e3"; 814 | } 815 | .fa-dashboard:before, 816 | .fa-tachometer:before { 817 | content: "\f0e4"; 818 | } 819 | .fa-comment-o:before { 820 | content: "\f0e5"; 821 | } 822 | .fa-comments-o:before { 823 | content: "\f0e6"; 824 | } 825 | .fa-flash:before, 826 | .fa-bolt:before { 827 | content: "\f0e7"; 828 | } 829 | .fa-sitemap:before { 830 | content: "\f0e8"; 831 | } 832 | .fa-umbrella:before { 833 | content: "\f0e9"; 834 | } 835 | .fa-paste:before, 836 | .fa-clipboard:before { 837 | content: "\f0ea"; 838 | } 839 | .fa-lightbulb-o:before { 840 | content: "\f0eb"; 841 | } 842 | .fa-exchange:before { 843 | content: "\f0ec"; 844 | } 845 | .fa-cloud-download:before { 846 | content: "\f0ed"; 847 | } 848 | .fa-cloud-upload:before { 849 | content: "\f0ee"; 850 | } 851 | .fa-user-md:before { 852 | content: "\f0f0"; 853 | } 854 | .fa-stethoscope:before { 855 | content: "\f0f1"; 856 | } 857 | .fa-suitcase:before { 858 | content: "\f0f2"; 859 | } 860 | .fa-bell-o:before { 861 | content: "\f0a2"; 862 | } 863 | .fa-coffee:before { 864 | content: "\f0f4"; 865 | } 866 | .fa-cutlery:before { 867 | content: "\f0f5"; 868 | } 869 | .fa-file-text-o:before { 870 | content: "\f0f6"; 871 | } 872 | .fa-building-o:before { 873 | content: "\f0f7"; 874 | } 875 | .fa-hospital-o:before { 876 | content: "\f0f8"; 877 | } 878 | .fa-ambulance:before { 879 | content: "\f0f9"; 880 | } 881 | .fa-medkit:before { 882 | content: "\f0fa"; 883 | } 884 | .fa-fighter-jet:before { 885 | content: "\f0fb"; 886 | } 887 | .fa-beer:before { 888 | content: "\f0fc"; 889 | } 890 | .fa-h-square:before { 891 | content: "\f0fd"; 892 | } 893 | .fa-plus-square:before { 894 | content: "\f0fe"; 895 | } 896 | .fa-angle-double-left:before { 897 | content: "\f100"; 898 | } 899 | .fa-angle-double-right:before { 900 | content: "\f101"; 901 | } 902 | .fa-angle-double-up:before { 903 | content: "\f102"; 904 | } 905 | .fa-angle-double-down:before { 906 | content: "\f103"; 907 | } 908 | .fa-angle-left:before { 909 | content: "\f104"; 910 | } 911 | .fa-angle-right:before { 912 | content: "\f105"; 913 | } 914 | .fa-angle-up:before { 915 | content: "\f106"; 916 | } 917 | .fa-angle-down:before { 918 | content: "\f107"; 919 | } 920 | .fa-desktop:before { 921 | content: "\f108"; 922 | } 923 | .fa-laptop:before { 924 | content: "\f109"; 925 | } 926 | .fa-tablet:before { 927 | content: "\f10a"; 928 | } 929 | .fa-mobile-phone:before, 930 | .fa-mobile:before { 931 | content: "\f10b"; 932 | } 933 | .fa-circle-o:before { 934 | content: "\f10c"; 935 | } 936 | .fa-quote-left:before { 937 | content: "\f10d"; 938 | } 939 | .fa-quote-right:before { 940 | content: "\f10e"; 941 | } 942 | .fa-spinner:before { 943 | content: "\f110"; 944 | } 945 | .fa-circle:before { 946 | content: "\f111"; 947 | } 948 | .fa-mail-reply:before, 949 | .fa-reply:before { 950 | content: "\f112"; 951 | } 952 | .fa-github-alt:before { 953 | content: "\f113"; 954 | } 955 | .fa-folder-o:before { 956 | content: "\f114"; 957 | } 958 | .fa-folder-open-o:before { 959 | content: "\f115"; 960 | } 961 | .fa-smile-o:before { 962 | content: "\f118"; 963 | } 964 | .fa-frown-o:before { 965 | content: "\f119"; 966 | } 967 | .fa-meh-o:before { 968 | content: "\f11a"; 969 | } 970 | .fa-gamepad:before { 971 | content: "\f11b"; 972 | } 973 | .fa-keyboard-o:before { 974 | content: "\f11c"; 975 | } 976 | .fa-flag-o:before { 977 | content: "\f11d"; 978 | } 979 | .fa-flag-checkered:before { 980 | content: "\f11e"; 981 | } 982 | .fa-terminal:before { 983 | content: "\f120"; 984 | } 985 | .fa-code:before { 986 | content: "\f121"; 987 | } 988 | .fa-mail-reply-all:before, 989 | .fa-reply-all:before { 990 | content: "\f122"; 991 | } 992 | .fa-star-half-empty:before, 993 | .fa-star-half-full:before, 994 | .fa-star-half-o:before { 995 | content: "\f123"; 996 | } 997 | .fa-location-arrow:before { 998 | content: "\f124"; 999 | } 1000 | .fa-crop:before { 1001 | content: "\f125"; 1002 | } 1003 | .fa-code-fork:before { 1004 | content: "\f126"; 1005 | } 1006 | .fa-unlink:before, 1007 | .fa-chain-broken:before { 1008 | content: "\f127"; 1009 | } 1010 | .fa-question:before { 1011 | content: "\f128"; 1012 | } 1013 | .fa-info:before { 1014 | content: "\f129"; 1015 | } 1016 | .fa-exclamation:before { 1017 | content: "\f12a"; 1018 | } 1019 | .fa-superscript:before { 1020 | content: "\f12b"; 1021 | } 1022 | .fa-subscript:before { 1023 | content: "\f12c"; 1024 | } 1025 | .fa-eraser:before { 1026 | content: "\f12d"; 1027 | } 1028 | .fa-puzzle-piece:before { 1029 | content: "\f12e"; 1030 | } 1031 | .fa-microphone:before { 1032 | content: "\f130"; 1033 | } 1034 | .fa-microphone-slash:before { 1035 | content: "\f131"; 1036 | } 1037 | .fa-shield:before { 1038 | content: "\f132"; 1039 | } 1040 | .fa-calendar-o:before { 1041 | content: "\f133"; 1042 | } 1043 | .fa-fire-extinguisher:before { 1044 | content: "\f134"; 1045 | } 1046 | .fa-rocket:before { 1047 | content: "\f135"; 1048 | } 1049 | .fa-maxcdn:before { 1050 | content: "\f136"; 1051 | } 1052 | .fa-chevron-circle-left:before { 1053 | content: "\f137"; 1054 | } 1055 | .fa-chevron-circle-right:before { 1056 | content: "\f138"; 1057 | } 1058 | .fa-chevron-circle-up:before { 1059 | content: "\f139"; 1060 | } 1061 | .fa-chevron-circle-down:before { 1062 | content: "\f13a"; 1063 | } 1064 | .fa-html5:before { 1065 | content: "\f13b"; 1066 | } 1067 | .fa-css3:before { 1068 | content: "\f13c"; 1069 | } 1070 | .fa-anchor:before { 1071 | content: "\f13d"; 1072 | } 1073 | .fa-unlock-alt:before { 1074 | content: "\f13e"; 1075 | } 1076 | .fa-bullseye:before { 1077 | content: "\f140"; 1078 | } 1079 | .fa-ellipsis-h:before { 1080 | content: "\f141"; 1081 | } 1082 | .fa-ellipsis-v:before { 1083 | content: "\f142"; 1084 | } 1085 | .fa-rss-square:before { 1086 | content: "\f143"; 1087 | } 1088 | .fa-play-circle:before { 1089 | content: "\f144"; 1090 | } 1091 | .fa-ticket:before { 1092 | content: "\f145"; 1093 | } 1094 | .fa-minus-square:before { 1095 | content: "\f146"; 1096 | } 1097 | .fa-minus-square-o:before { 1098 | content: "\f147"; 1099 | } 1100 | .fa-level-up:before { 1101 | content: "\f148"; 1102 | } 1103 | .fa-level-down:before { 1104 | content: "\f149"; 1105 | } 1106 | .fa-check-square:before { 1107 | content: "\f14a"; 1108 | } 1109 | .fa-pencil-square:before { 1110 | content: "\f14b"; 1111 | } 1112 | .fa-external-link-square:before { 1113 | content: "\f14c"; 1114 | } 1115 | .fa-share-square:before { 1116 | content: "\f14d"; 1117 | } 1118 | .fa-compass:before { 1119 | content: "\f14e"; 1120 | } 1121 | .fa-toggle-down:before, 1122 | .fa-caret-square-o-down:before { 1123 | content: "\f150"; 1124 | } 1125 | .fa-toggle-up:before, 1126 | .fa-caret-square-o-up:before { 1127 | content: "\f151"; 1128 | } 1129 | .fa-toggle-right:before, 1130 | .fa-caret-square-o-right:before { 1131 | content: "\f152"; 1132 | } 1133 | .fa-euro:before, 1134 | .fa-eur:before { 1135 | content: "\f153"; 1136 | } 1137 | .fa-gbp:before { 1138 | content: "\f154"; 1139 | } 1140 | .fa-dollar:before, 1141 | .fa-usd:before { 1142 | content: "\f155"; 1143 | } 1144 | .fa-rupee:before, 1145 | .fa-inr:before { 1146 | content: "\f156"; 1147 | } 1148 | .fa-cny:before, 1149 | .fa-rmb:before, 1150 | .fa-yen:before, 1151 | .fa-jpy:before { 1152 | content: "\f157"; 1153 | } 1154 | .fa-ruble:before, 1155 | .fa-rouble:before, 1156 | .fa-rub:before { 1157 | content: "\f158"; 1158 | } 1159 | .fa-won:before, 1160 | .fa-krw:before { 1161 | content: "\f159"; 1162 | } 1163 | .fa-bitcoin:before, 1164 | .fa-btc:before { 1165 | content: "\f15a"; 1166 | } 1167 | .fa-file:before { 1168 | content: "\f15b"; 1169 | } 1170 | .fa-file-text:before { 1171 | content: "\f15c"; 1172 | } 1173 | .fa-sort-alpha-asc:before { 1174 | content: "\f15d"; 1175 | } 1176 | .fa-sort-alpha-desc:before { 1177 | content: "\f15e"; 1178 | } 1179 | .fa-sort-amount-asc:before { 1180 | content: "\f160"; 1181 | } 1182 | .fa-sort-amount-desc:before { 1183 | content: "\f161"; 1184 | } 1185 | .fa-sort-numeric-asc:before { 1186 | content: "\f162"; 1187 | } 1188 | .fa-sort-numeric-desc:before { 1189 | content: "\f163"; 1190 | } 1191 | .fa-thumbs-up:before { 1192 | content: "\f164"; 1193 | } 1194 | .fa-thumbs-down:before { 1195 | content: "\f165"; 1196 | } 1197 | .fa-youtube-square:before { 1198 | content: "\f166"; 1199 | } 1200 | .fa-youtube:before { 1201 | content: "\f167"; 1202 | } 1203 | .fa-xing:before { 1204 | content: "\f168"; 1205 | } 1206 | .fa-xing-square:before { 1207 | content: "\f169"; 1208 | } 1209 | .fa-youtube-play:before { 1210 | content: "\f16a"; 1211 | } 1212 | .fa-dropbox:before { 1213 | content: "\f16b"; 1214 | } 1215 | .fa-stack-overflow:before { 1216 | content: "\f16c"; 1217 | } 1218 | .fa-instagram:before { 1219 | content: "\f16d"; 1220 | } 1221 | .fa-flickr:before { 1222 | content: "\f16e"; 1223 | } 1224 | .fa-adn:before { 1225 | content: "\f170"; 1226 | } 1227 | .fa-bitbucket:before { 1228 | content: "\f171"; 1229 | } 1230 | .fa-bitbucket-square:before { 1231 | content: "\f172"; 1232 | } 1233 | .fa-tumblr:before { 1234 | content: "\f173"; 1235 | } 1236 | .fa-tumblr-square:before { 1237 | content: "\f174"; 1238 | } 1239 | .fa-long-arrow-down:before { 1240 | content: "\f175"; 1241 | } 1242 | .fa-long-arrow-up:before { 1243 | content: "\f176"; 1244 | } 1245 | .fa-long-arrow-left:before { 1246 | content: "\f177"; 1247 | } 1248 | .fa-long-arrow-right:before { 1249 | content: "\f178"; 1250 | } 1251 | .fa-apple:before { 1252 | content: "\f179"; 1253 | } 1254 | .fa-windows:before { 1255 | content: "\f17a"; 1256 | } 1257 | .fa-android:before { 1258 | content: "\f17b"; 1259 | } 1260 | .fa-linux:before { 1261 | content: "\f17c"; 1262 | } 1263 | .fa-dribbble:before { 1264 | content: "\f17d"; 1265 | } 1266 | .fa-skype:before { 1267 | content: "\f17e"; 1268 | } 1269 | .fa-foursquare:before { 1270 | content: "\f180"; 1271 | } 1272 | .fa-trello:before { 1273 | content: "\f181"; 1274 | } 1275 | .fa-female:before { 1276 | content: "\f182"; 1277 | } 1278 | .fa-male:before { 1279 | content: "\f183"; 1280 | } 1281 | .fa-gittip:before, 1282 | .fa-gratipay:before { 1283 | content: "\f184"; 1284 | } 1285 | .fa-sun-o:before { 1286 | content: "\f185"; 1287 | } 1288 | .fa-moon-o:before { 1289 | content: "\f186"; 1290 | } 1291 | .fa-archive:before { 1292 | content: "\f187"; 1293 | } 1294 | .fa-bug:before { 1295 | content: "\f188"; 1296 | } 1297 | .fa-vk:before { 1298 | content: "\f189"; 1299 | } 1300 | .fa-weibo:before { 1301 | content: "\f18a"; 1302 | } 1303 | .fa-renren:before { 1304 | content: "\f18b"; 1305 | } 1306 | .fa-pagelines:before { 1307 | content: "\f18c"; 1308 | } 1309 | .fa-stack-exchange:before { 1310 | content: "\f18d"; 1311 | } 1312 | .fa-arrow-circle-o-right:before { 1313 | content: "\f18e"; 1314 | } 1315 | .fa-arrow-circle-o-left:before { 1316 | content: "\f190"; 1317 | } 1318 | .fa-toggle-left:before, 1319 | .fa-caret-square-o-left:before { 1320 | content: "\f191"; 1321 | } 1322 | .fa-dot-circle-o:before { 1323 | content: "\f192"; 1324 | } 1325 | .fa-wheelchair:before { 1326 | content: "\f193"; 1327 | } 1328 | .fa-vimeo-square:before { 1329 | content: "\f194"; 1330 | } 1331 | .fa-turkish-lira:before, 1332 | .fa-try:before { 1333 | content: "\f195"; 1334 | } 1335 | .fa-plus-square-o:before { 1336 | content: "\f196"; 1337 | } 1338 | .fa-space-shuttle:before { 1339 | content: "\f197"; 1340 | } 1341 | .fa-slack:before { 1342 | content: "\f198"; 1343 | } 1344 | .fa-envelope-square:before { 1345 | content: "\f199"; 1346 | } 1347 | .fa-wordpress:before { 1348 | content: "\f19a"; 1349 | } 1350 | .fa-openid:before { 1351 | content: "\f19b"; 1352 | } 1353 | .fa-institution:before, 1354 | .fa-bank:before, 1355 | .fa-university:before { 1356 | content: "\f19c"; 1357 | } 1358 | .fa-mortar-board:before, 1359 | .fa-graduation-cap:before { 1360 | content: "\f19d"; 1361 | } 1362 | .fa-yahoo:before { 1363 | content: "\f19e"; 1364 | } 1365 | .fa-google:before { 1366 | content: "\f1a0"; 1367 | } 1368 | .fa-reddit:before { 1369 | content: "\f1a1"; 1370 | } 1371 | .fa-reddit-square:before { 1372 | content: "\f1a2"; 1373 | } 1374 | .fa-stumbleupon-circle:before { 1375 | content: "\f1a3"; 1376 | } 1377 | .fa-stumbleupon:before { 1378 | content: "\f1a4"; 1379 | } 1380 | .fa-delicious:before { 1381 | content: "\f1a5"; 1382 | } 1383 | .fa-digg:before { 1384 | content: "\f1a6"; 1385 | } 1386 | .fa-pied-piper:before { 1387 | content: "\f1a7"; 1388 | } 1389 | .fa-pied-piper-alt:before { 1390 | content: "\f1a8"; 1391 | } 1392 | .fa-drupal:before { 1393 | content: "\f1a9"; 1394 | } 1395 | .fa-joomla:before { 1396 | content: "\f1aa"; 1397 | } 1398 | .fa-language:before { 1399 | content: "\f1ab"; 1400 | } 1401 | .fa-fax:before { 1402 | content: "\f1ac"; 1403 | } 1404 | .fa-building:before { 1405 | content: "\f1ad"; 1406 | } 1407 | .fa-child:before { 1408 | content: "\f1ae"; 1409 | } 1410 | .fa-paw:before { 1411 | content: "\f1b0"; 1412 | } 1413 | .fa-spoon:before { 1414 | content: "\f1b1"; 1415 | } 1416 | .fa-cube:before { 1417 | content: "\f1b2"; 1418 | } 1419 | .fa-cubes:before { 1420 | content: "\f1b3"; 1421 | } 1422 | .fa-behance:before { 1423 | content: "\f1b4"; 1424 | } 1425 | .fa-behance-square:before { 1426 | content: "\f1b5"; 1427 | } 1428 | .fa-steam:before { 1429 | content: "\f1b6"; 1430 | } 1431 | .fa-steam-square:before { 1432 | content: "\f1b7"; 1433 | } 1434 | .fa-recycle:before { 1435 | content: "\f1b8"; 1436 | } 1437 | .fa-automobile:before, 1438 | .fa-car:before { 1439 | content: "\f1b9"; 1440 | } 1441 | .fa-cab:before, 1442 | .fa-taxi:before { 1443 | content: "\f1ba"; 1444 | } 1445 | .fa-tree:before { 1446 | content: "\f1bb"; 1447 | } 1448 | .fa-spotify:before { 1449 | content: "\f1bc"; 1450 | } 1451 | .fa-deviantart:before { 1452 | content: "\f1bd"; 1453 | } 1454 | .fa-soundcloud:before { 1455 | content: "\f1be"; 1456 | } 1457 | .fa-database:before { 1458 | content: "\f1c0"; 1459 | } 1460 | .fa-file-pdf-o:before { 1461 | content: "\f1c1"; 1462 | } 1463 | .fa-file-word-o:before { 1464 | content: "\f1c2"; 1465 | } 1466 | .fa-file-excel-o:before { 1467 | content: "\f1c3"; 1468 | } 1469 | .fa-file-powerpoint-o:before { 1470 | content: "\f1c4"; 1471 | } 1472 | .fa-file-photo-o:before, 1473 | .fa-file-picture-o:before, 1474 | .fa-file-image-o:before { 1475 | content: "\f1c5"; 1476 | } 1477 | .fa-file-zip-o:before, 1478 | .fa-file-archive-o:before { 1479 | content: "\f1c6"; 1480 | } 1481 | .fa-file-sound-o:before, 1482 | .fa-file-audio-o:before { 1483 | content: "\f1c7"; 1484 | } 1485 | .fa-file-movie-o:before, 1486 | .fa-file-video-o:before { 1487 | content: "\f1c8"; 1488 | } 1489 | .fa-file-code-o:before { 1490 | content: "\f1c9"; 1491 | } 1492 | .fa-vine:before { 1493 | content: "\f1ca"; 1494 | } 1495 | .fa-codepen:before { 1496 | content: "\f1cb"; 1497 | } 1498 | .fa-jsfiddle:before { 1499 | content: "\f1cc"; 1500 | } 1501 | .fa-life-bouy:before, 1502 | .fa-life-buoy:before, 1503 | .fa-life-saver:before, 1504 | .fa-support:before, 1505 | .fa-life-ring:before { 1506 | content: "\f1cd"; 1507 | } 1508 | .fa-circle-o-notch:before { 1509 | content: "\f1ce"; 1510 | } 1511 | .fa-ra:before, 1512 | .fa-rebel:before { 1513 | content: "\f1d0"; 1514 | } 1515 | .fa-ge:before, 1516 | .fa-empire:before { 1517 | content: "\f1d1"; 1518 | } 1519 | .fa-git-square:before { 1520 | content: "\f1d2"; 1521 | } 1522 | .fa-git:before { 1523 | content: "\f1d3"; 1524 | } 1525 | .fa-y-combinator-square:before, 1526 | .fa-yc-square:before, 1527 | .fa-hacker-news:before { 1528 | content: "\f1d4"; 1529 | } 1530 | .fa-tencent-weibo:before { 1531 | content: "\f1d5"; 1532 | } 1533 | .fa-qq:before { 1534 | content: "\f1d6"; 1535 | } 1536 | .fa-wechat:before, 1537 | .fa-weixin:before { 1538 | content: "\f1d7"; 1539 | } 1540 | .fa-send:before, 1541 | .fa-paper-plane:before { 1542 | content: "\f1d8"; 1543 | } 1544 | .fa-send-o:before, 1545 | .fa-paper-plane-o:before { 1546 | content: "\f1d9"; 1547 | } 1548 | .fa-history:before { 1549 | content: "\f1da"; 1550 | } 1551 | .fa-circle-thin:before { 1552 | content: "\f1db"; 1553 | } 1554 | .fa-header:before { 1555 | content: "\f1dc"; 1556 | } 1557 | .fa-paragraph:before { 1558 | content: "\f1dd"; 1559 | } 1560 | .fa-sliders:before { 1561 | content: "\f1de"; 1562 | } 1563 | .fa-share-alt:before { 1564 | content: "\f1e0"; 1565 | } 1566 | .fa-share-alt-square:before { 1567 | content: "\f1e1"; 1568 | } 1569 | .fa-bomb:before { 1570 | content: "\f1e2"; 1571 | } 1572 | .fa-soccer-ball-o:before, 1573 | .fa-futbol-o:before { 1574 | content: "\f1e3"; 1575 | } 1576 | .fa-tty:before { 1577 | content: "\f1e4"; 1578 | } 1579 | .fa-binoculars:before { 1580 | content: "\f1e5"; 1581 | } 1582 | .fa-plug:before { 1583 | content: "\f1e6"; 1584 | } 1585 | .fa-slideshare:before { 1586 | content: "\f1e7"; 1587 | } 1588 | .fa-twitch:before { 1589 | content: "\f1e8"; 1590 | } 1591 | .fa-yelp:before { 1592 | content: "\f1e9"; 1593 | } 1594 | .fa-newspaper-o:before { 1595 | content: "\f1ea"; 1596 | } 1597 | .fa-wifi:before { 1598 | content: "\f1eb"; 1599 | } 1600 | .fa-calculator:before { 1601 | content: "\f1ec"; 1602 | } 1603 | .fa-paypal:before { 1604 | content: "\f1ed"; 1605 | } 1606 | .fa-google-wallet:before { 1607 | content: "\f1ee"; 1608 | } 1609 | .fa-cc-visa:before { 1610 | content: "\f1f0"; 1611 | } 1612 | .fa-cc-mastercard:before { 1613 | content: "\f1f1"; 1614 | } 1615 | .fa-cc-discover:before { 1616 | content: "\f1f2"; 1617 | } 1618 | .fa-cc-amex:before { 1619 | content: "\f1f3"; 1620 | } 1621 | .fa-cc-paypal:before { 1622 | content: "\f1f4"; 1623 | } 1624 | .fa-cc-stripe:before { 1625 | content: "\f1f5"; 1626 | } 1627 | .fa-bell-slash:before { 1628 | content: "\f1f6"; 1629 | } 1630 | .fa-bell-slash-o:before { 1631 | content: "\f1f7"; 1632 | } 1633 | .fa-trash:before { 1634 | content: "\f1f8"; 1635 | } 1636 | .fa-copyright:before { 1637 | content: "\f1f9"; 1638 | } 1639 | .fa-at:before { 1640 | content: "\f1fa"; 1641 | } 1642 | .fa-eyedropper:before { 1643 | content: "\f1fb"; 1644 | } 1645 | .fa-paint-brush:before { 1646 | content: "\f1fc"; 1647 | } 1648 | .fa-birthday-cake:before { 1649 | content: "\f1fd"; 1650 | } 1651 | .fa-area-chart:before { 1652 | content: "\f1fe"; 1653 | } 1654 | .fa-pie-chart:before { 1655 | content: "\f200"; 1656 | } 1657 | .fa-line-chart:before { 1658 | content: "\f201"; 1659 | } 1660 | .fa-lastfm:before { 1661 | content: "\f202"; 1662 | } 1663 | .fa-lastfm-square:before { 1664 | content: "\f203"; 1665 | } 1666 | .fa-toggle-off:before { 1667 | content: "\f204"; 1668 | } 1669 | .fa-toggle-on:before { 1670 | content: "\f205"; 1671 | } 1672 | .fa-bicycle:before { 1673 | content: "\f206"; 1674 | } 1675 | .fa-bus:before { 1676 | content: "\f207"; 1677 | } 1678 | .fa-ioxhost:before { 1679 | content: "\f208"; 1680 | } 1681 | .fa-angellist:before { 1682 | content: "\f209"; 1683 | } 1684 | .fa-cc:before { 1685 | content: "\f20a"; 1686 | } 1687 | .fa-shekel:before, 1688 | .fa-sheqel:before, 1689 | .fa-ils:before { 1690 | content: "\f20b"; 1691 | } 1692 | .fa-meanpath:before { 1693 | content: "\f20c"; 1694 | } 1695 | .fa-buysellads:before { 1696 | content: "\f20d"; 1697 | } 1698 | .fa-connectdevelop:before { 1699 | content: "\f20e"; 1700 | } 1701 | .fa-dashcube:before { 1702 | content: "\f210"; 1703 | } 1704 | .fa-forumbee:before { 1705 | content: "\f211"; 1706 | } 1707 | .fa-leanpub:before { 1708 | content: "\f212"; 1709 | } 1710 | .fa-sellsy:before { 1711 | content: "\f213"; 1712 | } 1713 | .fa-shirtsinbulk:before { 1714 | content: "\f214"; 1715 | } 1716 | .fa-simplybuilt:before { 1717 | content: "\f215"; 1718 | } 1719 | .fa-skyatlas:before { 1720 | content: "\f216"; 1721 | } 1722 | .fa-cart-plus:before { 1723 | content: "\f217"; 1724 | } 1725 | .fa-cart-arrow-down:before { 1726 | content: "\f218"; 1727 | } 1728 | .fa-diamond:before { 1729 | content: "\f219"; 1730 | } 1731 | .fa-ship:before { 1732 | content: "\f21a"; 1733 | } 1734 | .fa-user-secret:before { 1735 | content: "\f21b"; 1736 | } 1737 | .fa-motorcycle:before { 1738 | content: "\f21c"; 1739 | } 1740 | .fa-street-view:before { 1741 | content: "\f21d"; 1742 | } 1743 | .fa-heartbeat:before { 1744 | content: "\f21e"; 1745 | } 1746 | .fa-venus:before { 1747 | content: "\f221"; 1748 | } 1749 | .fa-mars:before { 1750 | content: "\f222"; 1751 | } 1752 | .fa-mercury:before { 1753 | content: "\f223"; 1754 | } 1755 | .fa-intersex:before, 1756 | .fa-transgender:before { 1757 | content: "\f224"; 1758 | } 1759 | .fa-transgender-alt:before { 1760 | content: "\f225"; 1761 | } 1762 | .fa-venus-double:before { 1763 | content: "\f226"; 1764 | } 1765 | .fa-mars-double:before { 1766 | content: "\f227"; 1767 | } 1768 | .fa-venus-mars:before { 1769 | content: "\f228"; 1770 | } 1771 | .fa-mars-stroke:before { 1772 | content: "\f229"; 1773 | } 1774 | .fa-mars-stroke-v:before { 1775 | content: "\f22a"; 1776 | } 1777 | .fa-mars-stroke-h:before { 1778 | content: "\f22b"; 1779 | } 1780 | .fa-neuter:before { 1781 | content: "\f22c"; 1782 | } 1783 | .fa-genderless:before { 1784 | content: "\f22d"; 1785 | } 1786 | .fa-facebook-official:before { 1787 | content: "\f230"; 1788 | } 1789 | .fa-pinterest-p:before { 1790 | content: "\f231"; 1791 | } 1792 | .fa-whatsapp:before { 1793 | content: "\f232"; 1794 | } 1795 | .fa-server:before { 1796 | content: "\f233"; 1797 | } 1798 | .fa-user-plus:before { 1799 | content: "\f234"; 1800 | } 1801 | .fa-user-times:before { 1802 | content: "\f235"; 1803 | } 1804 | .fa-hotel:before, 1805 | .fa-bed:before { 1806 | content: "\f236"; 1807 | } 1808 | .fa-viacoin:before { 1809 | content: "\f237"; 1810 | } 1811 | .fa-train:before { 1812 | content: "\f238"; 1813 | } 1814 | .fa-subway:before { 1815 | content: "\f239"; 1816 | } 1817 | .fa-medium:before { 1818 | content: "\f23a"; 1819 | } 1820 | .fa-yc:before, 1821 | .fa-y-combinator:before { 1822 | content: "\f23b"; 1823 | } 1824 | .fa-optin-monster:before { 1825 | content: "\f23c"; 1826 | } 1827 | .fa-opencart:before { 1828 | content: "\f23d"; 1829 | } 1830 | .fa-expeditedssl:before { 1831 | content: "\f23e"; 1832 | } 1833 | .fa-battery-4:before, 1834 | .fa-battery-full:before { 1835 | content: "\f240"; 1836 | } 1837 | .fa-battery-3:before, 1838 | .fa-battery-three-quarters:before { 1839 | content: "\f241"; 1840 | } 1841 | .fa-battery-2:before, 1842 | .fa-battery-half:before { 1843 | content: "\f242"; 1844 | } 1845 | .fa-battery-1:before, 1846 | .fa-battery-quarter:before { 1847 | content: "\f243"; 1848 | } 1849 | .fa-battery-0:before, 1850 | .fa-battery-empty:before { 1851 | content: "\f244"; 1852 | } 1853 | .fa-mouse-pointer:before { 1854 | content: "\f245"; 1855 | } 1856 | .fa-i-cursor:before { 1857 | content: "\f246"; 1858 | } 1859 | .fa-object-group:before { 1860 | content: "\f247"; 1861 | } 1862 | .fa-object-ungroup:before { 1863 | content: "\f248"; 1864 | } 1865 | .fa-sticky-note:before { 1866 | content: "\f249"; 1867 | } 1868 | .fa-sticky-note-o:before { 1869 | content: "\f24a"; 1870 | } 1871 | .fa-cc-jcb:before { 1872 | content: "\f24b"; 1873 | } 1874 | .fa-cc-diners-club:before { 1875 | content: "\f24c"; 1876 | } 1877 | .fa-clone:before { 1878 | content: "\f24d"; 1879 | } 1880 | .fa-balance-scale:before { 1881 | content: "\f24e"; 1882 | } 1883 | .fa-hourglass-o:before { 1884 | content: "\f250"; 1885 | } 1886 | .fa-hourglass-1:before, 1887 | .fa-hourglass-start:before { 1888 | content: "\f251"; 1889 | } 1890 | .fa-hourglass-2:before, 1891 | .fa-hourglass-half:before { 1892 | content: "\f252"; 1893 | } 1894 | .fa-hourglass-3:before, 1895 | .fa-hourglass-end:before { 1896 | content: "\f253"; 1897 | } 1898 | .fa-hourglass:before { 1899 | content: "\f254"; 1900 | } 1901 | .fa-hand-grab-o:before, 1902 | .fa-hand-rock-o:before { 1903 | content: "\f255"; 1904 | } 1905 | .fa-hand-stop-o:before, 1906 | .fa-hand-paper-o:before { 1907 | content: "\f256"; 1908 | } 1909 | .fa-hand-scissors-o:before { 1910 | content: "\f257"; 1911 | } 1912 | .fa-hand-lizard-o:before { 1913 | content: "\f258"; 1914 | } 1915 | .fa-hand-spock-o:before { 1916 | content: "\f259"; 1917 | } 1918 | .fa-hand-pointer-o:before { 1919 | content: "\f25a"; 1920 | } 1921 | .fa-hand-peace-o:before { 1922 | content: "\f25b"; 1923 | } 1924 | .fa-trademark:before { 1925 | content: "\f25c"; 1926 | } 1927 | .fa-registered:before { 1928 | content: "\f25d"; 1929 | } 1930 | .fa-creative-commons:before { 1931 | content: "\f25e"; 1932 | } 1933 | .fa-gg:before { 1934 | content: "\f260"; 1935 | } 1936 | .fa-gg-circle:before { 1937 | content: "\f261"; 1938 | } 1939 | .fa-tripadvisor:before { 1940 | content: "\f262"; 1941 | } 1942 | .fa-odnoklassniki:before { 1943 | content: "\f263"; 1944 | } 1945 | .fa-odnoklassniki-square:before { 1946 | content: "\f264"; 1947 | } 1948 | .fa-get-pocket:before { 1949 | content: "\f265"; 1950 | } 1951 | .fa-wikipedia-w:before { 1952 | content: "\f266"; 1953 | } 1954 | .fa-safari:before { 1955 | content: "\f267"; 1956 | } 1957 | .fa-chrome:before { 1958 | content: "\f268"; 1959 | } 1960 | .fa-firefox:before { 1961 | content: "\f269"; 1962 | } 1963 | .fa-opera:before { 1964 | content: "\f26a"; 1965 | } 1966 | .fa-internet-explorer:before { 1967 | content: "\f26b"; 1968 | } 1969 | .fa-tv:before, 1970 | .fa-television:before { 1971 | content: "\f26c"; 1972 | } 1973 | .fa-contao:before { 1974 | content: "\f26d"; 1975 | } 1976 | .fa-500px:before { 1977 | content: "\f26e"; 1978 | } 1979 | .fa-amazon:before { 1980 | content: "\f270"; 1981 | } 1982 | .fa-calendar-plus-o:before { 1983 | content: "\f271"; 1984 | } 1985 | .fa-calendar-minus-o:before { 1986 | content: "\f272"; 1987 | } 1988 | .fa-calendar-times-o:before { 1989 | content: "\f273"; 1990 | } 1991 | .fa-calendar-check-o:before { 1992 | content: "\f274"; 1993 | } 1994 | .fa-industry:before { 1995 | content: "\f275"; 1996 | } 1997 | .fa-map-pin:before { 1998 | content: "\f276"; 1999 | } 2000 | .fa-map-signs:before { 2001 | content: "\f277"; 2002 | } 2003 | .fa-map-o:before { 2004 | content: "\f278"; 2005 | } 2006 | .fa-map:before { 2007 | content: "\f279"; 2008 | } 2009 | .fa-commenting:before { 2010 | content: "\f27a"; 2011 | } 2012 | .fa-commenting-o:before { 2013 | content: "\f27b"; 2014 | } 2015 | .fa-houzz:before { 2016 | content: "\f27c"; 2017 | } 2018 | .fa-vimeo:before { 2019 | content: "\f27d"; 2020 | } 2021 | .fa-black-tie:before { 2022 | content: "\f27e"; 2023 | } 2024 | .fa-fonticons:before { 2025 | content: "\f280"; 2026 | } 2027 | -------------------------------------------------------------------------------- /src/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | // ** This is where you can put your very own put Sass Mixins that can be used globally. ** // 2 | 3 | // Mixin: circle ($width:50%, $height:50%) 4 | // Description: Used to make a circular element. (e.g Change a square to a circle) 5 | // @params $width: [ number ]: Specify the width of the element. Set to 50% if an argument is not passed. 6 | // @params $height: [ number ]: Specify the height of the element. Set to 50% if an argument is not passed. 7 | @mixin circle ($width:50%, $height:50%) { 8 | width: $width; 9 | height: $height; 10 | border-radius: 50%; 11 | } 12 | 13 | -------------------------------------------------------------------------------- /src/styles/_settings.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | // 6 | 7 | // Table of Contents 8 | // Foundation Settings 9 | 10 | // a. Base 11 | // b. Grid 12 | // c. Global 13 | // d. Media Query Ranges 14 | // e. Typography 15 | // 01. Accordion 16 | // 02. Alert Boxes 17 | // 03. Block Grid 18 | // 04. Breadcrumbs 19 | // 05. Buttons 20 | // 06. Button Groups 21 | // 07. Clearing 22 | // 08. Dropdown 23 | // 09. Dropdown Buttons 24 | // 10. Flex Video 25 | // 11. Forms 26 | // 12. Icon Bar 27 | // 13. Inline Lists 28 | // 14. Joyride 29 | // 15. Keystrokes 30 | // 16. Labels 31 | // 17. Magellan 32 | // 18. Off-canvas 33 | // 19. Orbit 34 | // 20. Pagination 35 | // 21. Panels 36 | // 22. Pricing Tables 37 | // 23. Progress Bar 38 | // 24. Range Slider 39 | // 25. Reveal 40 | // 26. Side Nav 41 | // 27. Split Buttons 42 | // 28. Sub Nav 43 | // 29. Switch 44 | // 30. Tables 45 | // 31. Tabs 46 | // 32. Thumbnails 47 | // 33. Tooltips 48 | // 34. Top Bar 49 | // 36. Visibility Classes 50 | 51 | // a. Base 52 | // - - - - - - - - - - - - - - - - - - - - - - - - - 53 | 54 | // This is the default html and body font-size for the base rem value. 55 | // $rem-base: 16px; 56 | 57 | // Allows the use of rem-calc() or lower-bound() in your settings 58 | @import '../../vendor/foundation/scss/foundation/_functions'; 59 | 60 | // The default font-size is set to 100% of the browser style sheet (usually 16px) 61 | // for compatibility with browser-based text zoom or user-set defaults. 62 | 63 | // Since the typical default browser font-size is 16px, that makes the calculation for grid size. 64 | // If you want your base font-size to be different and not have it affect the grid breakpoints, 65 | // set $rem-base to $base-font-size and make sure $base-font-size is a px value. 66 | // $base-font-size: 100%; 67 | 68 | // The $base-font-size is 100% while $base-line-height is 150% 69 | // $base-line-height: 150%; 70 | 71 | // We use this to control whether or not CSS classes come through in the gem files. 72 | $include-html-classes: true; 73 | // $include-print-styles: true; 74 | $include-html-global-classes: $include-html-classes; 75 | 76 | // b. Grid 77 | // - - - - - - - - - - - - - - - - - - - - - - - - - 78 | 79 | // $include-html-grid-classes: $include-html-classes; 80 | // $include-xl-html-grid-classes: false; 81 | 82 | // $row-width: rem-calc(1000); 83 | // $total-columns: 12; 84 | // $column-gutter: rem-calc(30); 85 | 86 | // c. Global 87 | // - - - - - - - - - - - - - - - - - - - - - - - - - 88 | 89 | // We use these to define default font stacks 90 | // $font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 91 | // $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif; 92 | // $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; 93 | 94 | // We use these to define default font weights 95 | // $font-weight-normal: normal; 96 | // $font-weight-bold: bold; 97 | 98 | // $white : #FFFFFF; 99 | // $ghost : #FAFAFA; 100 | // $snow : #F9F9F9; 101 | // $vapor : #F6F6F6; 102 | // $white-smoke : #F5F5F5; 103 | // $silver : #EFEFEF; 104 | // $smoke : #EEEEEE; 105 | // $gainsboro : #DDDDDD; 106 | // $iron : #CCCCCC; 107 | // $base : #AAAAAA; 108 | // $aluminum : #999999; 109 | // $jumbo : #888888; 110 | // $monsoon : #777777; 111 | // $steel : #666666; 112 | // $charcoal : #555555; 113 | // $tuatara : #444444; 114 | // $oil : #333333; 115 | // $jet : #222222; 116 | // $black : #000000; 117 | 118 | // We use these as default colors throughout 119 | // $primary-color: #008CBA; 120 | // $secondary-color: #e7e7e7; 121 | // $alert-color: #f04124; 122 | // $success-color: #43AC6A; 123 | // $warning-color: #f08a24; 124 | // $info-color: #a0d3e8; 125 | 126 | // We use these to control various global styles 127 | // $body-bg: $white; 128 | // $body-font-color: $jet; 129 | // $body-font-family: $font-family-sans-serif; 130 | // $body-font-weight: $font-weight-normal; 131 | // $body-font-style: normal; 132 | 133 | // We use this to control font-smoothing 134 | // $font-smoothing: antialiased; 135 | 136 | // We use these to control text direction settings 137 | // $text-direction: ltr; 138 | // $opposite-direction: right; 139 | // $default-float: left; 140 | // $last-child-float: $opposite-direction; 141 | 142 | // We use these to make sure border radius matches unless we want it different. 143 | // $global-radius: 3px; 144 | // $global-rounded: 1000px; 145 | 146 | // We use these to control inset shadow shiny edges and depressions. 147 | // $shiny-edge-size: 0 1px 0; 148 | // $shiny-edge-color: rgba($white, .5); 149 | // $shiny-edge-active-color: rgba($black, .2); 150 | 151 | // d. Media Query Ranges 152 | // - - - - - - - - - - - - - - - - - - - - - - - - - 153 | 154 | // $small-breakpoint: em-calc(640); 155 | // $medium-breakpoint: em-calc(1024); 156 | // $large-breakpoint: em-calc(1440); 157 | // $xlarge-breakpoint: em-calc(1920); 158 | 159 | // $small-range: (0, $small-breakpoint); 160 | // $medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint); 161 | // $large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint); 162 | // $xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint); 163 | // $xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)); 164 | 165 | // $screen: "only screen"; 166 | 167 | // $landscape: "#{$screen} and (orientation: landscape)"; 168 | // $portrait: "#{$screen} and (orientation: portrait)"; 169 | 170 | // $small-up: $screen; 171 | // $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; 172 | 173 | // $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"; 174 | // $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"; 175 | 176 | // $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"; 177 | // $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"; 178 | 179 | // $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"; 180 | // $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"; 181 | 182 | // $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"; 183 | // $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"; 184 | 185 | // $retina: ( 186 | // "#{$screen} and (-webkit-min-device-pixel-ratio: 2)", 187 | // "#{$screen} and (min--moz-device-pixel-ratio: 2)", 188 | // "#{$screen} and (-o-min-device-pixel-ratio: 2/1)", 189 | // "#{$screen} and (min-device-pixel-ratio: 2)", 190 | // "#{$screen} and (min-resolution: 192dpi)", 191 | // "#{$screen} and (min-resolution: 2dppx)" 192 | // ); 193 | 194 | // Legacy 195 | // $small: $medium-up; 196 | // $medium: $medium-up; 197 | // $large: $large-up; 198 | 199 | // We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet 200 | // $cursor-crosshair-value: crosshair; 201 | // $cursor-default-value: default; 202 | // $cursor-disabled-value: not-allowed; 203 | // $cursor-pointer-value: pointer; 204 | // $cursor-help-value: help; 205 | // $cursor-text-value: text; 206 | 207 | // e. Typography 208 | // - - - - - - - - - - - - - - - - - - - - - - - - - 209 | 210 | // $include-html-type-classes: $include-html-classes; 211 | 212 | // We use these to control header font styles 213 | // $header-font-family: $body-font-family; 214 | // $header-font-weight: $font-weight-normal; 215 | // $header-font-style: normal; 216 | // $header-font-color: $jet; 217 | // $header-line-height: 1.4; 218 | // $header-top-margin: .2rem; 219 | // $header-bottom-margin: .5rem; 220 | // $header-text-rendering: optimizeLegibility; 221 | 222 | // We use these to control header font sizes 223 | // $h1-font-size: rem-calc(44); 224 | // $h2-font-size: rem-calc(37); 225 | // $h3-font-size: rem-calc(27); 226 | // $h4-font-size: rem-calc(23); 227 | // $h5-font-size: rem-calc(18); 228 | // $h6-font-size: 1rem; 229 | 230 | // We use these to control header size reduction on small screens 231 | // $h1-font-reduction: rem-calc(10); 232 | // $h2-font-reduction: rem-calc(10); 233 | // $h3-font-reduction: rem-calc(5); 234 | // $h4-font-reduction: rem-calc(5); 235 | // $h5-font-reduction: 0; 236 | // $h6-font-reduction: 0; 237 | 238 | // These control how subheaders are styled. 239 | // $subheader-line-height: 1.4; 240 | // $subheader-font-color: scale-color($header-font-color, $lightness: 35%); 241 | // $subheader-font-weight: $font-weight-normal; 242 | // $subheader-top-margin: .2rem; 243 | // $subheader-bottom-margin: .5rem; 244 | 245 | // A general styling 246 | // $small-font-size: 60%; 247 | // $small-font-color: scale-color($header-font-color, $lightness: 35%); 248 | 249 | // We use these to style paragraphs 250 | // $paragraph-font-family: inherit; 251 | // $paragraph-font-weight: $font-weight-normal; 252 | // $paragraph-font-size: 1rem; 253 | // $paragraph-line-height: 1.6; 254 | // $paragraph-margin-bottom: rem-calc(20); 255 | // $paragraph-aside-font-size: rem-calc(14); 256 | // $paragraph-aside-line-height: 1.35; 257 | // $paragraph-aside-font-style: italic; 258 | // $paragraph-text-rendering: optimizeLegibility; 259 | 260 | // We use these to style tags 261 | // $code-color: $oil; 262 | // $code-font-family: $font-family-monospace; 263 | // $code-font-weight: $font-weight-normal; 264 | // $code-background-color: scale-color($secondary-color, $lightness: 70%); 265 | // $code-border-size: 1px; 266 | // $code-border-style: solid; 267 | // $code-border-color: scale-color($code-background-color, $lightness: -10%); 268 | // $code-padding: rem-calc(2) rem-calc(5) rem-calc(1); 269 | 270 | // We use these to style anchors 271 | // $anchor-text-decoration: none; 272 | // $anchor-text-decoration-hover: none; 273 | // $anchor-font-color: $primary-color; 274 | // $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%); 275 | 276 | // We use these to style the
element 277 | // $hr-border-width: 1px; 278 | // $hr-border-style: solid; 279 | // $hr-border-color: $gainsboro; 280 | // $hr-margin: rem-calc(20); 281 | 282 | // We use these to style lists 283 | // $list-font-family: $paragraph-font-family; 284 | // $list-font-size: $paragraph-font-size; 285 | // $list-line-height: $paragraph-line-height; 286 | // $list-margin-bottom: $paragraph-margin-bottom; 287 | // $list-style-position: outside; 288 | // $list-side-margin: 1.1rem; 289 | // $list-ordered-side-margin: 1.4rem; 290 | // $list-side-margin-no-bullet: 0; 291 | // $list-nested-margin: rem-calc(20); 292 | // $definition-list-header-weight: $font-weight-bold; 293 | // $definition-list-header-margin-bottom: .3rem; 294 | // $definition-list-margin-bottom: rem-calc(12); 295 | 296 | // We use these to style blockquotes 297 | // $blockquote-font-color: scale-color($header-font-color, $lightness: 35%); 298 | // $blockquote-padding: rem-calc(9 20 0 19); 299 | // $blockquote-border: 1px solid $gainsboro; 300 | // $blockquote-cite-font-size: rem-calc(13); 301 | // $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%); 302 | // $blockquote-cite-link-color: $blockquote-cite-font-color; 303 | 304 | // Acronym styles 305 | // $acronym-underline: 1px dotted $gainsboro; 306 | 307 | // We use these to control padding and margin 308 | // $microformat-padding: rem-calc(10 12); 309 | // $microformat-margin: rem-calc(0 0 20 0); 310 | 311 | // We use these to control the border styles 312 | // $microformat-border-width: 1px; 313 | // $microformat-border-style: solid; 314 | // $microformat-border-color: $gainsboro; 315 | 316 | // We use these to control full name font styles 317 | // $microformat-fullname-font-weight: $font-weight-bold; 318 | // $microformat-fullname-font-size: rem-calc(15); 319 | 320 | // We use this to control the summary font styles 321 | // $microformat-summary-font-weight: $font-weight-bold; 322 | 323 | // We use this to control abbr padding 324 | // $microformat-abbr-padding: rem-calc(0 1); 325 | 326 | // We use this to control abbr font styles 327 | // $microformat-abbr-font-weight: $font-weight-bold; 328 | // $microformat-abbr-font-decoration: none; 329 | 330 | // 01. Accordion 331 | // - - - - - - - - - - - - - - - - - - - - - - - - - 332 | 333 | // $include-html-accordion-classes: $include-html-classes; 334 | 335 | // $accordion-navigation-padding: rem-calc(16); 336 | // $accordion-navigation-bg-color: $silver; 337 | // $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%); 338 | // $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%); 339 | // $accordion-navigation-active-font-color: $jet; 340 | // $accordion-navigation-font-color: $jet; 341 | // $accordion-navigation-font-size: rem-calc(16); 342 | // $accordion-navigation-font-family: $body-font-family; 343 | 344 | // $accordion-content-padding: ($column-gutter/2); 345 | // $accordion-content-active-bg-color: $white; 346 | 347 | // 02. Alert Boxes 348 | // - - - - - - - - - - - - - - - - - - - - - - - - - 349 | 350 | // $include-html-alert-classes: $include-html-classes; 351 | 352 | // We use this to control alert padding. 353 | // $alert-padding-top: rem-calc(14); 354 | // $alert-padding-default-float: $alert-padding-top; 355 | // $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10); 356 | // $alert-padding-bottom: $alert-padding-top; 357 | 358 | // We use these to control text style. 359 | // $alert-font-weight: $font-weight-normal; 360 | // $alert-font-size: rem-calc(13); 361 | // $alert-font-color: $white; 362 | // $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%); 363 | 364 | // We use this for close hover effect. 365 | // $alert-function-factor: -14%; 366 | 367 | // We use these to control border styles. 368 | // $alert-border-style: solid; 369 | // $alert-border-width: 1px; 370 | // $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor); 371 | // $alert-bottom-margin: rem-calc(20); 372 | 373 | // We use these to style the close buttons 374 | // $alert-close-color: $oil; 375 | // $alert-close-top: 50%; 376 | // $alert-close-position: rem-calc(4); 377 | // $alert-close-font-size: rem-calc(22); 378 | // $alert-close-opacity: .3; 379 | // $alert-close-opacity-hover: .5; 380 | // $alert-close-padding: 9px 6px 4px; 381 | // $alert-close-background: inherit; 382 | 383 | // We use this to control border radius 384 | // $alert-radius: $global-radius; 385 | 386 | // $alert-transition-speed: 300ms; 387 | // $alert-transition-ease: ease-out; 388 | 389 | // 03. Block Grid 390 | // - - - - - - - - - - - - - - - - - - - - - - - - - 391 | 392 | // $include-html-block-grid-classes: $include-html-classes; 393 | // $include-xl-html-block-grid-classes: false; 394 | 395 | // We use this to control the maximum number of block grid elements per row 396 | // $block-grid-elements: 12; 397 | // $block-grid-default-spacing: rem-calc(20); 398 | 399 | // $align-block-grid-to-grid: false; 400 | // @if $align-block-grid-to-grid {$block-grid-default-spacing: $column-gutter;} 401 | 402 | // Enables media queries for block-grid classes. Set to false if writing semantic HTML. 403 | // $block-grid-media-queries: true; 404 | 405 | // 04. Breadcrumbs 406 | // - - - - - - - - - - - - - - - - - - - - - - - - - 407 | 408 | // $include-html-nav-classes: $include-html-classes; 409 | 410 | // We use this to set the background color for the breadcrumb container. 411 | // $crumb-bg: scale-color($secondary-color, $lightness: 55%); 412 | 413 | // We use these to set the padding around the breadcrumbs. 414 | // $crumb-padding: rem-calc(9 14 9); 415 | // $crumb-side-padding: rem-calc(12); 416 | 417 | // We use these to control border styles. 418 | // $crumb-function-factor: -10%; 419 | // $crumb-border-size: 1px; 420 | // $crumb-border-style: solid; 421 | // $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor); 422 | // $crumb-radius: $global-radius; 423 | 424 | // We use these to set various text styles for breadcrumbs. 425 | // $crumb-font-size: rem-calc(11); 426 | // $crumb-font-color: $primary-color; 427 | // $crumb-font-color-current: $oil; 428 | // $crumb-font-color-unavailable: $aluminum; 429 | // $crumb-font-transform: uppercase; 430 | // $crumb-link-decor: underline; 431 | 432 | // We use these to control the slash between breadcrumbs 433 | // $crumb-slash-color: $base; 434 | // $crumb-slash: "/"; 435 | // $crumb-slash-position: 1px; 436 | 437 | // 05. Buttons 438 | // - - - - - - - - - - - - - - - - - - - - - - - - - 439 | 440 | // $include-html-button-classes: $include-html-classes; 441 | 442 | // We use these to build padding for buttons. 443 | // $button-tny: rem-calc(10); 444 | // $button-sml: rem-calc(14); 445 | // $button-med: rem-calc(16); 446 | // $button-lrg: rem-calc(18); 447 | 448 | // We use this to control the display property. 449 | // $button-display: inline-block; 450 | // $button-margin-bottom: rem-calc(20); 451 | 452 | // We use these to control button text styles. 453 | // $button-font-family: $body-font-family; 454 | // $button-font-color: $white; 455 | // $button-font-color-alt: $oil; 456 | // $button-font-tny: rem-calc(11); 457 | // $button-font-sml: rem-calc(13); 458 | // $button-font-med: rem-calc(16); 459 | // $button-font-lrg: rem-calc(20); 460 | // $button-font-weight: $font-weight-normal; 461 | // $button-font-align: center; 462 | 463 | // We use these to control various hover effects. 464 | // $button-function-factor: -20%; 465 | 466 | // We use these to control button border styles. 467 | // $button-border-width: 0; 468 | // $button-border-style: solid; 469 | // $button-bg-color: $primary-color; 470 | // $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor); 471 | // $button-border-color: $button-bg-hover; 472 | // $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor); 473 | // $secondary-button-border-color: $secondary-button-bg-hover; 474 | // $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor); 475 | // $success-button-border-color: $success-button-bg-hover; 476 | // $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor); 477 | // $alert-button-border-color: $alert-button-bg-hover; 478 | // $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor); 479 | // $warning-button-border-color: $warning-button-bg-hover; 480 | // $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor); 481 | // $info-button-border-color: $info-button-bg-hover; 482 | 483 | // We use this to set the default radius used throughout the core. 484 | // $button-radius: $global-radius; 485 | // $button-round: $global-rounded; 486 | 487 | // We use this to set default opacity and cursor for disabled buttons. 488 | // $button-disabled-opacity: .7; 489 | // $button-disabled-cursor: $cursor-default-value; 490 | 491 | // 06. Button Groups 492 | // - - - - - - - - - - - - - - - - - - - - - - - - - 493 | 494 | // $include-html-button-classes: $include-html-classes; 495 | 496 | // Sets the margin for the right side by default, and the left margin if right-to-left direction is used 497 | // $button-bar-margin-opposite: rem-calc(10); 498 | // $button-group-border-width: 1px; 499 | 500 | // 07. Clearing 501 | // - - - - - - - - - - - - - - - - - - - - - - - - - 502 | 503 | // $include-html-clearing-classes: $include-html-classes; 504 | 505 | // We use these to set the background colors for parts of Clearing. 506 | // $clearing-bg: $oil; 507 | // $clearing-caption-bg: $clearing-bg; 508 | // $clearing-carousel-bg: rgba(51,51,51,0.8); 509 | // $clearing-img-bg: $clearing-bg; 510 | 511 | // We use these to style the close button 512 | // $clearing-close-color: $iron; 513 | // $clearing-close-size: 30px; 514 | 515 | // We use these to style the arrows 516 | // $clearing-arrow-size: 12px; 517 | // $clearing-arrow-color: $clearing-close-color; 518 | 519 | // We use these to style captions 520 | // $clearing-caption-font-color: $iron; 521 | // $clearing-caption-font-size: .875em; 522 | // $clearing-caption-padding: 10px 30px 20px; 523 | 524 | // We use these to make the image and carousel height and style 525 | // $clearing-active-img-height: 85%; 526 | // $clearing-carousel-height: 120px; 527 | // $clearing-carousel-thumb-width: 120px; 528 | // $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255); 529 | 530 | // 08. Dropdown 531 | // - - - - - - - - - - - - - - - - - - - - - - - - - 532 | 533 | // $include-html-dropdown-classes: $include-html-classes; 534 | 535 | // We use these to controls height and width styles. 536 | // $f-dropdown-max-width: 200px; 537 | // $f-dropdown-height: auto; 538 | // $f-dropdown-max-height: none; 539 | 540 | // Used for bottom position 541 | // $f-dropdown-margin-top: 2px; 542 | 543 | // Used for right position 544 | // $f-dropdown-margin-left: $f-dropdown-margin-top; 545 | 546 | // Used for left position 547 | // $f-dropdown-margin-right: $f-dropdown-margin-top; 548 | 549 | // Used for top position 550 | // $f-dropdown-margin-bottom: $f-dropdown-margin-top; 551 | 552 | // We use this to control the background color 553 | // $f-dropdown-bg: $white; 554 | 555 | // We use this to set the border styles for dropdowns. 556 | // $f-dropdown-border-style: solid; 557 | // $f-dropdown-border-width: 1px; 558 | // $f-dropdown-border-color: scale-color($white, $lightness: -20%); 559 | 560 | // We use these to style the triangle pip. 561 | // $f-dropdown-triangle-size: 6px; 562 | // $f-dropdown-triangle-color: $white; 563 | // $f-dropdown-triangle-side-offset: 10px; 564 | 565 | // We use these to control styles for the list elements. 566 | // $f-dropdown-list-style: none; 567 | // $f-dropdown-font-color: $charcoal; 568 | // $f-dropdown-font-size: rem-calc(14); 569 | // $f-dropdown-list-padding: rem-calc(5, 10); 570 | // $f-dropdown-line-height: rem-calc(18); 571 | // $f-dropdown-list-hover-bg: $smoke; 572 | // $dropdown-mobile-default-float: 0; 573 | 574 | // We use this to control the styles for when the dropdown has custom content. 575 | // $f-dropdown-content-padding: rem-calc(20); 576 | 577 | // Default radius for dropdown. 578 | // $f-dropdown-radius: $global-radius; 579 | 580 | 581 | // 09. Dropdown Buttons 582 | // - - - - - - - - - - - - - - - - - - - - - - - - - 583 | 584 | // $include-html-button-classes: $include-html-classes; 585 | 586 | // We use these to set the color of the pip in dropdown buttons 587 | // $dropdown-button-pip-color: $white; 588 | // $dropdown-button-pip-color-alt: $oil; 589 | 590 | // We use these to set the size of the pip in dropdown buttons 591 | // $button-pip-tny: rem-calc(6); 592 | // $button-pip-sml: rem-calc(7); 593 | // $button-pip-med: rem-calc(9); 594 | // $button-pip-lrg: rem-calc(11); 595 | 596 | // We use these to style tiny dropdown buttons 597 | // $dropdown-button-padding-tny: $button-pip-tny * 7; 598 | // $dropdown-button-pip-size-tny: $button-pip-tny; 599 | // $dropdown-button-pip-opposite-tny: $button-pip-tny * 3; 600 | // $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1); 601 | 602 | // We use these to style small dropdown buttons 603 | // $dropdown-button-padding-sml: $button-pip-sml * 7; 604 | // $dropdown-button-pip-size-sml: $button-pip-sml; 605 | // $dropdown-button-pip-opposite-sml: $button-pip-sml * 3; 606 | // $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1); 607 | 608 | // We use these to style medium dropdown buttons 609 | // $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3); 610 | // $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3); 611 | // $dropdown-button-pip-opposite-med: $button-pip-med * 2.5; 612 | // $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2); 613 | 614 | // We use these to style large dropdown buttons 615 | // $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3); 616 | // $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); 617 | // $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5; 618 | // $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3); 619 | 620 | // 10. Flex Video 621 | // - - - - - - - - - - - - - - - - - - - - - - - - - 622 | 623 | // $include-html-media-classes: $include-html-classes; 624 | 625 | // We use these to control video container padding and margins 626 | // $flex-video-padding-top: rem-calc(25); 627 | // $flex-video-padding-bottom: 67.5%; 628 | // $flex-video-margin-bottom: rem-calc(16); 629 | 630 | // We use this to control widescreen bottom padding 631 | // $flex-video-widescreen-padding-bottom: 56.34%; 632 | 633 | // 11. Forms 634 | // - - - - - - - - - - - - - - - - - - - - - - - - - 635 | 636 | // $include-html-form-classes: $include-html-classes; 637 | 638 | // We use this to set the base for lots of form spacing and positioning styles 639 | // $form-spacing: rem-calc(16); 640 | 641 | // We use these to style the labels in different ways 642 | // $form-label-pointer: pointer; 643 | // $form-label-font-size: rem-calc(14); 644 | // $form-label-font-weight: $font-weight-normal; 645 | // $form-label-line-height: 1.5; 646 | // $form-label-font-color: scale-color($black, $lightness: 30%); 647 | // $form-label-small-transform: capitalize; 648 | // $form-label-bottom-margin: 0; 649 | // $input-font-family: inherit; 650 | // $input-font-color: rgba(0,0,0,0.75); 651 | // $input-font-size: rem-calc(14); 652 | // $input-placeholder-font-color: #cccccc; 653 | // $input-bg-color: $white; 654 | // $input-focus-bg-color: scale-color($white, $lightness: -2%); 655 | // $input-border-color: scale-color($white, $lightness: -20%); 656 | // $input-focus-border-color: scale-color($white, $lightness: -40%); 657 | // $input-border-style: solid; 658 | // $input-border-width: 1px; 659 | // $input-border-radius: $global-radius; 660 | // $input-disabled-bg: $gainsboro; 661 | // $input-disabled-cursor: $cursor-default-value; 662 | // $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); 663 | // $input-include-glowing-effect: false; 664 | 665 | // We use these to style the fieldset border and spacing. 666 | // $fieldset-border-style: solid; 667 | // $fieldset-border-width: 1px; 668 | // $fieldset-border-color: $gainsboro; 669 | // $fieldset-padding: rem-calc(20); 670 | // $fieldset-margin: rem-calc(18 0); 671 | 672 | // We use these to style the legends when you use them 673 | // $legend-bg: $white; 674 | // $legend-font-weight: $font-weight-bold; 675 | // $legend-padding: rem-calc(0 3); 676 | 677 | // We use these to style the prefix and postfix input elements 678 | // $input-prefix-bg: scale-color($white, $lightness: -5%); 679 | // $input-prefix-border-color: scale-color($white, $lightness: -20%); 680 | // $input-prefix-border-size: 1px; 681 | // $input-prefix-border-type: solid; 682 | // $input-prefix-overflow: hidden; 683 | // $input-prefix-font-color: $oil; 684 | // $input-prefix-font-color-alt: $white; 685 | 686 | // We use this setting to turn on/off HTML5 number spinners (the up/down arrows) 687 | // $input-number-spinners: true; 688 | 689 | // We use these to style the error states for inputs and labels 690 | // $input-error-message-padding: rem-calc(6 9 9); 691 | // $input-error-message-top: -1px; 692 | // $input-error-message-font-size: rem-calc(12); 693 | // $input-error-message-font-weight: $font-weight-normal; 694 | // $input-error-message-font-style: italic; 695 | // $input-error-message-font-color: $white; 696 | // $input-error-message-bg-color: $alert-color; 697 | // $input-error-message-font-color-alt: $oil; 698 | 699 | // We use this to style the glowing effect of inputs when focused 700 | // $glowing-effect-fade-time: .45s; 701 | // $glowing-effect-color: $input-focus-border-color; 702 | 703 | // We use this to style the transition when inputs are focused and when the glowing effect is disabled. 704 | // $input-transition-fade-time: 0.15s; 705 | // $input-transition-fade-timing-function: linear; 706 | 707 | // Select variables 708 | // $select-bg-color: $ghost; 709 | // $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%); 710 | 711 | 712 | // 12. Icon Bar 713 | // - - - - - - - - - - - - - - - - - - - - - - - - - 714 | 715 | // We use these to style the icon-bar and items 716 | // $icon-bar-bg: $oil; 717 | // $icon-bar-font-color: $white; 718 | // $icon-bar-font-color-hover: $icon-bar-font-color; 719 | // $icon-bar-font-size: 1rem; 720 | // $icon-bar-hover-color: $primary-color; 721 | // $icon-bar-icon-color: $white; 722 | // $icon-bar-icon-color-hover: $icon-bar-icon-color; 723 | // $icon-bar-icon-size: 1.875rem; 724 | // $icon-bar-image-width: 1.875rem; 725 | // $icon-bar-image-height: 1.875rem; 726 | // $icon-bar-active-color: $primary-color; 727 | // $icon-bar-item-padding: 1.25rem; 728 | 729 | // We use this to set default opacity and cursor for disabled icons. 730 | // $icon-bar-disabled-opacity: .7; 731 | 732 | // 13. Inline Lists 733 | // - - - - - - - - - - - - - - - - - - - - - - - - - 734 | 735 | // $include-html-inline-list-classes: $include-html-classes; 736 | 737 | // We use this to control the margins and padding of the inline list. 738 | // $inline-list-top-margin: 0; 739 | // $inline-list-opposite-margin: 0; 740 | // $inline-list-bottom-margin: rem-calc(17); 741 | // $inline-list-default-float-margin: rem-calc(-22); 742 | // $inline-list-default-float-list-margin: rem-calc(22); 743 | 744 | // $inline-list-padding: 0; 745 | 746 | // We use this to control the overflow of the inline list. 747 | // $inline-list-overflow: hidden; 748 | 749 | // We use this to control the list items 750 | // $inline-list-display: block; 751 | 752 | // We use this to control any elements within list items 753 | // $inline-list-children-display: block; 754 | 755 | // 14. Joyride 756 | // - - - - - - - - - - - - - - - - - - - - - - - - - 757 | 758 | // $include-html-joyride-classes: $include-html-classes; 759 | 760 | // Controlling default Joyride styles 761 | // $joyride-tip-bg: $oil; 762 | // $joyride-tip-default-width: 300px; 763 | // $joyride-tip-padding: rem-calc(18 20 24); 764 | // $joyride-tip-border: solid 1px $charcoal; 765 | // $joyride-tip-radius: 4px; 766 | // $joyride-tip-position-offset: 22px; 767 | 768 | // Here, we're setting the tip font styles 769 | // $joyride-tip-font-color: $white; 770 | // $joyride-tip-font-size: rem-calc(14); 771 | // $joyride-tip-header-weight: $font-weight-bold; 772 | 773 | // This changes the nub size 774 | // $joyride-tip-nub-size: 10px; 775 | 776 | // This adjusts the styles for the timer when its enabled 777 | // $joyride-tip-timer-width: 50px; 778 | // $joyride-tip-timer-height: 3px; 779 | // $joyride-tip-timer-color: $steel; 780 | 781 | // This changes up the styles for the close button 782 | // $joyride-tip-close-color: $monsoon; 783 | // $joyride-tip-close-size: 24px; 784 | // $joyride-tip-close-weight: $font-weight-normal; 785 | 786 | // When Joyride is filling the screen, we use this style for the bg 787 | // $joyride-screenfill: rgba(0,0,0,0.5); 788 | 789 | // 15. Keystrokes 790 | // - - - - - - - - - - - - - - - - - - - - - - - - - 791 | 792 | // $include-html-keystroke-classes: $include-html-classes; 793 | 794 | // We use these to control text styles. 795 | // $keystroke-font: "Consolas", "Menlo", "Courier", monospace; 796 | // $keystroke-font-size: inherit; 797 | // $keystroke-font-color: $jet; 798 | // $keystroke-font-color-alt: $white; 799 | // $keystroke-function-factor: -7%; 800 | 801 | // We use this to control keystroke padding. 802 | // $keystroke-padding: rem-calc(2 4 0); 803 | 804 | // We use these to control background and border styles. 805 | // $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor); 806 | // $keystroke-border-style: solid; 807 | // $keystroke-border-width: 1px; 808 | // $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor); 809 | // $keystroke-radius: $global-radius; 810 | 811 | // 16. Labels 812 | // - - - - - - - - - - - - - - - - - - - - - - - - - 813 | 814 | // $include-html-label-classes: $include-html-classes; 815 | 816 | // We use these to style the labels 817 | // $label-padding: rem-calc(4 8 4); 818 | // $label-radius: $global-radius; 819 | 820 | // We use these to style the label text 821 | // $label-font-sizing: rem-calc(11); 822 | // $label-font-weight: $font-weight-normal; 823 | // $label-font-color: $oil; 824 | // $label-font-color-alt: $white; 825 | // $label-font-family: $body-font-family; 826 | 827 | // 17. Magellan 828 | // - - - - - - - - - - - - - - - - - - - - - - - - - 829 | 830 | // $include-html-magellan-classes: $include-html-classes; 831 | 832 | // $magellan-bg: $white; 833 | // $magellan-padding: 10px; 834 | 835 | // 18. Off-canvas 836 | // - - - - - - - - - - - - - - - - - - - - - - - - - 837 | 838 | // Off Canvas Tab Bar Variables 839 | // $include-html-off-canvas-classes: $include-html-classes; 840 | 841 | // $tabbar-bg: $oil; 842 | // $tabbar-height: rem-calc(45); 843 | // $tabbar-icon-width: $tabbar-height; 844 | // $tabbar-line-height: $tabbar-height; 845 | // $tabbar-color: $white; 846 | // $tabbar-middle-padding: 0 rem-calc(10); 847 | 848 | // Off Canvas Divider Styles 849 | // $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%); 850 | // $tabbar-right-section-border: $tabbar-left-section-border; 851 | 852 | 853 | // Off Canvas Tab Bar Headers 854 | // $tabbar-header-color: $white; 855 | // $tabbar-header-weight: $font-weight-bold; 856 | // $tabbar-header-line-height: $tabbar-height; 857 | // $tabbar-header-margin: 0; 858 | 859 | // Off Canvas Menu Variables 860 | // $off-canvas-width: rem-calc(250); 861 | // $off-canvas-bg: $oil; 862 | // $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%); 863 | // $off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%); 864 | 865 | // Off Canvas Menu List Variables 866 | // $off-canvas-label-padding: .3rem rem-calc(15); 867 | // $off-canvas-label-color: $aluminum; 868 | // $off-canvas-label-text-transform: uppercase; 869 | // $off-canvas-label-font-size: rem-calc(12); 870 | // $off-canvas-label-font-weight: $font-weight-bold; 871 | // $off-canvas-label-bg: $tuatara; 872 | // $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%); 873 | // $off-canvas-label-border-bottom: none; 874 | // $off-canvas-label-margin:0; 875 | // $off-canvas-link-padding: rem-calc(10, 15); 876 | // $off-canvas-link-color: rgba($white, .7); 877 | // $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%); 878 | // $off-canvas-back-bg: #444; 879 | // $off-canvas-back-border-top: $off-canvas-label-border-top; 880 | // $off-canvas-back-border-bottom: $off-canvas-label-border-bottom; 881 | // $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%); 882 | // $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%); 883 | // $off-canvas-back-hover-border-bottom: none; 884 | 885 | // Off Canvas Menu Icon Variables 886 | // $tabbar-menu-icon-color: $white; 887 | // $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%); 888 | 889 | // $tabbar-menu-icon-text-indent: rem-calc(35); 890 | // $tabbar-menu-icon-width: $tabbar-icon-width; 891 | // $tabbar-menu-icon-height: $tabbar-height; 892 | // $tabbar-menu-icon-padding: 0; 893 | 894 | // $tabbar-hamburger-icon-width: rem-calc(16); 895 | // $tabbar-hamburger-icon-left: false; 896 | // $tabbar-hamburger-icon-top: false; 897 | // $tabbar-hamburger-icon-thickness: 1px; 898 | // $tabbar-hamburger-icon-gap: 6px; 899 | 900 | // Off Canvas Back-Link Overlay 901 | // $off-canvas-overlay-transition: background 300ms ease; 902 | // $off-canvas-overlay-cursor: pointer; 903 | // $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, .5), 4px 0 4px rgba($black, .5); 904 | // $off-canvas-overlay-background: rgba($white, .2); 905 | // $off-canvas-overlay-background-hover: rgba($white, .05); 906 | 907 | // Transition Variables 908 | // $menu-slide: "transform 500ms ease"; 909 | 910 | // 19. Orbit 911 | // - - - - - - - - - - - - - - - - - - - - - - - - - 912 | 913 | // $include-html-orbit-classes: $include-html-classes; 914 | 915 | // We use these to control the caption styles 916 | // $orbit-container-bg: none; 917 | // $orbit-caption-bg: rgba(51,51,51, .8); 918 | // $orbit-caption-font-color: $white; 919 | // $orbit-caption-font-size: rem-calc(14); 920 | // $orbit-caption-position: "bottom"; // Supported values: "bottom", "under" 921 | // $orbit-caption-padding: rem-calc(10 14); 922 | // $orbit-caption-height: auto; 923 | 924 | // We use these to control the left/right nav styles 925 | // $orbit-nav-bg: transparent; 926 | // $orbit-nav-bg-hover: rgba(0,0,0,0.3); 927 | // $orbit-nav-arrow-color: $white; 928 | // $orbit-nav-arrow-color-hover: $white; 929 | 930 | // We use these to control the timer styles 931 | // $orbit-timer-bg: rgba(255,255,255,0.3); 932 | // $orbit-timer-show-progress-bar: true; 933 | 934 | // We use these to control the bullet nav styles 935 | // $orbit-bullet-nav-color: $iron; 936 | // $orbit-bullet-nav-color-active: $aluminum; 937 | // $orbit-bullet-radius: rem-calc(9); 938 | 939 | // We use these to controls the style of slide numbers 940 | // $orbit-slide-number-bg: rgba(0,0,0,0); 941 | // $orbit-slide-number-font-color: $white; 942 | // $orbit-slide-number-padding: rem-calc(5); 943 | 944 | // Graceful Loading Wrapper and preloader 945 | // $wrapper-class: "slideshow-wrapper"; 946 | // $preloader-class: "preloader"; 947 | 948 | // Hide controls on small 949 | // $orbit-nav-hide-for-small: true; 950 | // $orbit-bullet-hide-for-small: true; 951 | // $orbit-timer-hide-for-small: true; 952 | 953 | // 20. Pagination 954 | // - - - - - - - - - - - - - - - - - - - - - - - - - 955 | 956 | // $include-pagination-classes: $include-html-classes; 957 | 958 | // We use these to control the pagination container 959 | // $pagination-height: rem-calc(24); 960 | // $pagination-margin: rem-calc(-5); 961 | 962 | // We use these to set the list-item properties 963 | // $pagination-li-float: $default-float; 964 | // $pagination-li-height: rem-calc(24); 965 | // $pagination-li-font-color: $jet; 966 | // $pagination-li-font-size: rem-calc(14); 967 | // $pagination-li-margin: rem-calc(5); 968 | 969 | // We use these for the pagination anchor links 970 | // $pagination-link-pad: rem-calc(1 10 1); 971 | // $pagination-link-font-color: $aluminum; 972 | // $pagination-link-active-bg: scale-color($white, $lightness: -10%); 973 | 974 | // We use these for disabled anchor links 975 | // $pagination-link-unavailable-cursor: default; 976 | // $pagination-link-unavailable-font-color: $aluminum; 977 | // $pagination-link-unavailable-bg-active: transparent; 978 | 979 | // We use these for currently selected anchor links 980 | // $pagination-link-current-background: $primary-color; 981 | // $pagination-link-current-font-color: $white; 982 | // $pagination-link-current-font-weight: $font-weight-bold; 983 | // $pagination-link-current-cursor: default; 984 | // $pagination-link-current-active-bg: $primary-color; 985 | 986 | // 21. Panels 987 | // - - - - - - - - - - - - - - - - - - - - - - - - - 988 | 989 | // $include-html-panel-classes: $include-html-classes; 990 | 991 | // We use these to control the background and border styles 992 | // $panel-bg: scale-color($white, $lightness: -5%); 993 | // $panel-border-style: solid; 994 | // $panel-border-size: 1px; 995 | // $callout-panel-bg: scale-color($primary-color, $lightness: 94%); 996 | 997 | // We use this % to control how much we darken things on hover 998 | // $panel-border-color: scale-color($panel-bg, $lightness: -11%); 999 | 1000 | // We use these to set default inner padding and bottom margin 1001 | // $panel-margin-bottom: rem-calc(20); 1002 | // $panel-padding: rem-calc(20); 1003 | 1004 | // We use these to set default font colors 1005 | // $panel-font-color: $oil; 1006 | // $panel-font-color-alt: $white; 1007 | 1008 | // $panel-header-adjust: true; 1009 | // $callout-panel-link-color: $primary-color; 1010 | // $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%); 1011 | 1012 | // 22. Pricing Tables 1013 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1014 | 1015 | // $include-html-pricing-classes: $include-html-classes; 1016 | 1017 | // We use this to control the border color 1018 | // $price-table-border: solid 1px $gainsboro; 1019 | 1020 | // We use this to control the bottom margin of the pricing table 1021 | // $price-table-margin-bottom: rem-calc(20); 1022 | 1023 | // We use these to control the title styles 1024 | // $price-title-bg: $oil; 1025 | // $price-title-padding: rem-calc(15 20); 1026 | // $price-title-align: center; 1027 | // $price-title-color: $smoke; 1028 | // $price-title-weight: $font-weight-normal; 1029 | // $price-title-size: rem-calc(16); 1030 | // $price-title-font-family: $body-font-family; 1031 | 1032 | // We use these to control the price styles 1033 | // $price-money-bg: $vapor; 1034 | // $price-money-padding: rem-calc(15 20); 1035 | // $price-money-align: center; 1036 | // $price-money-color: $oil; 1037 | // $price-money-weight: $font-weight-normal; 1038 | // $price-money-size: rem-calc(32); 1039 | // $price-money-font-family: $body-font-family; 1040 | 1041 | 1042 | // We use these to control the description styles 1043 | // $price-bg: $white; 1044 | // $price-desc-color: $monsoon; 1045 | // $price-desc-padding: rem-calc(15); 1046 | // $price-desc-align: center; 1047 | // $price-desc-font-size: rem-calc(12); 1048 | // $price-desc-weight: $font-weight-normal; 1049 | // $price-desc-line-height: 1.4; 1050 | // $price-desc-bottom-border: dotted 1px $gainsboro; 1051 | 1052 | // We use these to control the list item styles 1053 | // $price-item-color: $oil; 1054 | // $price-item-padding: rem-calc(15); 1055 | // $price-item-align: center; 1056 | // $price-item-font-size: rem-calc(14); 1057 | // $price-item-weight: $font-weight-normal; 1058 | // $price-item-bottom-border: dotted 1px $gainsboro; 1059 | 1060 | // We use these to control the CTA area styles 1061 | // $price-cta-bg: $white; 1062 | // $price-cta-align: center; 1063 | // $price-cta-padding: rem-calc(20 20 0); 1064 | 1065 | // 23. Progress Bar 1066 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1067 | 1068 | // $include-html-media-classes: $include-html-classes; 1069 | 1070 | // We use this to set the progress bar height 1071 | // $progress-bar-height: rem-calc(25); 1072 | // $progress-bar-color: $vapor; 1073 | 1074 | // We use these to control the border styles 1075 | // $progress-bar-border-color: scale-color($white, $lightness: 20%); 1076 | // $progress-bar-border-size: 1px; 1077 | // $progress-bar-border-style: solid; 1078 | // $progress-bar-border-radius: $global-radius; 1079 | 1080 | // We use these to control the margin & padding 1081 | // $progress-bar-margin-bottom: rem-calc(10); 1082 | 1083 | // We use these to set the meter colors 1084 | // $progress-meter-color: $primary-color; 1085 | // $progress-meter-secondary-color: $secondary-color; 1086 | // $progress-meter-success-color: $success-color; 1087 | // $progress-meter-alert-color: $alert-color; 1088 | 1089 | // 24. Range Slider 1090 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1091 | 1092 | // $include-html-range-slider-classes: $include-html-classes; 1093 | 1094 | // These variables define the slider bar styles 1095 | // $range-slider-bar-width: 100%; 1096 | // $range-slider-bar-height: rem-calc(16); 1097 | 1098 | // $range-slider-bar-border-width: 1px; 1099 | // $range-slider-bar-border-style: solid; 1100 | // $range-slider-bar-border-color: $gainsboro; 1101 | // $range-slider-radius: $global-radius; 1102 | // $range-slider-round: $global-rounded; 1103 | // $range-slider-bar-bg-color: $ghost; 1104 | // $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%); 1105 | 1106 | // Vertical bar styles 1107 | // $range-slider-vertical-bar-width: rem-calc(16); 1108 | // $range-slider-vertical-bar-height: rem-calc(200); 1109 | 1110 | // These variables define the slider handle styles 1111 | // $range-slider-handle-width: rem-calc(32); 1112 | // $range-slider-handle-height: rem-calc(22); 1113 | // $range-slider-handle-position-top: rem-calc(-5); 1114 | // $range-slider-handle-bg-color: $primary-color; 1115 | // $range-slider-handle-border-width: 1px; 1116 | // $range-slider-handle-border-style: solid; 1117 | // $range-slider-handle-border-color: none; 1118 | // $range-slider-handle-radius: $global-radius; 1119 | // $range-slider-handle-round: $global-rounded; 1120 | // $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%); 1121 | // $range-slider-handle-cursor: pointer; 1122 | 1123 | // $range-slider-disabled-opacity: .7; 1124 | // $range-slider-disabled-cursor: $cursor-disabled-value; 1125 | 1126 | // 25. Reveal 1127 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1128 | 1129 | // $include-html-reveal-classes: $include-html-classes; 1130 | 1131 | // We use these to control the style of the reveal overlay. 1132 | // $reveal-overlay-bg: rgba($black, .45); 1133 | // $reveal-overlay-bg-old: $black; 1134 | 1135 | // We use these to control the style of the modal itself. 1136 | // $reveal-modal-bg: $white; 1137 | // $reveal-position-top: rem-calc(100); 1138 | // $reveal-default-width: 80%; 1139 | // $reveal-max-width: $row-width; 1140 | // $reveal-modal-padding: rem-calc(20); 1141 | // $reveal-box-shadow: 0 0 10px rgba($black,.4); 1142 | 1143 | // We use these to style the reveal close button 1144 | // $reveal-close-font-size: rem-calc(40); 1145 | // $reveal-close-top: rem-calc(10); 1146 | // $reveal-close-side: rem-calc(22); 1147 | // $reveal-close-color: $base; 1148 | // $reveal-close-weight: $font-weight-bold; 1149 | 1150 | // We use this to set the default radius used throughout the core. 1151 | // $reveal-radius: $global-radius; 1152 | // $reveal-round: $global-rounded; 1153 | 1154 | // We use these to control the modal border 1155 | // $reveal-border-style: solid; 1156 | // $reveal-border-width: 1px; 1157 | // $reveal-border-color: $steel; 1158 | 1159 | // $reveal-modal-class: "reveal-modal"; 1160 | // $close-reveal-modal-class: "close-reveal-modal"; 1161 | 1162 | // 26. Side Nav 1163 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1164 | 1165 | // $include-html-nav-classes: $include-html-classes; 1166 | 1167 | // We use this to control padding. 1168 | // $side-nav-padding: rem-calc(14 0); 1169 | 1170 | // We use these to control list styles. 1171 | // $side-nav-list-type: none; 1172 | // $side-nav-list-position: outside; 1173 | // $side-nav-list-margin: rem-calc(0 0 7 0); 1174 | 1175 | // We use these to control link styles. 1176 | // $side-nav-link-color: $primary-color; 1177 | // $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%); 1178 | // $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%); 1179 | // $side-nav-link-bg-hover: hsla(0, 0, 0, .025); 1180 | // $side-nav-link-margin: 0; 1181 | // $side-nav-link-padding: rem-calc(7 14); 1182 | // $side-nav-font-size: rem-calc(14); 1183 | // $side-nav-font-weight: $font-weight-normal; 1184 | // $side-nav-font-weight-active: $side-nav-font-weight; 1185 | // $side-nav-font-family: $body-font-family; 1186 | // $side-nav-font-family-active: $side-nav-font-family; 1187 | 1188 | // We use these to control heading styles. 1189 | // $side-nav-heading-color: $side-nav-link-color; 1190 | // $side-nav-heading-font-size: $side-nav-font-size; 1191 | // $side-nav-heading-font-weight: bold; 1192 | // $side-nav-heading-text-transform: uppercase; 1193 | 1194 | // We use these to control border styles 1195 | // $side-nav-divider-size: 1px; 1196 | // $side-nav-divider-style: solid; 1197 | // $side-nav-divider-color: scale-color($white, $lightness: 10%); 1198 | 1199 | // 27. Split Buttons 1200 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1201 | 1202 | // $include-html-button-classes: $include-html-classes; 1203 | 1204 | // We use these to control different shared styles for Split Buttons 1205 | // $split-button-function-factor: 10%; 1206 | // $split-button-pip-color: $white; 1207 | // $split-button-span-border-color: rgba(255,255,255,0.5); 1208 | // $split-button-pip-color-alt: $oil; 1209 | // $split-button-active-bg-tint: rgba(0,0,0,0.1); 1210 | 1211 | // We use these to control tiny split buttons 1212 | // $split-button-padding-tny: $button-pip-tny * 10; 1213 | // $split-button-span-width-tny: $button-pip-tny * 6; 1214 | // $split-button-pip-size-tny: $button-pip-tny; 1215 | // $split-button-pip-top-tny: $button-pip-tny * 2; 1216 | // $split-button-pip-default-float-tny: rem-calc(-6); 1217 | 1218 | // We use these to control small split buttons 1219 | // $split-button-padding-sml: $button-pip-sml * 10; 1220 | // $split-button-span-width-sml: $button-pip-sml * 6; 1221 | // $split-button-pip-size-sml: $button-pip-sml; 1222 | // $split-button-pip-top-sml: $button-pip-sml * 1.5; 1223 | // $split-button-pip-default-float-sml: rem-calc(-6); 1224 | 1225 | // We use these to control medium split buttons 1226 | // $split-button-padding-med: $button-pip-med * 9; 1227 | // $split-button-span-width-med: $button-pip-med * 5.5; 1228 | // $split-button-pip-size-med: $button-pip-med - rem-calc(3); 1229 | // $split-button-pip-top-med: $button-pip-med * 1.5; 1230 | // $split-button-pip-default-float-med: rem-calc(-6); 1231 | 1232 | // We use these to control large split buttons 1233 | // $split-button-padding-lrg: $button-pip-lrg * 8; 1234 | // $split-button-span-width-lrg: $button-pip-lrg * 5; 1235 | // $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); 1236 | // $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5); 1237 | // $split-button-pip-default-float-lrg: rem-calc(-6); 1238 | 1239 | // 28. Sub Nav 1240 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1241 | 1242 | // $include-html-nav-classes: $include-html-classes; 1243 | 1244 | // We use these to control margin and padding 1245 | // $sub-nav-list-margin: rem-calc(-4 0 18); 1246 | // $sub-nav-list-padding-top: rem-calc(4); 1247 | 1248 | // We use this to control the definition 1249 | // $sub-nav-font-family: $body-font-family; 1250 | // $sub-nav-font-size: rem-calc(14); 1251 | // $sub-nav-font-color: $aluminum; 1252 | // $sub-nav-font-weight: $font-weight-normal; 1253 | // $sub-nav-text-decoration: none; 1254 | // $sub-nav-padding: rem-calc(3 16); 1255 | // $sub-nav-border-radius: 3px; 1256 | // $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%); 1257 | 1258 | 1259 | // We use these to control the active item styles 1260 | 1261 | // $sub-nav-active-font-weight: $font-weight-normal; 1262 | // $sub-nav-active-bg: $primary-color; 1263 | // $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%); 1264 | // $sub-nav-active-color: $white; 1265 | // $sub-nav-active-padding: $sub-nav-padding; 1266 | // $sub-nav-active-cursor: default; 1267 | 1268 | // $sub-nav-item-divider: ""; 1269 | // $sub-nav-item-divider-margin: rem-calc(12); 1270 | 1271 | // 29. Switch 1272 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1273 | 1274 | // $include-html-form-classes: $include-html-classes; 1275 | 1276 | // Controlling background color for the switch container 1277 | // $switch-bg: $gainsboro; 1278 | 1279 | // We use these to control the switch heights for our default classes 1280 | // $switch-height-tny: 1.5rem; 1281 | // $switch-height-sml: 1.75rem; 1282 | // $switch-height-med: 2rem; 1283 | // $switch-height-lrg: 2.5rem; 1284 | // $switch-bottom-margin: 1.5rem; 1285 | 1286 | // We use these to style the switch-paddle 1287 | // $switch-paddle-bg: $white; 1288 | // $switch-paddle-transition-speed: .15s; 1289 | // $switch-paddle-transition-ease: ease-out; 1290 | // $switch-active-color: $primary-color; 1291 | 1292 | // 30. Tables 1293 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1294 | 1295 | // $include-html-table-classes: $include-html-classes; 1296 | 1297 | // These control the background color for the table and even rows 1298 | // $table-bg: $white; 1299 | // $table-even-row-bg: $snow; 1300 | 1301 | // These control the table cell border style 1302 | // $table-border-style: solid; 1303 | // $table-border-size: 1px; 1304 | // $table-border-color: $gainsboro; 1305 | 1306 | // These control the table head styles 1307 | // $table-head-bg: $white-smoke; 1308 | // $table-head-font-size: rem-calc(14); 1309 | // $table-head-font-color: $jet; 1310 | // $table-head-font-weight: $font-weight-bold; 1311 | // $table-head-padding: rem-calc(8 10 10); 1312 | 1313 | // These control the table foot styles 1314 | // $table-foot-bg: $table-head-bg; 1315 | // $table-foot-font-size: $table-head-font-size; 1316 | // $table-foot-font-color: $table-head-font-color; 1317 | // $table-foot-font-weight: $table-head-font-weight; 1318 | // $table-foot-padding: $table-head-padding; 1319 | 1320 | // These control the caption 1321 | // $table-caption-bg: transparent; 1322 | // $table-caption-font-color: $table-head-font-color; 1323 | // $table-caption-font-size: rem-calc(16); 1324 | // $table-caption-font-weight: bold; 1325 | 1326 | // These control the row padding and font styles 1327 | // $table-row-padding: rem-calc(9 10); 1328 | // $table-row-font-size: rem-calc(14); 1329 | // $table-row-font-color: $jet; 1330 | // $table-line-height: rem-calc(18); 1331 | 1332 | // These are for controlling the layout, display and margin of tables 1333 | // $table-layout: auto; 1334 | // $table-display: table-cell; 1335 | // $table-margin-bottom: rem-calc(20); 1336 | 1337 | 1338 | // 31. Tabs 1339 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1340 | 1341 | // $include-html-tabs-classes: $include-html-classes; 1342 | 1343 | // $tabs-navigation-padding: rem-calc(16); 1344 | // $tabs-navigation-bg-color: $silver; 1345 | // $tabs-navigation-active-bg-color: $white; 1346 | // $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%); 1347 | // $tabs-navigation-font-color: $jet; 1348 | // $tabs-navigation-active-font-color: $tabs-navigation-font-color; 1349 | // $tabs-navigation-font-size: rem-calc(16); 1350 | // $tabs-navigation-font-family: $body-font-family; 1351 | 1352 | // $tabs-content-margin-bottom: rem-calc(24); 1353 | // $tabs-content-padding: ($column-gutter/2); 1354 | 1355 | // $tabs-vertical-navigation-margin-bottom: 1.25rem; 1356 | 1357 | // 32. Thumbnails 1358 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1359 | 1360 | // $include-html-media-classes: $include-html-classes; 1361 | 1362 | // We use these to control border styles 1363 | // $thumb-border-style: solid; 1364 | // $thumb-border-width: 4px; 1365 | // $thumb-border-color: $white; 1366 | // $thumb-box-shadow: 0 0 0 1px rgba($black,.2); 1367 | // $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5); 1368 | 1369 | // Radius and transition speed for thumbs 1370 | // $thumb-radius: $global-radius; 1371 | // $thumb-transition-speed: 200ms; 1372 | 1373 | // 33. Tooltips 1374 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1375 | 1376 | // $include-html-tooltip-classes: $include-html-classes; 1377 | 1378 | // $has-tip-border-bottom: dotted 1px $iron; 1379 | // $has-tip-font-weight: $font-weight-bold; 1380 | // $has-tip-font-color: $oil; 1381 | // $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%); 1382 | // $has-tip-font-color-hover: $primary-color; 1383 | // $has-tip-cursor-type: help; 1384 | 1385 | // $tooltip-padding: rem-calc(12); 1386 | // $tooltip-bg: $oil; 1387 | // $tooltip-font-size: rem-calc(14); 1388 | // $tooltip-font-weight: $font-weight-normal; 1389 | // $tooltip-font-color: $white; 1390 | // $tooltip-line-height: 1.3; 1391 | // $tooltip-close-font-size: rem-calc(10); 1392 | // $tooltip-close-font-weight: $font-weight-normal; 1393 | // $tooltip-close-font-color: $monsoon; 1394 | // $tooltip-font-size-sml: rem-calc(14); 1395 | // $tooltip-radius: $global-radius; 1396 | // $tooltip-rounded: $global-rounded; 1397 | // $tooltip-pip-size: 5px; 1398 | // $tooltip-max-width: 300px; 1399 | 1400 | // 34. Top Bar 1401 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1402 | 1403 | // $include-html-top-bar-classes: $include-html-classes; 1404 | 1405 | // Background color for the top bar 1406 | // $topbar-bg-color: $oil; 1407 | // $topbar-bg: $topbar-bg-color; 1408 | 1409 | // Height and margin 1410 | // $topbar-height: rem-calc(45); 1411 | // $topbar-margin-bottom: 0; 1412 | 1413 | // Controlling the styles for the title in the top bar 1414 | // $topbar-title-weight: $font-weight-normal; 1415 | // $topbar-title-font-size: rem-calc(17); 1416 | 1417 | // Set the link colors and styles for top-level nav 1418 | // $topbar-link-color: $white; 1419 | // $topbar-link-color-hover: $white; 1420 | // $topbar-link-color-active: $white; 1421 | // $topbar-link-color-active-hover: $white; 1422 | // $topbar-link-weight: $font-weight-normal; 1423 | // $topbar-link-font-size: rem-calc(13); 1424 | // $topbar-link-hover-lightness: -10%; // Darken by 10% 1425 | // $topbar-link-bg: $topbar-bg; 1426 | // $topbar-link-bg-hover: $jet; 1427 | // $topbar-link-bg-color-hover: $charcoal; 1428 | // $topbar-link-bg-active: $primary-color; 1429 | // $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%); 1430 | // $topbar-link-font-family: $body-font-family; 1431 | // $topbar-link-text-transform: none; 1432 | // $topbar-link-padding: ($topbar-height / 3); 1433 | // $topbar-back-link-size: rem-calc(18); 1434 | // $topbar-link-dropdown-padding: rem-calc(20); 1435 | // $topbar-button-font-size: .75rem; 1436 | // $topbar-button-top: 7px; 1437 | 1438 | // Style the top bar dropdown elements 1439 | // $topbar-dropdown-bg: $oil; 1440 | // $topbar-dropdown-link-color: $white; 1441 | // $topbar-dropdown-link-color-hover: $topbar-link-color-hover; 1442 | // $topbar-dropdown-link-bg: $oil; 1443 | // $topbar-dropdown-link-bg-hover: $jet; 1444 | // $topbar-dropdown-link-weight: $font-weight-normal; 1445 | // $topbar-dropdown-toggle-size: 5px; 1446 | // $topbar-dropdown-toggle-color: $white; 1447 | // $topbar-dropdown-toggle-alpha: .4; 1448 | 1449 | // $topbar-dropdown-label-color: $monsoon; 1450 | // $topbar-dropdown-label-text-transform: uppercase; 1451 | // $topbar-dropdown-label-font-weight: $font-weight-bold; 1452 | // $topbar-dropdown-label-font-size: rem-calc(10); 1453 | // $topbar-dropdown-label-bg: $oil; 1454 | 1455 | // Top menu icon styles 1456 | // $topbar-menu-link-transform: uppercase; 1457 | // $topbar-menu-link-font-size: rem-calc(13); 1458 | // $topbar-menu-link-weight: $font-weight-bold; 1459 | // $topbar-menu-link-color: $white; 1460 | // $topbar-menu-icon-color: $white; 1461 | // $topbar-menu-link-color-toggled: $jumbo; 1462 | // $topbar-menu-icon-color-toggled: $jumbo; 1463 | // $topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon 1464 | 1465 | // Transitions and breakpoint styles 1466 | // $topbar-transition-speed: 300ms; 1467 | // Using rem-calc for the below breakpoint causes issues with top bar 1468 | // $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout 1469 | // $topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})"; 1470 | 1471 | // Top-bar input styles 1472 | // $topbar-input-height: rem-calc(28); 1473 | 1474 | // Divider Styles 1475 | // $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%); 1476 | // $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%); 1477 | 1478 | // Sticky Class 1479 | // $topbar-sticky-class: ".sticky"; 1480 | // $topbar-arrows: true; //Set false to remove the triangle icon from the menu item 1481 | // $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li// 1482 | 1483 | // 36. Visibility Classes 1484 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1485 | 1486 | // $include-html-visibility-classes: $include-html-classes; 1487 | // $include-accessibility-classes: true; 1488 | // $include-table-visibility-classes: true; 1489 | // $include-legacy-visibility-classes: true; 1490 | -------------------------------------------------------------------------------- /src/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | // ** This is where you can put Sass that is used globally across the entire app ** // 2 | @import "mixins"; 3 | 4 | // Class: circle 5 | // Description: Used to make a circular element. (e.g Change a square to a circle) 6 | .circle { 7 | @include circle; 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/main.scss: -------------------------------------------------------------------------------- 1 | // Include global Sass files needed to style the app. You shouldn't have to change anything here. 2 | @import "../../vendor/foundation/scss/normalize"; 3 | @import "settings"; 4 | @import "../../vendor/foundation/scss/foundation"; 5 | @import "font-awesome"; 6 | @import "mixins"; 7 | @import "shared"; 8 | 9 | // Include custom styles per component. If you add a new component, you should the path to its styles file here. 10 | @import "../app/about/styles/styles"; 11 | @import "../app/home/styles/styles"; 12 | @import "../app/layout/styles/styles"; 13 | @import "../app/topbar/styles/styles"; 14 | -------------------------------------------------------------------------------- /vendor.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The `vendor_files.js` property in Gruntfile.js holds files to be automatically 3 | * concatenated and minified with our project source files. 4 | * 5 | * NOTE: Use the *.min.js version when compiling for production. 6 | * Otherwise, use the normal *.js version for development 7 | * 8 | */ 9 | 10 | module.exports = { 11 | js: [ 12 | // utility libraries 13 | 'vendor/jquery/dist/jquery.min.js', 14 | 15 | // Angular components 16 | 'vendor/angular/angular.js', 17 | 'vendor/angular-ui-router/release/angular-ui-router.min.js', 18 | 'vendor/angular-resource/angular-resource.min.js', 19 | 'vendor/angular-mocks/angular-mocks.js', 20 | 21 | // Local storage 22 | 'vendor/angular-local-storage/dist/angular-local-storage.min.js', 23 | 24 | // Modernizer 25 | 'vendor/modernizr/modernizr.js', 26 | 27 | // Foundation 28 | 'vendor/foundation/js/foundation.min.js' 29 | ], 30 | css: [ ], 31 | assets: [ ] 32 | }; 33 | --------------------------------------------------------------------------------