diff --git a/.gitignore b/.gitignore index 5220e26..42dd2d0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,15 @@ +# Folders to ignore +__MACOSX/ + # Files to ignore -*.html .DS_Store -prepros.cfg # Dependencies /node_modules # Sass cache /.sass-cache + +# Log files +*.log +*.log.* diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d7341d6..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,23 +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) -4. Test any and all changes you make or implement. -5. Commit changes (`git commit -am "My new feature"`) - - **Note:** If you're referencing a GitHub issue in your commit, please preface the commit with `[ref: #000]` where `000` is the issue number. +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 @@ -66,12 +107,6 @@ Concise.CSS project has a `.editorconfig` file, you can install [Editorconfig](h [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 3914052..0000000 --- a/Gulpfile.js +++ /dev/null @@ -1,130 +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')(); - - -/** - * Constants - */ - -var AUTOPREFIXER_BROWSERS = [ - 'chrome >= 30', - 'ie >= 8', - 'ff >= 24', - 'safari >= 6', - 'opera >= 12', - 'ios >= 6', - 'android 2.3', - 'android >= 4', - 'ie_mob >= 9' -]; - -/** - * Distribute SCSS and JS files - */ - -// CSS -gulp.task('dist:css', function () { - return gulp.src('scss/concise.scss') - .pipe($.rubySass({ - style: 'expanded', - precision: 5, - loadPath: ['scss'] - })) - .on('error', function (e) { console.error(e.message) }) - .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) - .pipe(gulp.dest('dist/css')) - .pipe($.size({ title: 'dist:css' })) -}); - -// JS -gulp.task('dist:js', function () { - return gulp.src('js/*.js') - .pipe($.concat('concise.js')) - .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($.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']); -}); - -/** - * 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 a679066..bf05bb3 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,112 @@ # [](http://concisecss.com/) -[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/ConciseCSS/concise.css?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) -[![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, and 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/v2.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` -- Use [Concise Generator](https://github.com/ConciseCSS/concise-generator) - _Experimental version_ +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) 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 @@ -53,39 +138,16 @@ 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. +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 - -There are acknowledgements spread throughout the source code if you look around, and you can also view a list of credits [here](http://concisecss.com/credits/). - -## Contributors - -**Keenan Payne** -- [Website](http://keenanpayne.com) -- [GitHub](http://github.com/keenanpayne) -- [Twitter](http://twitter.com/keenan_payne) - -**Filipe Linhares** -- [Website](http://filipelinhares.com) -- [GitHub](http://github.com/filipelinhares) -- [Twitter](http://twitter.com/ofilipelinhares) - -**Benjamin Sigidi** -- [Website](https://moozen.com/) -- [GitHub](https://github.com/benjaminsigidi) - ## 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 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 30f6dba..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": "2.0.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 911a8e5..0000000 --- a/dist/css/concise.css +++ /dev/null @@ -1,2068 +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%; - -official-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; - -official-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; - -official-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; -} - -*, *:before, *:after { - -official-box-sizing: border-box; - box-sizing: border-box; -} - -html, -body { - background-color: #ffffff; - 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; -} - -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, .form-item { - margin-bottom: 24px; - margin-bottom: 1.5rem; -} - -hr { - margin-bottom: 22px; - margin-bottom: 1.375rem; -} - -ul, -ol, -dd { - margin-left: 48px; - margin-left: 3rem; -} - -*::-webkit-selection, *::-moz-selection, *::selection { - background-color: #666666; - color: #ffffff; -} - -a { - color: #62b3e7; - text-decoration: none; -} -a:hover, a:visited { - color: #8ec8ee; - cursor: pointer; - text-decoration: underline; -} -p a, 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; -} - -abbr[title], abbr[data-original-title] { - cursor: help; - border-bottom: 1px dotted #999; -} - -acronym { - cursor: help; - border-bottom: 1px dashed #62b3e7; -} - -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-family: "Droid Sans", Helvetica, Arial, sans-serif; - font-weight: normal; - text-rendering: optimizeLegibility; -} -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 { - color: #808080; - font-size: 60%; - line-height: 1; -} - -h1, .h1 { - font-size: 24px; - font-size: 1.5rem; - line-height: 1; -} -@media (min-width: 48em) { - h1, .h1 { - font-size: 32px; - font-size: 2rem; - line-height: 1.5; - } -} -@media (min-width: 60em) { - h1, .h1 { - font-size: 36px; - font-size: 2.25rem; - line-height: 1.33333; - } -} - -h2, .h2 { - font-size: 20px; - font-size: 1.25rem; - line-height: 1.2; -} -@media (min-width: 48em) { - h2, .h2 { - font-size: 24px; - font-size: 1.5rem; - line-height: 1; - } -} -@media (min-width: 60em) { - h2, .h2 { - font-size: 30px; - font-size: 1.875rem; - line-height: 1.6; - } -} - -h3, .h3 { - font-size: 18px; - font-size: 1.125rem; - line-height: 1.33333; -} -@media (min-width: 48em) { - h3, .h3 { - font-size: 20px; - font-size: 1.25rem; - line-height: 1.2; - } -} -@media (min-width: 60em) { - h3, .h3 { - font-size: 24px; - font-size: 1.5rem; - line-height: 1; - } -} - -h4, .h4 { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; -} -@media (min-width: 48em) { - h4, .h4 { - font-size: 18px; - font-size: 1.125rem; - line-height: 1.33333; - } -} -@media (min-width: 60em) { - h4, .h4 { - font-size: 20px; - font-size: 1.25rem; - line-height: 1.2; - } -} - -h5, .h5 { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.71429; -} -@media (min-width: 48em) { - h5, .h5 { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - } -} -@media (min-width: 60em) { - h5, .h5 { - font-size: 18px; - font-size: 1.125rem; - line-height: 1.33333; - } -} - -h6, .h6 { - font-size: 12px; - font-size: 0.75rem; - line-height: 2; -} -@media (min-width: 48em) { - h6, .h6 { - font-size: 14px; - font-size: 0.875rem; - line-height: 1.71429; - } -} -@media (min-width: 60em) { - h6, .h6 { - font-size: 16px; - font-size: 1rem; - line-height: 1.5; - } -} - -.giga { - font-size: 48px; - font-size: 3rem; - line-height: 1; -} -@media (min-width: 48em) { - .giga { - font-size: 64px; - font-size: 4rem; - line-height: 1.125; - } -} -@media (min-width: 70em) { - .giga { - font-size: 80px; - font-size: 5rem; - line-height: 1.2; - } -} -@media (min-width: 80em) { - .giga { - font-size: 96px; - font-size: 6rem; - line-height: 1; - } -} - -.mega { - font-size: 40px; - font-size: 2.5rem; - line-height: 1.2; -} -@media (min-width: 48em) { - .mega { - font-size: 48px; - font-size: 3rem; - line-height: 1; - } -} -@media (min-width: 70em) { - .mega { - font-size: 64px; - font-size: 4rem; - line-height: 1.125; - } -} -@media (min-width: 80em) { - .mega { - font-size: 72px; - font-size: 4.5rem; - line-height: 1; - } -} - -.kilo { - font-size: 32px; - font-size: 2rem; - line-height: 1.5; -} -@media (min-width: 48em) { - .kilo { - font-size: 32px; - font-size: 2rem; - line-height: 1.5; - } -} -@media (min-width: 70em) { - .kilo { - font-size: 48px; - font-size: 3rem; - line-height: 1; - } -} -@media (min-width: 80em) { - .kilo { - font-size: 64px; - font-size: 4rem; - line-height: 1.125; - } -} - -.container { - margin: 0 auto; - 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; - } -} - -.row { - width: 100%; -} -.row:after { - clear: both; - content: " "; - display: table; -} - -[class*='column-'] { - -official-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%; - } - .gutters .column-1 { - width: 4.375%; - } - - .column-2 { - width: 12.5%; - } - .gutters .column-2 { - width: 10.75%; - } - - .column-3 { - width: 18.75%; - } - .gutters .column-3 { - width: 17.125%; - } - - .column-4 { - width: 25%; - } - .gutters .column-4 { - width: 23.5%; - } - - .column-5 { - width: 31.25%; - } - .gutters .column-5 { - width: 29.875%; - } - - .column-6 { - width: 37.5%; - } - .gutters .column-6 { - width: 36.25%; - } - - .column-7 { - width: 43.75%; - } - .gutters .column-7 { - width: 42.625%; - } - - .column-8 { - width: 50%; - } - .gutters .column-8 { - width: 49%; - } - - .column-9 { - width: 56.25%; - } - .gutters .column-9 { - width: 55.375%; - } - - .column-10 { - width: 62.5%; - } - .gutters .column-10 { - width: 61.75%; - } - - .column-11 { - width: 68.75%; - } - .gutters .column-11 { - width: 68.125%; - } - - .column-12 { - width: 75%; - } - .gutters .column-12 { - width: 74.5%; - } - - .column-13 { - width: 81.25%; - } - .gutters .column-13 { - width: 80.875%; - } - - .column-14 { - width: 87.5%; - } - .gutters .column-14 { - width: 87.25%; - } - - .column-15 { - width: 93.75%; - } - .gutters .column-15 { - width: 93.625%; - } - - .column-16 { - width: 100%; - } - .gutters .column-16 { - width: 100%; - } - - [class*='push-'] { - position: relative; - } - - .push-1 { - left: 6.25%; - } - .gutters .push-1 { - left: 4.25%; - } - - .push-2 { - left: 12.5%; - } - .gutters .push-2 { - left: 10.5%; - } - - .push-3 { - left: 18.75%; - } - .gutters .push-3 { - left: 16.75%; - } - - .push-4 { - left: 25%; - } - .gutters .push-4 { - left: 23%; - } - - .push-5 { - left: 31.25%; - } - .gutters .push-5 { - left: 29.25%; - } - - .push-6 { - left: 37.5%; - } - .gutters .push-6 { - left: 35.5%; - } - - .push-7 { - left: 43.75%; - } - .gutters .push-7 { - left: 41.75%; - } - - .push-8 { - left: 50%; - } - .gutters .push-8 { - left: 48%; - } - - .push-9 { - left: 56.25%; - } - .gutters .push-9 { - left: 54.25%; - } - - .push-10 { - left: 62.5%; - } - .gutters .push-10 { - left: 60.5%; - } - - .push-11 { - left: 68.75%; - } - .gutters .push-11 { - left: 66.75%; - } - - .push-12 { - left: 75%; - } - .gutters .push-12 { - left: 73%; - } - - .push-13 { - left: 81.25%; - } - .gutters .push-13 { - left: 79.25%; - } - - .push-14 { - left: 87.5%; - } - .gutters .push-14 { - left: 85.5%; - } - - .push-15 { - left: 93.75%; - } - .gutters .push-15 { - left: 91.75%; - } - - [class*='pull-'] { - position: relative; - } - - .pull-1 { - right: 6.25%; - } - .gutters .pull-1 { - right: 4.25%; - } - - .pull-2 { - right: 12.5%; - } - .gutters .pull-2 { - right: 10.5%; - } - - .pull-3 { - right: 18.75%; - } - .gutters .pull-3 { - right: 16.75%; - } - - .pull-4 { - right: 25%; - } - .gutters .pull-4 { - right: 23%; - } - - .pull-5 { - right: 31.25%; - } - .gutters .pull-5 { - right: 29.25%; - } - - .pull-6 { - right: 37.5%; - } - .gutters .pull-6 { - right: 35.5%; - } - - .pull-7 { - right: 43.75%; - } - .gutters .pull-7 { - right: 41.75%; - } - - .pull-8 { - right: 50%; - } - .gutters .pull-8 { - right: 48%; - } - - .pull-9 { - right: 56.25%; - } - .gutters .pull-9 { - right: 54.25%; - } - - .pull-10 { - right: 62.5%; - } - .gutters .pull-10 { - right: 60.5%; - } - - .pull-11 { - right: 68.75%; - } - .gutters .pull-11 { - right: 66.75%; - } - - .pull-12 { - right: 75%; - } - .gutters .pull-12 { - right: 73%; - } - - .pull-13 { - right: 81.25%; - } - .gutters .pull-13 { - right: 79.25%; - } - - .pull-14 { - right: 87.5%; - } - .gutters .pull-14 { - right: 85.5%; - } - - .pull-15 { - right: 93.75%; - } - .gutters .pull-15 { - right: 91.75%; - } -} -.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; -} - -ul, -ol { - margin-left: 20px; - padding-left: 0px; -} -ul li, -ol li { - line-height: 1.75em; - position: relative; -} -ul ul, -ol ul { - list-style-type: circle; - margin-bottom: auto; -} -ul ul ul, -ol ul ul { - list-style-type: square; -} -ul ul ol, -ol ul ol { - list-style-type: lower-roman; -} -@media (min-width: 48em) { - ul ul, - ol ul { - margin-left: 20px; - } -} -ul ol, -ol ol { - list-style-type: lower-latin; - margin-bottom: auto; -} -ul ol ol, -ol ol ol { - list-style-type: lower-roman; -} -ul ol ul, -ol ol ul { - list-style-type: square; -} - -.list-unstyled { - margin-left: 0px; - list-style: none; -} -.list-unstyled ul { - list-style: none; -} -.list-unstyled ul ul { - list-style: none; -} - -.list-inline { - margin-left: 0px; -} -.list-inline li { - border-bottom: none; - display: inline; - margin-right: 15px; -} -.list-inline li:last-child { - margin-right: 0px; -} -@media (min-width: 48em) { - .list-inline li { - margin-right: 15px; - } - .list-inline li:last-child { - margin-right: 0px; - } -} -@media (min-width: 60em) { - .list-inline li { - margin-right: 30px; - } - .list-inline li:last-child { - margin-right: 0px; - } -} - -dt { - font-weight: bold; -} - -dd { - margin-left: 0px; -} - -input[type="checkbox"], input[type="file"], input[type="image"], input[type="radio"] { - background: auto; - border: auto; - height: auto; - width: auto; -} - -input[disabled], -select[disabled], -textarea[disabled] { - background-color: #f6f6f6; - cursor: not-allowed; -} - -label { - display: block; -} - -textarea { - height: auto; -} - -.form input, -.form select, -.form textarea { - border: 1px solid #cccccc; - height: 37px; - padding: 5px; - width: 100%; - -official-box-sizing: border-box; - box-sizing: border-box; -} -@media (min-width: 30em) { - .form input, - .form select, - .form textarea { - width: 300px; - } -} -.form textarea { - height: auto; -} -@media (min-width: 30em) { - .form input[type="submit"] { - display: block; - width: auto; - } -} -.form input:focus, -.form select:focus, -.form textarea:focus, -.form button:focus, -.form [contenteditable="true"]:focus { - outline: 1px solid #a6a6a6; -} -.form fieldset { - border: 1px solid #cccccc; - padding: 10px 25px; -} -.form fieldset legend { - font-weight: bold; - font-size: 13px; - font-size: 0.8125rem; - line-height: 1.84615; - padding: 0 10px; -} - -.form-item { - display: block; -} - -.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; -} - -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 #cccccc; -} -table.table th, -table.table td { - padding: 12px 15px; -} -table.table td { - border-top: 1px solid #cccccc; -} -@media (min-width: 30em) { - table.table { - width: auto; - } - table.table th, - table.table td { - padding: 10px 50px 10px 25px; - } -} -table.table-full, table.table.table-full { - width: 100%; -} - -.table-responsive { - overflow: auto; - width: 100%; -} -.table-responsive table { - margin-bottom: 0; -} -.table-responsive::-webkit-scrollbar { - height: 14px; - width: 14px; - -webkit-appearance: none; -} -.table-responsive::-webkit-scrollbar-thumb { - background-color: rgba(50, 50, 50, 0.2); - border: 3px solid #fff; - border-radius: 8px; -} - -.bg-white { - background-color: #ffffff; -} - -.bg-black { - background-color: #222222; -} - -.bg-light-black { - background-color: #757575; -} - -.bg-gray { - background-color: #999999; -} - -.bg-light-gray { - background-color: #ececec; -} - -.bg-green { - background-color: #5cb85c; -} - -.bg-light-green { - background-color: #cfeacf; -} - -.bg-blue { - background-color: #5bc0de; -} - -.bg-light-blue { - background-color: #e5f5fa; -} - -.bg-yellow { - background-color: #ed9c28; -} - -.bg-light-yellow { - background-color: #fae2c1; -} - -.bg-red { - background-color: #d9534f; -} - -.bg-light-red { - background-color: #f6d8d7; -} - -.color-white { - color: #ffffff; -} - -.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: #cccccc; - border: 0; - color: #ffffff; - cursor: pointer; - display: inline-block; - font-family: inherit; - font-size: 100%; - line-height: 1; - padding: 0.5em 1em; - position: relative; - text-align: center; - text-decoration: none; - vertical-align: baseline; - white-space: nowrap; - -webkit-touch-callout: none; - -webkit-user-select: none; - -ms-user-select: none; - -o-user-select: none; - -official-user-select: none; - user-select: none; - -webkit-user-drag: none; - user-drag: none; -} -.btn::-moz-focus-inner { - padding: 0; - border: 0; -} -.btn:hover { - background-color: #b3b3b3; -} -.btn:active { - background-color: #bfbfbf; -} -.btn[disabled], .btn[disabled]:hover, .btn[disabled]:active, .btn[disabled]:focus { - background: #dededc !important; - border: none; - color: #b3b3b1; - cursor: not-allowed; -} -.btn.bg-white { - background-color: #ffffff; -} -.btn.bg-white:hover { - background-color: #e6e6e6; -} -.btn.bg-white:active { - background-color: #f2f2f2; -} -.btn.bg-black { - background-color: #222222; -} -.btn.bg-black:hover { - background-color: #090909; -} -.btn.bg-black:active { - background-color: #151515; -} -.btn.bg-light-black { - background-color: #757575; -} -.btn.bg-gray { - background-color: #999999; -} -.btn.bg-gray:hover { - background-color: gray; -} -.btn.bg-gray:active { - background-color: #8c8c8c; -} -.btn.bg-light-gray { - background-color: #ececec; -} -.btn.bg-green { - background-color: #5cb85c; -} -.btn.bg-green:hover { - background-color: #449d44; -} -.btn.bg-green:active { - background-color: #4cae4c; -} -.btn.bg-light-green { - background-color: #cfeacf; -} -.btn.bg-blue { - background-color: #5bc0de; -} -.btn.bg-blue:hover { - background-color: #31b0d5; -} -.btn.bg-blue:active { - background-color: #46b8da; -} -.btn.bg-light-blue { - background-color: #e5f5fa; -} -.btn.bg-yellow { - background-color: #ed9c28; -} -.btn.bg-yellow:hover { - background-color: #d18211; -} -.btn.bg-yellow:active { - background-color: #e89113; -} -.btn.bg-light-yellow { - background-color: #fae2c1; -} -.btn.bg-red { - background-color: #d9534f; -} -.btn.bg-red:hover { - background-color: #c9302c; -} -.btn.bg-red:active { - background-color: #d43f3a; -} -.btn.bg-light-red { - background-color: #f6d8d7; -} - -a.btn, a.btn:hover { - color: #ffffff; - text-decoration: none; -} -a.btn:active { - outline: 0; -} - -input[type="submit"].btn { - color: #ffffff; - height: auto; - padding: 0.5em 1em; -} - -button.btn { - color: #ffffff; -} - -.btn-collapse-full { - display: block; - margin: 12px 0; - width: 100%; -} -@media (min-width: 30em) { - .btn-collapse-full { - display: inline-block; - margin: 0; - width: auto; - } -} - -.btn-extra-small, -a.btn-extra-small, -p.btn-extra-small, -input.btn-extra-small { - font-size: 10px; - font-size: 0.625rem; - line-height: 2.4; - padding: 0.25em 0.75em; -} - -.btn-small, -a.btn-small, -p.btn-small, -input.btn-small { - font-size: 12px; - font-size: 0.75rem; - line-height: 2; -} - -.btn-large, -a.btn-large, -p.btn-large, -input.btn-large { - font-size: 18px; - font-size: 1.125rem; - line-height: 1.33333; - padding: 1em 2em; -} - -.btn-extra-large, -a.btn-extra-large, -p.btn-extra-large, -input.btn-extra-large { - font-size: 24px; - font-size: 1.5rem; - line-height: 1; - padding: 1em 2em; -} - -.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; - } -} -.dropdown { - cursor: pointer; - outline: none; - position: relative; - width: auto; -} -.dropdown .dropdown-menu { - background-color: #ffffff; - border: 1px solid #ededed; - border-radius: inherit; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - font-weight: inherit; - left: 0; - margin-left: 0px; - opacity: 0; - pointer-events: none; - position: absolute; - right: 0; - text-transform: none; - z-index: 99999; - -ms-transition: all 0.3s ease-in; - -official-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 .dropdown-menu li { - display: block; - padding: 5px 10px; - -ms-transition: all 0.3s ease-out; - -official-transition: all 0.3s ease-out; - transition: all 0.3s ease-out; -} -.dropdown .dropdown-menu li:hover { - background-color: #f3f8f8; -} -.dropdown .dropdown-menu > .dropdown-header { - margin: 0; -} -.dropdown ul.dropdown-menu { - list-style-type: none; -} -.dropdown.dropdown-active .dropdown-menu { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; - pointer-events: auto; -} -.dropdown .dropdown-header { - color: #aaaaaa; - cursor: default; - font-size: 14px; - font-size: 0.875rem; - line-height: 1.71429; - margin: 12px 0 0; - padding: 0 0 0 9px; -} -.dropdown.dropdown-collapse-full .dropdown-menu { - width: 100%; -} -@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.dropdown-collapse-full .dropdown-menu { - width: 200px; - } -} -.dropdown .dropdown-header:hover, -.dropdown li.dropdown-header:hover { - background: none; -} -.dropdown[class*='dropdown-arrow-'] .dropdown-menu { - margin-top: 10px; -} -.dropdown[class*='dropdown-arrow-'] .dropdown-menu:before, .dropdown[class*='dropdown-arrow-'] .dropdown-menu:after { - border-color: #ffffff 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-width: 0 8px 8px 8px; -} -.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-responsive.nav-responsive-text.naver .naver-container:before, .nav-responsive-left.nav-responsive-text.naver .naver-container:after, .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; -} - -nav ul, -nav ol { - list-style: none; - margin: 0; -} -nav li { - cursor: pointer; - position: relative; -} -.dropdown nav li { - margin-right: 0px; -} - -.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; - -ms-user-select: none; - -official-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: "\2261"; - text-align: right; -} -.nav-responsive.nav-responsive-text.naver .naver-handle:after { - content: "\00a0 \2261"; -} - -.nav-responsive-left.naver .naver-handle { - text-align: left; -} -.nav-responsive-left.naver .naver-handle:before { - content: "\2261"; - text-align: left; -} -.nav-responsive-left.nav-responsive-text.naver .naver-handle:before { - content: "\2261 \00a0"; -} - -.nav-responsive-center.naver .naver-handle { - text-align: center; -} -.nav-responsive-center.naver .naver-handle:before { - content: "\2261"; - text-align: center; -} -.nav-responsive-center.nav-responsive-text.naver .naver-handle:before { - content: "\2261 \00a0"; -} - -.float-left { - float: left; -} - -.float-right { - float: right; -} - -.float-none { - float: none; -} - -.align-center { - display: block; - margin-left: auto; - margin-right: auto; -} - -.no-margin { - margin: 0; -} - -.inline { - display: inline; -} - -.show { - display: block; - visibility: visible; -} - -.hide { - display: none; - visibility: hidden; -} - -.screen-reader, -.text-hide { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.full-width { - width: 100%; -} - -img.full-width { - 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; -} - -.weight-normal { - font-weight: 400; -} - -.weight-semibold { - font-weight: 600; -} - -.text-uppercase { - text-transform: uppercase; -} - -.amp { - font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; -} - -.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; -} - -.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; - } - *, - *:before, - *:after { - background: transparent !important; - color: black !important; - text-shadow: none !important; - -webkit-filter: none !important; - -moz-filter: none !important; - -ms-filter: none !important; - -official-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, - a:visited { - color: #000; - 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, - 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: "» "; - } -} - -/*# sourceMappingURL=concise.css.map */ diff --git a/dist/css/concise.min.css b/dist/css/concise.min.css deleted file mode 100644 index 094600b..0000000 --- a/dist/css/concise.min.css +++ /dev/null @@ -1,2 +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%;-official-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;-official-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;-official-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}*,*:before,*:after{-official-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}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,.form-item{margin-bottom:24px;margin-bottom:1.5rem}hr{margin-bottom:22px;margin-bottom:1.375rem}ul,ol,dd{margin-left:48px;margin-left:3rem}*::-webkit-selection,*::-moz-selection,*::selection{background-color:#666;color:#fff}a{color:#62b3e7;text-decoration:none}a:hover,a:visited{color:#8ec8ee;cursor:pointer;text-decoration:underline}p a,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}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}acronym{cursor:help;border-bottom:1px dashed #62b3e7}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-family:"Droid Sans",Helvetica,Arial,sans-serif;font-weight:normal;text-rendering:optimizeLegibility}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{color:gray;font-size:60%;line-height:1}h1,.h1{font-size:24px;font-size:1.5rem;line-height:1}@media (min-width: 48em){h1,.h1{font-size:32px;font-size:2rem;line-height:1.5}}@media (min-width: 60em){h1,.h1{font-size:36px;font-size:2.25rem;line-height:1.33333}}h2,.h2{font-size:20px;font-size:1.25rem;line-height:1.2}@media (min-width: 48em){h2,.h2{font-size:24px;font-size:1.5rem;line-height:1}}@media (min-width: 60em){h2,.h2{font-size:30px;font-size:1.875rem;line-height:1.6}}h3,.h3{font-size:18px;font-size:1.125rem;line-height:1.33333}@media (min-width: 48em){h3,.h3{font-size:20px;font-size:1.25rem;line-height:1.2}}@media (min-width: 60em){h3,.h3{font-size:24px;font-size:1.5rem;line-height:1}}h4,.h4{font-size:16px;font-size:1rem;line-height:1.5}@media (min-width: 48em){h4,.h4{font-size:18px;font-size:1.125rem;line-height:1.33333}}@media (min-width: 60em){h4,.h4{font-size:20px;font-size:1.25rem;line-height:1.2}}h5,.h5{font-size:14px;font-size:0.875rem;line-height:1.71429}@media (min-width: 48em){h5,.h5{font-size:16px;font-size:1rem;line-height:1.5}}@media (min-width: 60em){h5,.h5{font-size:18px;font-size:1.125rem;line-height:1.33333}}h6,.h6{font-size:12px;font-size:0.75rem;line-height:2}@media (min-width: 48em){h6,.h6{font-size:14px;font-size:0.875rem;line-height:1.71429}}@media (min-width: 60em){h6,.h6{font-size:16px;font-size:1rem;line-height:1.5}}.giga{font-size:48px;font-size:3rem;line-height:1}@media (min-width: 48em){.giga{font-size:64px;font-size:4rem;line-height:1.125}}@media (min-width: 70em){.giga{font-size:80px;font-size:5rem;line-height:1.2}}@media (min-width: 80em){.giga{font-size:96px;font-size:6rem;line-height:1}}.mega{font-size:40px;font-size:2.5rem;line-height:1.2}@media (min-width: 48em){.mega{font-size:48px;font-size:3rem;line-height:1}}@media (min-width: 70em){.mega{font-size:64px;font-size:4rem;line-height:1.125}}@media (min-width: 80em){.mega{font-size:72px;font-size:4.5rem;line-height:1}}.kilo{font-size:32px;font-size:2rem;line-height:1.5}@media (min-width: 48em){.kilo{font-size:32px;font-size:2rem;line-height:1.5}}@media (min-width: 70em){.kilo{font-size:48px;font-size:3rem;line-height:1}}@media (min-width: 80em){.kilo{font-size:64px;font-size:4rem;line-height:1.125}}.container{margin:0 auto;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}}.row{width:100%}.row:after{clear:both;content:" ";display:table}[class*='column-']{-official-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%}.gutters .column-1{width:4.375%}.column-2{width:12.5%}.gutters .column-2{width:10.75%}.column-3{width:18.75%}.gutters .column-3{width:17.125%}.column-4{width:25%}.gutters .column-4{width:23.5%}.column-5{width:31.25%}.gutters .column-5{width:29.875%}.column-6{width:37.5%}.gutters .column-6{width:36.25%}.column-7{width:43.75%}.gutters .column-7{width:42.625%}.column-8{width:50%}.gutters .column-8{width:49%}.column-9{width:56.25%}.gutters .column-9{width:55.375%}.column-10{width:62.5%}.gutters .column-10{width:61.75%}.column-11{width:68.75%}.gutters .column-11{width:68.125%}.column-12{width:75%}.gutters .column-12{width:74.5%}.column-13{width:81.25%}.gutters .column-13{width:80.875%}.column-14{width:87.5%}.gutters .column-14{width:87.25%}.column-15{width:93.75%}.gutters .column-15{width:93.625%}.column-16{width:100%}.gutters .column-16{width:100%}[class*='push-']{position:relative}.push-1{left:6.25%}.gutters .push-1{left:4.25%}.push-2{left:12.5%}.gutters .push-2{left:10.5%}.push-3{left:18.75%}.gutters .push-3{left:16.75%}.push-4{left:25%}.gutters .push-4{left:23%}.push-5{left:31.25%}.gutters .push-5{left:29.25%}.push-6{left:37.5%}.gutters .push-6{left:35.5%}.push-7{left:43.75%}.gutters .push-7{left:41.75%}.push-8{left:50%}.gutters .push-8{left:48%}.push-9{left:56.25%}.gutters .push-9{left:54.25%}.push-10{left:62.5%}.gutters .push-10{left:60.5%}.push-11{left:68.75%}.gutters .push-11{left:66.75%}.push-12{left:75%}.gutters .push-12{left:73%}.push-13{left:81.25%}.gutters .push-13{left:79.25%}.push-14{left:87.5%}.gutters .push-14{left:85.5%}.push-15{left:93.75%}.gutters .push-15{left:91.75%}[class*='pull-']{position:relative}.pull-1{right:6.25%}.gutters .pull-1{right:4.25%}.pull-2{right:12.5%}.gutters .pull-2{right:10.5%}.pull-3{right:18.75%}.gutters .pull-3{right:16.75%}.pull-4{right:25%}.gutters .pull-4{right:23%}.pull-5{right:31.25%}.gutters .pull-5{right:29.25%}.pull-6{right:37.5%}.gutters .pull-6{right:35.5%}.pull-7{right:43.75%}.gutters .pull-7{right:41.75%}.pull-8{right:50%}.gutters .pull-8{right:48%}.pull-9{right:56.25%}.gutters .pull-9{right:54.25%}.pull-10{right:62.5%}.gutters .pull-10{right:60.5%}.pull-11{right:68.75%}.gutters .pull-11{right:66.75%}.pull-12{right:75%}.gutters .pull-12{right:73%}.pull-13{right:81.25%}.gutters .pull-13{right:79.25%}.pull-14{right:87.5%}.gutters .pull-14{right:85.5%}.pull-15{right:93.75%}.gutters .pull-15{right:91.75%}}.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}ul,ol{margin-left:20px;padding-left:0px}ul li,ol li{line-height:1.75em;position:relative}ul ul,ol ul{list-style-type:circle;margin-bottom:auto}ul ul ul,ol ul ul{list-style-type:square}ul ul ol,ol ul ol{list-style-type:lower-roman}@media (min-width: 48em){ul ul,ol ul{margin-left:20px}}ul ol,ol ol{list-style-type:lower-latin;margin-bottom:auto}ul ol ol,ol ol ol{list-style-type:lower-roman}ul ol ul,ol ol ul{list-style-type:square}.list-unstyled{margin-left:0px;list-style:none}.list-unstyled ul{list-style:none}.list-unstyled ul ul{list-style:none}.list-inline{margin-left:0px}.list-inline li{border-bottom:none;display:inline;margin-right:15px}.list-inline li:last-child{margin-right:0px}@media (min-width: 48em){.list-inline li{margin-right:15px}.list-inline li:last-child{margin-right:0px}}@media (min-width: 60em){.list-inline li{margin-right:30px}.list-inline li:last-child{margin-right:0px}}dt{font-weight:bold}dd{margin-left:0px}input[type="checkbox"],input[type="file"],input[type="image"],input[type="radio"]{background:auto;border:auto;height:auto;width:auto}input[disabled],select[disabled],textarea[disabled]{background-color:#f6f6f6;cursor:not-allowed}label{display:block}textarea{height:auto}.form input,.form select,.form textarea{border:1px solid #ccc;height:37px;padding:5px;width:100%;-official-box-sizing:border-box;box-sizing:border-box}@media (min-width: 30em){.form input,.form select,.form textarea{width:300px}}.form textarea{height:auto}@media (min-width: 30em){.form input[type="submit"]{display:block;width:auto}}.form input:focus,.form select:focus,.form textarea:focus,.form button:focus,.form [contenteditable="true"]:focus{outline:1px solid #a6a6a6}.form fieldset{border:1px solid #ccc;padding:10px 25px}.form fieldset legend{font-weight:bold;font-size:13px;font-size:0.8125rem;line-height:1.84615;padding:0 10px}.form-item{display:block}.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}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 #ccc}table.table th,table.table td{padding:12px 15px}table.table td{border-top:1px solid #ccc}@media (min-width: 30em){table.table{width:auto}table.table th,table.table td{padding:10px 50px 10px 25px}}table.table-full,table.table.table-full{width:100%}.table-responsive{overflow:auto;width:100%}.table-responsive table{margin-bottom:0}.table-responsive::-webkit-scrollbar{height:14px;width:14px;-webkit-appearance:none}.table-responsive::-webkit-scrollbar-thumb{background-color:rgba(50,50,50,0.2);border:3px solid #fff;border-radius:8px}.bg-white{background-color:#fff}.bg-black{background-color:#222}.bg-light-black{background-color:#757575}.bg-gray{background-color:#999}.bg-light-gray{background-color:#ececec}.bg-green{background-color:#5cb85c}.bg-light-green{background-color:#cfeacf}.bg-blue{background-color:#5bc0de}.bg-light-blue{background-color:#e5f5fa}.bg-yellow{background-color:#ed9c28}.bg-light-yellow{background-color:#fae2c1}.bg-red{background-color:#d9534f}.bg-light-red{background-color:#f6d8d7}.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:inline-block;font-family:inherit;font-size:100%;line-height:1;padding:0.5em 1em;position:relative;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap;-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;-o-user-select:none;-official-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}.btn::-moz-focus-inner{padding:0;border:0}.btn:hover{background-color:#b3b3b3}.btn:active{background-color:#bfbfbf}.btn[disabled],.btn[disabled]:hover,.btn[disabled]:active,.btn[disabled]:focus{background:#dededc !important;border:none;color:#b3b3b1;cursor:not-allowed}.btn.bg-white{background-color:#fff}.btn.bg-white:hover{background-color:#e6e6e6}.btn.bg-white:active{background-color:#f2f2f2}.btn.bg-black{background-color:#222}.btn.bg-black:hover{background-color:#090909}.btn.bg-black:active{background-color:#151515}.btn.bg-light-black{background-color:#757575}.btn.bg-gray{background-color:#999}.btn.bg-gray:hover{background-color:gray}.btn.bg-gray:active{background-color:#8c8c8c}.btn.bg-light-gray{background-color:#ececec}.btn.bg-green{background-color:#5cb85c}.btn.bg-green:hover{background-color:#449d44}.btn.bg-green:active{background-color:#4cae4c}.btn.bg-light-green{background-color:#cfeacf}.btn.bg-blue{background-color:#5bc0de}.btn.bg-blue:hover{background-color:#31b0d5}.btn.bg-blue:active{background-color:#46b8da}.btn.bg-light-blue{background-color:#e5f5fa}.btn.bg-yellow{background-color:#ed9c28}.btn.bg-yellow:hover{background-color:#d18211}.btn.bg-yellow:active{background-color:#e89113}.btn.bg-light-yellow{background-color:#fae2c1}.btn.bg-red{background-color:#d9534f}.btn.bg-red:hover{background-color:#c9302c}.btn.bg-red:active{background-color:#d43f3a}.btn.bg-light-red{background-color:#f6d8d7}a.btn,a.btn:hover{color:#fff;text-decoration:none}a.btn:active{outline:0}input[type="submit"].btn{color:#fff;height:auto;padding:0.5em 1em}button.btn{color:#fff}.btn-collapse-full{display:block;margin:12px 0;width:100%}@media (min-width: 30em){.btn-collapse-full{display:inline-block;margin:0;width:auto}}.btn-extra-small,a.btn-extra-small,p.btn-extra-small,input.btn-extra-small{font-size:10px;font-size:0.625rem;line-height:2.4;padding:0.25em 0.75em}.btn-small,a.btn-small,p.btn-small,input.btn-small{font-size:12px;font-size:0.75rem;line-height:2}.btn-large,a.btn-large,p.btn-large,input.btn-large{font-size:18px;font-size:1.125rem;line-height:1.33333;padding:1em 2em}.btn-extra-large,a.btn-extra-large,p.btn-extra-large,input.btn-extra-large{font-size:24px;font-size:1.5rem;line-height:1;padding:1em 2em}.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}}.dropdown{cursor:pointer;outline:none;position:relative;width:auto}.dropdown .dropdown-menu{background-color:#fff;border:1px solid #ededed;border-radius:inherit;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);font-weight:inherit;left:0;margin-left:0px;opacity:0;pointer-events:none;position:absolute;right:0;text-transform:none;z-index:99999;-ms-transition:all 0.3s ease-in;-official-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 .dropdown-menu li{display:block;padding:5px 10px;-ms-transition:all 0.3s ease-out;-official-transition:all 0.3s ease-out;transition:all 0.3s ease-out}.dropdown .dropdown-menu li:hover{background-color:#f3f8f8}.dropdown .dropdown-menu>.dropdown-header{margin:0}.dropdown ul.dropdown-menu{list-style-type:none}.dropdown.dropdown-active .dropdown-menu{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;pointer-events:auto}.dropdown .dropdown-header{color:#aaa;cursor:default;font-size:14px;font-size:0.875rem;line-height:1.71429;margin:12px 0 0;padding:0 0 0 9px}.dropdown.dropdown-collapse-full .dropdown-menu{width:100%}@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.dropdown-collapse-full .dropdown-menu{width:200px}}.dropdown .dropdown-header:hover,.dropdown li.dropdown-header:hover{background:none}.dropdown[class*='dropdown-arrow-'] .dropdown-menu{margin-top:10px}.dropdown[class*='dropdown-arrow-'] .dropdown-menu:before,.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-width:0 8px 8px 8px}.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-responsive.nav-responsive-text.naver .naver-container:before,.nav-responsive-left.nav-responsive-text.naver .naver-container:after,.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}nav ul,nav ol{list-style:none;margin:0}nav li{cursor:pointer;position:relative}.dropdown nav li{margin-right:0px}.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;-ms-user-select:none;-official-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:"\2261";text-align:right}.nav-responsive.nav-responsive-text.naver .naver-handle:after{content:"\00a0 \2261"}.nav-responsive-left.naver .naver-handle{text-align:left}.nav-responsive-left.naver .naver-handle:before{content:"\2261";text-align:left}.nav-responsive-left.nav-responsive-text.naver .naver-handle:before{content:"\2261 \00a0"}.nav-responsive-center.naver .naver-handle{text-align:center}.nav-responsive-center.naver .naver-handle:before{content:"\2261";text-align:center}.nav-responsive-center.nav-responsive-text.naver .naver-handle:before{content:"\2261 \00a0"}.float-left{float:left}.float-right{float:right}.float-none{float:none}.align-center{display:block;margin-left:auto;margin-right:auto}.no-margin{margin:0}.inline{display:inline}.show{display:block;visibility:visible}.hide{display:none;visibility:hidden}.screen-reader,.text-hide{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.full-width{width:100%}img.full-width{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}.weight-normal{font-weight:400}.weight-semibold{font-weight:600}.text-uppercase{text-transform:uppercase}.amp{font:italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif}.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}.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}*,*:before,*:after{background:transparent !important;color:black !important;text-shadow:none !important;-webkit-filter:none !important;-moz-filter:none !important;-ms-filter:none !important;-official-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,a:visited{color:#000;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,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:"» "}} -/*# sourceMappingURL=concise.min.css.map */ diff --git a/dist/js/concise.js b/dist/js/concise.js deleted file mode 100644 index 949119e..0000000 --- a/dist/js/concise.js +++ /dev/null @@ -1,480 +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(); - }); - - // Toggle .dropdown-active on hover - $(".dropdown-hover").mouseenter(function(event) { - $(this).addClass("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() { - dropdown.removeClass('dropdown-active'); - }); - - $(".dropdown-menu").mouseleave(function() { - dropdown.removeClass("dropdown-active"); - }); - }); -}(jQuery)); - -jQuery(document).ready(function() { - jQuery(".nav-responsive, .nav-responsive-left, .nav-responsive-center").responsiveNav(); - jQuery("body, .row").nonResponsive(); -}); - -/* - * 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); diff --git a/dist/js/concise.min.js b/dist/js/concise.min.js deleted file mode 100644 index fdc378d..0000000 --- a/dist/js/concise.min.js +++ /dev/null @@ -1 +0,0 @@ -!function($){function DropDown(el){this.dd=el,this.initEvents()}DropDown.prototype={initEvents:function(){this.dd.on("click",function(event){$(this).toggleClass("dropdown-active"),event.stopPropagation()}),$(".dropdown-hover").mouseenter(function(event){$(this).addClass("dropdown-active"),event.stopPropagation()})}},$.fn.responsiveNav=function(){this.each(function(){var labelState=$(this).hasClass("nav-responsive-text");return $(this).naver({maxWidth:"768px",label:labelState})})},$.fn.calculateWidth=function(){return $(this).width()},$.fn.nonResponsive=function(){this.each(function(){if($(this).hasClass("non-responsive")){var i=($(".container").width(),1),max=24;if($(this).hasClass("gutters"))for(;max>=i;i++){var columnWidth=$(".column-"+i).calculateWidth(),gutterWidth=.02*columnWidth;$(".gutters .column-"+i).css("width",columnWidth-gutterWidth+"px")}else for(;max>=i;i++){var columnWidth=$(".column-"+i).calculateWidth()-1;$(".column-"+i).css("width",columnWidth+"px")}}})},$(function(){var dropdown=$(".dropdown");new DropDown(dropdown),$(document).click(function(){dropdown.removeClass("dropdown-active")}),$(".dropdown-menu").mouseleave(function(){dropdown.removeClass("dropdown-active")})})}(jQuery),jQuery(document).ready(function(){jQuery(".nav-responsive, .nav-responsive-left, .nav-responsive-center").responsiveNav(),jQuery("body, .row").nonResponsive()}),function($,window){"use strict";function _init(opts){opts=$.extend(!0,{},options,opts);for(var $items=$(this),i=0,count=$items.length;count>i;i++)_build($items.eq(i),opts);return $items}function _build($nav,opts){if(!$nav.data("naver")){opts=$.extend(!0,{},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(!0,{$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),void 0!==window.matchMedia&&(data.mediaQuery=window.matchMedia("(max-width:"+(1/0===data.maxWidth?"100000px":data.maxWidth)+")"),data.mediaQuery.addListener(function(){_onRespond.apply(data.$nav)}),_onRespond.apply(data.$nav))}}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)}function _onTouchMove(e){var data=e.data,oe=e.originalEvent;(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")}function _onTouchEnd(e){e.preventDefault(),e.stopPropagation();var data=e.data;data.$nav.off("touchmove.naver touchend.naver click.naver"),data.timer=_startTimer(data.timer,1e3,function(){data.$nav.on("click.naver",".naver-handle",data,_onClick)}),_onClick(e)}function _onClick(e){e.preventDefault(),e.stopPropagation();var data=($(e.currentTarget),e.data);$(".naver").not(data.$nav).naver("close"),data.$nav.hasClass("open")?pub.close.apply(data.$nav):pub.open.apply(data.$nav)}function _onRespond(){var data=$(this).data("naver");data.mediaQuery.matches?pub.enable.apply(data.$nav):pub.disable.apply(data.$nav)}function _startTimer(timer,time,func,interval){return _clearTimer(timer,interval),interval===!0?setInterval(func,time):setTimeout(func,time)}function _clearTimer(timer){null!==timer&&(clearInterval(timer),timer=null)}var options={customClass:"",label:!0,labels:{closed:"Navigation",open:"Close"},maxWidth:"980px"},pub={close:function(){return $(this).each(function(i,nav){var data=$(nav).data("naver");data&&data.$nav.hasClass("enabled")&&(data.$wrapper.css({height:0}),data.label&&data.$handle.html(data.labels.closed),data.$nav.removeClass("open").trigger("close.naver"))})},defaults:function(opts){return options=$.extend(!0,options,opts||{}),$(this)},disable:function(){return $(this).each(function(i,nav){var data=$(nav).data("naver");data&&(data.$nav.removeClass("enabled"),data.$wrapper.css({height:""}))})},destroy:function(){return $(this).each(function(i,nav){var data=$(nav).data("naver");data&&(data.$handle.remove(),data.$container.contents().unwrap().unwrap(),data.$nav.removeClass("enabled disabled naver "+data.customClass).off(".naver").removeData("naver"))})},enable:function(){return $(this).each(function(i,nav){var data=$(nav).data("naver");data&&(data.$nav.addClass("enabled"),pub.close.apply(data.$nav))})},open:function(){return $(this).each(function(i,nav){var data=$(nav).data("naver");data&&data.$nav.hasClass("enabled")&&(data.$wrapper.css({height:data.$container.outerHeight(!0)}),data.label&&data.$handle.html(data.labels.open),data.$nav.addClass("open").trigger("open.naver"))})}};$.fn.naver=function(method){return pub[method]?pub[method].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof method&&method?this:_init.apply(this,arguments)},$.naver=function(method){"defaults"===method&&pub.defaults.apply(this,Array.prototype.slice.call(arguments,1))}}(jQuery,window); 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/dropdown.js b/js/dropdown.js deleted file mode 100644 index 60ccdcb..0000000 --- a/js/dropdown.js +++ /dev/null @@ -1,42 +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(); - }); - - // Toggle .dropdown-active on hover - $(".dropdown-hover").mouseenter(function(event) { - $(this).addClass("dropdown-active"); - event.stopPropagation(); - }); - } - }; - - $(function(){ - var dropdown = $('.dropdown'); - - new DropDown(dropdown); - - $(document).click(function() { - dropdown.removeClass('dropdown-active'); - }); - - $(".dropdown-menu").mouseleave(function() { - dropdown.removeClass("dropdown-active"); - }); - }); -}(jQuery)); diff --git a/js/naver.js b/js/naver.js deleted file mode 100644 index 76d4977..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); diff --git a/js/navigation.js b/js/navigation.js deleted file mode 100644 index cb676ac..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(); -}); diff --git a/js/non-responsive.js b/js/non-responsive.js deleted file mode 100644 index ee304a6..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(); -}); diff --git a/package.json b/package.json index 169147c..4eec325 100644 --- a/package.json +++ b/package.json @@ -1,31 +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": "http://concisecss.com", "devDependencies": { - "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-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" } } diff --git a/scss/base/_headings.scss b/scss/base/_headings.scss deleted file mode 100644 index f585e18..0000000 --- a/scss/base/_headings.scss +++ /dev/null @@ -1,168 +0,0 @@ -@if $use-headings == true { - //------------------------------------ - // HEADINGS - //------------------------------------ - - // Variables - $giga-sizes: ( - "extra-small": 48px, - "small": 64px, - "large": 80px, - "extra-large": 96px - ); - - $mega-sizes: ( - "extra-small": 40px, - "small": 48px, - "large": 64px, - "extra-large": 72px - ); - - $kilo-sizes: ( - "extra-small": 32px, - "small": 32px, - "large": 48px, - "extra-large": 64px - ); - - $h1-sizes: ( - "extra-small": 24px, - "small": 32px, - "medium": 36px - ); - - $h2-sizes: ( - "extra-small": 20px, - "small": 24px, - "medium": 30px - ); - - $h3-sizes: ( - "extra-small": 18px, - "small": 20px, - "medium": 24px - ); - - $h4-sizes: ( - "extra-small": 16px, - "small": 18px, - "medium": 20px - ); - - $h5-sizes: ( - "extra-small": 14px, - "small": 16px, - "medium": 18px - ); - - $h6-sizes: ( - "extra-small": 12px, - "small": 14px, - "medium": 16px - ); - - - // Font sizing - h1, h2, h3, h4, h5, h6, - .h1, .h2, .h3, .h4, .h5, .h6, - .giga, .mega, .kilo { - color: $base-heading-color; - font-family: $base-heading-font-family; - font-weight: normal; - text-rendering: optimizeLegibility; - - a { font-weight: inherit; } - - small { - color: $base-sub-heading-color; - font-size: 60%; - line-height: 1; - } - } - - h1, .h1 { - @include responsive("font-size" "line-height", map-get($h1-sizes, extra-small), - ( - "small" : map-get($h1-sizes, small), - "medium" : map-get($h1-sizes, medium) - ) - ); - } - - h2, .h2 { - @include responsive("font-size" "line-height", map-get($h2-sizes, extra-small), - ( - "small" : map-get($h2-sizes, small), - "medium" : map-get($h2-sizes, medium) - ) - ); - } - - h3, .h3 { - @include responsive("font-size" "line-height", map-get($h3-sizes, extra-small), - ( - "small" : map-get($h3-sizes, small), - "medium" : map-get($h3-sizes, medium) - ) - ); - } - - h4, .h4 { - @include responsive("font-size" "line-height", map-get($h4-sizes, extra-small), - ( - "small" : map-get($h4-sizes, small), - "medium" : map-get($h4-sizes, medium) - ) - ); - } - - h5, .h5 { - @include responsive("font-size" "line-height", map-get($h5-sizes, extra-small), - ( - "small" : map-get($h5-sizes, small), - "medium" : map-get($h5-sizes, medium) - ) - ); - } - - h6, .h6 { - @include responsive("font-size" "line-height", map-get($h6-sizes, extra-small), - ( - "small" : map-get($h6-sizes, small), - "medium" : map-get($h6-sizes, medium) - ) - ); - } - - - // Extra-large heading classes - .giga { - @include responsive("font-size" "line-height", map-get($giga-sizes, extra-small), - ( - "small" : map-get($giga-sizes, small), - "large" : map-get($giga-sizes, large), - "extra-large" : map-get($giga-sizes, extra-large) - ) - ); - } - - .mega { - @include responsive("font-size" "line-height", map-get($mega-sizes, extra-small), - ( - "small" : map-get($mega-sizes, small), - "large" : map-get($mega-sizes, large), - "extra-large" : map-get($mega-sizes, extra-large) - ) - ); - } - - .kilo { - @include responsive("font-size" "line-height", map-get($kilo-sizes, extra-small), - ( - "small" : map-get($kilo-sizes, small), - "large" : map-get($kilo-sizes, large), - "extra-large" : map-get($kilo-sizes, extra-large) - ) - ); - } -} diff --git a/scss/base/_main.scss b/scss/base/_main.scss deleted file mode 100644 index 1fc8985..0000000 --- a/scss/base/_main.scss +++ /dev/null @@ -1,34 +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, official); - } - } - - html, - body { - background-color: $website-bg-color; - color: $base-font-color; - font: normal normal $font-size/$line-height-integer $base-font-family; - margin: 0; - - @if $enable-font-smoothing == true { - font-smooth: always; - - -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; - } - } - - html[dir="rtl"] { direction: rtl; } -} diff --git a/scss/base/_print.scss b/scss/base/_print.scss deleted file mode 100644 index 50e8597..0000000 --- a/scss/base/_print.scss +++ /dev/null @@ -1,92 +0,0 @@ -@if $use-print == true { - //------------------------------------ - // PRINT - //------------------------------------ - @media print { - @page { margin: 0.5cm; } - - *, - *:before, - *:after { - background: transparent !important; - color: black !important; - text-shadow: none !important; - - @include vendor(filter, none !important, webkit moz ms official); - } - - body { - background-color: #fff; - color: #000; - font: 0.57em / 1.3 $base-print-font-family; - } - - 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, - a: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: "» "; } - } - } -} diff --git a/scss/base/_selection.scss b/scss/base/_selection.scss deleted file mode 100644 index 25e704f..0000000 --- a/scss/base/_selection.scss +++ /dev/null @@ -1,27 +0,0 @@ -@if $use-selection == true { - //------------------------------------ - // SELECTION - //------------------------------------ - - // Silent Class - %selection-style { - background-color: $selection-background; - color: $selection-color; - } - - - // Selection Style - * { - &::-webkit-selection { - @extend %selection-style; - } - - &::-moz-selection { - @extend %selection-style; - } - - &::selection { - @extend %selection-style; - } - } -} diff --git a/scss/base/_type.scss b/scss/base/_type.scss deleted file mode 100644 index 2e8392e..0000000 --- a/scss/base/_type.scss +++ /dev/null @@ -1,66 +0,0 @@ -@if $use-typography == true { - //------------------------------------ - // TYPE - //------------------------------------ - - // Variables - $small-size: 12px !default; - $micro-size: 10px !default; - - - // Links - a { - color: $base-link-color; - text-decoration: none; - - &:hover, - &:visited { - color: lighten($base-link-color, 10%); - cursor: pointer; - text-decoration: underline; - } - - p & { - &, - &:visited { line-height: inherit; } - } - } - - - // Sizing - small, - .small { - @include font-size($small-size); - } - - .micro { - @include font-size($micro-size); - } - - - // Addresses - address { font-style: normal; } - - - // Other elements - abbr { - &[title], - &[data-original-title] { - cursor: help; - border-bottom: 1px dotted #999; - } - } - - acronym { - cursor: help; - border-bottom: 1px dashed $base-link-color; - } - - kbd { - background-color: #333; - border-radius: 4px; - color: #fff; - font-size: 90%; - padding: 1px 4px; - } -} diff --git a/scss/base/_vertical-rhythm.scss b/scss/base/_vertical-rhythm.scss deleted file mode 100644 index d8de86a..0000000 --- a/scss/base/_vertical-rhythm.scss +++ /dev/null @@ -1,40 +0,0 @@ -@if $use-vertical-rhythm == 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, .form-item { - 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/components/_buttons.scss b/scss/components/_buttons.scss deleted file mode 100644 index 47275e8..0000000 --- a/scss/components/_buttons.scss +++ /dev/null @@ -1,174 +0,0 @@ -@if $use-buttons == true { - //------------------------------------ - // BUTTONS - //------------------------------------ - .btn { - background-color: $object-ui-color; - border: 0; - color: $button-font-color; - cursor: pointer; - display: inline-block; - font-family: inherit; - font-size: 100%; - line-height: 1; - padding: 0.5em 1em; - position: relative; - text-align: center; - text-decoration: none; - vertical-align: baseline; - white-space: nowrap; - - -webkit-touch-callout: none; - - @include vendor(user-select, none, webkit ms o official); - - @include vendor(user-drag, none, webkit); - - &::-moz-focus-inner { - padding: 0; - border: 0; - } - - &:hover { background-color: darken($object-ui-color, 10%); } - - &:active { background-color: darken($object-ui-color, 5%); } - - &[disabled] { - &, - &:hover, - &:active, - &:focus { - background: #dededc !important; - border: none; - color: #b3b3b1; - cursor: not-allowed; - } - } - - - // Background colors - @if $use-button-bg-colors == true { - @each $bg-color, $color in $bg-colors { - &.bg-#{$bg-color} { background-color: $color; } - - &.bg-#{$bg-color}:hover { background-color: darken($color, 10%); } - - &.bg-#{$bg-color}:active { background-color: darken($color, 5%); } - - @if $bg-color != "white" { - &.bg-light-#{$bg-color} { background-color: lighten($color, 32.5%); } - } - } - } - } - - a.btn { - &, - &:hover { - color: $button-hover-font-color; - text-decoration: none; - } - - &:active { outline: 0; } - } - - input[type="submit"].btn { - color: $button-font-color; - height: auto; - padding: 0.5em 1em; - } - - button.btn { color: $button-font-color; } - - - @if $use-button-styles == true { - // Full-width collapsed button - .btn-collapse-full { - display: block; - margin: 12px 0; - width: 100%; - - @include breakpoint(extra-small) { - & { - display: inline-block; - margin: 0; - width: auto; - } - } - } - - - // Button sizes - .btn-extra-small, - a.btn-extra-small, - p.btn-extra-small, - input.btn-extra-small { - @include font-size(10px); - padding: 0.25em 0.75em; - } - - .btn-small, - a.btn-small, - p.btn-small, - input.btn-small { @include font-size(12px); } - - .btn-large, - a.btn-large, - p.btn-large, - input.btn-large { - @include font-size(18px); - padding: 1em 2em; - } - - .btn-extra-large, - a.btn-extra-large, - p.btn-extra-large, - input.btn-extra-large { - @include font-size(24px); - padding: 1em 2em; - } - - - // Dropdowns - .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; } - } - } - } -} diff --git a/scss/components/_colors.scss b/scss/components/_colors.scss deleted file mode 100644 index 66f33ea..0000000 --- a/scss/components/_colors.scss +++ /dev/null @@ -1,25 +0,0 @@ -//------------------------------------ -// COLORS -//------------------------------------ - -// Background colors -@if $use-bg-colors == true { - @each $bg-color, $color in $bg-colors { - .bg-#{$bg-color}, - %bg-#{$bg-color} { background-color: $color; } - - @if $bg-color != "white" { - .bg-light-#{$bg-color}, - %bg-light-#{$bg-color} { background-color: lighten($color, 32.5%); } - } - } -} - - -// Type colors -@if $use-type-colors == true { - @each $type-color, $color in $type-colors { - .color-#{$type-color}, - %color-#{$type-color} { color: $color; } - } -} diff --git a/scss/components/_dropdowns.scss b/scss/components/_dropdowns.scss deleted file mode 100644 index c969ffd..0000000 --- a/scss/components/_dropdowns.scss +++ /dev/null @@ -1,155 +0,0 @@ -@if $use-dropdowns == true { - //------------------------------------ - // DROPDOWNS - //------------------------------------ - .dropdown { - cursor: pointer; - outline: none; - position: relative; - width: auto; - - .dropdown-menu { - background-color: $dropdown-bg-color; - border: 1px solid $dropdown-border-color; - border-radius: inherit; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - 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, ms official); - - 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; } - - li { - display: block; - padding: 5px 10px; - - @include vendor(transition, all 0.3s ease-out, ms official); - } - - li:hover { background-color: $dropdown-hover-color; } - - - // Headers - & > .dropdown-header { margin: 0; } - } - - ul.dropdown-menu { list-style-type: none; } - - &.dropdown-active .dropdown-menu { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; - pointer-events: auto; - } - - .dropdown-header { - color: $dropdown-header-color; - cursor: default; - @include font-size(14px); - margin: 12px 0 0; - padding: 0 0 0 9px; - } - - &.dropdown-collapse-full .dropdown-menu { width: 100%; } - - @include breakpoint(small) { - & { - .dropdown-menu { width: 200px; } - - &.dropdown-small .dropdown-menu { width: 150px; } - - &.dropdown-large .dropdown-menu { width: 350px; } - - &.dropdown-full .dropdown-menu { width: 100%; } - - &.dropdown-collapse-full .dropdown-menu { width: 200px; } - } - } - - .dropdown-header:hover, - li.dropdown-header:hover { background: none; } - - - // Arrows - &[class*='dropdown-arrow-'] .dropdown-menu { - margin-top: 10px; - - &:before, - &:after { - border-color: $dropdown-bg-color 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-width: 0 8px 8px 8px; - } - } - - &.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; } - } - } - } -} diff --git a/scss/components/_navigation.scss b/scss/components/_navigation.scss deleted file mode 100644 index 4262b60..0000000 --- a/scss/components/_navigation.scss +++ /dev/null @@ -1,133 +0,0 @@ - @if $use-navigation == true { - //------------------------------------ - // NAVIGATION - //------------------------------------ - - // Silent Class - %before-responsive-icon { - clear: both; - content: "."; - display: block; - height: 0; - line-height: 0; - text-align: center; - visibility: hidden; - } - - - // Navigation Styles - nav { - ul, - ol { - list-style: none; - margin: 0; - } - - li { - cursor: pointer; - position: relative; - - .dropdown & { margin-right: 0px; } - } - } - - - @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, ms official); - } - - .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: "\2261"; - text-align: right; - } - - &.nav-responsive-text.naver { - .naver-handle:after { content: "\00a0 \2261"; } - - .naver-container:before { - @extend %before-responsive-icon; - } - } - } - - - // Left-aligned responsive navigation - .nav-responsive-left { - &.naver .naver-handle { - text-align: left; - - &:before { - content: "\2261"; - text-align: left; - } - } - - &.nav-responsive-text.naver { - .naver-handle:before { content: "\2261 \00a0"; } - - .naver-container:after { - @extend %before-responsive-icon; - } - } - } - - - // Centered responsive navigation - .nav-responsive-center { - &.naver .naver-handle { - text-align: center; - - &:before { - content: "\2261"; - text-align: center; - } - } - - &.nav-responsive-text.naver { - .naver-handle:before { content: "\2261 \00a0"; } - - .naver-container:after { - @extend %before-responsive-icon; - } - } - } - } -} diff --git a/scss/concise.scss b/scss/concise.scss deleted file mode 100644 index bf51a6b..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 -//------------------------------------ -// Utility helpers -@import "helpers/variables"; -@import "helpers/functions"; -@import "helpers/mixins"; -@import "helpers/normalize"; -@import "helpers/clearfix"; - - - - -// Base styles -@import "base/main"; -@import "base/vertical-rhythm"; -@import "base/selection"; -@import "base/type"; -@import "base/headings"; - - - - -// Layout styles -@import "layout/container"; -@import "layout/grid"; -@import "layout/lists"; -@import "layout/forms"; -@import "layout/tables"; - - - - -// Component styles -@import "components/colors"; -@import "components/buttons"; -@import "components/dropdowns"; -@import "components/navigation"; - - - - -// Helpers -@import "helpers/helpers"; -@import "helpers/conditional"; -@import "base/print"; diff --git a/scss/helpers/_clearfix.scss b/scss/helpers/_clearfix.scss deleted file mode 100644 index 59c26c6..0000000 --- a/scss/helpers/_clearfix.scss +++ /dev/null @@ -1,8 +0,0 @@ -@if $use-clearfix == true { - //------------------------------------ - // CLEARFIX - //------------------------------------ - .clearfix { - @include clearfix(); - } -} diff --git a/scss/helpers/_conditional.scss b/scss/helpers/_conditional.scss deleted file mode 100644 index ecbb0fc..0000000 --- a/scss/helpers/_conditional.scss +++ /dev/null @@ -1,128 +0,0 @@ -//------------------------------------ -// CONDITIONAL -//------------------------------------ - -// Silent Classes -// (mixins have to be used instead of proper silent classes -// because of the scope of `@include` inside of media queries.) -@mixin show-conditional { - display: block; - visibility: visible; -} - -@mixin hide-conditional { - display: none; - visibility: hidden; -} - - -@if $use-conditional == true { - // 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 { - @include show-conditional; - } - - .hide-extra-small, - .show-small, - .show-medium, - .show-large, - .show-extra-large, - .show-print, - .show-hd { - @include hide-conditional; - } - - @include breakpoint(small) { - .show-small, - .hide-extra-small, - .hide-medium, - .hide-large, - .hide-extra-large { - @include show-conditional; - } - - .hide-small, - .show-extra-small, - .show-medium, - .show-large, - .show-extra-large { - @include hide-conditional; - } - } - - @include breakpoint(medium) { - .show-medium, - .hide-small, - .hide-extra-small, - .hide-large, - .hide-extra-large { - @include show-conditional; - } - - .hide-medium, - .show-small, - .show-extra-small, - .show-large, - .show-extra-large { - @include hide-conditional; - } - } - - @include breakpoint(large) { - .show-large, - .hide-extra-small, - .hide-small, - .hide-medium, - .hide-extra-large { - @include show-conditional; - } - - .hide-large, - .show-extra-small, - .show-small, - .show-medium, - .show-extra-large { - @include hide-conditional; - } - } - - @include breakpoint(extra-large) { - .show-extra-large, - .hide-extra-small, - .hide-small, - .hide-medium, - .hide-large { - @include show-conditional; - } - - .hide-extra-large, - .show-extra-small, - .show-small, - .show-medium, - .show-large { - @include hide-conditional; - } - } - - // 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 { - @include show-conditional; - } - - .hide-hd { - @include hide-conditional; - } - } -} diff --git a/scss/helpers/_functions.scss b/scss/helpers/_functions.scss deleted file mode 100644 index ad3f008..0000000 --- a/scss/helpers/_functions.scss +++ /dev/null @@ -1,32 +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; -} - - -// -// Strips the units from a value (px, em, etc). -// -@function strip-units($value) { - @return $value / ($value * 0 + 1); -} diff --git a/scss/helpers/_helpers.scss b/scss/helpers/_helpers.scss deleted file mode 100644 index 7665949..0000000 --- a/scss/helpers/_helpers.scss +++ /dev/null @@ -1,115 +0,0 @@ -@if $use-helper == true { - //------------------------------------ - // HELPER - //------------------------------------ - - // Add/remove floats - .float-left { float: left; } - - .float-right { float: right; } - - .float-none { float: none; } - - - // Position elements - .align-center, - %align-center { - display: block; - margin-left: auto; - margin-right: auto; - } - - .no-margin { margin: 0; } - - - // Displaying content - .inline { display: inline; } - - .show, - %show { - display: block; - visibility: visible; - } - - .hide, - %hide { - display: none; - visibility: hidden; - } - - - // Hide text - .screen-reader, - %screen-reader, - .text-hide, - %text-hide { - 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 { width: 100%; } - - img.full-width, - %full-width-image { - 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, - %weight-light { font-weight: 300; } - - .weight-normal, - %weight-normal { font-weight: 400; } - - .weight-semibold, - %weight-semibold { font-weight: 600; } - - - // All-caps text - .text-uppercase { text-transform: uppercase; } - - - // Stylized ampersand - .amp { font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; } - - - // 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; - } - - // Fluid container (ideal for img, embed object & iframe ) - .fluid { - max-width: 100%; - height: auto; - } - -} diff --git a/scss/helpers/_mixins.scss b/scss/helpers/_mixins.scss deleted file mode 100644 index 11cddc1..0000000 --- a/scss/helpers/_mixins.scss +++ /dev/null @@ -1,322 +0,0 @@ -//------------------------------------ -// 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. -// -// Parameters: -// $font-size: the font size (in pixels) to be converted to rem -// $rem-sizing: if you want to convert the font-size to rem or not (default is true) -// $line-height: set to false if you wish not to output a calculated line-height (defalt is true) -// -// Example: -// `@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, $rem-sizing: true, $line-height: true) { - font-size: $font-size; - - @if $rem-sizing == true { - font-size: calculate-rem($font-size); - } - - @if $line-height == true { - line-height: calculate-line-height($font-size); - } -} - - -// -// Proper vendor prefixes are created by passing -// a property, property value, and browser -// vendor (webkit, moz, ms, o, etc). -// -// Parameters: -// $property: what CSS property to generate vendor prefixes for -// $value: the value of what was defined in `$property` -// $vendors: what vendor prefixes to generate (default is none) -// -// Example: -// `@include vendor(border-radius, 4px, webkit moz ms)` -// -// -@mixin vendor($property, $value, $vendors: "") { - @each $vendor in $vendors { - @if $vendor != "" { - -#{$vendor}-#{$property}: $value; - } - } - - #{$property}: $value; -} - - -// -// Loops through all of the values in the `$breakpoints` -// map and outputs conditional statements used to generate -// media query code. -// -// When calling the mixin, if the parameter matches a key -// from the `breakpoints` map, a media query is output with -// that key's value. If an explicit value is set (ex: 360px) -// then a media query is output with that value. -// -// Parameters: -// $point: the breakpoint value for the media query output -// $min-max: set whether `min-width` or `max-width` is used (default is `min-width`) -// -// Example: -// `@include breakpoint(extra-small) { ... }` -// -// `@include breakpoint(360px) { ... }` -// -// -@mixin breakpoint($point, $use-max-width: false) { - $min-max: "min"; - - @if $use-max-width == true { - $min-max: "max"; - } - - @if type-of($point) == string { - @each $breakpoint-name, $breakpoint-value in $breakpoint-map { - @if $point == $breakpoint-name { - @media (#{$min-max}-width: $breakpoint-value) { - @content; - } - } - } - } @else { - @media (#{$min-max}-width: $point) { - @content; - } - } -} - - -// -// Generates property media queries for any CSS property, -// value, and set of breakpoints. Allows you to easily change -// property values based a set of breakpoints. -// -// Parameters: -// $properties: what CSS property to output inside of the media queries (can have multiple) -// $values: the value for each property (can have multiple) -// $responsive-values: what breakpoints to generate media queries for -// $use-available-mixins: whether or not to use mixin outputs for properties like `font-size` or `line-height` (default is true) -// -// Example: -// @include responsive("font-size", 11px, -// ( -// "small" : 12px, -// 450px : 13px, -// 1100px : 14px, -// "large" : 15px, -// 1600px : 16px, -// ) -// ); -// -// -@mixin responsive($properties, $values, $responsive-values, $use-available-mixins: true) { - @each $property in $properties { - @if $property == "font-size" and $use-available-mixins == true { - #{$property}: $values; - #{$property}: ($values / $base-font-size) * 1rem; - } @else if $property == "line-height" and $use-available-mixins == true { - #{$property}: ceil($values / $base-line-height) * ($base-line-height / $values); - } @else { - #{$property}: $values; - } - } - - @each $breakpoint, $value in $responsive-values { - @if type-of($breakpoint) == string { - @if(map-has-key($breakpoint-map, $breakpoint)) { - $breakpoint: map-get($breakpoint-map, $breakpoint); - } @else { - $breakpoint: "null"; - @warn "Couldn't find breakpoint: " + $breakpoint; - } - } - - @if $breakpoint != "null" { - @media (min-width: $breakpoint) { - @each $property in $properties { - @if $property == "font-size" and $use-available-mixins == true { - #{$property}: #{$value}; - #{$property}: ($value / $base-font-size) * 1rem; - } @else if $property == "line-height" and $use-available-mixins == true { - #{$property}: ceil($value / $base-line-height) * ($base-line-height / $value); - } @else { - #{$property}: #{$value}; - } - } - } - } - } -} - - -// -// Generates CSS to wrap semantic columns -// in a row. -// -// Example: -// `@include row()` -// -// -@mixin row() { - width: 100%; - - &:after { - clear: both; - content: " "; - display: table; - } -} - - -// -// Generates CSS for semantic columns. -// -// Parameters: -// $column: the number of this particular column (determines width) -// $number-columns: number of columns in the row (default is `$column-number`) -// $first-column: set to `true` if it's the first column in a row (default is false) -// $use-gutters: set to `true` if you want column gutters (default is false) -// $gutter-value: percentage value of the gutters to be applied (default is `$gutters` variable) -// -// Example: -// `@include column(16, 4, false, true, 4)` -// -// -@mixin column($column, $number-columns: $column-number, $first-column: false, $use-gutters: false, $gutter-value: strip-units($gutters)) { - @include vendor(background-clip, padding-box, webkit); - - @include breakpoint(small) { - @if $use-gutters == true { - $gutter-size: percentage($gutter-value) * 0.01; - $width-of-column: (100% - $gutter-size * ($number-columns - 1)) / $number-columns; - - float: left; - @if $first-column == false { - margin-left: $gutter-size; - } - width: $width-of-column * $column + $gutter-size * ($column - 1); - } @else { - float: left; - width: percentage(100 / $number-columns * $column) * .01; - } - } -} - - -// -// Generates CSS for pushing a semantic column left or right. -// -// Parameters: -// $option: set to `push` or `pull` to generate proper styles -// $column: the column number -// $number-columns: the number of columns in the row (default is $column-number) -// $use-gutters: set to `true` if your column has gutters (default is false) -// $gutter-value: percentage value of the gutters to be applied (default is `$gutters` variable) -// -// Example: -// `@include push-pull(push, 4, 16, true)` -// -// -@mixin push-pull($option, $column, $number-columns: $column-number, $use-gutters: false, $gutter-value: strip-units($gutters)) { - $property: ""; - - @if $option == "push" { - $property: "left"; - } @else { - $property: "right"; - } - - @if $use-gutters == true { - #{$property}: 100% / $number-columns * $column - $gutter-value; - } @else { - #{$property}: 100% / $number-columns * $column; - } -} - - -// -// Generates CSS that will clear both left -// and right floats. -// -// Example: -// `@include clearfix()` -// -// -@mixin clearfix() { - & { - &:after{ - content: ""; - display: table; - clear: both; - } - } -} - - -// -// Create variable-number grid columns given the value -// for variable `$column-number`. -// -// NOTE: -// This is a setup mixin for the Concise grid. If you -// wish to set up a grid, please use the `row()` and -// `column()` mixins. -// -@mixin grid-setup($number: $column-number) { - @for $i from 1 through $number { - $column-width-gutters: (100% - $gutters * ($number - 1)) / $number; - - .#{$column-prefix + $i} { - width: 100% / $number * $i; - - .gutters & { - width: $column-width-gutters * $i + $gutters * ($i - 1); - } - } - } -} - - -// -// Create `.push-` and `.pull-` classes given -// the value for variabls `$option` and -// `$column-number`. -// -// NOTE: -// This is a setup mixin for the push and pull -// functionality in the Concise grid. If you wish -// to use that functionality, please use the -// `push-pull()` mixin. -// -@mixin push-pull-setup($option, $number: $column-number) { - $property: ""; - - @if $option == "push" { - $property: "left"; - } @else { - $property: "right"; - } - - @for $i from 1 to $number { - .#{$option}-#{$i} { - #{$property}: 100% / $number * $i; - - .gutters & { - #{$property}: 100% / $number * $i - $gutters; - } - } - } -} diff --git a/scss/helpers/_normalize.scss b/scss/helpers/_normalize.scss deleted file mode 100644 index 56bdceb..0000000 --- a/scss/helpers/_normalize.scss +++ /dev/null @@ -1,191 +0,0 @@ -@if $use-normalize == true { - //------------------------------------ - // NORMALIZE - //------------------------------------ - html { - font-size: 100%; - @include vendor(text-size-adjust, 100%, webkit moz ms o official); - } - - 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, official); - } - - 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, official); - - &::-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; } -} diff --git a/scss/helpers/_variables.scss b/scss/helpers/_variables.scss deleted file mode 100644 index 0dd3733..0000000 --- a/scss/helpers/_variables.scss +++ /dev/null @@ -1,177 +0,0 @@ -//------------------------------------ -// BASE -//------------------------------------ - -// Website background (can use color or image) -$website-bg-color: #ffffff !default; - - -// Enable font smoothing? -$enable-font-smoothing: true !default; - - -// 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-heading-color: #181818 !default; -$base-sub-heading-color: #808080 !default; - - -// Base font-family -$base-font-family: "Droid Sans", Helvetica, Arial, sans-serif !default; -$base-heading-font-family: "Droid Sans", Helvetica, Arial, sans-serif !default; -$base-print-font-family: Georgia, "Times New Roman", Times, 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 -$breakpoint-map: ( - "extra-small": 30em, - "small": 48em, - "medium": 60em, - "large": 70em, - "extra-large": 80em -); - - - - -//------------------------------------ -// COLORS -//------------------------------------ - -// Background colors -$bg-colors: ( - white: #ffffff, - black: #222222, - gray: #999999, - green: #5cb85c, - blue: #5bc0de, - yellow: #ed9c28, - red: #d9534f -); - - -// Type colors -$type-colors: ( - white: #ffffff, - black: #222222, - gray: #999999, - green: #468847, - blue: #3a87ad, - yellow: #c09853, - red: #d2322d -); - - -// 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: #cccccc !default; - - -// Dropdown colors -$dropdown-bg-color: #ffffff !default; -$dropdown-border-color: #ededed !default; -$dropdown-hover-color: #f3f8f8 !default; -$dropdown-header-color: #aaaaaa !default; - - - -// Button font color -$button-font-color: #ffffff !default; -$button-hover-font-color: #ffffff !default; - - - - -//------------------------------------ -// Components -//------------------------------------ - -// 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; - - - - -//------------------------------------ -// 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-vertical-rhythm: true !default; - - -// Base -$use-main: true !default; -$use-selection: true !default; -$use-container: true !default; -$use-typography: true !default; -$use-headings: true !default; -$use-lists: true !default; - $use-list-styles: 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: true !default; - $use-pull: true !default; - - -// Components -$use-type-colors: true !default; -$use-bg-colors: true !default; -$use-buttons: true !default; - $use-button-bg-colors: true !default; - $use-button-styles: true !default; -$use-dropdowns: true !default; -$use-navigation: true !default; - $use-responsive-navigation: true !default; - - -// Helpers -$use-helper: true !default; -$use-conditional: true !default; -$use-print: true !default; diff --git a/scss/layout/_container.scss b/scss/layout/_container.scss deleted file mode 100644 index ee94342..0000000 --- a/scss/layout/_container.scss +++ /dev/null @@ -1,17 +0,0 @@ -@if $use-container == true { - //------------------------------------ - // CONTAINER - //------------------------------------ - .container { - margin: 0 auto; - - @include responsive("width", 90%, - ( - "small" : 620px, - "medium" : 768px, - "large" : 960px, - "extra-large" : 1140px - ) - ); - } -} diff --git a/scss/layout/_forms.scss b/scss/layout/_forms.scss deleted file mode 100644 index f140f65..0000000 --- a/scss/layout/_forms.scss +++ /dev/null @@ -1,103 +0,0 @@ -@if $use-forms == true { - //------------------------------------ - // FORMS - //------------------------------------ - input { - &[type="checkbox"], - &[type="file"], - &[type="image"], - &[type="radio"] { - background: auto; - border: auto; - height: auto; - width: auto; - } - } - - input[disabled], - select[disabled], - textarea[disabled] { - background-color: #f6f6f6; - cursor: not-allowed; - } - - label { display: block; } - - textarea { height: auto; } - - - @if $use-form-styles == true { - // Form styling - .form { - input, - select, - textarea { - border: 1px solid $object-ui-color; - height: 37px; - padding: 5px; - width: 100%; - - @include vendor(box-sizing, border-box, official); - - @include breakpoint(extra-small) { - & { width: 300px; } - } - } - - textarea { height: auto; } - - @include breakpoint(extra-small) { - input[type="submit"] { - display: block; - width: auto; - } - } - - input:focus, - select:focus, - textarea:focus, - button:focus, - [contenteditable="true"]:focus { outline: 1px solid darken($object-ui-color, 15%); } - - fieldset { - border: 1px solid $object-ui-color; - padding: 10px 25px; - - legend { - font-weight: bold; - @include font-size(13px); - padding: 0 10px; - } - } - } - - - // Block-level form items - .form-item { display: block; } - - - // Inline Form - .form-inline { - label { width: auto; } - - @include breakpoint(small) { - 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; } - } -} diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss deleted file mode 100644 index d0bbed0..0000000 --- a/scss/layout/_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, official); - - &.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-pull-setup(push, $column-number); - } - - - // Pull - @if $use-pull == true { - [class*='pull-'] { position: relative; } - - @include push-pull-setup(pull, $column-number); - } - } - - - // 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/layout/_lists.scss b/scss/layout/_lists.scss deleted file mode 100644 index 7be47a7..0000000 --- a/scss/layout/_lists.scss +++ /dev/null @@ -1,88 +0,0 @@ -@if $use-lists == true { - //------------------------------------ - // LISTS - //------------------------------------ - ul, - ol { - margin-left: 20px; - padding-left: 0px; - - li { - line-height: 1.75em; - position: relative; - } - - ul { - list-style-type: circle; - margin-bottom: auto; - - ul { list-style-type: square; } - - ol { list-style-type: lower-roman; } - - @include breakpoint(small) { - & { margin-left: 20px; } - } - } - - ol { - list-style-type: lower-latin; - margin-bottom: auto; - - ol { list-style-type: lower-roman; } - - ul { list-style-type: square; } - } - } - - - @if $use-list-styles == true { - // Unstyled - .list-unstyled { - margin-left: 0px; - list-style: none; - - ul { - list-style: none; - - ul { list-style: none; } - } - } - - - // Inline - .list-inline { - margin-left: 0px; - - li { - border-bottom: none; - display: inline; - margin-right: 15px; - - &:last-child { margin-right: 0px; } - - @include breakpoint(small) { - & { - margin-right: 15px; - - &:last-child { margin-right: 0px; } - } - } - - @include breakpoint(medium) { - & { - margin-right: 30px; - - &:last-child { margin-right: 0px; } - } - } - } - } - } - - - // Definition Lists - dt { font-weight: bold; } - - dd { margin-left: 0px; } -} diff --git a/scss/layout/_tables.scss b/scss/layout/_tables.scss deleted file mode 100644 index f39025a..0000000 --- a/scss/layout/_tables.scss +++ /dev/null @@ -1,63 +0,0 @@ -@if $use-tables == true { - //------------------------------------ - // TABLES - //------------------------------------ - - @if $use-table-styles == true { - table { - // Table styling - &.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 $object-ui-color; } - - th, - td { padding: 12px 15px; } - - td { border-top: 1px solid $object-ui-color; } - - @include breakpoint(extra-small) { - & { - width: auto; - - th, - td { padding: 10px 50px 10px 25px; } - } - } - } - - &.table-full, - &.table.table-full { width: 100%; } - } - } - - - // Responsive tables - .table-responsive { - overflow: auto; - width: 100%; - - table { margin-bottom: 0; } - - &::-webkit-scrollbar { - height: 14px; - width: 14px; - - -webkit-appearance: none; - } - - &::-webkit-scrollbar-thumb { - background-color: rgba(50, 50, 50, 0.2); - border: 3px solid #fff; - border-radius: 8px; - } - } -} 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. Stet2 clita2 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
    • +
+ +
    +
  1. List Item
    2. +
  2. List Item
    3. +
  3. List Item +
      +
    1. List Item
      2. +
    2. List Item
      3. +
    3. List Item +
        +
      1. List Item
        2. +
      2. List Item
        3. +
      3. List Item
        4. +
      +
      4. +
    +
    4. +
  4. List Item
    5. +
  5. List Item
    6. +
  6. List Item
    7. +
+ +
+
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 NameLast Name
Total Users:2
1JohnDoe
2JaneDoe
+ +
+

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ +
+ +

+ +

+ +
+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ +

+ + +

+ +
+ Files + + +
+ +

+ +

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