diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..2a7cf66 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,12 @@ +# editorconfig.org + +root = true + +[*] +indent_size = 2 +indent_style = space +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore index a3d0467..42dd2d0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,15 @@ +# Folders to ignore +__MACOSX/ + # Files to ignore -*.html -koala-config.json - -# Directories to ignore -/add-ons -/fonts -/less -/stylus \ No newline at end of file +.DS_Store + +# Dependencies +/node_modules + +# Sass cache +/.sass-cache + +# Log files +*.log +*.log.* diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..dd7432b --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,112 @@ +# Contributing to Concise + +Welcome to Concise! We are not only here to make it as simple as possible to build websites, but also to contribute to the project. + +By following this guide to contributing, we can make sure that everything is up to code (pun intended), everything is formatted properly, and we are posting bug reports, feature requests, and questions in the proper area. + +Sound good? **Let's move on...** + +# Bug reports, feature requests, and questions + +** *Thanks to [thoughtbot](http://robots.thoughtbot.com/moving-open-source-project-mailing-lists-to-stack-overflow) for this great way to handling questions for an open source project.* + +In lieu of a mailing list, we are going to manage all specific questions through [Stack Overflow](http://stackoverflow.com/). + +Members of the Concise team are subscribed to specific tags via [Stack Exchange Filters](http://stackexchange.com/filters) so that if a question is properly tagged, we can respond in a timely manner and help. + +**Which tags?** + +Ideally, we would like to keep it to just one tag for Concise questions, but we are subscribed to multiple variants to make sure nothing passes by us. However, for everybody asking a question, please use: + +- [Concise](http://stackoverflow.com/questions/tagged/concise) + +**Where do I post this?** + +There are lots of different things that people will want to post regarding the Concise framework. Here is a rough outline of where you should post any given issue, question or contribution: + +- Use [Stack Overflow](http://stackoverflow.com) if you **need help** +- Use [GitHub Issues](http://github.com/ConciseCSS/concise.css/issues) if you **found a bug** +- Use [GitHub Issues](http://github.com/ConciseCSS/concise.css/issues) if you **have an idea** +- Use [GitHub Issues](http://github.com/ConciseCSS/concise.css/issues) if you want to **ask a question** +- Submit a [pull request](https://help.github.com/articles/creating-a-pull-request) if you **want to contribute** + +# Building the Project + +Our project is build with NodeJS so if you wish to make changes to the source SASS files and build CSS, follow the instructions below: + +1) Install [NodeJS](https://nodejs.org) on your machine. + +2) Navigate to the project in the terminal: + +``` +cd /path/to/directory +``` + +3) Install the NPM modules: + +``` +npm install +``` + +4) You can now run the following commands: + +**Build the project:** + +``` +npm run build +``` + +**Build the project and watch for changes:** + +``` +npm run build:watch +``` + +**Check the stylesheet statistics:** + +``` +npm run stats +``` + +# Feature Requests + +Do you think that there should be something in Concise that isn't already included? Before you start writing code and implementing a feature, make sure that it is something that fits into the idea and scope of the project. We are a lightweight, bloat-free framework that focuses on removing the unnecessary. + +If you are unsure of whether or not your feature would be a good fit for the framework, posting in [GitHub Issues](http://github.com/ConciseCSS/concise.css/issues) and tagging it `info:feedback-needed` or `type:idea` will help us filter your feature request and evaluate the idea. + +# Contributing Code + +Our contributing guidelines are based on this article: http://endoflineblog.com/gitflow-considered-harmful + +1. [Fork us](https://github.com/ConciseCSS/concise.css/fork) +2. Create a new branch (feature, release, hotfix, etc) (`git checkout -b my-feature`) +3. Follow the [coding style guide](#coding-style-guide) +4. Test any and all changes you make or implement. +5. Commit changes (`git commit -am "Commit description here"`) + - **Note:** If you're referencing a GitHub issue in your commit, please preface the commit with `[ref: #XXX]` where `XXX` is the issue number. +6. Push to your feature branch (`git push origin my-feature`) +7. Create a new [Pull Request](https://help.github.com/articles/creating-a-pull-request) +8. Wait for a response from us (we promise to be semi-prompt) +9. Once Your changes have been merged in, you can delete the branch that you've created. + +# Coding Style Guide + +** *Thanks to [Bootstrap](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md) for providing a good outline for coding styles.* + +Consistency is great, especially when writing code. Here we have a few simple guidelines to follow if you are going to be contributing to Concise. + +## Editorconfig + +Concise.CSS project has a `.editorconfig` file, you can install [Editorconfig](http://editorconfig.org/) plugin in your code editor and It will help You to keep your editor configured with our code style. + +## HTML + +[Follow @mdo's Code Guide](http://codeguide.co/#html) + +## CSS + +[Follow @mdo's Code Guide](http://codeguide.co/#css) + +# License + +By contributing to Concise, you agree that your code can be released under the [MIT license](https://github.com/ConciseCSS/concise.css/blob/master/LICENSE) diff --git a/Jakefile b/Jakefile new file mode 100644 index 0000000..4d2485f --- /dev/null +++ b/Jakefile @@ -0,0 +1,63 @@ +desc('Compile the files of Concise Framework.') +task('concise', () => { + jake.exec('concisecss compile concise.scss dist/concise.css', { + printStdout: true, + printStderr: true + }, () => { + complete() + }) +}) + +desc('Minify CSS.') +task('minify', () => { + jake.exec('cssnano dist/concise.css dist/concise.min.css', { + printStdout: true, + printStderr: true + }, () => { + complete() + }) +}) + +desc('Compile styles on file changes') +task('concise:watch', () => { + jake.exec('chokidar "**/*.scss" -c "jake build"', { + printStdout: true, + printStderr: true + }, () => { + complete() + }) +}) + +desc('Start livereload server.') +task('livereload', () => { + jake.exec('livereload . -e "html, css"', { + printStdout: true, + printStderr: true + }, () => { + complete() + }) +}) + +desc('Start HTTP server.') +task('http', () => { + jake.exec('http-server .', { + printStdout: true, + printStderr: true + }, () => { + complete() + }) +}) + +desc('Build the files for distribution.') +task('build', () => { + jake.Task['concise'].invoke() + jake.Task['minify'].invoke() +}) + +desc('Start the development tools.') +task('default', () => { + jake.Task['build'].invoke() + jake.Task['concise:watch'].invoke() + jake.Task['http'].invoke() + jake.Task['livereload'].invoke() +}) \ No newline at end of file diff --git a/LICENSE b/LICENSE index c41cd00..1c3c0f5 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2014 Keenan Payne +Copyright (c) 2016 James Kolce, Keenan Payne and ConciseCSS Contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file +SOFTWARE. diff --git a/README.md b/README.md index c5596bf..bf05bb3 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,112 @@ -[

](http://concisecss.com/) -=========== -[![Gitter chat](https://badges.gitter.im/concisecss.png)](https://gitter.im/concisecss) [![Like Concise on Facebook](http://i.imgur.com/4dy5UUK.png)](https://facebook.com/ConciseCSS) [![Follow Concise on Twitter](http://i.imgur.com/4AkKsMx.png)](https://twitter.com/ConciseCSS) [![Follow Concise on Google+](http://i.imgur.com/gdFNEMe.png)](https://plus.google.com/103423710089455112688) +# [

](http://concisecss.com/) -Concise is a lightweight front-end framework that provides a number of great features without the bloat. Concise is built based on Object-Oriented CSS principles and keeps semantics in mind to provide a small learning curve but high level of customization. +[![Bower version](https://badge.fury.io/bo/concise.svg)](http://badge.fury.io/bo/concise) [![npm version](https://badge.fury.io/js/concise.css.svg)](https://badge.fury.io/js/concise.css) -Quickstart -------------- +Concise CSS is a lightweight CSS framework that provides a number of great features without the bloat. -It's easy to get started with Concise: +Concise CSS provides a solid foundation to stylize your website. It offers an alternative to frameworks like Bootstrap and Foundation, with the difference that Concise only includes the minimum styles required. That does not mean that the features are limited; is possible to use add-ons on top of the core to extend the functionality as required. -- [Download the latest release](https://github.com/ConciseCSS/concise.css/archive/v1.0.0.zip) -- Clone the repo: `git clone https://github.com/ConciseCSS/concise.css.git` -- Install with [Bower](http://bower.io/): `bower install concise` +The core of the framework only includes styles for native HTML elements. Components and utilities are provided as optional add-ons, Concise UI and Concise Utils, respectively. -After you download or install the package, [read our quickstart guide](http://concisecss.com/get-started/getting-started.php) to get up and running. +Concise CSS is written using a custom CSS preprocessor, built on top of Sass and some PostCSS plugins; this means that you can still write Sass code as usual, but you can also enjoy of other custom features, like the `lh` unit provided to handle vertical rhythm. -Documentation -------------- -What would a project be without gread documentation? Concise has documentation for everything that is included in the framework. If you see something that is missing or incorrect, don't hesitate to open up an issue on our GitHub repo. +## Installation -Check out our documentation here: [http://concisecss.com/documentation](http://concisecss.com/documentation) +There are 4 different options to install Concise CSS in your website, although the recommended way is to use NPM. + +### Using our CDN + +If you just want to try Concise CSS or of you do not have plans to customize the styles, you can use our CDN, this is the easier way to get started with the framework—and if you like it—is recommended to switch to NPM so that you can customize the styles. + + +```HTML + + + + + +``` + +#### Semantic versioning with CDN +All major and minor versions of Concise exist in its own folder on the CDN. You can use specific versions of Concise with the CDN by prefixing the CSS file with the version number in the URL. + +For example, you can use the latest version as such: + +```HTML + + + + + +``` + +**Note:** All patch versions of Concise get published automatically to the non-prefixed URL. Patch versions are not organized into a folder. + +### Install with NPM + +Execute the following command to install Concise CSS from NPM. If you are new to NPM, you can check their [documentation](https://docs.npmjs.com/). + +``` +npm install concise.css +``` + +Then you can include the main file inside your project: + +```scss +// +// myStyles.scss +// --------- + +// Concise Core +@import "node_modules/concise.css/concise"; +``` + +### Install with diamond + +Execute the following command to install Concise CSS from diamond. If you are new to diamond, you can check their [documentation](https://diamond.js.org/docs). + +``` +diamond install concise.css +``` + +Then you can include the main file inside your project: + +```scss +// +// myStyles.scss +// --------- + +// Concise Core +@import "~concise.css"; +``` + +### Copy the source files + +Finally, if you prefer, you can just copy the framework files to your project folder. +You can download the latest version from Github from [this link](https://github.com/ConciseCSS/concise.css/archive/master.zip), and place the files wherever you need them. + +## Building the source files + +To build the source files, you need to install the Concise CLI globally (locally if you compile the files with an NPM script): + +``` +npm install -g concise-cli +``` + +Once it is installed, you can compile source files with the `concisecss compile` command: + +``` +concisecss compile input.scss output.css +``` + +**Note**: When compiling the source code with the Concise CLI, Autoprefixer will automatically add the required browser prefixes for the last two browser versions. + +### Building with diamond +To build with diamond, simply use the `diamond compile` command. If you are new to diamond, you can check their [documentation](https://diamond.js.org/docs). + +``` +diamond compile -o output.css input.scss +``` ### Changelog @@ -27,49 +114,41 @@ You can keep up-to-date with the changes that we have made via our [releases pag ### Specific Questions -In lieu of a mailing list, we are going to manage all specific questions through [Stack Overflow](http://stackoverflow.com/). This way we can leverage the entire community for help, and also not worry about wading through loads of spam. +** *Thanks to [thoughtbot](http://robots.thoughtbot.com/moving-open-source-project-mailing-lists-to-stack-overflow) for this great way to handling questions for an open source project.* -Members of the Concise team are subscribed to specific tags via [Stack Exchange Filters](http://stackexchange.com/filters) so that if a question is properly tagged, we can respond in a timely manner and help. +In lieu of a mailing list, we are going to manage all specific questions through [Stack Overflow](http://stackoverflow.com/). + +Members of the Concise team are subscribed to specific tags via [Stack Exchange Filters](http://stackexchange.com/filters), so that if a question is properly tagged, we can respond in a timely manner and help. **Which tags?** -Ideally we would like to keep it to just one tag for Concise questions, but we are subscribed to multiple varients to make sure nothing passes by us. However, for everybody asking a question, please use: +Ideally, we would like to keep it to just one tag for Concise questions, but we are subscribed to multiple variants to make sure nothing passes by us. However, for everybody asking a question, please use: - [Concise](http://stackoverflow.com/questions/tagged/concise) **Where do I post this?** -There are lots of different things that people will want to post regarding the Concise framework. Here is a rough outline of where you should post any given issue, question or contribution: +There are lots of different things that people will want to post regarding the Concise framework. Here is a rough outline of where you should post any given issue, question or contribution: - Use [Stack Overflow](http://stackoverflow.com) if you **need help** - Use [GitHub Issues](http://github.com/ConciseCSS/concise.css/issues) if you **found a bug** - Use [GitHub Issues](http://github.com/ConciseCSS/concise.css/issues) if you **have an idea** -- Use [GitHub Issues](http://github.com/ConciseCSS/concise.css/issues) if you want to **ask a general question** +- Use [GitHub Issues](http://github.com/ConciseCSS/concise.css/issues) if you want to **ask a question** - Submit a [pull request](https://help.github.com/articles/creating-a-pull-request) if you **want to contribute** -Pre-Processors -------------- - -Concise was originally written in [SASS](http://sass-lang.com/) but has a port for [LESS](http://lesscss.org/) and a work-in-progress port for [Stylus](http://learnboost.github.io/stylus/). +## Contributing -- [Concise-SASS](https://github.com/ConciseCSS/concise.css) -- [Concise-LESS](https://github.com/ConciseCSS/concise.css-less) -- [Concise-Stylus](https://github.com/ConciseCSS/concise.css-stylus) +If you wish to contribute to the Concise CSS project, please read through our [contributing guidelines](https://github.com/ConciseCSS/concise.css/blob/master/CONTRIBUTING.md) first and then help however you’d like! -Versioning -------------- +## Versioning Concise is currently maintained under the [Semantic Versioning guidelines](http://semver.org/). -Creator -------------- +## Elsewhere -**Keenan Payne** -- [Website](http://keenanpayne.com) -- [GitHub](http://github.com/keenanpayne) -- [Twitter](http://twitter.com/keenan_payne) +[![Like Concise on Facebook](http://i.imgur.com/4dy5UUK.png)](https://facebook.com/ConciseCSS) +[![Follow Concise on Twitter](http://i.imgur.com/4AkKsMx.png)](https://twitter.com/ConciseCSS) -License -------------- +## License -Code and documentation copyright 2014 Keenan Payne. Code released under the [MIT license](https://github.com/ConciseCSS/concise.css/blob/master/LICENSE). Documentation released under [Creative Commons](http://creativecommons.org/licenses/by-sa/4.0/). +Code released under the [MIT license](https://github.com/ConciseCSS/concise.css/blob/master/LICENSE). Documentation released under [Creative Commons](http://creativecommons.org/licenses/by-sa/4.0/). diff --git a/_globals.scss b/_globals.scss new file mode 100644 index 0000000..9fc7ddc --- /dev/null +++ b/_globals.scss @@ -0,0 +1,8 @@ +// +// Globals +// ============================================================================= + +@import 'globals/pow-function'; +@import 'globals/settings'; +@import 'globals/getColor-function'; +@import 'globals/typeScale-function'; diff --git a/bower.json b/bower.json index f20b0d4..7f41523 100644 --- a/bower.json +++ b/bower.json @@ -1,26 +1,26 @@ { - "name": "concise", - "description": "A lightweight front-end framework that provides functionality without the bloat.", - "version": "1.0.0", - "ignore": [ - ".gitignore", - "LICENSE", - "README.md" - ], - "keywords": [ - "css", - "js", - "scss", - "sass", - "mobile-first", - "responsive", - "front-end", - "framework", - "web" - ], - "homepage": "http://concisecss.com", - "main": [ - "dist/css/concise.css", - "dist/js/concise.js" - ] + "name": "concise", + "description": "A front-end framework written in SASS that's lightweight, and easy-to-use.", + "version": "4.0.1", + "ignore": [ + ".gitignore", + ".editorconfig", + "README.md", + "LICENSE", + "node_modules" + ], + "keywords": [ + "css", + "scss", + "sass", + "mobile-first", + "responsive", + "front-end", + "framework", + "web" + ], + "homepage": "http://concisecss.com", + "main": [ + "dist/concise.css" + ] } diff --git a/composer.json b/composer.json new file mode 100644 index 0000000..77fb9be --- /dev/null +++ b/composer.json @@ -0,0 +1,34 @@ +{ + "name": "concisecss/concise.css", + "description": "A lightweight front-end framework that provides functionality without the bloat.", + "keywords": [ + "css", + "sass", + "scss", + "mobile-first", + "responsive", + "front-end", + "framework", + "web" + ], + "homepage": "http://concisecss.com", + "authors": [ + { + "name": "Keenan Payne", + "email": "contact@keenanpayne.com", + "homepage": "http://keenanpayne.com" + }, + { + "name": "James Kolce", + "email": "contact@jameskolce.com", + "homepage": "http://jameskolce.com" + } + ], + "support": { + "issues": "https://github.com/ConciseCSS/concise.css/issues" + }, + "license": "MIT", + "replace": { + "concisecss/concise.css": "self.version" + } +} diff --git a/concise.scss b/concise.scss new file mode 100644 index 0000000..8be1fc6 --- /dev/null +++ b/concise.scss @@ -0,0 +1,20 @@ +/** + * ConciseCSS v4.1.2 + * https://github.com/ConciseCSS/concise.css + * + * Copyright 2016 James Kolce, Keenan Payne and ConciseCSS Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + */ + +// Globals +@import 'globals'; + +// Styles +@import 'src/base'; +@import 'src/headings'; +@import 'src/lists'; +@import 'src/forms'; +@import 'src/tables'; +@import 'src/atgrid'; +@import 'src/print'; diff --git a/diamond.js b/diamond.js new file mode 100644 index 0000000..a845b56 --- /dev/null +++ b/diamond.js @@ -0,0 +1,11 @@ +const postcss = require('postcss'); + +module.exports = (css) => { + return postcss([ + require('postcss-input-range'), + require('postcss-lh'), + require('postcss-custom-media'), + require('postcss-media-minmax'), + require('autoprefixer') + ]).process(css).css; +}; diff --git a/diamond.json b/diamond.json new file mode 100644 index 0000000..38bec9e --- /dev/null +++ b/diamond.json @@ -0,0 +1,7 @@ +{ + "name": "concise.css", + "version": "4.1.2", + "description": "A lightweight front-end framework that provides functionality without the bloat.", + "main": "concise.scss", + "postProcessor": "diamond.js" +} \ No newline at end of file diff --git a/dist/concise.css b/dist/concise.css new file mode 100644 index 0000000..b22b2db --- /dev/null +++ b/dist/concise.css @@ -0,0 +1,918 @@ +@charset "UTF-8"; +/** + * ConciseCSS v4.1.2 + * https://github.com/ConciseCSS/concise.css + * + * Copyright 2016 James Kolce, Keenan Payne and ConciseCSS Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { + display: block; } + +audio, +canvas, +progress, +video { + display: inline-block; } + +audio:not([controls]) { + display: none; + height: 0; } + +template, +[hidden] { + display: none; } + +*, +::before, +::after { + background-repeat: no-repeat; + box-sizing: inherit; } + +::before, +::after { + text-decoration: inherit; + vertical-align: inherit; } + +:root { + box-sizing: border-box; + font-family: "Helvetica", "Arial", sans-serif; + line-height: 1.5; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + background-color: white; + color: #444; + font-size: 16px; + text-rendering: optimizeLegibility; } + @media (min-width: 480px) { + :root { + font-size: 18px; } } + +code, +kbd, +pre, +samp { + font-family: "Consolas", monospace; + font-size: 0.83333rem; + background-color: #f5f5f5; } + +code, +kbd { + vertical-align: middle; + display: inline-block; + padding: 0 0.4em; } + +pre { + padding: 0.75rem 1em; } + pre > code { + white-space: pre; } + +kbd { + background-color: transparent; + outline: 1px solid #DCDCDC; } + +hr { + background-color: #DCDCDC; + height: 1px; + overflow: visible; + border: 0; } + +nav ol, +nav ul { + padding-left: 0; } + +nav li { + list-style: none; } + +dt { + font-weight: bold; } + +blockquote { + padding: 0 1em; } + blockquote cite, + blockquote footer { + color: #777; + font-size: 83.33333%; + margin-top: 0.75rem; } + blockquote cite:before, + blockquote footer:before { + content: "— "; } + +abbr { + -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; + font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; + text-transform: uppercase; } + abbr[title] { + border-bottom: 1px solid #DCDCDC; + cursor: help; + text-decoration: none; } + +b, +strong { + font-weight: inherit; } + +b, +strong { + font-weight: bolder; } + +dfn { + font-style: italic; } + +mark { + background-color: #ffff00; + color: #000000; } + +progress { + vertical-align: baseline; } + +small { + font-size: 83.33333%; } + +sub, +sup { + line-height: 0; + position: relative; + vertical-align: baseline; + font-size: 83.33333%; } + +sub { + bottom: -0.25em; + -webkit-font-feature-settings: "subs" 1; + font-feature-settings: "subs" 1; } + +sup { + top: -0.25em; + -webkit-font-feature-settings: "sups" 1; + font-feature-settings: "sups" 1; } + +::-moz-selection { + background-color: #EBE1D3; + text-shadow: none; } + +::selection { + background-color: #EBE1D3; + text-shadow: none; } + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; } + +img { + border-style: none; } + +svg { + fill: currentColor; } + +svg:not(:root) { + overflow: hidden; } + +a { + background-color: transparent; + -webkit-text-decoration-skip: objects; + color: #C65146; + text-decoration: none; + -webkit-transition-duration: 150ms; + transition-duration: 150ms; } + a:hover, a:focus { + color: #7f2f27; } + +a:hover { + outline-width: 0; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +input, +select, +textarea { + background-color: transparent; + border-style: none; + color: inherit; + font: inherit; } + input:focus, + select:focus, + textarea:focus { + outline: 2px solid #2b90d9; } + +button, input[type="submit"], +input { + overflow: visible; } + +button, input[type="submit"], +select { + text-transform: none; } + +button, input[type="submit"], +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + font: inherit; } + +::-moz-focus-inner { + border-style: none; + padding: 0; } + +:-moz-focusring { + outline: 1px dotted ButtonText; } + +fieldset { + border: 1px solid #DCDCDC; + padding: 1.5rem 1em; } + +legend { + display: table; + max-width: 100%; + white-space: normal; + padding: 0 0.5em; } + +textarea { + overflow: auto; + resize: vertical; + height: auto; + padding: 0.375rem 0.5em; } + +[type="checkbox"], +[type="radio"] { + padding: 0; } + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; } + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; } + +::-webkit-search-cancel-button, +::-webkit-search-decoration { + -webkit-appearance: none; } + +::-webkit-input-placeholder { + color: inherit; + opacity: .54; } + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +input[type="range"] { + border: none; + padding: 0; + width: 100%; + -webkit-appearance: none; } + input[type="range"]:focus { + outline: none; } + input[type="range"]::-moz-range-track{ + background-color: #DCDCDC; + border: none; + height: 0.3rem; } + input[type="range"]::-ms-track{ + background-color: #DCDCDC; + border: none; + height: 0.3rem; } + input[type="range"]::-webkit-slider-runnable-track{ + background-color: #DCDCDC; + border: none; + height: 0.3rem; } + input[type="range"]::-moz-range-thumb{ + border: none; + border-radius: 50%; + background-color: #C65146; + height: 0.75rem; + margin-top: -0.225rem; + width: 0.75rem; } + input[type="range"]::-ms-thumb{ + border: none; + border-radius: 50%; + background-color: #C65146; + height: 0.75rem; + margin-top: -0.225rem; + width: 0.75rem; } + input[type="range"]::-webkit-slider-thumb{ + border: none; + border-radius: 50%; + background-color: #C65146; + height: 0.75rem; + margin-top: -0.225rem; + width: 0.75rem; } + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; } + +button, input[type="submit"] { + background-color: #C65146; + border: none; + color: white; + cursor: pointer; + font-size: 0.83333rem; + line-height: 2.25rem; + padding: 0 1.5em; + -webkit-transition: background-color 150ms; + transition: background-color 150ms; + white-space: nowrap; } + button:hover, input[type="submit"]:hover, button:focus, input[type="submit"]:focus { + background-color: #cc6359; + text-decoration: none; + outline: none; } + button:active, input[type="submit"]:active { + background-color: #d2766d; } + button[disabled], input[disabled][type="submit"] { + background-color: #eee; + color: white; + cursor: not-allowed; } + +[aria-busy="true"] { + cursor: progress; } + +[aria-controls] { + cursor: pointer; } + +[aria-disabled] { + cursor: default; } + +a, +area, +button, +input[type="submit"], +input, +label, +select, +textarea, +[tabindex] { + -ms-touch-action: manipulation; + touch-action: manipulation; } + +[hidden][aria-hidden="false"] { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; } + +[hidden][aria-hidden="false"]:focus { + clip: auto; } + +* { + margin: 0; } + +* + * { + margin-top: 1.5rem; } + +li, +kbd, +div, +input, +option, +select, +a, +textarea, +body, +span, +dd, +code, +label, +br [column] { + margin-top: 0; } + +h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { + margin-top: 0; } + +h1 { + font-size: 2.0736rem; } + +h2 { + font-size: 1.728rem; } + +h3 { + font-size: 1.44rem; } + +h4 { + font-size: 1.2rem; } + +h5 { + font-size: 1rem; } + +h6 { + font-size: 0.83333rem; } + +h1, h2, h3, h4, h5, h6 { + color: #222; + font-family: "Helvetica", "Arial", sans-serif; + line-height: 1.3; } + h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + color: inherit; + vertical-align: 0; + font-size: 83.33333%; } + +h1, h2, h3 { + margin: 0.75rem 0 0.375rem; } + h1 a, h2 a, h3 a { + color: inherit; } + h1 a:hover, h1 a:focus, h2 a:hover, h2 a:focus, h3 a:hover, h3 a:focus { + color: #C65146; + text-decoration: none; } + +h4, h5, h6 { + margin: 0.375rem 0; } + +ul, +ol { + padding-left: 1em; } + ul ol, + ul ul, + ol ol, + ol ul { + padding-left: 1.5em; } + +ol { + padding-left: 0; + counter-reset: item; } + ol li { + list-style: none; } + ol li:before { + content: counters(item, ".") ". "; + counter-increment: item; + margin-right: 0.2em; } + +input:not([type="submit"]), +select, +textarea { + width: 100%; + font-size: 0.83333rem; + min-height: 2.25rem; } + input:not([type="submit"])[disabled], + select[disabled], + textarea[disabled] { + background-color: #eee; + cursor: not-allowed; + border: 0; } + +input:not([type="submit"]):not([type="range"]), +select, +textarea { + border: 1px solid #DCDCDC; + padding: 0 0.75em; } + +input[type="checkbox"], +input[type="file"], +input[type="image"], +input[type="radio"] { + height: auto; + width: auto; } + +input[type="checkbox"], +input[type="radio"] { + line-height: normal; + padding: 0; + vertical-align: middle; } + +input[type="file"] { + border: none; + line-height: 1.5rem; + padding: 0; } + +select { + background-color: transparent; + padding-left: 0.5em; + width: auto; + min-width: 10em; + height: 2.25rem; } + select[disabled] { + color: #777; } + select[multiple] { + height: auto; + width: 100%; + padding: 0; } + select::-ms-expand { + display: none; } + select::-ms-value { + color: currentColor; } + select option { + padding: 0 0.75em; } + +label { + display: block; + font-size: 0.83333rem; + line-height: 2.25rem; } + +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline-block; + margin-left: 0.5em; } + +table { + width: 100%; } + @media (min-width: 480px) { + table { + width: auto; } } + table thead, + table tfoot { + background-color: #f5f5f5; + text-align: left; } + table th, + table td { + line-height: 2.25rem; + overflow: visible; + padding: 0 1em; } + table caption { + font-size: 0.83333rem; + font-style: italic; + line-height: 3rem; + text-align: center; } + +[container] { + margin-left: auto; + margin-right: auto; + max-width: 1200px; + padding-left: 1rem; + padding-right: 1rem; + overflow: auto; } + +[grid] { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-left: -1rem; + margin-right: -1rem; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } + @media (min-width: 480px) { + [grid] { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } } + +[column] { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + padding-left: 1rem; + padding-right: 1rem; } + +[grid~="no-gutters"] { + margin-left: 0; + margin-right: 0; } + [grid~="no-gutters"] [column] { + padding-left: 0; + padding-right: 0; } + +[grid~="no-collapse"] { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; } + +[grid~="wrap"] { + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + +[grid~="no-wrap"] { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } + +[grid~="wrap-reverse"] { + -ms-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; } + +[grid~="row"] { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } + +[grid~="row-reverse"] { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + +[grid~="column"] { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } + +[grid~="column-reverse"] { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; } + +[grid~="justify-start"] { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } + +[grid~="justify-end"] { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } + +[grid~="justify-center"] { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + +[grid~="justify-between"] { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } + +[grid~="justify-around"] { + -ms-flex-pack: distribute; + justify-content: space-around; } + +[grid~="top"] { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } + +[grid~="center"] { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + +[grid~="bottom"] { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; } + +[grid~="baseline"] { + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; } + +[grid~="stretch"] { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + +[column~="top"] { + -ms-flex-item-align: start; + align-self: flex-start; } + +[column~="center"] { + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; } + +[column~="bottom"] { + -ms-flex-item-align: end; + align-self: flex-end; } + +@media (min-width: 480px) { + [column~="n1"] { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } + [column~="n2"] { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + } + [column~="n3"] { + -webkit-box-ordinal-group: 4; + -ms-flex-order: 3; + order: 3; + } + [column~="n4"] { + -webkit-box-ordinal-group: 5; + -ms-flex-order: 4; + order: 4; + } + [column~="n5"] { + -webkit-box-ordinal-group: 6; + -ms-flex-order: 5; + order: 5; + } + [column~="n6"] { + -webkit-box-ordinal-group: 7; + -ms-flex-order: 6; + order: 6; + } + [column~="n7"] { + -webkit-box-ordinal-group: 8; + -ms-flex-order: 7; + order: 7; + } + [column~="n8"] { + -webkit-box-ordinal-group: 9; + -ms-flex-order: 8; + order: 8; + } + [column~="n9"] { + -webkit-box-ordinal-group: 10; + -ms-flex-order: 9; + order: 9; + } + [column~="n10"] { + -webkit-box-ordinal-group: 11; + -ms-flex-order: 10; + order: 10; + } + [column~="n11"] { + -webkit-box-ordinal-group: 12; + -ms-flex-order: 11; + order: 11; + } + [column~="n12"] { + -webkit-box-ordinal-group: 13; + -ms-flex-order: 12; + order: 12; + } +} + +@media (min-width: 480px) { + [column~="1"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 8.33333%; + flex: 0 1 8.33333%; + max-width: 8.33333%; } + [column~="2"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 16.66667%; + flex: 0 1 16.66667%; + max-width: 16.66667%; } + [column~="3"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 25%; + flex: 0 1 25%; + max-width: 25%; } + [column~="4"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 33.33333%; + flex: 0 1 33.33333%; + max-width: 33.33333%; } + [column~="5"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 41.66667%; + flex: 0 1 41.66667%; + max-width: 41.66667%; } + [column~="6"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 50%; + flex: 0 1 50%; + max-width: 50%; } + [column~="7"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 58.33333%; + flex: 0 1 58.33333%; + max-width: 58.33333%; } + [column~="8"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 66.66667%; + flex: 0 1 66.66667%; + max-width: 66.66667%; } + [column~="9"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 75%; + flex: 0 1 75%; + max-width: 75%; } + [column~="10"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 83.33333%; + flex: 0 1 83.33333%; + max-width: 83.33333%; } + [column~="11"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 91.66667%; + flex: 0 1 91.66667%; + max-width: 91.66667%; } + [column~="12"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 100%; + flex: 0 1 100%; + max-width: 100%; } + [column~="+1"] { + margin-left: 8.33333%; } + [column~="+2"] { + margin-left: 16.66667%; } + [column~="+3"] { + margin-left: 25%; } + [column~="+4"] { + margin-left: 33.33333%; } + [column~="+5"] { + margin-left: 41.66667%; } + [column~="+6"] { + margin-left: 50%; } + [column~="+7"] { + margin-left: 58.33333%; } + [column~="+8"] { + margin-left: 66.66667%; } + [column~="+9"] { + margin-left: 75%; } + [column~="+10"] { + margin-left: 83.33333%; } + [column~="+11"] { + margin-left: 91.66667%; } + [column~="+12"] { + margin-left: 100%; } } + +@media print { + @page { + margin: 2cm; } + *, + *:before, + *:after { + background: transparent !important; + color: black !important; + -webkit-filter: none !important; + filter: none !important; + text-shadow: none !important; } + :root { + background-color: white; + color: black; + font: 12pt/1.4 "Georgia", "Times New Roman", "Times", serif; } + body { + width: 100% !important; + margin: 0 !important; + padding: 0 !important; } + h1, h2, h3, h4, h5, h6 { + page-break-after: avoid; + font-family: "Georgia", "Times New Roman", "Times", serif; } + h1 { + font-size: 19pt; } + h2 { + font-size: 17pt; } + h3 { + font-size: 15pt; } + h4, h5, h6 { + font-size: 14pt; } + img { + max-width: 100% !important; + page-break-after: avoid; + page-break-inside: avoid; } + video, + audio, + object, + embed, + nav, + footer, + a[href^="#"]:after { + display: none; + visibility: hidden; } + p, + h2, h3 { + orphans: 3; + widows: 3; } + a, + a:visited { + color: black; + font-size: .57em; + text-decoration: underline; + word-wrap: break-word; } + a[href]:after, + a:visited[href]:after { + content: " (" attr(href) ")"; + font-size: smaller; } + q:after { + content: " (Source: " attr(cite) ")"; } + abbr[title]:after { + content: " (" attr(title) ")"; } + a:after, a[href^="javascript:"]:after, a[href^="#"]:after { + content: ""; } + pre, + code { + background-color: transparent; + border: 1px solid #DCDCDC; + page-break-inside: avoid; } + blockquote { + border: none; + page-break-inside: avoid; } + thead { + display: table-header-group; } + tr, + img { + page-break-inside: avoid; } + ol { + padding-left: 1.25em; } + ul { + padding-left: 0; + list-style: none; } + ul ul, + ul ul ul { + padding-left: 1.5em; } + ul li, + ol li { + content: "» "; } } diff --git a/dist/concise.min.css b/dist/concise.min.css new file mode 100644 index 0000000..51b4ee6 --- /dev/null +++ b/dist/concise.min.css @@ -0,0 +1 @@ +@charset "UTF-8";article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}:root{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-color:#fff;color:#444;font-size:16px;text-rendering:optimizeLegibility}@media (min-width:480px){:root{font-size:18px}}code,kbd,pre,samp{font-family:Consolas,monospace;font-size:.83333rem;background-color:#f5f5f5}code,kbd{vertical-align:middle;display:inline-block;padding:0 .4em}pre{padding:.75rem 1em}pre>code{white-space:pre}kbd{background-color:transparent;outline:1px solid #dcdcdc}hr{background-color:#dcdcdc;height:1px;overflow:visible;border:0}nav ol,nav ul{padding-left:0}nav li{list-style:none}dt{font-weight:700}blockquote{padding:0 1em}blockquote cite,blockquote footer{color:#777;font-size:83.33333%;margin-top:.75rem}blockquote cite:before,blockquote footer:before{content:"— "}abbr{-webkit-font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"pnum" 1,"tnum" 0,"onum" 1,"lnum" 0,"smcp" 1,"c2sc" 1;font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"pnum" 1,"tnum" 0,"onum" 1,"lnum" 0,"smcp" 1,"c2sc" 1;text-transform:uppercase}abbr[title]{border-bottom:1px solid #dcdcdc;cursor:help;text-decoration:none}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}progress{vertical-align:baseline}small,sub,sup{font-size:83.33333%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em;-webkit-font-feature-settings:"subs" 1;font-feature-settings:"subs" 1}sup{top:-.25em;-webkit-font-feature-settings:"sups" 1;font-feature-settings:"sups" 1}::-moz-selection{background-color:#ebe1d3;text-shadow:none}::selection{background-color:#ebe1d3;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#c65146;text-decoration:none;-webkit-transition-duration:.15s;transition-duration:.15s}a:focus,a:hover{color:#7f2f27}a:hover{outline-width:0}table{border-collapse:collapse;border-spacing:0}input,select,textarea{background-color:transparent;border-style:none;color:inherit;font:inherit}input:focus,select:focus,textarea:focus{outline:2px solid #2b90d9}button,input,input[type=submit]{overflow:visible}button,input[type=submit],select{text-transform:none}[type=reset],[type=submit],button,html [type=button],input[type=submit]{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #dcdcdc;padding:1.5rem 1em}legend{display:table;max-width:100%;white-space:normal;padding:0 .5em}textarea{overflow:auto;resize:vertical;height:auto;padding:.375rem .5em}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-cancel-button,::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}input[type=range]{border:none;padding:0;width:100%;-webkit-appearance:none}input[type=range]:focus{outline:none}input[type=range]::-moz-range-track{background-color:#dcdcdc;border:none;height:.3rem}input[type=range]::-ms-track{background-color:#dcdcdc;border:none;height:.3rem}input[type=range]::-webkit-slider-runnable-track{background-color:#dcdcdc;border:none;height:.3rem}input[type=range]::-moz-range-thumb{border:none;border-radius:50%;background-color:#c65146;height:.75rem;margin-top:-.225rem;width:.75rem}input[type=range]::-ms-thumb{border:none;border-radius:50%;background-color:#c65146;height:.75rem;margin-top:-.225rem;width:.75rem}input[type=range]::-webkit-slider-thumb{border:none;border-radius:50%;background-color:#c65146;height:.75rem;margin-top:-.225rem;width:.75rem;-webkit-appearance:none}button,input[type=submit]{background-color:#c65146;border:none;color:#fff;cursor:pointer;font-size:.83333rem;line-height:2.25rem;padding:0 1.5em;-webkit-transition:background-color .15s;transition:background-color .15s;white-space:nowrap}button:focus,button:hover,input[type=submit]:focus,input[type=submit]:hover{background-color:#cc6359;text-decoration:none;outline:none}button:active,input[type=submit]:active{background-color:#d2766d}button[disabled],input[disabled][type=submit]{background-color:#eee;color:#fff;cursor:not-allowed}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}[tabindex],a,area,button,input,input[type=submit],label,select,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden][aria-hidden=false]{clip:rect(0,0,0,0);display:inherit;position:absolute}[hidden][aria-hidden=false]:focus{clip:auto}*{margin:0}*+*{margin-top:1.5rem}a,body,br [column],code,dd,div,h1+p,h2+p,h3+p,h4+p,h5+p,h6+p,input,kbd,label,li,option,select,span,textarea{margin-top:0}h1{font-size:2.0736rem}h2{font-size:1.728rem}h3{font-size:1.44rem}h4{font-size:1.2rem}h5{font-size:1rem}h6{font-size:.83333rem}h1,h2,h3,h4,h5,h6{color:#222;font-family:Helvetica,Arial,sans-serif;line-height:1.3}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:inherit;vertical-align:0;font-size:83.33333%}h1,h2,h3{margin:.75rem 0 .375rem}h1 a,h2 a,h3 a{color:inherit}h1 a:focus,h1 a:hover,h2 a:focus,h2 a:hover,h3 a:focus,h3 a:hover{color:#c65146;text-decoration:none}h4,h5,h6{margin:.375rem 0}ol,ul{padding-left:1em}ol ol,ol ul,ul ol,ul ul{padding-left:1.5em}ol{padding-left:0;counter-reset:a}ol li{list-style:none}ol li:before{content:counters(a,".") ". ";counter-increment:a;margin-right:.2em}input:not([type=submit]),select,textarea{width:100%;font-size:.83333rem;min-height:2.25rem}input:not([type=submit])[disabled],select[disabled],textarea[disabled]{background-color:#eee;cursor:not-allowed;border:0}input:not([type=submit]):not([type=range]),select,textarea{border:1px solid #dcdcdc;padding:0 .75em}input[type=checkbox],input[type=file],input[type=image],input[type=radio]{height:auto;width:auto}input[type=checkbox],input[type=radio]{line-height:normal;padding:0;vertical-align:middle}input[type=file]{border:none;line-height:1.5rem;padding:0}select{background-color:transparent;padding-left:.5em;width:auto;min-width:10em;height:2.25rem}select[disabled]{color:#777}select[multiple]{height:auto;width:100%;padding:0}select::-ms-expand{display:none}select::-ms-value{color:currentColor}select option{padding:0 .75em}label{display:block;font-size:.83333rem;line-height:2.25rem}input[type=checkbox]+label,input[type=radio]+label{display:inline-block;margin-left:.5em}table{width:100%}@media (min-width:480px){table{width:auto}}table tfoot,table thead{background-color:#f5f5f5;text-align:left}table td,table th{line-height:2.25rem;overflow:visible;padding:0 1em}table caption{font-size:.83333rem;font-style:italic;line-height:3rem;text-align:center}[container]{margin-left:auto;margin-right:auto;max-width:1200px;padding-left:1rem;padding-right:1rem;overflow:auto}[grid]{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:-1rem;margin-right:-1rem;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width:480px){[grid]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}[column]{-webkit-box-flex:1;-ms-flex:1;flex:1;padding-left:1rem;padding-right:1rem}[grid~=no-gutters]{margin-left:0;margin-right:0}[grid~=no-gutters] [column]{padding-left:0;padding-right:0}[grid~=no-collapse]{-ms-flex-flow:row nowrap;flex-flow:row nowrap}[grid~=wrap]{-ms-flex-wrap:wrap;flex-wrap:wrap}[grid~=no-wrap]{-ms-flex-wrap:nowrap;flex-wrap:nowrap}[grid~=wrap-reverse]{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}[grid~=row]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[grid~=row-reverse]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}[grid~=column]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[grid~=column-reverse]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}[grid~=justify-start]{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}[grid~=justify-end]{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}[grid~=justify-center]{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[grid~=justify-between]{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}[grid~=justify-around]{-ms-flex-pack:distribute;justify-content:space-around}[grid~=top]{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}[grid~=center]{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[grid~=bottom]{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}[grid~=baseline]{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}[grid~=stretch]{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}[column~=top]{-ms-flex-item-align:start;align-self:flex-start}[column~=center]{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}[column~=bottom]{-ms-flex-item-align:end;align-self:flex-end}@media (min-width:480px){[column~=n1]{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}[column~=n2]{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}[column~=n3]{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}[column~=n4]{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}[column~=n5]{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}[column~=n6]{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}[column~=n7]{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}[column~=n8]{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}[column~=n9]{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}[column~=n10]{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}[column~=n11]{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}[column~=n12]{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}}@media (min-width:480px){[column~="1"]{-webkit-box-flex:0;-ms-flex:0 1 8.33333%;flex:0 1 8.33333%;max-width:8.33333%}[column~="2"]{-webkit-box-flex:0;-ms-flex:0 1 16.66667%;flex:0 1 16.66667%;max-width:16.66667%}[column~="3"]{-webkit-box-flex:0;-ms-flex:0 1 25%;flex:0 1 25%;max-width:25%}[column~="4"]{-webkit-box-flex:0;-ms-flex:0 1 33.33333%;flex:0 1 33.33333%;max-width:33.33333%}[column~="5"]{-webkit-box-flex:0;-ms-flex:0 1 41.66667%;flex:0 1 41.66667%;max-width:41.66667%}[column~="6"]{-webkit-box-flex:0;-ms-flex:0 1 50%;flex:0 1 50%;max-width:50%}[column~="7"]{-webkit-box-flex:0;-ms-flex:0 1 58.33333%;flex:0 1 58.33333%;max-width:58.33333%}[column~="8"]{-webkit-box-flex:0;-ms-flex:0 1 66.66667%;flex:0 1 66.66667%;max-width:66.66667%}[column~="9"]{-webkit-box-flex:0;-ms-flex:0 1 75%;flex:0 1 75%;max-width:75%}[column~="10"]{-webkit-box-flex:0;-ms-flex:0 1 83.33333%;flex:0 1 83.33333%;max-width:83.33333%}[column~="11"]{-webkit-box-flex:0;-ms-flex:0 1 91.66667%;flex:0 1 91.66667%;max-width:91.66667%}[column~="12"]{-webkit-box-flex:0;-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}[column~="+1"]{margin-left:8.33333%}[column~="+2"]{margin-left:16.66667%}[column~="+3"]{margin-left:25%}[column~="+4"]{margin-left:33.33333%}[column~="+5"]{margin-left:41.66667%}[column~="+6"]{margin-left:50%}[column~="+7"]{margin-left:58.33333%}[column~="+8"]{margin-left:66.66667%}[column~="+9"]{margin-left:75%}[column~="+10"]{margin-left:83.33333%}[column~="+11"]{margin-left:91.66667%}[column~="+12"]{margin-left:100%}}@media print{@page{margin:2cm}*,:after,:before{background:transparent!important;color:#000!important;-webkit-filter:none!important;filter:none!important;text-shadow:none!important}:root{background-color:#fff;color:#000;font:12pt/1.4 Georgia,Times New Roman,Times,serif}body{width:100%!important;margin:0!important;padding:0!important}h1,h2,h3,h4,h5,h6{page-break-after:avoid;font-family:Georgia,Times New Roman,Times,serif}h1{font-size:19pt}h2{font-size:17pt}h3{font-size:15pt}h4,h5,h6{font-size:14pt}img{max-width:100%!important;page-break-after:avoid;page-break-inside:avoid}a[href^="#"]:after,audio,embed,footer,nav,object,video{display:none;visibility:hidden}h2,h3,p{orphans:3;widows:3}a,a:visited{color:#000;font-size:.57em;text-decoration:underline;word-wrap:break-word}a:visited[href]:after,a[href]:after{content:" (" attr(href) ")";font-size:smaller}q:after{content:" (Source: " attr(cite) ")"}abbr[title]:after{content:" (" attr(title) ")"}a:after,a[href^="#"]:after,a[href^="javascript:"]:after{content:""}code,pre{background-color:transparent;border:1px solid #dcdcdc}blockquote,code,pre{page-break-inside:avoid}blockquote{border:none}thead{display:table-header-group}img,tr{page-break-inside:avoid}ol{padding-left:1.25em}ul{padding-left:0;list-style:none}ul ul,ul ul ul{padding-left:1.5em}ol li,ul li{content:"» "}} diff --git a/dist/css/concise.css b/dist/css/concise.css deleted file mode 100644 index 981474a..0000000 --- a/dist/css/concise.css +++ /dev/null @@ -1,2674 +0,0 @@ -/** - * # Concise.CSS - * http://github.com/ConciseCSS/concise.css - * - * - * Copyright 2014 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - -o-text-size-adjust: 100%; - text-size-adjust: 100%; -} - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} - -audio, -canvas, -progress, -video { - display: inline-block; - vertical-align: baseline; -} - -audio:not([controls]) { - display: none; - height: 0; -} - -[hidden], -template { - display: none; -} - -a { - background: transparent; -} -a:focus { - outline: thin dotted; -} -a:active, a:hover { - outline: 0; -} - -abbr[title] { - border-bottom: 1px dotted; -} - -b, -strong { - font-weight: bold; -} - -dfn { - font-style: italic; -} - -mark { - background: #ff0; - color: #000; -} - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -img { - border: 0; - -ms-interpolation-mode: bicubic; -} - -svg:not(:root) { - overflow: hidden; -} - -figure { - margin: 1em 40px; -} - -hr { - border: solid #eee; - border-width: 1px 0 0; - clear: both; - height: 0; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - -ms-box-sizing: content-box; - -o-box-sizing: content-box; - box-sizing: content-box; -} - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 16px; - font-size: 1rem; - line-height: 1.5; -} - -q { - quotes: none; -} -q:before, q:after { - content: ''; - content: none; -} - -form { - margin: 0; -} - -button, -input, -optgroup, -select, -textarea { - color: inherit; - font: inherit; - margin: 0; - vertical-align: baseline; -} - -button { - overflow: visible; -} - -button, -select { - text-transform: none; -} - -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - cursor: pointer; -} - -button[disabled], -html input[disabled] { - cursor: default; -} - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -input { - line-height: normal; -} -input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; - padding: 0; -} -input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - height: auto; -} -input[type="search"] { - -webkit-appearance: textfield; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - -ms-box-sizing: content-box; - -o-box-sizing: content-box; - box-sizing: content-box; -} -input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -fieldset { - margin: 0 2px; -} - -legend { - border: 0; - padding: 0; - white-space: normal; -} - -textarea { - overflow: auto; -} - -optgroup { - font-weight: bold; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} - -.clearfix:after { - content: ""; - display: table; - clear: both; -} - -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6, -.giga, .mega, .kilo, -hgroup, -ul, ol, dl, -blockquote, p, address, -table, -fieldset, figure, -pre, -.row, -.well { - margin-bottom: 24px; - margin-bottom: 1.5rem; -} - -hr { - margin-bottom: 22px; - margin-bottom: 1.375rem; -} - -ul, -ol, -dd { - margin-left: 48px; - margin-left: 3rem; -} - -*, *:before, *:after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - -o-box-sizing: border-box; - box-sizing: border-box; -} - -html, -body { - background-color: #fff; - color: #333333; - font: normal normal 1em/1.5 "Droid Sans", Helvetica, Arial, sans-serif; - margin: 0; - font-smooth: always; - -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; -} - -html[dir="rtl"] { - direction: rtl; -} - -*::-webkit-selection { - background-color: #666666; - color: white; -} -*::-moz-selection { - background-color: #666666; - color: white; -} -*::selection { - background-color: #666666; - color: white; -} - -.container { - width: 90%; -} - -@media (min-width: 48em) { - .container { - width: 620px; - } -} -@media (min-width: 60em) { - .container { - width: 768px; - } -} -@media (min-width: 70em) { - .container { - width: 960px; - } -} -@media (min-width: 80em) { - .container { - width: 1140px; - } -} -a { - color: #62b3e7; - text-decoration: none; -} -a:hover, a:visited { - color: #8ec8ee; - cursor: pointer; - text-decoration: underline; -} - -p a { - line-height: inherit; -} -p a:visited { - line-height: inherit; -} - -small, -.small { - font-size: 12px; - font-size: 0.75rem; - line-height: 2; -} - -.micro { - font-size: 10px; - font-size: 0.625rem; - line-height: 2.4; -} - -address { - font-style: normal; -} -address > strong { - display: block; -} - -abbr[title], abbr[data-original-title] { - cursor: help; - border-bottom: 1px dotted #999; -} - -acronym { - cursor: help; - border-bottom: 1px dashed blue; -} - -kbd { - background-color: #333; - border-radius: 4px; - color: #fff; - font-size: 90%; - padding: 1px 4px; -} - -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6, -.giga, .mega, .kilo { - color: #181818; - font-weight: normal; - text-rendering: optimizeLegibility; -} - -h1, .h1 { - font-size: 24px; - font-size: 1.5rem; - line-height: 1; -} - -h2, .h2 { - font-size: 20px; - font-size: 1.25rem; - line-height: 1.2; -} - -h3, .h3 { - font-size: 18px; - font-size: 1.125rem; - line-height: 1.33333; -} - -h4, .h4 { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; -} - -h5, .h5 { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.71429; -} - -h6, .h6 { - font-size: 12px; - font-size: 0.75rem; - line-height: 2; -} - -@media (min-width: 48em) { - h1, .h1 { - font-size: 32px; - font-size: 2rem; - line-height: 1.5; - } - - h2, .h2 { - font-size: 24px; - font-size: 1.5rem; - line-height: 1; - } - - h3, .h3 { - font-size: 20px; - font-size: 1.25rem; - line-height: 1.2; - } - - h4, .h4 { - font-size: 18px; - font-size: 1.125rem; - line-height: 1.33333; - } - - h5, .h5 { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - } - - h6, .h6 { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.71429; - } -} -@media (min-width: 60em) { - h1, .h1 { - font-size: 36px; - font-size: 2.25rem; - line-height: 1.33333; - } - - h2, .h2 { - font-size: 30px; - font-size: 1.875rem; - line-height: 1.6; - } - - h3, .h3 { - font-size: 24px; - font-size: 1.5rem; - line-height: 1; - } - - h4, .h4 { - font-size: 20px; - font-size: 1.25rem; - line-height: 1.2; - } - - h5, .h5 { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - } - - h6, .h6 { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.71429; - } -} -h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, -.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, -.giga a, .mega a, .kilo a { - font-weight: inherit; -} - -h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, -.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, -.giga small, .mega small, .kilo small { - font-size: 65% !important; - line-height: 1; -} - -.giga { - font-size: 48px; - font-size: 3rem; - line-height: 1; -} - -.mega { - font-size: 40px; - font-size: 2.5rem; - line-height: 1.2; -} - -.kilo { - font-size: 32px; - font-size: 2rem; - line-height: 1.5; -} - -@media (min-width: 48em) { - .giga { - font-size: 64px; - font-size: 4rem; - line-height: 1.125; - } - - .mega { - font-size: 48px; - font-size: 3rem; - line-height: 1; - } - - .kilo { - font-size: 32px; - font-size: 2rem; - line-height: 1.5; - } -} -@media (min-width: 70em) { - .giga { - font-size: 80px; - font-size: 5rem; - line-height: 1.2; - } - - .mega { - font-size: 64px; - font-size: 4rem; - line-height: 1.125; - } - - .kilo { - font-size: 48px; - font-size: 3rem; - line-height: 1; - } -} -@media (min-width: 80em) { - .giga { - font-size: 96px; - font-size: 6rem; - line-height: 1; - } - - .mega { - font-size: 72px; - font-size: 4.5rem; - line-height: 1; - } - - .kilo { - font-size: 64px; - font-size: 4rem; - line-height: 1.125; - } -} -blockquote { - border-left: 1px solid #ddd; - color: #777; - font-style: italic; - margin: 1em 2em; - padding-left: 1em; - text-align: left; -} -blockquote cite { - color: #555; - display: block; - font-size: 14px; - font-size: 0.875rem; - line-height: 1.71429; -} -blockquote cite:before { - content: "\2014 \0020"; -} -blockquote cite a { - color: #555; -} -blockquote cite a:visited { - color: #555; -} -blockquote.blockquote-reverse { - border-left: none; - border-right: 1px solid #ddd; - padding: 0 1em 0 0; - text-align: right; -} - -ul { - margin-left: 20px; - padding-left: 0px; -} - -ol { - margin-left: 0px; - padding-left: 20px; -} - -ul li, -ol li { - line-height: 1.75em; - position: relative; -} - -ul ul { - list-style-type: circle; - margin-bottom: auto; -} -ul ul ul { - list-style-type: square; -} - -ol ol { - list-style-type: lower-latin; - margin-bottom: auto; -} -ol ol ol { - list-style-type: lower-roman; -} - -@media (min-width: 48em) { - ul li ul { - margin-left: 20px; - } -} -.list-unstyled { - margin-left: 0px; - list-style: none; -} -.list-unstyled li ul { - list-style: none; -} -.list-unstyled li ul li ul { - list-style: none; -} - -.list-line li { - border-bottom: 1px solid #eee; - padding: 5px 0; -} -.list-line li:last-child, -.list-line li li { - border-bottom: none; -} - -.list-inline { - display: block; - margin-left: 0px; -} -.list-inline li { - border-bottom: none; -} -.list-inline li:last-child { - margin-right: 0px; -} - -@media (min-width: 30em) { - .list-inline li { - display: inline; - margin-right: 25px; - } - .list-inline li:last-child { - margin-right: 0px; - } - - .list-line.list-inline li { - margin-right: 15px; - } - .list-line.list-inline li:after { - color: #e6e8ea; - content: "|"; - margin-left: 15px; - } - .list-line.list-inline li:last-child:after { - content: ""; - } -} -.list-fill-even li, -.list-fill-odd li { - padding-left: 5px; -} - -.list-fill-even li:nth-child(even), -.list-fill-odd li:nth-child(odd) { - background-color: #f9f9f9; -} - -dt { - font-weight: bold; -} - -dd { - margin-left: 0px; -} - -@media (min-width: 48em) { - dl.dl-horizontal { - overflow: hidden; - } - dl.dl-horizontal > dt { - width: 160px; - float: left; - clear: both; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - dl.dl-horizontal > dd { - margin-left: 180px; - } -} -table.table { - empty-cells: show; - width: 100%; -} -table.table caption { - color: #000; - font: italic 85%/1 arial, sans-serif; - padding: 1em 0; - text-align: center; -} -table.table thead { - border-bottom: 2px solid #ededed; -} -table.table th { - padding: 12px 15px; -} -table.table td { - padding: 12px 15px; - border-top: 1px solid #ededed; -} -table .bg-light-green { - color: #468847; -} -table .bg-light-blue { - color: #3a87ad; -} -table .bg-light-yellow { - color: #c09853; -} -table .bg-light-red { - color: #d2322d; -} -table.table-full, table.table.table-full { - width: 100%; -} -table.table-border-all, table.table-border-outer { - border: 1px solid #ededed; -} -table.table-border-all th, -table.table-border-all td { - border-right: 1px solid #ededed; -} -table.table-border-inner th, -table.table-border-inner td { - border-right: 1px solid #ededed; -} -table.table-hover-row tr:hover td, table.table-hover-cell td:hover { - background-color: #f9f9f9; -} -table.table-fill-even tbody tr:nth-child(even), table.table-fill-odd tbody tr:nth-child(odd) { - background-color: #f9f9f9; -} - -@media (min-width: 30em) { - table.table { - width: auto; - } - table.table th, table.table td { - padding: 10px 50px 10px 25px; - } -} -.table-responsive { - overflow: auto; - width: 100%; -} -.table-responsive table { - margin-bottom: 0; -} - -label { - display: block; -} - -input, -select, -textarea { - border: 1px solid #ddd; - height: 37px; - padding: 5px; - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - -o-box-sizing: border-box; - box-sizing: border-box; -} - -@media (min-width: 30em) { - input, - select, - textarea { - width: 90%; - } -} -@media (min-width: 48em) { - input, - select { - width: 300px; - } -} -input:focus, -select:focus, -textarea:focus, -button:focus, -[contenteditable="true"]:focus { - outline: none; - outline: thin dotted \9; -} - -textarea { - height: auto; -} - -input[type="checkbox"], input[type="file"], input[type="image"], input[type="radio"] { - background: auto !important; - border: auto !important; - height: auto !important; - width: auto !important; -} -input[disabled] { - cursor: not-allowed; - background-color: #f6f6f6; -} - -@media (min-width: 48em) { - input[type="submit"] { - width: auto; - } - - textarea { - width: 400px; - } -} -select[disabled], -textarea[disabled] { - background-color: #f6f6f6; -} - -fieldset { - border: 1px solid #ededed; - padding: 10px 25px; -} -fieldset legend { - font-weight: bold; - font-size: 13px; - font-size: 0.8125rem; - line-height: 1.84615; - padding: 0 10px; -} - -input.required:required:valid, -textarea.required:required:valid { - border-color: #2ecc71; -} - -input.required:focus:invalid, -textarea.required:focus:invalid { - border-color: #e74c3c; -} - -.form-item { - display: block; - padding: 14px 0; -} - -form.border-radius input, -form.border-radius select, -form.border-radius textarea, -form.border-radius fieldset { - border-radius: 4px; -} - -.form-inline label { - width: auto; -} - -@media (min-width: 48em) { - .form-inline label { - display: inline-block; - width: 100px; - } - .form-inline textarea { - width: auto; - } -} -::-webkit-input-placeholder { - color: #bbbbbb; -} - -:-ms-input-placeholder { - color: #bbbbbb; -} - -::-moz-placeholder { - color: #bbbbbb; -} - -:-moz-placeholder { - color: #bbbbbb; -} - -.row { - width: 100%; -} -.row:after { - clear: both; - content: " "; - display: table; -} - -[class*='column-'] { - -webkit-background-clip: padding-box !important; - -moz-background-clip: padding-box !important; - -ms-background-clip: padding-box !important; - -o-background-clip: padding-box !important; - background-clip: padding-box !important; -} -[class*='column-'].right { - float: right; -} -[class*='column-'] img { - max-width: 100%; -} - -@media (min-width: 48em) { - [class*='column-'] { - float: left; - } - - .gutters [class*='column-'] { - margin-left: 2%; - } - .gutters [class*='column-']:first-child { - margin-left: 0; - } - - .column-1 { - width: 6.25%; - } - - .column-2 { - width: 12.5%; - } - - .column-3 { - width: 18.75%; - } - - .column-4 { - width: 25%; - } - - .column-5 { - width: 31.25%; - } - - .column-6 { - width: 37.5%; - } - - .column-7 { - width: 43.75%; - } - - .column-8 { - width: 50%; - } - - .column-9 { - width: 56.25%; - } - - .column-10 { - width: 62.5%; - } - - .column-11 { - width: 68.75%; - } - - .column-12 { - width: 75%; - } - - .column-13 { - width: 81.25%; - } - - .column-14 { - width: 87.5%; - } - - .column-15 { - width: 93.75%; - } - - .column-16 { - width: 100%; - } - - .gutters .column-1 { - width: 4.25%; - } - - .gutters .column-2 { - width: 10.5%; - } - - .gutters .column-3 { - width: 16.75%; - } - - .gutters .column-4 { - width: 23%; - } - - .gutters .column-5 { - width: 29.25%; - } - - .gutters .column-6 { - width: 35.5%; - } - - .gutters .column-7 { - width: 41.75%; - } - - .gutters .column-8 { - width: 48%; - } - - .gutters .column-9 { - width: 54.25%; - } - - .gutters .column-10 { - width: 60.5%; - } - - .gutters .column-11 { - width: 66.75%; - } - - .gutters .column-12 { - width: 73%; - } - - .gutters .column-13 { - width: 79.25%; - } - - .gutters .column-14 { - width: 85.5%; - } - - .gutters .column-15 { - width: 91.75%; - } - - .gutters .column-16 { - width: 100%; - } -} -.non-responsive [class*='column-'] { - float: left; - width: auto !important; -} -.non-responsive .gutters [class*='column-'], .non-responsive.gutters [class*='column-'] { - margin-left: 2%; -} -.non-responsive .gutters [class*='column-']:first-child, .non-responsive.gutters [class*='column-']:first-child { - margin-left: 0; -} - -.bg-white { - background-color: white !important; -} - -.bg-black { - background-color: #222222 !important; -} - -.bg-light-gray { - background-color: #f9f9f9 !important; -} - -.bg-gray { - background-color: #999999 !important; -} - -.bg-light-green { - background-color: #dff0d8 !important; -} - -.bg-green { - background-color: #5cb85c !important; -} - -.bg-light-blue { - background-color: #d9edf7 !important; -} - -.bg-blue { - background-color: #5bc0de !important; -} - -.bg-light-yellow { - background-color: #fcf8e3 !important; -} - -.bg-yellow { - background-color: #ed9c28 !important; -} - -.bg-light-red { - background-color: #f2dede !important; -} - -.bg-red { - background-color: #d9534f !important; -} - -.color-white { - color: white; -} - -.color-black { - color: #222222; -} - -.color-gray { - color: #999999; -} - -.color-green { - color: #468847; -} - -.color-blue { - color: #3a87ad; -} - -.color-yellow { - color: #c09853; -} - -.color-red { - color: #d2322d; -} - -.btn { - background-color: #ccc; - border: 0; - color: #fff; - cursor: pointer; - display: block; - font-size: 100%; - font-weight: 700; - letter-spacing: 1px; - line-height: 1; - margin: 12px auto; - outline: none; - padding: 15px 48px; - position: relative; - text-align: center; - text-transform: uppercase; - vertical-align: baseline; - white-space: nowrap; - width: 100%; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; - -webkit-user-drag: none; - -moz-user-drag: none; - -ms-user-drag: none; - -o-user-drag: none; - user-drag: none; - -webkit-transition: all 0.3s; - -moz-transition: all 0.3s; - -ms-transition: all 0.3s; - -o-transition: all 0.3s; - transition: all 0.3s; -} -.btn::-moz-focus-inner { - padding: 0; - border: 0; -} -.btn:after { - content: ""; - position: absolute; - z-index: -1; -} -.btn:hover { - background-color: #b5b5b5; - background-image: -webkit-gradient(linear, 50, 50, 50 100%, from(rgba(50, 50, 50, 0.05)), to(rgba(50, 50, 50, 0.05))); - background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05)); - background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05)); - background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05)); - background-image: linear-gradient(to bottom, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05)); - background-repeat: repeat-x; -} -.btn:active { - background-image: -webkit-gradient(linear, 50, 50, 50 100%, from(rgba(50, 50, 50, 0.1)), to(rgba(50, 50, 50, 0.1))); - background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1)); - background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1)); - background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1)); - background-image: linear-gradient(to bottom, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1)); - background-repeat: repeat-x; -} -.btn[disabled] { - background: #dededc !important; - border: none; - color: #b3b3b1; - cursor: default; -} -.btn[disabled]:hover, .btn[disabled]:active, .btn[disabled]:focus { - background: #dededc !important; - border: none; - color: #b3b3b1; - cursor: default; -} - -@media (min-width: 48em) { - .btn { - display: inline-block; - *display: inline; - margin: 0px; - width: auto; - zoom: 1; - } - - .btn-extra-small, - a.btn-extra-small, - p.btn-extra-small, - input.btn-extra-small { - font-size: 11px; - font-size: 0.6875rem; - line-height: 2.18182; - padding: 5px 16px; - } - - .btn-small, - a.btn-small, - p.btn-small, - input.btn-small { - font-size: 12px; - font-size: 0.75rem; - line-height: 2; - padding: 10px 32px; - } - - .btn-large, - a.btn-large, - p.btn-large, - input.btn-large { - padding: 20px 64px; - } - - .btn-extra-large, - a.btn-extra-large, - p.btn-extra-large, - input.btn-extra-large { - padding: 25px 80px; - } -} -a.btn { - color: #fff; - text-decoration: none; -} -a.btn:hover { - color: #fff; - text-decoration: none; -} -a.btn:active { - outline: 0; -} - -input[type="submit"].btn { - color: #fff; - height: auto; -} - -button.btn { - color: #fff; -} - -.btn.bg-white { - color: #333; -} -.btn.btn-border { - background: transparent; - border-color: #ddd; - border-style: solid; - border-width: 1px; - color: #aaa; -} -.btn.btn-border:hover { - background: #ddd; - color: #fff !important; -} -.btn.btn-border.white { - border-color: white; -} -.btn.btn-border.white:hover { - background: white; - color: #222222 !important; -} - -a.btn.btn-border.white:hover { - background: white; - color: #222222 !important; -} - -.btn.btn-border.white, -a.btn.btn-border.white { - color: white; -} - -.btn.btn-border.white:active, .btn.btn-border.white:focus { - background-color: #f9f9f9; -} -.btn.btn-border.black { - border-color: #222222; - color: #222222; -} -.btn.btn-border.black:hover { - background-color: #222222; -} -.btn.btn-border.black:active, .btn.btn-border.black:focus { - background-color: #222222; -} -.btn.btn-border.gray { - border-color: #999999; - color: #999999; -} -.btn.btn-border.gray:hover { - background-color: #999999; -} -.btn.btn-border.gray:active, .btn.btn-border.gray:focus { - background-color: #737373; -} -.btn.btn-border.green { - border-color: #5cb85c; - color: #468847; -} -.btn.btn-border.green:hover { - background-color: #5cb85c; -} -.btn.btn-border.green:active, .btn.btn-border.green:focus { - background-color: #3d8b3d; -} -.btn.btn-border.blue { - border-color: #5bc0de; - color: #3a87ad; -} -.btn.btn-border.blue:hover { - background-color: #5bc0de; -} -.btn.btn-border.blue:active, .btn.btn-border.blue:focus { - background-color: #28a1c5; -} -.btn.btn-border.yellow { - border-color: #ed9c28; - color: #c09853; -} -.btn.btn-border.yellow:hover { - background-color: #ed9c28; -} -.btn.btn-border.yellow:active, .btn.btn-border.yellow:focus { - background-color: #b9730f; -} -.btn.btn-border.red { - border-color: #d9534f; - color: #d2322d; -} -.btn.btn-border.red:hover { - background-color: #d9534f; -} -.btn.btn-border.red:active, .btn.btn-border.red:focus { - background-color: #b52b27; -} - -.btn.dropdown { - width: 100%; -} -.btn.dropdown .dropdown-menu { - margin-top: auto; - text-align: left; - top: 100%; - width: 100%; -} -.btn.dropdown[class*='dropdown-arrow-'] .dropdown-menu { - margin-top: 10px; -} -.btn.dropdown.up .dropdown-menu { - margin-bottom: 0px; - top: auto; -} -.btn.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu { - margin-bottom: 10px; -} - -@media (min-width: 48em) { - .btn-extra-small .caret, - .btn-small .caret { - border-top: 4px solid; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - } - - .btn.dropdown { - width: auto; - } - .btn.dropdown.extra-small .dropdown-menu { - margin-top: 6px; - } - .btn.dropdown.dropdown-small .dropdown-menu { - margin-top: 11px; - } - .btn.dropdown.dropdown-large .dropdown-menu { - margin-top: 21px; - } -} -.group { - display: inline-block; - vertical-align: bottom; -} -.group:after { - clear: both; - content: "."; - display: block; - height: 0; - visibility: hidden; -} - -.group-item, -p.group-item { - background-color: #fff; - border: 1px solid #ddd; - color: #666; - padding: 4px 7px; - width: auto; -} -.group-item.icon, -p.group-item.icon { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.71429; -} - -@media (min-width: 48em) { - .group-item { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - padding: 6px 12px; - } -} -.group-item:hover { - background-color: #f9f9f9; -} -.group-item:active { - -webkit-box-shadow: inset 0 1px 1px rgba(100, 100, 100, 0.1); - -moz-box-shadow: inset 0 1px 1px rgba(100, 100, 100, 0.1); - -ms-box-shadow: inset 0 1px 1px rgba(100, 100, 100, 0.1); - -o-box-shadow: inset 0 1px 1px rgba(100, 100, 100, 0.1); - box-shadow: inset 0 1px 1px rgba(100, 100, 100, 0.1); -} -.group-item.active, -.group-item .active { - background-color: #f2f2f2; -} - -.group > .group-item { - border-radius: 0; - float: left; - margin-left: -1px; -} - -.btn.full { - width: 100%; -} - -.group.border-radius > .group-item:first-child { - border-radius: 4px 0 0 4px; -} -.group.border-radius > .group-item:last-child { - border-radius: 0 4px 4px 0; -} - -.group-item.dropdown .dropdown-menu { - margin-top: 15px; - text-align: inherit; - width: 100%; -} -.group-item.dropdown .dropdown-menu li a { - font-size: 12px; - font-size: 0.75rem; - line-height: 2; - padding: 4px 7px; - width: auto; -} - -.group.border-radius .group-item.dropdown .dropdown-menu { - border-radius: 0px 0px 4px 4px; -} -.group.border-radius .group-item.dropdown.up .dropdown-menu { - border-radius: 4px 4px 0px 0px; -} -.group .caret { - border-top: 4px solid; - border-right: 4px solid transparent; - border-left: 4px solid transparent; -} - -@media (min-width: 48em) { - .group .caret { - border-top: 5px solid; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - } -} -.dropdown { - cursor: pointer; - outline: none; - position: relative; - width: auto; -} -.dropdown .dropdown-menu { - background-color: #fff; - border: 1px solid #eee; - border-radius: inherit; - font-weight: inherit; - left: 0; - margin-left: 0px; - opacity: 0; - pointer-events: none; - position: absolute; - right: 0; - text-transform: none; - z-index: 99999; - -webkit-transition: all 0.3s ease-in; - -moz-transition: all 0.3s ease-in; - -ms-transition: all 0.3s ease-in; - -o-transition: all 0.3s ease-in; - transition: all 0.3s ease-in; -} -.dropdown .dropdown-menu a { - text-decoration: none; -} -.dropdown .dropdown-menu p { - margin: 0; - padding: 10px 15px; -} -.dropdown .dropdown-menu span { - line-height: inherit; -} -.dropdown .dropdown-menu img { - padding: 15px; - width: 100%; -} -.dropdown .dropdown-menu iframe { - height: auto; - padding: 15px; - width: 100%; -} -.dropdown .dropdown-menu img + p, .dropdown .dropdown-menu iframe + p { - padding-top: 0px; -} -.dropdown .dropdown-menu hr { - margin: 10px; -} -.dropdown ul.dropdown-menu { - list-style-type: none; -} -.dropdown .dropdown-menu li { - display: block; - padding: 5px 10px; - -webkit-transition: all 0.3s ease-out; - -moz-transition: all 0.3s ease-out; - -ms-transition: all 0.3s ease-out; - -o-transition: all 0.3s ease-out; - transition: all 0.3s ease-out; -} -.dropdown .dropdown-menu.border-radius li:first-of-type { - border-radius: 4px 4px 0 0; -} -.dropdown .dropdown-menu.border-radius li:last-of-type { - border-radius: 0 0 4px 4px; -} -.dropdown .dropdown-menu li:hover { - background-color: #f3f8f8; -} -.dropdown.dropdown-active .dropdown-menu { - opacity: 1; - pointer-events: auto; -} -.dropdown .header { - color: #aaa; - cursor: default; - font-size: 14px; - font-size: 0.9rem; - font-size: 14px; - font-size: 0.875rem; - line-height: 1.71429; - margin: 12px 0 0; - padding: 0 0 0 9px; -} - -@media (min-width: 48em) { - .dropdown .dropdown-menu { - width: 200px; - } - .dropdown.dropdown-small .dropdown-menu { - width: 150px; - } - .dropdown.dropdown-large .dropdown-menu { - width: 350px; - } - .dropdown.dropdown-full .dropdown-menu { - width: 100%; - } -} -.dropdown-menu > .header { - margin: 0; -} - -.dropdown .header:hover, -.dropdown li.header:hover { - background: none; -} -.dropdown .dropdown-menu.border-radius { - border-radius: 4px; -} -.dropdown[class*='dropdown-arrow-'] .dropdown-menu { - margin-top: 10px; -} -.dropdown[class*='dropdown-arrow-'] .dropdown-menu:after { - border-color: #fff transparent; - border-style: solid; - bottom: 100%; - border-width: 0 6px 6px 6px; - content: ""; - height: 0; - position: absolute; - width: 0; -} -.dropdown[class*='dropdown-arrow-'] .dropdown-menu:before { - border-color: rgba(0, 0, 0, 0.1) transparent; - border-style: solid; - bottom: 100%; - border-width: 0 8px 8px 8px; - content: ""; - height: 0; - position: absolute; - width: 0; -} -.dropdown.dropdown-arrow-left .dropdown-menu:after { - left: 15px; -} -.dropdown.dropdown-arrow-left .dropdown-menu:before { - left: 13px; -} -.dropdown.dropdown-arrow-right .dropdown-menu:after { - right: 15px; -} -.dropdown.dropdown-arrow-right .dropdown-menu:before { - right: 13px; -} -.dropdown.up .dropdown-menu { - bottom: 100%; -} -.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu { - margin-bottom: 10px; -} -.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:after, .dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:before { - top: 100%; -} -.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:after { - border-width: 6px 6px 0 6px; -} -.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:before { - border-width: 8px 8px 0 8px; -} - -nav ul { - list-style: none; - margin: 0; -} -nav li { - cursor: pointer; - position: relative; -} -nav .dropdown li { - margin-right: 0px; -} - -.nav-dropdown ul ul { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; -} -.nav-dropdown ul ul ul { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; -} -.nav-dropdown ul ol ul, -.nav-dropdown ul ul ol, -.nav-dropdown ul ol ol { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; -} -.nav-dropdown ol ol, -.nav-dropdown ol ul { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; -} -.nav-dropdown ol ol ol, -.nav-dropdown ol ol ul { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; -} -.nav-dropdown ol ul ul, -.nav-dropdown ol ul ol { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; -} -.nav-dropdown .list-inline li li, .nav-dropdown.list-inline li li { - margin-right: 0px; -} -.nav-dropdown li li { - background: #fff; - display: block; -} -.nav-dropdown ul ul ul, -.nav-dropdown ul ol ul, -.nav-dropdown ul ul ol, -.nav-dropdown ul ol ol { - display: block; -} -.nav-dropdown ol ul ul, -.nav-dropdown ol ol ul, -.nav-dropdown ol ul ol { - display: block; -} -.nav-dropdown ul li:hover ul, -.nav-dropdown ul li:hover ol { - display: block; - opacity: 1; - top: 100%; - visibility: visible; -} -.nav-dropdown ol li:hover ul, -.nav-dropdown ol li:hover ol { - display: block; - opacity: 1; - top: 100%; - visibility: visible; -} -.nav-dropdown ul li:hover ul ul, -.nav-dropdown ul li:hover ol ul, -.nav-dropdown ul li:hover ul ol, -.nav-dropdown ul li:hover ol ol { - display: none; - opacity: 0; - visibility: hidden; -} -.nav-dropdown ol li:hover ul ul, -.nav-dropdown ol li:hover ol ul, -.nav-dropdown ol li:hover ul ol, -.nav-dropdown ol li:hover ol ol { - display: none; - opacity: 0; - visibility: hidden; -} -.nav-dropdown ul ul li:hover ul, -.nav-dropdown ul ul li:hover ol { - display: block; - left: 100%; - opacity: 1; - position: absolute; - top: 0; - visibility: visible; -} -.nav-dropdown ul ol li:hover ol, -.nav-dropdown ul ol li:hover ul { - display: block; - left: 100%; - opacity: 1; - position: absolute; - top: 0; - visibility: visible; -} -.nav-dropdown ol ul li:hover ul, -.nav-dropdown ol ul li:hover ol { - display: block; - left: 100%; - opacity: 1; - position: absolute; - top: 0; - visibility: visible; -} -.nav-dropdown ol ol li:hover ol, -.nav-dropdown ol ol li:hover ul { - display: block; - left: 100%; - opacity: 1; - position: absolute; - top: 0; - visibility: visible; -} - -.nav-vertical li { - display: block; - margin-right: 0px; - padding: 10px; -} -.nav-vertical .icon { - line-height: inherit; - margin-right: 7px; -} -.nav-vertical .icon.right, .nav-vertical .icon.text-right { - margin-right: 0px; -} -.nav-vertical.nav-bordered { - border: 1px solid #eee; -} -.nav-vertical.nav-bordered li:hover { - background-color: #f6f6f6; -} -.nav-vertical.nav-line li:hover { - background-color: #f6f6f6; -} -.nav-vertical .badge, -.nav-vertical .label { - margin-top: 5px; -} -.nav-vertical .dropdown .dropdown-menu { - top: 100%; -} - -@media (min-width: 48em) { - .nav-vertical .dropdown .dropdown-menu { - left: 100%; - top: 0; - } -} -.naver .naver-handle { - color: inherit; - cursor: pointer; - display: none; - font-size: 24px; - font-size: 1.5rem; - line-height: 1; - text-align: right; - text-transform: uppercase; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; -} -.naver .naver-wrapper { - height: auto; - width: 100%; -} -.naver.enabled .naver-handle { - display: block; -} -.naver.enabled .naver-wrapper { - height: 0px; - overflow: hidden; -} -.naver.enabled .naver-wrapper li { - display: block; - padding: 8px; - text-align: left; - width: 100%; -} -.naver.enabled .naver-wrapper li:hover { - background: #f9f9f9; -} - -.nav-responsive.naver .naver-handle:after { - content: "\f0c9"; - font-family: FontAwesome; - text-align: right; -} -.nav-responsive.nav-responsive-text.naver .naver-handle:after { - content: "\00a0 \f0c9"; -} -.nav-responsive.nav-responsive-text.naver .naver-container:before { - clear: both; - content: "."; - display: block; - height: 0; - line-height: 0; - text-align: right; - visibility: hidden; -} - -.nav-responsive-left.naver .naver-handle { - text-align: left; -} -.nav-responsive-left.naver .naver-handle:before { - content: "\f0c9"; - font-family: FontAwesome; - text-align: left; -} -.nav-responsive-left.nav-responsive-text.naver .naver-handle:before { - content: "\f0c9 \00a0"; -} -.nav-responsive-left.nav-responsive-text.naver .naver-container:after { - clear: both; - content: "."; - display: block; - height: 0; - line-height: 0; - text-align: left; - visibility: hidden; -} - -.nav-responsive-center.naver .naver-handle { - text-align: center; -} -.nav-responsive-center.naver .naver-handle:before { - content: "\f0c9"; - font-family: FontAwesome; - text-align: center; -} -.nav-responsive-center.nav-responsive-text.naver .naver-handle:before { - content: "\f0c9 \00a0"; -} -.nav-responsive-center.nav-responsive-text.naver .naver-container:after { - clear: both; - content: "."; - display: block; - height: 0; - line-height: 0; - text-align: center; - visibility: hidden; -} - -.breadcrumbs { - font-size: 13px; - font-size: 0.8125rem; - line-height: 1.84615; - margin: 12px 0; - padding: 5px 15px 5px 0; -} -.breadcrumbs li { - display: inline; - margin-right: 10px; -} -.breadcrumbs li:last-child { - margin-right: 0px; -} -.breadcrumbs li:after { - content: "/"; - color: #ccc; - padding-left: 12px; - vertical-align: middle; -} -.breadcrumbs li:last-child { - color: #999; -} -.breadcrumbs li:last-child a { - color: #999; -} -.breadcrumbs li:last-child:after { - content: ""; -} -.breadcrumbs .well, .breadcrumbs.well { - padding-left: 15px; -} - -.well { - background-color: #f9f9f9; - border-color: #ededed; - border-style: solid; - border-width: 1px; - margin-bottom: 24px; - padding: 0px 15px; -} -.well h1, .well h2, .well h3, .well h4, .well h5, .well h6, -.well .h1, .well .h2, .well .h3, .well .h4, .well .h5, .well .h6, -.well .giga, .well .mega, .well .kilo { - color: inherit; -} -.well p { - margin: 10px 0; -} -.well pre, -.well .pre.well { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.71429; - padding: 10px 15px; -} - -.well header h1, .well header h2, .well header h3, .well header h4, .well header h5, .well header h6, -.well header .h1, .well header .h2, .well header .h3, .well header .h4, .well header .h5, .well header .h6, -.well header .giga, .well header .mega, .well header .kilo { - margin: 20px 0 10px; -} -.well header .label, -.well header .badge { - margin-top: 10px; -} -.well[class*='bg-'] { - color: #fff; -} -.well.bg-white { - color: #666; -} -.well.bg-black { - border-color: #000; -} -.well.bg-green { - border-color: #3d8b3d; -} -.well.bg-light-green { - border-color: #3d8b3d; - color: #468847; -} -.well.bg-blue { - border-color: #28a1c5; -} -.well.bg-light-blue { - border-color: #28a1c5; - color: #3a87ad; -} -.well.bg-yellow { - border-color: #b9730f; -} -.well.bg-light-yellow { - border-color: #b9730f; - color: #c09853; -} -.well.bg-red { - border-color: #b52b27; -} -.well.bg-light-red { - border-color: #b52b27; - color: #d2322d; -} - -.close { - color: #000; - filter: alpha(opacity=20); - float: right; - font-size: 22px; - font-size: 1.375rem; - line-height: 1.09091; - font-weight: bold; - opacity: .2; -} -.close:hover, .close:focus { - color: #000; - cursor: pointer; - filter: alpha(opacity=50); - opacity: .5; - text-decoration: none; - -webkit-transition: all 0.2s linear; - -moz-transition: all 0.2s linear; - -ms-transition: all 0.2s linear; - -o-transition: all 0.2s linear; - transition: all 0.2s linear; -} - -button.close { - background: transparent; - border: 0; - cursor: pointer; - padding: 0; -} - -.well .close { - margin-top: 6px; -} - -.label, -.badge { - background-color: #b5b5b5; - color: #fff; - font-size: 12px; - font-size: 0.75rem; - line-height: 2; - font-weight: bold; - padding: 3px 7px; - text-align: center; - vertical-align: baseline; - white-space: nowrap; -} - -.label { - border-radius: 4px; - display: inline; -} - -.badge { - border-radius: 10px; - display: inline-block; - padding: 1px 7px; -} - -.label[href]:hover, .label[href]:focus { - color: #fff; - cursor: pointer; - text-decoration: none; -} - -a.badge:hover, a.badge:focus { - color: #fff; - cursor: pointer; - text-decoration: none; -} - -.label a, -.badge a { - color: #fff; - cursor: pointer; - text-decoration: none; -} - -.label:empty, -.badge:empty { - display: none; -} - -.progress { - background-color: #f9f9f9; - color: #fff; - font-size: 11px; - font-size: 0.6875rem; - height: 12px; - line-height: 1.182; - margin: 6px 0; - position: relative; - text-align: center; - width: 100%; - -webkit-box-shadow: inset 0 1px 1px rgba(100, 100, 100, 0.1); - -moz-box-shadow: inset 0 1px 1px rgba(100, 100, 100, 0.1); - -ms-box-shadow: inset 0 1px 1px rgba(100, 100, 100, 0.1); - -o-box-shadow: inset 0 1px 1px rgba(100, 100, 100, 0.1); - box-shadow: inset 0 1px 1px rgba(100, 100, 100, 0.1); - -webkit-box-sizing: initial; - -moz-box-sizing: initial; - -ms-box-sizing: initial; - -o-box-sizing: initial; - box-sizing: initial; -} - -.progress-small { - font-size: 9px; - font-size: 0.5625rem; - height: 6px; - line-height: 0.875; -} - -.progress-large { - font-size: 16px; - font-size: 1rem; - height: 25px; - line-height: 1.7; -} - -.progress > span { - background-color: #2bc253; - display: block; - height: 100%; - overflow: hidden; - position: relative; - width: auto; -} -.progress.border-radius > span { - border-radius: 4px; -} -.progress.progress-stacked > span { - display: inline-block; - float: left; -} -.progress.progress-stacked.border-radius > span { - border-radius: 0px; -} -.progress.progress-stacked.border-radius > span:first-of-type { - border-radius: 4px 0 0 4px; -} -.progress.progress-stacked.border-radius > span:last-of-type { - border-radius: 0 4px 4px 0; -} - -.progress-striped > span:after, .progress-striped > span > span { - bottom: 0; - content: ""; - left: 0; - overflow: hidden; - position: absolute; - right: 0; - top: 0; - z-index: 1; - -webkit-background-size: 50px 50px; - -moz-background-size: 50px 50px; - -ms-background-size: 50px 50px; - -o-background-size: 50px 50px; - background-size: 50px 50px; - background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -} -.progress-striped.progress-animate > span:after, .progress-striped.progress-animate > span > span { - -webkit-animation: move 2s linear infinite; - -moz-animation: move 2s linear infinite; - -ms-animation: move 2s linear infinite; - -o-animation: move 2s linear infinite; - animation: move 2s linear infinite; -} - -@-webkit-keyframes move { - 0% { - background-position: 0 0; - } - - 100% { - background-position: 50px 50px; - } -} -.float-left { - float: left !important; -} - -.float-right { - float: right !important; -} - -.float-none { - float: none !important; -} - -.align-center { - display: block; - margin-left: auto; - margin-right: auto; -} - -.no-margin { - margin: 0 !important; -} - -.icon-alone { - display: inline-block; -} - -.inline { - display: block; -} - -@media (min-width: 30em) { - .inline { - display: inline; - } -} -.show { - display: block; - visibility: visible; -} - -.hide { - display: none; - visibility: hidden; -} - -.screen-reader { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.full { - width: 100%; -} - -img.full { - max-width: 100%; - height: auto; - display: block; - width: auto; -} - -.text-left { - text-align: left; -} - -.text-right { - text-align: right; -} - -.text-center { - text-align: center; -} - -.text-justify { - text-align: justify; -} - -.weight-light { - font-weight: 300 !important; -} - -.weight-normal { - font-weight: 400 !important; -} - -.weight-semibold { - font-weight: 600 !important; -} - -.text-uppercase { - text-transform: uppercase; -} - -.amp { - font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif !important; -} - -.text-hide { - border: 0; - background-color: transparent; - color: transparent; - font: 0 / 0 a; - text-shadow: none; -} - -.caret { - border-top: 5px solid; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - display: inline-block; - margin: 0 0 3px 4px; - vertical-align: middle; - width: 0; -} - -.border-radius { - border-radius: 4px; -} - -.pill { - border-radius: 25px; -} - -.show-extra-small, -.hide-small, -.hide-medium, -.hide-large, -.hide-extra-large, -.hide-print, -.hide-hd { - display: block; - visibility: visible; -} - -.hide-extra-small, -.show-small, -.show-medium, -.show-large, -.show-extra-large, -.show-print, -.show-hd { - display: none; - visibility: hidden; -} - -@media (min-width: 48em) { - .show-small, - .hide-extra-small, - .hide-medium, - .hide-large, - .hide-extra-large { - display: block; - visibility: visible; - } - - .hide-small, - .show-extra-small, - .show-medium, - .show-large, - .show-extra-large { - display: none; - visibility: hidden; - } -} -@media (min-width: 60em) { - .show-medium, - .hide-small, - .hide-extra-small, - .hide-large, - .hide-extra-large { - display: block; - visibility: visible; - } - - .hide-medium, - .show-small, - .show-extra-small, - .show-large, - .show-extra-large { - display: none; - visibility: hidden; - } -} -@media (min-width: 70em) { - .show-large, - .hide-extra-small, - .hide-small, - .hide-medium, - .hide-extra-large { - display: block; - visibility: visible; - } - - .hide-large, - .show-extra-small, - .show-small, - .show-medium, - .show-extra-large { - display: none; - visibility: hidden; - } -} -@media (min-width: 80em) { - .show-extra-large, - .hide-extra-small, - .hide-small, - .hide-medium, - .hide-large { - display: block; - visibility: visible; - } - - .hide-extra-large, - .show-extra-small, - .show-small, - .show-medium, - .show-large { - display: none; - visibility: hidden; - } -} -@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { - .show-hd { - display: block; - visibility: visible; - } - - .hide-hd { - display: none; - visibility: hidden; - } -} -@media print { - @page { - margin: 0.5cm; - } - * { - background: transparent !important; - color: black !important; - text-shadow: none !important; - -webkit-filter: none !important; - -moz-filter: none !important; - -ms-filter: none !important; - -o-filter: none !important; - filter: none !important; - } - *:before, *:after { - background: transparent !important; - color: black !important; - text-shadow: none !important; - -webkit-filter: none !important; - -moz-filter: none !important; - -ms-filter: none !important; - -o-filter: none !important; - filter: none !important; - } - - body { - background-color: #fff; - color: #000; - font: 0.57em / 1.3 Georgia, "Times New Roman", Times, serif; - } - - img { - max-width: 100% !important; - } - - .show-print { - display: block; - visibility: visible; - } - - .hide-print, - video, - audio, - object, - embed, - nav, - footer, - a[href^="#"]:after { - display: none; - visibility: hidden; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } - - a { - color: #000; - text-decoration: underline; - word-wrap: break-word; - } - a:visited { - color: #000; - text-decoration: underline; - word-wrap: break-word; - } - a[href]:after { - content: " (" attr(href) ")"; - font-size: smaller; - } - - q:after { - content: " (Source: " attr(cite) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - a:after, a[href^="javascript:"]:after, a[href^="#"]:after { - content: ""; - } - - pre, - blockquote { - border: 1px solid #ededed; - page-break-inside: avoid; - } - - thead { - display: table-header-group; - } - - tr, - img { - page-break-inside: avoid; - } - - ul { - list-style: none; - } - ul li { - content: "» "; - } - - .label, - .badge { - border: 1px solid #000; - color: #000; - } -} diff --git a/dist/css/concise.min.css b/dist/css/concise.min.css deleted file mode 100644 index d73783f..0000000 --- a/dist/css/concise.min.css +++ /dev/null @@ -1 +0,0 @@ -html{font-size:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-o-text-size-adjust:100%;text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{border:solid #eee;border-width:1px 0 0;clear:both;height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}code,kbd,pre,samp{font-family:monospace, monospace;font-size:16px;font-size:1rem;line-height:1.5}q{quotes:none}q:before,q:after{content:'';content:none}form{margin:0}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;vertical-align:baseline}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{margin:0 2px}legend{border:0;padding:0;white-space:normal}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.clearfix:after{content:"";display:table;clear:both}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.giga,.mega,.kilo,hgroup,ul,ol,dl,blockquote,p,address,table,fieldset,figure,pre,.row,.well{margin-bottom:24px;margin-bottom:1.5rem}hr{margin-bottom:22px;margin-bottom:1.375rem}ul,ol,dd{margin-left:48px;margin-left:3rem}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}html,body{background-color:#fff;color:#333;font:normal normal 1em/1.5 "Droid Sans",Helvetica,Arial,sans-serif;margin:0;font-smooth:always;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased}html[dir="rtl"]{direction:rtl}*::-webkit-selection{background-color:#666;color:#fff}*::-moz-selection{background-color:#666;color:#fff}*::selection{background-color:#666;color:#fff}.container{width:90%}@media (min-width: 48em){.container{width:620px}}@media (min-width: 60em){.container{width:768px}}@media (min-width: 70em){.container{width:960px}}@media (min-width: 80em){.container{width:1140px}}a{color:#62b3e7;text-decoration:none}a:hover,a:visited{color:#8ec8ee;cursor:pointer;text-decoration:underline}p a{line-height:inherit}p a:visited{line-height:inherit}small,.small{font-size:12px;font-size:0.75rem;line-height:2}.micro{font-size:10px;font-size:0.625rem;line-height:2.4}address{font-style:normal}address>strong{display:block}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}acronym{cursor:help;border-bottom:1px dashed blue}kbd{background-color:#333;border-radius:4px;color:#fff;font-size:90%;padding:1px 4px}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.giga,.mega,.kilo{color:#181818;font-weight:normal;text-rendering:optimizeLegibility}h1,.h1{font-size:24px;font-size:1.5rem;line-height:1}h2,.h2{font-size:20px;font-size:1.25rem;line-height:1.2}h3,.h3{font-size:18px;font-size:1.125rem;line-height:1.33333}h4,.h4{font-size:16px;font-size:1rem;line-height:1.5}h5,.h5{font-size:14px;font-size:0.875rem;line-height:1.71429}h6,.h6{font-size:12px;font-size:0.75rem;line-height:2}@media (min-width: 48em){h1,.h1{font-size:32px;font-size:2rem;line-height:1.5}h2,.h2{font-size:24px;font-size:1.5rem;line-height:1}h3,.h3{font-size:20px;font-size:1.25rem;line-height:1.2}h4,.h4{font-size:18px;font-size:1.125rem;line-height:1.33333}h5,.h5{font-size:16px;font-size:1rem;line-height:1.5}h6,.h6{font-size:14px;font-size:0.875rem;line-height:1.71429}}@media (min-width: 60em){h1,.h1{font-size:36px;font-size:2.25rem;line-height:1.33333}h2,.h2{font-size:30px;font-size:1.875rem;line-height:1.6}h3,.h3{font-size:24px;font-size:1.5rem;line-height:1}h4,.h4{font-size:20px;font-size:1.25rem;line-height:1.2}h5,.h5{font-size:16px;font-size:1rem;line-height:1.5}h6,.h6{font-size:14px;font-size:0.875rem;line-height:1.71429}}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,.h6 a,.giga a,.mega a,.kilo a{font-weight:inherit}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,.giga small,.mega small,.kilo small{font-size:65% !important;line-height:1}.giga{font-size:48px;font-size:3rem;line-height:1}.mega{font-size:40px;font-size:2.5rem;line-height:1.2}.kilo{font-size:32px;font-size:2rem;line-height:1.5}@media (min-width: 48em){.giga{font-size:64px;font-size:4rem;line-height:1.125}.mega{font-size:48px;font-size:3rem;line-height:1}.kilo{font-size:32px;font-size:2rem;line-height:1.5}}@media (min-width: 70em){.giga{font-size:80px;font-size:5rem;line-height:1.2}.mega{font-size:64px;font-size:4rem;line-height:1.125}.kilo{font-size:48px;font-size:3rem;line-height:1}}@media (min-width: 80em){.giga{font-size:96px;font-size:6rem;line-height:1}.mega{font-size:72px;font-size:4.5rem;line-height:1}.kilo{font-size:64px;font-size:4rem;line-height:1.125}}blockquote{border-left:1px solid #ddd;color:#777;font-style:italic;margin:1em 2em;padding-left:1em;text-align:left}blockquote cite{color:#555;display:block;font-size:14px;font-size:0.875rem;line-height:1.71429}blockquote cite:before{content:"\2014 \0020"}blockquote cite a{color:#555}blockquote cite a:visited{color:#555}blockquote.blockquote-reverse{border-left:none;border-right:1px solid #ddd;padding:0 1em 0 0;text-align:right}ul{margin-left:20px;padding-left:0px}ol{margin-left:0px;padding-left:20px}ul li,ol li{line-height:1.75em;position:relative}ul ul{list-style-type:circle;margin-bottom:auto}ul ul ul{list-style-type:square}ol ol{list-style-type:lower-latin;margin-bottom:auto}ol ol ol{list-style-type:lower-roman}@media (min-width: 48em){ul li ul{margin-left:20px}}.list-unstyled{margin-left:0px;list-style:none}.list-unstyled li ul{list-style:none}.list-unstyled li ul li ul{list-style:none}.list-line li{border-bottom:1px solid #eee;padding:5px 0}.list-line li:last-child,.list-line li li{border-bottom:none}.list-inline{display:block;margin-left:0px}.list-inline li{border-bottom:none}.list-inline li:last-child{margin-right:0px}@media (min-width: 30em){.list-inline li{display:inline;margin-right:25px}.list-inline li:last-child{margin-right:0px}.list-line.list-inline li{margin-right:15px}.list-line.list-inline li:after{color:#e6e8ea;content:"|";margin-left:15px}.list-line.list-inline li:last-child:after{content:""}}.list-fill-even li,.list-fill-odd li{padding-left:5px}.list-fill-even li:nth-child(even),.list-fill-odd li:nth-child(odd){background-color:#f9f9f9}dt{font-weight:bold}dd{margin-left:0px}@media (min-width: 48em){dl.dl-horizontal{overflow:hidden}dl.dl-horizontal>dt{width:160px;float:left;clear:both;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}dl.dl-horizontal>dd{margin-left:180px}}table.table{empty-cells:show;width:100%}table.table caption{color:#000;font:italic 85%/1 arial, sans-serif;padding:1em 0;text-align:center}table.table thead{border-bottom:2px solid #ededed}table.table th{padding:12px 15px}table.table td{padding:12px 15px;border-top:1px solid #ededed}table .bg-light-green{color:#468847}table .bg-light-blue{color:#3a87ad}table .bg-light-yellow{color:#c09853}table .bg-light-red{color:#d2322d}table.table-full,table.table.table-full{width:100%}table.table-border-all,table.table-border-outer{border:1px solid #ededed}table.table-border-all th,table.table-border-all td{border-right:1px solid #ededed}table.table-border-inner th,table.table-border-inner td{border-right:1px solid #ededed}table.table-hover-row tr:hover td,table.table-hover-cell td:hover{background-color:#f9f9f9}table.table-fill-even tbody tr:nth-child(even),table.table-fill-odd tbody tr:nth-child(odd){background-color:#f9f9f9}@media (min-width: 30em){table.table{width:auto}table.table th,table.table td{padding:10px 50px 10px 25px}}.table-responsive{overflow:auto;width:100%}.table-responsive table{margin-bottom:0}label{display:block}input,select,textarea{border:1px solid #ddd;height:37px;padding:5px;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}@media (min-width: 30em){input,select,textarea{width:90%}}@media (min-width: 48em){input,select{width:300px}}input:focus,select:focus,textarea:focus,button:focus,[contenteditable="true"]:focus{outline:none;outline:thin dotted \9}textarea{height:auto}input[type="checkbox"],input[type="file"],input[type="image"],input[type="radio"]{background:auto !important;border:auto !important;height:auto !important;width:auto !important}input[disabled]{cursor:not-allowed;background-color:#f6f6f6}@media (min-width: 48em){input[type="submit"]{width:auto}textarea{width:400px}}select[disabled],textarea[disabled]{background-color:#f6f6f6}fieldset{border:1px solid #ededed;padding:10px 25px}fieldset legend{font-weight:bold;font-size:13px;font-size:0.8125rem;line-height:1.84615;padding:0 10px}input.required:required:valid,textarea.required:required:valid{border-color:#2ecc71}input.required:focus:invalid,textarea.required:focus:invalid{border-color:#e74c3c}.form-item{display:block;padding:14px 0}form.border-radius input,form.border-radius select,form.border-radius textarea,form.border-radius fieldset{border-radius:4px}.form-inline label{width:auto}@media (min-width: 48em){.form-inline label{display:inline-block;width:100px}.form-inline textarea{width:auto}}::-webkit-input-placeholder{color:#bbb}:-ms-input-placeholder{color:#bbb}::-moz-placeholder{color:#bbb}:-moz-placeholder{color:#bbb}.row{width:100%}.row:after{clear:both;content:" ";display:table}[class*='column-']{-webkit-background-clip:padding-box !important;-moz-background-clip:padding-box !important;-ms-background-clip:padding-box !important;-o-background-clip:padding-box !important;background-clip:padding-box !important}[class*='column-'].right{float:right}[class*='column-'] img{max-width:100%}@media (min-width: 48em){[class*='column-']{float:left}.gutters [class*='column-']{margin-left:2%}.gutters [class*='column-']:first-child{margin-left:0}.column-1{width:6.25%}.column-2{width:12.5%}.column-3{width:18.75%}.column-4{width:25%}.column-5{width:31.25%}.column-6{width:37.5%}.column-7{width:43.75%}.column-8{width:50%}.column-9{width:56.25%}.column-10{width:62.5%}.column-11{width:68.75%}.column-12{width:75%}.column-13{width:81.25%}.column-14{width:87.5%}.column-15{width:93.75%}.column-16{width:100%}.gutters .column-1{width:4.25%}.gutters .column-2{width:10.5%}.gutters .column-3{width:16.75%}.gutters .column-4{width:23%}.gutters .column-5{width:29.25%}.gutters .column-6{width:35.5%}.gutters .column-7{width:41.75%}.gutters .column-8{width:48%}.gutters .column-9{width:54.25%}.gutters .column-10{width:60.5%}.gutters .column-11{width:66.75%}.gutters .column-12{width:73%}.gutters .column-13{width:79.25%}.gutters .column-14{width:85.5%}.gutters .column-15{width:91.75%}.gutters .column-16{width:100%}}.non-responsive [class*='column-']{float:left;width:auto !important}.non-responsive .gutters [class*='column-'],.non-responsive.gutters [class*='column-']{margin-left:2%}.non-responsive .gutters [class*='column-']:first-child,.non-responsive.gutters [class*='column-']:first-child{margin-left:0}.bg-white{background-color:#fff !important}.bg-black{background-color:#222 !important}.bg-light-gray{background-color:#f9f9f9 !important}.bg-gray{background-color:#999 !important}.bg-light-green{background-color:#dff0d8 !important}.bg-green{background-color:#5cb85c !important}.bg-light-blue{background-color:#d9edf7 !important}.bg-blue{background-color:#5bc0de !important}.bg-light-yellow{background-color:#fcf8e3 !important}.bg-yellow{background-color:#ed9c28 !important}.bg-light-red{background-color:#f2dede !important}.bg-red{background-color:#d9534f !important}.color-white{color:#fff}.color-black{color:#222}.color-gray{color:#999}.color-green{color:#468847}.color-blue{color:#3a87ad}.color-yellow{color:#c09853}.color-red{color:#d2322d}.btn{background-color:#ccc;border:0;color:#fff;cursor:pointer;display:block;font-size:100%;font-weight:700;letter-spacing:1px;line-height:1;margin:12px auto;outline:none;padding:15px 48px;position:relative;text-align:center;text-transform:uppercase;vertical-align:baseline;white-space:nowrap;width:100%;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;-ms-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s}.btn::-moz-focus-inner{padding:0;border:0}.btn:after{content:"";position:absolute;z-index:-1}.btn:hover{background-color:#b5b5b5;background-image:-webkit-gradient(linear, 50, 50, 50 100%, from(rgba(50,50,50,0.05)), to(rgba(50,50,50,0.05)));background-image:-webkit-linear-gradient(top, rgba(50,50,50,0.05), rgba(50,50,50,0.05));background-image:-moz-linear-gradient(top, rgba(50,50,50,0.05), rgba(50,50,50,0.05));background-image:-o-linear-gradient(top, rgba(50,50,50,0.05), rgba(50,50,50,0.05));background-image:linear-gradient(to bottom, rgba(50,50,50,0.05), rgba(50,50,50,0.05));background-repeat:repeat-x}.btn:active{background-image:-webkit-gradient(linear, 50, 50, 50 100%, from(rgba(50,50,50,0.1)), to(rgba(50,50,50,0.1)));background-image:-webkit-linear-gradient(top, rgba(50,50,50,0.1), rgba(50,50,50,0.1));background-image:-moz-linear-gradient(top, rgba(50,50,50,0.1), rgba(50,50,50,0.1));background-image:-o-linear-gradient(top, rgba(50,50,50,0.1), rgba(50,50,50,0.1));background-image:linear-gradient(to bottom, rgba(50,50,50,0.1), rgba(50,50,50,0.1));background-repeat:repeat-x}.btn[disabled]{background:#dededc !important;border:none;color:#b3b3b1;cursor:default}.btn[disabled]:hover,.btn[disabled]:active,.btn[disabled]:focus{background:#dededc !important;border:none;color:#b3b3b1;cursor:default}@media (min-width: 48em){.btn{display:inline-block;*display:inline;margin:0px;width:auto;zoom:1}.btn-extra-small,a.btn-extra-small,p.btn-extra-small,input.btn-extra-small{font-size:11px;font-size:0.6875rem;line-height:2.18182;padding:5px 16px}.btn-small,a.btn-small,p.btn-small,input.btn-small{font-size:12px;font-size:0.75rem;line-height:2;padding:10px 32px}.btn-large,a.btn-large,p.btn-large,input.btn-large{padding:20px 64px}.btn-extra-large,a.btn-extra-large,p.btn-extra-large,input.btn-extra-large{padding:25px 80px}}a.btn{color:#fff;text-decoration:none}a.btn:hover{color:#fff;text-decoration:none}a.btn:active{outline:0}input[type="submit"].btn{color:#fff;height:auto}button.btn{color:#fff}.btn.bg-white{color:#333}.btn.btn-border{background:transparent;border-color:#ddd;border-style:solid;border-width:1px;color:#aaa}.btn.btn-border:hover{background:#ddd;color:#fff !important}.btn.btn-border.white{border-color:#fff}.btn.btn-border.white:hover{background:#fff;color:#222 !important}a.btn.btn-border.white:hover{background:#fff;color:#222 !important}.btn.btn-border.white,a.btn.btn-border.white{color:#fff}.btn.btn-border.white:active,.btn.btn-border.white:focus{background-color:#f9f9f9}.btn.btn-border.black{border-color:#222;color:#222}.btn.btn-border.black:hover{background-color:#222}.btn.btn-border.black:active,.btn.btn-border.black:focus{background-color:#222}.btn.btn-border.gray{border-color:#999;color:#999}.btn.btn-border.gray:hover{background-color:#999}.btn.btn-border.gray:active,.btn.btn-border.gray:focus{background-color:#737373}.btn.btn-border.green{border-color:#5cb85c;color:#468847}.btn.btn-border.green:hover{background-color:#5cb85c}.btn.btn-border.green:active,.btn.btn-border.green:focus{background-color:#3d8b3d}.btn.btn-border.blue{border-color:#5bc0de;color:#3a87ad}.btn.btn-border.blue:hover{background-color:#5bc0de}.btn.btn-border.blue:active,.btn.btn-border.blue:focus{background-color:#28a1c5}.btn.btn-border.yellow{border-color:#ed9c28;color:#c09853}.btn.btn-border.yellow:hover{background-color:#ed9c28}.btn.btn-border.yellow:active,.btn.btn-border.yellow:focus{background-color:#b9730f}.btn.btn-border.red{border-color:#d9534f;color:#d2322d}.btn.btn-border.red:hover{background-color:#d9534f}.btn.btn-border.red:active,.btn.btn-border.red:focus{background-color:#b52b27}.btn.dropdown{width:100%}.btn.dropdown .dropdown-menu{margin-top:auto;text-align:left;top:100%;width:100%}.btn.dropdown[class*='dropdown-arrow-'] .dropdown-menu{margin-top:10px}.btn.dropdown.up .dropdown-menu{margin-bottom:0px;top:auto}.btn.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu{margin-bottom:10px}@media (min-width: 48em){.btn-extra-small .caret,.btn-small .caret{border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}.btn.dropdown{width:auto}.btn.dropdown.extra-small .dropdown-menu{margin-top:6px}.btn.dropdown.dropdown-small .dropdown-menu{margin-top:11px}.btn.dropdown.dropdown-large .dropdown-menu{margin-top:21px}}.group{display:inline-block;vertical-align:bottom}.group:after{clear:both;content:".";display:block;height:0;visibility:hidden}.group-item,p.group-item{background-color:#fff;border:1px solid #ddd;color:#666;padding:4px 7px;width:auto}.group-item.icon,p.group-item.icon{font-size:14px;font-size:0.875rem;line-height:1.71429}@media (min-width: 48em){.group-item{font-size:16px;font-size:1rem;line-height:1.5;padding:6px 12px}}.group-item:hover{background-color:#f9f9f9}.group-item:active{-webkit-box-shadow:inset 0 1px 1px rgba(100,100,100,0.1);-moz-box-shadow:inset 0 1px 1px rgba(100,100,100,0.1);-ms-box-shadow:inset 0 1px 1px rgba(100,100,100,0.1);-o-box-shadow:inset 0 1px 1px rgba(100,100,100,0.1);box-shadow:inset 0 1px 1px rgba(100,100,100,0.1)}.group-item.active,.group-item .active{background-color:#f2f2f2}.group>.group-item{border-radius:0;float:left;margin-left:-1px}.btn.full{width:100%}.group.border-radius>.group-item:first-child{border-radius:4px 0 0 4px}.group.border-radius>.group-item:last-child{border-radius:0 4px 4px 0}.group-item.dropdown .dropdown-menu{margin-top:15px;text-align:inherit;width:100%}.group-item.dropdown .dropdown-menu li a{font-size:12px;font-size:0.75rem;line-height:2;padding:4px 7px;width:auto}.group.border-radius .group-item.dropdown .dropdown-menu{border-radius:0px 0px 4px 4px}.group.border-radius .group-item.dropdown.up .dropdown-menu{border-radius:4px 4px 0px 0px}.group .caret{border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}@media (min-width: 48em){.group .caret{border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent}}.dropdown{cursor:pointer;outline:none;position:relative;width:auto}.dropdown .dropdown-menu{background-color:#fff;border:1px solid #eee;border-radius:inherit;font-weight:inherit;left:0;margin-left:0px;opacity:0;pointer-events:none;position:absolute;right:0;text-transform:none;z-index:99999;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in}.dropdown .dropdown-menu a{text-decoration:none}.dropdown .dropdown-menu p{margin:0;padding:10px 15px}.dropdown .dropdown-menu span{line-height:inherit}.dropdown .dropdown-menu img{padding:15px;width:100%}.dropdown .dropdown-menu iframe{height:auto;padding:15px;width:100%}.dropdown .dropdown-menu img+p,.dropdown .dropdown-menu iframe+p{padding-top:0px}.dropdown .dropdown-menu hr{margin:10px}.dropdown ul.dropdown-menu{list-style-type:none}.dropdown .dropdown-menu li{display:block;padding:5px 10px;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out}.dropdown .dropdown-menu.border-radius li:first-of-type{border-radius:4px 4px 0 0}.dropdown .dropdown-menu.border-radius li:last-of-type{border-radius:0 0 4px 4px}.dropdown .dropdown-menu li:hover{background-color:#f3f8f8}.dropdown.dropdown-active .dropdown-menu{opacity:1;pointer-events:auto}.dropdown .header{color:#aaa;cursor:default;font-size:14px;font-size:0.9rem;font-size:14px;font-size:0.875rem;line-height:1.71429;margin:12px 0 0;padding:0 0 0 9px}@media (min-width: 48em){.dropdown .dropdown-menu{width:200px}.dropdown.dropdown-small .dropdown-menu{width:150px}.dropdown.dropdown-large .dropdown-menu{width:350px}.dropdown.dropdown-full .dropdown-menu{width:100%}}.dropdown-menu>.header{margin:0}.dropdown .header:hover,.dropdown li.header:hover{background:none}.dropdown .dropdown-menu.border-radius{border-radius:4px}.dropdown[class*='dropdown-arrow-'] .dropdown-menu{margin-top:10px}.dropdown[class*='dropdown-arrow-'] .dropdown-menu:after{border-color:#fff transparent;border-style:solid;bottom:100%;border-width:0 6px 6px 6px;content:"";height:0;position:absolute;width:0}.dropdown[class*='dropdown-arrow-'] .dropdown-menu:before{border-color:rgba(0,0,0,0.1) transparent;border-style:solid;bottom:100%;border-width:0 8px 8px 8px;content:"";height:0;position:absolute;width:0}.dropdown.dropdown-arrow-left .dropdown-menu:after{left:15px}.dropdown.dropdown-arrow-left .dropdown-menu:before{left:13px}.dropdown.dropdown-arrow-right .dropdown-menu:after{right:15px}.dropdown.dropdown-arrow-right .dropdown-menu:before{right:13px}.dropdown.up .dropdown-menu{bottom:100%}.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu{margin-bottom:10px}.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:after,.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:before{top:100%}.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:after{border-width:6px 6px 0 6px}.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:before{border-width:8px 8px 0 8px}nav ul{list-style:none;margin:0}nav li{cursor:pointer;position:relative}nav .dropdown li{margin-right:0px}.nav-dropdown ul ul{display:none;left:0;margin:0;opacity:0;padding:0;position:absolute;visibility:hidden;width:150px;z-index:99999}.nav-dropdown ul ul ul{display:none;left:0;margin:0;opacity:0;padding:0;position:absolute;visibility:hidden;width:150px;z-index:99999}.nav-dropdown ul ol ul,.nav-dropdown ul ul ol,.nav-dropdown ul ol ol{display:none;left:0;margin:0;opacity:0;padding:0;position:absolute;visibility:hidden;width:150px;z-index:99999}.nav-dropdown ol ol,.nav-dropdown ol ul{display:none;left:0;margin:0;opacity:0;padding:0;position:absolute;visibility:hidden;width:150px;z-index:99999}.nav-dropdown ol ol ol,.nav-dropdown ol ol ul{display:none;left:0;margin:0;opacity:0;padding:0;position:absolute;visibility:hidden;width:150px;z-index:99999}.nav-dropdown ol ul ul,.nav-dropdown ol ul ol{display:none;left:0;margin:0;opacity:0;padding:0;position:absolute;visibility:hidden;width:150px;z-index:99999}.nav-dropdown .list-inline li li,.nav-dropdown.list-inline li li{margin-right:0px}.nav-dropdown li li{background:#fff;display:block}.nav-dropdown ul ul ul,.nav-dropdown ul ol ul,.nav-dropdown ul ul ol,.nav-dropdown ul ol ol{display:block}.nav-dropdown ol ul ul,.nav-dropdown ol ol ul,.nav-dropdown ol ul ol{display:block}.nav-dropdown ul li:hover ul,.nav-dropdown ul li:hover ol{display:block;opacity:1;top:100%;visibility:visible}.nav-dropdown ol li:hover ul,.nav-dropdown ol li:hover ol{display:block;opacity:1;top:100%;visibility:visible}.nav-dropdown ul li:hover ul ul,.nav-dropdown ul li:hover ol ul,.nav-dropdown ul li:hover ul ol,.nav-dropdown ul li:hover ol ol{display:none;opacity:0;visibility:hidden}.nav-dropdown ol li:hover ul ul,.nav-dropdown ol li:hover ol ul,.nav-dropdown ol li:hover ul ol,.nav-dropdown ol li:hover ol ol{display:none;opacity:0;visibility:hidden}.nav-dropdown ul ul li:hover ul,.nav-dropdown ul ul li:hover ol{display:block;left:100%;opacity:1;position:absolute;top:0;visibility:visible}.nav-dropdown ul ol li:hover ol,.nav-dropdown ul ol li:hover ul{display:block;left:100%;opacity:1;position:absolute;top:0;visibility:visible}.nav-dropdown ol ul li:hover ul,.nav-dropdown ol ul li:hover ol{display:block;left:100%;opacity:1;position:absolute;top:0;visibility:visible}.nav-dropdown ol ol li:hover ol,.nav-dropdown ol ol li:hover ul{display:block;left:100%;opacity:1;position:absolute;top:0;visibility:visible}.nav-vertical li{display:block;margin-right:0px;padding:10px}.nav-vertical .icon{line-height:inherit;margin-right:7px}.nav-vertical .icon.right,.nav-vertical .icon.text-right{margin-right:0px}.nav-vertical.nav-bordered{border:1px solid #eee}.nav-vertical.nav-bordered li:hover{background-color:#f6f6f6}.nav-vertical.nav-line li:hover{background-color:#f6f6f6}.nav-vertical .badge,.nav-vertical .label{margin-top:5px}.nav-vertical .dropdown .dropdown-menu{top:100%}@media (min-width: 48em){.nav-vertical .dropdown .dropdown-menu{left:100%;top:0}}.naver .naver-handle{color:inherit;cursor:pointer;display:none;font-size:24px;font-size:1.5rem;line-height:1;text-align:right;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.naver .naver-wrapper{height:auto;width:100%}.naver.enabled .naver-handle{display:block}.naver.enabled .naver-wrapper{height:0px;overflow:hidden}.naver.enabled .naver-wrapper li{display:block;padding:8px;text-align:left;width:100%}.naver.enabled .naver-wrapper li:hover{background:#f9f9f9}.nav-responsive.naver .naver-handle:after{content:"\f0c9";font-family:FontAwesome;text-align:right}.nav-responsive.nav-responsive-text.naver .naver-handle:after{content:"\00a0 \f0c9"}.nav-responsive.nav-responsive-text.naver .naver-container:before{clear:both;content:".";display:block;height:0;line-height:0;text-align:right;visibility:hidden}.nav-responsive-left.naver .naver-handle{text-align:left}.nav-responsive-left.naver .naver-handle:before{content:"\f0c9";font-family:FontAwesome;text-align:left}.nav-responsive-left.nav-responsive-text.naver .naver-handle:before{content:"\f0c9 \00a0"}.nav-responsive-left.nav-responsive-text.naver .naver-container:after{clear:both;content:".";display:block;height:0;line-height:0;text-align:left;visibility:hidden}.nav-responsive-center.naver .naver-handle{text-align:center}.nav-responsive-center.naver .naver-handle:before{content:"\f0c9";font-family:FontAwesome;text-align:center}.nav-responsive-center.nav-responsive-text.naver .naver-handle:before{content:"\f0c9 \00a0"}.nav-responsive-center.nav-responsive-text.naver .naver-container:after{clear:both;content:".";display:block;height:0;line-height:0;text-align:center;visibility:hidden}.breadcrumbs{font-size:13px;font-size:0.8125rem;line-height:1.84615;margin:12px 0;padding:5px 15px 5px 0}.breadcrumbs li{display:inline;margin-right:10px}.breadcrumbs li:last-child{margin-right:0px}.breadcrumbs li:after{content:"/";color:#ccc;padding-left:12px;vertical-align:middle}.breadcrumbs li:last-child{color:#999}.breadcrumbs li:last-child a{color:#999}.breadcrumbs li:last-child:after{content:""}.breadcrumbs .well,.breadcrumbs.well{padding-left:15px}.well{background-color:#f9f9f9;border-color:#ededed;border-style:solid;border-width:1px;margin-bottom:24px;padding:0px 15px}.well h1,.well h2,.well h3,.well h4,.well h5,.well h6,.well .h1,.well .h2,.well .h3,.well .h4,.well .h5,.well .h6,.well .giga,.well .mega,.well .kilo{color:inherit}.well p{margin:10px 0}.well pre,.well .pre.well{font-size:14px;font-size:0.875rem;line-height:1.71429;padding:10px 15px}.well header h1,.well header h2,.well header h3,.well header h4,.well header h5,.well header h6,.well header .h1,.well header .h2,.well header .h3,.well header .h4,.well header .h5,.well header .h6,.well header .giga,.well header .mega,.well header .kilo{margin:20px 0 10px}.well header .label,.well header .badge{margin-top:10px}.well[class*='bg-']{color:#fff}.well.bg-white{color:#666}.well.bg-black{border-color:#000}.well.bg-green{border-color:#3d8b3d}.well.bg-light-green{border-color:#3d8b3d;color:#468847}.well.bg-blue{border-color:#28a1c5}.well.bg-light-blue{border-color:#28a1c5;color:#3a87ad}.well.bg-yellow{border-color:#b9730f}.well.bg-light-yellow{border-color:#b9730f;color:#c09853}.well.bg-red{border-color:#b52b27}.well.bg-light-red{border-color:#b52b27;color:#d2322d}.close{color:#000;filter:alpha(opacity=20);float:right;font-size:22px;font-size:1.375rem;line-height:1.09091;font-weight:bold;opacity:.2}.close:hover,.close:focus{color:#000;cursor:pointer;filter:alpha(opacity=50);opacity:.5;text-decoration:none;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear}button.close{background:transparent;border:0;cursor:pointer;padding:0}.well .close{margin-top:6px}.label,.badge{background-color:#b5b5b5;color:#fff;font-size:12px;font-size:0.75rem;line-height:2;font-weight:bold;padding:3px 7px;text-align:center;vertical-align:baseline;white-space:nowrap}.label{border-radius:4px;display:inline}.badge{border-radius:10px;display:inline-block;padding:1px 7px}.label[href]:hover,.label[href]:focus{color:#fff;cursor:pointer;text-decoration:none}a.badge:hover,a.badge:focus{color:#fff;cursor:pointer;text-decoration:none}.label a,.badge a{color:#fff;cursor:pointer;text-decoration:none}.label:empty,.badge:empty{display:none}.progress{background-color:#f9f9f9;color:#fff;font-size:11px;font-size:0.6875rem;height:12px;line-height:1.182;margin:6px 0;position:relative;text-align:center;width:100%;-webkit-box-shadow:inset 0 1px 1px rgba(100,100,100,0.1);-moz-box-shadow:inset 0 1px 1px rgba(100,100,100,0.1);-ms-box-shadow:inset 0 1px 1px rgba(100,100,100,0.1);-o-box-shadow:inset 0 1px 1px rgba(100,100,100,0.1);box-shadow:inset 0 1px 1px rgba(100,100,100,0.1);-webkit-box-sizing:initial;-moz-box-sizing:initial;-ms-box-sizing:initial;-o-box-sizing:initial;box-sizing:initial}.progress-small{font-size:9px;font-size:0.5625rem;height:6px;line-height:0.875}.progress-large{font-size:16px;font-size:1rem;height:25px;line-height:1.7}.progress>span{background-color:#2bc253;display:block;height:100%;overflow:hidden;position:relative;width:auto}.progress.border-radius>span{border-radius:4px}.progress.progress-stacked>span{display:inline-block;float:left}.progress.progress-stacked.border-radius>span{border-radius:0px}.progress.progress-stacked.border-radius>span:first-of-type{border-radius:4px 0 0 4px}.progress.progress-stacked.border-radius>span:last-of-type{border-radius:0 4px 4px 0}.progress-striped>span:after,.progress-striped>span>span{bottom:0;content:"";left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:1;-webkit-background-size:50px 50px;-moz-background-size:50px 50px;-ms-background-size:50px 50px;-o-background-size:50px 50px;background-size:50px 50px;background-image:-webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255,255,255,0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.75, rgba(255,255,255,0.2)), color-stop(0.75, transparent), to(transparent));background-image:-moz-linear-gradient(-45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent)}.progress-striped.progress-animate>span:after,.progress-striped.progress-animate>span>span{-webkit-animation:move 2s linear infinite;-moz-animation:move 2s linear infinite;-ms-animation:move 2s linear infinite;-o-animation:move 2s linear infinite;animation:move 2s linear infinite}@-webkit-keyframes move{0%{background-position:0 0}100%{background-position:50px 50px}}.float-left{float:left !important}.float-right{float:right !important}.float-none{float:none !important}.align-center{display:block;margin-left:auto;margin-right:auto}.no-margin{margin:0 !important}.icon-alone{display:inline-block}.inline{display:block}@media (min-width: 30em){.inline{display:inline}}.show{display:block;visibility:visible}.hide{display:none;visibility:hidden}.screen-reader{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.full{width:100%}img.full{max-width:100%;height:auto;display:block;width:auto}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.weight-light{font-weight:300 !important}.weight-normal{font-weight:400 !important}.weight-semibold{font-weight:600 !important}.text-uppercase{text-transform:uppercase}.amp{font:italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif !important}.text-hide{border:0;background-color:transparent;color:transparent;font:0 / 0 a;text-shadow:none}.caret{border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent;display:inline-block;margin:0 0 3px 4px;vertical-align:middle;width:0}.border-radius{border-radius:4px}.pill{border-radius:25px}.show-extra-small,.hide-small,.hide-medium,.hide-large,.hide-extra-large,.hide-print,.hide-hd{display:block;visibility:visible}.hide-extra-small,.show-small,.show-medium,.show-large,.show-extra-large,.show-print,.show-hd{display:none;visibility:hidden}@media (min-width: 48em){.show-small,.hide-extra-small,.hide-medium,.hide-large,.hide-extra-large{display:block;visibility:visible}.hide-small,.show-extra-small,.show-medium,.show-large,.show-extra-large{display:none;visibility:hidden}}@media (min-width: 60em){.show-medium,.hide-small,.hide-extra-small,.hide-large,.hide-extra-large{display:block;visibility:visible}.hide-medium,.show-small,.show-extra-small,.show-large,.show-extra-large{display:none;visibility:hidden}}@media (min-width: 70em){.show-large,.hide-extra-small,.hide-small,.hide-medium,.hide-extra-large{display:block;visibility:visible}.hide-large,.show-extra-small,.show-small,.show-medium,.show-extra-large{display:none;visibility:hidden}}@media (min-width: 80em){.show-extra-large,.hide-extra-small,.hide-small,.hide-medium,.hide-large{display:block;visibility:visible}.hide-extra-large,.show-extra-small,.show-small,.show-medium,.show-large{display:none;visibility:hidden}}@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){.show-hd{display:block;visibility:visible}.hide-hd{display:none;visibility:hidden}}@media print{@page{margin:0.5cm}*{background:transparent !important;color:black !important;text-shadow:none !important;-webkit-filter:none !important;-moz-filter:none !important;-ms-filter:none !important;-o-filter:none !important;filter:none !important}*:before,*:after{background:transparent !important;color:black !important;text-shadow:none !important;-webkit-filter:none !important;-moz-filter:none !important;-ms-filter:none !important;-o-filter:none !important;filter:none !important}body{background-color:#fff;color:#000;font:0.57em / 1.3 Georgia, "Times New Roman", Times, serif}img{max-width:100% !important}.show-print{display:block;visibility:visible}.hide-print,video,audio,object,embed,nav,footer,a[href^="#"]:after{display:none;visibility:hidden}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}a{color:#000;text-decoration:underline;word-wrap:break-word}a:visited{color:#000;text-decoration:underline;word-wrap:break-word}a[href]:after{content:" (" attr(href) ")";font-size:smaller}q:after{content:" (Source: " attr(cite) ")"}abbr[title]:after{content:" (" attr(title) ")"}a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #ededed;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}ul{list-style:none}ul li{content:"» "}.label,.badge{border:1px solid #000;color:#000}} diff --git a/dist/js/concise.js b/dist/js/concise.js deleted file mode 100644 index 9a31fc3..0000000 --- a/dist/js/concise.js +++ /dev/null @@ -1,476 +0,0 @@ -/** - * # Concise.js - * http://github.com/ConciseCSS/concise.css - * - * - * Copyright 2014 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -(function($){ - /** - * Powers the universal dropdown selector. - * - * @class DropDown - * @param {Object} el jQuery object - */ - function DropDown(el) { - this.dd = el; - this.initEvents(); - } - - DropDown.prototype = { - initEvents : function() { - // Toggle .dropdown-active on click - this.dd.on('click', function(event){ - $(this).toggleClass('dropdown-active'); - event.stopPropagation(); - }); - } - } - - /** - * Determine if responsive navigation text needs to be added. - * - * @method responsiveNav - * @return {Object} naver A naver plugin instantiation - */ - $.fn.responsiveNav = function() { - // Loop through each instance of responsive navigation - this.each(function(index) { - var labelState = $(this).hasClass( "nav-responsive-text" ); - - return $(this).naver({ - maxWidth: "768px", - label: labelState - }); - }); - }; - - /** - * Calculate object width - * - */ - $.fn.calculateWidth = function() { - return $(this).width(); - }; - - /** - * Calculates proper widths for non-responsive websites. - * - * @method nonResponsive - * @note Only necessary for non-responsive websites. - */ - $.fn.nonResponsive = function() { - - // Loop through each instance of the `.non-responsive` class - this.each(function(index) { - if ($(this).hasClass("non-responsive")) { - - // Get container width - var containerWidth = $(".container").width(), - i = 1, - max = 24; - - // Set pixel-based alternatives for grid styles - // But first we need to know if our row has class `gutters` - if($(this).hasClass("gutters")) { - for (; i <= max; i++ ) { - // Column width for row with gutters - var columnWidth = ($('.column-'+i).calculateWidth()), - gutterWidth = columnWidth * 0.02; - - $('.gutters .column-'+i).css("width", columnWidth - gutterWidth + "px"); - } - } else { - for (; i <= max ; i++ ) { - // Column width for normal row - var columnWidth = ($('.column-'+i).calculateWidth() - 1); - $('.column-'+i).css("width", columnWidth + "px"); - } - } - } - }); - }; - - $(function(){ - var dropdown = $('.dropdown'); - - new DropDown(dropdown); - - $(document).click(function() { - // Remove class from all dropdowns - dropdown.removeClass('dropdown-active'); - }); - }); -}(jQuery)); - -jQuery(document).ready(function() { - jQuery(".nav-responsive, .nav-responsive-left, .nav-responsive-center").responsiveNav(); - jQuery("body, .row").nonResponsive(); - - $(document).on('click', '.close', function () { - // Get .close parent div, fade out - $(this).parents('.close-this').fadeOut('slow'); - }); -}); - -/* - * Naver v3.0.8 - 2014-05-06 - * A jQuery plugin for responsive navigation. Part of the Formstone Library. - * http://formstone.it/naver/ - * - * Copyright 2014 Ben Plum; MIT Licensed - */ - -;(function ($, window) { - "use strict"; - - /** - * @options - * @param customClass [string] <''> "Class applied to instance" - * @param label [boolean] "Display handle width label" - * @param labels.closed [string] <'Navigation'> "Closed state text" - * @param labels.open [string] <'Close'> "Open state text" - * @param maxWidth [string] <'980px'> "Width at which to auto-disable plugin" - */ - var options = { - customClass: "", - label: true, - labels: { - closed: "Navigation", - open: "Close" - }, - maxWidth: "980px" - }; - - /** - * @events - * @event open.naver "Navigation opened" - * @event close.naver "Navigation closed" - */ - - var pub = { - - /** - * @method - * @name close - * @description Closes instance - * @example $(".target").naver("close"); - */ - close: function(e) { - return $(this).each(function(i, nav) { - var data = $(nav).data("naver"); - - if (data && data.$nav.hasClass("enabled")) { - data.$wrapper.css({ - height: 0 - }); - if (data.label) { - data.$handle.html(data.labels.closed); - } - data.$nav.removeClass("open") - .trigger("close.naver"); - } - }); - }, - - /** - * @method - * @name defaults - * @description Sets default plugin options - * @param opts [object] <{}> "Options object" - * @example $.naver("defaults", opts); - */ - defaults: function(opts) { - options = $.extend(true, options, opts || {}); - return $(this); - }, - - /** - * @method - * @name disable - * @description Disables instance - * @example $(".target").naver("disable"); - */ - disable: function() { - return $(this).each(function(i, nav) { - var data = $(nav).data("naver"); - - if (data) { - data.$nav.removeClass("enabled"); - data.$wrapper.css({ height: "" }); - } - }); - }, - - /** - * @method - * @name destroy - * @description Destroys instance - * @example $(".target").naver("destroy"); - */ - destroy: function() { - return $(this).each(function(i, nav) { - var data = $(nav).data("naver"); - - if (data) { - data.$handle.remove(); - data.$container.contents() - .unwrap() - .unwrap(); - - data.$nav.removeClass("enabled disabled naver " + data.customClass) - .off(".naver") - .removeData("naver"); - } - }); - }, - - /** - * @method - * @name enable - * @description Enables instance - * @example $(".target").naver("enable"); - */ - enable: function() { - return $(this).each(function(i, nav) { - var data = $(nav).data("naver"); - - if (data) { - data.$nav.addClass("enabled"); - pub.close.apply(data.$nav); - } - }); - }, - - /** - * @method - * @name open - * @description Opens instance - * @example $(".target").naver("open"); - */ - open: function() { - return $(this).each(function(i, nav) { - var data = $(nav).data("naver"); - - if (data && data.$nav.hasClass("enabled")) { - data.$wrapper.css({ - height: data.$container.outerHeight(true) - }); - if (data.label) { - data.$handle.html(data.labels.open); - } - data.$nav.addClass("open") - .trigger("open.naver"); - } - }); - } - }; - - /** - * @method private - * @name _init - * @description Initializes plugin - * @param opts [object] "Initialization options" - */ - function _init(opts) { - // Settings - opts = $.extend(true, {}, options, opts); - - // Apply to each element - var $items = $(this); - for (var i = 0, count = $items.length; i < count; i++) { - _build($items.eq(i), opts); - } - return $items; - } - - /** - * @method private - * @name _build - * @description Builds each instance - * @param $nav [jQuery object] "Target jQuery object" - * @param opts [object] <{}> "Options object" - */ - function _build($nav, opts) { - if (!$nav.data("naver")) { - // Extend Options - opts = $.extend(true, {}, opts, $nav.data("naver-options")); - - var $handle = $nav.find(".naver-handle").length ? $nav.find(".naver-handle").detach() : $(''); - - $nav.addClass("naver " + opts.customClass) - .wrapInner('

') - .wrapInner('

').wrapInner('

').prepend(q);var p=f.extend(true,{$nav:n,$container:n.find(".naver-container"),$wrapper:n.find(".naver-wrapper"),$handle:n.find(".naver-handle")},o);p.$handle.text((o.label)?o.labels.closed:"");p.$nav.on("touchstart.naver",".naver-handle",p,g).on("click.naver",".naver-handle",p,i).data("naver",p);if(h.matchMedia!==undefined){p.mediaQuery=h.matchMedia("(max-width:"+(p.maxWidth===Infinity?"100000px":p.maxWidth)+")");p.mediaQuery.addListener(function(){c.apply(p.$nav)});c.apply(p.$nav)}}}function g(o){o.stopPropagation();var n=o.data,p=o.originalEvent;l(n.timer);n.touchStartX=p.touches[0].clientX;n.touchStartY=p.touches[0].clientY;n.$nav.on("touchmove.naver",".naver-handle",n,k).on("touchend.naver",".naver-handle",n,a)}function k(o){var n=o.data,p=o.originalEvent;if(Math.abs(p.touches[0].clientX-n.touchStartX)>10||Math.abs(p.touches[0].clientY-n.touchStartY)>10){n.$nav.off("touchmove.naver touchend.naver")}}function a(o){o.preventDefault();o.stopPropagation();var n=o.data;n.$nav.off("touchmove.naver touchend.naver click.naver");n.timer=e(n.timer,1000,function(){n.$nav.on("click.naver",".naver-handle",n,i)});i(o)}function i(p){p.preventDefault();p.stopPropagation();var n=f(p.currentTarget),o=p.data;f(".naver").not(o.$nav).naver("close");if(o.$nav.hasClass("open")){d.close.apply(o.$nav)}else{d.open.apply(o.$nav)}}function c(){var n=f(this).data("naver");if(n.mediaQuery.matches){d.enable.apply(n.$nav)}else{d.disable.apply(n.$nav)}}function e(q,p,o,n){l(q,n);if(n===true){return setInterval(o,p)}else{return setTimeout(o,p)}}function l(n){if(n!==null){clearInterval(n);n=null}}f.fn.naver=function(n){if(d[n]){return d[n].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof n==="object"||!n){return j.apply(this,arguments)}}return this};f.naver=function(n){if(n==="defaults"){d.defaults.apply(this,Array.prototype.slice.call(arguments,1))}}})(jQuery,window); \ No newline at end of file diff --git a/globals/_getColor-function.scss b/globals/_getColor-function.scss new file mode 100644 index 0000000..1051378 --- /dev/null +++ b/globals/_getColor-function.scss @@ -0,0 +1,9 @@ +// +// getColor Function +// -------------------------------------------------- +// Easily retrieve colors from the $colors map. +// + +@function getColor($color, $value: "base") { + @return map-get(map-get($colors, $color), $value); +} \ No newline at end of file diff --git a/globals/_pow-function.scss b/globals/_pow-function.scss new file mode 100644 index 0000000..032865c --- /dev/null +++ b/globals/_pow-function.scss @@ -0,0 +1,19 @@ +// +// Pow function +// -------------------------------------------------- + +@function pow($number, $exponent) { + $value: 1; + + @if $exponent > 0 { + @for $i from 1 through $exponent { + $value: $value * $number; + } + } @else if $exponent < 0 { + @for $i from 1 through -$exponent { + $value: $value / $number; + } + } + + @return $value; +} \ No newline at end of file diff --git a/globals/_settings.scss b/globals/_settings.scss new file mode 100644 index 0000000..50eb5a0 --- /dev/null +++ b/globals/_settings.scss @@ -0,0 +1,168 @@ +// +// Base +// -------------------------------------------------- + +// Font size for small devices +$font-size: 16 !default; + +// Font size for big devices +$font-size-secondary: 18 !default; + +// Tracking +$letter-spacing: 0.05em !default; + +// Font families +$font-primary: "Helvetica", "Arial", sans-serif !default; +$font-secondary: "Helvetica", "Arial", sans-serif !default; +$font-mono: "Consolas", monospace !default; +$font-print-primary: "Georgia", "Times New Roman", "Times", serif !default; +$font-print-secondary: "Georgia", "Times New Roman", "Times", serif !default; + +// Enable margins to all the elements +// except the first one in each nesting level +$automargin: true !default; + +// ^ How much margin for those elements +$block-margin: 1lh !default; + +// Transition duration +$transition-duration: 150ms !default; + +// Break points +$break-small: 480px; +$break-medium: 768px; +$break-large: 960px; +$break-extra-large: 1100px; + +// Custom media queries +// Use as @media (--medium) { … } +@custom-media --extra-small (width < #{$break-small}); +@custom-media --small (width >= #{$break-small}); +@custom-media --medium (width >= #{$break-medium}); +@custom-media --large (width >= #{$break-large}); +@custom-media --extra-large (width >= #{$break-extra-large}); +@custom-media --only-small (#{$break-small} < width <= #{$break-medium}); +@custom-media --only-medium (#{$break-medium} < width <= #{$break-large}); +@custom-media --only-large (#{$break-large} < width <= #{$break-extra-large}); + +// Spacing variables +$spacing-xs: 0.5lh !default; +$spacing-s: 1lh !default; +$spacing-m: 2lh !default; +$spacing-l: 3lh !default; +$spacing-xl: 4lh !default; + +// +// Type Scale +// -------------------------------------------------- + +// Suggested ratios +// Source: http://type-scale.com/ +$_minor-second: 1.067 !default; +$_major-second: 1.125 !default; +$_minor-third: 1.200 !default; +$_major-third: 1.250 !default; +$_perfect-fourth: 1.333 !default; +$_augmented-fourth: 1.414 !default; +$_perfect-fifth: 1.500 !default; +$_golden-ratio: 1.618 !default; + +// Ratio for primary scale +$scale-ratio: $_minor-third !default; + +// Ratio for secondary scale +$scale-ratio-secondary: $_perfect-fourth !default; + +// +// Grid +// -------------------------------------------------- + +// Enable grid styles +$enable-grid: true !default; + +// Enable x-*, sm-*, md-*, lg-*, xl-* columns and offsets +$full-grid: false !default; + +// Max width for container +$container-width: 1200px !default; + +// Enable container="solid" option +$enable-container-solid: false !default; + +// Gutter size +$gutter: 2rem !default; + +// Number of columns in a row +$num-columns: 12 !default; + +// Prefix for attributes +$prefix: '' !default; + +// Create columns and offsets above this breakpoint +$breakpoint: --small !default; + +// +// Color Palette +// -------------------------------------------------- +// Use the getColor() function to use those values in +// your stylesheets. Example: getColor(base, primary) + +$colors: ( + base: ( + "primary": #C65146, + "selection": #EBE1D3, + "lines": #DCDCDC + ), + + text: ( + "primary": #444, + "secondary": #777, + "heading": #222, + "inverted": white + ), + + background: ( + "dark": #32373d, + "light": #f5f5f5, + "body": white + ), + + state: ( + "muted": #eee, + "success": #10a887, + "warning": #F17F42, + "error": #da3c3c + ), + + blue: ( + "darker": #1573b6, + "dark": #1e80c6, + "base": #2b90d9, + "light": #3fa2e9, + "lighter": #4eb1f9 + ), + + green: ( + "darker": #089073, + "dark": #0b9d7d, + "base": #10a887, + "light": #1eb896, + "lighter": #28ceaa + ), + + red: ( + "darker": #653131, + "dark": #b73333, + "base": #da3c3c, + "light": #f25a5a, + "lighter": #fa8181 + ), + + gray: ( + "darker": #333333, + "dark": #4d4d4d, + "base": #666666, + "light": #808080, + "lighter": #999999 + ) +) !default; diff --git a/globals/_typeScale-function.scss b/globals/_typeScale-function.scss new file mode 100644 index 0000000..4ab8655 --- /dev/null +++ b/globals/_typeScale-function.scss @@ -0,0 +1,7 @@ +// +// Function to easily retrieve sizes from a scale. +// -------------------------------------------------- + +@function typeScale($size, $ratio: $scale-ratio) { + @return pow($ratio, $size - 2) * 1rem; +} \ No newline at end of file diff --git a/js/close.js b/js/close.js deleted file mode 100644 index 86ea2e9..0000000 --- a/js/close.js +++ /dev/null @@ -1,6 +0,0 @@ -jQuery(document).ready(function() { - $(document).on('click', '.close', function () { - // Get .close parent div, fade out - $(this).parents('.close-this').fadeOut('slow'); - }); -}); \ No newline at end of file diff --git a/js/dropdown.js b/js/dropdown.js deleted file mode 100644 index b88fb94..0000000 --- a/js/dropdown.js +++ /dev/null @@ -1,33 +0,0 @@ -(function($){ - /** - * Powers the universal dropdown selector. - * - * @class DropDown - * @param {Object} el jQuery object - */ - function DropDown(el) { - this.dd = el; - this.initEvents(); - } - - DropDown.prototype = { - initEvents : function() { - // Toggle .dropdown-active on click - this.dd.on('click', function(event){ - $(this).toggleClass('dropdown-active'); - event.stopPropagation(); - }); - } - } - - $(function(){ - var dropdown = $('.dropdown'); - - new DropDown(dropdown); - - $(document).click(function() { - // Remove class from all dropdowns - dropdown.removeClass('dropdown-active'); - }); - }); -}(jQuery)); \ No newline at end of file diff --git a/js/naver.js b/js/naver.js deleted file mode 100644 index fdb8162..0000000 --- a/js/naver.js +++ /dev/null @@ -1,358 +0,0 @@ -/* - * Naver v3.0.8 - 2014-05-06 - * A jQuery plugin for responsive navigation. Part of the Formstone Library. - * http://formstone.it/naver/ - * - * Copyright 2014 Ben Plum; MIT Licensed - */ - -;(function ($, window) { - "use strict"; - - /** - * @options - * @param customClass [string] <''> "Class applied to instance" - * @param label [boolean] "Display handle width label" - * @param labels.closed [string] <'Navigation'> "Closed state text" - * @param labels.open [string] <'Close'> "Open state text" - * @param maxWidth [string] <'980px'> "Width at which to auto-disable plugin" - */ - var options = { - customClass: "", - label: true, - labels: { - closed: "Navigation", - open: "Close" - }, - maxWidth: "980px" - }; - - /** - * @events - * @event open.naver "Navigation opened" - * @event close.naver "Navigation closed" - */ - - var pub = { - - /** - * @method - * @name close - * @description Closes instance - * @example $(".target").naver("close"); - */ - close: function(e) { - return $(this).each(function(i, nav) { - var data = $(nav).data("naver"); - - if (data && data.$nav.hasClass("enabled")) { - data.$wrapper.css({ - height: 0 - }); - if (data.label) { - data.$handle.html(data.labels.closed); - } - data.$nav.removeClass("open") - .trigger("close.naver"); - } - }); - }, - - /** - * @method - * @name defaults - * @description Sets default plugin options - * @param opts [object] <{}> "Options object" - * @example $.naver("defaults", opts); - */ - defaults: function(opts) { - options = $.extend(true, options, opts || {}); - return $(this); - }, - - /** - * @method - * @name disable - * @description Disables instance - * @example $(".target").naver("disable"); - */ - disable: function() { - return $(this).each(function(i, nav) { - var data = $(nav).data("naver"); - - if (data) { - data.$nav.removeClass("enabled"); - data.$wrapper.css({ height: "" }); - } - }); - }, - - /** - * @method - * @name destroy - * @description Destroys instance - * @example $(".target").naver("destroy"); - */ - destroy: function() { - return $(this).each(function(i, nav) { - var data = $(nav).data("naver"); - - if (data) { - data.$handle.remove(); - data.$container.contents() - .unwrap() - .unwrap(); - - data.$nav.removeClass("enabled disabled naver " + data.customClass) - .off(".naver") - .removeData("naver"); - } - }); - }, - - /** - * @method - * @name enable - * @description Enables instance - * @example $(".target").naver("enable"); - */ - enable: function() { - return $(this).each(function(i, nav) { - var data = $(nav).data("naver"); - - if (data) { - data.$nav.addClass("enabled"); - pub.close.apply(data.$nav); - } - }); - }, - - /** - * @method - * @name open - * @description Opens instance - * @example $(".target").naver("open"); - */ - open: function() { - return $(this).each(function(i, nav) { - var data = $(nav).data("naver"); - - if (data && data.$nav.hasClass("enabled")) { - data.$wrapper.css({ - height: data.$container.outerHeight(true) - }); - if (data.label) { - data.$handle.html(data.labels.open); - } - data.$nav.addClass("open") - .trigger("open.naver"); - } - }); - } - }; - - /** - * @method private - * @name _init - * @description Initializes plugin - * @param opts [object] "Initialization options" - */ - function _init(opts) { - // Settings - opts = $.extend(true, {}, options, opts); - - // Apply to each element - var $items = $(this); - for (var i = 0, count = $items.length; i < count; i++) { - _build($items.eq(i), opts); - } - return $items; - } - - /** - * @method private - * @name _build - * @description Builds each instance - * @param $nav [jQuery object] "Target jQuery object" - * @param opts [object] <{}> "Options object" - */ - function _build($nav, opts) { - if (!$nav.data("naver")) { - // Extend Options - opts = $.extend(true, {}, opts, $nav.data("naver-options")); - - var $handle = $nav.find(".naver-handle").length ? $nav.find(".naver-handle").detach() : $(''); - - $nav.addClass("naver " + opts.customClass) - .wrapInner('

') - .wrapInner('

') - .prepend($handle); - - var data = $.extend(true, { - $nav: $nav, - $container: $nav.find(".naver-container"), - $wrapper: $nav.find(".naver-wrapper"), - $handle: $nav.find(".naver-handle") - }, opts); - - data.$handle.text((opts.label) ? opts.labels.closed : ''); - data.$nav.on("touchstart.naver", ".naver-handle", data, _onTouchStart) - .on("click.naver", ".naver-handle", data, _onClick) - .data("naver", data); - - - // Navtive MQ Support - if (window.matchMedia !== undefined) { - data.mediaQuery = window.matchMedia("(max-width:" + (data.maxWidth === Infinity ? "100000px" : data.maxWidth) + ")"); - // Make sure we stay in context - data.mediaQuery.addListener(function() { - _onRespond.apply(data.$nav); - }); - _onRespond.apply(data.$nav); - } - } - } - - /** - * @method private - * @name _onTouchStart - * @description Handles touchstart to selected item - * @param e [object] "Event data" - */ - function _onTouchStart(e) { - e.stopPropagation(); - - var data = e.data, - oe = e.originalEvent; - - _clearTimer(data.timer); - - data.touchStartX = oe.touches[0].clientX; - data.touchStartY = oe.touches[0].clientY; - - data.$nav.on("touchmove.naver", ".naver-handle", data, _onTouchMove) - .on("touchend.naver", ".naver-handle", data, _onTouchEnd); - } - - /** - * @method private - * @name _onTouchMove - * @description Handles touchmove to selected item - * @param e [object] "Event data" - */ - function _onTouchMove(e) { - var data = e.data, - oe = e.originalEvent; - - if (Math.abs(oe.touches[0].clientX - data.touchStartX) > 10 || Math.abs(oe.touches[0].clientY - data.touchStartY) > 10) { - data.$nav.off("touchmove.naver touchend.naver"); - } - } - - /** - * @method private - * @name _onTouchEnd - * @description Handles touchend to selected item - * @param e [object] "Event data" - */ - function _onTouchEnd(e) { - e.preventDefault(); - e.stopPropagation(); - - var data = e.data; - - data.$nav.off("touchmove.naver touchend.naver click.naver"); - - // prevent ghosty clicks - data.timer = _startTimer(data.timer, 1000, function() { - data.$nav.on("click.naver", ".naver-handle", data, _onClick); - }); - - _onClick(e); - } - - /** - * @method private - * @name _onClick - * @description Handles click nav click - * @param e [object] "Event data" - */ - function _onClick(e) { - e.preventDefault(); - e.stopPropagation(); - - var $target = $(e.currentTarget), - data = e.data; - - // Close other open instances - $(".naver").not(data.$nav) - .naver("close"); - - if (data.$nav.hasClass("open")) { - pub.close.apply(data.$nav); - } else { - pub.open.apply(data.$nav); - } - } - - /** - * @method private - * @name _onRespond - * @description Handles media query match change - */ - function _onRespond() { - var data = $(this).data("naver"); - - if (data.mediaQuery.matches) { - pub.enable.apply(data.$nav); - } else { - pub.disable.apply(data.$nav); - } - } - - /** - * @method private - * @name _startTimer - * @description Starts an internal timer - * @param timer [int] "Timer ID" - * @param time [int] "Time until execution" - * @param callback [int] "Function to execute" - * @param interval [boolean] "Flag for recurring interval" - */ - function _startTimer(timer, time, func, interval) { - _clearTimer(timer, interval); - if (interval === true) { - return setInterval(func, time); - } else { - return setTimeout(func, time); - } - } - - /** - * @method private - * @name _clearTimer - * @description Clears an internal timer - * @param timer [int] "Timer ID" - */ - function _clearTimer(timer) { - if (timer !== null) { - clearInterval(timer); - timer = null; - } - } - - $.fn.naver = function(method) { - if (pub[method]) { - return pub[method].apply(this, Array.prototype.slice.call(arguments, 1)); - } else if (typeof method === 'object' || !method) { - return _init.apply(this, arguments); - } - return this; - }; - - $.naver = function(method) { - if (method === "defaults") { - pub.defaults.apply(this, Array.prototype.slice.call(arguments, 1)); - } - }; -})(jQuery, window); \ No newline at end of file diff --git a/js/navigation.js b/js/navigation.js deleted file mode 100644 index 003272b..0000000 --- a/js/navigation.js +++ /dev/null @@ -1,23 +0,0 @@ -(function($){ - /** - * Determine if responsive navigation text needs to be added. - * - * @method responsiveNav - * @return {Object} naver A naver plugin instantiation - */ - $.fn.responsiveNav = function() { - // Loop through each instance of responsive navigation - this.each(function(index) { - var labelState = $(this).hasClass( "nav-responsive-text" ); - - return $(this).naver({ - maxWidth: "768px", - label: labelState - }); - }); - }; -}(jQuery)); - -jQuery(document).ready(function() { - jQuery(".nav-responsive, .nav-responsive-left, .nav-responsive-center").responsiveNav(); -}); \ No newline at end of file diff --git a/js/non-responsive.js b/js/non-responsive.js deleted file mode 100644 index 27363a0..0000000 --- a/js/non-responsive.js +++ /dev/null @@ -1,51 +0,0 @@ -(function($){ - /** - * Calculate object width - * - */ - $.fn.calculateWidth = function() { - return $(this).width(); - }; - - /** - * Calculates proper widths for non-responsive websites. - * - * @method nonResponsive - * @note Only necessary for non-responsive websites. - */ - $.fn.nonResponsive = function() { - - // Loop through each instance of the `.non-responsive` class - this.each(function(index) { - if ($(this).hasClass("non-responsive")) { - - // Get container width - var containerWidth = $(".container").width(), - i = 1, - max = 24; - - // Set pixel-based alternatives for grid styles - // But first we need to know if our row has class `gutters` - if($(this).hasClass("gutters")) { - for (; i <= max; i++ ) { - // Column width for row with gutters - var columnWidth = ($('.column-'+i).calculateWidth()), - gutterWidth = columnWidth * 0.02; - - $('.gutters .column-'+i).css("width", columnWidth - gutterWidth + "px"); - } - } else { - for (; i <= max ; i++ ) { - // Column width for normal row - var columnWidth = ($('.column-'+i).calculateWidth() - 1); - $('.column-'+i).css("width", columnWidth + "px"); - } - } - } - }); - }; -}(jQuery)); - -jQuery(document).ready(function() { - jQuery("body, .row").nonResponsive(); -}); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..4eec325 --- /dev/null +++ b/package.json @@ -0,0 +1,47 @@ +{ + "name": "concise.css", + "version": "4.1.2", + "description": "A lightweight front-end framework that provides functionality without the bloat.", + "license": "MIT", + "keywords": [ + "css", + "sass", + "scss", + "mobile-first", + "responsive", + "front-end", + "framework", + "web", + "lightweight", + "postcss" + ], + "homepage": "http://concisecss.com", + "bugs": "https://github.com/ConciseCSS/concise.css/issues", + "repository": { + "type": "git", + "url": "https://github.com/ConciseCSS/concise.css" + }, + "engines": { + "node": ">=6.0.0" + }, + "devDependencies": { + "chokidar-cli": "^1.2.0", + "concise-cli": "^0.4.1", + "cssnano-cli": "^1.0.4", + "http-server": "^0.9.0", + "jake": "^8.0.15", + "livereload": "^0.6.0", + "stylestats": "^6.3.0", + "postcss": "^5.0.21", + "postcss-custom-media": "^5.0.1", + "postcss-lh": "^1.1.0", + "postcss-media-minmax": "^2.1.2", + "postcss-input-range": "^2.0.0" + }, + "scripts": { + "build": "jake build", + "build:dev": "jake default", + "stats": "stylestats dist/concise.css", + "stats:min": "stylestats dist/concise.min.css" + } +} diff --git a/scss/_defaults.scss b/scss/_defaults.scss deleted file mode 100644 index 65d9309..0000000 --- a/scss/_defaults.scss +++ /dev/null @@ -1,190 +0,0 @@ -//------------------------------------// -// $BORDER-BOX -//------------------------------------// -// Set to `false` if you do not wish to adopt -// global `box-sizing: border-box;` -$global-border-box: true !default; - - - - -//------------------------------------// -// $DEBUG -//------------------------------------// -// Enabling debug mode allows for potential issues -// to be visually displayed in the browser. -$debug-mode: false !default; - - - - -//------------------------------------// -// $BASE -//------------------------------------// -// Base font sizes and colors -$base-font-size: 16px !default; -$base-line-height: 24px !default; -$base-font-color: #333333 !default; -$base-link-color: #62b3e7 !default; - - -// Base font-family -$base-font-family: "Droid Sans", Helvetica, Arial, sans-serif !default; - - -// Element spacing and line-height ratio -$base-spacing-unit: $base-line-height !default; -$half-spacing-unit: $base-spacing-unit / 2 !default; -$line-height-ratio: $base-line-height / $base-font-size; - - - - -//------------------------------------// -// $RESPONSIVE -//------------------------------------// -// Breakpoints -$extra-small-start: 30em !default; -$small-start: 48em !default; -$medium-start: 60em !default; -$large-start: 70em !default; -$extra-large-start: 80em !default; - - - - -//------------------------------------// -// $FONT-SIZES -//------------------------------------// -// Font-sizes (in pixels) -$giga-size: 96px !default; -$mega-size: 72px !default; -$kilo-size: 64px !default; - -$h1-size: 36px !default; -$h2-size: 30px !default; -$h3-size: 24px !default; -$h4-size: 20px !default; -$h5-size: 16px !default; -$h6-size: 14px !default; - -$small-size: 12px !default; -$micro-size: 10px !default; - - - - -//------------------------------------// -// $COLORS -//------------------------------------// -// Background colors -$bg-white: #ffffff !default; -$bg-black: #222222 !default; -$bg-light-gray: #f9f9f9 !default; -$bg-gray: #999999 !default; -$bg-light-green: #dff0d8 !default; -$bg-green: #5cb85c !default; -$bg-light-blue: #d9edf7 !default; -$bg-blue: #5bc0de !default; -$bg-light-yellow: #fcf8e3 !default; -$bg-yellow: #ed9c28 !default; -$bg-light-red: #f2dede !default; -$bg-red: #d9534f !default; - - -// Type colors -$color-white: #ffffff !default; -$color-black: #222222 !default; -$color-gray: #999999 !default; -$color-green: #468847 !default; -$color-blue: #3a87ad !default; -$color-red: #d2322d !default; -$color-yellow: #c09853 !default; - - -// Selection colors -$selection-background: #666666 !default; -$selection-color: #ffffff !default; - - -// Form placeholder colors -$placeholder-color: #bbbbbb !default; - - -// Colors used for our objects' borders, etc -$object-ui-color: #ededed !default; - - - - -//------------------------------------// -// $OBJECTS -//------------------------------------// -// Gutter size -$gutters: 2% !default; - - -// Prefix for grid columns. By default columns -// are formatted as `.column-8` -$column-prefix: 'column-' !default; - - -// Dictate how many columns you would like your -// grid system to use. Default is 16. -$column-number: 16 !default; - - -// Border radius value for `.border-radius` class -$border-radius: 4px !default; - - - - -//------------------------------------// -// $INCLUDE -//------------------------------------// -// Set whatever components you want included -// in your project to `true` and any components -// you do not wish to be included to `false` - - -// Utility -$use-normalize: true !default; -$use-clearfix: true !default; -$use-shared: true !default; - - -// Base -$use-main: true !default; -$use-selection: true !default; -$use-container: true !default; -$use-typography: true !default; -$use-headings: true !default; -$use-blockquotes: true !default; -$use-lists: true !default; -$use-tables: true !default; -$use-forms: true !default; -$use-grid: true !default; - // Using push and pull classes for grid - // columns takes a lot of code. Set to - // `true` if needed. - $use-push: false !default; - $use-pull: false !default; - - -// Objects and abstractions -$use-colors: true !default; -$use-buttons: true !default; -$use-groups: true !default; -$use-dropdowns: true !default; -$use-navigation: true !default; -$use-breadcrumbs: true !default; -$use-wells: true !default; -$use-badges: true !default; -$use-progress: true !default; - - -// Helpers -$use-helper: true !default; -$use-conditional: true !default; -$use-print: true !default; \ No newline at end of file diff --git a/scss/base/_blockquotes.scss b/scss/base/_blockquotes.scss deleted file mode 100644 index bf2cc79..0000000 --- a/scss/base/_blockquotes.scss +++ /dev/null @@ -1,36 +0,0 @@ -@if $use-blockquotes == true { - //------------------------------------// - // $BLOCKQUOTES - //------------------------------------// - blockquote { - border-left: 1px solid #ddd; - color: #777; - font-style: italic; - margin: 1em 2em; - padding-left: 1em; - text-align: left; - - cite { - color: #555; - display: block; - @include font-size(14px); - - &:before { content: "\2014 \0020"; } - - a { - color: #555; - - &:visited { color: #555; } - } - } - - - // Reversed blockquote - &.blockquote-reverse { - border-left: none; - border-right: 1px solid #ddd; - padding: 0 1em 0 0; - text-align: right; - } - } -} \ No newline at end of file diff --git a/scss/base/_container.scss b/scss/base/_container.scss deleted file mode 100644 index 1b1da6a..0000000 --- a/scss/base/_container.scss +++ /dev/null @@ -1,14 +0,0 @@ -@if $use-container == true { - //------------------------------------// - // $CONTAINER - //------------------------------------// - .container { width: 90%; } - - @include breakpoint(small) { .container { width: 620px; } } - - @include breakpoint(medium) { .container { width: 768px; } } - - @include breakpoint(large) { .container { width: 960px; } } - - @include breakpoint(extra-large) { .container { width: 1140px; } } -} \ No newline at end of file diff --git a/scss/base/_forms.scss b/scss/base/_forms.scss deleted file mode 100644 index 8640574..0000000 --- a/scss/base/_forms.scss +++ /dev/null @@ -1,125 +0,0 @@ -@if $use-forms == true { - //------------------------------------// - // $FORMS - //------------------------------------// - label { display: block; } - - input, - select, - textarea { - border: 1px solid #ddd; - height: 37px; - padding: 5px; - width: 100%; - - @include vendor(box-sizing, border-box); - } - - @include breakpoint(extra-small) { - input, - select, - textarea { width: 90%; } - } - - @include breakpoint(small) { - input, - select { width: 300px; } - } - - input:focus, - select:focus, - textarea:focus, - button:focus, - [contenteditable="true"]:focus { - outline: none; - outline: thin dotted \9; - } - - textarea { height: auto; } - - input { - &[type="checkbox"], - &[type="file"], - &[type="image"], - &[type="radio"] { - background: auto !important; - border: auto !important; - height: auto !important; - width: auto !important; - } - - &[disabled] { - cursor: not-allowed; - background-color: #f6f6f6; - } - } - - @include breakpoint(small) { - input[type="submit"] { width: auto; } - - textarea { width: 400px; } - } - - select[disabled], - textarea[disabled] { background-color: #f6f6f6; } - - fieldset { - border: 1px solid #ededed; - padding: 10px 25px; - - legend { - font-weight: bold; - @include font-size(13px); - padding: 0 10px; - } - } - - - // Validation - input.required:required:valid, - textarea.required:required:valid { border-color: #2ecc71; } - - input.required:focus:invalid, - textarea.required:focus:invalid { border-color: #e74c3c; } - - - // Block-level form items - .form-item { - display: block; - padding: 14px 0; - } - - - // Rounded corners - form.border-radius { - input, - select, - textarea, - fieldset { border-radius: $border-radius; } - } - - - // Inline Form - .form-inline label { width: auto; } - - @include breakpoint(small) { - .form-inline { - label { - display: inline-block; - width: 100px; - } - - textarea { width: auto; } - } - } - - - // Placeholder text - ::-webkit-input-placeholder { color: $placeholder-color; } - - :-ms-input-placeholder { color: $placeholder-color; } - - ::-moz-placeholder { color: $placeholder-color; } - - :-moz-placeholder { color: $placeholder-color; } -} \ No newline at end of file diff --git a/scss/base/_grid.scss b/scss/base/_grid.scss deleted file mode 100644 index 89ef446..0000000 --- a/scss/base/_grid.scss +++ /dev/null @@ -1,67 +0,0 @@ -@if $use-grid == true { - //------------------------------------// - // $GRID - //------------------------------------// - .row { - width: 100%; - - &:after { - clear: both; - content: " "; - display: table; - } - } - - [class*='#{$column-prefix}'] { - @include vendor(background-clip, padding-box !important); - - &.right { float: right; } - - img { max-width: 100%; } - } - - @include breakpoint(small) { - [class*='#{$column-prefix}'] { float: left; } - - .gutters [class*='#{$column-prefix}'] { - margin-left: $gutters; - - &:first-child { margin-left: 0; } - } - - - // Row columns - @include grid-setup(); - - - // Push - @if $use-push == true { - [class*='push-'] { position: relative; } - - @include push-setup(); - } - - - // Pull - @if $use-pull == true { - [class*='pull-'] { position: relative; } - - @include pull-setup(); - } - } - - - // Non-responsive grid - .non-responsive { - [class*='#{$column-prefix}'] { - float: left; - width: auto !important; - } - - .gutters [class*='#{$column-prefix}'], - &.gutters [class*='#{$column-prefix}'] { margin-left: $gutters; } - - .gutters [class*='#{$column-prefix}']:first-child, - &.gutters [class*='#{$column-prefix}']:first-child { margin-left: 0; } - } -} \ No newline at end of file diff --git a/scss/base/_headings.scss b/scss/base/_headings.scss deleted file mode 100644 index bc983c1..0000000 --- a/scss/base/_headings.scss +++ /dev/null @@ -1,155 +0,0 @@ -@if $use-headings == true { - //------------------------------------// - // $HEADINGS - //------------------------------------// - h1, h2, h3, h4, h5, h6, - .h1, .h2, .h3, .h4, .h5, .h6, - .giga, .mega, .kilo { - color: #181818; - font-weight: normal; - text-rendering: optimizeLegibility; - } - - h1, .h1 { - @include font-size(24px); - } - - h2, .h2 { - @include font-size(20px); - } - - h3, .h3 { - @include font-size(18px); - } - - h4, .h4 { - @include font-size(16px); - } - - h5, .h5 { - @include font-size(14px); - } - - h6, .h6 { - @include font-size(12px); - } - - @include breakpoint(small) { - h1, .h1 { - @include font-size(32px); - } - - h2, .h2 { - @include font-size(24px); - } - - h3, .h3 { - @include font-size(20px); - } - - h4, .h4 { - @include font-size(18px); - } - - h5, .h5 { - @include font-size(16px); - } - - h6, .h6 { - @include font-size(14px); - } - } - - @include breakpoint(medium) { - h1, .h1 { - @include font-size($h1-size); - } - - h2, .h2 { - @include font-size($h2-size); - } - - h3, .h3 { - @include font-size($h3-size); - } - - h4, .h4 { - @include font-size($h4-size); - } - - h5, .h5 { - @include font-size($h5-size); - } - - h6, .h6 { - @include font-size($h6-size); - } - } - - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, - .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, - .giga a, .mega a, .kilo a { font-weight: inherit; } - - h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, - .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, - .giga small, .mega small, .kilo small { - font-size: 65% !important; - line-height: 1; - } - - - // Extra-large heading classes - .giga { - @include font-size(48px); - } - - .mega { - @include font-size(40px); - } - - .kilo { - @include font-size(32px); - } - - @include breakpoint(small) { - .giga { - @include font-size(64px); - } - - .mega { - @include font-size(48px); - } - - .kilo { - @include font-size(32px); - } - } - - @include breakpoint(large) { - .giga { - @include font-size(80px); - } - - .mega { - @include font-size(64px); - } - - .kilo { - @include font-size(48px); - } - } - - @include breakpoint(extra-large) { - .giga { - @include font-size($giga-size); - } - - .mega { - @include font-size($mega-size); - } - - .kilo { - @include font-size($kilo-size); - } - } -} \ No newline at end of file diff --git a/scss/base/_lists.scss b/scss/base/_lists.scss deleted file mode 100644 index 30d6f79..0000000 --- a/scss/base/_lists.scss +++ /dev/null @@ -1,125 +0,0 @@ -@if $use-lists == true { - //------------------------------------// - // $LISTS - //------------------------------------// - ul { - margin-left: 20px; - padding-left: 0px; - } - - ol { - margin-left: 0px; - padding-left: 20px; - } - - ul li, - ol li { - line-height: 1.75em; - position: relative; - } - - ul ul { - list-style-type: circle; - margin-bottom: auto; - - ul { list-style-type: square; } - } - - ol ol { - list-style-type: lower-latin; - margin-bottom: auto; - - ol { list-style-type: lower-roman; } - } - - @include breakpoint(small) { ul li ul { margin-left: 20px; } } - - - // Unstyled - .list-unstyled { - margin-left: 0px; - list-style: none; - - li ul { - list-style: none; - - li ul { list-style: none; } - } - } - - - // Line - .list-line li { - border-bottom: 1px solid #eee; - padding: 5px 0; - - &:last-child, - li { border-bottom: none; } - } - - - // Inline - .list-inline { - display: block; - margin-left: 0px; - - li { - border-bottom: none; - - &:last-child { margin-right: 0px; } - } - } - - @include breakpoint(extra-small) { - .list-inline li { - display: inline; - margin-right: 25px; - - &:last-child { margin-right: 0px; } - } - - .list-line.list-inline li { - margin-right: 15px; - - &:after { - color: #e6e8ea; - content: "|"; - margin-left: 15px; - } - - &:last-child:after { content: ""; } - } - } - - - // Fills - .list-fill-even li, - .list-fill-odd li { padding-left: 5px; } - - .list-fill-even li:nth-child(even), - .list-fill-odd li:nth-child(odd) { background-color: #f9f9f9; } - - - // Definition Lists - dt { font-weight: bold; } - - dd { margin-left: 0px; } - - @include breakpoint(small) { - dl.dl-horizontal { - overflow: hidden; - > { - dt { - width: 160px; - float: left; - clear: both; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - dd { margin-left: 180px; } - } - } - } -} \ No newline at end of file diff --git a/scss/base/_main.scss b/scss/base/_main.scss deleted file mode 100644 index 43761a1..0000000 --- a/scss/base/_main.scss +++ /dev/null @@ -1,29 +0,0 @@ -@if $use-main == true { - //------------------------------------// - // $MAIN - //------------------------------------// - @if $global-border-box == true { - *{ - &, - &:before, - &:after { - @include vendor(box-sizing, border-box); - } - } - } - - html, - body { - background-color: #fff; - color: $base-font-color; - font: normal normal #{($base-font-size/16px)*1em}/#{$line-height-ratio} $base-font-family; - margin: 0; - - font-smooth: always; - - -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; - } - - html[dir="rtl"] { direction: rtl; } -} \ No newline at end of file diff --git a/scss/base/_selection.scss b/scss/base/_selection.scss deleted file mode 100644 index b2785f3..0000000 --- a/scss/base/_selection.scss +++ /dev/null @@ -1,21 +0,0 @@ -@if $use-selection == true { - //------------------------------------// - // $SELECTION - //------------------------------------// - * { - &::-webkit-selection { - background-color: $selection-background; - color: $selection-color; - } - - &::-moz-selection { - background-color: $selection-background; - color: $selection-color; - } - - &::selection { - background-color: $selection-background; - color: $selection-color; - } - } -} \ No newline at end of file diff --git a/scss/base/_tables.scss b/scss/base/_tables.scss deleted file mode 100644 index 01160bb..0000000 --- a/scss/base/_tables.scss +++ /dev/null @@ -1,83 +0,0 @@ -@if $use-tables == true { - //------------------------------------// - // $TABLES - //------------------------------------// - table { - &.table { - empty-cells: show; - width: 100%; - - caption { - color: #000; - font: italic 85%/1 arial, sans-serif; - padding: 1em 0; - text-align: center; - } - - thead { border-bottom: 2px solid #ededed; } - - th { padding: 12px 15px; } - - td { - padding: 12px 15px; - border-top: 1px solid #ededed; - } - } - - - // Background colors - .bg-light-green { color: $color-green; } - - .bg-light-blue { color: $color-blue; } - - .bg-light-yellow { color: $color-yellow; } - - .bg-light-red { color: $color-red; } - - - // Full-width table - &.table-full, - &.table.table-full { width: 100%; } - - - // Borders - &.table-border-all, &.table-border-outer { border: 1px solid #ededed; } - - &.table-border-all { - th, - td { border-right: 1px solid #ededed; } - } - - &.table-border-inner { - th, - td { border-right: 1px solid #ededed; } - } - - - // Hovers - &.table-hover-row tr:hover td, - &.table-hover-cell td:hover { background-color: #f9f9f9; } - - - // Striped - &.table-fill-even tbody tr:nth-child(even), - &.table-fill-odd tbody tr:nth-child(odd) { background-color: #f9f9f9; } - } - - @include breakpoint(extra-small) { - table.table { - width: auto; - - th, td { padding: 10px 50px 10px 25px; } - } - } - - - // Responsive tables - .table-responsive { - overflow: auto; - width: 100%; - - table { margin-bottom: 0; } - } -} \ No newline at end of file diff --git a/scss/base/_type.scss b/scss/base/_type.scss deleted file mode 100644 index 4e50914..0000000 --- a/scss/base/_type.scss +++ /dev/null @@ -1,64 +0,0 @@ -@if $use-typography == true { - //------------------------------------// - // $TYPE - //------------------------------------// - // Links - a { - color: $base-link-color; - text-decoration: none; - - &:hover, - &:visited { - color: lighten($base-link-color, 10%); - cursor: pointer; - text-decoration: underline; - } - } - - p a { - line-height: inherit; - - &:visited { line-height: inherit; } - } - - - // Sizing - small, - .small { - @include font-size($small-size); - } - - .micro { - @include font-size($micro-size); - } - - - // Addresses - address { - font-style: normal; - - > strong { display: block; } - } - - - // Other elements - abbr { - &[title], &[data-original-title] { - cursor: help; - border-bottom: 1px dotted #999; - } - } - - acronym { - cursor: help; - border-bottom: 1px dashed blue; - } - - kbd { - background-color: #333; - border-radius: 4px; - color: #fff; - font-size: 90%; - padding: 1px 4px; - } -} diff --git a/scss/concise.scss b/scss/concise.scss deleted file mode 100644 index 6309ee7..0000000 --- a/scss/concise.scss +++ /dev/null @@ -1,104 +0,0 @@ -/** - * # Concise.CSS - * http://github.com/ConciseCSS/concise.css - * - * - * Copyright 2014 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - - - -//------------------------------------// -// $CONTENTS -//------------------------------------// -// -// CONTENTS -// IMPORTS -// -// MIXINS -// NORMALIZE -// CLEARFIX -// SHARED -// -// MAIN -// SELECTION -// CONTAINER -// TYPE -// HEADINGS -// BLOCKQUOTES -// LISTS -// TABLES -// FORMS -// GRID -// -// COLORS -// BUTTONS -// GROUPS -// DROPDOWNS -// NAVIGATION -// BREADCRUMBS -// WELLS -// BADGES -// PROGRESS -// -// HELPER -// CONDITIONAL -// PRINT -// DEBUG -// -// - - - - -//------------------------------------// -// $IMPORTS -//------------------------------------// -// Generic utility styles -@import "defaults"; -@import "generic/mixins"; -@import "generic/normalize"; -@import "generic/clearfix"; -@import "generic/shared"; - - - - -// Base styles -@import "base/main"; -@import "base/selection"; -@import "base/container"; -@import "base/type"; -@import "base/headings"; -@import "base/blockquotes"; -@import "base/lists"; -@import "base/tables"; -@import "base/forms"; -@import "base/grid"; - - - - -// Objects and abstractions -@import "objects/colors"; -@import "objects/buttons"; -@import "objects/groups"; -@import "objects/dropdowns"; -@import "objects/navigation"; -@import "objects/breadcrumbs"; -@import "objects/wells"; -@import "objects/badges"; -@import "objects/progress"; - - - - -// Helper classes -@import "generic/helper"; -@import "generic/conditional"; -@import "generic/print"; -@import "generic/debug"; \ No newline at end of file diff --git a/scss/generic/_clearfix.scss b/scss/generic/_clearfix.scss deleted file mode 100644 index c0580b8..0000000 --- a/scss/generic/_clearfix.scss +++ /dev/null @@ -1,12 +0,0 @@ -@if $use-clearfix == true { - //------------------------------------// - // $CLEARFIX - //------------------------------------// - .clearfix { - &:after{ - content: ""; - display: table; - clear: both; - } - } -} \ No newline at end of file diff --git a/scss/generic/_conditional.scss b/scss/generic/_conditional.scss deleted file mode 100644 index ed9f551..0000000 --- a/scss/generic/_conditional.scss +++ /dev/null @@ -1,122 +0,0 @@ -@if $use-conditional == true { - //------------------------------------// - // $CONDITIONAL - //------------------------------------// - .show-extra-small, - .hide-small, - .hide-medium, - .hide-large, - .hide-extra-large, - .hide-print, - .hide-hd { - display: block; - visibility: visible; - } - - .hide-extra-small, - .show-small, - .show-medium, - .show-large, - .show-extra-large, - .show-print, - .show-hd { - display: none; - visibility: hidden; - } - - @include breakpoint(small) { - .show-small, - .hide-extra-small, - .hide-medium, - .hide-large, - .hide-extra-large { - display: block; - visibility: visible; - } - - .hide-small, - .show-extra-small, - .show-medium, - .show-large, - .show-extra-large { - display: none; - visibility: hidden; - } - } - - @include breakpoint(medium) { - .show-medium, - .hide-small, - .hide-extra-small, - .hide-large, - .hide-extra-large { - display: block; - visibility: visible; - } - - .hide-medium, - .show-small, - .show-extra-small, - .show-large, - .show-extra-large { - display: none; - visibility: hidden; - } - } - - @include breakpoint(large) { - .show-large, - .hide-extra-small, - .hide-small, - .hide-medium, - .hide-extra-large { - display: block; - visibility: visible; - } - - .hide-large, - .show-extra-small, - .show-small, - .show-medium, - .show-extra-large { - display: none; - visibility: hidden; - } - } - - @include breakpoint(extra-large) { - .show-extra-large, - .hide-extra-small, - .hide-small, - .hide-medium, - .hide-large { - display: block; - visibility: visible; - } - - .hide-extra-large, - .show-extra-small, - .show-small, - .show-medium, - .show-large { - display: none; - visibility: hidden; - } - } - - // HiDPI and retina - @media only screen and (-moz-min-device-pixel-ratio: 1.5), - only screen and (-o-min-device-pixel-ratio: 3 / 2), - only screen and (-webkit-min-device-pixel-ratio: 1.5), - only screen and (min-device-pixel-ratio: 1.5) { - .show-hd { - display: block; - visibility: visible; - } - - .hide-hd { - display: none; - visibility: hidden; - } - } -} \ No newline at end of file diff --git a/scss/generic/_debug.scss b/scss/generic/_debug.scss deleted file mode 100644 index 050d316..0000000 --- a/scss/generic/_debug.scss +++ /dev/null @@ -1,98 +0,0 @@ -@if $debug-mode == true { - //------------------------------------// - // $DEBUG - //------------------------------------// - // Big thanks to Harry Roberts of CSS Wizardry for this great - // tool. https://github.com/csswizardry/inuit.css/blob/master/_inuit.scss - - // - // Enable this stylesheet to visually detect any improperly nested or - // potentially invalid markup, or any potentially inaccessible code. - // - // Red == definite error - // Yellow == double-check - // None == should be fine - // - // Please note that this method of checking markup quality should not be relied - // upon entirely. Validate your markup! - // - - - // Are there any empty elements in your page? - :empty { outline: 5px solid yellow; } - - - // Images require `alt` attributes, empty `alt`s are fine but should be - // double-checked, no `alt` is bad and is flagged red. - img { outline:5px solid red; } - - img[alt] { outline:none; } - - img[alt=""] { outline:5px solid yellow; } - - - // Links sometimes, though not always, benefit from `title` attributes. Links - // without are never invalid but it’s a good idea to check. - a { outline:5px solid yellow; } - - a[title] { outline:none; } - - - // Double-check any links whose `href` is something questionable. - a[href="#"], - a[href*="javascript"] { outline:5px solid yellow; } - - - // The `target` attribute ain’t too nice... - a[target] { outline:5px solid yellow; } - - - // Ensure any lists only contain `li`s as children. - ul, - ol { - > *:not(li) { outline:5px solid red; } - } - - - // It’s always nice to give `th`s `scope` attributes. - th { outline:5px solid yellow; } - - th[scope] { outline:none; } - - - // `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`? - table > tr { outline:5px solid yellow; } - - - // `tfoot` needs to come *before* `tbody`. - tbody + tfoot { outline:5px solid yellow; } - - - // Forms require `action` attributes - form { outline:5px solid red; } - - form[action] { outline:none; } - - - // Various form-field types have required attributes. `input`s need `type` - // attributes, `textarea`s need `rows` and `cols` attributes and submit buttons - // need a `value` attribute. - textarea, - input { outline:5px solid red; } - - input[type] { outline:none; } - - textarea[rows][cols] { outline:none; } - - input[type=submit] { outline:5px solid red; } - - input[type=submit][value] { outline:none; } - - - // Avoid inline styles where possible. - [style] { outline:5px solid yellow; } - - - // You should avoid using IDs for CSS, is this doing any styling? - [id]{ outline:5px solid yellow; } -} \ No newline at end of file diff --git a/scss/generic/_helper.scss b/scss/generic/_helper.scss deleted file mode 100644 index aa6a41d..0000000 --- a/scss/generic/_helper.scss +++ /dev/null @@ -1,117 +0,0 @@ -@if $use-helper == true { - //------------------------------------// - // $HELPER - //------------------------------------// - // Add/remove floats - .float-left { float: left !important; } - - .float-right { float: right !important; } - - .float-none { float: none !important; } - - - // Position elements - .align-center { - display: block; - margin-left: auto; - margin-right: auto; - } - - .no-margin { margin: 0 !important; } - - .icon-alone { display: inline-block; } - - - // Displaying content - .inline { display: block; } - - @include breakpoint(extra-small) { .inline { display: inline; } } - - .show { - display: block; - visibility: visible; - } - - .hide { - display: none; - visibility: hidden; - } - - .screen-reader { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } - - - // Full-width elements - .full { width: 100%; } - - img.full { - max-width: 100%; - height: auto; - display: block; - width: auto; - } - - - // Text alignment - .text-left { text-align: left; } - - .text-right { text-align: right; } - - .text-center { text-align: center; } - - .text-justify { text-align: justify; } - - - // Font weights - .weight-light { font-weight: 300 !important; } - - .weight-normal { font-weight: 400 !important; } - - .weight-semibold { font-weight: 600 !important; } - - - // All-caps text - .text-uppercase { text-transform: uppercase; } - - - // Stylized ampersand - .amp { font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif !important; } - - - // Hide text - .text-hide { - border: 0; - background-color: transparent; - color: transparent; - font: 0 / 0 a; - text-shadow: none; - } - - - // Caret icon - .caret { - border-top: 5px solid; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - display: inline-block; - margin: 0 0 3px 4px; - vertical-align: middle; - width: 0; - } - - - // Border radius - .border-radius { border-radius: $border-radius; } - - - // Pill style - .pill { border-radius: 25px; } -} \ No newline at end of file diff --git a/scss/generic/_mixins.scss b/scss/generic/_mixins.scss deleted file mode 100644 index 9fa936c..0000000 --- a/scss/generic/_mixins.scss +++ /dev/null @@ -1,122 +0,0 @@ -// -// Passing in a single value will create font-sizing in -// pixels, rems as well as a proper line-height. -// -// `@include font-size(24px);` -// -// -@mixin font-size($font-size, $line-height:true) { - font-size: $font-size; - font-size: ($font-size / $base-font-size) * 1rem; - - @if $line-height == true { - line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size); - } -} - - -// -// Proper vendor prefixes are created just by -// passing a property value and size value. -// -// `@include vendor(border-radius, 4px);` -// -// -@mixin vendor($property, $value...) { - -webkit-#{$property}: $value; - -moz-#{$property}: $value; - -ms-#{$property}: $value; - -o-#{$property}: $value; - #{$property}: $value; -} - - -// -// By passing in one of the pre-defined media queries that -// are packaged with Concise by default, you can easily -// create styles that are built from the ground-up to be -// mobile friendly. -// -// `@include breakpoint(extra-small) { [styles here] }` -// -// -@mixin breakpoint($point) { - @if $point == extra-small { - @media (min-width: $extra-small-start) { @content; } - } - - @else if $point == small { - @media (min-width: $small-start) { @content; } - } - - @else if $point == medium { - @media (min-width: $medium-start) { @content; } - } - - @else if $point == large { - @media (min-width: $large-start) { @content; } - } - - @else if $point == extra-large { - @media (min-width: $extra-large-start) { @content; } - } - - @else if $point == high-density { - @media only screen and (-webkit-min-device-pixel-ratio: 1.5), - only screen and (min--moz-device-pixel-ratio: 1.5), - only screen and (-o-min-device-pixel-ratio: 3/2), - only screen and (min-device-pixel-ratio: 1.5) { @content; } - } -} - - -// -// Create variable-number grid columns given the value -// for variable `$column-number` -// -@mixin grid-setup($number: $column-number) { - // Assign percentage-based widths for columns - @for $i from 1 through $number { - .#{$column-prefix + $i} { width: 100% / $number * $i; } - } - - @for $i from 1 through $number { - // Style all but the last column - @if $i != $column-number { - .gutters .#{$column-prefix + $i} { width: 100% / $number * $i - $gutters; } - } @else { - // Ensure the last column has a width of 100% - .gutters .#{$column-prefix + $i} { width: 100% } - } - } -} - - -// -// Create proper `.push-` classes given the value -// for variable `$column-number` -// -@mixin push-setup($number: $column-number) { - @for $i from 1 to $number { - .push-#{$i} { left: 100% / $number * $i; } - } - - @for $i from 1 to $number { - .gutters .push-#{$i} { left: 100% / $number * $i - $gutters; } - } -} - - -// -// Create proper `.pull-` classes given the value -// for variable `$column-number` -// -@mixin pull-setup($number: $column-number) { - @for $i from 1 to $number { - .pull-#{$i} { right: 100% / $number * $i; } - } - - @for $i from 1 to $number { - .gutters .pull-#{$i} { right: 100% / $number * $i - $gutters; } - } -} \ No newline at end of file diff --git a/scss/generic/_normalize.scss b/scss/generic/_normalize.scss deleted file mode 100644 index 84d1a08..0000000 --- a/scss/generic/_normalize.scss +++ /dev/null @@ -1,191 +0,0 @@ -@if $use-normalize == true { - //------------------------------------// - // $NORMALIZE - //------------------------------------// - html { - font-size: 100%; - @include vendor(text-size-adjust, 100%); - } - - article, - aside, - details, - figcaption, - figure, - footer, - header, - hgroup, - main, - nav, - section, - summary { display: block; } - - audio, - canvas, - progress, - video { - display: inline-block; - vertical-align: baseline; - } - - audio:not([controls]) { - display: none; - height: 0; - } - - [hidden], - template { display: none; } - - a { - background: transparent; - - &:focus { outline: thin dotted; } - - &:active, - &:hover { outline: 0; } - } - - abbr[title] { border-bottom: 1px dotted; } - - b, - strong { font-weight: bold; } - - dfn { font-style: italic; } - - mark { - background: #ff0; - color: #000; - } - - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - - sup { top: -0.5em; } - - sub { bottom: -0.25em; } - - img { - border: 0; - -ms-interpolation-mode: bicubic; - } - - svg:not(:root) { overflow: hidden; } - - figure { margin: 1em 40px; } - - hr { - border: solid #eee; - border-width: 1px 0 0; - clear: both; - height: 0; - - @include vendor(box-sizing, content-box); - } - - pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; - } - - code, - kbd, - pre, - samp { - font-family: monospace, monospace; - @include font-size($base-font-size); - } - - q { - quotes: none; - - &:before, - &:after { - content: ''; - content: none; - } - } - - form { margin: 0; } - - button, - input, - optgroup, - select, - textarea { - color: inherit; - font: inherit; - margin: 0; - vertical-align: baseline; - } - - button { overflow: visible; } - - button, - select { text-transform: none; } - - button, - html input[type="button"], - input[type="reset"], - input[type="submit"] { - -webkit-appearance: button; - cursor: pointer; - } - - button[disabled], - html input[disabled] { cursor: default; } - - button::-moz-focus-inner, - input::-moz-focus-inner { - border: 0; - padding: 0; - } - - input { - line-height: normal; - - &[type="checkbox"], - &[type="radio"] { - box-sizing: border-box; - padding: 0; - } - - &[type="number"] { - &::-webkit-inner-spin-button, - &::-webkit-outer-spin-button { height: auto; } - } - - &[type="search"] { - -webkit-appearance: textfield; - @include vendor(box-sizing, content-box); - - &::-webkit-search-cancel-button, - &::-webkit-search-decoration { -webkit-appearance: none; } - } - } - - fieldset { margin: 0 2px; } - - legend { - border: 0; - padding: 0; - white-space: normal; - } - - textarea { overflow: auto; } - - optgroup { font-weight: bold; } - - table { - border-collapse: collapse; - border-spacing: 0; - } - - td, - th { padding: 0; } -} \ No newline at end of file diff --git a/scss/generic/_print.scss b/scss/generic/_print.scss deleted file mode 100644 index 88c0646..0000000 --- a/scss/generic/_print.scss +++ /dev/null @@ -1,109 +0,0 @@ -@if $use-print == true { - //------------------------------------// - // $PRINT - //------------------------------------// - @media print { - @page { margin: 0.5cm; } - - * { - background: transparent !important; - color: black !important; - text-shadow: none !important; - - @include vendor(filter, none !important); - - &:before, &:after { - background: transparent !important; - color: black !important; - text-shadow: none !important; - - @include vendor(filter, none !important); - } - } - - body { - background-color: #fff; - color: #000; - font: 0.57em / 1.3 Georgia, "Times New Roman", Times, serif; - } - - img { max-width: 100% !important; } - - .show-print { - display: block; - visibility: visible; - } - - .hide-print, - video, - audio, - object, - embed, - nav, - footer, - a[href^="#"]:after { - display: none; - visibility: hidden; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { page-break-after: avoid; } - - a { - color: #000; - text-decoration: underline; - word-wrap: break-word; - - &:visited { - color: #000; - text-decoration: underline; - word-wrap: break-word; - } - - &[href]:after { - content: " (" attr(href) ")"; - font-size: smaller; - } - } - - q:after { content: " (Source: " attr(cite) ")"; } - - abbr[title]:after { content: " (" attr(title) ")"; } - - a { - &:after, - &[href^="javascript:"]:after, - &[href^="#"]:after { content: ""; } - } - - pre, - blockquote { - border: 1px solid #ededed; - page-break-inside: avoid; - } - - thead { display: table-header-group; } - - tr, - img { page-break-inside: avoid; } - - ul { - list-style: none; - - li { content: "» "; } - } - - .label, - .badge { - border: 1px solid #000; - color: #000; - } - } -} \ No newline at end of file diff --git a/scss/generic/_shared.scss b/scss/generic/_shared.scss deleted file mode 100644 index 5b30f2d..0000000 --- a/scss/generic/_shared.scss +++ /dev/null @@ -1,37 +0,0 @@ -@if $use-shared == true { - //------------------------------------// - // $SHARED - //------------------------------------// - // Declare a common bottom margin for most elements - // to maintain a consistent vertical rhythm. - h1, h2, h3, h4, h5, h6, - .h1, .h2, .h3, .h4, .h5, .h6, - .giga, .mega, .kilo, - hgroup, - ul, ol, dl, - blockquote, p, address, - table, - fieldset, figure, - pre, - .row, - .well { - margin-bottom: $base-spacing-unit; - margin-bottom: ($base-spacing-unit / $base-font-size) * 1rem; - } - - - // Spacing for

tags - hr { - margin-bottom: $base-spacing-unit - 2px; - margin-bottom: (($base-spacing-unit - 2px) / $base-font-size) * 1rem; - } - - - // Left margin for lists - ul, - ol, - dd { - margin-left: 2 * $base-spacing-unit; - margin-left: (2 * $base-spacing-unit / $base-font-size) * 1rem; - } -} \ No newline at end of file diff --git a/scss/objects/_badges.scss b/scss/objects/_badges.scss deleted file mode 100644 index cf45bc5..0000000 --- a/scss/objects/_badges.scss +++ /dev/null @@ -1,53 +0,0 @@ -@if $use-badges == true { - //------------------------------------// - // $BADGES - //------------------------------------// - .label, - .badge { - background-color: #b5b5b5; - color: #fff; - @include font-size(12px); - font-weight: bold; - padding: 3px 7px; - text-align: center; - vertical-align: baseline; - white-space: nowrap; - } - - .label { - border-radius: 4px; - display: inline; - } - - .badge { - border-radius: 10px; - display: inline-block; - padding: 1px 7px; - } - - .label[href] { - &:hover, &:focus { - color: #fff; - cursor: pointer; - text-decoration: none; - } - } - - a.badge { - &:hover, &:focus { - color: #fff; - cursor: pointer; - text-decoration: none; - } - } - - .label a, - .badge a { - color: #fff; - cursor: pointer; - text-decoration: none; - } - - .label:empty, - .badge:empty { display: none; } -} \ No newline at end of file diff --git a/scss/objects/_breadcrumbs.scss b/scss/objects/_breadcrumbs.scss deleted file mode 100644 index 284cf59..0000000 --- a/scss/objects/_breadcrumbs.scss +++ /dev/null @@ -1,35 +0,0 @@ -@if $use-breadcrumbs == true { - //------------------------------------// - // $BREADCRUMBS - //------------------------------------// - .breadcrumbs { - @include font-size(13px); - margin: 12px 0; - padding: 5px 15px 5px 0; - - li { - display: inline; - margin-right: 10px; - - &:last-child { margin-right: 0px; } - - &:after { - content: "/"; - color: #ccc; - padding-left: 12px; - vertical-align: middle; - } - - &:last-child { - color: #999; - - a { color: #999; } - - &:after { content: ""; } - } - } - - .well, - &.well { padding-left: 15px; } - } -} \ No newline at end of file diff --git a/scss/objects/_buttons.scss b/scss/objects/_buttons.scss deleted file mode 100644 index 2ee6cf3..0000000 --- a/scss/objects/_buttons.scss +++ /dev/null @@ -1,287 +0,0 @@ -@if $use-buttons == true { - //------------------------------------// - // $BUTTONS - //------------------------------------// - .btn { - background-color: #ccc; - border: 0; - color: #fff; - cursor: pointer; - display: block; - font-size: 100%; - font-weight: 700; - letter-spacing: 1px; - line-height: 1; - margin: 12px auto; - outline: none; - padding: 15px 48px; - position: relative; - text-align: center; - text-transform: uppercase; - vertical-align: baseline; - white-space: nowrap; - width: 100%; - - -webkit-touch-callout: none; - - @include vendor(user-select, none); - - @include vendor(user-drag, none); - - @include vendor(transition, all 0.3s); - - &::-moz-focus-inner { - padding: 0; - border: 0; - } - - &:after { - content: ""; - position: absolute; - z-index: -1; - } - - &:hover { - background-color: #b5b5b5; - background-image: -webkit-gradient(linear, 50, 50, 50 100%, from(rgba(50, 50, 50, 0.05)), to(rgba(50, 50, 50, 0.05))); - background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05)); - background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05)); - background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05)); - background-image: linear-gradient(to bottom, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05)); - background-repeat: repeat-x; - } - - &:active { - background-image: -webkit-gradient(linear, 50, 50, 50 100%, from(rgba(50, 50, 50, 0.1)), to(rgba(50, 50, 50, 0.1))); - background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1)); - background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1)); - background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1)); - background-image: linear-gradient(to bottom, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1)); - background-repeat: repeat-x; - } - - &[disabled] { - background: #dededc !important; - border: none; - color: #b3b3b1; - cursor: default; - - &:hover, - &:active, - &:focus { - background: #dededc !important; - border: none; - color: #b3b3b1; - cursor: default; - } - } - } - - @include breakpoint(small) { - .btn { - display: inline-block; - *display: inline; - margin: 0px; - width: auto; - zoom: 1; - } - - .btn-extra-small, - a.btn-extra-small, - p.btn-extra-small, - input.btn-extra-small { - @include font-size(11px); - padding: 5px 16px; - } - - .btn-small, - a.btn-small, - p.btn-small, - input.btn-small { - @include font-size(12px); - padding: 10px 32px; - } - - .btn-large, - a.btn-large, - p.btn-large, - input.btn-large { padding: 20px 64px; } - - .btn-extra-large, - a.btn-extra-large, - p.btn-extra-large, - input.btn-extra-large { padding: 25px 80px; } - } - - a.btn { - color: #fff; - text-decoration: none; - - &:hover { - color: #fff; - text-decoration: none; - } - - &:active { outline: 0; } - } - - input[type="submit"].btn { - color: #fff; - height: auto; - } - - button.btn { color: #fff; } - - .btn { - &.bg-white { color: #333; } - - - // Bordered - &.btn-border { - background: transparent; - border-color: #ddd; - border-style: solid; - border-width: 1px; - color: #aaa; - - &:hover { - background: #ddd; - color: #fff !important; - } - - &.white { - border-color: $bg-white; - - &:hover { - background: $bg-white; - color: $color-black !important; - } - } - } - } - - - // Bordered white - a.btn.btn-border.white:hover { - background: $bg-white; - color: $color-black !important; - } - - .btn.btn-border.white, - a.btn.btn-border.white { color: $color-white; } - - .btn.btn-border { - &.white { - &:active, &:focus { background-color: #f9f9f9; } - } - - - // Bordered black - &.black { - border-color: $bg-black; - color: $color-black; - - &:hover { background-color: $bg-black; } - - &:active, &:focus { background-color: $bg-black; } - } - - - // Bordered gray - &.gray { - border-color: $bg-gray; - color: $color-gray; - - &:hover { background-color: $bg-gray; } - - &:active, &:focus { background-color: darken($bg-gray, 15%); } - } - - - // Bordered green - &.green { - border-color: $bg-green; - color: $color-green; - - &:hover { background-color: $bg-green; } - - &:active, &:focus { background-color: darken($bg-green, 15%); } - } - - - // Bordered blue - &.blue { - border-color: $bg-blue; - color: $color-blue; - - &:hover { background-color: $bg-blue; } - - &:active, &:focus { background-color: darken($bg-blue, 15%); } - } - - - // Bordered yellow - &.yellow { - border-color: $bg-yellow; - color: $color-yellow; - - &:hover { background-color: $bg-yellow; } - - &:active, &:focus { background-color: darken($bg-yellow, 15%); } - } - - - // Bordered red - &.red { - border-color: $bg-red; - color: $color-red; - - &:hover { background-color: $bg-red; } - - &:active, &:focus { background-color: darken($bg-red, 15%); } - } - } - - - // Dropdown - .btn.dropdown { - width: 100%; - - .dropdown-menu { - margin-top: auto; - text-align: left; - top: 100%; - width: 100%; - } - - &[class*='dropdown-arrow-'] .dropdown-menu { margin-top: 10px; } - - &.up { - .dropdown-menu { - margin-bottom: 0px; - top: auto; - } - - &[class*='dropdown-arrow-'] .dropdown-menu { margin-bottom: 10px; } - } - } - - @include breakpoint(small) { - .btn-extra-small .caret, - .btn-small .caret { - border-top: 4px solid; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - } - - .btn.dropdown { - width: auto; - - &.extra-small .dropdown-menu { margin-top: 6px; } - - &.dropdown-small .dropdown-menu { margin-top: 11px; } - - &.dropdown-large .dropdown-menu { margin-top: 21px; } - } - } -} \ No newline at end of file diff --git a/scss/objects/_colors.scss b/scss/objects/_colors.scss deleted file mode 100644 index d6afa09..0000000 --- a/scss/objects/_colors.scss +++ /dev/null @@ -1,45 +0,0 @@ -@if $use-colors == true { - //------------------------------------// - // $COLORS - //------------------------------------// - // Background colors - .bg-white { background-color: $bg-white !important; } - - .bg-black { background-color: $bg-black !important; } - - .bg-light-gray { background-color: $bg-light-gray !important; } - - .bg-gray { background-color: $bg-gray !important; } - - .bg-light-green { background-color: $bg-light-green !important; } - - .bg-green { background-color: $bg-green !important; } - - .bg-light-blue { background-color: $bg-light-blue !important; } - - .bg-blue { background-color: $bg-blue !important; } - - .bg-light-yellow { background-color: $bg-light-yellow !important; } - - .bg-yellow { background-color: $bg-yellow !important; } - - .bg-light-red { background-color: $bg-light-red !important; } - - .bg-red { background-color: $bg-red !important; } - - - // Type colors - .color-white { color: $color-white; } - - .color-black { color: $color-black; } - - .color-gray { color: $color-gray; } - - .color-green { color: $color-green; } - - .color-blue { color: $color-blue; } - - .color-yellow { color: $color-yellow; } - - .color-red { color: $color-red; } -} \ No newline at end of file diff --git a/scss/objects/_dropdowns.scss b/scss/objects/_dropdowns.scss deleted file mode 100644 index bb32690..0000000 --- a/scss/objects/_dropdowns.scss +++ /dev/null @@ -1,167 +0,0 @@ -@if $use-dropdowns == true { - //------------------------------------// - // $DROPDOWNS - //------------------------------------// - .dropdown { - cursor: pointer; - outline: none; - position: relative; - width: auto; - - .dropdown-menu { - background-color: #fff; - border: 1px solid #eee; - border-radius: inherit; - font-weight: inherit; - left: 0; - margin-left: 0px; - opacity: 0; - pointer-events: none; - position: absolute; - right: 0; - text-transform: none; - z-index: 99999; - - @include vendor(transition, all 0.3s ease-in); - - a { text-decoration: none; } - - p { - margin: 0; - padding: 10px 15px; - } - - span { line-height: inherit; } - - img { - padding: 15px; - width: 100%; - } - - iframe { - height: auto; - padding: 15px; - width: 100%; - } - - img + p, iframe + p { padding-top: 0px; } - - hr { margin: 10px; } - } - - ul.dropdown-menu { list-style-type: none; } - - .dropdown-menu { - li { - display: block; - padding: 5px 10px; - - @include vendor(transition, all 0.3s ease-out); - } - - - // Rounded corners - &.border-radius li { - &:first-of-type { border-radius: $border-radius $border-radius 0 0; } - - &:last-of-type { border-radius: 0 0 $border-radius $border-radius; } - } - - li:hover { background-color: #f3f8f8; } - } - - &.dropdown-active .dropdown-menu { - opacity: 1; - pointer-events: auto; - } - - .header { - color: #aaa; - cursor: default; - font-size: 14px; - font-size: 0.9rem; - @include font-size(14px); - margin: 12px 0 0; - padding: 0 0 0 9px; - } - } - - @include breakpoint(small) { - .dropdown { - .dropdown-menu { width: 200px; } - - &.dropdown-small .dropdown-menu { width: 150px; } - - &.dropdown-large .dropdown-menu { width: 350px; } - - &.dropdown-full .dropdown-menu { width: 100%; } - } - } - - - // Headers - .dropdown-menu > .header { margin: 0; } - - .dropdown { - .header:hover, - li.header:hover { background: none; } - - .dropdown-menu.border-radius { border-radius: $border-radius; } - - - // Arrows - &[class*='dropdown-arrow-'] .dropdown-menu { - margin-top: 10px; - - &:after { - border-color: #fff transparent; - border-style: solid; - bottom: 100%; - border-width: 0 6px 6px 6px; - content: ""; - height: 0; - position: absolute; - width: 0; - } - - &:before { - border-color: rgba(0, 0, 0, 0.1) transparent; - border-style: solid; - bottom: 100%; - border-width: 0 8px 8px 8px; - content: ""; - height: 0; - position: absolute; - width: 0; - } - } - - &.dropdown-arrow-left .dropdown-menu { - &:after { left: 15px; } - - &:before { left: 13px; } - } - - &.dropdown-arrow-right .dropdown-menu { - &:after { right: 15px; } - - &:before { right: 13px; } - } - - - // Dropup - &.up { - .dropdown-menu { bottom: 100%; } - - &[class*='dropdown-arrow-'] .dropdown-menu { - margin-bottom: 10px; - - &:after, &:before { top: 100%; } - - &:after { border-width: 6px 6px 0 6px; } - - &:before { border-width: 8px 8px 0 8px; } - } - } - } -} \ No newline at end of file diff --git a/scss/objects/_groups.scss b/scss/objects/_groups.scss deleted file mode 100644 index 535a7ca..0000000 --- a/scss/objects/_groups.scss +++ /dev/null @@ -1,102 +0,0 @@ -@if $use-groups == true { - //------------------------------------// - // $GROUPS - //------------------------------------// - .group { - display: inline-block; - vertical-align: bottom; - - &:after { - clear: both; - content: "."; - display: block; - height: 0; - visibility: hidden; - } - } - - .group-item, - p.group-item { - background-color: #fff; - border: 1px solid #ddd; - color: #666; - padding: 4px 7px; - width: auto; - - &.icon { @include font-size(14px); } - } - - @include breakpoint(small) { - .group-item { - @include font-size($base-font-size); - padding: 6px 12px; - } - } - - .group-item { - &:hover { background-color: #f9f9f9; } - - &:active { - @include vendor(box-shadow, inset 0 1px 1px rgba(100, 100, 100, 0.1)); - } - - &.active, - .active { background-color: #f2f2f2; } - } - - .group > .group-item { - border-radius: 0; - float: left; - margin-left: -1px; - } - - - // Full-width - .btn.full { width: 100%; } - - - // Rounded corners - .group.border-radius > .group-item { - &:first-child { border-radius: $border-radius 0 0 $border-radius; } - - &:last-child { border-radius: 0 $border-radius $border-radius 0; } - } - - - // Dropdown - .group-item.dropdown .dropdown-menu { - margin-top: 15px; - text-align: inherit; - width: 100%; - - li a { - @include font-size(12px); - padding: 4px 7px; - width: auto; - } - } - - .group { - &.border-radius .group-item.dropdown { - .dropdown-menu { border-radius: 0px 0px $border-radius $border-radius; } - - &.up .dropdown-menu { border-radius: $border-radius $border-radius 0px 0px; } - } - - - // Caret icon - .caret { - border-top: 4px solid; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - } - } - - @include breakpoint(small) { - .group .caret { - border-top: 5px solid; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - } - } -} \ No newline at end of file diff --git a/scss/objects/_navigation.scss b/scss/objects/_navigation.scss deleted file mode 100644 index 4d5abaa..0000000 --- a/scss/objects/_navigation.scss +++ /dev/null @@ -1,377 +0,0 @@ - @if $use-navigation == true { - //------------------------------------// - // $NAVIGATION - //------------------------------------// - nav { - ul { - list-style: none; - margin: 0; - } - - li { - cursor: pointer; - position: relative; - } - - - // Dropdown - .dropdown li { margin-right: 0px; } - } - - - // Nested dropdown - .nav-dropdown { - ul { - ul { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; - - ul { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; - } - } - - ol ul, - ul ol, - ol ol { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; - } - } - - ol { - ol, - ul { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; - } - - ol { - ol, - ul { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; - } - } - - ul { - ul, - ol { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; - } - } - } - - .list-inline li li, - &.list-inline li li { margin-right: 0px; } - - li li { - background: #fff; - display: block; - } - - ul { - ul ul, - ol ul, - ul ol, - ol ol { display: block; } - } - - ol { - ul ul, - ol ul, - ul ol { display: block; } - } - - ul li:hover { - ul, - ol { - display: block; - opacity: 1; - top: 100%; - visibility: visible; - } - } - - ol li:hover { - ul, - ol { - display: block; - opacity: 1; - top: 100%; - visibility: visible; - } - } - - ul li:hover { - ul ul, - ol ul, - ul ol, - ol ol { - display: none; - opacity: 0; - visibility: hidden; - } - } - - ol li:hover { - ul ul, - ol ul, - ul ol, - ol ol { - display: none; - opacity: 0; - visibility: hidden; - } - } - - ul { - ul li:hover { - ul, - ol { - display: block; - left: 100%; - opacity: 1; - position: absolute; - top: 0; - visibility: visible; - } - } - - ol li:hover { - ol, - ul { - display: block; - left: 100%; - opacity: 1; - position: absolute; - top: 0; - visibility: visible; - } - } - } - - ol { - ul li:hover { - ul, - ol { - display: block; - left: 100%; - opacity: 1; - position: absolute; - top: 0; - visibility: visible; - } - } - - ol li:hover { - ol, - ul { - display: block; - left: 100%; - opacity: 1; - position: absolute; - top: 0; - visibility: visible; - } - } - } - } - - - // Vertical - .nav-vertical { - li { - display: block; - margin-right: 0px; - padding: 10px; - } - - .icon { - line-height: inherit; - margin-right: 7px; - - &.right, &.text-right { margin-right: 0px; } - } - - &.nav-bordered { - border: 1px solid #eee; - - li:hover { background-color: #f6f6f6; } - } - - &.nav-line li:hover { background-color: #f6f6f6; } - - .badge, - .label { margin-top: 5px; } - - .dropdown .dropdown-menu { top: 100%; } - } - - @include breakpoint(small) { - .nav-vertical .dropdown .dropdown-menu { - left: 100%; - top: 0; - } - } - - - // Responsive navigation - .naver { - .naver-handle { - color: inherit; - cursor: pointer; - display: none; - @include font-size(24px); - text-align: right; - text-transform: uppercase; - - @include vendor(user-select, none); - } - - .naver-wrapper { - height: auto; - width: 100%; - } - - &.enabled { - .naver-handle { display: block; } - - .naver-wrapper { - height: 0px; - overflow: hidden; - - li { - display: block; - padding: 8px; - text-align: left; - width: 100%; - - &:hover { background: #f9f9f9; } - } - } - } - } - - .nav-responsive { - &.naver .naver-handle:after { - content: "\f0c9"; - font-family: FontAwesome; - text-align: right; - } - - &.nav-responsive-text.naver { - .naver-handle:after { content: "\00a0 \f0c9"; } - - .naver-container:before { - clear: both; - content: "."; - display: block; - height: 0; - line-height: 0; - text-align: right; - visibility: hidden; - } - } - } - - - // Left-aligned responsive navigation - .nav-responsive-left { - &.naver .naver-handle { - text-align: left; - - &:before { - content: "\f0c9"; - font-family: FontAwesome; - text-align: left; - } - } - - &.nav-responsive-text.naver { - .naver-handle:before { content: "\f0c9 \00a0"; } - - .naver-container:after { - clear: both; - content: "."; - display: block; - height: 0; - line-height: 0; - text-align: left; - visibility: hidden; - } - } - } - - - // Centered responsive navigation - .nav-responsive-center { - &.naver .naver-handle { - text-align: center; - - &:before { - content: "\f0c9"; - font-family: FontAwesome; - text-align: center; - } - } - - &.nav-responsive-text.naver { - .naver-handle:before { content: "\f0c9 \00a0"; } - - .naver-container:after { - clear: both; - content: "."; - display: block; - height: 0; - line-height: 0; - text-align: center; - visibility: hidden; - } - } - } -} \ No newline at end of file diff --git a/scss/objects/_progress.scss b/scss/objects/_progress.scss deleted file mode 100644 index 6f2e207..0000000 --- a/scss/objects/_progress.scss +++ /dev/null @@ -1,102 +0,0 @@ -@if $use-progress == true { - //------------------------------------// - // $PROGRESS - //------------------------------------// - .progress { - background-color: #f9f9f9; - color: #fff; - @include font-size(11px, false); - height: 12px; - line-height: 1.182; - margin: 6px 0; - position: relative; - text-align: center; - width: 100%; - - @include vendor(box-shadow, inset 0 1px 1px rgba(100, 100, 100, 0.1)); - - @include vendor(box-sizing, initial); - } - - .progress-small { - @include font-size(9px, false); - height: 6px; - line-height: 0.875; - } - - .progress-large { - @include font-size($base-font-size, false); - height: 25px; - line-height: 1.7; - } - - .progress { - > span { - background-color: rgb(43, 194, 83); - display: block; - height: 100%; - overflow: hidden; - position: relative; - width: auto; - } - - - // Rounded corners - &.border-radius > span { border-radius: $border-radius; } - - - // Stacked - &.progress-stacked { - > span { - display: inline-block; - float: left; - } - - &.border-radius > span { - border-radius: 0px; - - &:first-of-type { border-radius: $border-radius 0 0 $border-radius; } - - &:last-of-type { border-radius: 0 $border-radius $border-radius 0; } - } - } - } - - - // Striped - .progress-striped { - > span { - &:after, > span { - bottom: 0; - content: ""; - left: 0; - overflow: hidden; - position: absolute; - right: 0; - top: 0; - z-index: 1; - - @include vendor(background-size, 50px 50px); - - background-image: - -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); - background-image: - -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - } - } - - - // Animated - &.progress-animate > span { - &:after, > span { - @include vendor(animation, move 2s linear infinite); - } - } - } - - @-webkit-keyframes move { - 0% { background-position: 0 0; } - - 100% { background-position: 50px 50px; } - } -} \ No newline at end of file diff --git a/scss/objects/_wells.scss b/scss/objects/_wells.scss deleted file mode 100644 index a1f8011..0000000 --- a/scss/objects/_wells.scss +++ /dev/null @@ -1,103 +0,0 @@ -@if $use-wells == true { - //------------------------------------// - // $WELLS - //------------------------------------// - .well { - background-color: #f9f9f9; - border-color: #ededed; - border-style: solid; - border-width: 1px; - margin-bottom: 24px; - padding: 0px 15px; - - h1, h2, h3, h4, h5, h6, - .h1, .h2, .h3, .h4, .h5, .h6, - .giga, .mega, .kilo { color: inherit; } - - p { margin: 10px 0; } - - pre, - .pre.well { - @include font-size(14px); - padding: 10px 15px; - } - } - - .well { - // Headings - header { - h1, h2, h3, h4, h5, h6, - .h1, .h2, .h3, .h4, .h5, .h6, - .giga, .mega, .kilo { margin: 20px 0 10px; } - - .label, - .badge { margin-top: 10px; } - } - - - // Background colors - &[class*='bg-'] { color: #fff; } - - &.bg-white { color: #666; } - - &.bg-black { border-color: #000; } - - &.bg-green { border-color: darken($bg-green, 15%); } - - &.bg-light-green { - border-color: darken($bg-green, 15%); - color: $color-green; - } - - &.bg-blue { border-color: darken($bg-blue, 15%); } - - &.bg-light-blue { - border-color: darken($bg-blue, 15%); - color: $color-blue; - } - - &.bg-yellow { border-color: darken($bg-yellow, 15%); } - - &.bg-light-yellow { - border-color: darken($bg-yellow, 15%); - color: $color-yellow; - } - - &.bg-red { border-color: darken($bg-red, 15%); } - - &.bg-light-red { - border-color: darken($bg-red, 15%); - color: $color-red; - } - } - - - // Close icon - .close { - color: #000; - filter: alpha(opacity = 20); - float: right; - @include font-size(22px); - font-weight: bold; - opacity: .2; - - &:hover, &:focus { - color: #000; - cursor: pointer; - filter: alpha(opacity = 50); - opacity: .5; - text-decoration: none; - - @include vendor(transition, all 0.2s linear); - } - } - - button.close { - background: transparent; - border: 0; - cursor: pointer; - padding: 0; - } - - .well .close { margin-top: 6px; } -} \ No newline at end of file diff --git a/src/_atgrid.scss b/src/_atgrid.scss new file mode 100644 index 0000000..d5ca4fd --- /dev/null +++ b/src/_atgrid.scss @@ -0,0 +1,253 @@ +// +// atGrid.css for Concise CSS - Attribute-based Grid System +// https://github.com/jameskolce/atgrid.css +// MIT License - James Kolce +// ============================================================================= + +@if ($enable-grid) { + [#{$prefix}container] { + margin-left: auto; + margin-right: auto; + max-width: $container-width; + padding-left: $gutter / 2; + padding-right: $gutter / 2; + overflow: auto; + } + + @if($enable-container-solid) { + [#{$prefix}container~="solid"] { + @media(--small) { + max-width: $break-small; + } + @media(--medium) { + max-width: $break-medium; + } + @media(--large) { + max-width: $break-large; + } + @media(--extra-large) { + max-width: $container-width; + } + } + } + + [#{$prefix}grid] { + display: flex; + margin-left: $gutter / -2; + margin-right: $gutter / -2; + flex-direction: column; + + // Collapse columns on breakpoint + @media ($breakpoint) { flex-direction: row; } + } + + [#{$prefix}column] { + flex: 1; + padding-left: $gutter / 2; + padding-right: $gutter / 2; + } + + // + // No Gutters + // + + [#{$prefix}grid~="no-gutters"] { + margin-left: 0; + margin-right: 0; + + > [#{$prefix}column] { + padding-left: 0; + padding-right: 0; + } + } + + // + // No Collapse columns + // + + [#{$prefix}grid~="no-collapse"] { flex-flow: row nowrap; } + + // + // Column wrapping + // + + [#{$prefix}grid~="wrap"] { flex-wrap: wrap; } + [#{$prefix}grid~="no-wrap"] { flex-wrap: nowrap; } + [#{$prefix}grid~="wrap-reverse"] { flex-wrap: wrap-reverse; } + + // + // Direction of columns in a row + // + + [#{$prefix}grid~="row"] { flex-direction: row; } + [#{$prefix}grid~="row-reverse"] { flex-direction: row-reverse; } + [#{$prefix}grid~="column"] { flex-direction: column; } + [#{$prefix}grid~="column-reverse"] { flex-direction: column-reverse; } + + // + // Reorder items above breakpoint + // + + @media ($breakpoint) { + @for $i from 1 through $num-columns { + [#{$prefix}column~="n#{$i}"] { order: #{$i}; } + } + } + + // + // Justify content + // + + [#{$prefix}grid~="justify-start"] { justify-content: flex-start; } + [#{$prefix}grid~="justify-end"] { justify-content: flex-end; } + [#{$prefix}grid~="justify-center"] { justify-content: center; } + [#{$prefix}grid~="justify-between"] { justify-content: space-between; } + [#{$prefix}grid~="justify-around"] { justify-content: space-around; } + + // + // Alignment of all columns in a row + // + + [#{$prefix}grid~="top"] { align-items: flex-start; } + [#{$prefix}grid~="center"] { align-items: center; } + [#{$prefix}grid~="bottom"] { align-items: flex-end; } + [#{$prefix}grid~="baseline"] { align-items: baseline; } + [#{$prefix}grid~="stretch"] { align-items: stretch; } + + // + // Alignment of individual columns + // + + [#{$prefix}column~="top"] { align-self: flex-start; } + [#{$prefix}column~="center"] { align-self: center; } + [#{$prefix}column~="bottom"] { align-self: flex-end; } + + // Create column widths and offsets above the breakpoint + @media ($breakpoint) { + // + // Column widths + // + @for $i from 1 through $num-columns { + [#{$prefix}column~="#{$i}"] { + flex: 0 1 ($i/$num-columns) * 100%; + max-width: ($i/$num-columns) * 100%; + } + } + + // + // Column offsets + // + @for $i from 1 through $num-columns { + [#{$prefix}column~="+#{$i}"] { + margin-left: ($i/$num-columns) * 100%; + } + } + } + + @if ($full-grid) { + @media (--extra-small) { + // + // Column widths + // + @for $i from 1 through $num-columns { + [#{$prefix}column~="xs-#{$i}"] { + flex: 0 1 ($i/$num-columns) * 100%; + max-width: ($i/$num-columns) * 100%; + } + } + + // + // Column offsets + // + @for $i from 1 through $num-columns { + [#{$prefix}column~="+xs-#{$i}"] { + margin-left: ($i/$num-columns) * 100%; + } + } + } + + @media (--small) { + // + // Column widths + // + @for $i from 1 through $num-columns { + [#{$prefix}column~="s-#{$i}"] { + flex: 0 1 ($i/$num-columns) * 100%; + max-width: ($i/$num-columns) * 100%; + } + } + + // + // Column offsets + // + @for $i from 1 through $num-columns { + [#{$prefix}column~="+s-#{$i}"] { + margin-left: ($i/$num-columns) * 100%; + } + } + } + + @media (--medium) { + // + // Column widths + // + @for $i from 1 through $num-columns { + [#{$prefix}column~="m-#{$i}"] { + flex: 0 1 ($i/$num-columns) * 100%; + max-width: ($i/$num-columns) * 100%; + } + } + + // + // Column offsets + // + @for $i from 1 through $num-columns { + [#{$prefix}column~="+m-#{$i}"] { + margin-left: ($i/$num-columns) * 100%; + } + } + } + + @media (--large) { + // + // Column widths + // + @for $i from 1 through $num-columns { + [#{$prefix}column~="l-#{$i}"] { + flex: 0 1 ($i/$num-columns) * 100%; + max-width: ($i/$num-columns) * 100%; + } + } + + // + // Column offsets + // + @for $i from 1 through $num-columns { + [#{$prefix}column~="+l-#{$i}"] { + margin-left: ($i/$num-columns) * 100%; + } + } + } + + @media (--extra-large) { + // + // Column widths + // + @for $i from 1 through $num-columns { + [#{$prefix}column~="xl-#{$i}"] { + flex: 0 1 ($i/$num-columns) * 100%; + max-width: ($i/$num-columns) * 100%; + } + } + + // + // Column offsets + // + @for $i from 1 through $num-columns { + [#{$prefix}column~="+xl-#{$i}"] { + margin-left: ($i/$num-columns) * 100%; + } + } + } + } +} diff --git a/src/_base.scss b/src/_base.scss new file mode 100644 index 0000000..5f6c3bd --- /dev/null +++ b/src/_base.scss @@ -0,0 +1,722 @@ +// +// Base styles +// ============================================================================= +// Based on sanitize.css v4.1.0 with heavy modifications for Concise CSS +// +// TODO: Most of the comments are from sanitize.css. Comments for Concise should be added too. +// +// Contents: +// 1. Display definitions +// 2. Elements of HTML +// 3. Grouping content +// 4. Text-level semantics +// 5. Embedded content +// 6. Links +// 7. Tabular data +// 8. Forms +// 9. WAI-ARIA +// 10. User interaction +// 11. Lobotomized Owl (Margins) + +// +// 1. Display definitions +// -------------------------------------------------- + +// +// Add the correct display in IE 9-. +// 1. Add the correct display in Edge, IE, and Firefox. +// 2. Add the correct display in IE. +// + +article, +aside, +details, // 1 +figcaption, +figure, +footer, +header, +main, // 2 +menu, +nav, +section, +summary { // 1 + display: block; +} + +// +// Add the correct display in IE 9-. +// + +audio, +canvas, +progress, +video { + display: inline-block; +} + +// +// Add the correct display in iOS 4-7. +// + +audio:not([controls]) { + display: none; + height: 0; +} + +// +// Add the correct display in IE 10-. +// 1. Add the correct display in IE. +// + +template, // 1 +[hidden] { + display: none; +} + +// +// 2. Elements of HTML (https://www.w3.org/TR/html5/semantics.html) +// -------------------------------------------------- + +// +// 1. Remove repeating backgrounds in all browsers. +// 2. Add box sizing inheritence in all browsers. +// + +*, +::before, +::after { + background-repeat: no-repeat; // 1 + box-sizing: inherit; // 2 +} + +// +// 1. Add text decoration inheritance in all browsers. +// 2. Add vertical alignment inheritence in all browsers. +// + +::before, +::after { + text-decoration: inherit; // 1 + vertical-align: inherit; // 2 +} + +// +// Root styles +// + +:root { + box-sizing: border-box; + font-family: $font-primary; + line-height: 1.5; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + background-color: getColor(background, body); + color: getColor(text, primary); + font-size: $font-size + px; + text-rendering: optimizeLegibility; + + @media ($breakpoint) { + font-size: $font-size-secondary + px; + } +} + +// +// 3. Grouping content (https://www.w3.org/TR/html5/grouping-content.html) +// -------------------------------------------------- + +// +// 1. Correct font sizing inheritance and scaling in all browsers. +// 2. Correct the odd `em` font sizing in all browsers. +// + +code, +kbd, +pre, +samp { + font-family: $font-mono; // 1 + font-size: typeScale(1); // 2 + background-color: getColor(background, light); +} + +code, +kbd { + vertical-align: middle; + display: inline-block; + padding: 0 0.4em; +} + +pre { + padding: 0.5lh 1em; + + & > code { white-space: pre; } +} + +kbd { + background-color: transparent; + outline: 1px solid getColor(base, lines); +} + +// +// 2. Add visible overflow in Edge and IE. +// + +hr { + background-color: getColor(base, lines); + height: 1px; + overflow: visible; // 2 + border: 0; +} + +// +// Remove the list style on navigation lists in all browsers. +// + +nav { + ol, + ul { padding-left: 0; } + + li { list-style: none; } +} + +// +// Make definition lists bold +// + +dt { font-weight: bold; } + +// +// 4. Text-level semantics +// -------------------------------------------------- + +// +// Make blockquotes prettier +// 1. Adds an em dash in the cite and footer of the quote +// 2. Use the next smaller size in the scale +// + +blockquote { + padding: 0 1em; + + cite, + footer { + color: getColor(text, secondary); + font-size: 100% / $scale-ratio; // 2 + margin-top: 0.5lh; + + &:before { content: "— "; } // 1 + } +} + +// +// 1. Add a bordered underline effect in all browsers. +// 2. Remove text decoration in Firefox 40+. +// 3. Change all letters to uppercase +// 4. Turn on small caps for upper and lowercase letters + +abbr { + font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; // 4 + text-transform: uppercase; // 3 + + &[title] { + border-bottom: 1px solid getColor(base, lines); // 1 + cursor: help; + text-decoration: none; // 2 + } +} + +// +// Prevent the duplicate application of `bolder` by the next rule in Safari 6. +// + +b, +strong { + font-weight: inherit; +} + +// +// Add the correct font weight in Chrome, Edge, and Safari. +// + +b, +strong { + font-weight: bolder; +} + +// +// Add the correct font style in Android 4.3-. +// + +dfn { + font-style: italic; +} + +// +// Add the correct colors in IE 9-. +// + +mark { + background-color: #ffff00; + color: #000000; +} + +// +// Add the correct vertical alignment in Chrome, Firefox, and Opera. +// + +progress { + vertical-align: baseline; +} + +// +// Correct the font size in all browsers. +// + +small { + // Use the next smaller size in the scale + font-size: 100% / $scale-ratio; +} + +// +// Change the positioning on superscript and subscript elements +// in all browsers. +// 1. Use the next smaller size in the scale +// 2. Enables display of subscript variants +// 3. Enables display of superscript variants +// 4. Adjust position +// + +sub, +sup { + line-height: 0; + position: relative; + vertical-align: baseline; + font-size: 100% / $scale-ratio; // 1 +} + +sub { + bottom: -0.25em; // 4 + font-feature-settings: "subs" 1; // 2 +} + +sup { + top: -0.25em; // 4 + font-feature-settings: "sups" 1; // 3 +} + +// +// 1. Remove the text shadow on text selections. +// 2. Customize the background color on text selections. +// + +::-moz-selection { + background-color: getColor(base, selection); // 2 + text-shadow: none; // 1 +} + +::selection { + background-color: getColor(base, selection); // 2 + text-shadow: none; // 1 +} + +// +// 5. Embedded content (https://www.w3.org/TR/html5/embedded-content-0.html) +// -------------------------------------------------- + +// +// Change the alignment on media elements in all browers. +// + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + +// +// Remove the border on images inside links in IE 10-. +// + +img { + border-style: none; +} + +// +// Change the fill color to match the text color in all browsers. +// + +svg { + fill: currentColor; +} + +// +// Hide the overflow in IE. +// + +svg:not(:root) { + overflow: hidden; +} + +// +// 6. Links (https://www.w3.org/TR/html5/links.html#links) +// -------------------------------------------------- + +// +// 1. Remove the gray background on active links in IE 10. +// 2. Remove the gaps in underlines in iOS 8+ and Safari 8+. +// 3. Add transition by default +// + +a { + background-color: transparent; // 1 + -webkit-text-decoration-skip: objects; // 2 + color: getColor(base, primary); + text-decoration: none; + transition-duration: $transition-duration; // 3 + + &:hover, + &:focus { color: darken(getColor(base, primary), 20%); } +} + +// +// Remove the outline when hovering in all browsers. +// + +a:hover { + outline-width: 0; +} + +// +// 7. Tabular data (https://www.w3.org/TR/html5/tabular-data.html) +// -------------------------------------------------- + +// +// Remove border spacing in all browsers. +// + +table { + border-collapse: collapse; + border-spacing: 0; +} + +// +// 8. Forms: (https://www.w3.org/TR/html5/forms.html) +// -------------------------------------------------- + +// +// 1. Remove the default styling in all browsers. +// + +input, +select, +textarea { + background-color: transparent; // 1 + border-style: none; // 1 + color: inherit; // 1 + font: inherit; + + &:focus { outline: 2px solid getColor(blue, base); } +} + +// +// Correct the overflow in IE. +// 1. Correct the overflow in Edge. +// + +button, +input { // 1 + overflow: visible; +} + +// +// Remove the inheritance in Edge, Firefox, and IE. +// 1. Remove the inheritance in Firefox. +// + +button, +select { // 1 + text-transform: none; +} + +// +// 1. Prevent the WebKit bug where (2) destroys native `audio` and `video` +// controls in Android 4. +// 2. Correct the inability to style clickable types in iOS and Safari. +// + +button, +html [type="button"], // 1 +[type="reset"], +[type="submit"] { + -webkit-appearance: button; // 2 + font: inherit; +} + +// +// Remove the inner border and padding in Firefox. +// + +::-moz-focus-inner { + border-style: none; + padding: 0; +} + +// +// Correct the focus styles unset by the previous rule. +// + +:-moz-focusring { + outline: 1px dotted ButtonText; +} + +// +// Correct the border and padding in all browsers. +// + +fieldset { + border: 1px solid getColor(base, lines); + padding: 1lh 1em; +} + +// +// 1. Correct the text wrapping in Edge and IE. +// + +legend { + display: table; // 1 + max-width: 100%; // 1 + white-space: normal; // 1 + padding: 0 0.5em; +} + +// +// 1. Remove the vertical scrollbar in IE. +// 2. Change the resize direction on textareas in all browsers. +// + +textarea { + overflow: auto; // 1 + resize: vertical; // 2 + height: auto; + padding: 0.25lh 0.5em; +} + +// +// Remove the padding in IE 10-. +// + +[type="checkbox"], +[type="radio"] { + padding: 0; +} + +// +// Correct the cursor style on increment and decrement buttons in Chrome. +// + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +// +// 1. Correct the odd appearance in Chrome and Safari. +// 2. Correct the outline style in Safari. +// + +[type="search"] { + -webkit-appearance: textfield; // 1 + outline-offset: -2px; // 2 +} + +// +// Remove the inner padding and cancel buttons in Chrome and Safari for OS X. +// + +::-webkit-search-cancel-button, +::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// Correct the text style on placeholders in Chrome, Edge, and Safari. +// + +::-webkit-input-placeholder { + color: inherit; + opacity: .54; +} + +// +// 1. Correct the inability to style clickable types in iOS and Safari. +// 2. Change font properties to `inherit` in Safari. +// + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +// +// Make the range input flat using the Concise settings +// + +input[type="range"] { + border: none; + padding: 0; + width: 100%; + -webkit-appearance: none; + + &:focus { outline: none; } + + &::range-track { + background-color: getColor(base, lines); + border: none; + height: 0.2lh; + } + + &::range-thumb { + border: none; + border-radius: 50%; + background-color: getColor(base, primary); + height: 0.5lh; + margin-top: -0.15lh; + width: 0.5lh; + } + + &::-webkit-slider-thumb { -webkit-appearance: none; } +} + +// +// Make the buttons flat +// + +button { + background-color: getColor(base, primary); + border: none; + color: getColor(text, inverted); + cursor: pointer; + font-size: typeScale(1); + line-height: 1.5lh; + padding: 0 1.5em; + transition: background-color $transition-duration; + white-space: nowrap; + + &:hover, + &:focus { + background-color: lighten(getColor(base, primary), 5%); + text-decoration: none; + outline: none; + } + + &:active { background-color: lighten(getColor(base, primary), 10%); } + + &[disabled] { + background-color: getColor(state, muted); + color: getColor(text, inverted); + cursor: not-allowed; + } +} + +// Make the submit inputs and buttons look the same +input[type="submit"] { @extend button; } + +// +// 9. WAI-ARIA (https://www.w3.org/TR/html5/dom.html#wai-aria) +// -------------------------------------------------- + +// +// Change the cursor on busy elements. +// + +[aria-busy="true"] { + cursor: progress; +} + +// +// Change the cursor on control elements. +// + +[aria-controls] { + cursor: pointer; +} + +// +// Change the cursor on disabled, not-editable, or otherwise +// inoperable elements. +// + +[aria-disabled] { + cursor: default; +} + +// +// 10. User interaction (https://www.w3.org/TR/html5/editing.html) +// -------------------------------------------------- + +// +// Remove the tapping delay on clickable elements. +// 1. Remove the tapping delay in IE 10. +// + +a, +area, +button, +input, +label, +select, +textarea, +[tabindex] { + -ms-touch-action: manipulation; // 1 + touch-action: manipulation; +} + +// +// Change the display on visually hidden accessible elements. +// + +[hidden][aria-hidden="false"] { + clip: rect(0, 0, 0, 0); + display: inherit; + position: absolute; +} + +[hidden][aria-hidden="false"]:focus { + clip: auto; +} + +// +// 11. Automatic margins a.k.a Lobotomized Owl +// -------------------------------------------------- + +@if $automargin { + * { margin: 0; } + + // A margin top is added to all the elements except the first one in each nesting level + * + * { margin-top: $block-margin; } + + // These elements shouldn’t get a margin + li, + kbd, + div, + input, + option, + select, + a, + textarea, + body, + main, + span, + dd, + code, + label, + br + [#{$prefix}column]{ margin-top: 0; } + + // First paragraphs below a heading shouldn’t get a margin + h1, h2, h3, h4, h5, h6 { + & + p { margin-top: 0; } + } +} diff --git a/src/_forms.scss b/src/_forms.scss new file mode 100644 index 0000000..1231108 --- /dev/null +++ b/src/_forms.scss @@ -0,0 +1,80 @@ +// +// Forms +// ============================================================================= + +input:not([type="submit"]), +select, +textarea { + width: 100%; + font-size: typeScale(1); + min-height: 1.5lh; + + &[disabled] { + background-color: getColor(state, muted); + cursor: not-allowed; + border: 0; + } +} + +input:not([type="submit"]):not([type="range"]), +select, +textarea { + border: 1px solid getColor(base, lines); + padding: 0 0.75em; +} + +input[type="checkbox"], +input[type="file"], +input[type="image"], +input[type="radio"] { + height: auto; + width: auto; +} + +input[type="checkbox"], +input[type="radio"] { + line-height: normal; + padding: 0; + vertical-align: middle; +} + +input[type="file"] { + border: none; + line-height: 1lh; + padding: 0; +} + +select { + background-color: transparent; + padding-left: 0.5em; + width: auto; + min-width: 10em; + height: 1.5lh; + + &[disabled] { color: getColor(text, secondary); } + + &[multiple] { + height: auto; + width: 100%; + padding: 0; + } + + &::-ms-expand { display: none; } + + &::-ms-value { color: currentColor; } + + option { padding: 0 0.75em } +} + +label { + display: block; + font-size: typeScale(1); + line-height: 1.5lh; +} + +// Labels are inline with their checkbox and radio elements +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline-block; + margin-left: 0.5em; +} \ No newline at end of file diff --git a/src/_headings.scss b/src/_headings.scss new file mode 100644 index 0000000..b820b36 --- /dev/null +++ b/src/_headings.scss @@ -0,0 +1,40 @@ +// +// Headings +// ============================================================================= + +h1 { font-size: typeScale(6); } +h2 { font-size: typeScale(5); } +h3 { font-size: typeScale(4); } +h4 { font-size: typeScale(3); } +h5 { font-size: typeScale(2); } +h6 { font-size: typeScale(1); } + +h1, h2, h3, h4, h5, h6 { + color: getColor(text, heading); + font-family: $font-secondary; + line-height: 1.3; + + small { + color: inherit; + vertical-align: 0; + + // Use the next smaller size in the scale + font-size: 100% / $scale-ratio; + } +} + +h1, h2, h3 { + margin: 0.5lh 0 0.25lh; + + a { + color: inherit; + + &:hover, + &:focus { + color: getColor(base, primary); + text-decoration: none; + } + } +} + +h4, h5, h6 { margin: 0.25lh 0; } diff --git a/src/_lists.scss b/src/_lists.scss new file mode 100644 index 0000000..7091338 --- /dev/null +++ b/src/_lists.scss @@ -0,0 +1,28 @@ +// +// Lists +// ============================================================================= + +ul, +ol { + padding-left: 1em; + + ol, + ul { + padding-left: 1.5em; + } +} + +ol { + padding-left: 0; + counter-reset: item; + + li { + list-style: none; + } + + li:before { + content: counters(item, ".") ". "; + counter-increment: item; + margin-right: 0.2em; + } +} diff --git a/src/_print.scss b/src/_print.scss new file mode 100644 index 0000000..a24a3a9 --- /dev/null +++ b/src/_print.scss @@ -0,0 +1,116 @@ +// +// Print +// ============================================================================= + +@media print { + @page { margin: 2cm; } + + *, + *:before, + *:after { + background: transparent !important; + color: black !important; + filter: none !important; + text-shadow: none !important; + } + + :root { + background-color: white; + color: black; + font: 12pt / 1.4 $font-print-primary; + } + + body { + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + } + + h1, h2, h3, h4, h5, h6 { + page-break-after: avoid; + font-family: $font-print-secondary; + } + + h1 { font-size: 19pt; } + h2 { font-size: 17pt; } + h3 { font-size: 15pt; } + h4, h5, h6 {font-size: 14pt; } + + img { + max-width: 100% !important; + page-break-after: avoid; + page-break-inside: avoid; + } + + video, + audio, + object, + embed, + nav, + footer, + a[href^="#"]:after { + display: none; + visibility: hidden; + } + + p, + h2, h3 { + orphans: 3; + widows: 3; + } + + a, + a:visited { + color: black; + font-size: .57em; + text-decoration: underline; + word-wrap: break-word; + + &[href]:after { + content: " (" attr(href) ")"; + font-size: smaller; + } + } + + q:after { content: " (Source: " attr(cite) ")"; } + + abbr[title]:after { content: " (" attr(title) ")"; } + + a { + &:after, + &[href^="javascript:"]:after, + &[href^="#"]:after { content: ""; } + } + + pre, + code { + background-color: transparent; + border: 1px solid getColor(base, lines); + page-break-inside: avoid; + } + + blockquote { + border: none; + page-break-inside: avoid; + } + + thead { display: table-header-group; } + + tr, + img { page-break-inside: avoid; } + + ol { padding-left: 1.25em; } + + ul { + padding-left: 0; + list-style: none; + + ul, + ul ul { padding-left: 1.5em; } + } + + ul, + ol { + li { content: "» "; } + } +} diff --git a/src/_tables.scss b/src/_tables.scss new file mode 100644 index 0000000..9880469 --- /dev/null +++ b/src/_tables.scss @@ -0,0 +1,31 @@ +// +// Tables +// ============================================================================= + +table { + width: 100%; + + @media ($breakpoint) { + width: auto; + } + + thead, + tfoot { + background-color: getColor(background, light); + text-align: left; + } + + th, + td { + line-height: 1.5lh; + overflow: visible; + padding: 0 1em; + } + + caption { + font-size: typeScale(1); + font-style: italic; + line-height: 2lh; + text-align: center; + } +} diff --git a/test.html b/test.html new file mode 100644 index 0000000..128e308 --- /dev/null +++ b/test.html @@ -0,0 +1,426 @@ + + + + + + + + Concise CSS + + + + + +

Heading 1 Helper link

Heading 2 Helper text

Heading 3 Helper text

Heading 4 Helper text

Heading 5 Helper text

Heading 6 Helper text

+ +

Heading 2 Link Helper text

+ + + +

Lorem ipsum dolor sit amet sadipscing elitr sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna small aliquyam erat, sed diam voluptua. At vero eos et ~~accusam~~ et justo duo ^dolores et ea rebum. Stet₂ clita² kasd gubergren, no sea takimata sanctus est Lorem _ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+ +

+
This is a blockquote.
+ +
John Doe
+

+ +

.class {
+    background-color: #ccc;
+}

+ +

List Item
List Item
List Item
List Item +
- List Item
- List Item
- List Item +
  - List Item
  - List Item
  - List Item
  +
+
List Item

+ +

List Item
List Item
List Item +
1. List Item
2. List Item
3. List Item +
  1. List Item
  2. List Item
  3. List Item
  +
+
List Item
List Item
List Item

+ +

Definition: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
List: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+ +

+ 12 +

+ +

+ 1 +

+ +

+ 11 +

+ +

+ 2 +

+ +

+ 10 +

+ +

+ 3 +

+ +

+ 9 +

+ +

+ 4 +

+ +

+ 8 +

+ +

+ 5 +

+ +

+ 7 +

+ +

+ 6 +

+ +

+ 6 +

+ +

+ 4 +

+ +

+ 4 +

+ +

+ 4 +

+ +

+ 3 +

+ +

+ 3 +

+ +

+ 3 +

+ +

+ 3 +

+ +

+ 2 +

+ +

+ 2 +

+ +

+ 2 +

+ +

+ 2 +

+ +

+ 2 +

+ +

+ 2 +

+ +

+ 1 +1 +

+ +

+ 1 +2 +

+ +

+ 1 +3 +

+ +

+ xs-1 sm-2 md-3 lg-4 xl-5 +

+ +

+ 1 +xs-1 +sm-2 +md-3 +lg-4 +xl-5 +

+ +

+ 1st +

+ +

+ 2nd +

+ +

+ 3rd +

+ +

+ 4th +

+ +

+ 5th +

+ +

+ 6th +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

#	First Name	Last Name
Total Users:	2
1	John	Doe
2	Jane	Doe

+ + + + + +