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 c7af037..42dd2d0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,15 +1,15 @@ -# Files to ignore -*.html -koala-config.json +# Folders to ignore +__MACOSX/ -# Directories to ignore -/add-ons -/fonts -/less -/stylus +# Files to ignore +.DS_Store # Dependencies /node_modules # Sass cache -/.sass-cache \ No newline at end of file +/.sass-cache + +# Log files +*.log +*.log.* diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index eec5ee3..dd7432b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,7 +12,7 @@ Sound good? **Let's move on...** 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. +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?** @@ -22,7 +22,7 @@ Ideally, we would like to keep it to just one tag for Concise questions, but we **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** @@ -30,22 +30,64 @@ There are lots of different things that people will want to post regarding the C - 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. +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. -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 -# Contributing +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 [feature branch](http://nvie.com/posts/a-successful-git-branching-model/) (`git checkout -b my-feature`) +2. Create a new branch (feature, release, hotfix, etc) (`git checkout -b my-feature`) 3. Follow the [coding style guide](#coding-style-guide) -3. Test any and all changes you make or implement. -4. Commit changes (`git commit -am `My new feature`) -5. Push to your feature branch (`git push origin my-feature) -6. Create a new [Pull Request](https://help.github.com/articles/creating-a-pull-request) -7. Wait for a response from us (we promise to be semi-prompt) +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 @@ -53,6 +95,10 @@ If you are unsure of whether or not your feature would be a good fit for the fra 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) @@ -61,12 +107,6 @@ Consistency is great, especially when writing code. Here we have a few simple gu [Follow @mdo's Code Guide](http://codeguide.co/#css) -## JavaScript - -- Avoid adding if at all possible -- No tabs, use two spaces -- Proper indentation - # 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/Gulpfile.js b/Gulpfile.js deleted file mode 100644 index 524d6db..0000000 --- a/Gulpfile.js +++ /dev/null @@ -1,168 +0,0 @@ -/** - * Gulpfile.js - Concise builder - * - * (c) 2014 Contributors. - * Released under the MIT license. - */ - - -'use strict'; - - -/** - * Dependencies - */ - -var gulp = require('gulp'); -var $ = require('gulp-load-plugins')(); -var browserSync = require('browser-sync'); -var reload = browserSync.reload; - - -/** - * Constants - */ - -var AUTOPREFIXER_BROWSERS = [ - 'chrome >= 30', - 'ie >= 8', - 'ff >= 24', - 'safari >= 6', - 'opera >= 12', - 'ios >= 6', - 'android 2.3', - 'android >= 4', - 'ie_mob >= 9' -]; - -var BANNER = [ - '/*!', - ' * <%= pkg.name %> v<%= pkg.version %>', - ' * <%= pkg.homepage %>', - ' *', - ' * Copyright <%= date %> Contributors', - ' * Released under the <%= pkg.license.type %> license', - ' * <%= pkg.license.url %>', - ' */', - '' -].join('\n'); -var pkg = require('./package'); -var BANNER_SETTINGS = { pkg: pkg, date: new Date().getFullYear() }; - - -/** - * Distribute SCSS and JS files - */ - -// CSS -gulp.task('dist:css', function () { - return gulp.src('scss/concise.scss') - .pipe($.rubySass({ - style: 'expanded', - precision: 10, // I don't know what it means; taken from web-starter-kit :D - loadPath: ['scss'] - })) - .on('error', function (e) { console.error(e.message) }) - .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) - .pipe($.header(BANNER, BANNER_SETTINGS)) - .pipe(reload({ stream: true })) - .pipe(gulp.dest('dist/css')) - .pipe($.size({ title: 'dist:css' })) -}); - -// JS -gulp.task('dist:js', function () { - return gulp.src('js/*.js') // Set array of files in the order you need - .pipe($.concat('concise.js')) - .pipe($.header(BANNER, BANNER_SETTINGS)) - .pipe(reload({ stream: true })) - .pipe(gulp.dest('dist/js')) - .pipe($.size({ title: 'dist:js' })) -}); - -gulp.task('dist', ['dist:css', 'dist:js']); - - -/** - * Minify - */ - -// CSS -gulp.task('minify:css', function () { - return gulp.src('dist/css/concise.css') - .pipe($.csso()) - .pipe($.header(BANNER, BANNER_SETTINGS)) - .pipe($.rename({ suffix: '.min' })) - .pipe(gulp.dest('dist/css')) - .pipe($.size({ title: 'dist:min:css' })) -}); - -// JS -gulp.task('minify:js', function () { - return gulp.src('dist/js/concise.js') - .pipe($.uglify()) - .pipe($.rename({ suffix: '.min' })) - .pipe(gulp.dest('dist/js')) - .pipe($.size({ title: 'dist:min:js' })) -}); - -gulp.task('minify', ['minify:css', 'minify:js']); - - -/** - * Linting - */ - -// JS -gulp.task('lint:js', function () { - return gulp.src('js/*.js') - .pipe($.cached('lint')) - .pipe($.jshint()) - .pipe($.jshint.reporter('jshint-stylish')) - .pipe($.jshint.reporter('fail')) -}); - -gulp.task('lint', ['lint:js']); - - -/** - * Check JS style - */ - -gulp.task('jscs', function () { - return gulp.src('js/*.js') - .pipe($.cached('jscs')) - .pipe($.jscs()) -}); - - -/** - * Watch for changes - */ - -gulp.task('watch', function () { - gulp.watch('scss/**/*.scss', ['dist:css']); - gulp.watch('js/**/*.js', ['lint:js', 'jscs', 'dist:js']); -}); - - -/** - * Serve - * Creating autoreload page - */ - -gulp.task('serve', ['watch'], function () { - browserSync({ - notify: false, - server: { - baseDir: './' - } - }); -}); - - -/** - * Default - */ - -gulp.task('default', ['lint', 'jscs', 'dist', 'minify']); 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 192c3d3..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) [![Bower version](https://badge.fury.io/bo/concise.svg)](http://badge.fury.io/bo/concise) +[![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) -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 a high level of customization. +Concise CSS is a lightweight CSS framework that provides a number of great features without the bloat. -## Quickstart +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. -It's easy to get started with 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. -- [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` -- Install the [gem](https://github.com/ConciseCSS/concise.css-gem): `$ gem install concisecss` +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. -After you download or install the package, [read our quickstart guide](http://concisecss.com/get-started/getting-started.php) to get up and running. +## Installation -## Documentation +There are 4 different options to install Concise CSS in your website, although the recommended way is to use NPM. -What would a project be without great 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. +### Using our CDN -Check out our documentation here: [http://concisecss.com/documentation](http://concisecss.com/documentation) +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 @@ -51,42 +138,17 @@ There are lots of different things that people will want to post regarding the C ## Contributing -If you wish to contribute to the Concise project, please read through our [contributing guidelines](https://github.com/ConciseCSS/concise.css/blob/master/CONTRIBUTING.md) first. This will ensure that you are posting things in the proper areas, and that you are following our coding standards. - -Are you interested in contributing monetarily to the project? If so, check out our [Gittip page](https://www.gittip.com/keenanpayne/). All tips that we receive from Gittip will go straight to maintaining and building upon Concise. - -## 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/). - -- [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 Concise is currently maintained under the [Semantic Versioning guidelines](http://semver.org/). -## Acknowledgments - -- Inspiration for some of the features in Concise came from [Harry Roberts'](http://csswizardry.com/) own front-end framework, [inuitcss](https://github.com/csswizardry/inuit.css). -- Jonathan Snook's book on [Scalable and Modular CSS](https://smacss.com/) (SMACSS) is a great read and offered insight into writing modular CSS, which helped in the development of Concise. - -## Creator - -**Keenan Payne** -- [Website](http://keenanpayne.com) -- [GitHub](http://github.com/keenanpayne) -- [Twitter](http://twitter.com/keenan_payne) - ## Elsewhere [![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) ## License 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/). - -[![githalytics.com alpha](https://cruel-carlota.pagodabox.com/47ac30b8ba5ef2abdcef2f2f855c5f7c "githalytics.com")](http://githalytics.com/ConciseCSS/concise.css) 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 7299a6e..7f41523 100644 --- a/bower.json +++ b/bower.json @@ -1,16 +1,16 @@ { "name": "concise", - "description": "A lightweight front-end framework that provides functionality without the bloat.", - "version": "1.1.0", + "description": "A front-end framework written in SASS that's lightweight, and easy-to-use.", + "version": "4.0.1", "ignore": [ ".gitignore", - "LICENSE", + ".editorconfig", "README.md", - "package.json" + "LICENSE", + "node_modules" ], "keywords": [ "css", - "js", "scss", "sass", "mobile-first", @@ -21,7 +21,6 @@ ], "homepage": "http://concisecss.com", "main": [ - "dist/css/concise.css", - "dist/js/concise.js" + "dist/concise.css" ] } diff --git a/composer.json b/composer.json index 07a881f..77fb9be 100644 --- a/composer.json +++ b/composer.json @@ -3,7 +3,6 @@ "description": "A lightweight front-end framework that provides functionality without the bloat.", "keywords": [ "css", - "js", "sass", "scss", "mobile-first", @@ -16,7 +15,13 @@ "authors": [ { "name": "Keenan Payne", - "email": "contact@keenanpayne.com" + "email": "contact@keenanpayne.com", + "homepage": "http://keenanpayne.com" + }, + { + "name": "James Kolce", + "email": "contact@jameskolce.com", + "homepage": "http://jameskolce.com" } ], "support": { 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 8b6ed38..0000000 --- a/dist/css/concise.css +++ /dev/null @@ -1,2690 +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.375%; - content: 0%; - } - - .gutters .column-2 { - width: 10.75%; - content: 2%; - } - - .gutters .column-3 { - width: 17.125%; - content: 4%; - } - - .gutters .column-4 { - width: 23.5%; - content: 6%; - } - - .gutters .column-5 { - width: 29.875%; - content: 8%; - } - - .gutters .column-6 { - width: 36.25%; - content: 10%; - } - - .gutters .column-7 { - width: 42.625%; - content: 12%; - } - - .gutters .column-8 { - width: 49%; - content: 14%; - } - - .gutters .column-9 { - width: 55.375%; - content: 16%; - } - - .gutters .column-10 { - width: 61.75%; - content: 18%; - } - - .gutters .column-11 { - width: 68.125%; - content: 20%; - } - - .gutters .column-12 { - width: 74.5%; - content: 22%; - } - - .gutters .column-13 { - width: 80.875%; - content: 24%; - } - - .gutters .column-14 { - width: 87.25%; - content: 26%; - } - - .gutters .column-15 { - width: 93.625%; - content: 28%; - } - - .gutters .column-16 { - width: 100%; - content: 30%; - } -} -.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 dd7a210..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.375%;content:0%}.gutters .column-2{width:10.75%;content:2%}.gutters .column-3{width:17.125%;content:4%}.gutters .column-4{width:23.5%;content:6%}.gutters .column-5{width:29.875%;content:8%}.gutters .column-6{width:36.25%;content:10%}.gutters .column-7{width:42.625%;content:12%}.gutters .column-8{width:49%;content:14%}.gutters .column-9{width:55.375%;content:16%}.gutters .column-10{width:61.75%;content:18%}.gutters .column-11{width:68.125%;content:20%}.gutters .column-12{width:74.5%;content:22%}.gutters .column-13{width:80.875%;content:24%}.gutters .column-14{width:87.25%;content:26%}.gutters .column-15{width:93.625%;content:28%}.gutters .column-16{width:100%;content:30%}}.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 e359a78..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 d313cbf..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 83dc9e6..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 446f501..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 eebc81e..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 70d34a1..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 index 62b5e06..4eec325 100644 --- a/package.json +++ b/package.json @@ -1,33 +1,47 @@ { - "name": "Concise.css", - "version": "2.0.0", + "name": "concise.css", + "version": "4.1.2", "description": "A lightweight front-end framework that provides functionality without the bloat.", - "keywords": [ "css", "js", "scss", "sass", "mobile-first", "responsive", "front-end", "framework", "web" ], - "license": { - "type": "MIT", - "url": "https://github.com/conciseCSS/concise.css/blob/master/LICENSE" - }, + "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": "git://github.com/conciseCSS/concise.css.git" + "url": "https://github.com/ConciseCSS/concise.css" + }, + "engines": { + "node": ">=6.0.0" }, - "bugs": "https://github.com/conciseCSS/concise.css/issues", - "homepage": "https://github.com/conciseCSS/concise.css", "devDependencies": { - "browser-sync": "^1.3.0", - "jshint-stylish": "^0.4.0", - "gulp": "^3.8.6", - "gulp-load-plugins": "~0.5.3", - "gulp-rename": "^1.2.0", - "gulp-size": "^1.0.0", - "gulp-cached": "~1.0.1", - "gulp-concat": "^2.3.4", - "gulp-header": "~1.0.5", - "gulp-ruby-sass": "^0.7.1", - "gulp-autoprefixer": "^0.0.8", - "gulp-csso": "^0.2.9", - "gulp-jshint": "^1.8.0", - "gulp-jscs": "^1.0.0", - "gulp-uglify": "~0.3.1" + "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" } -} \ No newline at end of file +} diff --git a/scss/_defaults.scss b/scss/_defaults.scss deleted file mode 100644 index f0a42ac..0000000 --- a/scss/_defaults.scss +++ /dev/null @@ -1,187 +0,0 @@ -// Thanks to inuitcss (https://github.com/csswizardry/inuit.css/blob/master/_defaults.scss) -// for the inspiration to create a default file for variables - - - - -//------------------------------------ -// 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` -// -// Thanks to inuitcss (https://github.com/csswizardry/inuit.css/blob/master/_defaults.scss) -// for the idea to use feature switches in a framework. It's an absolutely brilliant idea -// that makes customization so much easier. - - -// 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-table-styles: true !default; -$use-forms: true !default; - $use-form-styles: true !default; -$use-grid: true !default; - $use-push: false !default; - $use-pull: false !default; - - -// Objects -$use-type-colors: true !default; -$use-bg-colors: true !default; -$use-buttons: true !default; -$use-groups: true !default; -$use-dropdowns: true !default; -$use-navigation: true !default; - $use-responsive-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 df68e63..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 0c231d5..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 3449d62..0000000 --- a/scss/base/_forms.scss +++ /dev/null @@ -1,127 +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; - } - } - - - @if $use-form-styles == true { - // 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 6e37607..0000000 --- a/scss/base/_grid.scss +++ /dev/null @@ -1,71 +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 - - // Thanks to inuitcss (https://github.com/csswizardry/inuit.css) for the idea to - // abstract 'push' and 'pull' into their own mixins. This makes adding/removing - // them to projects absolutely painless. - @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; } - } -} diff --git a/scss/base/_headings.scss b/scss/base/_headings.scss deleted file mode 100644 index 5051ed6..0000000 --- a/scss/base/_headings.scss +++ /dev/null @@ -1,158 +0,0 @@ -@if $use-headings == true { - //------------------------------------ - // HEADINGS - //------------------------------------ - - // Thanks to Harry Roberts' article on pragmatic - // font sizing (http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/) - 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); - } - } -} diff --git a/scss/base/_lists.scss b/scss/base/_lists.scss deleted file mode 100644 index db201bc..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 bf25e52..0000000 --- a/scss/base/_main.scss +++ /dev/null @@ -1,32 +0,0 @@ -@if $use-main == true { - //------------------------------------ - // MAIN - //------------------------------------ - - // Variables - $font-size: #{($base-font-size/16px)*1em}; - $line-height-integer: #{$line-height-ratio}; - - *{ - &, - &:before, - &:after { - @include vendor(box-sizing, border-box); - } - } - - html, - body { - background-color: #fff; - color: $base-font-color; - font: normal normal $font-size/$line-height-integer $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 1f4260c..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 b69c255..0000000 --- a/scss/base/_tables.scss +++ /dev/null @@ -1,85 +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; - } - } - - - @if $use-table-styles == true { - // 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 945a80c..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 95b1a93..0000000 --- a/scss/concise.scss +++ /dev/null @@ -1,60 +0,0 @@ -/** - * # Concise.CSS - * http://github.com/ConciseCSS/concise.css - * - * - * Copyright 2014 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - - - -//------------------------------------ -// 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"; \ No newline at end of file diff --git a/scss/generic/_clearfix.scss b/scss/generic/_clearfix.scss deleted file mode 100644 index 7b6fb06..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 78c2425..0000000 --- a/scss/generic/_conditional.scss +++ /dev/null @@ -1,126 +0,0 @@ -@if $use-conditional == true { - //------------------------------------ - // CONDITIONAL - //------------------------------------ - - // Thanks to Bootstrap for having a good method of - // showing/hiding content via breakpoints - // (http://getbootstrap.com/css/#responsive-utilities) - .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; - } - } -} diff --git a/scss/generic/_helper.scss b/scss/generic/_helper.scss deleted file mode 100644 index f2e415e..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 536f035..0000000 --- a/scss/generic/_mixins.scss +++ /dev/null @@ -1,157 +0,0 @@ -//------------------------------------ -// FUNCTIONS -//------------------------------------ - -// -// Calculates proper rem font-size given -// a pixel amount. -// -@function calculate-rem($font-size) { - $rem-size: ($font-size / $base-font-size) * 1rem; - @return $rem-size; -} - - -// -// Calculates proper line-height given a -// font-size to maintain vertical rhythm. -// -@function calculate-line-height($font-size) { - $line-height-size: ceil($font-size / $base-line-height) * ($base-line-height / $font-size); - @return $line-height-size; -} - - - - -//------------------------------------ -// MIXINS -//------------------------------------ - -// -// Uses `calculate-rem()` to calculate rem font-size and px -// fallback. line-height is calculated with `calculate-line-height()` -// but passing `false` will prevent that. -// -// `@include font-size(24px);` -// -// -// Big thanks to inuitcss for inspiration behind this -// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss) -@mixin font-size($font-size, $line-height: true) { - font-size: $font-size; - font-size: calculate-rem($font-size); - - @if $line-height == true { - line-height: calculate-line-height($font-size); - } -} - - -// -// Proper vendor prefixes are created just by -// passing a property value and size value. -// -// `@include vendor(border-radius, 4px);` -// -// -// Thanks to inuitcss for this handy mixin -// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss) -@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) { ... }` -// -// -@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 - $width-of-column: (100% - $gutters * ($number - 1)) / $number; - - .gutters .#{$column-prefix + $i} { - width: $width-of-column * $i + $gutters * ($i - 1); - content: $gutters * ($i - 1); - } - } -} - - -// -// 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; } - } -} diff --git a/scss/generic/_normalize.scss b/scss/generic/_normalize.scss deleted file mode 100644 index efc5065..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 65ea003..0000000 --- a/scss/generic/_print.scss +++ /dev/null @@ -1,110 +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 cf9aa3f..0000000 --- a/scss/generic/_shared.scss +++ /dev/null @@ -1,41 +0,0 @@ -@if $use-shared == true { - //------------------------------------ - // SHARED - //------------------------------------ - - // Thanks to inuitcss for some simple ways to help maintain - // vertical rhythm (https://github.com/csswizardry/inuit.css/edit/master/generic/_shared.scss) - - // 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; - } -} diff --git a/scss/objects/_badges.scss b/scss/objects/_badges.scss deleted file mode 100644 index 5ff0a56..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 26783c7..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 f7d782d..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 7a7f9a4..0000000 --- a/scss/objects/_colors.scss +++ /dev/null @@ -1,48 +0,0 @@ -//------------------------------------ -// COLORS -//------------------------------------ - -@if $use-bg-colors == true { - // 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; } -} - - -@if $use-type-colors == true { - // 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 5aa8752..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 60715ea..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 ec4a37c..0000000 --- a/scss/objects/_navigation.scss +++ /dev/null @@ -1,382 +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; - } - } - - - @if $use-responsive-navigation == true { - // Responsive navigation - // - // Thanks to Ben Plum for the great work on his - // Naver plugin (https://github.com/benplum/Naver/) - .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 0e5924a..0000000 --- a/scss/objects/_progress.scss +++ /dev/null @@ -1,106 +0,0 @@ -@if $use-progress == true { - //------------------------------------ - // PROGRESS - //------------------------------------ - - // Thanks to Chris Coyier's article on - // CSS3 Progress Bars which helped me create - // these (http://css-tricks.com/css3-progress-bars/) - .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 6a73381..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

+ + + + + +