diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000000..cefda15c0b
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,8 @@
+language: node_js
+
+services:
+ - mongodb
+
+node_js:
+ - '0.11'
+ - '0.10'
\ No newline at end of file
diff --git a/README.md b/README.md
index 27c40e8311..6e794ebdc5 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@

-Hackathon Starter [](https://david-dm.org/sahat/hackathon-starter)
+Hackathon Starter [](https://david-dm.org/sahat/hackathon-starter) [](https://travis-ci.org/sahat/hackathon-starter)
=================
A boilerplate for **Node.js** web applications.
@@ -35,6 +35,7 @@ Table of Contents
- [Getting Started](#getting-started)
- [Obtaining API Keys](#obtaining-api-keys)
- [Project Structure](#project-structure)
+- [List of Packages](#list-of-packages)
- [Useful Tools](#useful-tools)
- [Recommended Design](#recommended-design)
- [Recommended Node.js Libraries](#recommended-nodejs-libraries)
@@ -66,6 +67,7 @@ Features
- Change Password
- Link multiple OAuth strategies to one account
- Delete Account
+ - Forgot Password
- **API Examples**: Facebook, Foursquare, Last.fm, Tumblr, Twitter, PayPal, and more.
Prerequisites
@@ -89,7 +91,7 @@ Getting Started
The easiest way to get started is to clone the repository:
```bash
-# Fetch only the latest commits.
+# Fetch only the latest commits
git clone --depth=1 git@github.com:sahat/hackathon-starter.git my-project
cd my-project
@@ -100,12 +102,12 @@ npm install
node app.js
```
->:exclamation: **Note**: I strongly recommend installing nodemon `sudo npm install -g nodemon`.
->It will monitor for any changes in your node.js
->application and automatically restart the server. Once installed, instead of `node app.js` use `nodemon app.js`.
->It is a big time saver in the long run.
+:exclamation: **Note**: I strongly recommend installing nodemon `sudo npm install -g nodemon`.
+It will monitor for any changes in your node.js
+application and automatically restart the server. Once installed, instead of `node app.js` use `nodemon app.js`.
+It will save you a lot of time in the long run, because you won't need to manually restart the server each time you make a change.
-Next up, if you want to use any of the APIs or OAuth authentication methods, you will need to obtain
+Next, if you want to use any of the included APIs or OAuth authentication methods, you will need to obtain
appropriate credentials: Client ID, Client Secret, API Key, or Username & Password. You will
need to go through each provider to generate new credentials.
@@ -114,6 +116,13 @@ Obtaining API Keys
:pushpin: You could support all 5 authentication methods by setting up OAuth keys, but you don't have to. If you would only like to have **Facebook sign-in** and **Local sign-in** with email and password, in **secrets.js** set `googleAuth: false`, `twitterOauth: false`, `githubAuth: false`. By doing so, *Google, Twitter and Github* buttons will not show up on the *Login* page. If you set `localAuth: false`, users will not be able to login/create an account with email and password or change password in the *Account Management* page.
+:bulb: Alternatively, if you would like to completely remove authentication methods that you do not plan on using, you will need to manually delete the code yourself. Let's say you want to keep only **Local authentication**. Start by deleting *FacebookStrategy, TwitterStrategy, GitHubStrategy, GoogleStrategy* `require` lines and their corresponding defined strategies in **passport.js**. Then in **login.jade** template delete the entire `.btn-group`, leaving only the form with Email and Password.
+Update **User.js** model by deleting the following fields: `facebook`, `github`, `google`, `twitter`. In your **profile.jade** template delete the entire code starting with **h3 Linked Accounts**. And finally delete the corresponding routes that have **/auth/provider** and **/auth/provider/callback**, for example:
+```js
+app.get('/auth/facebook', passport.authenticate('facebook', { scope: ['email', 'user_location'] }));
+app.get('/auth/facebook/callback', passport.authenticate('facebook', { successRedirect: '/', failureRedirect: '/login' }));
+```
+
- Visit [Google Cloud Console](https://cloud.google.com/console/project)
- Click **CREATE PROJECT** button
@@ -250,10 +259,42 @@ Project Structure
| app.js | Main application file. |
| cluster_app.js | Runs multiple instances of `app.js` using Node.js clusters.|
+:exclamation: **Note:** There is no preference how you name or structure your views. You could place all your templates in a top-level `views` directory without having a nested folder structure, if that makes things easier for you. Just don't forget to update `extends ../layout` and corresponding `res.render()` method in controllers.
-:exclamation: **Note:** There is no difference how you name or structure your views. You could place all your templates in a top-level `views` directory without having a nested folder structure, if that makes things easier for you. Just don't forget to update `extends ../layout` and corresponding `res.render()` method in controllers. For smaller apps, I find having a flat folder structure to be easier to work with.
+List of Packages
+----------------
+| Package | Description |
+| ------------- |:-------------:|
+| async | Utility library that provides asynchronous control flow. |
+| bcrypt-nodejs | Library for hashing and salting user passwords. |
+| cheerio | Scrape web pages using jQuery-style syntax. |
+| connect-mongo | MongoDB session store for Express. |
+| connect-assets | Compiles LESS stylesheets, concatenates/minifies JavaScript. |
+| express | Web framework. |
+| express-flash | Provides flash messages for Express. Uses connect-flash internally. |
+| express-validator | Easy form validation for Express. Uses node-validator internally. |
+| fbgraph | Facebook Graph API library |
+| github-api | GitHub API library |
+| jade | Template engine for node.js |
+| lastfm | Last.fm API library |
+| less | LESS compiler. Used implicitly by connect-assets. |
+| mongoose | MongoDB object modeling tool |
+| node-foursquare | Foursquare API library |
+| nodemailer | Node.js library for sending emails |
+| passport | Simple and elegant authentication library for node.js |
+| passport-facebook | Sign-in with Facebook plugin. |
+| passport-github | Sign-in with GitHub plugin. |
+| passport-google-oauth | Sign-in with Google plugin. |
+| passport-twitter | Sign-in with Twitter plugin. |
+| passport-local | Sign-in with Username and Password plugin. |
+| passport-oauth | Allows you to set up your own OAuth 1.0a and OAuth 2.0 strategies. |
+| request | Simplified HTTP request library. |
+| tumblr.js | Tumblr API library. |
+| underscore | Handy JavaScript utlities library. |
+| paypal-rest-sdk | PayPal API library. |
+| twilio | Twilio API library. |
+| validator | Used in conjunction with express-validator in **controllers/api.js**. |
-:bangbang: **Note:** Although your main template - **layout.jade** only knows about `/css/styles.css` file, you should be editing **styles.less** stylesheet. Express will automatically generate minified **styles.css** whenever there are changes in LESS file. This is done via [less-middleware](https://github.com/emberfeather/less.js-middleware) node.js library.
Useful Tools
------------
@@ -273,6 +314,7 @@ Recommended Design
- [Creative Link Effects](http://tympanus.net/Development/CreativeLinkEffects/) - Beautiful link effects in CSS.
- [Medium Scroll Effect](http://codepen.io/andreasstorm/pen/pyjEh) - Fade in/out header background image as you scroll.
- [HTML5UP](http://html5up.net/) - Beautifully designed HTML templates.
+- [Progre(c)ss](https://github.com/jh3y/progre-c-ss) - Pure CSS progress bars.
Recommended Node.js Libraries
-----------------------------
@@ -281,6 +323,7 @@ Recommended Node.js Libraries
- [Nodemailer](https://github.com/andris9/Nodemailer) - send emails with node.js (without sendgrid or mailgun).
- [filesize.js](http://filesizejs.com/) - make file size pretty, e.g. `filesize(265318); // "265.32 kB"`.
- [Numeral.js](http://numeraljs.com) - a javascript library for formatting and manipulating numbers.
+- [Node Inspector](https://github.com/node-inspector/node-inspector) - Node.js debugger based on Chrome Developer Tools.
Recommended Client-Side libraries
---------------------------------
@@ -297,15 +340,15 @@ Recommended Client-Side libraries
- [select.js](http://github.hubspot.com/select/docs/welcome/) - Styleable select elements.
- [drop.js](http://github.hubspot.com/drop/docs/welcome/) - Powerful Javascript and CSS library for creating dropdowns and other floating displays.
- [scrollReveal.js](https://github.com/julianlloyd/scrollReveal.js) - Declarative on-scroll reveal animations.
+- [InstantClick](http://instantclick.io) - Makes your pages load instantly by pre-loading them on mouse hover.
Pro Tips
--------
-- When you install a new npm package, add a *--save* flag and it will be automatially
+- When installing an NPM package, add a *--save* flag, and it will be automatially
added to `package.json` as well. For example, `npm install --save moment`.
- Use [async.parallel()](https://github.com/caolan/async#parallel) when you neeed to run multiple
asynchronous tasks, and then render a page, but only when all tasks are completed. For example, you might
-want to scrape 3 different websites for some data (async operation) and render the results
-on a page after all 3 websites have been scraped.
+want to scrape 3 different websites for some data (async operation) and render the results in a template after all 3 websites have been scraped.
- Need to find a specific object inside an Array? Use [_.findWhere](http://underscorejs.org/#findWhere) function from Underscore.js. For example, this is how you would retrieve a Twitter token from database: `var token = _.findWhere(req.user.tokens, { kind: 'twitter' });`, where `req.user.tokens` is an Array, and a second parameter is an object with a given key/value.
- If you right click and select **View Page Source**, notice how *Express*
minified HTML for you. If you would like to see non-minified markup,
@@ -316,9 +359,12 @@ FAQ
### Why do I get `403 Error: Forbidden` when submitting a POST form?
You need to add this hidden input element to your form. This has been added in the
pull request [#40](https://github.com/sahat/hackathon-starter/pull/40).
+
```
input(type='hidden', name='_csrf', value=token)
```
+You can read more about [CSRF protection middleware](http://expressjs.com/api.html#csrf) at the Express API Reference.
+
### What is `cluster_app.js`?
From the [Node.js Documentation](http://nodejs.org/api/cluster.html#cluster_how_it_works):
@@ -346,12 +392,15 @@ script(src='/js/application.js')
```
As soon as you start bringing in more JavaScript libraries, the benefits of concatenating and minifying
JavaScript files will be even greater.
-Using connect-assets library it's as as simple as:
-```jade
+Using **connect-assets** library, it is as as simple as declaring these two lines:
+
+```
!= css('styles') // expects public/css/styles.less
!= js('application') // expects public/js/application.js
```
+:bulb: **Tip:** This works because in *connect-assets* middleware we have specified `helperContext: app.locals`.
+
The only thing you need to remember is to define your JavaScript files inside `public/js/application.js` using this
strange syntax notation (Sprockets-style) borrowed from Rails. I know it's an extra thing to learn
for someone who has never seen Rails asset pipeline before, but in this case, I think benefits outweigh the costs.
@@ -468,14 +517,14 @@ app.get('/escape-velocity', homeController.escapeVelocity);
Restart the server (if you are not using **nodemon**), then you should see the new template at [http://localhost:3000/escape-velocity](http://localhost:3000/escape-velocity).
-I will stop here, but if you would like to use this template as more than just a single page, take a look at how these Jade templates work: `layout.jade` - base template, `index.jade` - home page, `partials/navigation.jade` - Bootstrap navbar, `partials/footer.jade` - sticky footer. You will have to manually break it apart into smaller pieces. Figure out which part of the template you want to keep the same on all pages - that's your new `layout.jade`.
+I will stop right here, but if you would like to use this template as more than just a single page, take a look at how these Jade templates work: `layout.jade` - base template, `index.jade` - home page, `partials/navigation.jade` - Bootstrap navbar, `partials/footer.jade` - sticky footer. You will have to manually break it apart into smaller pieces. Figure out which part of the template you want to keep the same on all pages - that's your new `layout.jade`.
Then, each page that changes, be it `index.jade`, `about.jade`, `contact.jade`
-will be embedded in the new `layout.jade` via `block content`.
+will be embedded in your new `layout.jade` via `block content`. Use existing templates as a reference.
-This is a lengthy process, I know, and templates you get from outside **HTML5**UP,
-will have yet another grid system. That's why I chose Bootstrap CSS for the Hackathon Starter.
- Most people are familiar with Bootstrap, it's easy to get started, very extendable.
- You can also buy a Bootstrap theme drop it in into your project, and everything looks great without a single change to your markup or CSS class names. However, if you would like to go with a completely custom design, there you have it!
+This is a rather lengthy process, and templates you get from elsewhere,
+might have yet another grid system. That's why I chose *Bootstrap* for the Hackathon Starter.
+ Many people are already familiar with *Bootstrap*, plus it's easy to get started with it if you have never used *Bootstrap*.
+ You can also buy many beautifully designed *Bootstrap* themes at [Themeforest](http://themeforest.net/), and use them as a drop-in replacement for Hackathon Starter. However, if you would like to go with a completely custom HTML/CSS design, this should help you to get started!
`, ``, and ``.
-@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
-@font-family-base: @font-family-sans-serif;
+@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-family-base: @font-family-sans-serif;
-@font-size-base: 14px;
-@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
+@font-size-base: 14px;
+@font-size-large: ceil((@font-size-base * 1.25));
+// ~18px
+@font-size-small: ceil((@font-size-base * 0.85));
+// ~12px
-@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
-@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
-@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
-@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
-@font-size-h5: @font-size-base;
-@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
+@font-size-h1: floor((@font-size-base * 2.6));
+// ~36px
+@font-size-h2: floor((@font-size-base * 2.15));
+// ~30px
+@font-size-h3: ceil((@font-size-base * 1.7));
+// ~24px
+@font-size-h4: ceil((@font-size-base * 1.25));
+// ~18px
+@font-size-h5: @font-size-base;
+@font-size-h6: ceil((@font-size-base * 0.85));
+// ~12px
//** Unit-less `line-height` for use in components like buttons.
-@line-height-base: 1.428571429; // 20/14
+@line-height-base: 1.428571429;
+// 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
+@line-height-computed: floor((@font-size-base * @line-height-base));
+// ~20px
//** By default, this inherits from the ``.
-@headings-font-family: inherit;
-@headings-font-weight: 500;
-@headings-line-height: 1.1;
-@headings-color: inherit;
-
+@headings-font-family: inherit;
+@headings-font-weight: 500;
+@headings-line-height: 1.1;
+@headings-color: inherit;
//-- Iconography
//
//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
-@icon-font-path: "../fonts/";
-@icon-font-name: "glyphicons-halflings-regular";
-@icon-font-svg-id: "glyphicons_halflingsregular";
+@icon-font-path: "../fonts/";
+@icon-font-name: "glyphicons-halflings-regular";
+@icon-font-svg-id: "glyphicons_halflingsregular";
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-@padding-base-vertical: 6px;
-@padding-base-horizontal: 12px;
+@padding-base-vertical: 6px;
+@padding-base-horizontal: 12px;
-@padding-large-vertical: 10px;
-@padding-large-horizontal: 16px;
+@padding-large-vertical: 10px;
+@padding-large-horizontal: 16px;
-@padding-small-vertical: 5px;
-@padding-small-horizontal: 10px;
+@padding-small-vertical: 5px;
+@padding-small-horizontal: 10px;
-@padding-xs-vertical: 1px;
-@padding-xs-horizontal: 5px;
+@padding-xs-vertical: 1px;
+@padding-xs-horizontal: 5px;
-@line-height-large: 1.33;
-@line-height-small: 1.5;
+@line-height-large: 1.33;
+@line-height-small: 1.5;
-@border-radius-base: 4px;
-@border-radius-large: 6px;
-@border-radius-small: 3px;
+@border-radius-base: 4px;
+@border-radius-large: 6px;
+@border-radius-small: 3px;
//** Global color for active items (e.g., navs or dropdowns).
-@component-active-color: #fff;
+@component-active-color: #fff;
//** Global background color for active items (e.g., navs or dropdowns).
-@component-active-bg: @brand-primary;
+@component-active-bg: @brand-primary;
//** Width of the `border` for generating carets that indicator dropdowns.
-@caret-width-base: 4px;
+@caret-width-base: 4px;
//** Carets increase slightly in size for larger components.
-@caret-width-large: 5px;
-
+@caret-width-large: 5px;
//== Tables
//
//## Customizes the `.table` component with basic values, each used across all table variations.
//** Padding for ``s and ` `s.
-@table-cell-padding: 8px;
+@table-cell-padding: 8px;
//** Padding for cells in `.table-condensed`.
-@table-condensed-cell-padding: 5px;
+@table-condensed-cell-padding: 5px;
//** Default background color used for all tables.
-@table-bg: transparent;
+@table-bg: transparent;
//** Background color used for `.table-striped`.
-@table-bg-accent: #f9f9f9;
+@table-bg-accent: #f9f9f9;
//** Background color used for `.table-hover`.
-@table-bg-hover: #f5f5f5;
-@table-bg-active: @table-bg-hover;
+@table-bg-hover: #f5f5f5;
+@table-bg-active: @table-bg-hover;
//** Border color for table and cell borders.
-@table-border-color: #ddd;
-
+@table-border-color: #ddd;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
-@btn-font-weight: normal;
+@btn-font-weight: normal;
-@btn-default-color: #333;
-@btn-default-bg: #fff;
-@btn-default-border: #ccc;
+@btn-default-color: #333;
+@btn-default-bg: #fff;
+@btn-default-border: #ccc;
-@btn-primary-color: #fff;
-@btn-primary-bg: @brand-primary;
-@btn-primary-border: darken(@btn-primary-bg, 5%);
+@btn-primary-color: #fff;
+@btn-primary-bg: @brand-primary;
+@btn-primary-border: darken(@btn-primary-bg, 5%);
-@btn-success-color: #fff;
-@btn-success-bg: @brand-success;
-@btn-success-border: darken(@btn-success-bg, 5%);
+@btn-success-color: #fff;
+@btn-success-bg: @brand-success;
+@btn-success-border: darken(@btn-success-bg, 5%);
-@btn-info-color: #fff;
-@btn-info-bg: @brand-info;
-@btn-info-border: darken(@btn-info-bg, 5%);
+@btn-info-color: #fff;
+@btn-info-bg: @brand-info;
+@btn-info-border: darken(@btn-info-bg, 5%);
-@btn-warning-color: #fff;
-@btn-warning-bg: @brand-warning;
-@btn-warning-border: darken(@btn-warning-bg, 5%);
+@btn-warning-color: #fff;
+@btn-warning-bg: @brand-warning;
+@btn-warning-border: darken(@btn-warning-bg, 5%);
-@btn-danger-color: #fff;
-@btn-danger-bg: @brand-danger;
-@btn-danger-border: darken(@btn-danger-bg, 5%);
-
-@btn-link-disabled-color: @gray-light;
+@btn-danger-color: #fff;
+@btn-danger-bg: @brand-danger;
+@btn-danger-border: darken(@btn-danger-bg, 5%);
+@btn-link-disabled-color: @gray-light;
//== Forms
//
//##
//** `` background color
-@input-bg: #fff;
+@input-bg: #fff;
//** `` background color
-@input-bg-disabled: @gray-lighter;
+@input-bg-disabled: @gray-lighter;
//** Text color for ``s
-@input-color: @gray;
+@input-color: @gray;
//** `` border color
-@input-border: #ccc;
+@input-border: #ccc;
//** `` border radius
-@input-border-radius: @border-radius-base;
+@input-border-radius: @border-radius-base;
//** Border color for inputs on focus
-@input-border-focus: #66afe9;
+@input-border-focus: #66afe9;
//** Placeholder text color
-@input-color-placeholder: @gray-light;
+@input-color-placeholder: @gray-light;
//** Default `.form-control` height
-@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
+@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
//** Large `.form-control` height
-@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
//** Small `.form-control` height
-@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
+@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
-@legend-color: @gray-dark;
-@legend-border-color: #e5e5e5;
+@legend-color: @gray-dark;
+@legend-border-color: #e5e5e5;
//** Background color for textual input addons
-@input-group-addon-bg: @gray-lighter;
+@input-group-addon-bg: @gray-lighter;
//** Border color for textual input addons
@input-group-addon-border-color: @input-border;
-
//== Dropdowns
//
//## Dropdown menu container and contents.
//** Background for the dropdown menu.
-@dropdown-bg: #fff;
+@dropdown-bg: #fff;
//** Dropdown menu `border-color`.
-@dropdown-border: rgba(0,0,0,.15);
+@dropdown-border: rgba(0, 0, 0, .15);
//** Dropdown menu `border-color` **for IE8**.
-@dropdown-fallback-border: #ccc;
+@dropdown-fallback-border: #ccc;
//** Divider color for between dropdown items.
-@dropdown-divider-bg: #e5e5e5;
+@dropdown-divider-bg: #e5e5e5;
//** Dropdown link text color.
-@dropdown-link-color: @gray-dark;
+@dropdown-link-color: @gray-dark;
//** Hover color for dropdown links.
-@dropdown-link-hover-color: darken(@gray-dark, 5%);
+@dropdown-link-hover-color: darken(@gray-dark, 5%);
//** Hover background for dropdown links.
-@dropdown-link-hover-bg: #f5f5f5;
+@dropdown-link-hover-bg: #f5f5f5;
//** Active dropdown menu item text color.
-@dropdown-link-active-color: @component-active-color;
+@dropdown-link-active-color: @component-active-color;
//** Active dropdown menu item background color.
-@dropdown-link-active-bg: @component-active-bg;
+@dropdown-link-active-bg: @component-active-bg;
//** Disabled dropdown menu item background color.
-@dropdown-link-disabled-color: @gray-light;
+@dropdown-link-disabled-color: @gray-light;
//** Text color for headers within dropdown menus.
-@dropdown-header-color: @gray-light;
+@dropdown-header-color: @gray-light;
// Note: Deprecated @dropdown-caret-color as of v3.1.0
-@dropdown-caret-color: #000;
-
+@dropdown-caret-color: #000;
//-- Z-index master list
//
@@ -243,14 +248,13 @@
//
// Note: These variables are not generated into the Customizer.
-@zindex-navbar: 1000;
-@zindex-dropdown: 1000;
-@zindex-popover: 1010;
-@zindex-tooltip: 1030;
-@zindex-navbar-fixed: 1030;
-@zindex-modal-background: 1040;
-@zindex-modal: 1050;
-
+@zindex-navbar: 1000;
+@zindex-dropdown: 1000;
+@zindex-popover: 1010;
+@zindex-tooltip: 1030;
+@zindex-navbar-fixed: 1030;
+@zindex-modal-background: 1040;
+@zindex-modal: 1050;
//== Media queries breakpoints
//
@@ -258,570 +262,546 @@
// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
-@screen-xs: 480px;
-@screen-xs-min: @screen-xs;
-@screen-phone: @screen-xs-min;
+@screen-xs: 480px;
+@screen-xs-min: @screen-xs;
+@screen-phone: @screen-xs-min;
// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
-@screen-sm: 768px;
-@screen-sm-min: @screen-sm;
-@screen-tablet: @screen-sm-min;
+@screen-sm: 768px;
+@screen-sm-min: @screen-sm;
+@screen-tablet: @screen-sm-min;
// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
-@screen-md: 992px;
-@screen-md-min: @screen-md;
-@screen-desktop: @screen-md-min;
+@screen-md: 992px;
+@screen-md-min: @screen-md;
+@screen-desktop: @screen-md-min;
// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
-@screen-lg: 1200px;
-@screen-lg-min: @screen-lg;
-@screen-lg-desktop: @screen-lg-min;
+@screen-lg: 1200px;
+@screen-lg-min: @screen-lg;
+@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
-@screen-xs-max: (@screen-sm-min - 1);
-@screen-sm-max: (@screen-md-min - 1);
-@screen-md-max: (@screen-lg-min - 1);
-
+@screen-xs-max: (@screen-sm-min - 1);
+@screen-sm-max: (@screen-md-min - 1);
+@screen-md-max: (@screen-lg-min - 1);
//== Grid system
//
//## Define your custom responsive grid.
//** Number of columns in the grid.
-@grid-columns: 12;
+@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width: 30px;
+@grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
-@grid-float-breakpoint: @screen-sm-min;
+@grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
-
-//== Navbar
-//
-//##
-
-// Basics of a navbar
-@navbar-height: 50px;
-@navbar-margin-bottom: @line-height-computed;
-@navbar-border-radius: @border-radius-base;
-@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
-@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
-@navbar-collapse-max-height: 340px;
-
-@navbar-default-color: #777;
-@navbar-default-bg: #f8f8f8;
-@navbar-default-border: darken(@navbar-default-bg, 6.5%);
-
-// Navbar links
-@navbar-default-link-color: #777;
-@navbar-default-link-hover-color: #333;
-@navbar-default-link-hover-bg: transparent;
-@navbar-default-link-active-color: #555;
-@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
-@navbar-default-link-disabled-color: #ccc;
-@navbar-default-link-disabled-bg: transparent;
-
-// Navbar brand label
-@navbar-default-brand-color: @navbar-default-link-color;
-@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
-@navbar-default-brand-hover-bg: transparent;
-
-// Navbar toggle
-@navbar-default-toggle-hover-bg: #ddd;
-@navbar-default-toggle-icon-bar-bg: #888;
-@navbar-default-toggle-border-color: #ddd;
-
-
-// Inverted navbar
-// Reset inverted navbar basics
-@navbar-inverse-color: @gray-light;
-@navbar-inverse-bg: #222;
-@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
-
-// Inverted navbar links
-@navbar-inverse-link-color: @gray-light;
-@navbar-inverse-link-hover-color: #fff;
-@navbar-inverse-link-hover-bg: transparent;
-@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
-@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
-@navbar-inverse-link-disabled-color: #444;
-@navbar-inverse-link-disabled-bg: transparent;
-
-// Inverted navbar brand label
-@navbar-inverse-brand-color: @navbar-inverse-link-color;
-@navbar-inverse-brand-hover-color: #fff;
-@navbar-inverse-brand-hover-bg: transparent;
-
-// Inverted navbar toggle
-@navbar-inverse-toggle-hover-bg: #333;
-@navbar-inverse-toggle-icon-bar-bg: #fff;
-@navbar-inverse-toggle-border-color: #333;
-
-
-//== Navs
-//
-//##
-
-//=== Shared nav styles
-@nav-link-padding: 10px 15px;
-@nav-link-hover-bg: @gray-lighter;
-
-@nav-disabled-link-color: @gray-light;
-@nav-disabled-link-hover-color: @gray-light;
-
-@nav-open-link-hover-color: #fff;
-
-//== Tabs
-@nav-tabs-border-color: #ddd;
-
-@nav-tabs-link-hover-border-color: @gray-lighter;
-
-@nav-tabs-active-link-hover-bg: @body-bg;
-@nav-tabs-active-link-hover-color: @gray;
-@nav-tabs-active-link-hover-border-color: #ddd;
-
-@nav-tabs-justified-link-border-color: #ddd;
-@nav-tabs-justified-active-link-border-color: @body-bg;
-
-//== Pills
-@nav-pills-border-radius: @border-radius-base;
-@nav-pills-active-link-hover-bg: @component-active-bg;
-@nav-pills-active-link-hover-color: @component-active-color;
-
-
-//== Pagination
-//
-//##
-
-@pagination-color: @link-color;
-@pagination-bg: #fff;
-@pagination-border: #ddd;
-
-@pagination-hover-color: @link-hover-color;
-@pagination-hover-bg: @gray-lighter;
-@pagination-hover-border: #ddd;
-
-@pagination-active-color: #fff;
-@pagination-active-bg: @brand-primary;
-@pagination-active-border: @brand-primary;
-
-@pagination-disabled-color: @gray-light;
-@pagination-disabled-bg: #fff;
-@pagination-disabled-border: #ddd;
-
-
-//== Pager
-//
-//##
-
-@pager-bg: @pagination-bg;
-@pager-border: @pagination-border;
-@pager-border-radius: 15px;
-
-@pager-hover-bg: @pagination-hover-bg;
-
-@pager-active-bg: @pagination-active-bg;
-@pager-active-color: @pagination-active-color;
-
-@pager-disabled-color: @pagination-disabled-color;
-
-
-//== Jumbotron
-//
-//##
-
-@jumbotron-padding: 30px;
-@jumbotron-color: inherit;
-@jumbotron-bg: @gray-lighter;
-@jumbotron-heading-color: inherit;
-@jumbotron-font-size: ceil((@font-size-base * 1.5));
-
-
-//== Form states and alerts
-//
-//## Define colors for form feedback states and, by default, alerts.
-
-@state-success-text: #3c763d;
-@state-success-bg: #dff0d8;
-@state-success-border: darken(spin(@state-success-bg, -10), 5%);
-
-@state-info-text: #31708f;
-@state-info-bg: #d9edf7;
-@state-info-border: darken(spin(@state-info-bg, -10), 7%);
-
-@state-warning-text: #8a6d3b;
-@state-warning-bg: #fcf8e3;
-@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
-
-@state-danger-text: #a94442;
-@state-danger-bg: #f2dede;
-@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
-
-
-//== Tooltips
-//
-//##
-
-//** Tooltip max width
-@tooltip-max-width: 200px;
-//** Tooltip text color
-@tooltip-color: #fff;
-//** Tooltip background color
-@tooltip-bg: #000;
-@tooltip-opacity: .9;
-
-//** Tooltip arrow width
-@tooltip-arrow-width: 5px;
-//** Tooltip arrow color
-@tooltip-arrow-color: @tooltip-bg;
-
-
-//== Popovers
-//
-//##
-
-//** Popover body background color
-@popover-bg: #fff;
-//** Popover maximum width
-@popover-max-width: 276px;
-//** Popover border color
-@popover-border-color: rgba(0,0,0,.2);
-//** Popover fallback border color
-@popover-fallback-border-color: #ccc;
-
-//** Popover title background color
-@popover-title-bg: darken(@popover-bg, 3%);
-
-//** Popover arrow width
-@popover-arrow-width: 10px;
-//** Popover arrow color
-@popover-arrow-color: #fff;
-
-//** Popover outer arrow width
-@popover-arrow-outer-width: (@popover-arrow-width + 1);
-//** Popover outer arrow color
-@popover-arrow-outer-color: rgba(0,0,0,.25);
-//** Popover outer arrow fallback color
-@popover-arrow-outer-fallback-color: #999;
-
-
-//== Labels
-//
-//##
-
-//** Default label background color
-@label-default-bg: @gray-light;
-//** Primary label background color
-@label-primary-bg: @brand-primary;
-//** Success label background color
-@label-success-bg: @brand-success;
-//** Info label background color
-@label-info-bg: @brand-info;
-//** Warning label background color
-@label-warning-bg: @brand-warning;
-//** Danger label background color
-@label-danger-bg: @brand-danger;
-
-//** Default label text color
-@label-color: #fff;
-//** Default text color of a linked label
-@label-link-hover-color: #fff;
-
-
-//== Modals
-//
-//##
-
-//** Padding applied to the modal body
-@modal-inner-padding: 20px;
-
-//** Padding applied to the modal title
-@modal-title-padding: 15px;
-//** Modal title line-height
-@modal-title-line-height: @line-height-base;
-
-//** Background color of modal content area
-@modal-content-bg: #fff;
-//** Modal content border color
-@modal-content-border-color: rgba(0,0,0,.2);
-//** Modal content border color **for IE8**
-@modal-content-fallback-border-color: #999;
-
-//** Modal backdrop background color
-@modal-backdrop-bg: #000;
-//** Modal backdrop opacity
-@modal-backdrop-opacity: .5;
-//** Modal header border color
-@modal-header-border-color: #e5e5e5;
-//** Modal footer border color
-@modal-footer-border-color: @modal-header-border-color;
-
-@modal-lg: 900px;
-@modal-md: 600px;
-@modal-sm: 300px;
-
-
-//== Alerts
-//
-//## Define alert colors, border radius, and padding.
-
-@alert-padding: 15px;
-@alert-border-radius: @border-radius-base;
-@alert-link-font-weight: bold;
-
-@alert-success-bg: @state-success-bg;
-@alert-success-text: @state-success-text;
-@alert-success-border: @state-success-border;
-
-@alert-info-bg: @state-info-bg;
-@alert-info-text: @state-info-text;
-@alert-info-border: @state-info-border;
-
-@alert-warning-bg: @state-warning-bg;
-@alert-warning-text: @state-warning-text;
-@alert-warning-border: @state-warning-border;
-
-@alert-danger-bg: @state-danger-bg;
-@alert-danger-text: @state-danger-text;
-@alert-danger-border: @state-danger-border;
-
-
-//== Progress bars
-//
-//##
-
-//** Background color of the whole progress component
-@progress-bg: #f5f5f5;
-//** Progress bar text color
-@progress-bar-color: #fff;
-
-//** Default progress bar color
-@progress-bar-bg: @brand-primary;
-//** Success progress bar color
-@progress-bar-success-bg: @brand-success;
-//** Warning progress bar color
-@progress-bar-warning-bg: @brand-warning;
-//** Danger progress bar color
-@progress-bar-danger-bg: @brand-danger;
-//** Info progress bar color
-@progress-bar-info-bg: @brand-info;
-
-
-//== List group
-//
-//##
-
-//** Background color on `.list-group-item`
-@list-group-bg: #fff;
-//** `.list-group-item` border color
-@list-group-border: #ddd;
-//** List group border radius
-@list-group-border-radius: @border-radius-base;
-
-//** Background color of single list elements on hover
-@list-group-hover-bg: #f5f5f5;
-//** Text color of active list elements
-@list-group-active-color: @component-active-color;
-//** Background color of active list elements
-@list-group-active-bg: @component-active-bg;
-//** Border color of active list elements
-@list-group-active-border: @list-group-active-bg;
-@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
-
-@list-group-link-color: #555;
-@list-group-link-heading-color: #333;
-
-
-//== Panels
-//
-//##
-
-@panel-bg: #fff;
-@panel-body-padding: 15px;
-@panel-border-radius: @border-radius-base;
-
-//** Border color for elements within panels
-@panel-inner-border: #ddd;
-@panel-footer-bg: #f5f5f5;
-
-@panel-default-text: @gray-dark;
-@panel-default-border: #ddd;
-@panel-default-heading-bg: #f5f5f5;
-
-@panel-primary-text: #fff;
-@panel-primary-border: @brand-primary;
-@panel-primary-heading-bg: @brand-primary;
-
-@panel-success-text: @state-success-text;
-@panel-success-border: @state-success-border;
-@panel-success-heading-bg: @state-success-bg;
-
-@panel-info-text: @state-info-text;
-@panel-info-border: @state-info-border;
-@panel-info-heading-bg: @state-info-bg;
-
-@panel-warning-text: @state-warning-text;
-@panel-warning-border: @state-warning-border;
-@panel-warning-heading-bg: @state-warning-bg;
-
-@panel-danger-text: @state-danger-text;
-@panel-danger-border: @state-danger-border;
-@panel-danger-heading-bg: @state-danger-bg;
-
-
-//== Thumbnails
-//
-//##
-
-//** Padding around the thumbnail image
-@thumbnail-padding: 4px;
-//** Thumbnail background color
-@thumbnail-bg: @body-bg;
-//** Thumbnail border color
-@thumbnail-border: #ddd;
-//** Thumbnail border radius
-@thumbnail-border-radius: @border-radius-base;
-
-//** Custom text color for thumbnail captions
-@thumbnail-caption-color: @text-color;
-//** Padding around the thumbnail caption
-@thumbnail-caption-padding: 9px;
-
-
-//== Wells
-//
-//##
-
-@well-bg: #f5f5f5;
-@well-border: darken(@well-bg, 7%);
-
-
-//== Badges
-//
-//##
-
-@badge-color: #fff;
-//** Linked badge text color on hover
-@badge-link-hover-color: #fff;
-@badge-bg: @gray-light;
-
-//** Badge text color in active nav link
-@badge-active-color: @link-color;
-//** Badge background color in active nav link
-@badge-active-bg: #fff;
-
-@badge-font-weight: bold;
-@badge-line-height: 1;
-@badge-border-radius: 10px;
-
-
-//== Breadcrumbs
-//
-//##
-
-@breadcrumb-padding-vertical: 8px;
-@breadcrumb-padding-horizontal: 15px;
-//** Breadcrumb background color
-@breadcrumb-bg: #f5f5f5;
-//** Breadcrumb text color
-@breadcrumb-color: #ccc;
-//** Text color of current page in the breadcrumb
-@breadcrumb-active-color: @gray-light;
-//** Textual separator for between breadcrumb elements
-@breadcrumb-separator: "/";
-
-
-//== Carousel
-//
-//##
-
-@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
-
-@carousel-control-color: #fff;
-@carousel-control-width: 15%;
-@carousel-control-opacity: .5;
-@carousel-control-font-size: 20px;
-
-@carousel-indicator-active-bg: #fff;
-@carousel-indicator-border-color: #fff;
-
-@carousel-caption-color: #fff;
-
-
-//== Close
-//
-//##
-
-@close-font-weight: bold;
-@close-color: #000;
-@close-text-shadow: 0 1px 0 #fff;
-
-
-//== Code
-//
-//##
-
-@code-color: #c7254e;
-@code-bg: #f9f2f4;
-
-@kbd-color: #fff;
-@kbd-bg: #333;
-
-@pre-bg: #f5f5f5;
-@pre-color: @gray-dark;
-@pre-border-color: #ccc;
-@pre-scrollable-max-height: 340px;
-
-
-//== Type
-//
-//##
-
-//** Text muted color
-@text-muted: @gray-light;
-//** Abbreviations and acronyms border color
-@abbr-border-color: @gray-light;
-//** Headings small color
-@headings-small-color: @gray-light;
-//** Blockquote small color
-@blockquote-small-color: @gray-light;
-//** Blockquote border color
-@blockquote-border-color: @gray-lighter;
-//** Page header border color
-@page-header-border-color: @gray-lighter;
-
-
-//== Miscellaneous
-//
-//##
-
-//** Horizontal line color.
-@hr-border: @gray-lighter;
-
-//** Horizontal offset for forms and lists.
-@component-offset-horizontal: 180px;
-
-
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
-@container-tablet: ((720px + @grid-gutter-width));
+@container-tablet: ((720px + @grid-gutter-width));
//** For `@screen-sm-min` and up.
-@container-sm: @container-tablet;
+@container-sm: @container-tablet;
// Medium screen / desktop
-@container-desktop: ((940px + @grid-gutter-width));
+@container-desktop: ((940px + @grid-gutter-width));
//** For `@screen-md-min` and up.
-@container-md: @container-desktop;
+@container-md: @container-desktop;
// Large screen / wide desktop
-@container-large-desktop: ((1140px + @grid-gutter-width));
+@container-large-desktop: ((1140px + @grid-gutter-width));
//** For `@screen-lg-min` and up.
-@container-lg: @container-large-desktop;
+@container-lg: @container-large-desktop;
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+@navbar-height: 50px;
+@navbar-margin-bottom: @line-height-computed;
+@navbar-border-radius: @border-radius-base;
+@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
+@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
+@navbar-collapse-max-height: 340px;
+
+@navbar-default-color: #777;
+@navbar-default-bg: #f8f8f8;
+@navbar-default-border: darken(@navbar-default-bg, 6.5%);
+
+// Navbar links
+@navbar-default-link-color: #777;
+@navbar-default-link-hover-color: #333;
+@navbar-default-link-hover-bg: transparent;
+@navbar-default-link-active-color: #555;
+@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
+@navbar-default-link-disabled-color: #ccc;
+@navbar-default-link-disabled-bg: transparent;
+
+// Navbar brand label
+@navbar-default-brand-color: @navbar-default-link-color;
+@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
+@navbar-default-brand-hover-bg: transparent;
+
+// Navbar toggle
+@navbar-default-toggle-hover-bg: #ddd;
+@navbar-default-toggle-icon-bar-bg: #888;
+@navbar-default-toggle-border-color: #ddd;
+
+// Inverted navbar
+// Reset inverted navbar basics
+@navbar-inverse-color: @gray-light;
+@navbar-inverse-bg: #222;
+@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
+
+// Inverted navbar links
+@navbar-inverse-link-color: @gray-light;
+@navbar-inverse-link-hover-color: #fff;
+@navbar-inverse-link-hover-bg: transparent;
+@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
+@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-disabled-color: #444;
+@navbar-inverse-link-disabled-bg: transparent;
+
+// Inverted navbar brand label
+@navbar-inverse-brand-color: @navbar-inverse-link-color;
+@navbar-inverse-brand-hover-color: #fff;
+@navbar-inverse-brand-hover-bg: transparent;
+
+// Inverted navbar toggle
+@navbar-inverse-toggle-hover-bg: #333;
+@navbar-inverse-toggle-icon-bar-bg: #fff;
+@navbar-inverse-toggle-border-color: #333;
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+@nav-link-padding: 10px 15px;
+@nav-link-hover-bg: @gray-lighter;
+
+@nav-disabled-link-color: @gray-light;
+@nav-disabled-link-hover-color: @gray-light;
+
+@nav-open-link-hover-color: #fff;
+
+//== Tabs
+@nav-tabs-border-color: #ddd;
+
+@nav-tabs-link-hover-border-color: @gray-lighter;
+
+@nav-tabs-active-link-hover-bg: @body-bg;
+@nav-tabs-active-link-hover-color: @gray;
+@nav-tabs-active-link-hover-border-color: #ddd;
+
+@nav-tabs-justified-link-border-color: #ddd;
+@nav-tabs-justified-active-link-border-color: @body-bg;
+
+//== Pills
+@nav-pills-border-radius: @border-radius-base;
+@nav-pills-active-link-hover-bg: @component-active-bg;
+@nav-pills-active-link-hover-color: @component-active-color;
+
+//== Pagination
+//
+//##
+
+@pagination-color: @link-color;
+@pagination-bg: #fff;
+@pagination-border: #ddd;
+
+@pagination-hover-color: @link-hover-color;
+@pagination-hover-bg: @gray-lighter;
+@pagination-hover-border: #ddd;
+
+@pagination-active-color: #fff;
+@pagination-active-bg: @brand-primary;
+@pagination-active-border: @brand-primary;
+
+@pagination-disabled-color: @gray-light;
+@pagination-disabled-bg: #fff;
+@pagination-disabled-border: #ddd;
+
+//== Pager
+//
+//##
+
+@pager-bg: @pagination-bg;
+@pager-border: @pagination-border;
+@pager-border-radius: 15px;
+
+@pager-hover-bg: @pagination-hover-bg;
+
+@pager-active-bg: @pagination-active-bg;
+@pager-active-color: @pagination-active-color;
+
+@pager-disabled-color: @pagination-disabled-color;
+
+//== Jumbotron
+//
+//##
+
+@jumbotron-padding: 30px;
+@jumbotron-color: inherit;
+@jumbotron-bg: @gray-lighter;
+@jumbotron-heading-color: inherit;
+@jumbotron-font-size: ceil((@font-size-base * 1.5));
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+@state-success-text: #3c763d;
+@state-success-bg: #dff0d8;
+@state-success-border: darken(spin(@state-success-bg, -10), 5%);
+
+@state-info-text: #31708f;
+@state-info-bg: #d9edf7;
+@state-info-border: darken(spin(@state-info-bg, -10), 7%);
+
+@state-warning-text: #8a6d3b;
+@state-warning-bg: #fcf8e3;
+@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
+
+@state-danger-text: #a94442;
+@state-danger-bg: #f2dede;
+@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+@tooltip-max-width: 200px;
+//** Tooltip text color
+@tooltip-color: #fff;
+//** Tooltip background color
+@tooltip-bg: #000;
+@tooltip-opacity: .9;
+
+//** Tooltip arrow width
+@tooltip-arrow-width: 5px;
+//** Tooltip arrow color
+@tooltip-arrow-color: @tooltip-bg;
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+@popover-bg: #fff;
+//** Popover maximum width
+@popover-max-width: 276px;
+//** Popover border color
+@popover-border-color: rgba(0, 0, 0, .2);
+//** Popover fallback border color
+@popover-fallback-border-color: #ccc;
+
+//** Popover title background color
+@popover-title-bg: darken(@popover-bg, 3%);
+
+//** Popover arrow width
+@popover-arrow-width: 10px;
+//** Popover arrow color
+@popover-arrow-color: #fff;
+
+//** Popover outer arrow width
+@popover-arrow-outer-width: (@popover-arrow-width + 1);
+//** Popover outer arrow color
+@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
+//** Popover outer arrow fallback color
+@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
+
+//== Labels
+//
+//##
+
+//** Default label background color
+@label-default-bg: @gray-light;
+//** Primary label background color
+@label-primary-bg: @brand-primary;
+//** Success label background color
+@label-success-bg: @brand-success;
+//** Info label background color
+@label-info-bg: @brand-info;
+//** Warning label background color
+@label-warning-bg: @brand-warning;
+//** Danger label background color
+@label-danger-bg: @brand-danger;
+
+//** Default label text color
+@label-color: #fff;
+//** Default text color of a linked label
+@label-link-hover-color: #fff;
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+@modal-inner-padding: 20px;
+
+//** Padding applied to the modal title
+@modal-title-padding: 15px;
+//** Modal title line-height
+@modal-title-line-height: @line-height-base;
+
+//** Background color of modal content area
+@modal-content-bg: #fff;
+//** Modal content border color
+@modal-content-border-color: rgba(0, 0, 0, .2);
+//** Modal content border color **for IE8**
+@modal-content-fallback-border-color: #999;
+
+//** Modal backdrop background color
+@modal-backdrop-bg: #000;
+//** Modal backdrop opacity
+@modal-backdrop-opacity: .5;
+//** Modal header border color
+@modal-header-border-color: #e5e5e5;
+//** Modal footer border color
+@modal-footer-border-color: @modal-header-border-color;
+
+@modal-lg: 900px;
+@modal-md: 600px;
+@modal-sm: 300px;
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+@alert-padding: 15px;
+@alert-border-radius: @border-radius-base;
+@alert-link-font-weight: bold;
+
+@alert-success-bg: @state-success-bg;
+@alert-success-text: @state-success-text;
+@alert-success-border: @state-success-border;
+
+@alert-info-bg: @state-info-bg;
+@alert-info-text: @state-info-text;
+@alert-info-border: @state-info-border;
+
+@alert-warning-bg: @state-warning-bg;
+@alert-warning-text: @state-warning-text;
+@alert-warning-border: @state-warning-border;
+
+@alert-danger-bg: @state-danger-bg;
+@alert-danger-text: @state-danger-text;
+@alert-danger-border: @state-danger-border;
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+@progress-bg: #f5f5f5;
+//** Progress bar text color
+@progress-bar-color: #fff;
+
+//** Default progress bar color
+@progress-bar-bg: @brand-primary;
+//** Success progress bar color
+@progress-bar-success-bg: @brand-success;
+//** Warning progress bar color
+@progress-bar-warning-bg: @brand-warning;
+//** Danger progress bar color
+@progress-bar-danger-bg: @brand-danger;
+//** Info progress bar color
+@progress-bar-info-bg: @brand-info;
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+@list-group-bg: #fff;
+//** `.list-group-item` border color
+@list-group-border: #ddd;
+//** List group border radius
+@list-group-border-radius: @border-radius-base;
+
+//** Background color of single list elements on hover
+@list-group-hover-bg: #f5f5f5;
+//** Text color of active list elements
+@list-group-active-color: @component-active-color;
+//** Background color of active list elements
+@list-group-active-bg: @component-active-bg;
+//** Border color of active list elements
+@list-group-active-border: @list-group-active-bg;
+@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
+
+@list-group-link-color: #555;
+@list-group-link-heading-color: #333;
+
+//== Panels
+//
+//##
+
+@panel-bg: #fff;
+@panel-body-padding: 15px;
+@panel-border-radius: @border-radius-base;
+
+//** Border color for elements within panels
+@panel-inner-border: #ddd;
+@panel-footer-bg: #f5f5f5;
+
+@panel-default-text: @gray-dark;
+@panel-default-border: #ddd;
+@panel-default-heading-bg: #f5f5f5;
+
+@panel-primary-text: #fff;
+@panel-primary-border: @brand-primary;
+@panel-primary-heading-bg: @brand-primary;
+
+@panel-success-text: @state-success-text;
+@panel-success-border: @state-success-border;
+@panel-success-heading-bg: @state-success-bg;
+
+@panel-info-text: @state-info-text;
+@panel-info-border: @state-info-border;
+@panel-info-heading-bg: @state-info-bg;
+
+@panel-warning-text: @state-warning-text;
+@panel-warning-border: @state-warning-border;
+@panel-warning-heading-bg: @state-warning-bg;
+
+@panel-danger-text: @state-danger-text;
+@panel-danger-border: @state-danger-border;
+@panel-danger-heading-bg: @state-danger-bg;
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+@thumbnail-padding: 4px;
+//** Thumbnail background color
+@thumbnail-bg: @body-bg;
+//** Thumbnail border color
+@thumbnail-border: #ddd;
+//** Thumbnail border radius
+@thumbnail-border-radius: @border-radius-base;
+
+//** Custom text color for thumbnail captions
+@thumbnail-caption-color: @text-color;
+//** Padding around the thumbnail caption
+@thumbnail-caption-padding: 9px;
+
+//== Wells
+//
+//##
+
+@well-bg: #f5f5f5;
+@well-border: darken(@well-bg, 7%);
+
+//== Badges
+//
+//##
+
+@badge-color: #fff;
+//** Linked badge text color on hover
+@badge-link-hover-color: #fff;
+@badge-bg: @gray-light;
+
+//** Badge text color in active nav link
+@badge-active-color: @link-color;
+//** Badge background color in active nav link
+@badge-active-bg: #fff;
+
+@badge-font-weight: bold;
+@badge-line-height: 1;
+@badge-border-radius: 10px;
+
+//== Breadcrumbs
+//
+//##
+
+@breadcrumb-padding-vertical: 8px;
+@breadcrumb-padding-horizontal: 15px;
+//** Breadcrumb background color
+@breadcrumb-bg: #f5f5f5;
+//** Breadcrumb text color
+@breadcrumb-color: #ccc;
+//** Text color of current page in the breadcrumb
+@breadcrumb-active-color: @gray-light;
+//** Textual separator for between breadcrumb elements
+@breadcrumb-separator: "/";
+
+//== Carousel
+//
+//##
+
+@carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
+
+@carousel-control-color: #fff;
+@carousel-control-width: 15%;
+@carousel-control-opacity: .5;
+@carousel-control-font-size: 20px;
+
+@carousel-indicator-active-bg: #fff;
+@carousel-indicator-border-color: #fff;
+
+@carousel-caption-color: #fff;
+
+//== Close
+//
+//##
+
+@close-font-weight: bold;
+@close-color: #000;
+@close-text-shadow: 0 1px 0 #fff;
+
+//== Code
+//
+//##
+
+@code-color: #c7254e;
+@code-bg: #f9f2f4;
+
+@kbd-color: #fff;
+@kbd-bg: #333;
+
+@pre-bg: #f5f5f5;
+@pre-color: @gray-dark;
+@pre-border-color: #ccc;
+@pre-scrollable-max-height: 340px;
+
+//== Type
+//
+//##
+
+//** Text muted color
+@text-muted: @gray-light;
+//** Abbreviations and acronyms border color
+@abbr-border-color: @gray-light;
+//** Headings small color
+@headings-small-color: @gray-light;
+//** Blockquote small color
+@blockquote-small-color: @gray-light;
+//** Blockquote font size
+@blockquote-font-size: (@font-size-base * 1.25);
+//** Blockquote border color
+@blockquote-border-color: @gray-lighter;
+//** Page header border color
+@page-header-border-color: @gray-lighter;
+
+//== Miscellaneous
+//
+//##
+
+//** Horizontal line color.
+@hr-border: @gray-lighter;
+
+//** Horizontal offset for forms and lists.
+@component-offset-horizontal: 180px;
diff --git a/public/css/themes/default.less b/public/css/themes/default.less
index 336d85288c..edd3d2af41 100644
--- a/public/css/themes/default.less
+++ b/public/css/themes/default.less
@@ -32,6 +32,10 @@
background-image: linear-gradient(to bottom, #ffffff 60%, #f8f8f8 100%);
}
+.btn-link {
+ box-shadow: none;
+}
+
// Forms
// -------------------------
diff --git a/public/css/themes/flatly.less b/public/css/themes/flatly.less
index 4cde90617c..794d2fe7ae 100644
--- a/public/css/themes/flatly.less
+++ b/public/css/themes/flatly.less
@@ -1,8 +1,5 @@
-// Flatly 3.0.3
-// --------------------------------------------------
-
-
-// Global values
+// Flatly 3.1.1
+// Variables
// --------------------------------------------------
#footer {
@@ -11,116 +8,144 @@
border-top: 1px solid @navbar-default-border;
}
-// Grays
-// -------------------------
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
@gray-darker: lighten(#000, 13.5%); // #222
-@gray-dark: #7b8a8b;
-@gray: #95a5a6;
-@gray-light: #b4bcc2;
-@gray-lighter: #ecf0f1;
-
-// Brand colors
-// -------------------------
+@gray-dark: #7b8a8b;
+// #333
+@gray: #95a5a6;
+// #555
+@gray-light: #b4bcc2;
+// #999
+@gray-lighter: #ecf0f1;
+// #eee
@brand-primary: #2C3E50;
@brand-success: #18BC9C;
+@brand-info: #3498DB;
@brand-warning: #F39C12;
@brand-danger: #E74C3C;
-@brand-info: #3498DB;
-// Scaffolding
-// -------------------------
+//== Scaffolding
+//
+// ## Settings for some of the most global styles.
+//** Background color for ``.
@body-bg: #fff;
+//** Global text color on ``.
@text-color: @brand-primary;
-// Links
-// -------------------------
-
+//** Global textual link color.
@link-color: @brand-success;
+//** Link hover color set via `darken()` function.
@link-hover-color: @link-color;
-// Typography
-// -------------------------
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
+//** Default monospace fonts for ``, ``, and ``.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 15px;
-@font-size-large: ceil(@font-size-base * 1.25); // ~18px
-@font-size-small: ceil(@font-size-base * 0.85); // ~12px
+@font-size-large: ceil((@font-size-base * 1.25));
+// ~18px
+@font-size-small: ceil((@font-size-base * 0.85));
+// ~12px
-@font-size-h1: floor(@font-size-base * 2.6); // ~36px
-@font-size-h2: floor(@font-size-base * 2.15); // ~30px
-@font-size-h3: ceil(@font-size-base * 1.7); // ~24px
-@font-size-h4: ceil(@font-size-base * 1.25); // ~18px
+@font-size-h1: floor((@font-size-base * 2.6));
+// ~36px
+@font-size-h2: floor((@font-size-base * 2.15));
+// ~30px
+@font-size-h3: ceil((@font-size-base * 1.7));
+// ~24px
+@font-size-h4: ceil((@font-size-base * 1.25));
+// ~18px
@font-size-h5: @font-size-base;
-@font-size-h6: ceil(@font-size-base * 0.85); // ~12px
+@font-size-h6: ceil((@font-size-base * 0.85));
+// ~12px
+//** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.428571429; // 20/14
-@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+@line-height-computed: floor((@font-size-base * @line-height-base));
+// ~20px
+//** By default, this inherits from the ``.
@headings-font-family: @font-family-base;
-@headings-font-weight: 500;
+@headings-font-weight: 400;
@headings-line-height: 1.1;
@headings-color: inherit;
-
-// Iconography
-// -------------------------
+//-- Iconography
+//
+//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
+@icon-font-svg-id: "glyphicons_halflingsregular";
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-// Components
-// -------------------------
-// Based on 14px font-size and 1.428 line-height (~20px to start)
+@padding-base-vertical: 10px;
+@padding-base-horizontal: 15px;
-@padding-base-vertical: 10px;
-@padding-base-horizontal: 15px;
+@padding-large-vertical: 18px;
+@padding-large-horizontal: 27px;
-@padding-large-vertical: 18px;
-@padding-large-horizontal: 27px;
+@padding-small-vertical: 6px;
+@padding-small-horizontal: 9px;
-@padding-small-vertical: 6px;
-@padding-small-horizontal: 9px;
+@padding-xs-vertical: 1px;
+@padding-xs-horizontal: 5px;
-@padding-xs-vertical: 1px;
-@padding-xs-horizontal: 5px;
+@line-height-large: 1.33;
+@line-height-small: 1.5;
-@line-height-large: 1.33;
-@line-height-small: 1.5;
+@border-radius-base: 4px;
+@border-radius-large: 6px;
+@border-radius-small: 3px;
-@border-radius-base: 4px;
-@border-radius-large: 6px;
-@border-radius-small: 3px;
+//** Global color for active items (e.g., navs or dropdowns).
+@component-active-color: #fff;
+//** Global background color for active items (e.g., navs or dropdowns).
+@component-active-bg: @brand-primary;
-@component-active-color: #fff;
-@component-active-bg: @brand-primary;
+//** Width of the `border` for generating carets that indicator dropdowns.
+@caret-width-base: 4px;
+//** Carets increase slightly in size for larger components.
+@caret-width-large: 5px;
-@caret-width-base: 4px;
-@caret-width-large: 5px;
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
-// Tables
-// -------------------------
+//** Padding for ``s and ` `s.
+@table-cell-padding: 8px;
+//** Padding for cells in `.table-condensed`.
+@table-condensed-cell-padding: 5px;
-@table-cell-padding: 8px;
-@table-condensed-cell-padding: 5px;
+//** Default background color used for all tables.
+@table-bg: transparent;
+//** Background color used for `.table-striped`.
+@table-bg-accent: #f9f9f9;
+//** Background color used for `.table-hover`.
+@table-bg-hover: @gray-lighter;
+@table-bg-active: @table-bg-hover;
-@table-bg: transparent; // overall background-color
-@table-bg-accent: #f9f9f9; // for striping
-@table-bg-hover: @gray-lighter;
-@table-bg-active: @table-bg-hover;
+//** Border color for table and cell borders.
+@table-border-color: @gray-lighter;
-@table-border-color: @gray-lighter; // table and cell border
-
-
-// Buttons
-// -------------------------
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
@btn-font-weight: normal;
@@ -136,6 +161,10 @@
@btn-success-bg: @brand-success;
@btn-success-border: @btn-success-bg;
+@btn-info-color: @btn-default-color;
+@btn-info-bg: @brand-info;
+@btn-info-border: @btn-info-bg;
+
@btn-warning-color: @btn-default-color;
@btn-warning-bg: @brand-warning;
@btn-warning-border: @btn-warning-bg;
@@ -144,65 +173,84 @@
@btn-danger-bg: @brand-danger;
@btn-danger-border: @btn-danger-bg;
-@btn-info-color: @btn-default-color;
-@btn-info-bg: @brand-info;
-@btn-info-border: @btn-info-bg;
-
@btn-link-disabled-color: @gray-light;
+//== Forms
+//
+//##
-// Forms
-// -------------------------
-
+//** `` background color
@input-bg: #fff;
+//** `` background color
@input-bg-disabled: @gray-lighter;
+//** Text color for ``s
@input-color: @text-color;
+//** `` border color
@input-border: #dce4ec;
+//** `` border radius
@input-border-radius: @border-radius-base;
+//** Border color for inputs on focus
@input-border-focus: #1abc9c;
+//** Placeholder text color
@input-color-placeholder: #acb6c0;
+//** Default `.form-control` height
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
+//** Large `.form-control` height
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+//** Small `.form-control` height
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@legend-color: @text-color;
@legend-border-color: #e5e5e5;
+//** Background color for textual input addons
@input-group-addon-bg: @gray-lighter;
+//** Border color for textual input addons
@input-group-addon-border-color: @input-border;
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
-// Dropdowns
-// -------------------------
-
+//** Background for the dropdown menu.
@dropdown-bg: #fff;
+//** Dropdown menu `border-color`.
@dropdown-border: rgba(0,0,0,.15);
+//** Dropdown menu `border-color` **for IE8**.
@dropdown-fallback-border: #ccc;
+//** Divider color for between dropdown items.
@dropdown-divider-bg: #e5e5e5;
+//** Dropdown link text color.
@dropdown-link-color: @gray-dark;
+//** Hover color for dropdown links.
@dropdown-link-hover-color: #fff;
+//** Hover background for dropdown links.
@dropdown-link-hover-bg: @dropdown-link-active-bg;
+//** Active dropdown menu item text color.
@dropdown-link-active-color: #fff;
+//** Active dropdown menu item background color.
@dropdown-link-active-bg: @component-active-bg;
+//** Disabled dropdown menu item background color.
@dropdown-link-disabled-color: @text-muted;
+//** Text color for headers within dropdown menus.
@dropdown-header-color: @text-muted;
+// Note: Deprecated @dropdown-caret-color as of v3.1.0
+@dropdown-caret-color: #000;
-// COMPONENT VARIABLES
-// --------------------------------------------------
-
-
-// Z-index master list
-// -------------------------
-// Used for a bird's eye view of components dependent on the z-axis
-// Try to avoid customizing these :)
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@@ -212,8 +260,9 @@
@zindex-modal-background: 1040;
@zindex-modal: 1050;
-// Media queries breakpoints
-// --------------------------------------------------
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@@ -244,32 +293,50 @@
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
+//== Grid system
+//
+//## Define your custom responsive grid.
-// Grid system
-// --------------------------------------------------
-
-// Number of columns in the grid system
+//** Number of columns in the grid.
@grid-columns: 12;
-// Padding, to be divided by two and applied to the left and right of all columns
+//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
-
// Navbar collapse
-
-// Point at which the navbar becomes uncollapsed
+//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
-// Point at which the navbar begins collapsing
+//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
-// Navbar
-// -------------------------
+// Small screen / tablet
+@container-tablet: ((720px + @grid-gutter-width));
+//** For `@screen-sm-min` and up.
+@container-sm: @container-tablet;
+
+// Medium screen / desktop
+@container-desktop: ((940px + @grid-gutter-width));
+//** For `@screen-md-min` and up.
+@container-md: @container-desktop;
+
+// Large screen / wide desktop
+@container-large-desktop: ((1140px + @grid-gutter-width));
+//** For `@screen-lg-min` and up.
+@container-lg: @container-large-desktop;
+
+//== Navbar
+//
+//##
// Basics of a navbar
@navbar-height: 60px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
-@navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px
+@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
+@navbar-collapse-max-height: 340px;
@navbar-default-color: #777;
@navbar-default-bg: @brand-primary;
@@ -296,7 +363,6 @@
// Inverted navbar
-//
// Reset inverted navbar basics
@navbar-inverse-color: #fff;
@navbar-inverse-bg: @brand-success;
@@ -321,10 +387,11 @@
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
+//== Navs
+//
+//##
-// Navs
-// -------------------------
-
+//=== Shared nav styles
@nav-link-padding: 10px 15px;
@nav-link-hover-bg: @gray-lighter;
@@ -333,7 +400,7 @@
@nav-open-link-hover-color: #fff;
-// Tabs
+//== Tabs
@nav-tabs-border-color: @gray-lighter;
@nav-tabs-link-hover-border-color: @gray-lighter;
@@ -345,45 +412,60 @@
@nav-tabs-justified-link-border-color: @gray-lighter;
@nav-tabs-justified-active-link-border-color: @body-bg;
-// Pills
+//== Pills
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;
+//== Pagination
+//
+//##
-// Pagination
-// -------------------------
-
+@pagination-color: #fff;
@pagination-bg: @brand-success;
@pagination-border: transparent;
+@pagination-hover-color: #fff;
@pagination-hover-bg: darken(@brand-success, 15%);
+@pagination-hover-border: transparent;
-@pagination-active-bg: darken(@brand-success, 15%);
@pagination-active-color: #fff;
+@pagination-active-bg: darken(@brand-success, 15%);
+@pagination-active-border: transparent;
@pagination-disabled-color: @gray-lighter;
+@pagination-disabled-bg: lighten(@brand-success, 15%);
+;
+@pagination-disabled-border: transparent;
+//== Pager
+//
+//##
-// Pager
-// -------------------------
-
+@pager-bg: @pagination-bg;
+@pager-border: @pagination-border;
@pager-border-radius: 15px;
+
+@pager-hover-bg: @pagination-hover-bg;
+
+@pager-active-bg: @pagination-active-bg;
+@pager-active-color: @pagination-active-color;
+
@pager-disabled-color: #fff;
-
-// Jumbotron
-// -------------------------
+//== Jumbotron
+//
+//##
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
-@jumbotron-font-size: ceil(@font-size-base * 1.5);
+@jumbotron-font-size: ceil((@font-size-base * 1.5));
-
-// Form states and alerts
-// -------------------------
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
@state-success-text: #fff;
@state-success-bg: @brand-success;
@@ -401,66 +483,109 @@
@state-danger-bg: @brand-danger;
@state-danger-border: @brand-danger;
+//== Tooltips
+//
+//##
-// Tooltips
-// -------------------------
+//** Tooltip max width
@tooltip-max-width: 200px;
+//** Tooltip text color
@tooltip-color: #fff;
+//** Tooltip background color
@tooltip-bg: rgba(0,0,0,.9);
+@tooltip-opacity: .9;
+//** Tooltip arrow width
@tooltip-arrow-width: 5px;
+//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
+//== Popovers
+//
+//##
-// Popovers
-// -------------------------
+//** Popover body background color
@popover-bg: #fff;
+//** Popover maximum width
@popover-max-width: 276px;
+//** Popover border color
@popover-border-color: rgba(0,0,0,.2);
+//** Popover fallback border color
@popover-fallback-border-color: #ccc;
+//** Popover title background color
@popover-title-bg: darken(@popover-bg, 3%);
+//** Popover arrow width
@popover-arrow-width: 10px;
+//** Popover arrow color
@popover-arrow-color: #fff;
+//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
-@popover-arrow-outer-color: rgba(0,0,0,.25);
-@popover-arrow-outer-fallback-color: #999;
+//** Popover outer arrow color
+@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
+//** Popover outer arrow fallback color
+@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
+//== Labels
+//
+//##
-// Labels
-// -------------------------
-
+//** Default label background color
@label-default-bg: @btn-default-bg;
+//** Primary label background color
@label-primary-bg: @brand-primary;
+//** Success label background color
@label-success-bg: @brand-success;
+//** Info label background color
@label-info-bg: @brand-info;
+//** Warning label background color
@label-warning-bg: @brand-warning;
+//** Danger label background color
@label-danger-bg: @brand-danger;
+//** Default label text color
@label-color: #fff;
+//** Default text color of a linked label
@label-link-hover-color: #fff;
+//== Modals
+//
+//##
-// Modals
-// -------------------------
+//** Padding applied to the modal body
@modal-inner-padding: 20px;
+//** Padding applied to the modal title
@modal-title-padding: 15px;
+//** Modal title line-height
@modal-title-line-height: @line-height-base;
+//** Background color of modal content area
@modal-content-bg: #fff;
+//** Modal content border color
@modal-content-border-color: rgba(0,0,0,.2);
+//** Modal content border color **for IE8**
@modal-content-fallback-border-color: #999;
+//** Modal backdrop background color
@modal-backdrop-bg: #000;
+//** Modal backdrop opacity
+@modal-backdrop-opacity: .5;
+//** Modal header border color
@modal-header-border-color: #e5e5e5;
+//** Modal footer border color
@modal-footer-border-color: @modal-header-border-color;
+@modal-lg: 900px;
+@modal-md: 600px;
+@modal-sm: 300px;
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
-// Alerts
-// -------------------------
@alert-padding: 15px;
@alert-border-radius: @border-radius-base;
@alert-link-font-weight: bold;
@@ -481,39 +606,60 @@
@alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border;
+//== Progress bars
+//
+//##
-// Progress bars
-// -------------------------
+//** Background color of the whole progress component
@progress-bg: @gray-lighter;
+//** Progress bar text color
@progress-bar-color: #fff;
+//** Default progress bar color
@progress-bar-bg: @brand-primary;
+//** Success progress bar color
@progress-bar-success-bg: @brand-success;
+//** Warning progress bar color
@progress-bar-warning-bg: @brand-warning;
+//** Danger progress bar color
@progress-bar-danger-bg: @brand-danger;
+//** Info progress bar color
@progress-bar-info-bg: @brand-info;
+//== List group
+//
+//##
-// List group
-// -------------------------
-@list-group-bg: #fff;
-@list-group-border: @gray-lighter;
-@list-group-border-radius: @border-radius-base;
+//** Background color on `.list-group-item`
+@list-group-bg: #fff;
+//** `.list-group-item` border color
+@list-group-border: @gray-lighter;
+//** List group border radius
+@list-group-border-radius: @border-radius-base;
-@list-group-hover-bg: @gray-lighter;
-@list-group-active-color: @component-active-color;
-@list-group-active-bg: @component-active-bg;
-@list-group-active-border: @list-group-active-bg;
+//** Background color of single list elements on hover
+@list-group-hover-bg: @gray-lighter;
+//** Text color of active list elements
+@list-group-active-color: @component-active-color;
+//** Background color of active list elements
+@list-group-active-bg: @component-active-bg;
+//** Border color of active list elements
+@list-group-active-border: @list-group-active-bg;
+@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
-@list-group-link-color: #555;
-@list-group-link-heading-color: #333;
+@list-group-link-color: #555;
+@list-group-link-heading-color: #333;
+//== Panels
+//
+//##
-// Panels
-// -------------------------
@panel-bg: #fff;
-@panel-inner-border: @gray-lighter;
+@panel-body-padding: 15px;
@panel-border-radius: @border-radius-base;
+
+//** Border color for elements within panels
+@panel-inner-border: @gray-lighter;
@panel-footer-bg: @gray-lighter;
@panel-default-text: @text-color;
@@ -528,6 +674,10 @@
@panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg;
+@panel-info-text: @state-info-text;
+@panel-info-border: @state-info-border;
+@panel-info-heading-bg: @state-info-bg;
+
@panel-warning-text: @state-warning-text;
@panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg;
@@ -536,51 +686,67 @@
@panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg;
-@panel-info-text: @state-info-text;
-@panel-info-border: @state-info-border;
-@panel-info-heading-bg: @state-info-bg;
+//== Thumbnails
+//
+//##
-
-// Thumbnails
-// -------------------------
+//** Padding around the thumbnail image
@thumbnail-padding: 4px;
+//** Thumbnail background color
@thumbnail-bg: @body-bg;
+//** Thumbnail border color
@thumbnail-border: @gray-lighter;
+//** Thumbnail border radius
@thumbnail-border-radius: @border-radius-base;
+//** Custom text color for thumbnail captions
@thumbnail-caption-color: @text-color;
+//** Padding around the thumbnail caption
@thumbnail-caption-padding: 9px;
+//== Wells
+//
+//##
-// Wells
-// -------------------------
@well-bg: @gray-lighter;
+@well-border: transparent;
+//== Badges
+//
+//##
-// Badges
-// -------------------------
@badge-color: #fff;
+//** Linked badge text color on hover
@badge-link-hover-color: #fff;
@badge-bg: @gray;
+//** Badge text color in active nav link
@badge-active-color: @link-color;
+//** Badge background color in active nav link
@badge-active-bg: #fff;
@badge-font-weight: bold;
@badge-line-height: 1;
@badge-border-radius: 10px;
+//== Breadcrumbs
+//
+//##
-// Breadcrumbs
-// -------------------------
-@breadcrumb-bg: @gray-lighter;
-@breadcrumb-color: #ccc;
-@breadcrumb-active-color: @gray;
-@breadcrumb-separator: "/";
+@breadcrumb-padding-vertical: 8px;
+@breadcrumb-padding-horizontal: 15px;
+//** Breadcrumb background color
+@breadcrumb-bg: @gray-lighter;
+//** Breadcrumb text color
+@breadcrumb-color: #ccc;
+//** Text color of current page in the breadcrumb
+@breadcrumb-active-color: @gray;
+//** Textual separator for between breadcrumb elements
+@breadcrumb-separator: "/";
-
-// Carousel
-// ------------------------
+//== Carousel
+//
+//##
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@@ -594,63 +760,59 @@
@carousel-caption-color: #fff;
+//== Close
+//
+//##
-// Close
-// ------------------------
@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
+//== Code
+//
+//##
-// Code
-// ------------------------
@code-color: #c7254e;
@code-bg: #f9f2f4;
+@kbd-color: #fff;
+@kbd-bg: #333;
+
@pre-bg: @gray-lighter;
@pre-color: @gray-dark;
@pre-border-color: #ccc;
@pre-scrollable-max-height: 340px;
-// Type
-// ------------------------
+//== Type
+//
+//##
+
+//** Text muted color
@text-muted: @gray-light;
+//** Abbreviations and acronyms border color
@abbr-border-color: @gray-light;
+//** Headings small color
@headings-small-color: @gray-light;
+//** Blockquote small color
@blockquote-small-color: @gray-light;
+//** Blockquote font size
+@blockquote-font-size: (@font-size-base * 1.25);
+//** Blockquote border color
@blockquote-border-color: @gray-lighter;
+//** Page header border color
@page-header-border-color: @gray-lighter;
-// Miscellaneous
-// -------------------------
+//== Miscellaneous
+//
+//##
-// Hr border color
+//** Horizontal line color.
@hr-border: @gray-lighter;
-// Horizontal forms & lists
+//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
-
-// Container sizes
-// --------------------------------------------------
-
-// Small screen / tablet
-@container-tablet: ((720px + @grid-gutter-width));
-@container-sm: @container-tablet;
-
-// Medium screen / desktop
-@container-desktop: ((940px + @grid-gutter-width));
-@container-md: @container-desktop;
-
-// Large screen / wide desktop
-@container-large-desktop: ((1140px + @grid-gutter-width));
-@container-lg: @container-large-desktop;
-
-// Flatly 3.0.3
-// Bootswatch
-// -----------------------------------------------------
-
-@import url("//fonts.googleapis.com/css?family=Lato:400,700,900,400italic");
+@import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic");
// Navbar =====================================================================
@@ -700,6 +862,24 @@
tr.danger {
color: #fff;
}
+
+ > thead > tr > th,
+ > tbody > tr > th,
+ > tfoot > tr > th,
+ > thead > tr > td,
+ > tbody > tr > td,
+ > tfoot > tr > td {
+ border: none;
+ }
+
+ &-bordered > thead > tr > th,
+ &-bordered > tbody > tr > th,
+ &-bordered > tfoot > tr > th,
+ &-bordered > thead > tr > td,
+ &-bordered > tbody > tr > td,
+ &-bordered > tfoot > tr > td {
+ border: 1px solid @table-border-color;
+ }
}
// Forms ======================================================================
@@ -774,23 +954,6 @@ input[type="color"],
}
}
-.pagination {
-
- a,
- a:hover {
- color: #fff;
- }
-
- .disabled {
- &>a,
- &>a:hover,
- &>a:focus,
- &>span {
- background-color: lighten(@brand-success, 15%);
- }
- }
-}
-
.pager {
a,
a:hover {
@@ -802,7 +965,7 @@ input[type="color"],
&>a:hover,
&>a:focus,
&>span {
- background-color: lighten(@brand-success, 15%);
+ background-color: @pagination-disabled-bg;
}
}
}
@@ -829,5 +992,4 @@ input[type="color"],
.well {
.box-shadow(none);
- border-width: 0;
}
diff --git a/test/app_test.js b/test/app_test.js
new file mode 100644
index 0000000000..d02784c746
--- /dev/null
+++ b/test/app_test.js
@@ -0,0 +1,19 @@
+var request = require('supertest');
+var app = require('../app.js');
+
+describe('GET /', function() {
+ it('should return 200 OK', function(done) {
+ request(app)
+ .get('/')
+ .expect(200, done);
+ });
+});
+
+describe('GET /reset', function() {
+ it('should return 404', function(done) {
+ request(app)
+ .get('/reset')
+ .expect(404, done);
+ // this will fail
+ });
+});
\ No newline at end of file
diff --git a/test/mocha.opts b/test/mocha.opts
new file mode 100644
index 0000000000..fb5f82427f
--- /dev/null
+++ b/test/mocha.opts
@@ -0,0 +1 @@
+--reporter spec
\ No newline at end of file
diff --git a/test/user_test.js b/test/user_test.js
new file mode 100644
index 0000000000..9f83778e19
--- /dev/null
+++ b/test/user_test.js
@@ -0,0 +1,43 @@
+var chai = require('chai');
+var should = chai.should();
+var User = require('../models/User');
+
+describe('User attributes', function() {
+ before(function(done) {
+ user = new User({
+ email: 'janedoe@gmail.com',
+ password: 'password'
+ });
+ done();
+ });
+
+ it('email should be a string', function() {
+ user.email.should.be.a('string');
+ });
+
+ it('password should be a string', function() {
+ user.password.should.be.a('string');
+ });
+
+ it('should save a user', function(done) {
+ user.save();
+ done();
+ });
+
+ it('should find our newly created user', function(done) {
+ User.findOne({ email: user.email }, function(err, user) {
+ should.exist(user);
+ user.email.should.equal('janedoe@gmail.com');
+ done();
+ });
+ });
+
+ it('should not allow users with duplicate emails', function(done) {
+ user.save(function(err) {
+ if (err) {
+ err.code.should.equal(11000);
+ }
+ done();
+ });
+ });
+});
diff --git a/views/account/forgot.jade b/views/account/forgot.jade
new file mode 100644
index 0000000000..70029f16b8
--- /dev/null
+++ b/views/account/forgot.jade
@@ -0,0 +1,15 @@
+extends ../layout
+
+block content
+ .col-sm-8.col-sm-offset-2
+ form(method='POST')
+ legend Forgot Password
+ input(type='hidden', name='_csrf', value=token)
+ .form-group
+ p Enter your email address below and we will send you password reset instructions.
+ label.control-label(for='email') Email
+ input.form-control(type='email', name='email', id='email', placeholder='Email', autofocus=true)
+ .form-group
+ button.btn.btn-primary(type='submit')
+ i.fa.fa-key
+ | Reset Password
diff --git a/views/account/login.jade b/views/account/login.jade
index 8bfb653399..2eeee1ceb8 100644
--- a/views/account/login.jade
+++ b/views/account/login.jade
@@ -3,8 +3,8 @@ extends ../layout
block content
.col-sm-8.col-sm-offset-2
form(method='POST')
- input(type='hidden', name='_csrf', value=token)
legend Sign In
+ input(type='hidden', name='_csrf', value=token)
.form-group
.btn-group.btn-group-justified
if secrets.facebookAuth
@@ -34,4 +34,4 @@ block content
button.btn.btn-primary(type='submit')
i.fa.fa-unlock-alt
| Login
-
+ a.btn.btn-link(href='/forgot') Forgot your password?
diff --git a/views/account/reset.jade b/views/account/reset.jade
new file mode 100644
index 0000000000..becf6b0ee4
--- /dev/null
+++ b/views/account/reset.jade
@@ -0,0 +1,17 @@
+extends ../layout
+
+block content
+ .col-sm-8.col-sm-offset-2
+ form(method='POST')
+ legend Reset Password
+ input(type='hidden', name='_csrf', value=token)
+ .form-group
+ label(for='password') New Password
+ input.form-control(type='password', name='password', value='', placeholder='New password', autofocus=true)
+ .form-group
+ label(for='confirm') Confirm Password
+ input.form-control(type='password', name='confirm', value='', placeholder='Confirm password')
+ .form-group
+ button.btn.btn-primary.btn-reset(type='submit')
+ i.fa.fa-keyboard-o
+ | Update Password