diff --git a/.gitignore b/.gitignore index 7be187f..42dd2d0 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,7 @@ __MACOSX/ # Sass cache /.sass-cache + +# Log files +*.log +*.log.* 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 6dfdb12..1c3c0f5 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2015 Concise +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 diff --git a/README.md b/README.md index 8ebbafa..bf05bb3 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,112 @@ # [

](http://concisecss.com/) -[![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/v3.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 with [NPM](https://www.npmjs.com/): `npm install concise.css` +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, [check out our documentation](http://concisecss.com/documentation) to get up and running. +## Installation -### Building the project +There are 4 different options to install Concise CSS in your website, although the recommended way is to use NPM. -Please refer to our [Contributing](https://github.com/ConciseCSS/concise.css/blob/master/CONTRIBUTING.md#building-the-project) page for instructions on compiling the SASS in the project. +### Using our CDN + +If you just want to try Concise CSS or of you do not have plans to customize the styles, you can use our CDN, this is the easier way to get started with the framework—and if you like it—is recommended to switch to NPM so that you can customize the styles. + + +```HTML + + + + + +``` + +#### Semantic versioning with CDN +All major and minor versions of Concise exist in its own folder on the CDN. You can use specific versions of Concise with the CDN by prefixing the CSS file with the version number in the URL. + +For example, you can use the latest version as such: + +```HTML + + + + + +``` + +**Note:** All patch versions of Concise get published automatically to the non-prefixed URL. Patch versions are not organized into a folder. + +### Install with NPM + +Execute the following command to install Concise CSS from NPM. If you are new to NPM, you can check their [documentation](https://docs.npmjs.com/). + +``` +npm install concise.css +``` + +Then you can include the main file inside your project: + +```scss +// +// myStyles.scss +// --------- + +// Concise Core +@import "node_modules/concise.css/concise"; +``` + +### Install with diamond + +Execute the following command to install Concise CSS from diamond. If you are new to diamond, you can check their [documentation](https://diamond.js.org/docs). + +``` +diamond install concise.css +``` + +Then you can include the main file inside your project: + +```scss +// +// myStyles.scss +// --------- + +// Concise Core +@import "~concise.css"; +``` + +### Copy the source files + +Finally, if you prefer, you can just copy the framework files to your project folder. +You can download the latest version from Github from [this link](https://github.com/ConciseCSS/concise.css/archive/master.zip), and place the files wherever you need them. + +## Building the source files + +To build the source files, you need to install the Concise CLI globally (locally if you compile the files with an NPM script): + +``` +npm install -g concise-cli +``` + +Once it is installed, you can compile source files with the `concisecss compile` command: + +``` +concisecss compile input.scss output.css +``` + +**Note**: When compiling the source code with the Concise CLI, Autoprefixer will automatically add the required browser prefixes for the last two browser versions. + +### Building with diamond +To build with diamond, simply use the `diamond compile` command. If you are new to diamond, you can check their [documentation](https://diamond.js.org/docs). + +``` +diamond compile -o output.css input.scss +``` ### Changelog @@ -49,7 +138,7 @@ 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 and then help however you'd like! +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 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 6027bd2..7f41523 100644 --- a/bower.json +++ b/bower.json @@ -1,13 +1,13 @@ { "name": "concise", "description": "A front-end framework written in SASS that's lightweight, and easy-to-use.", - "version": "3.1.1", + "version": "4.0.1", "ignore": [ ".gitignore", ".editorconfig", "README.md", "LICENSE", - "package.json" + "node_modules" ], "keywords": [ "css", diff --git a/composer.json b/composer.json index c7f5460..77fb9be 100644 --- a/composer.json +++ b/composer.json @@ -15,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 index f939c0f..b22b2db 100644 --- a/dist/concise.css +++ b/dist/concise.css @@ -1,317 +1,474 @@ +@charset "UTF-8"; /** - * Concise Framework + * ConciseCSS v4.1.2 * https://github.com/ConciseCSS/concise.css * - * Copyright 2015 Concise Team + * Copyright 2016 James Kolce, Keenan Payne and ConciseCSS Contributors * Released under the MIT license * http://opensource.org/licenses/MIT - * */ -:root { - -ms-overflow-style: -ms-autohiding-scrollbar; - overflow-y: scroll; - text-size-adjust: 100%; } - -audio:not([controls]) { - display: none; } - -details { - display: block; } - -input[type="number"] { - width: auto; } - -input[type="search"] { - -webkit-appearance: textfield; } - input[type="search"]::-webkit-search-cancel-button, - input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - +article, +aside, +details, +figcaption, +figure, +footer, +header, main, +menu, +nav, +section, summary { display: block; } -pre { - overflow: auto; } - -progress { +audio, +canvas, +progress, +video { display: inline-block; } -textarea { - overflow: auto; } +audio:not([controls]) { + display: none; + height: 0; } template, [hidden] { display: none; } -[unselectable] { - user-select: none; } +*, +::before, +::after { + background-repeat: no-repeat; + box-sizing: inherit; } + +::before, +::after { + text-decoration: inherit; + vertical-align: inherit; } :root { box-sizing: border-box; - color: #555; - cursor: default; font-family: "Helvetica", "Arial", sans-serif; - font-size: 14px; line-height: 1.5; - text-rendering: optimizeLegibility; - vertical-align: top; } - @media (min-width: 30em) { + -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: 16px; } } + font-size: 18px; } } -*, -::after, -::before { - box-sizing: inherit; - color: inherit; - font-family: inherit; - font-size: inherit; - line-height: inherit; - text-decoration: inherit; - vertical-align: inherit; } +code, +kbd, +pre, +samp { + font-family: "Consolas", monospace; + font-size: 0.83333rem; + background-color: #f5f5f5; } -* { - cursor: inherit; - margin: 0; - padding: 0; } +code, +kbd { + vertical-align: middle; + display: inline-block; + padding: 0 0.4em; } -body { - background-color: white; } +pre { + padding: 0.75rem 1em; } + pre > code { + white-space: pre; } -a, -button, -input[type="submit"], -input, -select, -textarea { - cursor: initial; } +kbd { + background-color: transparent; + outline: 1px solid #DCDCDC; } hr { - border: 0; - border-top: 1px solid #e0e0e0; - display: block; + background-color: #DCDCDC; height: 1px; - margin: 20px 0; } - -figure { - margin: 24px 1em; } + overflow: visible; + border: 0; } -figcaption { - color: #666; - font-style: italic; - text-align: center; } +nav ol, +nav ul { + padding-left: 0; } -::selection { - background-color: #d6d6d6; } +nav li { + list-style: none; } -::-moz-selection { - background-color: #d6d6d6; } +dt { + font-weight: bold; } blockquote { - border-left: 1px solid #e0e0e0; - color: #666; - margin-bottom: 20px; padding: 0 1em; } blockquote cite, blockquote footer { - display: block; - font-size: 80%; - font-style: italic; - margin-top: 10px; } - blockquote cite:before, - blockquote footer:before { - content: "\2014 \00A0"; } + 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; } -.blockquote--reverse { - border-left: none; - border-right: 1px solid #e0e0e0; - text-align: right; } +b, +strong { + font-weight: inherit; } -button, -input[type="submit"], -.button { - background-color: #4591aa; - border: none; - color: white; - cursor: pointer; - display: inline-block; - line-height: 48px; - overflow: visible; - padding: 0 2.5em; - text-align: center; - text-decoration: none; - transition: 150ms; - user-select: none; - vertical-align: middle; - white-space: nowrap; } - button:hover, - input[type="submit"]:hover, - button:focus, - input[type="submit"]:focus, - .button:hover, - .button:focus { - background-color: #75b3c7; - color: inherit; - text-decoration: none; } - button:focus, - input[type="submit"]:focus, - button:active, - input[type="submit"]:active, - .button:focus, - .button:active { - outline: none; } - button:active, - input[type="submit"]:active, - .button:active { - background-color: #63a8bf; } - button[disabled], - input[disabled][type="submit"], - .button[disabled] { - background-color: gainsboro; - color: white; - cursor: not-allowed; } +b, +strong { + font-weight: bolder; } -.button--muted { - background-color: #aaa; } - .button--muted:hover, - .button--muted:focus { - background-color: #d0d0d0; } - .button--muted:active { - background-color: #c3c3c3; } - -.button--primary { - background-color: #4591aa; } - .button--primary:hover, - .button--primary:focus { - background-color: #75b3c7; } - .button--primary:active { - background-color: #63a8bf; } - -.button--success { - background-color: #45ca69; } - .button--success:hover, - .button--success:focus { - background-color: #81db99; } - .button--success:active { - background-color: #6dd589; } - -.button--warning { - background-color: #ffb800; } - .button--warning:hover, - .button--warning:focus { - background-color: #ffcd4d; } - .button--warning:active { - background-color: #ffc633; } - -.button--error { - background-color: #ca4829; } - .button--error:hover, - .button--error:focus { - background-color: #df7961; } - .button--error:active { - background-color: #db674b; } - -.button--xsm { - font-size: 0.75em; - line-height: 32px; - padding: 0 1.5em; } - -.button--sm { - font-size: 0.875em; - line-height: 40px; - padding: 0 2em; } - -.button--lg { - font-size: 1.125em; - line-height: 56px; - padding: 0 3em; } - -.button--xlg { - font-size: 1.125em; - line-height: 64px; - padding: 0 3.5em; } - -.button--full { - width: 100%; } +dfn { + font-style: italic; } + +mark { + background-color: #ffff00; + color: #000000; } -.button--pill { - border-radius: 25px; } +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; } -.button--flat { +::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; - color: #555; } - .button--flat:hover { - background-color: rgba(0, 0, 0, 0.1); - color: #555; } - .button--flat[disabled] { - background-color: transparent; - color: #666; } + -webkit-text-decoration-skip: objects; + color: #C65146; + text-decoration: none; + -webkit-transition-duration: 150ms; + transition-duration: 150ms; } + a:hover, a:focus { + color: #7f2f27; } -.button--collapse { - width: 100%; } - @media (min-width: 30em) { - .button--collapse { - width: auto; } } +a:hover { + outline-width: 0; } -@media (min-width: 30em) { - form, - form [row] { - margin-bottom: 24px; } } +table { + border-collapse: collapse; + border-spacing: 0; } input, select, textarea { - border: 1px solid #e0e0e0; - border-radius: 3px; - font-size: 0.875em; - height: 32px; - padding: 0 0.75em; - transition: 150ms; - width: 100%; } + background-color: transparent; + border-style: none; + color: inherit; + font: inherit; } input:focus, select:focus, textarea:focus { - border-color: #74cbe8; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(69, 145, 170, 0.5); - outline: none; } - input[disabled], - select[disabled], - textarea[disabled] { - background-color: #f5f5f5; - cursor: not-allowed; } + outline: 2px solid #2b90d9; } +button, input[type="submit"], input { - line-height: normal; - min-height: 24px; } - input[type="checkbox"]:focus, - input[type="radio"]:focus, - input[type="range"]:focus, - input[type="file"]:focus, - input[type="color"]:focus, - input[type="submit"]:focus { - border-color: transparent; - box-shadow: none; - outline: none; } - input[type="submit"] { - line-height: normal; } - input[type="submit"].button { - border-radius: 0; } + overflow: visible; } -label { - display: block; - font-size: 0.875em; } +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 #e0e0e0; - border-radius: 3px; - padding: 24px 1em; - margin-bottom: 24px; } + border: 1px solid #DCDCDC; + padding: 1.5rem 1em; } legend { - font-size: 0.875em; - font-weight: bold; - padding: 0 1em; } + 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"], @@ -326,31 +483,23 @@ input[type="radio"] { padding: 0; vertical-align: middle; } -input[type="checkbox"] + label, -input[type="radio"] + label { - display: inline-block; - margin: 0 0 0 0.5em; - line-height: 30px; - vertical-align: middle; } - input[type="file"] { border: none; - line-height: 100%; + line-height: 1.5rem; padding: 0; } -textarea { - height: auto; - padding: 8px 1em; - resize: vertical; } - select { background-color: transparent; - border-radius: 5px; - padding: 0; } + padding-left: 0.5em; + width: auto; + min-width: 10em; + height: 2.25rem; } select[disabled] { - color: #666; } + color: #777; } select[multiple] { - height: auto; } + height: auto; + width: 100%; + padding: 0; } select::-ms-expand { display: none; } select::-ms-value { @@ -358,312 +507,362 @@ select { select option { padding: 0 0.75em; } -input[type="range"] { - border: none; - padding: 0; - width: 100%; - -webkit-appearance: none; } - input[type="range"]:focus { - outline: none; } - input[type="range"]::-webkit-slider-runnable-track { - background-color: gainsboro; - border: none; - border-radius: 3px; - height: 5px; } - input[type="range"]::-webkit-slider-thumb { - border: none; - border-radius: 50%; - background-color: #4591aa; - height: 16px; - margin-top: -5px; - width: 16px; - -webkit-appearance: none; } - input[type="range"]::-moz-range-track { - background-color: gainsboro; - border: none; - border-radius: 3px; - height: 5px; } - input[type="range"]::-moz-range-thumb { - border: none; - border-radius: 50%; - background-color: #4591aa; - height: 16px; - margin-top: -5px; - width: 16px; } - input[type="range"]::-ms-track { - background-color: gainsboro; - border: none; - border-radius: 3px; - color: transparent; - height: 5px; } - input[type="range"]::-ms-thumb { - border: none; - border-radius: 50%; - background-color: #4591aa; - height: 16px; - margin-top: -5px; - width: 16px; } - -.input--help { - color: #666; +label { display: block; - font-size: 0.75em; - font-weight: bold; - margin-top: 8px; } - -.form--inline input, -.form--inline select, -.form--inline textarea { - margin-bottom: 20px; } - -@media (min-width: 30em) { - .form--inline input, - .form--inline select, - .form--inline textarea { - display: inline-block; - margin-bottom: 0; - vertical-align: middle; - width: auto; } - .form--inline label { - display: inline; - margin-right: .5em; - vertical-align: middle; } - .form--inline input + label { - margin-left: 1em; } } - -.input--small { - font-size: 0.75em; - height: 24px; } - -.input--large { - height: 48px; - font-size: 1em; } - -.input--flat { - background-color: transparent; - border-color: transparent; - box-shadow: none; } - .input--flat:focus { - border-color: #74cbe8; } - -.input--success { - background-color: rgba(69, 202, 105, 0.15); - border-color: #45ca69; } - .input--success:focus { - border-color: #45ca69; } - -.input--warning { - background-color: rgba(255, 184, 0, 0.15); - border-color: #ffb800; } - .input--warning:focus { - border-color: #ffb800; } - -.input--error { - background-color: rgba(202, 72, 41, 0.15); - border-color: #ca4829; } - .input--error:focus { - border-color: #ca4829; } - -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6, -.giga, .mega, .kilo { - color: #222; - font-family: "Helvetica", "Arial", sans-serif; - line-height: 1.25em; } - h1 small, - h1 .small, h2 small, - h2 .small, h3 small, - h3 .small, h4 small, - h4 .small, h5 small, - h5 .small, h6 small, - h6 .small, - .h1 small, - .h1 .small, .h2 small, - .h2 .small, .h3 small, - .h3 .small, .h4 small, - .h4 .small, .h5 small, - .h5 .small, .h6 small, - .h6 .small, - .giga small, - .giga .small, .mega small, - .mega .small, .kilo small, - .kilo .small { - color: #666; - font-weight: lighter; - vertical-align: 0; } - -h1, h2, h3, -.h1, .h2, .h3, -.giga, .mega, .kilo { - margin: 20px 0 10px; } - h1 small, - h1 .small, h2 small, - h2 .small, h3 small, - h3 .small, - .h1 small, - .h1 .small, .h2 small, - .h2 .small, .h3 small, - .h3 .small, - .giga small, - .giga .small, .mega small, - .mega .small, .kilo small, - .kilo .small { - font-size: 65%; } - -h4, h5, h6, -.h4, .h5, .h6 { - margin: 10px 0; } - h4 small, - h4 .small, h5 small, - h5 .small, h6 small, - h6 .small, - .h4 small, - .h4 .small, .h5 small, - .h5 .small, .h6 small, - .h6 .small { - font-size: 75%; } - -h1, -.h1 { - font-size: 2.25em; } - @media (min-width: 48em) { - h1, - .h1 { - font-size: 3em; } } - -h2, -.h2 { - font-size: 1.6875em; } - @media (min-width: 48em) { - h2, - .h2 { - font-size: 2.25em; } } - -h3, -.h3 { - font-size: 1.3125em; } - @media (min-width: 48em) { - h3, - .h3 { - font-size: 1.75em; } } - -h4, -.h4 { - font-size: 1.125em; } - -h5, -.h5 { - font-size: 1em; } - -h6, -.h6 { - font-size: 0.875em; } - -.giga { - font-size: 3.75em; } - @media (min-width: 48em) { - .giga { - font-size: 5em; } } - -.mega { - font-size: 3em; } - @media (min-width: 48em) { - .mega { - font-size: 4em; } } - -.kilo { - font-size: 2.4375em; } - @media (min-width: 48em) { - .kilo { - font-size: 3.25em; } } + font-size: 0.83333rem; + line-height: 2.25rem; } -ul, -ol { - padding-left: 1.5em; - margin-bottom: 10px; } - ul ul, - ul ol, - ol ul, - ol ol { - margin-bottom: 0; } +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline-block; + margin-left: 0.5em; } -ul ul { - list-style-type: square; } - -ul ol { - list-style-type: lower-roman; } - -ol ol { - list-style-type: lower-roman; } - -ol ul { - list-style-type: square; } - -.list--unstyled { - list-style: none; - padding-left: 0; } - .list--unstyled li { - padding-left: 0; } - -.list--inline { - padding-left: 0; } - .list--inline li { - display: inline; - list-style: none; - padding-left: 1.5em; } - .list--inline li:first-child { - padding-left: 0; } +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; } -dl { - margin-bottom: 24px; } +[container] { + margin-left: auto; + margin-right: auto; + max-width: 1200px; + padding-left: 1rem; + padding-right: 1rem; + overflow: auto; } -dt { - font-weight: bold; } +[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; } } -dt, -dd { - margin-bottom: 10px; } - -@media (min-width: 60em) { - .dl--horizontal dt { - clear: left; - float: left; - overflow: hidden; - text-align: right; - text-overflow: ellipsis; - white-space: nowrap; - width: 150px; } - .dl--horizontal dd { - margin-left: 165px; } - .dl--horizontal dd:before, - .dl--horizontal dd:after { - content: ""; - display: table; } - .dl--horizontal dd:after { - clear: both; } } +[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: .5cm; } + margin: 2cm; } *, *:before, *:after { background: transparent !important; color: black !important; - filter: none !important; + -webkit-filter: none !important; + filter: none !important; text-shadow: none !important; } :root { background-color: white; color: black; - font: 11pt/1.3 "Georgia", "Times New Roman", "Times", serif; } + 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; } - .show--print { - display: block; - visibility: visible; } - .hide--print, video, audio, object, @@ -674,13 +873,9 @@ dd { display: none; visibility: hidden; } p, - h2, h3, - .h2, .h3 { + h2, h3 { orphans: 3; widows: 3; } - h2, h3, - .h2, .h3 { - page-break-after: avoid; } a, a:visited { color: black; @@ -695,14 +890,12 @@ dd { content: " (Source: " attr(cite) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } - a:after, - a[href^="javascript:"]:after, - a[href^="#"]:after { + a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, code { - background-color: none; - border: 1px solid #e0e0e0; + background-color: transparent; + border: 1px solid #DCDCDC; page-break-inside: avoid; } blockquote { border: none; @@ -723,1219 +916,3 @@ dd { ul li, ol li { content: "» "; } } - -@media print and (min-width: 30em) { - table { - page-break-inside: avoid; - width: 100% !important; } - table th, - table td { - line-height: 40px !important; } } - -@media print { - .badge, - .badge:before, - .badge *:after, - .label, - .label:before, - .label *:after, - .spinner, - .spinner:before, - .spinner *:after, - .tooltip, - .tooltip:before, - .tooltip *:after, - [data-hint], - [data-hint]:before, - [data-hint] *:after, - .progress, - .progress:before, - .progress *:after, - .breadcrumbs, - .breadcrumbs:before, - .breadcrumbs *:after, - .modal, - .modal:before, - .modal *:after, - .alert, - .alert:before, - .alert *:after { - display: none; - visibility: hidden; } } - -table { - border: 1px solid #e0e0e0; - border-collapse: collapse; - border-spacing: 0; - empty-cells: show; - margin-bottom: 24px; - width: 100%; } - table caption { - color: #555; - font-size: 85%; - font-style: italic; - line-height: 48px; - text-align: center; } - table thead { - background-color: #f5f5f5; - text-align: left; } - table th, - table td { - border-right: 1px solid #e0e0e0; - line-height: 24px; - overflow: visible; - padding: 8px 1em; } - @media (min-width: 30em) { - table th, - table td { - line-height: 48px; } } - table th:last-child, - table td:last-child { - border-right: none; } - table tr, - table td { - transition: background-color 150ms; } - @media (min-width: 30em) { - table { - width: auto; } - table th, - table td { - padding: 0 2.5em; } } - -.table--responsive { - overflow: auto; - width: 100%; } - .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 white; - border-radius: 8px; } - .table--responsive table { - margin-bottom: 0; } - -.table--full { - width: 100%; } - -.table--border { - border: 1px solid #e0e0e0; } - .table--border thead, - .table--border td { - border-bottom: 1px solid #e0e0e0; } - -.table--borderOuter { - border: 1px solid #e0e0e0; } - .table--borderOuter th, - .table--borderOuter td { - border-right: none; } - -.table--borderHorizontal thead, -.table--borderHorizontal td { - border-bottom: 1px solid #e0e0e0; } - -.table--borderHorizontal th, -.table--borderHorizontal td { - border-right: none; } - -.table--flat { - border: none; } - .table--flat td { - border-bottom: none; } - .table--flat th, - .table--flat td { - border-right: none; } - -.table--fillEven tbody tr:nth-child(even) { - background-color: #f5f5f5; } - -.table--fillOdd tbody tr:nth-child(odd) { - background-color: #f5f5f5; } - -.table--hoverRow tbody tr:hover { - background-color: #f5f5f5; } - -.table--hoverCell tbody td:hover { - background-color: #f5f5f5; } - -i, -em, -.italic { - font-style: italic; } - -b, -strong, -.bold { - font-weight: bold; } - -small, -.small { - font-size: 75%; - vertical-align: text-bottom; } - -p { - margin-bottom: 20px; } - -a { - background-color: transparent; - color: #4591aa; - cursor: pointer; - text-decoration: none; - transition: 150ms; } - a:hover, - a:focus { - color: #2f6374; } - -h1 a, h2 a, h3 a, -.h1 a, .h2 a, .h3 a { - color: #555; } - h1 a:hover, - h1 a:focus, h2 a:hover, - h2 a:focus, h3 a:hover, - h3 a:focus, - .h1 a:hover, - .h1 a:focus, .h2 a:hover, - .h2 a:focus, .h3 a:hover, - .h3 a:focus { - color: #4591aa; - text-decoration: none; } - -abbr[title] { - border-bottom: 1px dotted #e0e0e0; - cursor: help; } - -code, -pre, -kbd, -samp { - font-family: "Consolas", monospace; - font-size: 0.875em; } - -pre { - padding: 16px 1.5em; } - -code { - vertical-align: middle; - white-space: nowrap; } - -code, -pre { - background-color: #f5f5f5; - border: 1px solid #e0e0e0; - border-radius: 3px; - color: #484848; - margin-bottom: 24px; } - -code { - padding: 2px 3px; } - -pre code { - background-color: transparent; - border: none; - padding: 0; - vertical-align: inherit; - white-space: pre; } - -.pre--flat { - background-color: transparent; - border: 0; - border-radius: none; - padding: 0; } - -kbd { - background-color: transparent; - border: 1px solid #e0e0e0; - border-radius: 3px; - box-shadow: 0 2px 0 -1px white, 0 2px 0 gainsboro; - display: inline-block; - line-height: 1.75; - margin: -3px 2px 0; - padding: 2px 6px 0; - white-space: nowrap; } - -address { - font-style: normal; } - -[container] { - box-sizing: border-box; - margin: 0 auto; - max-width: 1200px; - padding-left: 15px; - padding-right: 15px; - width: 100%; } - -[row] { - margin-left: -15px; - margin-right: -15px; - margin-bottom: 0; } - [row]:before, - [row]:after { - content: ""; - display: table; } - [row]:after { - clear: both; } - -[column] { - box-sizing: border-box; - float: left; - margin-bottom: 0; - width: 100%; - padding-left: 15px; - padding-right: 15px; } - -@media (min-width: 48em) { - [column~="1"] { - width: 8.33333%; } - [column~="2"] { - width: 16.66667%; } - [column~="3"] { - width: 25%; } - [column~="4"] { - width: 33.33333%; } - [column~="5"] { - width: 41.66667%; } - [column~="6"] { - width: 50%; } - [column~="7"] { - width: 58.33333%; } - [column~="8"] { - width: 66.66667%; } - [column~="9"] { - width: 75%; } - [column~="10"] { - width: 83.33333%; } - [column~="11"] { - width: 91.66667%; } - [column~="12"] { - 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%; } } - -.text--muted { - color: #aaa !important; } - -.bg--muted { - background-color: #aaa !important; } - -.text--primary { - color: #4591aa !important; } - -.bg--primary { - background-color: #4591aa !important; } - -.text--success { - color: #45ca69 !important; } - -.bg--success { - background-color: #45ca69 !important; } - -.text--warning { - color: #ffb800 !important; } - -.bg--warning { - background-color: #ffb800 !important; } - -.text--error { - color: #ca4829 !important; } - -.bg--error { - background-color: #ca4829 !important; } - -.show--xsm, -.hide--sm, -.hide--md, -.hide--lg, -.hide--xlg, -.hide--print, -.hide--hd { - display: block; - visibility: visible; } - -.hide--xsm, -.show--sm, -.show--md, -.show--lg, -.show--xlg, -.show--print, -.show--hd { - display: none; - visibility: hidden; } - -@media (min-width: 48em) { - .show--sm, - .hide--xsm, - .hide--md, - .hide--lg, - .hide--xlg { - display: block; - visibility: visible; } - .hide--sm, - .show--xsm, - .show--md, - .show--lg, - .show--xlg { - display: none; - visibility: hidden; } } - -@media (min-width: 60em) { - .show--md, - .hide--sm, - .hide--xsm, - .hide--lg, - .hide--xlg { - display: block; - visibility: visible; } - .hide--md, - .show--sm, - .show--xsm, - .show--lg, - .show--xlg { - display: none; - visibility: hidden; } } - -@media (min-width: 70em) { - .show--lg, - .hide--xsm, - .hide--sm, - .hide--md, - .hide--xlg { - display: block; - visibility: visible; } - .hide--lg, - .show--xsm, - .show--sm, - .show--md, - .show--xlg { - display: none; - visibility: hidden; } } - -@media (min-width: 80em) { - .show--xlg, - .hide--xsm, - .hide--sm, - .hide--md, - .hide--lg { - display: block; - visibility: visible; } - .hide--xlg, - .show--xsm, - .show--sm, - .show--md, - .show--lg { - 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; } } - -.text--left { - text-align: left; } - -.text--center { - text-align: center; } - -.text--right { - text-align: right; } - -.text--justify { - text-align: justify; } - -.float--none { - float: none; } - -.float--right { - float: right; } - -.float--left { - float: left; } - -.clearfix:before, -.clearfix:after { - content: ""; - display: table; } - -.clearfix:after { - clear: both; } - -.center--all { - left: 50%; - position: absolute; - text-align: center; - top: 50%; - transform: translate(-50%, -50%); } - -.media--fluid { - max-width: 100%; - height: auto; } - -.screenreader { - border: 0 none; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; } - .screenreader:active, - .screenreader:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; } - -/** - * Concise UI - * https://github.com/ConciseCSS/concise.css - * - * Copyright 2015 Concise Team - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ -.alert { - background-color: #f5f5f5; - border: 1px solid #e0e0e0; - border-radius: 3px; - color: inherit; - font-size: 0.875em; - margin: 20px 0; - padding: 8px 1em; - position: relative; } - .alert p { - margin: 0; } - .alert a { - color: #222222; } - .alert a:hover { - text-decoration: underline; } - -.alert-close { - color: inherit; - float: right; - opacity: .5; - transition: opacity 150ms; } - .alert-close:hover { - opacity: 1; } - .alert-close:hover, - .alert-close:focus { - text-decoration: none; } - -a.alert-close:hover { - text-decoration: none; } - -.alert--muted { - background-color: rgba(170, 170, 170, 0.15); - border-color: rgba(170, 170, 170, 0.2); - color: #909090; } - .alert--muted a { - color: #777777; } - -.alert--primary { - background-color: rgba(69, 145, 170, 0.15); - border-color: rgba(69, 145, 170, 0.2); - color: #367286; } - .alert--primary a { - color: #285361; } - -.alert--success { - background-color: rgba(69, 202, 105, 0.15); - border-color: rgba(69, 202, 105, 0.2); - color: #31ab52; } - .alert--success a { - color: #25843f; } - -.alert--warning { - background-color: rgba(255, 184, 0, 0.15); - border-color: rgba(255, 184, 0, 0.2); - color: #cc9300; } - .alert--warning a { - color: #996e00; } - -.alert--error { - background-color: rgba(202, 72, 41, 0.15); - border-color: rgba(202, 72, 41, 0.2); - color: #a03920; } - .alert--error a { - color: #752a18; } - -.badge { - background-color: #4591aa; - border-radius: 25px; - color: white; - display: inline-block; - font-size: 0.75em; - line-height: 24px; - padding: 0 0.75em; } - -.breadcrumbs { - background-color: #f5f5f5; - border: 1px solid #e0e0e0; - border-radius: 3px; - font-size: 0.75em; - margin-bottom: 24px; - padding: 8px 0.5em; } - .breadcrumbs li { - display: inline; - list-style: none; - padding-left: .75em; } - .breadcrumbs li:after { - color: #c7c7c7; - content: "\002f"; - padding-left: .75em; } - .breadcrumbs li:last-child:after { - content: ""; - padding-left: 0; } - .breadcrumbs li.is-active, - .breadcrumbs li.is-active a { - color: #4d4d4d; } - -.breadcrumbs--flat { - background-color: transparent; - border: none; - border-radius: 0; - padding: 0; } - -.button--bordered { - background-color: transparent; - border: 1px solid #4591aa; - color: #4591aa; } - .button--bordered:hover, - .button--bordered:focus { - background-color: #4591aa; - color: white; } - -.border--muted { - border-color: #aaa; - color: #aaa; } - .border--muted:hover, - .border--muted:focus { - background-color: #aaa; - color: white; } - .border--muted:active { - background-color: #c3c3c3; } - -.border--primary { - border-color: #4591aa; - color: #4591aa; } - .border--primary:hover, - .border--primary:focus { - background-color: #4591aa; - color: white; } - .border--primary:active { - background-color: #63a8bf; } - -.border--success { - border-color: #45ca69; - color: #45ca69; } - .border--success:hover, - .border--success:focus { - background-color: #45ca69; - color: white; } - .border--success:active { - background-color: #6dd589; } - -.border--warning { - border-color: #ffb800; - color: #ffb800; } - .border--warning:hover, - .border--warning:focus { - background-color: #ffb800; - color: white; } - .border--warning:active { - background-color: #ffc633; } - -.border--error { - border-color: #ca4829; - color: #ca4829; } - .border--error:hover, - .border--error:focus { - background-color: #ca4829; - color: white; } - .border--error:active { - background-color: #db674b; } - -.button--prefix { - padding-left: 0; } - .button--prefix .prefix { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)); - display: inline-block; - margin-right: 1.25em; - padding: 0 1em; - vertical-align: 0; } - .button--prefix.button--bordered .prefix { - background-image: none; - border-right: 1px solid currentColor; } - -.button--affix { - padding-right: 0; } - .button--affix .affix { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)); - display: inline-block; - margin-left: 1.25em; - padding: 0 1em; - vertical-align: 0; } - .button--affix.button--bordered .affix { - background-image: none; - border-left: 1px solid currentColor; } - -.card { - background-color: white; - border: 1px solid #e0e0e0; - margin-bottom: 24px; - overflow: hidden; - position: relative; } - -.card-content { - padding: 24px 1.5em; } - -.card-title { - display: block; - margin-top: 10px; } - -.card-content p { - margin-bottom: 0; } - -.card-content p + p { - margin-bottom: 20px; } - -.card-footer { - border-top: 1px solid #e0e0e0; - font-size: 0.875em; - padding: 16px 1.5em; } - -.card-image { - position: relative; } - .card-image img { - bottom: 0; - left: 0; - position: relative; - right: 0; - top: 0; - width: 100%; } - .card-image .card-title { - bottom: 0; - color: white; - left: 0; - padding: 0 1em; - position: absolute; } - -.collection { - border: 1px solid #e0e0e0; - border-radius: 3px; - list-style-type: none; - margin: 24px 0; - padding: 0; } - -.collection-item, -.collection-header { - border-bottom: 1px solid #e0e0e0; - display: block; - margin: 0; - padding: 8px 1em; } - .collection-item:last-of-type, - .collection-header:last-of-type { - border-bottom: none; } - .collection-item.is-active, - .collection-header.is-active { - background-color: #f5f5f5; } - -a.collection-item:hover { - background-color: #f5f5f5; } - -.collection-header { - padding: 0 1em; } - -.dropdown { - cursor: auto; - display: inline-block; - outline: none; - position: relative; } - .dropdown:focus { - pointer-events: none; } - .dropdown:focus .dropdown-content { - opacity: 1; - visibility: visible; } - .dropdown.no-pointer-events { - pointer-events: auto !important; } - .dropdown.no-visibility .dropdown-content { - display: none; - visibility: visible !important; } - .dropdown.no-visibility:focus .dropdown-content { - display: block; } - .dropdown.no-opacity .dropdown-content { - opacity: 1 !important; } - -.dropdown-content { - background-color: white; - border: 1px solid #e0e0e0; - color: #555; - left: 0; - margin-top: 8px; - opacity: 0; - padding: 8px 1em; - pointer-events: auto; - position: absolute; - text-align: left; - transition: all 150ms; - visibility: hidden; - width: 200px; - z-index: 1; } - .dropdown-content:before, - .dropdown-content:after { - border: solid transparent; - bottom: 100%; - content: ""; - height: 0; - left: 1.5em; - pointer-events: none; - position: absolute; - width: 0; } - .dropdown-content:before { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: #e0e0e0; - border-width: 7px; - margin-left: -7px; } - .dropdown-content:after { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: white; - border-width: 6px; - margin-left: -6px; } - .dropdown-content li { - font-size: 0.875em; - list-style-type: none; - margin: 0; - padding: 8px 1em; - transition: background-color 150ms; - white-space: nowrap; } - .dropdown-content li:hover { - background-color: #f5f5f5; } - -ul.dropdown-content, -ol.dropdown-content { - padding: 0; } - -.dropdown--hover:hover { - pointer-events: none; } - .dropdown--hover:hover .dropdown-content { - opacity: 1; - visibility: visible; } - -.dropdown--small .dropdown-content { - width: 150px; } - -.dropdown--large .dropdown-content { - width: 300px; } - -.dropdown--top .dropdown-content { - bottom: 100%; - margin-top: 0; - margin-bottom: 8px; } - .dropdown--top .dropdown-content:before, - .dropdown--top .dropdown-content:after { - top: 100%; } - .dropdown--top .dropdown-content:after { - border-color: rgba(255, 255, 255, 0); - border-top-color: white; } - .dropdown--top .dropdown-content:before { - border-color: rgba(255, 255, 255, 0); - border-top-color: #e0e0e0; } - -.group { - display: inline-block; - margin-bottom: 24px; - padding: 0; } - .group:before, - .group:after { - content: ""; - display: table; } - .group:after { - clear: both; } - .group span { - margin-top: 0; } - -.group-item { - border: 1px solid #e0e0e0; - display: inline-block; - float: left; - font-size: 0.875em; - line-height: 32px; - list-style: none; - padding: 0 1em; - transition: background-color 150ms; } - .group-item:not(:first-child) { - margin: 0 0 0 -1px; } - .group-item:hover { - background-color: #f5f5f5; } - .group-item:first-child { - border-radius: 3px 0 0 3px; } - .group-item:last-child { - border-radius: 0 3px 3px 0; } - .group-item.is-active { - background-color: #f5f5f5; } - -.label { - background-color: #4591aa; - border-radius: 3px; - color: white; - display: inline-block; - font-size: 0.75em; - line-height: 24px; - padding: 0 1em; } - -.modal { - background-color: rgba(40, 46, 49, 0.5); - bottom: 0; - left: 0; - margin: 0; - opacity: 0; - pointer-events: none; - position: fixed; - right: 0; - top: 0; - transition: opacity ease-in 150ms; - z-index: 1000002; } - .modal:target { - opacity: 1; - pointer-events: auto; } - -.modal-container { - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); - margin: 15% auto; - position: relative; - width: 90%; } - @media (min-width: 48em) { - .modal-container { - width: 526px; } } - -.modal-header { - background-color: #4591aa; - color: white; - padding: 16px 1.5em; } - .modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6, - .modal-header .h1, .modal-header .h2, .modal-header .h3, .modal-header .h4, .modal-header .h5, .modal-header .h6, - .modal-header .giga, .modal-header .mega, .modal-header .kilo { - color: inherit; - display: inline; } - -.modal-body, -.modal-footer { - background-color: white; - margin-top: 0; } - -.modal-body { - padding: 32px 2.5em 8px; } - .modal-body p { - margin-bottom: 24px; } - -.modal-footer { - border-top: 1px solid #e0e0e0; - font-size: 0.875em; - margin: 0; - padding: 24px 2.5em; } - .modal-footer p { - margin-bottom: 0; } - -.modal-close { - color: white; - float: right; - margin: 0; - opacity: .5; - transition: opacity 150ms; } - .modal-close:hover { - opacity: 1; } - .modal-close:hover, - .modal-close:focus { - text-decoration: none; } - -@media (min-width: 48em) { - .modal--small .modal-container { - width: 360px; } } - -@media (min-width: 48em) { - .modal--large .modal-container { - width: 760px; } } - -@media (min-width: 48em) { - .modal--full .modal-container { - width: 90%; } } - -.modal--flat .modal-header { - background-color: white; - color: #555; - padding: 1.5em 2.5em 0; } - .modal--flat .modal-header h1, .modal--flat .modal-header h2, .modal--flat .modal-header h3, .modal--flat .modal-header h4, .modal--flat .modal-header h5, .modal--flat .modal-header h6, - .modal--flat .modal-header .h1, .modal--flat .modal-header .h2, .modal--flat .modal-header .h3, .modal--flat .modal-header .h4, .modal--flat .modal-header .h5, .modal--flat .modal-header .h6 { - color: inherit; } - -.modal--flat .modal-close { - color: #555; - line-height: 1; - margin: 0; } - -.progress { - background-color: #f5f5f5; - border-radius: 3px; - box-shadow: inset 0 1px 1px rgba(224, 224, 224, 0.25); - box-sizing: initial; - color: white; - font-size: 0.6875em; - height: 14px; - line-height: 1.2; - margin-bottom: 24px; - position: relative; - text-align: center; - width: 100%; } - -.progress > span { - background-color: #4591aa; - border-radius: 3px; - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); - display: block; - height: 100%; - overflow: hidden; - position: relative; - width: auto; } - -.progress--small { - font-size: 0.5625em; - height: 10px; - line-height: 1.2; } - -.progress--large { - font-size: 1em; - height: 25px; - line-height: 1.7; } - -.progress--stacked > span { - border-radius: 0; - display: inline-block; - float: left; - margin-top: 0; } - .progress--stacked > span:first-of-type { - border-radius: 3px 0 0 3px; } - .progress--stacked > span:last-of-type { - border-radius: 0 3px 3px 0; } - -.progress--striped > span:after, .progress--striped > span > span { - background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - background-size: 50px 50px; - bottom: 0; - content: ""; - left: 0; - overflow: hidden; - position: absolute; - right: 0; - top: 0; - z-index: 1; } - -.progress--striped.progress--animate > span:after, .progress--striped.progress--animate > span > span { - animation: move 2s linear infinite; } - -@keyframes move { - 0% { - background-position: 0 0; } - 100% { - background-position: 50px 50px; } } - -@-moz-keyframes move { - 0% { - background-position: 0 0; } - 100% { - background-position: 50px 50px; } } - -@-webkit-keyframes move { - 0% { - background-position: 0 0; } - 100% { - background-position: 50px 50px; } } - -.spinner { - animation: rotate 0.8s infinite linear; - border: 3px solid #b5b5b5; - border-radius: 50%; - border-right-color: transparent; - height: 30px; - margin: 24px auto; - width: 30px; } - -@keyframes rotate { - 0% { - transform: rotate(0deg); } - 100% { - transform: rotate(360deg); } } - -.tooltip, -[data-hint] { - display: inline-block; - position: relative; } - .tooltip:before, - .tooltip:after, - [data-hint]:before, - [data-hint]:after { - border-radius: 2px; - opacity: 0; - position: absolute; - pointer-events: none; - transform: translate3d(0, 0, 0); - transition: 100ms; - transition-delay: 0ms; - visibility: hidden; - z-index: 1000000; } - .tooltip:before, - [data-hint]:before { - background-color: transparent; - border: 8px solid transparent; - content: ""; - position: absolute; - z-index: 1000001; } - .tooltip:after, - [data-hint]:after { - background-color: #282E31; - color: white; - content: attr(data-hint); - font-size: 0.75em; - padding: 0.25em 0.5em; - text-decoration: none; - white-space: nowrap; } - .tooltip:hover:before, - .tooltip:hover:after, - .tooltip:focus:before, - .tooltip:focus:after, - [data-hint]:hover:before, - [data-hint]:hover:after, - [data-hint]:focus:before, - [data-hint]:focus:after { - opacity: 1; - visibility: visible; } - .tooltip:hover:before, - .tooltip:hover:after, - [data-hint]:hover:before, - [data-hint]:hover:after { - transition-delay: 100ms; } - -.tooltip--top:before { - border-top-color: #282E31; - margin-bottom: -12px; } - -.tooltip--top:after { - margin-left: -18px; } - -.tooltip--top:before, -.tooltip--top:after { - bottom: 100%; - left: 50%; } - -.tooltip--top:hover:after, -.tooltip--top:hover:before { - transform: translateY(-8px); } - -.tooltip--top:focus:after, -.tooltip--top:focus:before { - transform: translateY(-8px); - transition: 150ms; } - -.tooltip--bottom:before { - border-bottom-color: #282E31; - margin-top: -12px; } - -.tooltip--bottom:after { - margin-left: -18px; } - -.tooltip--bottom:before, -.tooltip--bottom:after { - left: 50%; - top: 100%; } - -.tooltip--bottom:hover:after, -.tooltip--bottom:hover:before, -.tooltip--bottom:focus:after, -.tooltip--bottom:focus:before { - transform: translateY(8px); } - -.tooltip--right:before { - border-right-color: #282E31; - margin-bottom: -8px; - margin-left: -12px; } - -.tooltip--right:after { - margin-bottom: -12px; } - -.tooltip--right:before, -.tooltip--right:after { - bottom: 50%; - left: 105%; } - -.tooltip--right:hover:after, -.tooltip--right:hover:before, -.tooltip--right:focus:after, -.tooltip--right:focus:before { - transform: translateX(8px); } - -.tooltip--left:before { - border-left-color: #282E31; - margin-bottom: -8px; - margin-right: -12px; } - -.tooltip--left:after { - margin-bottom: -12px; } - -.tooltip--left:before, -.tooltip--left:after { - bottom: 50%; - right: 100%; } - -.tooltip--left:hover:after, -.tooltip--left:hover:before, -.tooltip--left:focus:after, -.tooltip--left:focus:before { - transform: translateX(-8px); } - -.tooltip--always:before, -.tooltip--always:after { - opacity: 1; - visibility: visible; } - -.tooltip--always .tooltip--top:before, -.tooltip--always .tooltip--top:after { - transform: translateY(-8px); } - -.tooltip--always .tooltip--right:before, -.tooltip--always .tooltip--right:after { - transform: translateY(8px); } - -.tooltip--always .tooltip--bottom:before, -.tooltip--always .tooltip--bottom:after { - transform: translateX(-8px); } - -.tooltip--always .tooltip--left:before, -.tooltip--always .tooltip--left:after { - transform: translateX(8px); } diff --git a/dist/concise.min.css b/dist/concise.min.css index bf26614..51b4ee6 100644 --- a/dist/concise.min.css +++ b/dist/concise.min.css @@ -1 +1 @@ -:root{-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}audio:not([controls]){display:none}details{display:block}input[type="number"]{width:auto}input[type="search"]{-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}main,summary{display:block}pre{overflow:auto}progress{display:inline-block}textarea{overflow:auto}template,[hidden]{display:none}[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:root{box-sizing:border-box;color:#555;cursor:default;font-family:"Helvetica","Arial",sans-serif;font-size:14px;line-height:1.5;text-rendering:optimizeLegibility;vertical-align:top}@media(min-width:30em){:root{font-size:16px}}*,::after,::before{box-sizing:inherit;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;text-decoration:inherit;vertical-align:inherit}*{cursor:inherit;margin:0;padding:0}body{background-color:white}a,button,input[type="submit"],input,select,textarea{cursor:initial}hr{border:0;border-top:1px solid #e0e0e0;display:block;height:1px;margin:20px 0}figure{margin:24px 1em}figcaption{color:#666;font-style:italic;text-align:center}::-moz-selection{background-color:#d6d6d6}::selection{background-color:#d6d6d6}::-moz-selection{background-color:#d6d6d6}blockquote{border-left:1px solid #e0e0e0;color:#666;margin-bottom:20px;padding:0 1em}blockquote cite,blockquote footer{display:block;font-size:80%;font-style:italic;margin-top:10px}blockquote cite:before,blockquote footer:before{content:"\2014 \00A0"}.blockquote--reverse{border-left:none;border-right:1px solid #e0e0e0;text-align:right}button,input[type="submit"],.button{background-color:#4591aa;border:0;color:white;cursor:pointer;display:inline-block;line-height:48px;overflow:visible;padding:0 2.5em;text-align:center;text-decoration:none;-webkit-transition:150ms;transition:150ms;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}button:hover,input[type="submit"]:hover,button:focus,input[type="submit"]:focus,.button:hover,.button:focus{background-color:#75b3c7;color:inherit;text-decoration:none}button:focus,input[type="submit"]:focus,button:active,input[type="submit"]:active,.button:focus,.button:active{outline:0}button:active,input[type="submit"]:active,.button:active{background-color:#63a8bf}button[disabled],input[disabled][type="submit"],.button[disabled]{background-color:gainsboro;color:white;cursor:not-allowed}.button--muted{background-color:#aaa}.button--muted:hover,.button--muted:focus{background-color:#d0d0d0}.button--muted:active{background-color:#c3c3c3}.button--primary{background-color:#4591aa}.button--primary:hover,.button--primary:focus{background-color:#75b3c7}.button--primary:active{background-color:#63a8bf}.button--success{background-color:#45ca69}.button--success:hover,.button--success:focus{background-color:#81db99}.button--success:active{background-color:#6dd589}.button--warning{background-color:#ffb800}.button--warning:hover,.button--warning:focus{background-color:#ffcd4d}.button--warning:active{background-color:#ffc633}.button--error{background-color:#ca4829}.button--error:hover,.button--error:focus{background-color:#df7961}.button--error:active{background-color:#db674b}.button--xsm{font-size:.75em;line-height:32px;padding:0 1.5em}.button--sm{font-size:.875em;line-height:40px;padding:0 2em}.button--lg{font-size:1.125em;line-height:56px;padding:0 3em}.button--xlg{font-size:1.125em;line-height:64px;padding:0 3.5em}.button--full{width:100%}.button--pill{border-radius:25px}.button--flat{background-color:transparent;color:#555}.button--flat:hover{background-color:rgba(0,0,0,0.1);color:#555}.button--flat[disabled]{background-color:transparent;color:#666}.button--collapse{width:100%}@media(min-width:30em){.button--collapse{width:auto}}@media(min-width:30em){form,form [row]{margin-bottom:24px}}input,select,textarea{border:1px solid #e0e0e0;border-radius:3px;font-size:.875em;height:32px;padding:0 .75em;-webkit-transition:150ms;transition:150ms;width:100%}input:focus,select:focus,textarea:focus{border-color:#74cbe8;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px rgba(69,145,170,0.5);outline:0}input[disabled],select[disabled],textarea[disabled]{background-color:#f5f5f5;cursor:not-allowed}input{line-height:normal;min-height:24px}input[type="checkbox"]:focus,input[type="radio"]:focus,input[type="range"]:focus,input[type="file"]:focus,input[type="color"]:focus,input[type="submit"]:focus{border-color:transparent;box-shadow:none;outline:0}input[type="submit"]{line-height:normal}input[type="submit"].button{border-radius:0}label{display:block;font-size:.875em}fieldset{border:1px solid #e0e0e0;border-radius:3px;padding:24px 1em;margin-bottom:24px}legend{font-size:.875em;font-weight:bold;padding:0 1em}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="checkbox"]+label,input[type="radio"]+label{display:inline-block;margin:0 0 0 .5em;line-height:30px;vertical-align:middle}input[type="file"]{border:0;line-height:100%;padding:0}textarea{height:auto;padding:8px 1em;resize:vertical}select{background-color:transparent;border-radius:5px;padding:0}select[disabled]{color:#666}select[multiple]{height:auto}select::-ms-expand{display:none}select::-ms-value{color:currentColor}select option{padding:0 .75em}input[type="range"]{border:0;padding:0;width:100%;-webkit-appearance:none}input[type="range"]:focus{outline:0}input[type="range"]::-webkit-slider-runnable-track{background-color:gainsboro;border:0;border-radius:3px;height:5px}input[type="range"]::-webkit-slider-thumb{border:0;border-radius:50%;background-color:#4591aa;height:16px;margin-top:-5px;width:16px;-webkit-appearance:none}input[type="range"]::-moz-range-track{background-color:gainsboro;border:0;border-radius:3px;height:5px}input[type="range"]::-moz-range-thumb{border:0;border-radius:50%;background-color:#4591aa;height:16px;margin-top:-5px;width:16px}input[type="range"]::-ms-track{background-color:gainsboro;border:0;border-radius:3px;color:transparent;height:5px}input[type="range"]::-ms-thumb{border:0;border-radius:50%;background-color:#4591aa;height:16px;margin-top:-5px;width:16px}.input--help{color:#666;display:block;font-size:.75em;font-weight:bold;margin-top:8px}.form--inline input,.form--inline select,.form--inline textarea{margin-bottom:20px}@media(min-width:30em){.form--inline input,.form--inline select,.form--inline textarea{display:inline-block;margin-bottom:0;vertical-align:middle;width:auto}.form--inline label{display:inline;margin-right:.5em;vertical-align:middle}.form--inline input+label{margin-left:1em}}.input--small{font-size:.75em;height:24px}.input--large{height:48px;font-size:1em}.input--flat{background-color:transparent;border-color:transparent;box-shadow:none}.input--flat:focus{border-color:#74cbe8}.input--success{background-color:rgba(69,202,105,0.15);border-color:#45ca69}.input--success:focus{border-color:#45ca69}.input--warning{background-color:rgba(255,184,0,0.15);border-color:#ffb800}.input--warning:focus{border-color:#ffb800}.input--error{background-color:rgba(202,72,41,0.15);border-color:#ca4829}.input--error:focus{border-color:#ca4829}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.giga,.mega,.kilo{color:#222;font-family:"Helvetica","Arial",sans-serif;line-height:1.25em}h1 small,h1 .small,h2 small,h2 .small,h3 small,h3 .small,h4 small,h4 .small,h5 small,h5 .small,h6 small,h6 .small,.h1 small,.h1 .small,.h2 small,.h2 .small,.h3 small,.h3 .small,.h4 small,.h4 .small,.h5 small,.h5 .small,.h6 small,.h6 .small,.giga small,.giga .small,.mega small,.mega .small,.kilo small,.kilo .small{color:#666;font-weight:lighter;vertical-align:0}h1,h2,h3,.h1,.h2,.h3,.giga,.mega,.kilo{margin:20px 0 10px}h1 small,h1 .small,h2 small,h2 .small,h3 small,h3 .small,.h1 small,.h1 .small,.h2 small,.h2 .small,.h3 small,.h3 .small,.giga small,.giga .small,.mega small,.mega .small,.kilo small,.kilo .small{font-size:65%}h4,h5,h6,.h4,.h5,.h6{margin:10px 0}h4 small,h4 .small,h5 small,h5 .small,h6 small,h6 .small,.h4 small,.h4 .small,.h5 small,.h5 .small,.h6 small,.h6 .small{font-size:75%}h1,.h1{font-size:2.25em}@media(min-width:48em){h1,.h1{font-size:3em}}h2,.h2{font-size:1.6875em}@media(min-width:48em){h2,.h2{font-size:2.25em}}h3,.h3{font-size:1.3125em}@media(min-width:48em){h3,.h3{font-size:1.75em}}h4,.h4{font-size:1.125em}h5,.h5{font-size:1em}h6,.h6{font-size:.875em}.giga{font-size:3.75em}@media(min-width:48em){.giga{font-size:5em}}.mega{font-size:3em}@media(min-width:48em){.mega{font-size:4em}}.kilo{font-size:2.4375em}@media(min-width:48em){.kilo{font-size:3.25em}}ul,ol{padding-left:1.5em;margin-bottom:10px}ul ul,ul ol,ol ul,ol ol{margin-bottom:0}ul ul{list-style-type:square}ul ol{list-style-type:lower-roman}ol ol{list-style-type:lower-roman}ol ul{list-style-type:square}.list--unstyled{list-style:none;padding-left:0}.list--unstyled li{padding-left:0}.list--inline{padding-left:0}.list--inline li{display:inline;list-style:none;padding-left:1.5em}.list--inline li:first-child{padding-left:0}dl{margin-bottom:24px}dt{font-weight:bold}dt,dd{margin-bottom:10px}@media(min-width:60em){.dl--horizontal dt{clear:left;float:left;overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap;width:150px}.dl--horizontal dd{margin-left:165px}.dl--horizontal dd:before,.dl--horizontal dd:after{content:"";display:table}.dl--horizontal dd:after{clear:both}}@media print{@page{margin:.5cm}*,*: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:11pt/1.3 "Georgia","Times New Roman","Times",serif}img{max-width:100%!important;page-break-after:avoid;page-break-inside:avoid}.show--print{display:block;visibility:visible}.hide--print,video,audio,object,embed,nav,footer,a[href^="#"]:after{display:none;visibility:hidden}p,h2,h3,.h2,.h3{orphans:3;widows:3}h2,h3,.h2,.h3{page-break-after:avoid}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:none;border:1px solid #e0e0e0;page-break-inside:avoid}blockquote{border:0;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:"» "}}@media print and (min-width:30em){table{page-break-inside:avoid;width:100%!important}table th,table td{line-height:40px!important}}@media print{.badge,.badge:before,.badge *:after,.label,.label:before,.label *:after,.spinner,.spinner:before,.spinner *:after,.tooltip,.tooltip:before,.tooltip *:after,[data-hint],[data-hint]:before,[data-hint] *:after,.progress,.progress:before,.progress *:after,.breadcrumbs,.breadcrumbs:before,.breadcrumbs *:after,.modal,.modal:before,.modal *:after,.alert,.alert:before,.alert *:after{display:none;visibility:hidden}}table{border:1px solid #e0e0e0;border-collapse:collapse;border-spacing:0;empty-cells:show;margin-bottom:24px;width:100%}table caption{color:#555;font-size:85%;font-style:italic;line-height:48px;text-align:center}table thead{background-color:#f5f5f5;text-align:left}table th,table td{border-right:1px solid #e0e0e0;line-height:24px;overflow:visible;padding:8px 1em}@media(min-width:30em){table th,table td{line-height:48px}}table th:last-child,table td:last-child{border-right:0}table tr,table td{-webkit-transition:background-color 150ms;transition:background-color 150ms}@media(min-width:30em){table{width:auto}table th,table td{padding:0 2.5em}}.table--responsive{overflow:auto;width:100%}.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 white;border-radius:8px}.table--responsive table{margin-bottom:0}.table--full{width:100%}.table--border{border:1px solid #e0e0e0}.table--border thead,.table--border td{border-bottom:1px solid #e0e0e0}.table--borderOuter{border:1px solid #e0e0e0}.table--borderOuter th,.table--borderOuter td{border-right:0}.table--borderHorizontal thead,.table--borderHorizontal td{border-bottom:1px solid #e0e0e0}.table--borderHorizontal th,.table--borderHorizontal td{border-right:0}.table--flat{border:0}.table--flat td{border-bottom:0}.table--flat th,.table--flat td{border-right:0}.table--fillEven tbody tr:nth-child(even){background-color:#f5f5f5}.table--fillOdd tbody tr:nth-child(odd){background-color:#f5f5f5}.table--hoverRow tbody tr:hover{background-color:#f5f5f5}.table--hoverCell tbody td:hover{background-color:#f5f5f5}i,em,.italic{font-style:italic}b,strong,.bold{font-weight:bold}small,.small{font-size:75%;vertical-align:text-bottom}p{margin-bottom:20px}a{background-color:transparent;color:#4591aa;cursor:pointer;text-decoration:none;-webkit-transition:150ms;transition:150ms}a:hover,a:focus{color:#2f6374}h1 a,h2 a,h3 a,.h1 a,.h2 a,.h3 a{color:#555}h1 a:hover,h1 a:focus,h2 a:hover,h2 a:focus,h3 a:hover,h3 a:focus,.h1 a:hover,.h1 a:focus,.h2 a:hover,.h2 a:focus,.h3 a:hover,.h3 a:focus{color:#4591aa;text-decoration:none}abbr[title]{border-bottom:1px dotted #e0e0e0;cursor:help}code,pre,kbd,samp{font-family:"Consolas",monospace;font-size:.875em}pre{padding:16px 1.5em}code{vertical-align:middle;white-space:nowrap}code,pre{background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:3px;color:#484848;margin-bottom:24px}code{padding:2px 3px}pre code{background-color:transparent;border:0;padding:0;vertical-align:inherit;white-space:pre}.pre--flat{background-color:transparent;border:0;border-radius:none;padding:0}kbd{background-color:transparent;border:1px solid #e0e0e0;border-radius:3px;box-shadow:0 2px 0 -1px white,0 2px 0 gainsboro;display:inline-block;line-height:1.75;margin:-3px 2px 0;padding:2px 6px 0;white-space:nowrap}address{font-style:normal}[container]{box-sizing:border-box;margin:0 auto;max-width:1200px;padding-left:15px;padding-right:15px;width:100%}[row]{margin-left:-15px;margin-right:-15px;margin-bottom:0}[row]:before,[row]:after{content:"";display:table}[row]:after{clear:both}[column]{box-sizing:border-box;float:left;margin-bottom:0;width:100%;padding-left:15px;padding-right:15px}@media(min-width:48em){[column~="1"]{width:8.33333%}[column~="2"]{width:16.66667%}[column~="3"]{width:25%}[column~="4"]{width:33.33333%}[column~="5"]{width:41.66667%}[column~="6"]{width:50%}[column~="7"]{width:58.33333%}[column~="8"]{width:66.66667%}[column~="9"]{width:75%}[column~="10"]{width:83.33333%}[column~="11"]{width:91.66667%}[column~="12"]{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%}}.text--muted{color:#aaa!important}.bg--muted{background-color:#aaa!important}.text--primary{color:#4591aa!important}.bg--primary{background-color:#4591aa!important}.text--success{color:#45ca69!important}.bg--success{background-color:#45ca69!important}.text--warning{color:#ffb800!important}.bg--warning{background-color:#ffb800!important}.text--error{color:#ca4829!important}.bg--error{background-color:#ca4829!important}.show--xsm,.hide--sm,.hide--md,.hide--lg,.hide--xlg,.hide--print,.hide--hd{display:block;visibility:visible}.hide--xsm,.show--sm,.show--md,.show--lg,.show--xlg,.show--print,.show--hd{display:none;visibility:hidden}@media(min-width:48em){.show--sm,.hide--xsm,.hide--md,.hide--lg,.hide--xlg{display:block;visibility:visible}.hide--sm,.show--xsm,.show--md,.show--lg,.show--xlg{display:none;visibility:hidden}}@media(min-width:60em){.show--md,.hide--sm,.hide--xsm,.hide--lg,.hide--xlg{display:block;visibility:visible}.hide--md,.show--sm,.show--xsm,.show--lg,.show--xlg{display:none;visibility:hidden}}@media(min-width:70em){.show--lg,.hide--xsm,.hide--sm,.hide--md,.hide--xlg{display:block;visibility:visible}.hide--lg,.show--xsm,.show--sm,.show--md,.show--xlg{display:none;visibility:hidden}}@media(min-width:80em){.show--xlg,.hide--xsm,.hide--sm,.hide--md,.hide--lg{display:block;visibility:visible}.hide--xlg,.show--xsm,.show--sm,.show--md,.show--lg{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}}.text--left{text-align:left}.text--center{text-align:center}.text--right{text-align:right}.text--justify{text-align:justify}.float--none{float:none}.float--right{float:right}.float--left{float:left}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.center--all{left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.media--fluid{max-width:100%;height:auto}.screenreader{border:0 none;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.screenreader:active,.screenreader:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.alert{background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:3px;color:inherit;font-size:.875em;margin:20px 0;padding:8px 1em;position:relative}.alert p{margin:0}.alert a{color:#222}.alert a:hover{text-decoration:underline}.alert-close{color:inherit;float:right;opacity:.5;-webkit-transition:opacity 150ms;transition:opacity 150ms}.alert-close:hover{opacity:1}.alert-close:hover,.alert-close:focus{text-decoration:none}a.alert-close:hover{text-decoration:none}.alert--muted{background-color:rgba(170,170,170,0.15);border-color:rgba(170,170,170,0.2);color:#909090}.alert--muted a{color:#777}.alert--primary{background-color:rgba(69,145,170,0.15);border-color:rgba(69,145,170,0.2);color:#367286}.alert--primary a{color:#285361}.alert--success{background-color:rgba(69,202,105,0.15);border-color:rgba(69,202,105,0.2);color:#31ab52}.alert--success a{color:#25843f}.alert--warning{background-color:rgba(255,184,0,0.15);border-color:rgba(255,184,0,0.2);color:#cc9300}.alert--warning a{color:#996e00}.alert--error{background-color:rgba(202,72,41,0.15);border-color:rgba(202,72,41,0.2);color:#a03920}.alert--error a{color:#752a18}.badge{background-color:#4591aa;border-radius:25px;color:white;display:inline-block;font-size:.75em;line-height:24px;padding:0 .75em}.breadcrumbs{background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:3px;font-size:.75em;margin-bottom:24px;padding:8px .5em}.breadcrumbs li{display:inline;list-style:none;padding-left:.75em}.breadcrumbs li:after{color:#c7c7c7;content:"\002f";padding-left:.75em}.breadcrumbs li:last-child:after{content:"";padding-left:0}.breadcrumbs li.is-active,.breadcrumbs li.is-active a{color:#4d4d4d}.breadcrumbs--flat{background-color:transparent;border:0;border-radius:0;padding:0}.button--bordered{background-color:transparent;border:1px solid #4591aa;color:#4591aa}.button--bordered:hover,.button--bordered:focus{background-color:#4591aa;color:white}.border--muted{border-color:#aaa;color:#aaa}.border--muted:hover,.border--muted:focus{background-color:#aaa;color:white}.border--muted:active{background-color:#c3c3c3}.border--primary{border-color:#4591aa;color:#4591aa}.border--primary:hover,.border--primary:focus{background-color:#4591aa;color:white}.border--primary:active{background-color:#63a8bf}.border--success{border-color:#45ca69;color:#45ca69}.border--success:hover,.border--success:focus{background-color:#45ca69;color:white}.border--success:active{background-color:#6dd589}.border--warning{border-color:#ffb800;color:#ffb800}.border--warning:hover,.border--warning:focus{background-color:#ffb800;color:white}.border--warning:active{background-color:#ffc633}.border--error{border-color:#ca4829;color:#ca4829}.border--error:hover,.border--error:focus{background-color:#ca4829;color:white}.border--error:active{background-color:#db674b}.button--prefix{padding-left:0}.button--prefix .prefix{background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.15),rgba(0,0,0,0.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0.15),rgba(0,0,0,0.15));display:inline-block;margin-right:1.25em;padding:0 1em;vertical-align:0}.button--prefix.button--bordered .prefix{background-image:none;border-right:1px solid currentColor}.button--affix{padding-right:0}.button--affix .affix{background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.15),rgba(0,0,0,0.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0.15),rgba(0,0,0,0.15));display:inline-block;margin-left:1.25em;padding:0 1em;vertical-align:0}.button--affix.button--bordered .affix{background-image:none;border-left:1px solid currentColor}.card{background-color:white;border:1px solid #e0e0e0;margin-bottom:24px;overflow:hidden;position:relative}.card-content{padding:24px 1.5em}.card-title{display:block;margin-top:10px}.card-content p{margin-bottom:0}.card-content p+p{margin-bottom:20px}.card-footer{border-top:1px solid #e0e0e0;font-size:.875em;padding:16px 1.5em}.card-image{position:relative}.card-image img{bottom:0;left:0;position:relative;right:0;top:0;width:100%}.card-image .card-title{bottom:0;color:white;left:0;padding:0 1em;position:absolute}.collection{border:1px solid #e0e0e0;border-radius:3px;list-style-type:none;margin:24px 0;padding:0}.collection-item,.collection-header{border-bottom:1px solid #e0e0e0;display:block;margin:0;padding:8px 1em}.collection-item:last-of-type,.collection-header:last-of-type{border-bottom:0}.collection-item.is-active,.collection-header.is-active{background-color:#f5f5f5}a.collection-item:hover{background-color:#f5f5f5}.collection-header{padding:0 1em}.dropdown{cursor:auto;display:inline-block;outline:0;position:relative}.dropdown:focus{pointer-events:none}.dropdown:focus .dropdown-content{opacity:1;visibility:visible}.dropdown.no-pointer-events{pointer-events:auto!important}.dropdown.no-visibility .dropdown-content{display:none;visibility:visible!important}.dropdown.no-visibility:focus .dropdown-content{display:block}.dropdown.no-opacity .dropdown-content{opacity:1!important}.dropdown-content{background-color:white;border:1px solid #e0e0e0;color:#555;left:0;margin-top:8px;opacity:0;padding:8px 1em;pointer-events:auto;position:absolute;text-align:left;-webkit-transition:all 150ms;transition:all 150ms;visibility:hidden;width:200px;z-index:1}.dropdown-content:before,.dropdown-content:after{border:solid transparent;bottom:100%;content:"";height:0;left:1.5em;pointer-events:none;position:absolute;width:0}.dropdown-content:before{border-color:rgba(255,255,255,0);border-bottom-color:#e0e0e0;border-width:7px;margin-left:-7px}.dropdown-content:after{border-color:rgba(255,255,255,0);border-bottom-color:white;border-width:6px;margin-left:-6px}.dropdown-content li{font-size:.875em;list-style-type:none;margin:0;padding:8px 1em;-webkit-transition:background-color 150ms;transition:background-color 150ms;white-space:nowrap}.dropdown-content li:hover{background-color:#f5f5f5}ul.dropdown-content,ol.dropdown-content{padding:0}.dropdown--hover:hover{pointer-events:none}.dropdown--hover:hover .dropdown-content{opacity:1;visibility:visible}.dropdown--small .dropdown-content{width:150px}.dropdown--large .dropdown-content{width:300px}.dropdown--top .dropdown-content{bottom:100%;margin-top:0;margin-bottom:8px}.dropdown--top .dropdown-content:before,.dropdown--top .dropdown-content:after{top:100%}.dropdown--top .dropdown-content:after{border-color:rgba(255,255,255,0);border-top-color:white}.dropdown--top .dropdown-content:before{border-color:rgba(255,255,255,0);border-top-color:#e0e0e0}.group{display:inline-block;margin-bottom:24px;padding:0}.group:before,.group:after{content:"";display:table}.group:after{clear:both}.group span{margin-top:0}.group-item{border:1px solid #e0e0e0;display:inline-block;float:left;font-size:.875em;line-height:32px;list-style:none;padding:0 1em;-webkit-transition:background-color 150ms;transition:background-color 150ms}.group-item:not(:first-child){margin:0 0 0 -1px}.group-item:hover{background-color:#f5f5f5}.group-item:first-child{border-radius:3px 0 0 3px}.group-item:last-child{border-radius:0 3px 3px 0}.group-item.is-active{background-color:#f5f5f5}.label{background-color:#4591aa;border-radius:3px;color:white;display:inline-block;font-size:.75em;line-height:24px;padding:0 1em}.modal{background-color:rgba(40,46,49,0.5);bottom:0;left:0;margin:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;-webkit-transition:opacity ease-in 150ms;transition:opacity ease-in 150ms;z-index:1000002}.modal:target{opacity:1;pointer-events:auto}.modal-container{box-shadow:0 1px 3px 0 rgba(0,0,0,0.1);margin:15% auto;position:relative;width:90%}@media(min-width:48em){.modal-container{width:526px}}.modal-header{background-color:#4591aa;color:white;padding:16px 1.5em}.modal-header h1,.modal-header h2,.modal-header h3,.modal-header h4,.modal-header h5,.modal-header h6,.modal-header .h1,.modal-header .h2,.modal-header .h3,.modal-header .h4,.modal-header .h5,.modal-header .h6,.modal-header .giga,.modal-header .mega,.modal-header .kilo{color:inherit;display:inline}.modal-body,.modal-footer{background-color:white;margin-top:0}.modal-body{padding:32px 2.5em 8px}.modal-body p{margin-bottom:24px}.modal-footer{border-top:1px solid #e0e0e0;font-size:.875em;margin:0;padding:24px 2.5em}.modal-footer p{margin-bottom:0}.modal-close{color:white;float:right;margin:0;opacity:.5;-webkit-transition:opacity 150ms;transition:opacity 150ms}.modal-close:hover{opacity:1}.modal-close:hover,.modal-close:focus{text-decoration:none}@media(min-width:48em){.modal--small .modal-container{width:360px}}@media(min-width:48em){.modal--large .modal-container{width:760px}}@media(min-width:48em){.modal--full .modal-container{width:90%}}.modal--flat .modal-header{background-color:white;color:#555;padding:1.5em 2.5em 0}.modal--flat .modal-header h1,.modal--flat .modal-header h2,.modal--flat .modal-header h3,.modal--flat .modal-header h4,.modal--flat .modal-header h5,.modal--flat .modal-header h6,.modal--flat .modal-header .h1,.modal--flat .modal-header .h2,.modal--flat .modal-header .h3,.modal--flat .modal-header .h4,.modal--flat .modal-header .h5,.modal--flat .modal-header .h6{color:inherit}.modal--flat .modal-close{color:#555;line-height:1;margin:0}.progress{background-color:#f5f5f5;border-radius:3px;box-shadow:inset 0 1px 1px rgba(224,224,224,0.25);box-sizing:initial;color:white;font-size:.6875em;height:14px;line-height:1.2;margin-bottom:24px;position:relative;text-align:center;width:100%}.progress>span{background-color:#4591aa;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);display:block;height:100%;overflow:hidden;position:relative;width:auto}.progress--small{font-size:.5625em;height:10px;line-height:1.2}.progress--large{font-size:1em;height:25px;line-height:1.7}.progress--stacked>span{border-radius:0;display:inline-block;float:left;margin-top:0}.progress--stacked>span:first-of-type{border-radius:3px 0 0 3px}.progress--stacked>span:last-of-type{border-radius:0 3px 3px 0}.progress--striped>span:after,.progress--striped>span>span{background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0.25,rgba(255,255,255,0.2)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.2)),color-stop(0.75,rgba(255,255,255,0.2)),color-stop(0.75,transparent),to(transparent));background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent);background-size:50px 50px;bottom:0;content:"";left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:1}.progress--striped.progress--animate>span:after,.progress--striped.progress--animate>span>span{-webkit-animation:move 2s linear infinite;animation:move 2s linear infinite}@keyframes move{0%{background-position:0 0}100%{background-position:50px 50px}}@-webkit-keyframes move{0%{background-position:0 0}100%{background-position:50px 50px}}.spinner{-webkit-animation:rotate .8s infinite linear;animation:rotate .8s infinite linear;border:3px solid #b5b5b5;border-radius:50%;border-right-color:transparent;height:30px;margin:24px auto;width:30px}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.tooltip,[data-hint]{display:inline-block;position:relative}.tooltip:before,.tooltip:after,[data-hint]:before,[data-hint]:after{border-radius:2px;opacity:0;position:absolute;pointer-events:none;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:100ms;transition:100ms;-webkit-transition-delay:0ms;transition-delay:0ms;visibility:hidden;z-index:1000000}.tooltip:before,[data-hint]:before{background-color:transparent;border:8px solid transparent;content:"";position:absolute;z-index:1000001}.tooltip:after,[data-hint]:after{background-color:#282e31;color:white;content:attr(data-hint);font-size:.75em;padding:.25em .5em;text-decoration:none;white-space:nowrap}.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after,[data-hint]:hover:before,[data-hint]:hover:after,[data-hint]:focus:before,[data-hint]:focus:after{opacity:1;visibility:visible}.tooltip:hover:before,.tooltip:hover:after,[data-hint]:hover:before,[data-hint]:hover:after{-webkit-transition-delay:100ms;transition-delay:100ms}.tooltip--top:before{border-top-color:#282e31;margin-bottom:-12px}.tooltip--top:after{margin-left:-18px}.tooltip--top:before,.tooltip--top:after{bottom:100%;left:50%}.tooltip--top:hover:after,.tooltip--top:hover:before{-webkit-transform:translateY(-8px);-ms-transform:translateY(-8px);transform:translateY(-8px)}.tooltip--top:focus:after,.tooltip--top:focus:before{-webkit-transform:translateY(-8px);-ms-transform:translateY(-8px);transform:translateY(-8px);-webkit-transition:150ms;transition:150ms}.tooltip--bottom:before{border-bottom-color:#282e31;margin-top:-12px}.tooltip--bottom:after{margin-left:-18px}.tooltip--bottom:before,.tooltip--bottom:after{left:50%;top:100%}.tooltip--bottom:hover:after,.tooltip--bottom:hover:before,.tooltip--bottom:focus:after,.tooltip--bottom:focus:before{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px)}.tooltip--right:before{border-right-color:#282e31;margin-bottom:-8px;margin-left:-12px}.tooltip--right:after{margin-bottom:-12px}.tooltip--right:before,.tooltip--right:after{bottom:50%;left:105%}.tooltip--right:hover:after,.tooltip--right:hover:before,.tooltip--right:focus:after,.tooltip--right:focus:before{-webkit-transform:translateX(8px);-ms-transform:translateX(8px);transform:translateX(8px)}.tooltip--left:before{border-left-color:#282e31;margin-bottom:-8px;margin-right:-12px}.tooltip--left:after{margin-bottom:-12px}.tooltip--left:before,.tooltip--left:after{bottom:50%;right:100%}.tooltip--left:hover:after,.tooltip--left:hover:before,.tooltip--left:focus:after,.tooltip--left:focus:before{-webkit-transform:translateX(-8px);-ms-transform:translateX(-8px);transform:translateX(-8px)}.tooltip--always:before,.tooltip--always:after{opacity:1;visibility:visible}.tooltip--always .tooltip--top:before,.tooltip--always .tooltip--top:after{-webkit-transform:translateY(-8px);-ms-transform:translateY(-8px);transform:translateY(-8px)}.tooltip--always .tooltip--right:before,.tooltip--always .tooltip--right:after{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px)}.tooltip--always .tooltip--bottom:before,.tooltip--always .tooltip--bottom:after{-webkit-transform:translateX(-8px);-ms-transform:translateX(-8px);transform:translateX(-8px)}.tooltip--always .tooltip--left:before,.tooltip--always .tooltip--left:after{-webkit-transform:translateX(8px);-ms-transform:translateX(8px);transform:translateX(8px)} \ No newline at end of file +@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/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/package.json b/package.json index d9ef885..4eec325 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "concise.css", - "version": "3.1.1", + "version": "4.1.2", "description": "A lightweight front-end framework that provides functionality without the bloat.", "license": "MIT", "keywords": [ @@ -12,7 +12,8 @@ "front-end", "framework", "web", - "lightweight" + "lightweight", + "postcss" ], "homepage": "http://concisecss.com", "bugs": "https://github.com/ConciseCSS/concise.css/issues", @@ -21,19 +22,26 @@ "url": "https://github.com/ConciseCSS/concise.css" }, "engines": { - "node": "<=4.2.1" + "node": ">=6.0.0" }, "devDependencies": { - "autoprefixer": "^6.0.3", - "cssmin": "^0.4.3", - "node-sass": "^3.3.3", - "postcss-cli": "^2.2.0", - "stylestats": "^6.0.0", - "watch": "^0.16.0" + "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": "node-sass src/concise.scss dist/concise.css | postcss --use autoprefixer < dist/concise.css -b \"last 2 versions\" | cssmin > dist/concise.min.css", - "build:watch": "watch \"npm run build\" src", - "stats": "stylestats dist/concise.css" + "build": "jake build", + "build:dev": "jake default", + "stats": "stylestats dist/concise.css", + "stats:min": "stylestats dist/concise.min.css" } } 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/core/layout/_print.scss b/src/_print.scss similarity index 62% rename from src/core/layout/_print.scss rename to src/_print.scss index f74deff..a24a3a9 100644 --- a/src/core/layout/_print.scss +++ b/src/_print.scss @@ -2,19 +2,8 @@ // Print // ============================================================================= -// -// Variables -// --------- - -$font-family-print: "Georgia", "Times New Roman", "Times", serif !default; - - -// -// Styles -// --------- - @media print { - @page { margin: .5cm; } + @page { margin: 2cm; } *, *:before, @@ -28,21 +17,31 @@ $font-family-print: "Georgia", "Times New Roman", "Times", serif !default; :root { background-color: white; color: black; - font: 11pt / 1.3 $font-family-print; + 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; } - .show--print { - display: block; - visibility: visible; - } - - .hide--print, video, audio, object, @@ -55,15 +54,11 @@ $font-family-print: "Georgia", "Times New Roman", "Times", serif !default; } p, - h2, h3, - .h2, .h3 { + h2, h3 { orphans: 3; widows: 3; } - h2, h3, - .h2, .h3 { page-break-after: avoid; } - a, a:visited { color: black; @@ -89,7 +84,7 @@ $font-family-print: "Georgia", "Times New Roman", "Times", serif !default; pre, code { - background-color: none; + background-color: transparent; border: 1px solid getColor(base, lines); page-break-inside: avoid; } @@ -118,40 +113,4 @@ $font-family-print: "Georgia", "Times New Roman", "Times", serif !default; ol { li { content: "» "; } } - - table { - @media (min-width: $bp-extra-small) { - & { - page-break-inside: avoid; - width: 100% !important; - - th, - td { line-height: unitSize(5) !important; } - } - } - } - - - // - // Components - // - // TODO: conditional to check if Concise UI is being included - - // Base - .badge, - .label, - .spinner, - .tooltip, - [data-hint], - .progress, - .breadcrumbs, - .modal, - .alert { - &, - &:before, - *:after { - display: none; - visibility: hidden; - } - } } 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/src/addons/concise-ui/_concise-ui.scss b/src/addons/concise-ui/_concise-ui.scss deleted file mode 100644 index db7ca40..0000000 --- a/src/addons/concise-ui/_concise-ui.scss +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Concise UI - * https://github.com/ConciseCSS/concise.css - * - * Copyright 2015 Concise Team - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -// Concise UI Components -@import 'components/alerts'; -@import 'components/badges'; -@import 'components/breadcrumbs'; -@import 'components/buttons'; -@import 'components/cards'; -@import 'components/collections'; -@import 'components/dropdowns'; -@import 'components/groups'; -@import 'components/labels'; -@import 'components/modals'; -@import 'components/progress'; -@import 'components/spinner'; -@import 'components/tooltips'; diff --git a/src/addons/concise-ui/components/_alerts.scss b/src/addons/concise-ui/components/_alerts.scss deleted file mode 100644 index 6d60e45..0000000 --- a/src/addons/concise-ui/components/_alerts.scss +++ /dev/null @@ -1,57 +0,0 @@ -// -// Alerts -// ============================================================================= - -.alert { - background-color: getColor(background, light); - border: 1px solid getColor(base, lines); - border-radius: 3px; - color: inherit; - font-size: pxToEm(14); - margin: unitSize(3, -4) 0; - padding: unitSize(1) 1em; - position: relative; - - p { margin: 0; } - - a { - color: darken(getColor(text, primary), 20%); - - &:hover { text-decoration: underline; } - } -} - -.alert-close { - color: inherit; - float: right; - opacity: .5; - transition: opacity $transition-duration; - - &:hover { opacity: 1; } - - &:hover, - &:focus { text-decoration: none; } -} - -a.alert-close { - &:hover { text-decoration: none; } -} - - -// -// States -// ------ - -@each $color-name, $color in $colors { - @each $color-type, $color-value in $color { - @if $color-name == "state" { - .alert--#{$color-type} { - background-color: rgba($color-value, .15); - border-color: rgba($color-value, .2); - color: darken($color-value, 10%); - - a { color: darken($color-value, 20%); } - } - } - } -} diff --git a/src/addons/concise-ui/components/_badges.scss b/src/addons/concise-ui/components/_badges.scss deleted file mode 100644 index 153f2f4..0000000 --- a/src/addons/concise-ui/components/_badges.scss +++ /dev/null @@ -1,13 +0,0 @@ -// -// Badges -// ============================================================================= - -.badge { - background-color: getColor(base, primary); - border-radius: 25px; - color: getColor(text, ui); - display: inline-block; - font-size: pxToEm(12); - line-height: unitSize(3); - padding: 0 .75em; -} diff --git a/src/addons/concise-ui/components/_breadcrumbs.scss b/src/addons/concise-ui/components/_breadcrumbs.scss deleted file mode 100644 index 3c57498..0000000 --- a/src/addons/concise-ui/components/_breadcrumbs.scss +++ /dev/null @@ -1,47 +0,0 @@ -// -// Breadcrumbs -// ============================================================================= - -.breadcrumbs { - background-color: getColor(background, light); - border: 1px solid getColor(base, lines); - border-radius: 3px; - font-size: pxToEm(12); - margin-bottom: unitSize(3); - padding: unitSize(1) .5em; - - li { - display: inline; - list-style: none; - padding-left: .75em; - - &:after { - color: darken(getColor(base, lines), 10%); - content: "\002f"; - padding-left: .75em; - } - - &:last-child { - &:after { - content: ""; - padding-left: 0; - } - } - - &.is-active, - &.is-active a { color: darken(getColor(text, secondary), 10%); } - } -} - - -// -// Modifiers -// --------- - -// Flat -.breadcrumbs--flat { - background-color: transparent; - border: none; - border-radius: 0; - padding: 0; -} diff --git a/src/addons/concise-ui/components/_buttons.scss b/src/addons/concise-ui/components/_buttons.scss deleted file mode 100644 index f969ec3..0000000 --- a/src/addons/concise-ui/components/_buttons.scss +++ /dev/null @@ -1,85 +0,0 @@ -// -// Buttons -// ============================================================================= - -// -// Bordered -// -------- - -.button--bordered { - background-color: transparent; - border: 1px solid getColor(base, primary); - color: getColor(base, primary); - - &:hover, - &:focus { - background-color: getColor(base, primary); - color: getColor(text, ui); - } -} - -@each $color-name, $color in $colors { - @each $color-type, $color-value in $color { - @if $color-name == "state" { - .border--#{$color-type} { - border-color: $color-value; - color: $color-value; - - &:hover, - &:focus { - background-color: $color-value; - color: getColor(text, ui); - } - - &:active { background-color: lighten($color-value, 10%); } - } - } - } -} - - -// -// Prefix/Affix -// ------------ - -.button--prefix { - padding-left: 0; - - .prefix { - background-image: linear-gradient(to bottom, - rgba(0, 0, 0, .15), - rgba(0, 0, 0, .15)); - display: inline-block; - margin-right: 1.25em; - padding: 0 1em; - vertical-align: 0; - } - - &.button--bordered { - .prefix { - background-image: none; - border-right: 1px solid currentColor; - } - } -} - -.button--affix { - padding-right: 0; - - .affix { - background-image: linear-gradient(to bottom, - rgba(0, 0, 0, .15), - rgba(0, 0, 0, .15)); - display: inline-block; - margin-left: 1.25em; - padding: 0 1em; - vertical-align: 0; - } - - &.button--bordered { - .affix { - background-image: none; - border-left: 1px solid currentColor; - } - } -} diff --git a/src/addons/concise-ui/components/_cards.scss b/src/addons/concise-ui/components/_cards.scss deleted file mode 100644 index 36f46ac..0000000 --- a/src/addons/concise-ui/components/_cards.scss +++ /dev/null @@ -1,56 +0,0 @@ -// -// Cards -// ============================================================================= - -.card { - background-color: white; - border: 1px solid getColor(base, lines); - margin-bottom: unitSize(3); - overflow: hidden; - position: relative; -} - -.card-content { padding: unitSize(3) 1.5em; } - -.card-title { - display: block; - margin-top: unitSize(1, 2); -} - -.card-content { - p { margin-bottom: 0; } - - p + p { margin-bottom: unitSize(3, -4); } -} - -.card-footer { - border-top: 1px solid getColor(base, lines); - font-size: pxToEm(14); - padding: unitSize(2) 1.5em; -} - - -// -// Images -// ------ - -.card-image { - position: relative; - - img { - bottom: 0; - left: 0; - position: relative; - right: 0; - top: 0; - width: 100%; - } - - .card-title { - bottom: 0; - color: getColor(text, ui); - left: 0; - padding: 0 1em; - position: absolute; - } -} diff --git a/src/addons/concise-ui/components/_collections.scss b/src/addons/concise-ui/components/_collections.scss deleted file mode 100644 index 491cda7..0000000 --- a/src/addons/concise-ui/components/_collections.scss +++ /dev/null @@ -1,27 +0,0 @@ -// -// Collections -// ============================================================================= - -.collection { - border: 1px solid getColor(base, lines); - border-radius: 3px; - list-style-type: none; - margin: unitSize(3) 0; - padding: 0; -} - -.collection-item, -.collection-header { - border-bottom: 1px solid getColor(base, lines); - display: block; - margin: 0; - padding: unitSize(1) 1em; - - &:last-of-type { border-bottom: none; } - - &.is-active { background-color: getColor(background, light); } -} - -a.collection-item:hover { background-color: getColor(background, light); } - -.collection-header { padding: 0 1em; } diff --git a/src/addons/concise-ui/components/_dropdowns.scss b/src/addons/concise-ui/components/_dropdowns.scss deleted file mode 100644 index 361a45f..0000000 --- a/src/addons/concise-ui/components/_dropdowns.scss +++ /dev/null @@ -1,144 +0,0 @@ -// -// Dropdowns -// ============================================================================= - -.dropdown { - cursor: auto; - display: inline-block; - outline: none; - position: relative; - - &:focus { - pointer-events: none; - - .dropdown-content { - opacity: 1; - visibility: visible; - } - } - - &.no-pointer-events { pointer-events: auto !important; } - - &.no-visibility .dropdown-content { - display: none; - visibility: visible !important; - } - - &.no-visibility:focus .dropdown-content { display: block; } - - &.no-opacity .dropdown-content { opacity: 1 !important; } -} - -// Dropdown content -.dropdown-content { - background-color: white; - border: 1px solid getColor(base, lines); - color: getColor(text, primary); - left: 0; - margin-top: unitSize(1); - opacity: 0; - padding: unitSize(1) 1em; - pointer-events: auto; - position: absolute; - text-align: left; - transition: all $transition-duration; - visibility: hidden; - width: 200px; - z-index: 1; - - &:before, - &:after { - border: solid transparent; - bottom: 100%; - content: ""; - height: 0; - left: 1.5em; - pointer-events: none; - position: absolute; - width: 0; - } - - &:before { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: getColor(base, lines); - border-width: 7px; - margin-left: -7px; - } - - &:after { - border-color: rgba(255, 255, 255, 0); - border-bottom-color: white; - border-width: 6px; - margin-left: -6px; - } - - li { - font-size: pxToEm(14); - list-style-type: none; - margin: 0; - padding: unitSize(1) 1em; - transition: background-color $transition-duration; - white-space: nowrap; - - &:hover { background-color: getColor(background, light); } - } -} - -// Dropdown lists -ul, -ol { - &.dropdown-content { padding: 0; } -} - - -// -// Hoverable -// --------- - -.dropdown--hover { - &:hover { - pointer-events: none; - - .dropdown-content { - opacity: 1; - visibility: visible; - } - } -} - - -// -// Modifiers -// --------- - -// Small -.dropdown--small { - .dropdown-content { width: 150px; } -} - -// Large -.dropdown--large { - .dropdown-content { width: 300px; } -} - -// Top -.dropdown--top { - .dropdown-content { - bottom: 100%; - margin-top: 0; - margin-bottom: unitSize(1); - - &:before, - &:after { top: 100%; } - - &:after { - border-color: rgba(255, 255, 255, 0); - border-top-color: white; - } - - &:before { - border-color: rgba(255, 255, 255, 0); - border-top-color: getColor(base, lines); - } - } -} diff --git a/src/addons/concise-ui/components/_groups.scss b/src/addons/concise-ui/components/_groups.scss deleted file mode 100644 index dcb5acc..0000000 --- a/src/addons/concise-ui/components/_groups.scss +++ /dev/null @@ -1,34 +0,0 @@ -// -// Groups -// ============================================================================= - -.group { - @include clearfix(); - - display: inline-block; - margin-bottom: unitSize(3); - padding: 0; - - span { margin-top: 0; } -} - -.group-item { - border: 1px solid getColor(base, lines); - display: inline-block; - float: left; - font-size: pxToEm(14); - line-height: unitSize(4); - list-style: none; - padding: 0 1em; - transition: background-color $transition-duration; - - &:not(:first-child) { margin: 0 0 0 -1px; } - - &:hover { background-color: getColor(background, light); } - - &:first-child { border-radius: 3px 0 0 3px; } - - &:last-child { border-radius: 0 3px 3px 0; } - - &.is-active { background-color: getColor(background, light); } -} diff --git a/src/addons/concise-ui/components/_labels.scss b/src/addons/concise-ui/components/_labels.scss deleted file mode 100644 index 220b618..0000000 --- a/src/addons/concise-ui/components/_labels.scss +++ /dev/null @@ -1,13 +0,0 @@ -// -// Labels -// ============================================================================= - -.label { - background-color: getColor(base, primary); - border-radius: 3px; - color: getColor(text, ui); - display: inline-block; - font-size: pxToEm(12); - line-height: unitSize(3); - padding: 0 1em; -} diff --git a/src/addons/concise-ui/components/_modals.scss b/src/addons/concise-ui/components/_modals.scss deleted file mode 100644 index 9b87f3e..0000000 --- a/src/addons/concise-ui/components/_modals.scss +++ /dev/null @@ -1,122 +0,0 @@ -// -// Modals -// ============================================================================= - -.modal { - background-color: rgba(getColor(background, dark), .5); - bottom: 0; - left: 0; - margin: 0; - opacity: 0; - pointer-events: none; - position: fixed; - right: 0; - top: 0; - transition: opacity ease-in $transition-duration; - z-index: 1000002; - - &:target { - opacity: 1; - pointer-events: auto; - } -} - -.modal-container { - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .1); - margin: 15% auto; - position: relative; - width: 90%; - - @media (min-width: $bp-small) { width: 526px; } -} - -.modal-header { - background-color: getColor(base, primary); - color: getColor(text, ui); - padding: unitSize(2) 1.5em; - - h1, h2, h3, h4, h5, h6, - .h1, .h2, .h3, .h4, .h5, .h6, - .giga, .mega, .kilo { - color: inherit; - display: inline; - } -} - -.modal-body, -.modal-footer { - background-color: white; - margin-top: 0; -} - -.modal-body { - padding: unitSize(4) 2.5em unitSize(1); - - p { margin-bottom: unitSize(3); } -} - -.modal-footer { - border-top: 1px solid getColor(base, lines); - font-size: pxToEm(14); - margin: 0; - padding: unitSize(3) 2.5em; - - p { margin-bottom: 0; } -} - -.modal-close { - color: getColor(text, ui); - float: right; - margin: 0; - opacity: .5; - transition: opacity $transition-duration; - - &:hover { opacity: 1; } - - &:hover, - &:focus { text-decoration: none; } -} - - -// -// Modifiers -// --------- - -// Small -.modal--small { - .modal-container { - @media (min-width: $bp-small) { width: 360px; } - } -} - -// Large -.modal--large { - .modal-container { - @media (min-width: $bp-small) { width: 760px; } - } -} - -// Full-width -.modal--full { - .modal-container { - @media (min-width: $bp-small) { width: 90%; } - } -} - -// Flat -.modal--flat { - .modal-header { - background-color: white; - color: getColor(text, primary); - padding: 1.5em 2.5em 0; - - h1, h2, h3, h4, h5, h6, - .h1, .h2, .h3, .h4, .h5, .h6 { color: inherit; } - } - - .modal-close { - color: getColor(text, primary); - line-height: 1; - margin: 0; - } -} diff --git a/src/addons/concise-ui/components/_progress.scss b/src/addons/concise-ui/components/_progress.scss deleted file mode 100644 index 22e6002..0000000 --- a/src/addons/concise-ui/components/_progress.scss +++ /dev/null @@ -1,111 +0,0 @@ -// -// Progress Bars -// ============================================================================= -// Courtesy of Chris Coyier (http://css-tricks.com/css3-progress-bars/) - -.progress { - background-color: getColor(background, light); - border-radius: 3px; - box-shadow: inset 0 1px 1px rgba(getColor(base, lines), .25); - box-sizing: initial; - color: getColor(text, ui); - font-size: pxToEm(11); - height: 14px; - line-height: 1.2; - margin-bottom: unitSize(3); - position: relative; - text-align: center; - width: 100%; -} - -.progress { - > span { - background-color: getColor(base, primary); - border-radius: 3px; - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); - display: block; - height: 100%; - overflow: hidden; - position: relative; - width: auto; - } -} - -.progress--small { - font-size: pxToEm(9); - height: 10px; - line-height: 1.2; -} - -.progress--large { - font-size: pxToEm($font-base-size); - height: 25px; - line-height: 1.7; -} - -.progress--stacked { - > span { - border-radius: 0; - display: inline-block; - float: left; - margin-top: 0; - - &:first-of-type { border-radius: 3px 0 0 3px; } - - &:last-of-type { border-radius: 0 3px 3px 0; } - } -} - -// Striped -.progress--striped { - > span { - &:after, > span { - background-image: - -webkit-gradient( - linear, 0 0, 100% 100%, - color-stop(.25, rgba(255, 255, 255, .2)), - color-stop(.25, transparent), - color-stop(.5, transparent), - color-stop(.5, rgba(255, 255, 255, .2)), - color-stop(.75, rgba(255, 255, 255, .2)), - color-stop(.75, transparent), to(transparent)); - background-image: - -moz-linear-gradient(-45deg, - rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, - rgba(255, 255, 255, .2) 50%, - rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); - background-size: 50px 50px; - bottom: 0; - content: ""; - left: 0; - overflow: hidden; - position: absolute; - right: 0; - top: 0; - z-index: 1; - } - } - - // Animated - &.progress--animate > span { - &:after, > span { animation: move 2s linear infinite; } - } -} - -@keyframes move { - 0% { background-position: 0 0; } - - 100% { background-position: 50px 50px; } -} - -@-moz-keyframes move { - 0% { background-position: 0 0; } - - 100% { background-position: 50px 50px; } -} - -@-webkit-keyframes move { - 0% { background-position: 0 0; } - - 100% { background-position: 50px 50px; } -} diff --git a/src/addons/concise-ui/components/_spinner.scss b/src/addons/concise-ui/components/_spinner.scss deleted file mode 100644 index 7514f65..0000000 --- a/src/addons/concise-ui/components/_spinner.scss +++ /dev/null @@ -1,19 +0,0 @@ -// -// Spinner -// ============================================================================= - -.spinner { - animation: rotate .8s infinite linear; - border: 3px solid darken(getColor(background, light), 25%); - border-radius: 50%; - border-right-color: transparent; - height: 30px; - margin: unitSize(3) auto; - width: 30px; -} - -@keyframes rotate { - 0% { transform: rotate(0deg); } - - 100% { transform: rotate(360deg); } -} diff --git a/src/addons/concise-ui/components/_tooltips.scss b/src/addons/concise-ui/components/_tooltips.scss deleted file mode 100644 index ae03e31..0000000 --- a/src/addons/concise-ui/components/_tooltips.scss +++ /dev/null @@ -1,191 +0,0 @@ -// -// Tooltips -// ============================================================================= -// Courtesy of Hint.css (http://kushagragour.in/lab/hint/) - -.tooltip, -[data-hint] { - display: inline-block; - position: relative; - - &:before, - &:after { - border-radius: 2px; - opacity: 0; - position: absolute; - pointer-events: none; - transform: translate3d(0, 0, 0); - transition: ($transition-duration / 1.5); - transition-delay: 0ms; - visibility: hidden; - z-index: 1000000; - } - - &:before { - background-color: transparent; - border: 8px solid transparent; - content: ""; - position: absolute; - z-index: 1000001; - } - - &:after { - background-color: getColor(background, dark); - color: getColor(text, ui); - content: attr(data-hint); - font-size: pxToEm(12); - padding: .25em .5em; - text-decoration: none; - white-space: nowrap; - } - - &:hover, - &:focus { - &:before, - &:after { - opacity: 1; - visibility: visible; - } - } - - &:hover { - &:before, - &:after { transition-delay: 100ms; } - } -} - - -// -// Positioning -// ----------- - -// Top -.tooltip--top { - &:before { - border-top-color: getColor(background, dark); - margin-bottom: -12px; - } - - &:after { margin-left: -18px; } - - &:before, - &:after { - bottom: 100%; - left: 50%; - } - - &:hover { - &:after, - &:before { transform: translateY(-8px); } - } - - &:focus { - &:after, - &:before { - transform: translateY(-8px); - transition: $transition-duration; - } - } -} - -// Bottom -.tooltip--bottom { - &:before { - border-bottom-color: getColor(background, dark); - margin-top: -12px; - } - - &:after { margin-left: -18px; } - - &:before, - &:after { - left: 50%; - top: 100%; - } - - &:hover, - &:focus { - &:after, - &:before { transform: translateY(8px); } - } -} - -// Right -.tooltip--right { - &:before { - border-right-color: getColor(background, dark); - margin-bottom: -8px; - margin-left: -12px; - } - - &:after { margin-bottom: -12px; } - - &:before, - &:after { - bottom: 50%; - left: 105%; - } - - &:hover, - &:focus { - &:after, - &:before { transform: translateX(8px); } - } -} - -// Left -.tooltip--left { - &:before { - border-left-color: getColor(background, dark); - margin-bottom: -8px; - margin-right: -12px; - } - - &:after { margin-bottom: -12px; } - - &:before, - &:after { - bottom: 50%; - right: 100%; - } - - &:hover, - &:focus { - &:after, - &:before { transform: translateX(-8px); } - } -} - - -// -// Modifiers -// --------- - -// Persistent tooltips -.tooltip--always { - &:before, - &:after { - opacity: 1; - visibility: visible; - } - - .tooltip--top { - &:before, - &:after { transform: translateY(-8px); } - } - - .tooltip--right { - &:before, - &:after { transform: translateY(8px); } - } - - .tooltip--bottom { - &:before, - &:after { transform: translateX(-8px); } - } - - .tooltip--left { - &:before, - &:after { transform: translateX(8px); } - } -} diff --git a/src/concise.scss b/src/concise.scss deleted file mode 100644 index aaa45a7..0000000 --- a/src/concise.scss +++ /dev/null @@ -1,40 +0,0 @@ -/** - * Concise Framework - * https://github.com/ConciseCSS/concise.css - * - * Copyright 2015 Concise Team - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -// Globals -@import 'core/globals/globals'; -@import 'core/globals/functions'; -@import 'core/globals/mixins'; - -// Custom globals -@import 'custom/globals'; - -// Natives -@import 'core/layout/base'; -@import 'core/layout/blockquotes'; -@import 'core/layout/buttons'; -@import 'core/layout/forms'; -@import 'core/layout/headings'; -@import 'core/layout/lists'; -@import 'core/layout/print'; -@import 'core/layout/tables'; -@import 'core/layout/type'; - -// Utils -@import 'core/utils/atgrid'; -@import 'core/utils/colors'; -@import 'core/utils/conditional-styling'; -@import 'core/utils/helpers'; - -// Add-Ons -@import 'addons/concise-ui/concise-ui'; - -// Custom styles -@import 'custom/custom'; diff --git a/src/core/globals/_functions.scss b/src/core/globals/_functions.scss deleted file mode 100644 index c635a04..0000000 --- a/src/core/globals/_functions.scss +++ /dev/null @@ -1,67 +0,0 @@ -// -// Functions -// ============================================================================= - -// -// Variables -// --------- - -// Base Size -$base-unit: 8 !default; - - -// -// unitSize -// -------- -// Use this function to set sizes with proportions. -// -// @access public -// -// @param {String} $multiplier - times the base unit ($base-unit by default) -// @param {Number} $offset - A value in pixels which will be added to the -// result, can be positive for addition or negative for -// subtraction -// -// @return {Number} Value in px, equal to the number of times the base unit -// plus the offset -// - -@function unitSize($multiplier, $offset: 0) { - @return ($base-unit * $multiplier + $offset) + px; -} - - -// -// pxToEm -// ------ -// Converts a Px value into a Em value -// -// @access public -// -// @param {Number} $px - value in pixels -// @param {Number} $base - Base font size -// -// @return {Number} Value in Ems -// - -@function pxToEm($px, $base: $font-base-size) { - @return ($px / $base) + em; -} - - -// -// getColor -// -------- -// Easily retrieve colors for use. -// -// @access public -// -// @param {String} $color - Name of the color -// @param {Color} $value - The color value to grab (default is "base") -// -// @return {Color} Value of the color -// - -@function getColor($color, $value: "base") { - @return map-get(map-get($colors, $color), $value); -} diff --git a/src/core/globals/_globals.scss b/src/core/globals/_globals.scss deleted file mode 100644 index 69c28f7..0000000 --- a/src/core/globals/_globals.scss +++ /dev/null @@ -1,99 +0,0 @@ -// -// Global Variables -// ============================================================================= - -// -// Base -// ---- - -// Transition duration -$transition-duration: 150ms !default; - -// Breakpoints -$bp-extra-small: 30em !default; -$bp-small: 48em !default; -$bp-medium: 60em !default; -$bp-large: 70em !default; -$bp-extra-large: 80em !default; - -// Spacing -$spacing-xs: unitSize(1) !default; -$spacing-s: unitSize(2) !default; -$spacing-m: unitSize(3) !default; -$spacing-l: unitSize(4) !default; -$spacing-xl: unitSize(5) !default; - - -// -// Color Palette -// ------------- - -// Colors -$colors: ( - base: ( - "primary": #4591aa, - "selection": #d6d6d6, - "lines": #e0e0e0 - ), - - text: ( - "primary": #555, - "secondary": #666, - "heading": #222, - "ui": white - ), - - background: ( - "dark": #282E31, - "light": #f5f5f5, - "body": white - ), - - state: ( - "muted": #aaa, - "primary": #4591aa, - "success": #45ca69, - "warning": #ffb800, - "error": #ca4829 - ), - - blue: ( - "darker": #495b61, - "dark": #447281, - "base": #4591aa, - "light": #5ab0cc, - "lighter": #74cbe8 - ), - - green: ( - "darker": #3b6e6e, - "dark": #3b8686, - "base": #37a1a1, - "light": #2dbaba, - "lighter": #69d1d1 - ), - - cream: ( - "darker": #c47858, - "dark": #e29372, - "base": #ecac91, - "light": #f9c2ab, - "lighter": #fdd5c3 - ), - - 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/src/core/globals/_mixins.scss b/src/core/globals/_mixins.scss deleted file mode 100644 index 38ab208..0000000 --- a/src/core/globals/_mixins.scss +++ /dev/null @@ -1,22 +0,0 @@ -// -// Mixins -// ============================================================================= - -// -// Clearfix -// -------- -// Generates CSS that will clear both left -// and right floats. -// - -@mixin clearfix() { - & { - &:before, - &:after { - content: ""; - display: table; - } - - &:after { clear: both; } - } -} diff --git a/src/core/layout/_base.scss b/src/core/layout/_base.scss deleted file mode 100644 index cc714b7..0000000 --- a/src/core/layout/_base.scss +++ /dev/null @@ -1,129 +0,0 @@ -// -// Base styles -// ============================================================================= - -// -// Variables -// --------- - -// Font families -$font-family: "Helvetica", "Arial", sans-serif !default; -$font-family-mono: "Consolas", monospace !default; -$font-base-size: 16 !default; - - -// -// Normalization -// ------------- -// Courtesy of sanitize.css -// (http://jonathantneal.github.io/sanitize.css/) - -:root { - -ms-overflow-style: -ms-autohiding-scrollbar; - overflow-y: scroll; - text-size-adjust: 100%; -} - -audio:not([controls]) { display: none; } - -details { display: block; } - -input { - &[type="number"] { width: auto; } - - &[type="search"] { - -webkit-appearance: textfield; - - &::-webkit-search-cancel-button, - &::-webkit-search-decoration { -webkit-appearance: none; } - } -} - -main, -summary { display: block; } - -pre { overflow: auto; } - -progress { display: inline-block; } - -textarea { overflow: auto; } - -template, -[hidden] { display: none; } - -[unselectable] { user-select: none } - - -// -// Universal Inheritance -// --------------------- - -// Specify default styles in the document -:root { - box-sizing: border-box; - color: getColor(text, primary); - cursor: default; - font-family: $font-family; - font-size: ($font-base-size * .875) + px; - line-height: 1.5; - text-rendering: optimizeLegibility; - vertical-align: top; - - @media (min-width: $bp-extra-small) { - font-size: $font-base-size + px; - } -} - -*, -::after, -::before { - box-sizing: inherit; - color: inherit; - font-family: inherit; - font-size: inherit; - line-height: inherit; - text-decoration: inherit; - vertical-align: inherit; -} - -* { - cursor: inherit; - margin: 0; - padding: 0; -} - - -// -// Misc -// ---- - -body { background-color: getColor(background, body); } - -a, -button, -input, -select, -textarea { cursor: initial; } - -// Horizontal rule -hr { - border: 0; - border-top: 1px solid getColor(base, lines); - display: block; - height: 1px; - margin: unitSize(3, -4) 0; -} - -// Figures -figure { margin: unitSize(3) 1em; } - -figcaption { - color: getColor(text, secondary); - font-style: italic; - text-align: center; -} - -// Selection -::selection { background-color: getColor(base, selection); } - -::-moz-selection { background-color: getColor(base, selection); } diff --git a/src/core/layout/_blockquotes.scss b/src/core/layout/_blockquotes.scss deleted file mode 100644 index b33910c..0000000 --- a/src/core/layout/_blockquotes.scss +++ /dev/null @@ -1,32 +0,0 @@ -// -// Blockquotes -// ============================================================================= - -blockquote { - border-left: 1px solid getColor(base, lines); - color: getColor(text, secondary); - margin-bottom: unitSize(3, -4); - padding: 0 1em; - - cite, - footer { - display: block; - font-size: 80%; - font-style: italic; - margin-top: unitSize(1, 2); - } - - cite:before, - footer:before { content: "\2014 \00A0"; } -} - - -// -// Modifiers -// --------- - -.blockquote--reverse { - border-left: none; - border-right: 1px solid getColor(base, lines); - text-align: right; -} diff --git a/src/core/layout/_buttons.scss b/src/core/layout/_buttons.scss deleted file mode 100644 index 99d742a..0000000 --- a/src/core/layout/_buttons.scss +++ /dev/null @@ -1,126 +0,0 @@ -// -// Buttons -// ============================================================================= - -button, -.button { - background-color: getColor(base, primary); - border: none; - color: getColor(text, ui); - cursor: pointer; - display: inline-block; - line-height: unitSize(6); - overflow: visible; - padding: 0 2.5em; - text-align: center; - text-decoration: none; - transition: $transition-duration; - user-select: none; - vertical-align: middle; - white-space: nowrap; - - &:hover, - &:focus { - background-color: lighten(getColor(base, primary), 15%); - color: inherit; - text-decoration: none; - } - - &:focus, - &:active { outline: none; } - - &:active { background-color: lighten(getColor(base, primary), 10%); } - - &[disabled] { - background-color: darken(getColor(background, light), 10%); - color: getColor(text, ui); - cursor: not-allowed; - } -} - - -// -// States -// ------ - -@each $color-name, $color in $colors { - @each $color-type, $color-value in $color { - @if $color-name == "state" { - .button--#{$color-type} { - background-color: $color-value; - - &:hover, - &:focus { background-color: lighten($color-value, 15%); } - - &:active { background-color: lighten($color-value, 10%); } - } - } - } -} - - -// -// Sizes -// ----- - -// Extra small -.button--xsm { - font-size: pxToEm(12); - line-height: unitSize(4); - padding: 0 1.5em; -} - -// Small -.button--sm { - font-size: pxToEm(14); - line-height: unitSize(5); - padding: 0 2em; -} - -// Large -.button--lg { - font-size: pxToEm(18); - line-height: unitSize(7); - padding: 0 3em; -} - -// Extra large -.button--xlg { - font-size: pxToEm(18); - line-height: unitSize(8); - padding: 0 3.5em; -} - -// Full-width -.button--full { width: 100%; } - - -// -// Modifiers -// --------- - -// Pill -.button--pill { border-radius: 25px; } - -// Flat -.button--flat { - background-color: transparent; - color: getColor(text, primary); - - &:hover { - background-color: rgba(0, 0, 0, .1); - color: getColor(text, primary); - } - - &[disabled] { - background-color: transparent; - color: getColor(text, secondary); - } -} - -// Collapsible -.button--collapse { - width: 100%; - - @media (min-width: $bp-extra-small) { width: auto; } -} diff --git a/src/core/layout/_forms.scss b/src/core/layout/_forms.scss deleted file mode 100644 index b46204c..0000000 --- a/src/core/layout/_forms.scss +++ /dev/null @@ -1,291 +0,0 @@ -// -// Forms -// ============================================================================= - -form, -form [row] { - @media (min-width: $bp-extra-small) { - margin-bottom: unitSize(3); - } -} - -input, -select, -textarea { - border: 1px solid getColor(base, lines); - border-radius: 3px; - font-size: pxToEm(14); - height: unitSize(4); - padding: 0 .75em; - transition: $transition-duration; - width: 100%; - - &:focus { - border-color: getColor(blue, lighter); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), - 0 0 6px rgba(getColor(blue, base), .5); - outline: none; - } - - &[disabled] { - background-color: getColor(background, light); - cursor: not-allowed; - } -} - -input { - line-height: normal; - min-height: unitSize(3); - - // Remove focus styles - &[type="checkbox"], - &[type="radio"], - &[type="range"], - &[type="file"], - &[type="color"], - &[type="submit"] { - &:focus { - border-color: transparent; - box-shadow: none; - outline: none; - } - } - - &[type="submit"] { - @extend button; - - line-height: normal; - - &.button { border-radius: 0; } - } -} - -label { - display: block; - font-size: pxToEm(14); -} - -fieldset { - border: 1px solid getColor(base, lines); - border-radius: 3px; - padding: unitSize(3) 1em; - margin-bottom: unitSize(3); -} - -legend { - font-size: pxToEm(14); - font-weight: bold; - padding: 0 1em; -} - -// Keep the original size for this small inputs -input[type="checkbox"], -input[type="file"], -input[type="image"], -input[type="radio"] { - height: auto; - width: auto; -} - -// Checkbox & radio -input[type="checkbox"], -input[type="radio"] { - line-height: normal; - padding: 0; - vertical-align: middle; -} - -// Checkbox & radio elements are inline with their label -input[type="checkbox"] + label, -input[type="radio"] + label { - display: inline-block; - margin: 0 0 0 .5em; - line-height: unitSize(4, -2); - vertical-align: middle; -} - -// File upload -input[type="file"] { - border: none; - line-height: 100%; - padding: 0; -} - -// Textarea -textarea { - height: auto; - padding: unitSize(1) 1em; - resize: vertical; -} - -// Style select like a standard input - Internet Explorer 11+ -select { - background-color: transparent; - border-radius: 5px; - padding: 0; - - &[disabled] { color: getColor(text, secondary); } - - &[multiple] { height: auto; } - - &::-ms-expand { display: none; } - - &::-ms-value { color: currentColor; } - - option { padding: 0 .75em } -} - -// Range input -input[type="range"] { - border: none; - padding: 0; - width: 100%; - -webkit-appearance: none; - - &:focus { outline: none; } - - &::-webkit-slider-runnable-track { - background-color: darken(getColor(background, light), 10%); - border: none; - border-radius: 3px; - height: 5px; - } - - &::-webkit-slider-thumb { - border: none; - border-radius: 50%; - background-color: getColor(base, primary); - height: 16px; - margin-top: -5px; - width: 16px; - -webkit-appearance: none; - } - - &::-moz-range-track { - background-color: darken(getColor(background, light), 10%); - border: none; - border-radius: 3px; - height: 5px; - } - - &::-moz-range-thumb { - border: none; - border-radius: 50%; - background-color: getColor(base, primary); - height: 16px; - margin-top: -5px; - width: 16px; - } - - &::-ms-track { - background-color: darken(getColor(background, light), 10%); - border: none; - border-radius: 3px; - color: transparent; - height: 5px; - } - - &::-ms-thumb { - border: none; - border-radius: 50%; - background-color: getColor(base, primary); - height: 16px; - margin-top: -5px; - width: 16px; - } -} - - -// -// Descendents -// ----------- - -// Help text -.input--help { - color: getColor(text, secondary); - display: block; - font-size: pxToEm(12); - font-weight: bold; - margin-top: unitSize(1); -} - - -// -// Form Modifiers -// -------------- - -// Inline Form -.form--inline { - input, - select, - textarea { margin-bottom: unitSize(3, -4); } - - @media (min-width: $bp-extra-small) { - input, - select, - textarea { - display: inline-block; - margin-bottom: 0; - vertical-align: middle; - width: auto; - } - - label { - display: inline; - margin-right: .5em; - vertical-align: middle; - } - - input + label { margin-left: 1em; } - } -} - - -// -// Input Modifiers -// --------------- - -// Small -.input--small { - font-size: pxToEm(12); - height: unitSize(3); -} - -// Large -.input--large { - height: unitSize(6); - font-size: pxToEm(16); -} - -// Flat -.input--flat { - background-color: transparent; - border-color: transparent; - box-shadow: none; - - &:focus { border-color: getColor(blue, lighter); } -} - -// Success -.input--success { - background-color: rgba(getColor(state, success), .15); - border-color: getColor(state, success); - - &:focus { border-color: getColor(state, success); } -} - -// Warning -.input--warning { - background-color: rgba(getColor(state, warning), .15); - border-color: getColor(state, warning); - - &:focus { border-color: getColor(state, warning); } -} - -// Warning -.input--error { - background-color: rgba(getColor(state, error), .15); - border-color: getColor(state, error); - - &:focus { border-color: getColor(state, error); } -} diff --git a/src/core/layout/_headings.scss b/src/core/layout/_headings.scss deleted file mode 100644 index 31d12df..0000000 --- a/src/core/layout/_headings.scss +++ /dev/null @@ -1,122 +0,0 @@ -// -// Headings -// ============================================================================= - - -// -// Variables -// --------- - -// Font sizes -$h1-size: 48 !default; -$h2-size: 36 !default; -$h3-size: 28 !default; -$h4-size: 18 !default; -$h5-size: 16 !default; -$h6-size: 14 !default; -$giga-size: 80 !default; -$mega-size: 64 !default; -$kilo-size: 52 !default; - -// Font family -$font-family-headings: "Helvetica", "Arial", sans-serif !default; - - -// -// Styles -// ------ - -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6, -.giga, .mega, .kilo { - color: getColor(text, heading); - font-family: $font-family-headings; - line-height: 1.25em; - - small, - .small { - color: getColor(text, secondary); - font-weight: lighter; - vertical-align: 0; - } -} - -h1, h2, h3, -.h1, .h2, .h3, -.giga, .mega, .kilo { - margin: unitSize(3, -4) 0 unitSize(1, 2); - - small, - .small { font-size: 65%; } -} - -h4, h5, h6, -.h4, .h5, .h6 { - margin: unitSize(1, 2) 0; - - small, - .small { font-size: 75%; } -} - -h1, -.h1 { - font-size: pxToEm($h1-size * .75); - - @media (min-width: $bp-small) { - font-size: pxToEm($h1-size); - } -} - -h2, -.h2 { font-size: pxToEm($h2-size * .75); - - @media (min-width: $bp-small) { - font-size: pxToEm($h2-size); - } -} - -h3, -.h3 { font-size: pxToEm($h3-size * .75); - - @media (min-width: $bp-small) { - font-size: pxToEm($h3-size); - } -} - -h4, -.h4 { font-size: pxToEm($h4-size); } - -h5, -.h5 { font-size: pxToEm($h5-size); } - -h6, -.h6 { font-size: pxToEm($h6-size); } - - -// -// Sizes -// ----- - -// Giga -.giga { font-size: pxToEm($giga-size * .75); - - @media (min-width: $bp-small) { - font-size: pxToEm($giga-size); - } -} - -// Mega -.mega { font-size: pxToEm($mega-size * .75); - - @media (min-width: $bp-small) { - font-size: pxToEm($mega-size); - } -} - -// Kilo -.kilo { font-size: pxToEm($kilo-size * .75); - - @media (min-width: $bp-small) { - font-size: pxToEm($kilo-size); - } -} diff --git a/src/core/layout/_lists.scss b/src/core/layout/_lists.scss deleted file mode 100644 index 62aba65..0000000 --- a/src/core/layout/_lists.scss +++ /dev/null @@ -1,83 +0,0 @@ -// -// Lists -// ============================================================================= - -ul, -ol { - padding-left: 1.5em; - margin-bottom: unitSize(1, 2); - - ul, - ol { margin-bottom: 0; } -} - -ul { - ul { list-style-type: square; } - - ol { list-style-type: lower-roman; } -} - -ol { - ol { list-style-type: lower-roman; } - - ul { list-style-type: square; } -} - - -// -// Modifiers -// --------- - -// Unstyled -.list--unstyled { - list-style: none; - padding-left: 0; - - li { padding-left: 0; } -} - -// Inline -.list--inline { - padding-left: 0; - - li { - display: inline; - list-style: none; - padding-left: 1.5em; - - &:first-child { padding-left: 0; } - } -} - - -// -// Definition Lists -// ---------------- - -dl { margin-bottom: unitSize(3); } - -dt { font-weight: bold; } - -dt, -dd { margin-bottom: unitSize(1, 2); } - -// Horizontal definition list -.dl--horizontal { - @media (min-width: $bp-medium) { - dt { - clear: left; - float: left; - overflow: hidden; - text-align: right; - text-overflow: ellipsis; - white-space: nowrap; - width: 150px; - } - - dd { - @include clearfix(); - - margin-left: 165px; - } - } -} diff --git a/src/core/layout/_tables.scss b/src/core/layout/_tables.scss deleted file mode 100644 index 01d8afe..0000000 --- a/src/core/layout/_tables.scss +++ /dev/null @@ -1,139 +0,0 @@ -// -// Tables -// ============================================================================= - -table { - border: 1px solid getColor(base, lines); - border-collapse: collapse; - border-spacing: 0; - empty-cells: show; - margin-bottom: unitSize(3); - width: 100%; - - caption { - color: getColor(text, primary); - font-size: 85%; - font-style: italic; - line-height: unitSize(6); - text-align: center; - } - - thead { - background-color: getColor(background, light); - text-align: left; - } - - th, - td { - border-right: 1px solid getColor(base, lines); - line-height: unitSize(3); - overflow: visible; - padding: unitSize(1) 1em; - - @media (min-width: $bp-extra-small) { - line-height: unitSize(6); - } - - &:last-child { border-right: none; } - } - - tr, - td { transition: background-color $transition-duration; } - - @media (min-width: $bp-extra-small) { - & { - width: auto; - - th, - td { padding: 0 2.5em; } - } - } -} - - -// -// Responsive -// ---------- - -.table--responsive { - overflow: auto; - width: 100%; - - &::-webkit-scrollbar { - height: 14px; - width: 14px; - - -webkit-appearance: none; - } - - &::-webkit-scrollbar-thumb { - background-color: rgba(50, 50, 50, .2); - border: 3px solid white; - border-radius: 8px; - } - - table { margin-bottom: 0; } -} - - -// -// Modifiers -// --------- - -// Full-width -.table--full { width: 100%; } - -// Border all -.table--border { - border: 1px solid getColor(base, lines); - - thead, - td { border-bottom: 1px solid getColor(base, lines); } -} - -// Border outer -.table--borderOuter { - border: 1px solid getColor(base, lines); - - th, - td { border-right: none; } -} - -// Border horizontal -.table--borderHorizontal { - thead, - td { border-bottom: 1px solid getColor(base, lines); } - - th, - td { border-right: none; } -} - -// Flat -.table--flat { - border: none; - - td { border-bottom: none; } - - th, - td { border-right: none; } -} - -// Fill even -.table--fillEven { - tbody tr:nth-child(even) { background-color: getColor(background, light); } -} - -// Fill odd -.table--fillOdd { - tbody tr:nth-child(odd) { background-color: getColor(background, light); } -} - -// Row hover -.table--hoverRow { - tbody tr:hover { background-color: getColor(background, light); } -} - -// Cell hover -.table--hoverCell { - tbody td:hover { background-color: getColor(background, light); } -} diff --git a/src/core/layout/_type.scss b/src/core/layout/_type.scss deleted file mode 100644 index 76afe1b..0000000 --- a/src/core/layout/_type.scss +++ /dev/null @@ -1,132 +0,0 @@ -// -// Type Styles -// ============================================================================= - -// -// Defaults -// -------- - -i, -em, -.italic { font-style: italic; } - -b, -strong, -.bold { font-weight: bold; } - -small, -.small { - font-size: 75%; - vertical-align: text-bottom; -} - - -// -// Paragraphs -// -------- - -p { margin-bottom: unitSize(3, -4); } - - -// -// Links -// ----- - -a { - background-color: transparent; - color: getColor(base, primary); - cursor: pointer; - text-decoration: none; - transition: $transition-duration; - - &:hover, - &:focus { color: darken(getColor(base, primary), 15%); } -} - -h1, h2, h3, -.h1, .h2, .h3 { - a { - color: getColor(text, primary); - - &:hover, - &:focus { - color: getColor(base, primary); - text-decoration: none; - } - } -} - - -// -// Abbreviations -// ------------- - -abbr[title] { - border-bottom: 1px dotted getColor(base, lines); - cursor: help; -} - - -// -// Pre, Code, and User Input -// ------------------------- - -code, -pre, -kbd, -samp { - font-family: $font-family-mono; - font-size: pxToEm(14); -} - -pre { padding: unitSize(2) 1.5em; } - -code { - vertical-align: middle; - white-space: nowrap; -} - -code, -pre { - background-color: getColor(background, light); - border: 1px solid getColor(base, lines); - border-radius: 3px; - color: darken(getColor(text, primary), 5%); - margin-bottom: unitSize(3); -} - -code { padding: 2px 3px; } - -pre code { - background-color: transparent; - border: none; - padding: 0; - vertical-align: inherit; - white-space: pre; -} - -.pre--flat { - background-color: transparent; - border: 0; - border-radius: none; - padding: 0; -} - -kbd { - background-color: transparent; - border: 1px solid getColor(base, lines); - border-radius: 3px; - box-shadow: 0 2px 0 -1px white,0 2px 0 darken(getColor(base, lines), 1.5%); - display: inline-block; - line-height: 1.75; - margin: -3px 2px 0; - padding: 2px 6px 0; - white-space: nowrap; -} - - -// -// Addresses -// --------- - -address { font-style: normal; } diff --git a/src/core/utils/_atgrid.scss b/src/core/utils/_atgrid.scss deleted file mode 100644 index 664336b..0000000 --- a/src/core/utils/_atgrid.scss +++ /dev/null @@ -1,175 +0,0 @@ -// -// atGrid.css - CSS Grid System with HTML Attributes -// ============================================================================= -// https://github.com/jameskolce/atGrid -// -// Copyright 2014 James Kolce -// Licensed under MIT License -// (https://github.com/jameskolce/atGrid/blob/master/LICENSE) -// - -// -// Variables -// --------- - -// Attribute prefix -$prefix: "" !default; - -// Max width for container -$container-width: 1200px !default; - -// Gutter size in pixels (without the unit we can do math easily) -$gutter: 30 !default; - -// Number of columns in a row -$num-columns: 12 !default; - -// If you only want to use the mixins for "semantic grids" set this to true -$only-semantic: false !default; - - - - -// -// Mixins -// ============================================================================= -// You can use this to create "semantic grids" -// - -// -// Container -// --------- -// Use this mixin to create a row. Rows should be contained in a -// "container" element -// - -@mixin container() { - box-sizing: border-box; - margin: 0 auto; - max-width: $container-width; - padding-left: ($gutter / 2) + px; - padding-right: ($gutter / 2) + px; - width: 100%; -} - - -// -// Rows -// ---- -// Use this mixin to create a row. Columns should be contained in rows -// -// @clear-gutter: Set true to contain columns with gutter -// - -@mixin row($clear-gutter: true) { - @if $clear-gutter { - margin-left: ($gutter / -2) + px; - margin-right: ($gutter / -2) + px; - } - - margin-bottom: 0; - - &:before, - &:after { - content: ""; - display: table; - } - - &:after { clear: both; } -} - - -// -// Columns -// ------- -// Use this mixin to create a column -// -// @size: The size of the column, should be a number between 0-1. Example: 1/2 -// @add-gutter: Set this to true if you want to create padding for the column -// - -@mixin column($size, $add-gutter: true) { - box-sizing: border-box; - float: left; - margin-bottom: 0; - width: 100%; - - @if $size < 1 { - @media (min-width: $bp-small) { - width: ($size * 100%); - } - } - - @if $add-gutter { - padding-left: ($gutter / 2) + px; - padding-right: ($gutter / 2) + px; - } -} - - - - -// -// Semantic Styles -// ============================================================================= - -@if not $only-semantic { - // - // General Styles - // -------------- - // Basic styles for the container, rows and columns - // - // Put the columns inside the rows, and the rows inside a container. - // - - [#{$prefix}container] { - @include container(); - } - - [#{$prefix}row] { - @include row(); - } - - [#{$prefix}column] { - @include column(1); - } - - - // - // Column Styles - // ------------- - // Creates the width of the columns and their offset - // - // To use this grid system you need to use the following syntax in your - // HTML files (This example uses default configuration): - // - //

- //

- // - //

- //

- // - - // Create columns on devices larger than 48em - @media (min-width: $bp-small) { - // Create columns - @for $i from 1 through $num-columns { - [#{$prefix}column~="#{$i}"] { - width: (($i / $num-columns) * 100%); - } - } - - // Offset for columns - @for $i from 1 through ($num-columns - 1) { - [#{$prefix}column~="+#{$i}"] { - margin-left: (($i / $num-columns) * 100%); - } - } - } -} diff --git a/src/core/utils/_colors.scss b/src/core/utils/_colors.scss deleted file mode 100644 index 6d266e6..0000000 --- a/src/core/utils/_colors.scss +++ /dev/null @@ -1,19 +0,0 @@ -// -// Colors -// ============================================================================= -// Generates classes to change type and background colors from the colors -// set in `_globals.scss`. - -@each $color-name, $color in $colors { - @each $color-type, $color-value in $color { - @if $color-name == "state" { - .text--#{$color-type} { - color: $color-value !important; - } - - .bg--#{$color-type} { - background-color: $color-value !important; - } - } - } -} diff --git a/src/core/utils/_conditional-styling.scss b/src/core/utils/_conditional-styling.scss deleted file mode 100644 index 812dc89..0000000 --- a/src/core/utils/_conditional-styling.scss +++ /dev/null @@ -1,152 +0,0 @@ -// -// Conditional Styling -// ============================================================================= - -// -// Mixins -// ------ - -@mixin show-conditional { - display: block; - visibility: visible; -} - -@mixin hide-conditional { - display: none; - visibility: hidden; -} - - -// -// Extra-Small Devices -// ------------------- - -.show--xsm, -.hide--sm, -.hide--md, -.hide--lg, -.hide--xlg, -.hide--print, -.hide--hd { - @include show-conditional; -} - -.hide--xsm, -.show--sm, -.show--md, -.show--lg, -.show--xlg, -.show--print, -.show--hd { - @include hide-conditional; -} - - -// -// Small Devices -// ------------- - -@media (min-width: $bp-small) { - .show--sm, - .hide--xsm, - .hide--md, - .hide--lg, - .hide--xlg { - @include show-conditional; - } - - .hide--sm, - .show--xsm, - .show--md, - .show--lg, - .show--xlg { - @include hide-conditional; - } -} - - -// -// Medium Devices -// -------------- - -@media (min-width: $bp-medium) { - .show--md, - .hide--sm, - .hide--xsm, - .hide--lg, - .hide--xlg { - @include show-conditional; - } - - .hide--md, - .show--sm, - .show--xsm, - .show--lg, - .show--xlg { - @include hide-conditional; - } -} - - -// -// Large Devices -// ------------- - -@media (min-width: $bp-large) { - .show--lg, - .hide--xsm, - .hide--sm, - .hide--md, - .hide--xlg { - @include show-conditional; - } - - .hide--lg, - .show--xsm, - .show--sm, - .show--md, - .show--xlg { - @include hide-conditional; - } -} - - -// -// Extra-Large Devices -// ------------------- - -@media (min-width: $bp-extra-large) { - .show--xlg, - .hide--xsm, - .hide--sm, - .hide--md, - .hide--lg { - @include show-conditional; - } - - .hide--xlg, - .show--xsm, - .show--sm, - .show--md, - .show--lg { - @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/src/core/utils/_helpers.scss b/src/core/utils/_helpers.scss deleted file mode 100644 index 4a0b28d..0000000 --- a/src/core/utils/_helpers.scss +++ /dev/null @@ -1,78 +0,0 @@ -// -// Helpers -// ============================================================================= - -// -// Text Alignment -// -------------- - -.text--left { text-align: left; } - -.text--center { text-align: center; } - -.text--right { text-align: right; } - -.text--justify { text-align: justify; } - - -// -// Floats -// ------ - -.float--none { float: none; } - -.float--right { float: right; } - -.float--left { float: left; } - -.clearfix { @include clearfix(); } - - -// -// Centering -// --------- - -// Center horizontally and vertically -.center--all { - left: 50%; - position: absolute; - text-align: center; - top: 50%; - transform: translate(-50%, -50%); -} - - -// -// Fluid Media -// ----------- - -.media--fluid { - max-width: 100%; - height: auto; -} - - -// -// Screen Reader Content -// --------------------- - -.screenreader { - border: 0 none; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - - &:active, - &:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; - } -} diff --git a/src/custom/_custom.scss b/src/custom/_custom.scss deleted file mode 100644 index 291feea..0000000 --- a/src/custom/_custom.scss +++ /dev/null @@ -1,3 +0,0 @@ -// -// -// ============================================================================= diff --git a/src/custom/_globals.scss b/src/custom/_globals.scss deleted file mode 100644 index 6d5627c..0000000 --- a/src/custom/_globals.scss +++ /dev/null @@ -1,149 +0,0 @@ -// -// Custom Global Variables -// ============================================================================= - - -// -// Base -// ---- - -// Transition duration -// $transition-duration: 150ms; - -// Breakpoints -// $bp-extra-small: 30em; -// $bp-small: 48em; -// $bp-medium: 60em; -// $bp-large: 70em; -// $bp-extra-large: 80em; - -// Base Size (used in unitSize() for proportions) -// $base-unit: 8; - -// Spacing -// $spacing-xs: unitSize(1); -// $spacing-s: unitSize(2); -// $spacing-m: unitSize(3); -// $spacing-l: unitSize(4); -// $spacing-xl: unitSize(5); - - -// -// Grid -// ---- - -// Prefix for the attributes, you can use 'data-' to make your markup valid -// $prefix: ""; - -// Max width for container -// $container-width: 1200px; - -// Gutter size in pixels (without the unit we can do math easily) -// $gutter: 30; - -// Number of columns in a row -// $num-columns: 12; - -// If you only want to use the mixins for "semantic grids" set this to true -// $only-semantic: false; - - -// -// Typography -// ---------- - -// $font-family: "Helvetica", "Arial", sans-serif; -// $font-family-headings: "Helvetica", "Arial", sans-serif; -// $font-family-print: "Georgia", "Times New Roman", "Times", serif; -// $font-family-mono: "Consolas", monospace; -// $font-base-size: 16; - - -// -// Heading sizes -// ---------- - -// $h1-size: 48; -// $h2-size: 36; -// $h3-size: 28; -// $h4-size: 18; -// $h5-size: 16; -// $h6-size: 14; -// $giga-size: 80; -// $mega-size: 64; -// $kilo-size: 52; - - -// -// Color Palette -// ------------- - -// Colors -// $colors: ( -// base: ( -// "primary": #4591aa, -// "selection": #d6d6d6, -// "lines": #e0e0e0 -// ), -// -// text: ( -// "primary": #666, -// "secondary": #aaa, -// "heading": #222, -// "ui": white -// ), -// -// background: ( -// "dark": #282E31, -// "light": #f5f5f5, -// "body": white -// ), -// -// state: ( -// "muted": #aaa, -// "primary": #4591aa, -// "success": #45ca69, -// "warning": #ffb800, -// "error": #ca4829 -// ), -// -// blue: ( -// "darker": #495b61, -// "dark": #447281, -// "base": #4591aa, -// "light": #5ab0cc, -// "lighter": #74cbe8 -// ), -// -// green: ( -// "darker": #3b6e6e, -// "dark": #3b8686, -// "base": #37a1a1, -// "light": #2dbaba, -// "lighter": #69d1d1 -// ), -// -// cream: ( -// "darker": #c47858, -// "dark": #e29372, -// "base": #ecac91, -// "light": #f9c2ab, -// "lighter": #fdd5c3 -// ), -// -// red: ( -// "darker": #653131, -// "dark": #b73333, -// "base": #da3c3c, -// "light": #f25a5a, -// "lighter": #fa8181 -// ), -// -// gray: ( -// "darker": #333333, -// "dark": #4d4d4d, -// "base": #666666, -// "light": #808080, -// "lighter": #999999 -// ) -// ); diff --git a/test.html b/test.html new file mode 100644 index 0000000..128e308 --- /dev/null +++ b/test.html @@ -0,0 +1,426 @@ + + + + + + + + Concise CSS + + + + + +

Heading 1 Helper link

Heading 2 Helper text

Heading 3 Helper text

Heading 4 Helper text

Heading 5 Helper text

Heading 6 Helper text

+ +

Heading 2 Link Helper text

+ + + +

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

+ +

+
This is a blockquote.
+ +
John Doe
+

+ +

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

+ +

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

+ +

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

+ +

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

+ +

+ 12 +

+ +

+ 1 +

+ +

+ 11 +

+ +

+ 2 +

+ +

+ 10 +

+ +

+ 3 +

+ +

+ 9 +

+ +

+ 4 +

+ +

+ 8 +

+ +

+ 5 +

+ +

+ 7 +

+ +

+ 6 +

+ +

+ 6 +

+ +

+ 4 +

+ +

+ 4 +

+ +

+ 4 +

+ +

+ 3 +

+ +

+ 3 +

+ +

+ 3 +

+ +

+ 3 +

+ +

+ 2 +

+ +

+ 2 +

+ +

+ 2 +

+ +

+ 2 +

+ +

+ 2 +

+ +

+ 2 +

+ +

+ 1 +1 +

+ +

+ 1 +2 +

+ +

+ 1 +3 +

+ +

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

+ +

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

+ +

+ 1st +

+ +

+ 2nd +

+ +

+ 3rd +

+ +

+ 4th +

+ +

+ 5th +

+ +

+ 6th +

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

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

+ + + + + + diff --git a/test/test.html b/test/test.html deleted file mode 100644 index 0a12063..0000000 --- a/test/test.html +++ /dev/null @@ -1,815 +0,0 @@ - - - - - - - - Concise CSS - - - -

Giga Helper text

Mega Helper text

Kilo Helper text

- -

Heading 1 Helper link

Heading 2 Helper text

Heading 3 Helper text

Heading 4 Helper text

Heading 5 Helper text

Heading 6 Helper text

- -

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

- -

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

- -

Left text

- -

Center text

- -

Right text

- -

-
This is a blockquote.
- -
John Doe
-

- -

-
This is a reverse blockquote.
- - John Doe -

- -

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

- -

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

- -

List Item
List Item
List Item
List Item -
- List Item
- List Item -
  - List Item
  -
-
List Item

- -

List Item
List Item -
1. List Item -
  1. List Item
  -
-
List Item

- -

List item
List item
List item

- -

List item
List item
List item

- -

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

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name
1	John	Doe
2	Jane	Doe

- -

- - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name
1	John	Doe
2	Jane	Doe

- - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name
1	John	Doe
2	Jane	Doe

- - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name
1	John	Doe
2	Jane	Doe

- - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name
1	John	Doe
2	Jane	Doe

- - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name
1	John	Doe
2	Jane	Doe

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name
1	John	Doe
2	Jane	Doe
3	John	Doe

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

#	First Name	Last Name
1	John	Doe
2	Jane	Doe
3	John	Doe

- - - - - - - -

- - - - - - - - - - - -

- -

- -

- -

- -

- -

Label

- -

- -

- -

- -

- -

- -

- × - -

Alert! This is a standard message for your application.

- -

- × - -

Success! This is a success message for your application.

- -

- × - -

Warning! This is a warning for your application.

- -

- × - -

Error! This is an error for your application.

- -

Card Title

- -

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

- -

- Leave a comment? -

- -

Card Title

- -

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

- -

- Read More » -

- -

Collection Header

- -

- Collection Item -

- -

- Active Collection Item -

- -

- Collection Item -

- -

- Collection Item - - Active Collection Item - - Collection Item -

- -

Left
Center
Right

- -

First
1
2
3
4
Last

- -

- 50% -

- -

- 25% -

- -

- 75% -

- -

- - - - -

- -

- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -