├── devServer └── routes.js ├── app ├── components │ ├── demoComponent │ │ ├── demoComponent.html │ │ └── demoComponentDirective.js │ └── home.html ├── styles │ ├── app.scss │ └── _settings.scss ├── app.js └── index.html ├── .gitignore ├── bower.json ├── package.json ├── server.js ├── README.md └── gulpfile.js /devServer/routes.js: -------------------------------------------------------------------------------- 1 | module.exports = function(app) { 2 | 3 | }; -------------------------------------------------------------------------------- /app/components/demoComponent/demoComponent.html: -------------------------------------------------------------------------------- 1 |

This is a demo component.

-------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /bower_components 3 | /node_modules 4 | /dist.* 5 | *.DS_Store 6 | -------------------------------------------------------------------------------- /app/styles/app.scss: -------------------------------------------------------------------------------- 1 | @import "settings"; 2 | @import "../../bower_components/foundation/scss/foundation"; -------------------------------------------------------------------------------- /app/components/home.html: -------------------------------------------------------------------------------- 1 | 2 | Home page. 3 | 4 |

5 |

6 |

-------------------------------------------------------------------------------- /app/components/demoComponent/demoComponentDirective.js: -------------------------------------------------------------------------------- 1 | angular.module('healthyGulpAngularApp') 2 | 3 | .directive('demoComponent', [function() { 4 | return { 5 | restrict: 'A', 6 | templateUrl: 'components/demoComponent/demoComponent.html' 7 | }; 8 | }]); -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | angular.module('healthyGulpAngularApp', ['ui.router']) 2 | 3 | .config(['$stateProvider', '$urlRouterProvider', 4 | function($stateProvider, $urlRouterProvider) { 5 | 6 | $urlRouterProvider.otherwise('/'); 7 | 8 | $stateProvider 9 | 10 | .state('home', { 11 | url: '/', 12 | templateUrl: 'components/home.html' 13 | }); 14 | 15 | }]); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "healthy-gulp-angular", 3 | "version": "0.0.0", 4 | "authors": "", 5 | "private": true, 6 | "dependencies": { 7 | "angular": "^1.3.12", 8 | "angular-ui-router": "^0.2.11", 9 | "angular-animate": "^1.3.0", 10 | "foundation": "~5.5.1" 11 | }, 12 | "devDependencies": { 13 | "angular-mocks": "^1.2.23" 14 | }, 15 | "overrides": { 16 | "foundation": { 17 | "main": "js/foundation.js" 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Healthy Gulp Angular 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "healthy-gulp-angular", 3 | "private": true, 4 | "version": "0.0.0", 5 | "repository": "", 6 | "devDependencies": { 7 | "body-parser": "^1.5.2", 8 | "bower": "^1.3.1", 9 | "del": "^1.1.1", 10 | "event-stream": "^3.2.2", 11 | "express": "^4.7.2", 12 | "gulp": "^3.8.10", 13 | "gulp-angular-filesort": "^1.0.4", 14 | "gulp-concat": "^2.4.3", 15 | "gulp-htmlhint": "0.0.9", 16 | "gulp-htmlmin": "^1.0.0", 17 | "gulp-inject": "^1.1.1", 18 | "gulp-jshint": "^1.9.2", 19 | "gulp-livereload": "^3.7.0", 20 | "gulp-load-plugins": "^0.8.0", 21 | "gulp-minify-css": "^0.4.5", 22 | "gulp-ng-html2js": "^0.1.8", 23 | "gulp-nodemon": "^1.0.5", 24 | "gulp-order": "^1.1.1", 25 | "gulp-print": "^1.1.0", 26 | "gulp-rename": "^1.2.0", 27 | "gulp-sass": "^1.3.2", 28 | "gulp-sourcemaps": "^1.3.0", 29 | "gulp-uglify": "^1.1.0", 30 | "jshint-stylish": "^1.0.0", 31 | "karma": "^0.10", 32 | "karma-junit-reporter": "^0.2.2", 33 | "main-bower-files": "^2.5.0", 34 | "method-override": "^2.1.2", 35 | "protractor": "^1.1.1", 36 | "q": "^1.1.2", 37 | "shelljs": "^0.2.6" 38 | }, 39 | "scripts": { 40 | "postinstall": "bower install", 41 | "prestart": "npm install", 42 | "start": "node server.js" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | var bodyParser = require('body-parser'); 4 | var methodOverride = require('method-override'); 5 | 6 | var port = process.env.PORT || 8080; // set our port 7 | var staticdir = process.env.NODE_ENV === 'production' ? 'dist.prod' : 'dist.dev'; // get static files dir 8 | 9 | // get all data/stuff of the body (POST) parameters 10 | app.use(bodyParser.json()); // parse application/json 11 | //app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json 12 | //app.use(bodyParser.urlencoded({ extended: true })); // parse application/x-www-form-urlencoded 13 | 14 | app.use(methodOverride('X-HTTP-Method-Override')); // override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT 15 | app.use(express.static(__dirname + '/' + staticdir)); // set the static files location /public/img will be /img for users 16 | 17 | // routes ================================================== 18 | require('./devServer/routes')(app); // configure our routes 19 | 20 | // start app =============================================== 21 | app.listen(port); // startup our app at http://localhost:8080 22 | console.log('Starting sever on port ' + port); // shoutout to the user 23 | exports = module.exports = app; // expose app -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project is a starting point for AngularJS projects using the [Gulp](http://gulpjs.com/) streaming build system. Almost everything important is in [gulpfile.js](https://github.com/paislee/healthy-gulp-angular/blob/master/gulpfile.js). 2 | 3 | For a full discussion of the setup, please refer to the companion [blog post](http://paislee.io/a-healthy-gulp-setup-for-angularjs-projects). 4 | 5 | ## Installation 6 | 7 | Before running any Gulp tasks: 8 | 9 | 1. Check out this repository 10 | 2. Ensure you have node installed 11 | 3. Run `npm install` in the root directory (this will install bower dependencies too) 12 | 4. For livereload functionality, install the [livereload Chrome extension](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) 13 | 14 | ## Project Structure 15 | 16 | The project ships with a directory structure like: 17 | 18 | /healthy-gulp-angular 19 | | 20 | |---- package.json 21 | | 22 | |---- bower.json 23 | | 24 | |---- gulpfile.js 25 | | 26 | |---- /app 27 | | | 28 | | |---- index.html 29 | | |---- app.js 30 | | | 31 | | |---- /styles 32 | | | | 33 | | | |---- _settings.scss 34 | | | |---- app.scss 35 | | | 36 | | |---- /components 37 | | | 38 | | ... 39 | | 40 | |---- server.js 41 | | 42 | |---- /devServer 43 | | | 44 | | |---- ... 45 | | 46 | |---- (/dist.dev) 47 | | 48 | |---- (/dist.prod) 49 | 50 | 51 | __Let's break this down..__ 52 | 53 | #### [package.json](https://github.com/paislee/healthy-gulp-angular/blob/master/package.json) 54 | 55 | Server-side (command-line) dependencies. 56 | 57 | #### [bower.json](https://github.com/paislee/healthy-gulp-angular/blob/master/bower.json) 58 | 59 | Client-side (browser) dependencies. 60 | 61 | #### [gulpfile.js](https://github.com/paislee/healthy-gulp-angular/blob/master/gulpfile.js) 62 | 63 | Where all the Gulp streams and tasks are specified. Tasks are outlined below. This file is discussed in detail in the [blog post](http://paislee.io/a-healthy-gulp-setup-for-angularjs-projects). 64 | 65 | #### [/app](https://github.com/paislee/healthy-gulp-angular/blob/master/app) 66 | 67 | All first-party application source code lives here, including HTML, scripts, and styles of whatever flavor. 68 | 69 | #### [/app/index.html](https://github.com/paislee/healthy-gulp-angular/blob/master/app/index.html) 70 | 71 | The single page app "shell page". Adapted from [Angular Seed](https://github.com/angular/angular-seed/blob/master/app/index.html). All sources are automatically wired in with gulp-inject. 72 | 73 | #### [/app/app.js](https://github.com/paislee/healthy-gulp-angular/blob/master/app/app.js) 74 | 75 | The app's main angular module is defined here. This file is always loaded first with gulp-angular-filesort. 76 | 77 | #### [/app/components](https://github.com/paislee/healthy-gulp-angular/blob/master/app/components) 78 | 79 | I like to group my angular scripts by comonent. Each sub-directory here typically contains a directive and a matching html partial. 80 | 81 | #### [/app/styles](https://github.com/paislee/healthy-gulp-angular/blob/master/app/styles) 82 | 83 | Custom app styles (I use SASS) live here. There's also a foundation settings file. 84 | 85 | #### [server.js](https://github.com/paislee/healthy-gulp-angular/blob/master/server.js) 86 | 87 | This is the entrypoint for the ExpressJS development server. It respects the environment variable `NODE_ENV`, taking its value as the directory out of which to serve static resources. It defaults to `dist.dev` to serve development files, and also accepts `dist.prod` to serve the production files. 88 | 89 | #### [/devServer](https://github.com/paislee/healthy-gulp-angular/blob/master/devServer) 90 | 91 | The scripts for the development server. I'll typically put mock API responses in here. 92 | 93 | ### Processed Sources 94 | 95 | The gulp tasks listed below deal with taking sources from /app and "compiling" them for either development or production. `*-dev` tasks will output to /dist.dev, and `*-prod` will output to /dist.prod. Here's an overview of the directory structures for each: 96 | 97 | ### /dist.dev 98 | 99 | Sources built for development. Styles are compiled to CSS. Everything else from /app is validated and moved directly in here. Nothing is concatenated, uglified, or minified. Vendor scripts are moved in as well. 100 | 101 | /dist.dev 102 | | 103 | |---- /bower_components 104 | | 105 | |---- /components 106 | | | 107 | | ... 108 | | 109 | |---- /styles 110 | | | 111 | | ... 112 | | 113 | |---- app.js 114 | | 115 | |---- index.html 116 | 117 | ### /dist.prod 118 | 119 | Sources built for production. Everything is validated, things are concatenated and uglified. HTML partials are pre-loaded into the angular template cache with gulp-ng-html2js. 120 | 121 | /dist.prod 122 | | 123 | |---- /scripts 124 | | | 125 | | |---- app.min.js 126 | | |---- vendor.min.js 127 | | 128 | |---- /styles 129 | | | 130 | | |---- app.min.css 131 | | 132 | |---- index.html 133 | 134 | Pretty self-explanatory. 135 | 136 | ## Gulp Tasks 137 | 138 | All of the following are available from the command line. 139 | 140 | ### Essential ones 141 | 142 | These tasks I use as part of my regular developments and deploy scripts: 143 | 144 | - __`gulp watch-dev`__ Clean, build, and watch live changes to the dev environment. Built sources are served directly by the dev server from /dist.dev. 145 | - __`gulp watch-prod`__ Clean, build, and watch live changes to the prod environment. Built sources are served directly by the dev server from /dist.prod. 146 | - __`gulp`__ Default task builds for prod. Built sources are put into /dist.prod, and can be served directly. 147 | 148 | ### Sub-tasks 149 | 150 | All the subtasks can alo be run from the command line: 151 | 152 | __HTML__ 153 | 154 | - __`gulp validate-partials`__ Checks html source files for syntax errors. 155 | - __`gulp validate-index`__ Checks index.html for syntax errors. 156 | - __`gulp build-partials-dev`__ Moves html source files into the dev environment. 157 | 158 | __Scripts__ 159 | 160 | - __`gulp convert-partials-to-js`__ Converts partials to javascript using html2js. 161 | - __`gulp validate-devserver-scripts`__ Runs jshint on the dev server scripts. 162 | - __`gulp validate-app-scripts`__ Runs jshint on the app scripts. 163 | - __`gulp build-app-scripts-dev`__ Moves app scripts into the dev environment. 164 | - __`gulp build-app-scripts-prod`__ Concatenates, uglifies, and moves app scripts and partials into the prod environment. 165 | 166 | __Styles__ 167 | 168 | - __`gulp build-styles-dev`__ Compiles app sass and moves to the dev environment. 169 | - __`gulp build-styles-prod`__ Compiles and minifies app sass to css and moves to the prod environment. 170 | - __`gulp build-vendor-scripts-dev`__ Moves vendor scripts into the dev environment. 171 | - __`gulp build-vendor-scripts-prod`__ Concatenates, uglifies, and moves vendor scripts into the prod environment. 172 | 173 | __Index__ 174 | - __`gulp build-index-dev`__ Validates and injects sources into index.html and moves it to the dev environment. 175 | - __`gulp build-index-prod`__ Validates and injects sources into index.html, minifies and moves it to the dev environment. 176 | 177 | __Everything__ 178 | 179 | - __`gulp build-app-dev`__ Builds a complete dev environment. 180 | - __`gulp build-app-prod`__ Builds a complete prod environment. 181 | - __`gulp clean-build-app-dev`__ Cleans and builds a complete dev environment. 182 | - __`gulp clean-build-app-prod`__ Cleans and builds a complete prod environment. 183 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var plugins = require('gulp-load-plugins')(); 3 | var del = require('del'); 4 | var es = require('event-stream'); 5 | var bowerFiles = require('main-bower-files'); 6 | var print = require('gulp-print'); 7 | var Q = require('q'); 8 | 9 | // == PATH STRINGS ======== 10 | 11 | var paths = { 12 | scripts: 'app/**/*.js', 13 | styles: ['./app/**/*.css', './app/**/*.scss'], 14 | images: './images/**/*', 15 | index: './app/index.html', 16 | partials: ['app/**/*.html', '!app/index.html'], 17 | distDev: './dist.dev', 18 | distProd: './dist.prod', 19 | distScriptsProd: './dist.prod/scripts', 20 | scriptsDevServer: 'devServer/**/*.js' 21 | }; 22 | 23 | // == PIPE SEGMENTS ======== 24 | 25 | var pipes = {}; 26 | 27 | pipes.orderedVendorScripts = function() { 28 | return plugins.order(['jquery.js', 'angular.js']); 29 | }; 30 | 31 | pipes.orderedAppScripts = function() { 32 | return plugins.angularFilesort(); 33 | }; 34 | 35 | pipes.minifiedFileName = function() { 36 | return plugins.rename(function (path) { 37 | path.extname = '.min' + path.extname; 38 | }); 39 | }; 40 | 41 | pipes.validatedAppScripts = function() { 42 | return gulp.src(paths.scripts) 43 | .pipe(plugins.jshint()) 44 | .pipe(plugins.jshint.reporter('jshint-stylish')); 45 | }; 46 | 47 | pipes.builtAppScriptsDev = function() { 48 | return pipes.validatedAppScripts() 49 | .pipe(gulp.dest(paths.distDev)); 50 | }; 51 | 52 | pipes.builtAppScriptsProd = function() { 53 | var scriptedPartials = pipes.scriptedPartials(); 54 | var validatedAppScripts = pipes.validatedAppScripts(); 55 | 56 | return es.merge(scriptedPartials, validatedAppScripts) 57 | .pipe(pipes.orderedAppScripts()) 58 | .pipe(plugins.sourcemaps.init()) 59 | .pipe(plugins.concat('app.min.js')) 60 | .pipe(plugins.uglify()) 61 | .pipe(plugins.sourcemaps.write()) 62 | .pipe(gulp.dest(paths.distScriptsProd)); 63 | }; 64 | 65 | pipes.builtVendorScriptsDev = function() { 66 | return gulp.src(bowerFiles()) 67 | .pipe(gulp.dest('dist.dev/bower_components')); 68 | }; 69 | 70 | pipes.builtVendorScriptsProd = function() { 71 | return gulp.src(bowerFiles('**/*.js')) 72 | .pipe(pipes.orderedVendorScripts()) 73 | .pipe(plugins.concat('vendor.min.js')) 74 | .pipe(plugins.uglify()) 75 | .pipe(gulp.dest(paths.distScriptsProd)); 76 | }; 77 | 78 | pipes.validatedDevServerScripts = function() { 79 | return gulp.src(paths.scriptsDevServer) 80 | .pipe(plugins.jshint()) 81 | .pipe(plugins.jshint.reporter('jshint-stylish')); 82 | }; 83 | 84 | pipes.validatedPartials = function() { 85 | return gulp.src(paths.partials) 86 | .pipe(plugins.htmlhint({'doctype-first': false})) 87 | .pipe(plugins.htmlhint.reporter()); 88 | }; 89 | 90 | pipes.builtPartialsDev = function() { 91 | return pipes.validatedPartials() 92 | .pipe(gulp.dest(paths.distDev)); 93 | }; 94 | 95 | pipes.scriptedPartials = function() { 96 | return pipes.validatedPartials() 97 | .pipe(plugins.htmlhint.failReporter()) 98 | .pipe(plugins.htmlmin({collapseWhitespace: true, removeComments: true})) 99 | .pipe(plugins.ngHtml2js({ 100 | moduleName: "healthyGulpAngularApp" 101 | })); 102 | }; 103 | 104 | pipes.builtStylesDev = function() { 105 | return gulp.src(paths.styles) 106 | .pipe(plugins.sass()) 107 | .pipe(gulp.dest(paths.distDev)); 108 | }; 109 | 110 | pipes.builtStylesProd = function() { 111 | return gulp.src(paths.styles) 112 | .pipe(plugins.sourcemaps.init()) 113 | .pipe(plugins.sass()) 114 | .pipe(plugins.minifyCss()) 115 | .pipe(plugins.sourcemaps.write()) 116 | .pipe(pipes.minifiedFileName()) 117 | .pipe(gulp.dest(paths.distProd)); 118 | }; 119 | 120 | pipes.processedImagesDev = function() { 121 | return gulp.src(paths.images) 122 | .pipe(gulp.dest(paths.distDev + '/images/')); 123 | }; 124 | 125 | pipes.processedImagesProd = function() { 126 | return gulp.src(paths.images) 127 | .pipe(gulp.dest(paths.distProd + '/images/')); 128 | }; 129 | 130 | pipes.validatedIndex = function() { 131 | return gulp.src(paths.index) 132 | .pipe(plugins.htmlhint()) 133 | .pipe(plugins.htmlhint.reporter()); 134 | }; 135 | 136 | pipes.builtIndexDev = function() { 137 | 138 | var orderedVendorScripts = pipes.builtVendorScriptsDev() 139 | .pipe(pipes.orderedVendorScripts()); 140 | 141 | var orderedAppScripts = pipes.builtAppScriptsDev() 142 | .pipe(pipes.orderedAppScripts()); 143 | 144 | var appStyles = pipes.builtStylesDev(); 145 | 146 | return pipes.validatedIndex() 147 | .pipe(gulp.dest(paths.distDev)) // write first to get relative path for inject 148 | .pipe(plugins.inject(orderedVendorScripts, {relative: true, name: 'bower'})) 149 | .pipe(plugins.inject(orderedAppScripts, {relative: true})) 150 | .pipe(plugins.inject(appStyles, {relative: true})) 151 | .pipe(gulp.dest(paths.distDev)); 152 | }; 153 | 154 | pipes.builtIndexProd = function() { 155 | 156 | var vendorScripts = pipes.builtVendorScriptsProd(); 157 | var appScripts = pipes.builtAppScriptsProd(); 158 | var appStyles = pipes.builtStylesProd(); 159 | 160 | return pipes.validatedIndex() 161 | .pipe(gulp.dest(paths.distProd)) // write first to get relative path for inject 162 | .pipe(plugins.inject(vendorScripts, {relative: true, name: 'bower'})) 163 | .pipe(plugins.inject(appScripts, {relative: true})) 164 | .pipe(plugins.inject(appStyles, {relative: true})) 165 | .pipe(plugins.htmlmin({collapseWhitespace: true, removeComments: true})) 166 | .pipe(gulp.dest(paths.distProd)); 167 | }; 168 | 169 | pipes.builtAppDev = function() { 170 | return es.merge(pipes.builtIndexDev(), pipes.builtPartialsDev(), pipes.processedImagesDev()); 171 | }; 172 | 173 | pipes.builtAppProd = function() { 174 | return es.merge(pipes.builtIndexProd(), pipes.processedImagesProd()); 175 | }; 176 | 177 | // == TASKS ======== 178 | 179 | // removes all compiled dev files 180 | gulp.task('clean-dev', function() { 181 | var deferred = Q.defer(); 182 | del(paths.distDev, function() { 183 | deferred.resolve(); 184 | }); 185 | return deferred.promise; 186 | }); 187 | 188 | // removes all compiled production files 189 | gulp.task('clean-prod', function() { 190 | var deferred = Q.defer(); 191 | del(paths.distProd, function() { 192 | deferred.resolve(); 193 | }); 194 | return deferred.promise; 195 | }); 196 | 197 | // checks html source files for syntax errors 198 | gulp.task('validate-partials', pipes.validatedPartials); 199 | 200 | // checks index.html for syntax errors 201 | gulp.task('validate-index', pipes.validatedIndex); 202 | 203 | // moves html source files into the dev environment 204 | gulp.task('build-partials-dev', pipes.builtPartialsDev); 205 | 206 | // converts partials to javascript using html2js 207 | gulp.task('convert-partials-to-js', pipes.scriptedPartials); 208 | 209 | // runs jshint on the dev server scripts 210 | gulp.task('validate-devserver-scripts', pipes.validatedDevServerScripts); 211 | 212 | // runs jshint on the app scripts 213 | gulp.task('validate-app-scripts', pipes.validatedAppScripts); 214 | 215 | // moves app scripts into the dev environment 216 | gulp.task('build-app-scripts-dev', pipes.builtAppScriptsDev); 217 | 218 | // concatenates, uglifies, and moves app scripts and partials into the prod environment 219 | gulp.task('build-app-scripts-prod', pipes.builtAppScriptsProd); 220 | 221 | // compiles app sass and moves to the dev environment 222 | gulp.task('build-styles-dev', pipes.builtStylesDev); 223 | 224 | // compiles and minifies app sass to css and moves to the prod environment 225 | gulp.task('build-styles-prod', pipes.builtStylesProd); 226 | 227 | // moves vendor scripts into the dev environment 228 | gulp.task('build-vendor-scripts-dev', pipes.builtVendorScriptsDev); 229 | 230 | // concatenates, uglifies, and moves vendor scripts into the prod environment 231 | gulp.task('build-vendor-scripts-prod', pipes.builtVendorScriptsProd); 232 | 233 | // validates and injects sources into index.html and moves it to the dev environment 234 | gulp.task('build-index-dev', pipes.builtIndexDev); 235 | 236 | // validates and injects sources into index.html, minifies and moves it to the dev environment 237 | gulp.task('build-index-prod', pipes.builtIndexProd); 238 | 239 | // builds a complete dev environment 240 | gulp.task('build-app-dev', pipes.builtAppDev); 241 | 242 | // builds a complete prod environment 243 | gulp.task('build-app-prod', pipes.builtAppProd); 244 | 245 | // cleans and builds a complete dev environment 246 | gulp.task('clean-build-app-dev', ['clean-dev'], pipes.builtAppDev); 247 | 248 | // cleans and builds a complete prod environment 249 | gulp.task('clean-build-app-prod', ['clean-prod'], pipes.builtAppProd); 250 | 251 | // clean, build, and watch live changes to the dev environment 252 | gulp.task('watch-dev', ['clean-build-app-dev', 'validate-devserver-scripts'], function() { 253 | 254 | // start nodemon to auto-reload the dev server 255 | plugins.nodemon({ script: 'server.js', ext: 'js', watch: ['devServer/'], env: {NODE_ENV : 'development'} }) 256 | .on('change', ['validate-devserver-scripts']) 257 | .on('restart', function () { 258 | console.log('[nodemon] restarted dev server'); 259 | }); 260 | 261 | // start live-reload server 262 | plugins.livereload.listen({ start: true }); 263 | 264 | // watch index 265 | gulp.watch(paths.index, function() { 266 | return pipes.builtIndexDev() 267 | .pipe(plugins.livereload()); 268 | }); 269 | 270 | // watch app scripts 271 | gulp.watch(paths.scripts, function() { 272 | return pipes.builtAppScriptsDev() 273 | .pipe(plugins.livereload()); 274 | }); 275 | 276 | // watch html partials 277 | gulp.watch(paths.partials, function() { 278 | return pipes.builtPartialsDev() 279 | .pipe(plugins.livereload()); 280 | }); 281 | 282 | // watch styles 283 | gulp.watch(paths.styles, function() { 284 | return pipes.builtStylesDev() 285 | .pipe(plugins.livereload()); 286 | }); 287 | 288 | }); 289 | 290 | // clean, build, and watch live changes to the prod environment 291 | gulp.task('watch-prod', ['clean-build-app-prod', 'validate-devserver-scripts'], function() { 292 | 293 | // start nodemon to auto-reload the dev server 294 | plugins.nodemon({ script: 'server.js', ext: 'js', watch: ['devServer/'], env: {NODE_ENV : 'production'} }) 295 | .on('change', ['validate-devserver-scripts']) 296 | .on('restart', function () { 297 | console.log('[nodemon] restarted dev server'); 298 | }); 299 | 300 | // start live-reload server 301 | plugins.livereload.listen({start: true}); 302 | 303 | // watch index 304 | gulp.watch(paths.index, function() { 305 | return pipes.builtIndexProd() 306 | .pipe(plugins.livereload()); 307 | }); 308 | 309 | // watch app scripts 310 | gulp.watch(paths.scripts, function() { 311 | return pipes.builtAppScriptsProd() 312 | .pipe(plugins.livereload()); 313 | }); 314 | 315 | // watch hhtml partials 316 | gulp.watch(paths.partials, function() { 317 | return pipes.builtAppScriptsProd() 318 | .pipe(plugins.livereload()); 319 | }); 320 | 321 | // watch styles 322 | gulp.watch(paths.styles, function() { 323 | return pipes.builtStylesProd() 324 | .pipe(plugins.livereload()); 325 | }); 326 | 327 | }); 328 | 329 | // default task builds for prod 330 | gulp.task('default', ['clean-build-app-prod']); 331 | -------------------------------------------------------------------------------- /app/styles/_settings.scss: -------------------------------------------------------------------------------- 1 | 2 | // Foundation by ZURB 3 | // foundation.zurb.com 4 | // Licensed under MIT Open Source 5 | 6 | // 7 | 8 | // Table of Contents 9 | // Foundation Settings 10 | // 11 | // a. Base 12 | // b. Grid 13 | // c. Global 14 | // d. Media Query Ranges 15 | // e. Typography 16 | // 01. Accordion 17 | // 02. Alert Boxes 18 | // 03. Block Grid 19 | // 04. Breadcrumbs 20 | // 05. Buttons 21 | // 06. Button Groups 22 | // 07. Clearing 23 | // 08. Dropdown 24 | // 09. Dropdown Buttons 25 | // 10. Flex Video 26 | // 11. Forms 27 | // 12. Icon Bar 28 | // 13. Inline Lists 29 | // 14. Joyride 30 | // 15. Keystrokes 31 | // 16. Labels 32 | // 17. Magellan 33 | // 18. Off-canvas 34 | // 19. Orbit 35 | // 20. Pagination 36 | // 21. Panels 37 | // 22. Pricing Tables 38 | // 23. Progress Bar 39 | // 24. Range Slider 40 | // 25. Reveal 41 | // 26. Side Nav 42 | // 27. Split Buttons 43 | // 28. Sub Nav 44 | // 29. Switch 45 | // 30. Tables 46 | // 31. Tabs 47 | // 32. Thumbnails 48 | // 33. Tooltips 49 | // 34. Top Bar 50 | // 36. Visibility Classes 51 | 52 | // a. Base 53 | // - - - - - - - - - - - - - - - - - - - - - - - - - 54 | 55 | // This is the default html and body font-size for the base rem value. 56 | // $rem-base: 16px; 57 | 58 | // Allows the use of rem-calc() or lower-bound() in your settings 59 | @import "../../bower_components/foundation/scss/foundation/functions"; 60 | 61 | // The default font-size is set to 100% of the browser style sheet (usually 16px) 62 | // for compatibility with browser-based text zoom or user-set defaults. 63 | 64 | // Since the typical default browser font-size is 16px, that makes the calculation for grid size. 65 | // If you want your base font-size to be different and not have it affect the grid breakpoints, 66 | // set $rem-base to $base-font-size and make sure $base-font-size is a px value. 67 | // $base-font-size: 100%; 68 | 69 | // The $base-font-size is 100% while $base-line-height is 150% 70 | // $base-line-height: 150%; 71 | 72 | // We use this to control whether or not CSS classes come through in the gem files. 73 | $include-html-classes: true; 74 | // $include-print-styles: true; 75 | $include-html-global-classes: $include-html-classes; 76 | 77 | // b. Grid 78 | // - - - - - - - - - - - - - - - - - - - - - - - - - 79 | 80 | // $include-html-grid-classes: $include-html-classes; 81 | // $include-xl-html-grid-classes: false; 82 | 83 | // $row-width: rem-calc(1000); 84 | // $total-columns: 12; 85 | // $column-gutter: rem-calc(30); 86 | 87 | // $last-child-float: $opposite-direction; 88 | 89 | // c. Global 90 | // - - - - - - - - - - - - - - - - - - - - - - - - - 91 | 92 | // We use these to define default font stacks 93 | // $font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 94 | // $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif; 95 | // $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; 96 | 97 | // We use these to define default font weights 98 | // $font-weight-normal: normal; 99 | // $font-weight-bold: bold; 100 | 101 | // $white : #FFFFFF; 102 | // $ghost : #FAFAFA; 103 | // $snow : #F9F9F9; 104 | // $vapor : #F6F6F6; 105 | // $white-smoke : #F5F5F5; 106 | // $silver : #EFEFEF; 107 | // $smoke : #EEEEEE; 108 | // $gainsboro : #DDDDDD; 109 | // $iron : #CCCCCC; 110 | // $base : #AAAAAA; 111 | // $aluminum : #999999; 112 | // $jumbo : #888888; 113 | // $monsoon : #777777; 114 | // $steel : #666666; 115 | // $charcoal : #555555; 116 | // $tuatara : #444444; 117 | // $oil : #333333; 118 | // $jet : #222222; 119 | // $black : #000000; 120 | 121 | // We use these as default colors throughout 122 | // $primary-color: #008CBA; 123 | // $secondary-color: #e7e7e7; 124 | // $alert-color: #f04124; 125 | // $success-color: #43AC6A; 126 | // $warning-color: #f08a24; 127 | // $info-color: #a0d3e8; 128 | 129 | // We use these to control various global styles 130 | // $body-bg: $white; 131 | // $body-font-color: $jet; 132 | // $body-font-family: $font-family-sans-serif; 133 | // $body-font-weight: $font-weight-normal; 134 | // $body-font-style: normal; 135 | 136 | // We use this to control font-smoothing 137 | // $font-smoothing: antialiased; 138 | 139 | // We use these to control text direction settings 140 | // $text-direction: ltr; 141 | // $opposite-direction: right; 142 | // $default-float: left; 143 | // $last-child-float: $opposite-direction; 144 | 145 | // We use these to make sure border radius matches unless we want it different. 146 | // $global-radius: 3px; 147 | // $global-rounded: 1000px; 148 | 149 | // We use these to control inset shadow shiny edges and depressions. 150 | // $shiny-edge-size: 0 1px 0; 151 | // $shiny-edge-color: rgba($white, .5); 152 | // $shiny-edge-active-color: rgba($black, .2); 153 | 154 | // d. Media Query Ranges 155 | // - - - - - - - - - - - - - - - - - - - - - - - - - 156 | 157 | // $small-range: (0em, 40em); 158 | // $medium-range: (40.063em, 64em); 159 | // $large-range: (64.063em, 90em); 160 | // $xlarge-range: (90.063em, 120em); 161 | // $xxlarge-range: (120.063em, 99999999em); 162 | 163 | // $screen: "only screen"; 164 | 165 | // $landscape: "#{$screen} and (orientation: landscape)"; 166 | // $portrait: "#{$screen} and (orientation: portrait)"; 167 | 168 | // $small-up: $screen; 169 | // $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; 170 | 171 | // $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"; 172 | // $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"; 173 | 174 | // $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"; 175 | // $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"; 176 | 177 | // $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"; 178 | // $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"; 179 | 180 | // $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"; 181 | // $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"; 182 | 183 | // Legacy 184 | // $small: $medium-up; 185 | // $medium: $medium-up; 186 | // $large: $large-up; 187 | 188 | // We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet 189 | // $cursor-crosshair-value: crosshair; 190 | // $cursor-default-value: default; 191 | // $cursor-disabled-value: not-allowed; 192 | // $cursor-pointer-value: pointer; 193 | // $cursor-help-value: help; 194 | // $cursor-text-value: text; 195 | 196 | // e. Typography 197 | // - - - - - - - - - - - - - - - - - - - - - - - - - 198 | 199 | // $include-html-type-classes: $include-html-classes; 200 | 201 | // We use these to control header font styles 202 | // $header-font-family: $body-font-family; 203 | // $header-font-weight: $font-weight-normal; 204 | // $header-font-style: normal; 205 | // $header-font-color: $jet; 206 | // $header-line-height: 1.4; 207 | // $header-top-margin: .2rem; 208 | // $header-bottom-margin: .5rem; 209 | // $header-text-rendering: optimizeLegibility; 210 | 211 | // We use these to control header font sizes 212 | // $h1-font-size: rem-calc(44); 213 | // $h2-font-size: rem-calc(37); 214 | // $h3-font-size: rem-calc(27); 215 | // $h4-font-size: rem-calc(23); 216 | // $h5-font-size: rem-calc(18); 217 | // $h6-font-size: 1rem; 218 | 219 | // We use these to control header size reduction on small screens 220 | // $h1-font-reduction: rem-calc(10); 221 | // $h2-font-reduction: rem-calc(10); 222 | // $h3-font-reduction: rem-calc(5); 223 | // $h4-font-reduction: rem-calc(5); 224 | // $h5-font-reduction: 0; 225 | // $h6-font-reduction: 0; 226 | 227 | // These control how subheaders are styled. 228 | // $subheader-line-height: 1.4; 229 | // $subheader-font-color: scale-color($header-font-color, $lightness: 35%); 230 | // $subheader-font-weight: $font-weight-normal; 231 | // $subheader-top-margin: .2rem; 232 | // $subheader-bottom-margin: .5rem; 233 | 234 | // A general styling 235 | // $small-font-size: 60%; 236 | // $small-font-color: scale-color($header-font-color, $lightness: 35%); 237 | 238 | // We use these to style paragraphs 239 | // $paragraph-font-family: inherit; 240 | // $paragraph-font-weight: $font-weight-normal; 241 | // $paragraph-font-size: 1rem; 242 | // $paragraph-line-height: 1.6; 243 | // $paragraph-margin-bottom: rem-calc(20); 244 | // $paragraph-aside-font-size: rem-calc(14); 245 | // $paragraph-aside-line-height: 1.35; 246 | // $paragraph-aside-font-style: italic; 247 | // $paragraph-text-rendering: optimizeLegibility; 248 | 249 | // We use these to style tags 250 | // $code-color: $oil; 251 | // $code-font-family: $font-family-monospace; 252 | // $code-font-weight: $font-weight-normal; 253 | // $code-background-color: scale-color($secondary-color, $lightness: 70%); 254 | // $code-border-size: 1px; 255 | // $code-border-style: solid; 256 | // $code-border-color: scale-color($code-background-color, $lightness: -10%); 257 | // $code-padding: rem-calc(2) rem-calc(5) rem-calc(1); 258 | 259 | // We use these to style anchors 260 | // $anchor-text-decoration: none; 261 | // $anchor-text-decoration-hover: none; 262 | // $anchor-font-color: $primary-color; 263 | // $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%); 264 | 265 | // We use these to style the
element 266 | // $hr-border-width: 1px; 267 | // $hr-border-style: solid; 268 | // $hr-border-color: $gainsboro; 269 | // $hr-margin: rem-calc(20); 270 | 271 | // We use these to style lists 272 | // $list-font-family: $paragraph-font-family; 273 | // $list-font-size: $paragraph-font-size; 274 | // $list-line-height: $paragraph-line-height; 275 | // $list-margin-bottom: $paragraph-margin-bottom; 276 | // $list-style-position: outside; 277 | // $list-side-margin: 1.1rem; 278 | // $list-ordered-side-margin: 1.4rem; 279 | // $list-side-margin-no-bullet: 0; 280 | // $list-nested-margin: rem-calc(20); 281 | // $definition-list-header-weight: $font-weight-bold; 282 | // $definition-list-header-margin-bottom: .3rem; 283 | // $definition-list-margin-bottom: rem-calc(12); 284 | 285 | // We use these to style blockquotes 286 | // $blockquote-font-color: scale-color($header-font-color, $lightness: 35%); 287 | // $blockquote-padding: rem-calc(9 20 0 19); 288 | // $blockquote-border: 1px solid $gainsboro; 289 | // $blockquote-cite-font-size: rem-calc(13); 290 | // $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%); 291 | // $blockquote-cite-link-color: $blockquote-cite-font-color; 292 | 293 | // Acronym styles 294 | // $acronym-underline: 1px dotted $gainsboro; 295 | 296 | // We use these to control padding and margin 297 | // $microformat-padding: rem-calc(10 12); 298 | // $microformat-margin: rem-calc(0 0 20 0); 299 | 300 | // We use these to control the border styles 301 | // $microformat-border-width: 1px; 302 | // $microformat-border-style: solid; 303 | // $microformat-border-color: $gainsboro; 304 | 305 | // We use these to control full name font styles 306 | // $microformat-fullname-font-weight: $font-weight-bold; 307 | // $microformat-fullname-font-size: rem-calc(15); 308 | 309 | // We use this to control the summary font styles 310 | // $microformat-summary-font-weight: $font-weight-bold; 311 | 312 | // We use this to control abbr padding 313 | // $microformat-abbr-padding: rem-calc(0 1); 314 | 315 | // We use this to control abbr font styles 316 | // $microformat-abbr-font-weight: $font-weight-bold; 317 | // $microformat-abbr-font-decoration: none; 318 | 319 | // 01. Accordion 320 | // - - - - - - - - - - - - - - - - - - - - - - - - - 321 | 322 | // $include-html-accordion-classes: $include-html-classes; 323 | 324 | // $accordion-navigation-padding: rem-calc(16); 325 | // $accordion-navigation-bg-color: $silver; 326 | // $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%); 327 | // $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%); 328 | // $accordion-navigation-font-color: $jet; 329 | // $accordion-navigation-font-size: rem-calc(16); 330 | // $accordion-navigation-font-family: $body-font-family; 331 | 332 | // $accordion-content-padding: ($column-gutter/2); 333 | // $accordion-content-active-bg-color: $white; 334 | 335 | // 02. Alert Boxes 336 | // - - - - - - - - - - - - - - - - - - - - - - - - - 337 | 338 | // $include-html-alert-classes: $include-html-classes; 339 | 340 | // We use this to control alert padding. 341 | // $alert-padding-top: rem-calc(14); 342 | // $alert-padding-default-float: $alert-padding-top; 343 | // $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10); 344 | // $alert-padding-bottom: $alert-padding-top; 345 | 346 | // We use these to control text style. 347 | // $alert-font-weight: $font-weight-normal; 348 | // $alert-font-size: rem-calc(13); 349 | // $alert-font-color: $white; 350 | // $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%); 351 | 352 | // We use this for close hover effect. 353 | // $alert-function-factor: -14%; 354 | 355 | // We use these to control border styles. 356 | // $alert-border-style: solid; 357 | // $alert-border-width: 1px; 358 | // $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor); 359 | // $alert-bottom-margin: rem-calc(20); 360 | 361 | // We use these to style the close buttons 362 | // $alert-close-color: $oil; 363 | // $alert-close-top: 50%; 364 | // $alert-close-position: rem-calc(4); 365 | // $alert-close-font-size: rem-calc(22); 366 | // $alert-close-opacity: 0.3; 367 | // $alert-close-opacity-hover: 0.5; 368 | // $alert-close-padding: 9px 6px 4px; 369 | // $alert-close-background: inherit; 370 | 371 | // We use this to control border radius 372 | // $alert-radius: $global-radius; 373 | 374 | // $alert-transition-speed: 300ms; 375 | // $alert-transition-ease: ease-out; 376 | 377 | // 03. Block Grid 378 | // - - - - - - - - - - - - - - - - - - - - - - - - - 379 | 380 | // $include-html-block-grid-classes: $include-html-classes; 381 | // $include-xl-html-block-grid-classes: false; 382 | 383 | // We use this to control the maximum number of block grid elements per row 384 | // $block-grid-elements: 12; 385 | // $block-grid-default-spacing: rem-calc(20); 386 | 387 | // $align-block-grid-to-grid: false; 388 | // @if $align-block-grid-to-grid {$block-grid-default-spacing: $column-gutter;} 389 | 390 | // Enables media queries for block-grid classes. Set to false if writing semantic HTML. 391 | // $block-grid-media-queries: true; 392 | 393 | // 04. Breadcrumbs 394 | // - - - - - - - - - - - - - - - - - - - - - - - - - 395 | 396 | // $include-html-nav-classes: $include-html-classes; 397 | 398 | // We use this to set the background color for the breadcrumb container. 399 | // $crumb-bg: scale-color($secondary-color, $lightness: 55%); 400 | 401 | // We use these to set the padding around the breadcrumbs. 402 | // $crumb-padding: rem-calc(9 14 9); 403 | // $crumb-side-padding: rem-calc(12); 404 | 405 | // We use these to control border styles. 406 | // $crumb-function-factor: -10%; 407 | // $crumb-border-size: 1px; 408 | // $crumb-border-style: solid; 409 | // $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor); 410 | // $crumb-radius: $global-radius; 411 | 412 | // We use these to set various text styles for breadcrumbs. 413 | // $crumb-font-size: rem-calc(11); 414 | // $crumb-font-color: $primary-color; 415 | // $crumb-font-color-current: $oil; 416 | // $crumb-font-color-unavailable: $aluminum; 417 | // $crumb-font-transform: uppercase; 418 | // $crumb-link-decor: underline; 419 | 420 | // We use these to control the slash between breadcrumbs 421 | // $crumb-slash-color: $base; 422 | // $crumb-slash: "/"; 423 | 424 | // 05. Buttons 425 | // - - - - - - - - - - - - - - - - - - - - - - - - - 426 | 427 | // $include-html-button-classes: $include-html-classes; 428 | 429 | // We use these to build padding for buttons. 430 | // $button-tny: rem-calc(10); 431 | // $button-sml: rem-calc(14); 432 | // $button-med: rem-calc(16); 433 | // $button-lrg: rem-calc(18); 434 | 435 | // We use this to control the display property. 436 | // $button-display: inline-block; 437 | // $button-margin-bottom: rem-calc(20); 438 | 439 | // We use these to control button text styles. 440 | // $button-font-family: $body-font-family; 441 | // $button-font-color: $white; 442 | // $button-font-color-alt: $oil; 443 | // $button-font-tny: rem-calc(11); 444 | // $button-font-sml: rem-calc(13); 445 | // $button-font-med: rem-calc(16); 446 | // $button-font-lrg: rem-calc(20); 447 | // $button-font-weight: $font-weight-normal; 448 | // $button-font-align: center; 449 | 450 | // We use these to control various hover effects. 451 | // $button-function-factor: -20%; 452 | 453 | // We use these to control button border styles. 454 | // $button-border-width: 0; 455 | // $button-border-style: solid; 456 | // $button-bg-color: $primary-color; 457 | // $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor); 458 | // $button-border-color: $button-bg-hover; 459 | // $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor); 460 | // $secondary-button-border-color: $secondary-button-bg-hover; 461 | // $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor); 462 | // $success-button-border-color: $success-button-bg-hover; 463 | // $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor); 464 | // $alert-button-border-color: $alert-button-bg-hover; 465 | // $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor); 466 | // $warning-button-border-color: $warning-button-bg-hover; 467 | // $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor); 468 | // $info-button-border-color: $info-button-bg-hover; 469 | 470 | // We use this to set the default radius used throughout the core. 471 | // $button-radius: $global-radius; 472 | // $button-round: $global-rounded; 473 | 474 | // We use this to set default opacity and cursor for disabled buttons. 475 | // $button-disabled-opacity: 0.7; 476 | // $button-disabled-cursor: $cursor-default-value; 477 | 478 | // 06. Button Groups 479 | // - - - - - - - - - - - - - - - - - - - - - - - - - 480 | 481 | // $include-html-button-classes: $include-html-classes; 482 | 483 | // Sets the margin for the right side by default, and the left margin if right-to-left direction is used 484 | // $button-bar-margin-opposite: rem-calc(10); 485 | // $button-group-border-width: 1px; 486 | 487 | // 07. Clearing 488 | // - - - - - - - - - - - - - - - - - - - - - - - - - 489 | 490 | // $include-html-clearing-classes: $include-html-classes; 491 | 492 | // We use these to set the background colors for parts of Clearing. 493 | // $clearing-bg: $oil; 494 | // $clearing-caption-bg: $clearing-bg; 495 | // $clearing-carousel-bg: rgba(51,51,51,0.8); 496 | // $clearing-img-bg: $clearing-bg; 497 | 498 | // We use these to style the close button 499 | // $clearing-close-color: $iron; 500 | // $clearing-close-size: 30px; 501 | 502 | // We use these to style the arrows 503 | // $clearing-arrow-size: 12px; 504 | // $clearing-arrow-color: $clearing-close-color; 505 | 506 | // We use these to style captions 507 | // $clearing-caption-font-color: $iron; 508 | // $clearing-caption-font-size: 0.875em; 509 | // $clearing-caption-padding: 10px 30px 20px; 510 | 511 | // We use these to make the image and carousel height and style 512 | // $clearing-active-img-height: 85%; 513 | // $clearing-carousel-height: 120px; 514 | // $clearing-carousel-thumb-width: 120px; 515 | // $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255); 516 | 517 | // 08. Dropdown 518 | // - - - - - - - - - - - - - - - - - - - - - - - - - 519 | 520 | // $include-html-dropdown-classes: $include-html-classes; 521 | 522 | // We use these to controls height and width styles. 523 | // $f-dropdown-max-width: 200px; 524 | // $f-dropdown-height: auto; 525 | // $f-dropdown-max-height: none; 526 | 527 | // Used for bottom position 528 | // $f-dropdown-margin-top: 2px; 529 | 530 | // Used for right position 531 | // $f-dropdown-margin-left: $f-dropdown-margin-top; 532 | 533 | // Used for left position 534 | // $f-dropdown-margin-right: $f-dropdown-margin-top; 535 | 536 | // Used for top position 537 | // $f-dropdown-margin-bottom: $f-dropdown-margin-top; 538 | 539 | // We use this to control the background color 540 | // $f-dropdown-bg: $white; 541 | 542 | // We use this to set the border styles for dropdowns. 543 | // $f-dropdown-border-style: solid; 544 | // $f-dropdown-border-width: 1px; 545 | // $f-dropdown-border-color: scale-color($white, $lightness: -20%); 546 | 547 | // We use these to style the triangle pip. 548 | // $f-dropdown-triangle-size: 6px; 549 | // $f-dropdown-triangle-color: $white; 550 | // $f-dropdown-triangle-side-offset: 10px; 551 | 552 | // We use these to control styles for the list elements. 553 | // $f-dropdown-list-style: none; 554 | // $f-dropdown-font-color: $charcoal; 555 | // $f-dropdown-font-size: rem-calc(14); 556 | // $f-dropdown-list-padding: rem-calc(5, 10); 557 | // $f-dropdown-line-height: rem-calc(18); 558 | // $f-dropdown-list-hover-bg: $smoke; 559 | // $dropdown-mobile-default-float: 0; 560 | 561 | // We use this to control the styles for when the dropdown has custom content. 562 | // $f-dropdown-content-padding: rem-calc(20); 563 | 564 | // Default radius for dropdown. 565 | // $f-dropdown-radius: $global-radius; 566 | 567 | 568 | // 09. Dropdown Buttons 569 | // - - - - - - - - - - - - - - - - - - - - - - - - - 570 | 571 | // $include-html-button-classes: $include-html-classes; 572 | 573 | // We use these to set the color of the pip in dropdown buttons 574 | // $dropdown-button-pip-color: $white; 575 | // $dropdown-button-pip-color-alt: $oil; 576 | 577 | // We use these to set the size of the pip in dropdown buttons 578 | // $button-pip-tny: rem-calc(6); 579 | // $button-pip-sml: rem-calc(7); 580 | // $button-pip-med: rem-calc(9); 581 | // $button-pip-lrg: rem-calc(11); 582 | 583 | // We use these to style tiny dropdown buttons 584 | // $dropdown-button-padding-tny: $button-pip-tny * 7; 585 | // $dropdown-button-pip-size-tny: $button-pip-tny; 586 | // $dropdown-button-pip-opposite-tny: $button-pip-tny * 3; 587 | // $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1); 588 | 589 | // We use these to style small dropdown buttons 590 | // $dropdown-button-padding-sml: $button-pip-sml * 7; 591 | // $dropdown-button-pip-size-sml: $button-pip-sml; 592 | // $dropdown-button-pip-opposite-sml: $button-pip-sml * 3; 593 | // $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1); 594 | 595 | // We use these to style medium dropdown buttons 596 | // $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3); 597 | // $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3); 598 | // $dropdown-button-pip-opposite-med: $button-pip-med * 2.5; 599 | // $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2); 600 | 601 | // We use these to style large dropdown buttons 602 | // $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3); 603 | // $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); 604 | // $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5; 605 | // $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3); 606 | 607 | // 10. Flex Video 608 | // - - - - - - - - - - - - - - - - - - - - - - - - - 609 | 610 | // $include-html-media-classes: $include-html-classes; 611 | 612 | // We use these to control video container padding and margins 613 | // $flex-video-padding-top: rem-calc(25); 614 | // $flex-video-padding-bottom: 67.5%; 615 | // $flex-video-margin-bottom: rem-calc(16); 616 | 617 | // We use this to control widescreen bottom padding 618 | // $flex-video-widescreen-padding-bottom: 56.34%; 619 | 620 | // 11. Forms 621 | // - - - - - - - - - - - - - - - - - - - - - - - - - 622 | 623 | // $include-html-form-classes: $include-html-classes; 624 | 625 | // We use this to set the base for lots of form spacing and positioning styles 626 | // $form-spacing: rem-calc(16); 627 | 628 | // We use these to style the labels in different ways 629 | // $form-label-pointer: pointer; 630 | // $form-label-font-size: rem-calc(14); 631 | // $form-label-font-weight: $font-weight-normal; 632 | // $form-label-line-height: 1.5; 633 | // $form-label-font-color: scale-color($black, $lightness: 30%); 634 | // $form-label-small-transform: capitalize; 635 | // $form-label-bottom-margin: 0; 636 | // $input-font-family: inherit; 637 | // $input-font-color: rgba(0,0,0,0.75); 638 | // $input-font-size: rem-calc(14); 639 | // $input-bg-color: $white; 640 | // $input-focus-bg-color: scale-color($white, $lightness: -2%); 641 | // $input-border-color: scale-color($white, $lightness: -20%); 642 | // $input-focus-border-color: scale-color($white, $lightness: -40%); 643 | // $input-border-style: solid; 644 | // $input-border-width: 1px; 645 | // $input-border-radius: $global-radius; 646 | // $input-disabled-bg: $gainsboro; 647 | // $input-disabled-cursor: $cursor-default-value; 648 | // $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); 649 | // $input-include-glowing-effect: true; 650 | 651 | // We use these to style the fieldset border and spacing. 652 | // $fieldset-border-style: solid; 653 | // $fieldset-border-width: 1px; 654 | // $fieldset-border-color: $gainsboro; 655 | // $fieldset-padding: rem-calc(20); 656 | // $fieldset-margin: rem-calc(18 0); 657 | 658 | // We use these to style the legends when you use them 659 | // $legend-bg: $white; 660 | // $legend-font-weight: $font-weight-bold; 661 | // $legend-padding: rem-calc(0 3); 662 | 663 | // We use these to style the prefix and postfix input elements 664 | // $input-prefix-bg: scale-color($white, $lightness: -5%); 665 | // $input-prefix-border-color: scale-color($white, $lightness: -20%); 666 | // $input-prefix-border-size: 1px; 667 | // $input-prefix-border-type: solid; 668 | // $input-prefix-overflow: hidden; 669 | // $input-prefix-font-color: $oil; 670 | // $input-prefix-font-color-alt: $white; 671 | 672 | // We use this setting to turn on/off HTML5 number spinners (the up/down arrows) 673 | // $input-number-spinners: true; 674 | 675 | // We use these to style the error states for inputs and labels 676 | // $input-error-message-padding: rem-calc(6 9 9); 677 | // $input-error-message-top: -1px; 678 | // $input-error-message-font-size: rem-calc(12); 679 | // $input-error-message-font-weight: $font-weight-normal; 680 | // $input-error-message-font-style: italic; 681 | // $input-error-message-font-color: $white; 682 | // $input-error-message-bg-color: $alert-color; 683 | // $input-error-message-font-color-alt: $oil; 684 | 685 | // We use this to style the glowing effect of inputs when focused 686 | // $glowing-effect-fade-time: 0.45s; 687 | // $glowing-effect-color: $input-focus-border-color; 688 | 689 | // Select variables 690 | // $select-bg-color: $ghost; 691 | // $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%); 692 | 693 | 694 | // 12. Icon Bar 695 | // - - - - - - - - - - - - - - - - - - - - - - - - - 696 | 697 | // We use these to style the icon-bar and items 698 | // $icon-bar-bg: $oil; 699 | // $icon-bar-font-color: $white; 700 | // $icon-bar-font-color-hover: $icon-bar-font-color; 701 | // $icon-bar-font-size: 1rem; 702 | // $icon-bar-hover-color: $primary-color; 703 | // $icon-bar-icon-color: $white; 704 | // $icon-bar-icon-color-hover: $icon-bar-icon-color; 705 | // $icon-bar-icon-size: 1.875rem; 706 | // $icon-bar-image-width: 1.875rem; 707 | // $icon-bar-image-height: 1.875rem; 708 | // $icon-bar-active-color: $primary-color; 709 | // $icon-bar-item-padding: 1.25rem; 710 | 711 | // We use this to set default opacity and cursor for disabled icons. 712 | // $icon-bar-disabled-opacity: 0.7; 713 | 714 | // 13. Inline Lists 715 | // - - - - - - - - - - - - - - - - - - - - - - - - - 716 | 717 | // $include-html-inline-list-classes: $include-html-classes; 718 | 719 | // We use this to control the margins and padding of the inline list. 720 | // $inline-list-top-margin: 0; 721 | // $inline-list-opposite-margin: 0; 722 | // $inline-list-bottom-margin: rem-calc(17); 723 | // $inline-list-default-float-margin: rem-calc(-22); 724 | // $inline-list-default-float-list-margin: rem-calc(22); 725 | 726 | // $inline-list-padding: 0; 727 | 728 | // We use this to control the overflow of the inline list. 729 | // $inline-list-overflow: hidden; 730 | 731 | // We use this to control the list items 732 | // $inline-list-display: block; 733 | 734 | // We use this to control any elements within list items 735 | // $inline-list-children-display: block; 736 | 737 | // 14. Joyride 738 | // - - - - - - - - - - - - - - - - - - - - - - - - - 739 | 740 | // $include-html-joyride-classes: $include-html-classes; 741 | 742 | // Controlling default Joyride styles 743 | // $joyride-tip-bg: $oil; 744 | // $joyride-tip-default-width: 300px; 745 | // $joyride-tip-padding: rem-calc(18 20 24); 746 | // $joyride-tip-border: solid 1px $charcoal; 747 | // $joyride-tip-radius: 4px; 748 | // $joyride-tip-position-offset: 22px; 749 | 750 | // Here, we're setting the tip font styles 751 | // $joyride-tip-font-color: $white; 752 | // $joyride-tip-font-size: rem-calc(14); 753 | // $joyride-tip-header-weight: $font-weight-bold; 754 | 755 | // This changes the nub size 756 | // $joyride-tip-nub-size: 10px; 757 | 758 | // This adjusts the styles for the timer when its enabled 759 | // $joyride-tip-timer-width: 50px; 760 | // $joyride-tip-timer-height: 3px; 761 | // $joyride-tip-timer-color: $steel; 762 | 763 | // This changes up the styles for the close button 764 | // $joyride-tip-close-color: $monsoon; 765 | // $joyride-tip-close-size: 24px; 766 | // $joyride-tip-close-weight: $font-weight-normal; 767 | 768 | // When Joyride is filling the screen, we use this style for the bg 769 | // $joyride-screenfill: rgba(0,0,0,0.5); 770 | 771 | // 15. Keystrokes 772 | // - - - - - - - - - - - - - - - - - - - - - - - - - 773 | 774 | // $include-html-keystroke-classes: $include-html-classes; 775 | 776 | // We use these to control text styles. 777 | // $keystroke-font: "Consolas", "Menlo", "Courier", monospace; 778 | // $keystroke-font-size: inherit; 779 | // $keystroke-font-color: $jet; 780 | // $keystroke-font-color-alt: $white; 781 | // $keystroke-function-factor: -7%; 782 | 783 | // We use this to control keystroke padding. 784 | // $keystroke-padding: rem-calc(2 4 0); 785 | 786 | // We use these to control background and border styles. 787 | // $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor); 788 | // $keystroke-border-style: solid; 789 | // $keystroke-border-width: 1px; 790 | // $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor); 791 | // $keystroke-radius: $global-radius; 792 | 793 | // 16. Labels 794 | // - - - - - - - - - - - - - - - - - - - - - - - - - 795 | 796 | // $include-html-label-classes: $include-html-classes; 797 | 798 | // We use these to style the labels 799 | // $label-padding: rem-calc(4 8 4); 800 | // $label-radius: $global-radius; 801 | 802 | // We use these to style the label text 803 | // $label-font-sizing: rem-calc(11); 804 | // $label-font-weight: $font-weight-normal; 805 | // $label-font-color: $oil; 806 | // $label-font-color-alt: $white; 807 | // $label-font-family: $body-font-family; 808 | 809 | // 17. Magellan 810 | // - - - - - - - - - - - - - - - - - - - - - - - - - 811 | 812 | // $include-html-magellan-classes: $include-html-classes; 813 | 814 | // $magellan-bg: $white; 815 | // $magellan-padding: 10px; 816 | 817 | // 18. Off-canvas 818 | // - - - - - - - - - - - - - - - - - - - - - - - - - 819 | 820 | // Off Canvas Tab Bar Variables 821 | // $include-html-off-canvas-classes: $include-html-classes; 822 | 823 | // $tabbar-bg: $oil; 824 | // $tabbar-height: rem-calc(45); 825 | // $tabbar-icon-width: $tabbar-height; 826 | // $tabbar-line-height: $tabbar-height; 827 | // $tabbar-color: $white; 828 | // $tabbar-middle-padding: 0 rem-calc(10); 829 | 830 | // Off Canvas Divider Styles 831 | // $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%); 832 | // $tabbar-right-section-border: $tabbar-left-section-border; 833 | 834 | 835 | // Off Canvas Tab Bar Headers 836 | // $tabbar-header-color: $white; 837 | // $tabbar-header-weight: $font-weight-bold; 838 | // $tabbar-header-line-height: $tabbar-height; 839 | // $tabbar-header-margin: 0; 840 | 841 | // Off Canvas Menu Variables 842 | // $off-canvas-width: rem-calc(250); 843 | // $off-canvas-bg: $oil; 844 | 845 | // Off Canvas Menu List Variables 846 | // $off-canvas-label-padding: 0.3rem rem-calc(15); 847 | // $off-canvas-label-color: $aluminum; 848 | // $off-canvas-label-text-transform: uppercase; 849 | // $off-canvas-label-font-size: rem-calc(12); 850 | // $off-canvas-label-font-weight: $font-weight-bold; 851 | // $off-canvas-label-bg: $tuatara; 852 | // $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%); 853 | // $off-canvas-label-border-bottom: none; 854 | // $off-canvas-label-margin:0; 855 | // $off-canvas-link-padding: rem-calc(10, 15); 856 | // $off-canvas-link-color: rgba($white, 0.7); 857 | // $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%); 858 | // $off-canvas-back-bg: #444; 859 | // $off-canvas-back-border-top: $off-canvas-label-border-top; 860 | // $off-canvas-back-border-bottom: $off-canvas-label-border-bottom; 861 | // $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%); 862 | // $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%); 863 | // $off-canvas-back-hover-border-bottom: none; 864 | 865 | // Off Canvas Menu Icon Variables 866 | // $tabbar-menu-icon-color: $white; 867 | // $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%); 868 | 869 | // $tabbar-menu-icon-text-indent: rem-calc(35); 870 | // $tabbar-menu-icon-width: $tabbar-icon-width; 871 | // $tabbar-menu-icon-height: $tabbar-height; 872 | // $tabbar-menu-icon-padding: 0; 873 | 874 | // $tabbar-hamburger-icon-width: rem-calc(16); 875 | // $tabbar-hamburger-icon-left: false; 876 | // $tabbar-hamburger-icon-top: false; 877 | // $tabbar-hamburger-icon-thickness: 1px; 878 | // $tabbar-hamburger-icon-gap: 6px; 879 | 880 | // Off Canvas Back-Link Overlay 881 | // $off-canvas-overlay-transition: background 300ms ease; 882 | // $off-canvas-overlay-cursor: pointer; 883 | // $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5); 884 | // $off-canvas-overlay-background: rgba($white, 0.2); 885 | // $off-canvas-overlay-background-hover: rgba($white, 0.05); 886 | 887 | // Transition Variables 888 | // $menu-slide: "transform 500ms ease"; 889 | 890 | // 19. Orbit 891 | // - - - - - - - - - - - - - - - - - - - - - - - - - 892 | 893 | // $include-html-orbit-classes: $include-html-classes; 894 | 895 | // We use these to control the caption styles 896 | // $orbit-container-bg: none; 897 | // $orbit-caption-bg: rgba(51,51,51, 0.8); 898 | // $orbit-caption-font-color: $white; 899 | // $orbit-caption-font-size: rem-calc(14); 900 | // $orbit-caption-position: "bottom"; // Supported values: "bottom", "under" 901 | // $orbit-caption-padding: rem-calc(10 14); 902 | // $orbit-caption-height: auto; 903 | 904 | // We use these to control the left/right nav styles 905 | // $orbit-nav-bg: transparent; 906 | // $orbit-nav-bg-hover: rgba(0,0,0,0.3); 907 | // $orbit-nav-arrow-color: $white; 908 | // $orbit-nav-arrow-color-hover: $white; 909 | 910 | // We use these to control the timer styles 911 | // $orbit-timer-bg: rgba(255,255,255,0.3); 912 | // $orbit-timer-show-progress-bar: true; 913 | 914 | // We use these to control the bullet nav styles 915 | // $orbit-bullet-nav-color: $iron; 916 | // $orbit-bullet-nav-color-active: $aluminum; 917 | // $orbit-bullet-radius: rem-calc(9); 918 | 919 | // We use these to controls the style of slide numbers 920 | // $orbit-slide-number-bg: rgba(0,0,0,0); 921 | // $orbit-slide-number-font-color: $white; 922 | // $orbit-slide-number-padding: rem-calc(5); 923 | 924 | // Graceful Loading Wrapper and preloader 925 | // $wrapper-class: "slideshow-wrapper"; 926 | // $preloader-class: "preloader"; 927 | 928 | // Hide controls on small 929 | // $orbit-nav-hide-for-small: true; 930 | // $orbit-bullet-hide-for-small: true; 931 | // $orbit-timer-hide-for-small: true; 932 | 933 | // 20. Pagination 934 | // - - - - - - - - - - - - - - - - - - - - - - - - - 935 | 936 | // $include-pagination-classes: $include-html-classes; 937 | 938 | // We use these to control the pagination container 939 | // $pagination-height: rem-calc(24); 940 | // $pagination-margin: rem-calc(-5); 941 | 942 | // We use these to set the list-item properties 943 | // $pagination-li-float: $default-float; 944 | // $pagination-li-height: rem-calc(24); 945 | // $pagination-li-font-color: $jet; 946 | // $pagination-li-font-size: rem-calc(14); 947 | // $pagination-li-margin: rem-calc(5); 948 | 949 | // We use these for the pagination anchor links 950 | // $pagination-link-pad: rem-calc(1 10 1); 951 | // $pagination-link-font-color: $aluminum; 952 | // $pagination-link-active-bg: scale-color($white, $lightness: -10%); 953 | 954 | // We use these for disabled anchor links 955 | // $pagination-link-unavailable-cursor: default; 956 | // $pagination-link-unavailable-font-color: $aluminum; 957 | // $pagination-link-unavailable-bg-active: transparent; 958 | 959 | // We use these for currently selected anchor links 960 | // $pagination-link-current-background: $primary-color; 961 | // $pagination-link-current-font-color: $white; 962 | // $pagination-link-current-font-weight: $font-weight-bold; 963 | // $pagination-link-current-cursor: default; 964 | // $pagination-link-current-active-bg: $primary-color; 965 | 966 | // 21. Panels 967 | // - - - - - - - - - - - - - - - - - - - - - - - - - 968 | 969 | // $include-html-panel-classes: $include-html-classes; 970 | 971 | // We use these to control the background and border styles 972 | // $panel-bg: scale-color($white, $lightness: -5%); 973 | // $panel-border-style: solid; 974 | // $panel-border-size: 1px; 975 | 976 | // We use this % to control how much we darken things on hover 977 | // $panel-function-factor: -11%; 978 | // $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor); 979 | 980 | // We use these to set default inner padding and bottom margin 981 | // $panel-margin-bottom: rem-calc(20); 982 | // $panel-padding: rem-calc(20); 983 | 984 | // We use these to set default font colors 985 | // $panel-font-color: $oil; 986 | // $panel-font-color-alt: $white; 987 | 988 | // $panel-header-adjust: true; 989 | // $callout-panel-link-color: $primary-color; 990 | // $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%); 991 | 992 | // 22. Pricing Tables 993 | // - - - - - - - - - - - - - - - - - - - - - - - - - 994 | 995 | // $include-html-pricing-classes: $include-html-classes; 996 | 997 | // We use this to control the border color 998 | // $price-table-border: solid 1px $gainsboro; 999 | 1000 | // We use this to control the bottom margin of the pricing table 1001 | // $price-table-margin-bottom: rem-calc(20); 1002 | 1003 | // We use these to control the title styles 1004 | // $price-title-bg: $oil; 1005 | // $price-title-padding: rem-calc(15 20); 1006 | // $price-title-align: center; 1007 | // $price-title-color: $smoke; 1008 | // $price-title-weight: $font-weight-normal; 1009 | // $price-title-size: rem-calc(16); 1010 | // $price-title-font-family: $body-font-family; 1011 | 1012 | // We use these to control the price styles 1013 | // $price-money-bg: $vapor; 1014 | // $price-money-padding: rem-calc(15 20); 1015 | // $price-money-align: center; 1016 | // $price-money-color: $oil; 1017 | // $price-money-weight: $font-weight-normal; 1018 | // $price-money-size: rem-calc(32); 1019 | // $price-money-font-family: $body-font-family; 1020 | 1021 | 1022 | // We use these to control the description styles 1023 | // $price-bg: $white; 1024 | // $price-desc-color: $monsoon; 1025 | // $price-desc-padding: rem-calc(15); 1026 | // $price-desc-align: center; 1027 | // $price-desc-font-size: rem-calc(12); 1028 | // $price-desc-weight: $font-weight-normal; 1029 | // $price-desc-line-height: 1.4; 1030 | // $price-desc-bottom-border: dotted 1px $gainsboro; 1031 | 1032 | // We use these to control the list item styles 1033 | // $price-item-color: $oil; 1034 | // $price-item-padding: rem-calc(15); 1035 | // $price-item-align: center; 1036 | // $price-item-font-size: rem-calc(14); 1037 | // $price-item-weight: $font-weight-normal; 1038 | // $price-item-bottom-border: dotted 1px $gainsboro; 1039 | 1040 | // We use these to control the CTA area styles 1041 | // $price-cta-bg: $white; 1042 | // $price-cta-align: center; 1043 | // $price-cta-padding: rem-calc(20 20 0); 1044 | 1045 | // 23. Progress Bar 1046 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1047 | 1048 | // $include-html-media-classes: $include-html-classes; 1049 | 1050 | // We use this to set the progress bar height 1051 | // $progress-bar-height: rem-calc(25); 1052 | // $progress-bar-color: $vapor; 1053 | 1054 | // We use these to control the border styles 1055 | // $progress-bar-border-color: scale-color($white, $lightness: 20%); 1056 | // $progress-bar-border-size: 1px; 1057 | // $progress-bar-border-style: solid; 1058 | // $progress-bar-border-radius: $global-radius; 1059 | 1060 | // We use these to control the margin & padding 1061 | // $progress-bar-margin-bottom: rem-calc(10); 1062 | 1063 | // We use these to set the meter colors 1064 | // $progress-meter-color: $primary-color; 1065 | // $progress-meter-secondary-color: $secondary-color; 1066 | // $progress-meter-success-color: $success-color; 1067 | // $progress-meter-alert-color: $alert-color; 1068 | 1069 | // 24. Range Slider 1070 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1071 | 1072 | // $include-html-range-slider-classes: $include-html-classes; 1073 | 1074 | // These variabels define the slider bar styles 1075 | // $range-slider-bar-width: 100%; 1076 | // $range-slider-bar-height: rem-calc(16); 1077 | 1078 | // $range-slider-bar-border-width: 1px; 1079 | // $range-slider-bar-border-style: solid; 1080 | // $range-slider-bar-border-color: $gainsboro; 1081 | // $range-slider-radius: $global-radius; 1082 | // $range-slider-round: $global-rounded; 1083 | // $range-slider-bar-bg-color: $ghost; 1084 | // $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%); 1085 | 1086 | // Vertical bar styles 1087 | // $range-slider-vertical-bar-width: rem-calc(16); 1088 | // $range-slider-vertical-bar-height: rem-calc(200); 1089 | 1090 | // These variabels define the slider handle styles 1091 | // $range-slider-handle-width: rem-calc(32); 1092 | // $range-slider-handle-height: rem-calc(22); 1093 | // $range-slider-handle-position-top: rem-calc(-5); 1094 | // $range-slider-handle-bg-color: $primary-color; 1095 | // $range-slider-handle-border-width: 1px; 1096 | // $range-slider-handle-border-style: solid; 1097 | // $range-slider-handle-border-color: none; 1098 | // $range-slider-handle-radius: $global-radius; 1099 | // $range-slider-handle-round: $global-rounded; 1100 | // $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%); 1101 | // $range-slider-handle-cursor: pointer; 1102 | 1103 | // $range-slider-disabled-opacity: 0.7; 1104 | // $range-slider-disabled-cursor: $cursor-disabled-value; 1105 | 1106 | // 25. Reveal 1107 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1108 | 1109 | // $include-html-reveal-classes: $include-html-classes; 1110 | 1111 | // We use these to control the style of the reveal overlay. 1112 | // $reveal-overlay-bg: rgba($black, .45); 1113 | // $reveal-overlay-bg-old: $black; 1114 | 1115 | // We use these to control the style of the modal itself. 1116 | // $reveal-modal-bg: $white; 1117 | // $reveal-position-top: rem-calc(100); 1118 | // $reveal-default-width: 80%; 1119 | // $reveal-max-width: $row-width; 1120 | // $reveal-modal-padding: rem-calc(20); 1121 | // $reveal-box-shadow: 0 0 10px rgba($black,.4); 1122 | 1123 | // We use these to style the reveal close button 1124 | // $reveal-close-font-size: rem-calc(40); 1125 | // $reveal-close-top: rem-calc(10); 1126 | // $reveal-close-side: rem-calc(22); 1127 | // $reveal-close-color: $base; 1128 | // $reveal-close-weight: $font-weight-bold; 1129 | 1130 | // We use this to set the default radius used throughout the core. 1131 | // $reveal-radius: $global-radius; 1132 | // $reveal-round: $global-rounded; 1133 | 1134 | // We use these to control the modal border 1135 | // $reveal-border-style: solid; 1136 | // $reveal-border-width: 1px; 1137 | // $reveal-border-color: $steel; 1138 | 1139 | // $reveal-modal-class: "reveal-modal"; 1140 | // $close-reveal-modal-class: "close-reveal-modal"; 1141 | 1142 | // 26. Side Nav 1143 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1144 | 1145 | // $include-html-nav-classes: $include-html-classes; 1146 | 1147 | // We use this to control padding. 1148 | // $side-nav-padding: rem-calc(14 0); 1149 | 1150 | // We use these to control list styles. 1151 | // $side-nav-list-type: none; 1152 | // $side-nav-list-position: outside; 1153 | // $side-nav-list-margin: rem-calc(0 0 7 0); 1154 | 1155 | // We use these to control link styles. 1156 | // $side-nav-link-color: $primary-color; 1157 | // $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%); 1158 | // $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%); 1159 | // $side-nav-link-bg-hover: hsla(0, 0, 0, 0.025); 1160 | // $side-nav-link-margin: 0; 1161 | // $side-nav-link-padding: rem-calc(7 14); 1162 | // $side-nav-font-size: rem-calc(14); 1163 | // $side-nav-font-weight: $font-weight-normal; 1164 | // $side-nav-font-weight-active: $side-nav-font-weight; 1165 | // $side-nav-font-family: $body-font-family; 1166 | // $side-nav-font-family-active: $side-nav-font-family; 1167 | 1168 | // We use these to control heading styles. 1169 | // $side-nav-heading-color: $side-nav-link-color; 1170 | // $side-nav-heading-font-size: $side-nav-font-size; 1171 | // $side-nav-heading-font-weight: bold; 1172 | // $side-nav-heading-text-transform: uppercase; 1173 | 1174 | // We use these to control border styles 1175 | // $side-nav-divider-size: 1px; 1176 | // $side-nav-divider-style: solid; 1177 | // $side-nav-divider-color: scale-color($white, $lightness: 10%); 1178 | 1179 | // 27. Split Buttons 1180 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1181 | 1182 | // $include-html-button-classes: $include-html-classes; 1183 | 1184 | // We use these to control different shared styles for Split Buttons 1185 | // $split-button-function-factor: 10%; 1186 | // $split-button-pip-color: $white; 1187 | // $split-button-pip-color-alt: $oil; 1188 | // $split-button-active-bg-tint: rgba(0,0,0,0.1); 1189 | 1190 | // We use these to control tiny split buttons 1191 | // $split-button-padding-tny: $button-pip-tny * 10; 1192 | // $split-button-span-width-tny: $button-pip-tny * 6; 1193 | // $split-button-pip-size-tny: $button-pip-tny; 1194 | // $split-button-pip-top-tny: $button-pip-tny * 2; 1195 | // $split-button-pip-default-float-tny: rem-calc(-6); 1196 | 1197 | // We use these to control small split buttons 1198 | // $split-button-padding-sml: $button-pip-sml * 10; 1199 | // $split-button-span-width-sml: $button-pip-sml * 6; 1200 | // $split-button-pip-size-sml: $button-pip-sml; 1201 | // $split-button-pip-top-sml: $button-pip-sml * 1.5; 1202 | // $split-button-pip-default-float-sml: rem-calc(-6); 1203 | 1204 | // We use these to control medium split buttons 1205 | // $split-button-padding-med: $button-pip-med * 9; 1206 | // $split-button-span-width-med: $button-pip-med * 5.5; 1207 | // $split-button-pip-size-med: $button-pip-med - rem-calc(3); 1208 | // $split-button-pip-top-med: $button-pip-med * 1.5; 1209 | // $split-button-pip-default-float-med: rem-calc(-6); 1210 | 1211 | // We use these to control large split buttons 1212 | // $split-button-padding-lrg: $button-pip-lrg * 8; 1213 | // $split-button-span-width-lrg: $button-pip-lrg * 5; 1214 | // $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); 1215 | // $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5); 1216 | // $split-button-pip-default-float-lrg: rem-calc(-6); 1217 | 1218 | // 28. Sub Nav 1219 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1220 | 1221 | // $include-html-nav-classes: $include-html-classes; 1222 | 1223 | // We use these to control margin and padding 1224 | // $sub-nav-list-margin: rem-calc(-4 0 18); 1225 | // $sub-nav-list-padding-top: rem-calc(4); 1226 | 1227 | // We use this to control the definition 1228 | // $sub-nav-font-family: $body-font-family; 1229 | // $sub-nav-font-size: rem-calc(14); 1230 | // $sub-nav-font-color: $aluminum; 1231 | // $sub-nav-font-weight: $font-weight-normal; 1232 | // $sub-nav-text-decoration: none; 1233 | // $sub-nav-padding: rem-calc(3 16); 1234 | // $sub-nav-border-radius: 3px; 1235 | // $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%); 1236 | 1237 | 1238 | // We use these to control the active item styles 1239 | 1240 | // $sub-nav-active-font-weight: $font-weight-normal; 1241 | // $sub-nav-active-bg: $primary-color; 1242 | // $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%); 1243 | // $sub-nav-active-color: $white; 1244 | // $sub-nav-active-padding: $sub-nav-padding; 1245 | // $sub-nav-active-cursor: default; 1246 | 1247 | // $sub-nav-item-divider: ""; 1248 | // $sub-nav-item-divider-margin: rem-calc(12); 1249 | 1250 | // 29. Switch 1251 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1252 | 1253 | // $include-html-form-classes: $include-html-classes; 1254 | 1255 | // Controlling background color for the switch container 1256 | // $switch-bg: $gainsboro; 1257 | 1258 | // We use these to control the switch heights for our default classes 1259 | // $switch-height-tny: 1.5rem; 1260 | // $switch-height-sml: 1.75rem; 1261 | // $switch-height-med: 2rem; 1262 | // $switch-height-lrg: 2.5rem; 1263 | // $switch-bottom-margin: 1.5rem; 1264 | 1265 | // We use these to style the switch-paddle 1266 | // $switch-paddle-bg: $white; 1267 | // $switch-paddle-transition-speed: .15s; 1268 | // $switch-paddle-transition-ease: ease-out; 1269 | // $switch-active-color: $primary-color; 1270 | 1271 | // 30. Tables 1272 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1273 | 1274 | // $include-html-table-classes: $include-html-classes; 1275 | 1276 | // These control the background color for the table and even rows 1277 | // $table-bg: $white; 1278 | // $table-even-row-bg: $snow; 1279 | 1280 | // These control the table cell border style 1281 | // $table-border-style: solid; 1282 | // $table-border-size: 1px; 1283 | // $table-border-color: $gainsboro; 1284 | 1285 | // These control the table head styles 1286 | // $table-head-bg: $white-smoke; 1287 | // $table-head-font-size: rem-calc(14); 1288 | // $table-head-font-color: $jet; 1289 | // $table-head-font-weight: $font-weight-bold; 1290 | // $table-head-padding: rem-calc(8 10 10); 1291 | 1292 | // These control the table foot styles 1293 | // $table-foot-bg: $table-head-bg; 1294 | // $table-foot-font-size: $table-head-font-size; 1295 | // $table-foot-font-color: $table-head-font-color; 1296 | // $table-foot-font-weight: $table-head-font-weight; 1297 | // $table-foot-padding: $table-head-padding; 1298 | 1299 | // These control the caption 1300 | // table-caption-bg: transparent; 1301 | // $table-caption-font-color: $table-head-font-color; 1302 | // $table-caption-font-size: rem-calc(16); 1303 | // $table-caption-font-weight: bold; 1304 | 1305 | // These control the row padding and font styles 1306 | // $table-row-padding: rem-calc(9 10); 1307 | // $table-row-font-size: rem-calc(14); 1308 | // $table-row-font-color: $jet; 1309 | // $table-line-height: rem-calc(18); 1310 | 1311 | // These are for controlling the layout, display and margin of tables 1312 | // $table-layout: auto; 1313 | // $table-display: table-cell; 1314 | // $table-margin-bottom: rem-calc(20); 1315 | 1316 | 1317 | // 31. Tabs 1318 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1319 | 1320 | // $include-html-tabs-classes: $include-html-classes; 1321 | 1322 | // $tabs-navigation-padding: rem-calc(16); 1323 | // $tabs-navigation-bg-color: $silver; 1324 | // $tabs-navigation-active-bg-color: $white; 1325 | // $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%); 1326 | // $tabs-navigation-font-color: $jet; 1327 | // $tabs-navigation-active-font-color: $tabs-navigation-font-color; 1328 | // $tabs-navigation-font-size: rem-calc(16); 1329 | // $tabs-navigation-font-family: $body-font-family; 1330 | 1331 | // $tabs-content-margin-bottom: rem-calc(24); 1332 | // $tabs-content-padding: ($column-gutter/2); 1333 | 1334 | // $tabs-vertical-navigation-margin-bottom: 1.25rem; 1335 | 1336 | // 32. Thumbnails 1337 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1338 | 1339 | // $include-html-media-classes: $include-html-classes; 1340 | 1341 | // We use these to control border styles 1342 | // $thumb-border-style: solid; 1343 | // $thumb-border-width: 4px; 1344 | // $thumb-border-color: $white; 1345 | // $thumb-box-shadow: 0 0 0 1px rgba($black,.2); 1346 | // $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5); 1347 | 1348 | // Radius and transition speed for thumbs 1349 | // $thumb-radius: $global-radius; 1350 | // $thumb-transition-speed: 200ms; 1351 | 1352 | // 33. Tooltips 1353 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1354 | 1355 | // $include-html-tooltip-classes: $include-html-classes; 1356 | 1357 | // $has-tip-border-bottom: dotted 1px $iron; 1358 | // $has-tip-font-weight: $font-weight-bold; 1359 | // $has-tip-font-color: $oil; 1360 | // $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%); 1361 | // $has-tip-font-color-hover: $primary-color; 1362 | // $has-tip-cursor-type: help; 1363 | 1364 | // $tooltip-padding: rem-calc(12); 1365 | // $tooltip-bg: $oil; 1366 | // $tooltip-font-size: rem-calc(14); 1367 | // $tooltip-font-weight: $font-weight-normal; 1368 | // $tooltip-font-color: $white; 1369 | // $tooltip-line-height: 1.3; 1370 | // $tooltip-close-font-size: rem-calc(10); 1371 | // $tooltip-close-font-weight: $font-weight-normal; 1372 | // $tooltip-close-font-color: $monsoon; 1373 | // $tooltip-font-size-sml: rem-calc(14); 1374 | // $tooltip-radius: $global-radius; 1375 | // $tooltip-rounded: $global-rounded; 1376 | // $tooltip-pip-size: 5px; 1377 | // $tooltip-max-width: 300px; 1378 | 1379 | // 34. Top Bar 1380 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1381 | 1382 | // $include-html-top-bar-classes: $include-html-classes; 1383 | 1384 | // Background color for the top bar 1385 | // $topbar-bg-color: $oil; 1386 | // $topbar-bg: $topbar-bg-color; 1387 | 1388 | // Height and margin 1389 | // $topbar-height: rem-calc(45); 1390 | // $topbar-margin-bottom: 0; 1391 | 1392 | // Controlling the styles for the title in the top bar 1393 | // $topbar-title-weight: $font-weight-normal; 1394 | // $topbar-title-font-size: rem-calc(17); 1395 | 1396 | // Set the link colors and styles for top-level nav 1397 | // $topbar-link-color: $white; 1398 | // $topbar-link-color-hover: $white; 1399 | // $topbar-link-color-active: $white; 1400 | // $topbar-link-color-active-hover: $white; 1401 | // $topbar-link-weight: $font-weight-normal; 1402 | // $topbar-link-font-size: rem-calc(13); 1403 | // $topbar-link-hover-lightness: -10%; // Darken by 10% 1404 | // $topbar-link-bg: $topbar-bg; 1405 | // $topbar-link-bg-hover: $oil; 1406 | // $topbar-link-bg-color-hover: $charcoal; 1407 | // $topbar-link-bg-active: $primary-color; 1408 | // $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%); 1409 | // $topbar-link-font-family: $body-font-family; 1410 | // $topbar-link-text-transform: none; 1411 | // $topbar-link-padding: ($topbar-height / 3); 1412 | // $topbar-back-link-size: rem-calc(18); 1413 | // $topbar-link-dropdown-padding: rem-calc(20); 1414 | // $topbar-button-font-size: 0.75rem; 1415 | // $topbar-button-top: 7px; 1416 | 1417 | // Style the top bar dropdown elements 1418 | // $topbar-dropdown-bg: $oil; 1419 | // $topbar-dropdown-link-color: $white; 1420 | // $topbar-dropdown-link-color-hover: $topbar-link-color-hover; 1421 | // $topbar-dropdown-link-bg: $oil; 1422 | // $topbar-dropdown-link-bg-hover: $oil; 1423 | // $topbar-dropdown-link-weight: $font-weight-normal; 1424 | // $topbar-dropdown-toggle-size: 5px; 1425 | // $topbar-dropdown-toggle-color: $white; 1426 | // $topbar-dropdown-toggle-alpha: 0.4; 1427 | 1428 | // $topbar-dropdown-label-color: $monsoon; 1429 | // $topbar-dropdown-label-text-transform: uppercase; 1430 | // $topbar-dropdown-label-font-weight: $font-weight-bold; 1431 | // $topbar-dropdown-label-font-size: rem-calc(10); 1432 | // $topbar-dropdown-label-bg: $oil; 1433 | 1434 | // Top menu icon styles 1435 | // $topbar-menu-link-transform: uppercase; 1436 | // $topbar-menu-link-font-size: rem-calc(13); 1437 | // $topbar-menu-link-weight: $font-weight-bold; 1438 | // $topbar-menu-link-color: $white; 1439 | // $topbar-menu-icon-color: $white; 1440 | // $topbar-menu-link-color-toggled: $jumbo; 1441 | // $topbar-menu-icon-color-toggled: $jumbo; 1442 | // $topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon 1443 | 1444 | // Transitions and breakpoint styles 1445 | // $topbar-transition-speed: 300ms; 1446 | // Using rem-calc for the below breakpoint causes issues with top bar 1447 | // $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout 1448 | // $topbar-media-query: $medium-up; 1449 | 1450 | // Top-bar input styles 1451 | // $topbar-input-height: rem-calc(28); 1452 | 1453 | // Divider Styles 1454 | // $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%); 1455 | // $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%); 1456 | 1457 | // Sticky Class 1458 | // $topbar-sticky-class: ".sticky"; 1459 | // $topbar-arrows: true; //Set false to remove the triangle icon from the menu item 1460 | // $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li// 1461 | 1462 | // 36. Visibility Classes 1463 | // - - - - - - - - - - - - - - - - - - - - - - - - - 1464 | 1465 | // $include-html-visibility-classes: $include-html-classes; 1466 | // $include-accessibility-classes: true; 1467 | // $include-table-visibility-classes: true; 1468 | // $include-legacy-visibility-classes: true; 1469 | --------------------------------------------------------------------------------