+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ // 
](http://concisecss.com/)
+Concise.css v3.0.0
+=============
-[](http://badge.fury.io/bo/concise)
-
-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.
-
-## Quickstart
-
-It's easy to get started with Concise:
-
-- [Download the latest release](https://github.com/ConciseCSS/concise.css/archive/v2.0.0.zip)
-- Clone the repo: `git clone https://github.com/ConciseCSS/concise.css.git`
-- Install with [Bower](http://bower.io/): `bower install concise`
-- Install the [gem](https://github.com/ConciseCSS/concise.css-gem): `$ gem install concisecss`
-- Use [Concise Generator](https://github.com/ConciseCSS/concise-generator) - _Experimental version_
-
-After you download or install the package, [read our quickstart guide](http://concisecss.com/get-started/getting-started) to get up and running.
-
-## Documentation
-
-What would a project be without great documentation? Concise has documentation for everything that is included in the framework. If you see something that is missing or incorrect, don't hesitate to open up an issue on our GitHub repo.
-
-Check out our documentation here: [http://concisecss.com/documentation](http://concisecss.com/documentation)
-
-### Changelog
-
-You can keep up-to-date with the changes that we have made via our [releases page](https://github.com/ConciseCSS/concise.css/releases).
-
-### Specific Questions
-
-** *Thanks to [thoughtbot](http://robots.thoughtbot.com/moving-open-source-project-mailing-lists-to-stack-overflow) for this great way to handling questions for an open source project.*
-
-In lieu of a mailing list, we are going to manage all specific questions through [Stack Overflow](http://stackoverflow.com/).
-
-Members of the Concise team are subscribed to specific tags via [Stack Exchange Filters](http://stackexchange.com/filters), so that if a question is properly tagged, we can respond in a timely manner and help.
-
-**Which tags?**
-
-Ideally, we would like to keep it to just one tag for Concise questions, but we are subscribed to multiple variants to make sure nothing passes by us. However, for everybody asking a question, please use:
-
-- [Concise](http://stackoverflow.com/questions/tagged/concise)
-
-**Where do I post this?**
-
-There are lots of different things that people will want to post regarding the Concise framework. Here is a rough outline of where you should post any given issue, question or contribution:
-
-- Use [Stack Overflow](http://stackoverflow.com) if you **need help**
-- Use [GitHub Issues](http://github.com/ConciseCSS/concise.css/issues) if you **found a bug**
-- Use [GitHub Issues](http://github.com/ConciseCSS/concise.css/issues) if you **have an idea**
-- Use [GitHub Issues](http://github.com/ConciseCSS/concise.css/issues) if you want to **ask a question**
-- Submit a [pull request](https://help.github.com/articles/creating-a-pull-request) if you **want to contribute**
-
-## Contributing
-
-If you wish to contribute to the Concise project, please read through our [contributing guidelines](https://github.com/ConciseCSS/concise.css/blob/master/CONTRIBUTING.md) first. This will ensure that you are posting things in the proper areas, and that you are following our coding standards.
-
-Are you interested in contributing monetarily to the project? If so, check out our [Gittip page](https://www.gittip.com/keenanpayne/). All tips that we receive from Gittip will go straight to maintaining and building upon Concise.
-
-## Versioning
-
-Concise is currently maintained under the [Semantic Versioning guidelines](http://semver.org/).
-
-## Acknowledgments
-
-There are acknowledgements spread throughout the source code if you look around, and you can also view a list of credits [here](http://concisecss.com/credits/).
-
-## Contributors
-
-**Keenan Payne**
-- [Website](http://keenanpayne.com)
-- [GitHub](http://github.com/keenanpayne)
-- [Twitter](http://twitter.com/keenan_payne)
-
-**Filipe Linhares**
-- [Website](http://filipelinhares.com)
-- [GitHub](http://github.com/filipelinhares)
-- [Twitter](http://twitter.com/ofilipelinhares)
-
-**Benjamin Sigidi**
-- [Website](https://moozen.com/)
-- [GitHub](https://github.com/benjaminsigidi)
-
-## Elsewhere
-
-[](https://facebook.com/ConciseCSS)
-[](https://twitter.com/ConciseCSS)
-[](https://plus.google.com/103423710089455112688)
-
-## License
-
-Code released under the [MIT license](https://github.com/ConciseCSS/concise.css/blob/master/LICENSE). Documentation released under [Creative Commons](http://creativecommons.org/licenses/by-sa/4.0/).
+A look at what a re-architected Concise could look like (v3.0.0).
diff --git a/composer.json b/composer.json
deleted file mode 100644
index 07a881f..0000000
--- a/composer.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "name": "concisecss/concise.css",
- "description": "A lightweight front-end framework that provides functionality without the bloat.",
- "keywords": [
- "css",
- "js",
- "sass",
- "scss",
- "mobile-first",
- "responsive",
- "front-end",
- "framework",
- "web"
- ],
- "homepage": "http://concisecss.com",
- "authors": [
- {
- "name": "Keenan Payne",
- "email": "contact@keenanpayne.com"
- }
- ],
- "support": {
- "issues": "https://github.com/ConciseCSS/concise.css/issues"
- },
- "license": "MIT",
- "replace": {
- "concisecss/concise.css": "self.version"
- }
-}
diff --git a/dist/concise.css b/dist/concise.css
new file mode 100644
index 0000000..322c15d
--- /dev/null
+++ b/dist/concise.css
@@ -0,0 +1,1941 @@
+/**
+ * Concise Framework
+ * https://github.com/ConciseCSS/concise.css
+ *
+ * Copyright 2015 Concise Team
+ * 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; }
+
+main,
+summary {
+ display: block; }
+
+pre {
+ overflow: auto; }
+
+progress {
+ display: inline-block; }
+
+textarea {
+ overflow: auto; }
+
+template,
+[hidden] {
+ display: none; }
+
+[unselectable] {
+ 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; }
+
+::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: 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: white;
+ 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; }
+
+.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%; }
+
+.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: 0.875em;
+ height: 32px;
+ padding: 0 0.75em;
+ 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: none; }
+ 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: none; }
+ input[type="submit"] {
+ line-height: normal; }
+ input[type="submit"].button {
+ border-radius: 0; }
+
+label {
+ display: block;
+ font-size: 0.875em; }
+
+fieldset {
+ border: 1px solid #e0e0e0;
+ border-radius: 3px;
+ padding: 24px 1em;
+ margin-bottom: 24px; }
+
+legend {
+ font-size: 0.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 0.5em;
+ line-height: 30px;
+ vertical-align: middle; }
+
+input[type="file"] {
+ border: none;
+ 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 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;
+ 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; } }
+
+li {
+ line-height: 24px; }
+
+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;
+ 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: none;
+ page-break-inside: avoid; }
+ thead {
+ display: table-header-group; }
+ tr,
+ img {
+ page-break-inside: avoid; }
+ ol {
+ padding-left: 1.25em; }
+ ul {
+ padding-left: 0;
+ list-style: none; }
+ ul ul,
+ ul ul ul {
+ padding-left: 1.5em; }
+ ul li,
+ ol li {
+ content: "» "; } }
+
+@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--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; }
+
+p code {
+ padding: 3px 4px 1px; }
+
+pre code {
+ background-color: transparent;
+ border: none;
+ padding: 0; }
+
+.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--xs,
+.hide--s,
+.hide--m,
+.hide--l,
+.hide--xl,
+.hide--print,
+.hide--hd {
+ display: block;
+ visibility: visible; }
+
+.hide--xs,
+.show--s,
+.show--m,
+.show--l,
+.show--xl,
+.show--print,
+.show--hd {
+ display: none;
+ visibility: hidden; }
+
+@media (min-width: 48em) {
+ .show--s,
+ .hide--xs,
+ .hide--m,
+ .hide--l,
+ .hide--xl {
+ display: block;
+ visibility: visible; }
+ .hide--s,
+ .show--xs,
+ .show--m,
+ .show--l,
+ .show--xl {
+ display: none;
+ visibility: hidden; } }
+
+@media (min-width: 60em) {
+ .show--m,
+ .hide--s,
+ .hide--xs,
+ .hide--l,
+ .hide--xl {
+ display: block;
+ visibility: visible; }
+ .hide--m,
+ .show--s,
+ .show--xs,
+ .show--l,
+ .show--xl {
+ display: none;
+ visibility: hidden; } }
+
+@media (min-width: 70em) {
+ .show--l,
+ .hide--xs,
+ .hide--s,
+ .hide--m,
+ .hide--xl {
+ display: block;
+ visibility: visible; }
+ .hide--l,
+ .show--xs,
+ .show--s,
+ .show--m,
+ .show--xl {
+ display: none;
+ visibility: hidden; } }
+
+@media (min-width: 80em) {
+ .show--xl,
+ .hide--xs,
+ .hide--s,
+ .hide--m,
+ .hide--l {
+ display: block;
+ visibility: visible; }
+ .hide--xl,
+ .show--xs,
+ .show--s,
+ .show--m,
+ .show--l {
+ 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: white;
+ display: inline; }
+
+.modal-body,
+.modal-footer {
+ background-color: white;
+ margin-top: 0;
+ padding: 24px 2.5em; }
+
+.modal-body p {
+ margin-bottom: 0; }
+
+.modal-body p + p {
+ margin-bottom: 20px; }
+
+.modal-footer {
+ border-top: 1px solid #e0e0e0;
+ font-size: 0.875em;
+ margin: 0; }
+ .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: #555; }
+
+.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
new file mode 100644
index 0000000..260ee97
--- /dev/null
+++ b/dist/concise.min.css
@@ -0,0 +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:white;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}}li{line-height:24px}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--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}p code{padding:3px 4px 1px}pre code{background-color:transparent;border:0;padding:0}.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--xs,.hide--s,.hide--m,.hide--l,.hide--xl,.hide--print,.hide--hd{display:block;visibility:visible}.hide--xs,.show--s,.show--m,.show--l,.show--xl,.show--print,.show--hd{display:none;visibility:hidden}@media(min-width:48em){.show--s,.hide--xs,.hide--m,.hide--l,.hide--xl{display:block;visibility:visible}.hide--s,.show--xs,.show--m,.show--l,.show--xl{display:none;visibility:hidden}}@media(min-width:60em){.show--m,.hide--s,.hide--xs,.hide--l,.hide--xl{display:block;visibility:visible}.hide--m,.show--s,.show--xs,.show--l,.show--xl{display:none;visibility:hidden}}@media(min-width:70em){.show--l,.hide--xs,.hide--s,.hide--m,.hide--xl{display:block;visibility:visible}.hide--l,.show--xs,.show--s,.show--m,.show--xl{display:none;visibility:hidden}}@media(min-width:80em){.show--xl,.hide--xs,.hide--s,.hide--m,.hide--l{display:block;visibility:visible}.hide--xl,.show--xs,.show--s,.show--m,.show--l{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:white;display:inline}.modal-body,.modal-footer{background-color:white;margin-top:0;padding:24px 2.5em}.modal-body p{margin-bottom:0}.modal-body p+p{margin-bottom:20px}.modal-footer{border-top:1px solid #e0e0e0;font-size:.875em;margin:0}.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:#555}.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
diff --git a/dist/css/concise.css b/dist/css/concise.css
deleted file mode 100644
index 94d636b..0000000
--- a/dist/css/concise.css
+++ /dev/null
@@ -1,2076 +0,0 @@
-/**
- * # Concise.CSS
- * http://github.com/ConciseCSS/concise.css
- *
- *
- * Copyright 2014 Contributors
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-html {
- font-size: 100%;
- text-size-adjust: 100%;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section,
-summary {
- display: block;
-}
-
-audio,
-canvas,
-progress,
-video {
- display: inline-block;
- vertical-align: baseline;
-}
-
-audio:not([controls]) {
- display: none;
- height: 0;
-}
-
-[hidden],
-template {
- display: none;
-}
-
-a {
- background: transparent;
-}
-a:focus {
- outline: thin dotted;
-}
-a:active, a:hover {
- outline: 0;
-}
-
-abbr[title] {
- border-bottom: 1px dotted;
-}
-
-b,
-strong {
- font-weight: bold;
-}
-
-dfn {
- font-style: italic;
-}
-
-mark {
- background: #ff0;
- color: #000;
-}
-
-sub,
-sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-
-sup {
- top: -0.5em;
-}
-
-sub {
- bottom: -0.25em;
-}
-
-img {
- border: 0;
- -ms-interpolation-mode: bicubic;
-}
-
-svg:not(:root) {
- overflow: hidden;
-}
-
-figure {
- margin: 1em 40px;
-}
-
-hr {
- border: solid #eee;
- border-width: 1px 0 0;
- box-sizing: content-box;
- clear: both;
- height: 0;
-}
-
-pre {
- white-space: pre;
- white-space: pre-wrap;
- word-wrap: break-word;
-}
-
-code,
-kbd,
-pre,
-samp {
- font-family: monospace, monospace;
- font-size: 16px;
- font-size: 1rem;
- line-height: 1.5;
-}
-
-q {
- quotes: none;
-}
-q:before, q:after {
- content: '';
- content: none;
-}
-
-form {
- margin: 0;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
- color: inherit;
- font: inherit;
- margin: 0;
- vertical-align: baseline;
-}
-
-button {
- overflow: visible;
-}
-
-button,
-select {
- text-transform: none;
-}
-
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
- -webkit-appearance: button;
- cursor: pointer;
-}
-
-button[disabled],
-html input[disabled] {
- cursor: default;
-}
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
- border: 0;
- padding: 0;
-}
-
-input {
- line-height: normal;
-}
-input[type="checkbox"], input[type="radio"] {
- box-sizing: border-box;
- padding: 0;
-}
-input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
- height: auto;
-}
-input[type="search"] {
- box-sizing: content-box;
- -webkit-appearance: textfield;
-}
-input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-
-fieldset {
- margin: 0 2px;
-}
-
-legend {
- border: 0;
- padding: 0;
- white-space: normal;
-}
-
-textarea {
- overflow: auto;
-}
-
-optgroup {
- font-weight: bold;
-}
-
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-td,
-th {
- padding: 0;
-}
-
-.clearfix:after {
- content: "";
- display: table;
- clear: both;
-}
-
-*, *:before, *:after {
- box-sizing: border-box;
-}
-
-html,
-body {
- background-color: #ffffff;
- color: #333333;
- font: normal normal 1em/1.5 "Droid Sans", Helvetica, Arial, sans-serif;
- margin: 0;
- font-smooth: always;
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
-}
-
-html[dir="rtl"] {
- direction: rtl;
-}
-
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6,
-.giga, .mega, .kilo,
-hgroup,
-ul, ol, dl,
-blockquote, p, address,
-table,
-fieldset, figure,
-pre,
-.row, .form-item {
- margin-bottom: 24px;
- margin-bottom: 1.5rem;
-}
-
-hr {
- margin-bottom: 22px;
- margin-bottom: 1.375rem;
-}
-
-ul,
-ol,
-dd {
- margin-left: 48px;
- margin-left: 3rem;
-}
-
-*::-webkit-selection {
- background-color: #666666;
- color: #ffffff;
-}
-*::-moz-selection {
- background-color: #666666;
- color: #ffffff;
-}
-*::selection {
- background-color: #666666;
- color: #ffffff;
-}
-
-a {
- color: #62b3e7;
-}
-a:hover, a:visited {
- color: #8ec8ee;
- cursor: pointer;
-}
-p a, p a:visited {
- line-height: inherit;
-}
-
-small,
-.small {
- font-size: 12px;
- font-size: 0.75rem;
- line-height: 2;
-}
-
-.micro {
- font-size: 10px;
- font-size: 0.625rem;
- line-height: 2.4;
-}
-
-address {
- font-style: normal;
-}
-
-abbr[title], abbr[data-original-title] {
- cursor: help;
- border-bottom: 1px dotted #333333;
-}
-
-acronym {
- cursor: help;
- border-bottom: 1px dashed #333333;
-}
-
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6,
-.giga, .mega, .kilo {
- color: #181818;
- font-family: "Droid Sans", Helvetica, Arial, sans-serif;
- font-weight: normal;
- text-rendering: optimizeLegibility;
-}
-h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
-.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a,
-.giga a, .mega a, .kilo a {
- font-weight: inherit;
-}
-h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
-.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small,
-.giga small, .mega small, .kilo small {
- color: #808080;
- font-size: 60%;
- line-height: 1;
-}
-
-h1, .h1 {
- font-size: 24px;
- font-size: 1.5rem;
- line-height: 1;
-}
-@media (min-width: 48em) {
- h1, .h1 {
- font-size: 32px;
- font-size: 2rem;
- line-height: 1.5;
- }
-}
-@media (min-width: 60em) {
- h1, .h1 {
- font-size: 36px;
- font-size: 2.25rem;
- line-height: 1.33333;
- }
-}
-
-h2, .h2 {
- font-size: 20px;
- font-size: 1.25rem;
- line-height: 1.2;
-}
-@media (min-width: 48em) {
- h2, .h2 {
- font-size: 24px;
- font-size: 1.5rem;
- line-height: 1;
- }
-}
-@media (min-width: 60em) {
- h2, .h2 {
- font-size: 30px;
- font-size: 1.875rem;
- line-height: 1.6;
- }
-}
-
-h3, .h3 {
- font-size: 18px;
- font-size: 1.125rem;
- line-height: 1.33333;
-}
-@media (min-width: 48em) {
- h3, .h3 {
- font-size: 20px;
- font-size: 1.25rem;
- line-height: 1.2;
- }
-}
-@media (min-width: 60em) {
- h3, .h3 {
- font-size: 24px;
- font-size: 1.5rem;
- line-height: 1;
- }
-}
-
-h4, .h4 {
- font-size: 16px;
- font-size: 1rem;
- line-height: 1.5;
-}
-@media (min-width: 48em) {
- h4, .h4 {
- font-size: 18px;
- font-size: 1.125rem;
- line-height: 1.33333;
- }
-}
-@media (min-width: 60em) {
- h4, .h4 {
- font-size: 20px;
- font-size: 1.25rem;
- line-height: 1.2;
- }
-}
-
-h5, .h5 {
- font-size: 14px;
- font-size: 0.875rem;
- line-height: 1.71429;
-}
-@media (min-width: 48em) {
- h5, .h5 {
- font-size: 16px;
- font-size: 1rem;
- line-height: 1.5;
- }
-}
-@media (min-width: 60em) {
- h5, .h5 {
- font-size: 18px;
- font-size: 1.125rem;
- line-height: 1.33333;
- }
-}
-
-h6, .h6 {
- font-size: 12px;
- font-size: 0.75rem;
- line-height: 2;
-}
-@media (min-width: 48em) {
- h6, .h6 {
- font-size: 14px;
- font-size: 0.875rem;
- line-height: 1.71429;
- }
-}
-@media (min-width: 60em) {
- h6, .h6 {
- font-size: 16px;
- font-size: 1rem;
- line-height: 1.5;
- }
-}
-
-.giga {
- font-size: 48px;
- font-size: 3rem;
- line-height: 1;
-}
-@media (min-width: 48em) {
- .giga {
- font-size: 64px;
- font-size: 4rem;
- line-height: 1.125;
- }
-}
-@media (min-width: 70em) {
- .giga {
- font-size: 80px;
- font-size: 5rem;
- line-height: 1.2;
- }
-}
-@media (min-width: 80em) {
- .giga {
- font-size: 96px;
- font-size: 6rem;
- line-height: 1;
- }
-}
-
-.mega {
- font-size: 40px;
- font-size: 2.5rem;
- line-height: 1.2;
-}
-@media (min-width: 48em) {
- .mega {
- font-size: 48px;
- font-size: 3rem;
- line-height: 1;
- }
-}
-@media (min-width: 70em) {
- .mega {
- font-size: 64px;
- font-size: 4rem;
- line-height: 1.125;
- }
-}
-@media (min-width: 80em) {
- .mega {
- font-size: 72px;
- font-size: 4.5rem;
- line-height: 1;
- }
-}
-
-.kilo {
- font-size: 32px;
- font-size: 2rem;
- line-height: 1.5;
-}
-@media (min-width: 48em) {
- .kilo {
- font-size: 32px;
- font-size: 2rem;
- line-height: 1.5;
- }
-}
-@media (min-width: 70em) {
- .kilo {
- font-size: 48px;
- font-size: 3rem;
- line-height: 1;
- }
-}
-@media (min-width: 80em) {
- .kilo {
- font-size: 64px;
- font-size: 4rem;
- line-height: 1.125;
- }
-}
-
-.container {
- margin: 0 auto;
- width: 90%;
-}
-@media (min-width: 48em) {
- .container {
- width: 620px;
- }
-}
-@media (min-width: 60em) {
- .container {
- width: 768px;
- }
-}
-@media (min-width: 70em) {
- .container {
- width: 960px;
- }
-}
-@media (min-width: 80em) {
- .container {
- width: 1140px;
- }
-}
-
-.row {
- width: 100%;
-}
-.row:after {
- clear: both;
- content: " ";
- display: table;
-}
-
-[class*='column-'] {
- background-clip: padding-box !important;
-}
-[class*='column-'].right {
- float: right;
-}
-[class*='column-'] img {
- max-width: 100%;
-}
-
-@media (min-width: 48em) {
- [class*='column-'] {
- float: left;
- }
-
- .gutters [class*='column-'] {
- margin-left: 2%;
- }
- .gutters [class*='column-']:first-child {
- margin-left: 0;
- }
-
- .gutters-off [class*='column-'] {
- margin-left: 0;
- }
-
- .column-1,
- .gutters .gutters-off .column-1 {
- width: 6.25%;
- }
-
- .gutters .column-1 {
- width: 4.375%;
- }
-
- .column-2,
- .gutters .gutters-off .column-2 {
- width: 12.5%;
- }
-
- .gutters .column-2 {
- width: 10.75%;
- }
-
- .column-3,
- .gutters .gutters-off .column-3 {
- width: 18.75%;
- }
-
- .gutters .column-3 {
- width: 17.125%;
- }
-
- .column-4,
- .gutters .gutters-off .column-4 {
- width: 25%;
- }
-
- .gutters .column-4 {
- width: 23.5%;
- }
-
- .column-5,
- .gutters .gutters-off .column-5 {
- width: 31.25%;
- }
-
- .gutters .column-5 {
- width: 29.875%;
- }
-
- .column-6,
- .gutters .gutters-off .column-6 {
- width: 37.5%;
- }
-
- .gutters .column-6 {
- width: 36.25%;
- }
-
- .column-7,
- .gutters .gutters-off .column-7 {
- width: 43.75%;
- }
-
- .gutters .column-7 {
- width: 42.625%;
- }
-
- .column-8,
- .gutters .gutters-off .column-8 {
- width: 50%;
- }
-
- .gutters .column-8 {
- width: 49%;
- }
-
- .column-9,
- .gutters .gutters-off .column-9 {
- width: 56.25%;
- }
-
- .gutters .column-9 {
- width: 55.375%;
- }
-
- .column-10,
- .gutters .gutters-off .column-10 {
- width: 62.5%;
- }
-
- .gutters .column-10 {
- width: 61.75%;
- }
-
- .column-11,
- .gutters .gutters-off .column-11 {
- width: 68.75%;
- }
-
- .gutters .column-11 {
- width: 68.125%;
- }
-
- .column-12,
- .gutters .gutters-off .column-12 {
- width: 75%;
- }
-
- .gutters .column-12 {
- width: 74.5%;
- }
-
- .column-13,
- .gutters .gutters-off .column-13 {
- width: 81.25%;
- }
-
- .gutters .column-13 {
- width: 80.875%;
- }
-
- .column-14,
- .gutters .gutters-off .column-14 {
- width: 87.5%;
- }
-
- .gutters .column-14 {
- width: 87.25%;
- }
-
- .column-15,
- .gutters .gutters-off .column-15 {
- width: 93.75%;
- }
-
- .gutters .column-15 {
- width: 93.625%;
- }
-
- .column-16,
- .gutters .gutters-off .column-16 {
- width: 100%;
- }
-
- .gutters .column-16 {
- width: 100%;
- }
-
- [class*='push-'] {
- position: relative;
- }
-
- .push-1 {
- left: 6.25%;
- }
- .gutters .push-1 {
- left: 4.25%;
- }
-
- .push-2 {
- left: 12.5%;
- }
- .gutters .push-2 {
- left: 10.5%;
- }
-
- .push-3 {
- left: 18.75%;
- }
- .gutters .push-3 {
- left: 16.75%;
- }
-
- .push-4 {
- left: 25%;
- }
- .gutters .push-4 {
- left: 23%;
- }
-
- .push-5 {
- left: 31.25%;
- }
- .gutters .push-5 {
- left: 29.25%;
- }
-
- .push-6 {
- left: 37.5%;
- }
- .gutters .push-6 {
- left: 35.5%;
- }
-
- .push-7 {
- left: 43.75%;
- }
- .gutters .push-7 {
- left: 41.75%;
- }
-
- .push-8 {
- left: 50%;
- }
- .gutters .push-8 {
- left: 48%;
- }
-
- .push-9 {
- left: 56.25%;
- }
- .gutters .push-9 {
- left: 54.25%;
- }
-
- .push-10 {
- left: 62.5%;
- }
- .gutters .push-10 {
- left: 60.5%;
- }
-
- .push-11 {
- left: 68.75%;
- }
- .gutters .push-11 {
- left: 66.75%;
- }
-
- .push-12 {
- left: 75%;
- }
- .gutters .push-12 {
- left: 73%;
- }
-
- .push-13 {
- left: 81.25%;
- }
- .gutters .push-13 {
- left: 79.25%;
- }
-
- .push-14 {
- left: 87.5%;
- }
- .gutters .push-14 {
- left: 85.5%;
- }
-
- .push-15 {
- left: 93.75%;
- }
- .gutters .push-15 {
- left: 91.75%;
- }
-
- [class*='pull-'] {
- position: relative;
- }
-
- .pull-1 {
- right: 6.25%;
- }
- .gutters .pull-1 {
- right: 4.25%;
- }
-
- .pull-2 {
- right: 12.5%;
- }
- .gutters .pull-2 {
- right: 10.5%;
- }
-
- .pull-3 {
- right: 18.75%;
- }
- .gutters .pull-3 {
- right: 16.75%;
- }
-
- .pull-4 {
- right: 25%;
- }
- .gutters .pull-4 {
- right: 23%;
- }
-
- .pull-5 {
- right: 31.25%;
- }
- .gutters .pull-5 {
- right: 29.25%;
- }
-
- .pull-6 {
- right: 37.5%;
- }
- .gutters .pull-6 {
- right: 35.5%;
- }
-
- .pull-7 {
- right: 43.75%;
- }
- .gutters .pull-7 {
- right: 41.75%;
- }
-
- .pull-8 {
- right: 50%;
- }
- .gutters .pull-8 {
- right: 48%;
- }
-
- .pull-9 {
- right: 56.25%;
- }
- .gutters .pull-9 {
- right: 54.25%;
- }
-
- .pull-10 {
- right: 62.5%;
- }
- .gutters .pull-10 {
- right: 60.5%;
- }
-
- .pull-11 {
- right: 68.75%;
- }
- .gutters .pull-11 {
- right: 66.75%;
- }
-
- .pull-12 {
- right: 75%;
- }
- .gutters .pull-12 {
- right: 73%;
- }
-
- .pull-13 {
- right: 81.25%;
- }
- .gutters .pull-13 {
- right: 79.25%;
- }
-
- .pull-14 {
- right: 87.5%;
- }
- .gutters .pull-14 {
- right: 85.5%;
- }
-
- .pull-15 {
- right: 93.75%;
- }
- .gutters .pull-15 {
- right: 91.75%;
- }
-}
-.non-responsive [class*='column-'] {
- float: left;
- width: auto !important;
-}
-.non-responsive .gutters [class*='column-'], .non-responsive.gutters [class*='column-'] {
- margin-left: 2%;
-}
-.non-responsive .gutters [class*='column-']:first-child, .non-responsive.gutters [class*='column-']:first-child {
- margin-left: 0;
-}
-
-ul,
-ol {
- margin-left: 20px;
- padding-left: 0px;
-}
-ul li,
-ol li {
- line-height: 1.75em;
-}
-ul ul,
-ol ul {
- list-style-type: circle;
- margin-bottom: auto;
-}
-ul ul ul,
-ol ul ul {
- list-style-type: square;
-}
-ul ul ol,
-ol ul ol {
- list-style-type: lower-roman;
-}
-@media (min-width: 48em) {
- ul ul,
- ol ul {
- margin-left: 20px;
- }
-}
-ul ol,
-ol ol {
- list-style-type: lower-latin;
- margin-bottom: auto;
-}
-ul ol ol,
-ol ol ol {
- list-style-type: lower-roman;
-}
-ul ol ul,
-ol ol ul {
- list-style-type: square;
-}
-
-.list-unstyled {
- margin-left: 0px;
- list-style: none;
-}
-.list-unstyled ul {
- list-style: none;
-}
-.list-unstyled ul ul {
- list-style: none;
-}
-
-.list-inline {
- margin-left: 0px;
-}
-.list-inline li {
- border-bottom: none;
- display: inline;
- margin-right: 15px;
-}
-.list-inline li:last-child {
- margin-right: 0px;
-}
-@media (min-width: 48em) {
- .list-inline li {
- margin-right: 15px;
- }
- .list-inline li:last-child {
- margin-right: 0px;
- }
-}
-@media (min-width: 60em) {
- .list-inline li {
- margin-right: 30px;
- }
- .list-inline li:last-child {
- margin-right: 0px;
- }
-}
-
-dt {
- font-weight: bold;
-}
-
-dd {
- margin-left: 0px;
-}
-
-input[type="checkbox"], input[type="file"], input[type="image"], input[type="radio"] {
- background: auto;
- border: auto;
- height: auto;
- width: auto;
-}
-
-input[disabled],
-select[disabled],
-textarea[disabled] {
- background-color: #f6f6f6;
- cursor: not-allowed;
-}
-
-label {
- display: block;
-}
-
-textarea {
- height: auto;
-}
-
-.form input,
-.form select,
-.form textarea {
- border: 1px solid #cccccc;
- box-sizing: border-box;
- height: 37px;
- padding: 5px;
- width: 100%;
-}
-@media (min-width: 30em) {
- .form input,
- .form select,
- .form textarea {
- width: 300px;
- }
-}
-.form textarea {
- height: auto;
-}
-@media (min-width: 30em) {
- .form input[type="submit"] {
- display: block;
- width: auto;
- }
-}
-.form input:focus,
-.form select:focus,
-.form textarea:focus,
-.form button:focus,
-.form [contenteditable="true"]:focus {
- outline: 1px solid #a6a6a6;
-}
-.form fieldset {
- border: 1px solid #cccccc;
- padding: 10px 25px;
-}
-.form fieldset legend {
- font-weight: bold;
- font-size: 13px;
- font-size: 0.8125rem;
- line-height: 1.84615;
- padding: 0 10px;
-}
-
-.form-item {
- display: block;
-}
-
-.form-inline label {
- width: auto;
-}
-@media (min-width: 48em) {
- .form-inline label {
- display: inline-block;
- width: 100px;
- }
- .form-inline textarea {
- width: auto;
- }
-}
-
-::-webkit-input-placeholder {
- color: #bbbbbb;
-}
-
-:-ms-input-placeholder {
- color: #bbbbbb;
-}
-
-::-moz-placeholder {
- color: #bbbbbb;
-}
-
-:-moz-placeholder {
- color: #bbbbbb;
-}
-
-table.table {
- empty-cells: show;
- width: 100%;
-}
-table.table caption {
- color: #000;
- font: italic 85%/1 arial, sans-serif;
- padding: 1em 0;
- text-align: center;
-}
-table.table thead {
- border-bottom: 2px solid #cccccc;
-}
-table.table th,
-table.table td {
- padding: 12px 15px;
-}
-table.table td {
- border-top: 1px solid #cccccc;
-}
-@media (min-width: 30em) {
- table.table {
- width: auto;
- }
- table.table th,
- table.table td {
- padding: 10px 50px 10px 25px;
- }
-}
-table.table-full, table.table.table-full {
- width: 100%;
-}
-
-.table-responsive {
- overflow: auto;
- width: 100%;
-}
-.table-responsive table {
- margin-bottom: 0;
-}
-.table-responsive::-webkit-scrollbar {
- height: 14px;
- width: 14px;
- -webkit-appearance: none;
-}
-.table-responsive::-webkit-scrollbar-thumb {
- background-color: rgba(50, 50, 50, 0.2);
- border: 3px solid #fff;
- border-radius: 8px;
-}
-
-.bg-white {
- background-color: #ffffff;
-}
-
-.bg-black {
- background-color: #222222;
-}
-
-.bg-light-black {
- background-color: #757575;
-}
-
-.bg-gray {
- background-color: #999999;
-}
-
-.bg-light-gray {
- background-color: #ececec;
-}
-
-.bg-green {
- background-color: #5cb85c;
-}
-
-.bg-light-green {
- background-color: #cfeacf;
-}
-
-.bg-blue {
- background-color: #5bc0de;
-}
-
-.bg-light-blue {
- background-color: #e5f5fa;
-}
-
-.bg-yellow {
- background-color: #ed9c28;
-}
-
-.bg-light-yellow {
- background-color: #fae2c1;
-}
-
-.bg-red {
- background-color: #d9534f;
-}
-
-.bg-light-red {
- background-color: #f6d8d7;
-}
-
-.color-white {
- color: #ffffff;
-}
-
-.color-black {
- color: #222222;
-}
-
-.color-gray {
- color: #999999;
-}
-
-.color-green {
- color: #468847;
-}
-
-.color-blue {
- color: #3a87ad;
-}
-
-.color-yellow {
- color: #c09853;
-}
-
-.color-red {
- color: #d2322d;
-}
-
-.btn {
- background-color: #cccccc;
- border: 0;
- color: #ffffff;
- cursor: pointer;
- display: inline-block;
- font-family: inherit;
- font-size: 100%;
- line-height: 1;
- padding: 0.5em 1em;
- position: relative;
- text-align: center;
- text-decoration: none;
- user-select: none;
- vertical-align: baseline;
- white-space: nowrap;
-}
-.btn::-moz-focus-inner {
- padding: 0;
- border: 0;
-}
-.btn:hover {
- background-color: #b3b3b3;
-}
-.btn:active {
- background-color: #bfbfbf;
-}
-.btn[disabled], .btn[disabled]:hover, .btn[disabled]:active, .btn[disabled]:focus {
- background: #dededc !important;
- border: none;
- color: #b3b3b1;
- cursor: not-allowed;
-}
-.btn a.btn, .btn a.btn:hover {
- color: #ffffff;
- text-decoration: none;
-}
-.btn a.btn:active {
- outline: 0;
-}
-.btn input[type="submit"].btn {
- color: #ffffff;
- height: auto;
- padding: 0.5em 1em;
-}
-.btn button.btn {
- color: #ffffff;
-}
-.btn.bg-white {
- background-color: #ffffff;
-}
-.btn.bg-white:hover {
- background-color: #e6e6e6;
-}
-.btn.bg-white:active {
- background-color: #f2f2f2;
-}
-.btn.bg-black {
- background-color: #222222;
-}
-.btn.bg-black:hover {
- background-color: #090909;
-}
-.btn.bg-black:active {
- background-color: #151515;
-}
-.btn.bg-light-black {
- background-color: #757575;
-}
-.btn.bg-gray {
- background-color: #999999;
-}
-.btn.bg-gray:hover {
- background-color: gray;
-}
-.btn.bg-gray:active {
- background-color: #8c8c8c;
-}
-.btn.bg-light-gray {
- background-color: #ececec;
-}
-.btn.bg-green {
- background-color: #5cb85c;
-}
-.btn.bg-green:hover {
- background-color: #449d44;
-}
-.btn.bg-green:active {
- background-color: #4cae4c;
-}
-.btn.bg-light-green {
- background-color: #cfeacf;
-}
-.btn.bg-blue {
- background-color: #5bc0de;
-}
-.btn.bg-blue:hover {
- background-color: #31b0d5;
-}
-.btn.bg-blue:active {
- background-color: #46b8da;
-}
-.btn.bg-light-blue {
- background-color: #e5f5fa;
-}
-.btn.bg-yellow {
- background-color: #ed9c28;
-}
-.btn.bg-yellow:hover {
- background-color: #d18211;
-}
-.btn.bg-yellow:active {
- background-color: #e89113;
-}
-.btn.bg-light-yellow {
- background-color: #fae2c1;
-}
-.btn.bg-red {
- background-color: #d9534f;
-}
-.btn.bg-red:hover {
- background-color: #c9302c;
-}
-.btn.bg-red:active {
- background-color: #d43f3a;
-}
-.btn.bg-light-red {
- background-color: #f6d8d7;
-}
-
-.btn-collapse-full {
- display: block;
- margin: 12px 0;
- width: 100%;
-}
-@media (min-width: 30em) {
- .btn-collapse-full {
- display: inline-block;
- margin: 0;
- width: auto;
- }
-}
-
-.btn-extra-small,
-a.btn-extra-small,
-p.btn-extra-small,
-input.btn-extra-small {
- font-size: 10px;
- font-size: 0.625rem;
- line-height: 2.4;
- padding: 0.25em 0.75em;
-}
-
-.btn-small,
-a.btn-small,
-p.btn-small,
-input.btn-small {
- font-size: 12px;
- font-size: 0.75rem;
- line-height: 2;
-}
-
-.btn-large,
-a.btn-large,
-p.btn-large,
-input.btn-large {
- font-size: 18px;
- font-size: 1.125rem;
- line-height: 1.33333;
- padding: 1em 2em;
-}
-
-.btn-extra-large,
-a.btn-extra-large,
-p.btn-extra-large,
-input.btn-extra-large {
- font-size: 24px;
- font-size: 1.5rem;
- line-height: 1;
- padding: 1em 2em;
-}
-
-.btn.dropdown {
- width: 100%;
-}
-.btn.dropdown .dropdown-menu {
- margin-top: auto;
- text-align: left;
- top: 100%;
- width: 100%;
-}
-.btn.dropdown[class*='dropdown-arrow-'] .dropdown-menu {
- margin-top: 10px;
-}
-.btn.dropdown.up .dropdown-menu {
- margin-bottom: 0px;
- top: auto;
-}
-.btn.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu {
- margin-bottom: 10px;
-}
-
-@media (min-width: 48em) {
- .btn-extra-small .caret,
- .btn-small .caret {
- border-top: 4px solid;
- border-right: 4px solid transparent;
- border-left: 4px solid transparent;
- }
-
- .btn.dropdown {
- width: auto;
- }
- .btn.dropdown.extra-small .dropdown-menu {
- margin-top: 6px;
- }
- .btn.dropdown.dropdown-small .dropdown-menu {
- margin-top: 11px;
- }
- .btn.dropdown.dropdown-large .dropdown-menu {
- margin-top: 21px;
- }
-}
-.dropdown {
- cursor: pointer;
- outline: none;
- position: relative;
- width: auto;
-}
-.dropdown .dropdown-menu {
- background-color: #ffffff;
- border: 1px solid #ededed;
- border-radius: inherit;
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- filter: alpha(opacity=0);
- font-weight: inherit;
- left: 0;
- margin-left: 0px;
- opacity: 0;
- pointer-events: none;
- position: absolute;
- right: 0;
- text-transform: none;
- transition: all 0.3s ease-in;
- z-index: 99999;
-}
-.dropdown .dropdown-menu a {
- text-decoration: none;
-}
-.dropdown .dropdown-menu p {
- margin: 0;
- padding: 10px 15px;
-}
-.dropdown .dropdown-menu span {
- line-height: inherit;
-}
-.dropdown .dropdown-menu img {
- padding: 15px;
- width: 100%;
-}
-.dropdown .dropdown-menu iframe {
- height: auto;
- padding: 15px;
- width: 100%;
-}
-.dropdown .dropdown-menu img + p,
-.dropdown .dropdown-menu iframe + p {
- padding-top: 0px;
-}
-.dropdown .dropdown-menu hr {
- margin: 10px;
-}
-.dropdown .dropdown-menu li {
- display: block;
- padding: 5px 10px;
- transition: all 0.3s ease-out;
-}
-.dropdown .dropdown-menu li:hover {
- background-color: #f3f8f8;
-}
-.dropdown .dropdown-menu > .dropdown-header {
- margin: 0;
-}
-.dropdown ul.dropdown-menu {
- list-style-type: none;
-}
-.dropdown.dropdown-active .dropdown-menu {
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
- filter: alpha(opacity=100);
- opacity: 1;
- pointer-events: auto;
-}
-.dropdown .dropdown-header {
- color: #aaaaaa;
- cursor: default;
- font-size: 14px;
- font-size: 0.875rem;
- line-height: 1.71429;
- margin: 12px 0 0;
- padding: 0 0 0 9px;
-}
-.dropdown.dropdown-collapse-full .dropdown-menu {
- width: 100%;
-}
-@media (min-width: 48em) {
- .dropdown .dropdown-menu {
- width: 200px;
- }
- .dropdown.dropdown-small .dropdown-menu {
- width: 150px;
- }
- .dropdown.dropdown-large .dropdown-menu {
- width: 350px;
- }
- .dropdown.dropdown-full .dropdown-menu {
- width: 100%;
- }
- .dropdown.dropdown-collapse-full .dropdown-menu {
- width: 200px;
- }
-}
-.dropdown .dropdown-header:hover,
-.dropdown li.dropdown-header:hover {
- background: none;
-}
-.dropdown[class*='dropdown-arrow-'] .dropdown-menu {
- margin-top: 10px;
-}
-.dropdown[class*='dropdown-arrow-'] .dropdown-menu:before, .dropdown[class*='dropdown-arrow-'] .dropdown-menu:after {
- border-color: #ffffff transparent;
- border-style: solid;
- bottom: 100%;
- border-width: 0 6px 6px 6px;
- content: "";
- height: 0;
- position: absolute;
- width: 0;
-}
-.dropdown[class*='dropdown-arrow-'] .dropdown-menu:before {
- border: 8px rgba(0, 0, 0, 0.1);
- border-right-color: transparent;
- border-left-color: transparent;
- border-top-width: 0;
-}
-.dropdown.dropdown-arrow-left .dropdown-menu:after {
- left: 15px;
-}
-.dropdown.dropdown-arrow-left .dropdown-menu:before {
- left: 13px;
-}
-.dropdown.dropdown-arrow-right .dropdown-menu:after {
- right: 15px;
-}
-.dropdown.dropdown-arrow-right .dropdown-menu:before {
- right: 13px;
-}
-.dropdown.up .dropdown-menu {
- bottom: 100%;
-}
-.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu {
- margin-bottom: 10px;
-}
-.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:after, .dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:before {
- top: 100%;
-}
-.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:after {
- border-width: 6px 6px 0 6px;
-}
-.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:before {
- border-width: 8px 8px 0 8px;
-}
-
-.nav-responsive.nav-responsive-text.naver .naver-container:before, .nav-responsive-left.nav-responsive-text.naver .naver-container:after, .nav-responsive-center.nav-responsive-text.naver .naver-container:after {
- clear: both;
- content: ".";
- display: block;
- height: 0;
- line-height: 0;
- text-align: center;
- visibility: hidden;
-}
-
-nav ul,
-nav ol {
- list-style: none;
- margin: 0;
-}
-nav li {
- cursor: pointer;
- position: relative;
-}
-.dropdown nav li {
- margin-right: 0px;
-}
-
-.naver .naver-handle {
- color: inherit;
- cursor: pointer;
- display: none;
- font-size: 24px;
- font-size: 1.5rem;
- line-height: 1;
- text-align: right;
- text-transform: uppercase;
- user-select: none;
-}
-.naver .naver-wrapper {
- height: auto;
- width: 100%;
-}
-.naver.enabled .naver-handle {
- display: block;
-}
-.naver.enabled .naver-wrapper {
- height: 0px;
- overflow: hidden;
-}
-.naver.enabled .naver-wrapper li {
- display: block;
- padding: 8px;
- text-align: left;
- width: 100%;
-}
-.naver.enabled .naver-wrapper li:hover {
- background: #f9f9f9;
-}
-
-.nav-responsive.naver .naver-handle:after {
- content: "\2261";
- text-align: right;
-}
-.nav-responsive.nav-responsive-text.naver .naver-handle:after {
- content: "\00a0 \2261";
-}
-
-.nav-responsive-left.naver .naver-handle {
- text-align: left;
-}
-.nav-responsive-left.naver .naver-handle:before {
- content: "\2261";
- text-align: left;
-}
-.nav-responsive-left.nav-responsive-text.naver .naver-handle:before {
- content: "\2261 \00a0";
-}
-
-.nav-responsive-center.naver .naver-handle {
- text-align: center;
-}
-.nav-responsive-center.naver .naver-handle:before {
- content: "\2261";
- text-align: center;
-}
-.nav-responsive-center.nav-responsive-text.naver .naver-handle:before {
- content: "\2261 \00a0";
-}
-
-.float-left {
- float: left;
-}
-
-.float-right {
- float: right;
-}
-
-.float-none {
- float: none;
-}
-
-.align-center {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-.no-margin {
- margin: 0;
-}
-
-.inline {
- display: inline;
-}
-
-.show {
- display: block;
- visibility: visible;
-}
-
-.hide {
- display: none;
- visibility: hidden;
-}
-
-.screen-reader,
-.text-hide {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
-}
-
-.full-width {
- width: 100%;
-}
-
-img.full-width {
- max-width: 100%;
- height: auto;
- display: block;
- width: auto;
-}
-
-.text-left {
- text-align: left;
-}
-
-.text-right {
- text-align: right;
-}
-
-.text-center {
- text-align: center;
-}
-
-.text-justify {
- text-align: justify;
-}
-
-.weight-light {
- font-weight: 300;
-}
-
-.weight-normal {
- font-weight: 400;
-}
-
-.weight-semibold {
- font-weight: 600;
-}
-
-.text-uppercase {
- text-transform: uppercase;
-}
-
-.amp {
- font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
-}
-
-.caret {
- border-top: 5px solid;
- border-right: 5px solid transparent;
- border-left: 5px solid transparent;
- display: inline-block;
- margin: 0 0 3px 4px;
- vertical-align: middle;
- width: 0;
-}
-
-.fluid {
- max-width: 100%;
- height: auto;
-}
-
-.show-extra-small,
-.hide-small,
-.hide-medium,
-.hide-large,
-.hide-extra-large,
-.hide-print,
-.hide-hd {
- display: block;
- visibility: visible;
-}
-
-.hide-extra-small,
-.show-small,
-.show-medium,
-.show-large,
-.show-extra-large,
-.show-print,
-.show-hd {
- display: none;
- visibility: hidden;
-}
-
-@media (min-width: 48em) {
- .show-small,
- .hide-extra-small,
- .hide-medium,
- .hide-large,
- .hide-extra-large {
- display: block;
- visibility: visible;
- }
-
- .hide-small,
- .show-extra-small,
- .show-medium,
- .show-large,
- .show-extra-large {
- display: none;
- visibility: hidden;
- }
-}
-@media (min-width: 60em) {
- .show-medium,
- .hide-small,
- .hide-extra-small,
- .hide-large,
- .hide-extra-large {
- display: block;
- visibility: visible;
- }
-
- .hide-medium,
- .show-small,
- .show-extra-small,
- .show-large,
- .show-extra-large {
- display: none;
- visibility: hidden;
- }
-}
-@media (min-width: 70em) {
- .show-large,
- .hide-extra-small,
- .hide-small,
- .hide-medium,
- .hide-extra-large {
- display: block;
- visibility: visible;
- }
-
- .hide-large,
- .show-extra-small,
- .show-small,
- .show-medium,
- .show-extra-large {
- display: none;
- visibility: hidden;
- }
-}
-@media (min-width: 80em) {
- .show-extra-large,
- .hide-extra-small,
- .hide-small,
- .hide-medium,
- .hide-large {
- display: block;
- visibility: visible;
- }
-
- .hide-extra-large,
- .show-extra-small,
- .show-small,
- .show-medium,
- .show-large {
- display: none;
- visibility: hidden;
- }
-}
-@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
- .show-hd {
- display: block;
- visibility: visible;
- }
-
- .hide-hd {
- display: none;
- visibility: hidden;
- }
-}
-@media print {
- @page {
- margin: 0.5cm;
- }
- *,
- *:before,
- *:after {
- background: transparent !important;
- color: black !important;
- filter: none !important;
- text-shadow: none !important;
- }
-
- body {
- background-color: #fff;
- color: #000;
- font: 0.57em/1.3 Georgia, "Times New Roman", Times, serif;
- }
-
- img {
- max-width: 100% !important;
- }
-
- .show-print {
- display: block;
- visibility: visible;
- }
-
- .hide-print,
- video,
- audio,
- object,
- embed,
- nav,
- footer,
- a[href^="#"]:after {
- display: none;
- visibility: hidden;
- }
-
- p,
- h2,
- h3 {
- orphans: 3;
- widows: 3;
- }
-
- h2,
- h3 {
- page-break-after: avoid;
- }
-
- a,
- a:visited {
- color: #000;
- text-decoration: underline;
- word-wrap: break-word;
- }
- a[href]:after,
- a:visited[href]:after {
- content: " (" attr(href) ")";
- font-size: smaller;
- }
-
- q:after {
- content: " (Source: " attr(cite) ")";
- }
-
- abbr[title]:after {
- content: " (" attr(title) ")";
- }
-
- a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
- content: "";
- }
-
- pre,
- blockquote {
- border: 1px solid #ededed;
- page-break-inside: avoid;
- }
-
- thead {
- display: table-header-group;
- }
-
- tr,
- img {
- page-break-inside: avoid;
- }
-
- ul {
- list-style: none;
- }
- ul li {
- content: "» ";
- }
-}
diff --git a/dist/css/concise.min.css b/dist/css/concise.min.css
deleted file mode 100644
index 37dd5c9..0000000
--- a/dist/css/concise.min.css
+++ /dev/null
@@ -1 +0,0 @@
-html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{border:solid #eee;border-width:1px 0 0;box-sizing:content-box;clear:both;height:0}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}code,kbd,pre,samp{font-family:monospace, monospace;font-size:16px;font-size:1rem;line-height:1.5}q{quotes:none}q:before,q:after{content:'';content:none}form{margin:0}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;vertical-align:baseline}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{margin:0 2px}legend{border:0;padding:0;white-space:normal}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.clearfix:after{content:"";display:table;clear:both}*,*:before,*:after{box-sizing:border-box}html,body{background-color:#fff;color:#333;font:normal normal 1em/1.5 "Droid Sans",Helvetica,Arial,sans-serif;margin:0;font-smooth:always;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased}html[dir="rtl"]{direction:rtl}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.giga,.mega,.kilo,hgroup,ul,ol,dl,blockquote,p,address,table,fieldset,figure,pre,.row,.form-item{margin-bottom:24px;margin-bottom:1.5rem}hr{margin-bottom:22px;margin-bottom:1.375rem}ul,ol,dd{margin-left:48px;margin-left:3rem}*::-webkit-selection{background-color:#666;color:#fff}*::-moz-selection{background-color:#666;color:#fff}*::selection{background-color:#666;color:#fff}a{color:#62b3e7}a:hover,a:visited{color:#8ec8ee;cursor:pointer}p a,p a:visited{line-height:inherit}small,.small{font-size:12px;font-size:0.75rem;line-height:2}.micro{font-size:10px;font-size:0.625rem;line-height:2.4}address{font-style:normal}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #999}acronym{cursor:help;border-bottom:1px dashed #62b3e7}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.giga,.mega,.kilo{color:#181818;font-family:"Droid Sans",Helvetica,Arial,sans-serif;font-weight:normal;text-rendering:optimizeLegibility}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,.h6 a,.giga a,.mega a,.kilo a{font-weight:inherit}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,.giga small,.mega small,.kilo small{color:gray;font-size:60%;line-height:1}h1,.h1{font-size:24px;font-size:1.5rem;line-height:1}@media (min-width: 48em){h1,.h1{font-size:32px;font-size:2rem;line-height:1.5}}@media (min-width: 60em){h1,.h1{font-size:36px;font-size:2.25rem;line-height:1.33333}}h2,.h2{font-size:20px;font-size:1.25rem;line-height:1.2}@media (min-width: 48em){h2,.h2{font-size:24px;font-size:1.5rem;line-height:1}}@media (min-width: 60em){h2,.h2{font-size:30px;font-size:1.875rem;line-height:1.6}}h3,.h3{font-size:18px;font-size:1.125rem;line-height:1.33333}@media (min-width: 48em){h3,.h3{font-size:20px;font-size:1.25rem;line-height:1.2}}@media (min-width: 60em){h3,.h3{font-size:24px;font-size:1.5rem;line-height:1}}h4,.h4{font-size:16px;font-size:1rem;line-height:1.5}@media (min-width: 48em){h4,.h4{font-size:18px;font-size:1.125rem;line-height:1.33333}}@media (min-width: 60em){h4,.h4{font-size:20px;font-size:1.25rem;line-height:1.2}}h5,.h5{font-size:14px;font-size:0.875rem;line-height:1.71429}@media (min-width: 48em){h5,.h5{font-size:16px;font-size:1rem;line-height:1.5}}@media (min-width: 60em){h5,.h5{font-size:18px;font-size:1.125rem;line-height:1.33333}}h6,.h6{font-size:12px;font-size:0.75rem;line-height:2}@media (min-width: 48em){h6,.h6{font-size:14px;font-size:0.875rem;line-height:1.71429}}@media (min-width: 60em){h6,.h6{font-size:16px;font-size:1rem;line-height:1.5}}.giga{font-size:48px;font-size:3rem;line-height:1}@media (min-width: 48em){.giga{font-size:64px;font-size:4rem;line-height:1.125}}@media (min-width: 70em){.giga{font-size:80px;font-size:5rem;line-height:1.2}}@media (min-width: 80em){.giga{font-size:96px;font-size:6rem;line-height:1}}.mega{font-size:40px;font-size:2.5rem;line-height:1.2}@media (min-width: 48em){.mega{font-size:48px;font-size:3rem;line-height:1}}@media (min-width: 70em){.mega{font-size:64px;font-size:4rem;line-height:1.125}}@media (min-width: 80em){.mega{font-size:72px;font-size:4.5rem;line-height:1}}.kilo{font-size:32px;font-size:2rem;line-height:1.5}@media (min-width: 48em){.kilo{font-size:32px;font-size:2rem;line-height:1.5}}@media (min-width: 70em){.kilo{font-size:48px;font-size:3rem;line-height:1}}@media (min-width: 80em){.kilo{font-size:64px;font-size:4rem;line-height:1.125}}.container{margin:0 auto;width:90%}@media (min-width: 48em){.container{width:620px}}@media (min-width: 60em){.container{width:768px}}@media (min-width: 70em){.container{width:960px}}@media (min-width: 80em){.container{width:1140px}}.row{width:100%}.row:after{clear:both;content:" ";display:table}[class*='column-']{background-clip:padding-box !important}[class*='column-'].right{float:right}[class*='column-'] img{max-width:100%}@media (min-width: 48em){[class*='column-']{float:left}.gutters [class*='column-']{margin-left:2%}.gutters [class*='column-']:first-child{margin-left:0}.gutters-off [class*='column-']{margin-left:0}.column-1,.gutters .gutters-off .column-1{width:6.25%}.gutters .column-1{width:4.375%}.column-2,.gutters .gutters-off .column-2{width:12.5%}.gutters .column-2{width:10.75%}.column-3,.gutters .gutters-off .column-3{width:18.75%}.gutters .column-3{width:17.125%}.column-4,.gutters .gutters-off .column-4{width:25%}.gutters .column-4{width:23.5%}.column-5,.gutters .gutters-off .column-5{width:31.25%}.gutters .column-5{width:29.875%}.column-6,.gutters .gutters-off .column-6{width:37.5%}.gutters .column-6{width:36.25%}.column-7,.gutters .gutters-off .column-7{width:43.75%}.gutters .column-7{width:42.625%}.column-8,.gutters .gutters-off .column-8{width:50%}.gutters .column-8{width:49%}.column-9,.gutters .gutters-off .column-9{width:56.25%}.gutters .column-9{width:55.375%}.column-10,.gutters .gutters-off .column-10{width:62.5%}.gutters .column-10{width:61.75%}.column-11,.gutters .gutters-off .column-11{width:68.75%}.gutters .column-11{width:68.125%}.column-12,.gutters .gutters-off .column-12{width:75%}.gutters .column-12{width:74.5%}.column-13,.gutters .gutters-off .column-13{width:81.25%}.gutters .column-13{width:80.875%}.column-14,.gutters .gutters-off .column-14{width:87.5%}.gutters .column-14{width:87.25%}.column-15,.gutters .gutters-off .column-15{width:93.75%}.gutters .column-15{width:93.625%}.column-16,.gutters .gutters-off .column-16{width:100%}.gutters .column-16{width:100%}[class*='push-']{position:relative}.push-1{left:6.25%}.gutters .push-1{left:4.25%}.push-2{left:12.5%}.gutters .push-2{left:10.5%}.push-3{left:18.75%}.gutters .push-3{left:16.75%}.push-4{left:25%}.gutters .push-4{left:23%}.push-5{left:31.25%}.gutters .push-5{left:29.25%}.push-6{left:37.5%}.gutters .push-6{left:35.5%}.push-7{left:43.75%}.gutters .push-7{left:41.75%}.push-8{left:50%}.gutters .push-8{left:48%}.push-9{left:56.25%}.gutters .push-9{left:54.25%}.push-10{left:62.5%}.gutters .push-10{left:60.5%}.push-11{left:68.75%}.gutters .push-11{left:66.75%}.push-12{left:75%}.gutters .push-12{left:73%}.push-13{left:81.25%}.gutters .push-13{left:79.25%}.push-14{left:87.5%}.gutters .push-14{left:85.5%}.push-15{left:93.75%}.gutters .push-15{left:91.75%}[class*='pull-']{position:relative}.pull-1{right:6.25%}.gutters .pull-1{right:4.25%}.pull-2{right:12.5%}.gutters .pull-2{right:10.5%}.pull-3{right:18.75%}.gutters .pull-3{right:16.75%}.pull-4{right:25%}.gutters .pull-4{right:23%}.pull-5{right:31.25%}.gutters .pull-5{right:29.25%}.pull-6{right:37.5%}.gutters .pull-6{right:35.5%}.pull-7{right:43.75%}.gutters .pull-7{right:41.75%}.pull-8{right:50%}.gutters .pull-8{right:48%}.pull-9{right:56.25%}.gutters .pull-9{right:54.25%}.pull-10{right:62.5%}.gutters .pull-10{right:60.5%}.pull-11{right:68.75%}.gutters .pull-11{right:66.75%}.pull-12{right:75%}.gutters .pull-12{right:73%}.pull-13{right:81.25%}.gutters .pull-13{right:79.25%}.pull-14{right:87.5%}.gutters .pull-14{right:85.5%}.pull-15{right:93.75%}.gutters .pull-15{right:91.75%}}.non-responsive [class*='column-']{float:left;width:auto !important}.non-responsive .gutters [class*='column-'],.non-responsive.gutters [class*='column-']{margin-left:2%}.non-responsive .gutters [class*='column-']:first-child,.non-responsive.gutters [class*='column-']:first-child{margin-left:0}ul,ol{margin-left:20px;padding-left:0px}ul li,ol li{line-height:1.75em}ul ul,ol ul{list-style-type:circle;margin-bottom:auto}ul ul ul,ol ul ul{list-style-type:square}ul ul ol,ol ul ol{list-style-type:lower-roman}@media (min-width: 48em){ul ul,ol ul{margin-left:20px}}ul ol,ol ol{list-style-type:lower-latin;margin-bottom:auto}ul ol ol,ol ol ol{list-style-type:lower-roman}ul ol ul,ol ol ul{list-style-type:square}.list-unstyled{margin-left:0px;list-style:none}.list-unstyled ul{list-style:none}.list-unstyled ul ul{list-style:none}.list-inline{margin-left:0px}.list-inline li{border-bottom:none;display:inline;margin-right:15px}.list-inline li:last-child{margin-right:0px}@media (min-width: 48em){.list-inline li{margin-right:15px}.list-inline li:last-child{margin-right:0px}}@media (min-width: 60em){.list-inline li{margin-right:30px}.list-inline li:last-child{margin-right:0px}}dt{font-weight:bold}dd{margin-left:0px}input[type="checkbox"],input[type="file"],input[type="image"],input[type="radio"]{background:auto;border:auto;height:auto;width:auto}input[disabled],select[disabled],textarea[disabled]{background-color:#f6f6f6;cursor:not-allowed}label{display:block}textarea{height:auto}.form input,.form select,.form textarea{border:1px solid #ccc;box-sizing:border-box;height:37px;padding:5px;width:100%}@media (min-width: 30em){.form input,.form select,.form textarea{width:300px}}.form textarea{height:auto}@media (min-width: 30em){.form input[type="submit"]{display:block;width:auto}}.form input:focus,.form select:focus,.form textarea:focus,.form button:focus,.form [contenteditable="true"]:focus{outline:1px solid #a6a6a6}.form fieldset{border:1px solid #ccc;padding:10px 25px}.form fieldset legend{font-weight:bold;font-size:13px;font-size:0.8125rem;line-height:1.84615;padding:0 10px}.form-item{display:block}.form-inline label{width:auto}@media (min-width: 48em){.form-inline label{display:inline-block;width:100px}.form-inline textarea{width:auto}}::-webkit-input-placeholder{color:#bbb}:-ms-input-placeholder{color:#bbb}::-moz-placeholder{color:#bbb}:-moz-placeholder{color:#bbb}table.table{empty-cells:show;width:100%}table.table caption{color:#000;font:italic 85%/1 arial, sans-serif;padding:1em 0;text-align:center}table.table thead{border-bottom:2px solid #ccc}table.table th,table.table td{padding:12px 15px}table.table td{border-top:1px solid #ccc}@media (min-width: 30em){table.table{width:auto}table.table th,table.table td{padding:10px 50px 10px 25px}}table.table-full,table.table.table-full{width:100%}.table-responsive{overflow:auto;width:100%}.table-responsive table{margin-bottom:0}.table-responsive::-webkit-scrollbar{height:14px;width:14px;-webkit-appearance:none}.table-responsive::-webkit-scrollbar-thumb{background-color:rgba(50,50,50,0.2);border:3px solid #fff;border-radius:8px}.bg-white{background-color:#fff}.bg-black{background-color:#222}.bg-light-black{background-color:#757575}.bg-gray{background-color:#999}.bg-light-gray{background-color:#ececec}.bg-green{background-color:#5cb85c}.bg-light-green{background-color:#cfeacf}.bg-blue{background-color:#5bc0de}.bg-light-blue{background-color:#e5f5fa}.bg-yellow{background-color:#ed9c28}.bg-light-yellow{background-color:#fae2c1}.bg-red{background-color:#d9534f}.bg-light-red{background-color:#f6d8d7}.color-white{color:#fff}.color-black{color:#222}.color-gray{color:#999}.color-green{color:#468847}.color-blue{color:#3a87ad}.color-yellow{color:#c09853}.color-red{color:#d2322d}.btn{background-color:#ccc;border:0;color:#fff;cursor:pointer;display:inline-block;font-family:inherit;font-size:100%;line-height:1;padding:0.5em 1em;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}.btn::-moz-focus-inner{padding:0;border:0}.btn:hover{background-color:#b3b3b3}.btn:active{background-color:#bfbfbf}.btn[disabled],.btn[disabled]:hover,.btn[disabled]:active,.btn[disabled]:focus{background:#dededc !important;border:none;color:#b3b3b1;cursor:not-allowed}.btn a.btn,.btn a.btn:hover{color:#fff;text-decoration:none}.btn a.btn:active{outline:0}.btn input[type="submit"].btn{color:#fff;height:auto;padding:0.5em 1em}.btn button.btn{color:#fff}.btn.bg-white{background-color:#fff}.btn.bg-white:hover{background-color:#e6e6e6}.btn.bg-white:active{background-color:#f2f2f2}.btn.bg-black{background-color:#222}.btn.bg-black:hover{background-color:#090909}.btn.bg-black:active{background-color:#151515}.btn.bg-light-black{background-color:#757575}.btn.bg-gray{background-color:#999}.btn.bg-gray:hover{background-color:gray}.btn.bg-gray:active{background-color:#8c8c8c}.btn.bg-light-gray{background-color:#ececec}.btn.bg-green{background-color:#5cb85c}.btn.bg-green:hover{background-color:#449d44}.btn.bg-green:active{background-color:#4cae4c}.btn.bg-light-green{background-color:#cfeacf}.btn.bg-blue{background-color:#5bc0de}.btn.bg-blue:hover{background-color:#31b0d5}.btn.bg-blue:active{background-color:#46b8da}.btn.bg-light-blue{background-color:#e5f5fa}.btn.bg-yellow{background-color:#ed9c28}.btn.bg-yellow:hover{background-color:#d18211}.btn.bg-yellow:active{background-color:#e89113}.btn.bg-light-yellow{background-color:#fae2c1}.btn.bg-red{background-color:#d9534f}.btn.bg-red:hover{background-color:#c9302c}.btn.bg-red:active{background-color:#d43f3a}.btn.bg-light-red{background-color:#f6d8d7}.btn-collapse-full{display:block;margin:12px 0;width:100%}@media (min-width: 30em){.btn-collapse-full{display:inline-block;margin:0;width:auto}}.btn-extra-small,a.btn-extra-small,p.btn-extra-small,input.btn-extra-small{font-size:10px;font-size:0.625rem;line-height:2.4;padding:0.25em 0.75em}.btn-small,a.btn-small,p.btn-small,input.btn-small{font-size:12px;font-size:0.75rem;line-height:2}.btn-large,a.btn-large,p.btn-large,input.btn-large{font-size:18px;font-size:1.125rem;line-height:1.33333;padding:1em 2em}.btn-extra-large,a.btn-extra-large,p.btn-extra-large,input.btn-extra-large{font-size:24px;font-size:1.5rem;line-height:1;padding:1em 2em}.btn.dropdown{width:100%}.btn.dropdown .dropdown-menu{margin-top:auto;text-align:left;top:100%;width:100%}.btn.dropdown[class*='dropdown-arrow-'] .dropdown-menu{margin-top:10px}.btn.dropdown.up .dropdown-menu{margin-bottom:0px;top:auto}.btn.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu{margin-bottom:10px}@media (min-width: 48em){.btn-extra-small .caret,.btn-small .caret{border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}.btn.dropdown{width:auto}.btn.dropdown.extra-small .dropdown-menu{margin-top:6px}.btn.dropdown.dropdown-small .dropdown-menu{margin-top:11px}.btn.dropdown.dropdown-large .dropdown-menu{margin-top:21px}}.dropdown{cursor:pointer;outline:none;position:relative;width:auto}.dropdown .dropdown-menu{background-color:#fff;border:1px solid #ededed;border-radius:inherit;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);font-weight:inherit;left:0;margin-left:0px;opacity:0;pointer-events:none;position:absolute;right:0;text-transform:none;transition:all 0.3s ease-in;z-index:99999}.dropdown .dropdown-menu a{text-decoration:none}.dropdown .dropdown-menu p{margin:0;padding:10px 15px}.dropdown .dropdown-menu span{line-height:inherit}.dropdown .dropdown-menu img{padding:15px;width:100%}.dropdown .dropdown-menu iframe{height:auto;padding:15px;width:100%}.dropdown .dropdown-menu img+p,.dropdown .dropdown-menu iframe+p{padding-top:0px}.dropdown .dropdown-menu hr{margin:10px}.dropdown .dropdown-menu li{display:block;padding:5px 10px;transition:all 0.3s ease-out}.dropdown .dropdown-menu li:hover{background-color:#f3f8f8}.dropdown .dropdown-menu>.dropdown-header{margin:0}.dropdown ul.dropdown-menu{list-style-type:none}.dropdown.dropdown-active .dropdown-menu{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;pointer-events:auto}.dropdown .dropdown-header{color:#aaa;cursor:default;font-size:14px;font-size:0.875rem;line-height:1.71429;margin:12px 0 0;padding:0 0 0 9px}.dropdown.dropdown-collapse-full .dropdown-menu{width:100%}@media (min-width: 48em){.dropdown .dropdown-menu{width:200px}.dropdown.dropdown-small .dropdown-menu{width:150px}.dropdown.dropdown-large .dropdown-menu{width:350px}.dropdown.dropdown-full .dropdown-menu{width:100%}.dropdown.dropdown-collapse-full .dropdown-menu{width:200px}}.dropdown .dropdown-header:hover,.dropdown li.dropdown-header:hover{background:none}.dropdown[class*='dropdown-arrow-'] .dropdown-menu{margin-top:10px}.dropdown[class*='dropdown-arrow-'] .dropdown-menu:before,.dropdown[class*='dropdown-arrow-'] .dropdown-menu:after{border-color:#fff transparent;border-style:solid;bottom:100%;border-width:0 6px 6px 6px;content:"";height:0;position:absolute;width:0}.dropdown[class*='dropdown-arrow-'] .dropdown-menu:before{border:8px rgba(0,0,0,0.1);border-right-color:transparent;border-left-color:transparent;border-top-width:0}.dropdown.dropdown-arrow-left .dropdown-menu:after{left:15px}.dropdown.dropdown-arrow-left .dropdown-menu:before{left:13px}.dropdown.dropdown-arrow-right .dropdown-menu:after{right:15px}.dropdown.dropdown-arrow-right .dropdown-menu:before{right:13px}.dropdown.up .dropdown-menu{bottom:100%}.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu{margin-bottom:10px}.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:after,.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:before{top:100%}.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:after{border-width:6px 6px 0 6px}.dropdown.up[class*='dropdown-arrow-'] .dropdown-menu:before{border-width:8px 8px 0 8px}.nav-responsive.nav-responsive-text.naver .naver-container:before,.nav-responsive-left.nav-responsive-text.naver .naver-container:after,.nav-responsive-center.nav-responsive-text.naver .naver-container:after{clear:both;content:".";display:block;height:0;line-height:0;text-align:center;visibility:hidden}nav ul,nav ol{list-style:none;margin:0}nav li{cursor:pointer;position:relative}.dropdown nav li{margin-right:0px}.naver .naver-handle{color:inherit;cursor:pointer;display:none;font-size:24px;font-size:1.5rem;line-height:1;text-align:right;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.naver .naver-wrapper{height:auto;width:100%}.naver.enabled .naver-handle{display:block}.naver.enabled .naver-wrapper{height:0px;overflow:hidden}.naver.enabled .naver-wrapper li{display:block;padding:8px;text-align:left;width:100%}.naver.enabled .naver-wrapper li:hover{background:#f9f9f9}.nav-responsive.naver .naver-handle:after{content:"\2261";text-align:right}.nav-responsive.nav-responsive-text.naver .naver-handle:after{content:"\00a0 \2261"}.nav-responsive-left.naver .naver-handle{text-align:left}.nav-responsive-left.naver .naver-handle:before{content:"\2261";text-align:left}.nav-responsive-left.nav-responsive-text.naver .naver-handle:before{content:"\2261 \00a0"}.nav-responsive-center.naver .naver-handle{text-align:center}.nav-responsive-center.naver .naver-handle:before{content:"\2261";text-align:center}.nav-responsive-center.nav-responsive-text.naver .naver-handle:before{content:"\2261 \00a0"}.float-left{float:left}.float-right{float:right}.float-none{float:none}.align-center{display:block;margin-left:auto;margin-right:auto}.no-margin{margin:0}.inline{display:inline}.show{display:block;visibility:visible}.hide{display:none;visibility:hidden}.screen-reader,.text-hide{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.full-width{width:100%}img.full-width{max-width:100%;height:auto;display:block;width:auto}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.weight-light{font-weight:300}.weight-normal{font-weight:400}.weight-semibold{font-weight:600}.text-uppercase{text-transform:uppercase}.amp{font:italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif}.caret{border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent;display:inline-block;margin:0 0 3px 4px;vertical-align:middle;width:0}.fluid{max-width:100%;height:auto}.show-extra-small,.hide-small,.hide-medium,.hide-large,.hide-extra-large,.hide-print,.hide-hd{display:block;visibility:visible}.hide-extra-small,.show-small,.show-medium,.show-large,.show-extra-large,.show-print,.show-hd{display:none;visibility:hidden}@media (min-width: 48em){.show-small,.hide-extra-small,.hide-medium,.hide-large,.hide-extra-large{display:block;visibility:visible}.hide-small,.show-extra-small,.show-medium,.show-large,.show-extra-large{display:none;visibility:hidden}}@media (min-width: 60em){.show-medium,.hide-small,.hide-extra-small,.hide-large,.hide-extra-large{display:block;visibility:visible}.hide-medium,.show-small,.show-extra-small,.show-large,.show-extra-large{display:none;visibility:hidden}}@media (min-width: 70em){.show-large,.hide-extra-small,.hide-small,.hide-medium,.hide-extra-large{display:block;visibility:visible}.hide-large,.show-extra-small,.show-small,.show-medium,.show-extra-large{display:none;visibility:hidden}}@media (min-width: 80em){.show-extra-large,.hide-extra-small,.hide-small,.hide-medium,.hide-large{display:block;visibility:visible}.hide-extra-large,.show-extra-small,.show-small,.show-medium,.show-large{display:none;visibility:hidden}}@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){.show-hd{display:block;visibility:visible}.hide-hd{display:none;visibility:hidden}}@media print{@page{margin:0.5cm}*,*:before,*:after{background:transparent !important;color:black !important;-webkit-filter:none !important;filter:none !important;text-shadow:none !important}body{background-color:#fff;color:#000;font:0.57em/1.3 Georgia,"Times New Roman",Times,serif}img{max-width:100% !important}.show-print{display:block;visibility:visible}.hide-print,video,audio,object,embed,nav,footer,a[href^="#"]:after{display:none;visibility:hidden}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}a,a:visited{color:#000;text-decoration:underline;word-wrap:break-word}a[href]:after,a:visited[href]:after{content:" (" attr(href) ")";font-size:smaller}q:after{content:" (Source: " attr(cite) ")"}abbr[title]:after{content:" (" attr(title) ")"}a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #ededed;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}ul{list-style:none}ul li{content:"» "}}
diff --git a/dist/js/concise.js b/dist/js/concise.js
deleted file mode 100644
index 6976839..0000000
--- a/dist/js/concise.js
+++ /dev/null
@@ -1,483 +0,0 @@
-/**
- * # Concise.js
- * http://github.com/ConciseCSS/concise.css
- *
- *
- * Copyright 2014 Contributors
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-(function($){
- /**
- * Powers the universal dropdown selector.
- *
- * @class DropDown
- * @param {Object} el jQuery object
- */
- function DropDown(el) {
- this.dd = el;
- this.initEvents();
- }
-
- DropDown.prototype = {
- initEvents : function() {
- // Toggle .dropdown-active on click
- this.dd.on('click', function(event){
- $(this).toggleClass('dropdown-active');
- event.stopPropagation();
- });
-
- // Toggle .dropdown-active on hover
- $(".dropdown-hover").mouseenter(function(event) {
- $(this).addClass("dropdown-active");
- event.stopPropagation();
- });
- }
- }
-
-
- /**
- * Determine if responsive navigation text needs to be added.
- *
- * @method responsiveNav
- * @return {Object} naver A naver plugin instantiation
- */
- $.fn.responsiveNav = function() {
- // Loop through each instance of responsive navigation
- this.each(function(index) {
- var labelState = $(this).hasClass( "nav-responsive-text" );
-
- return $(this).naver({
- maxWidth: "768px",
- label: labelState
- });
- });
- };
-
-
- /**
- * Calculate object width
- */
- $.fn.calculateWidth = function() {
- return $(this).width();
- };
-
-
- /**
- * Calculates proper widths for non-responsive websites.
- *
- * @method nonResponsive
- * @note Only necessary for non-responsive websites.
- */
- $.fn.nonResponsive = function() {
-
- // Loop through each instance of the `.non-responsive` class
- this.each(function(index) {
- if ($(this).hasClass("non-responsive")) {
-
- // Get container width
- var containerWidth = $(".container").width(),
- i = 1,
- max = 24;
-
- // Set pixel-based alternatives for grid styles
- // But first we need to know if our row has class `gutters`
- if($(this).hasClass("gutters")) {
- for (; i <= max; i++ ) {
- // Column width for row with gutters
- var columnWidth = ($('.column-'+i).calculateWidth()),
- gutterWidth = columnWidth * 0.02;
-
- $('.gutters .column-'+i).css("width", columnWidth - gutterWidth + "px");
- }
- } else {
- for (; i <= max ; i++ ) {
- // Column width for normal row
- var columnWidth = ($('.column-'+i).calculateWidth() - 1);
- $('.column-'+i).css("width", columnWidth + "px");
- }
- }
- }
- });
- };
-
- $(function(){
- var dropdown = $('.dropdown');
-
- new DropDown(dropdown);
-
- $(document).click(function() {
- dropdown.removeClass('dropdown-active');
- });
-
- $(".dropdown-menu").mouseleave(function() {
- dropdown.removeClass("dropdown-active");
- });
- });
-}(jQuery));
-
-jQuery(document).ready(function() {
- jQuery(".nav-responsive, .nav-responsive-left, .nav-responsive-center").responsiveNav();
- jQuery("body, .row").nonResponsive();
-});
-
-
-/*
- * Naver v3.0.8 - 2014-05-06
- * A jQuery plugin for responsive navigation. Part of the Formstone Library.
- * http://formstone.it/naver/
- *
- * Copyright 2014 Ben Plum; MIT Licensed
- */
-
-;(function ($, window) {
- "use strict";
-
- /**
- * @options
- * @param customClass [string] <''> "Class applied to instance"
- * @param label [boolean] tags - hr { - margin-bottom: $base-spacing-unit - 2px; - margin-bottom: (($base-spacing-unit - 2px) / $base-font-size) * 1rem; - } - - - // Left margin for lists - ul, - ol, - dd { - margin-left: 2 * $base-spacing-unit; - margin-left: (2 * $base-spacing-unit / $base-font-size) * 1rem; - } -} diff --git a/scss/components/_buttons.scss b/scss/components/_buttons.scss deleted file mode 100644 index e7f80f8..0000000 --- a/scss/components/_buttons.scss +++ /dev/null @@ -1,170 +0,0 @@ -@if $use-buttons == true { - //------------------------------------ - // BUTTONS - //------------------------------------ - .btn { - background-color: $object-ui-color; - border: 0; - color: $button-font-color; - cursor: pointer; - display: inline-block; - font-family: inherit; - font-size: 100%; - line-height: 1; - padding: 0.5em 1em; - position: relative; - text-align: center; - text-decoration: none; - user-select: none; - vertical-align: baseline; - white-space: nowrap; - - &::-moz-focus-inner { - padding: 0; - border: 0; - } - - &:hover { background-color: darken($object-ui-color, 10%); } - - &:active { background-color: darken($object-ui-color, 5%); } - - &[disabled] { - &, - &:hover, - &:active, - &:focus { - background: #dededc !important; - border: none; - color: #b3b3b1; - cursor: not-allowed; - } - } - - a.btn { - &, - &:hover { - color: $button-hover-font-color; - text-decoration: none; - } - - &:active { outline: 0; } - } - - input[type="submit"].btn { - color: $button-font-color; - height: auto; - padding: 0.5em 1em; - } - - button.btn { color: $button-font-color; } - - - // Background colors - @if $use-button-bg-colors == true { - @each $bg-color, $color in $bg-colors { - &.bg-#{$bg-color} { background-color: $color; } - - &.bg-#{$bg-color}:hover { background-color: darken($color, 10%); } - - &.bg-#{$bg-color}:active { background-color: darken($color, 5%); } - - @if $bg-color != "white" { - &.bg-light-#{$bg-color} { background-color: lighten($color, 32.5%); } - } - } - } - } - - - // Button Styles - @if $use-button-styles == true { - // Full-width collapsed button - .btn-collapse-full { - display: block; - margin: 12px 0; - width: 100%; - - @include breakpoint(extra-small) { - & { - display: inline-block; - margin: 0; - width: auto; - } - } - } - - - // Button sizes - .btn-extra-small, - a.btn-extra-small, - p.btn-extra-small, - input.btn-extra-small { - @include font-size(10px); - padding: 0.25em 0.75em; - } - - .btn-small, - a.btn-small, - p.btn-small, - input.btn-small { @include font-size(12px); } - - .btn-large, - a.btn-large, - p.btn-large, - input.btn-large { - @include font-size(18px); - padding: 1em 2em; - } - - .btn-extra-large, - a.btn-extra-large, - p.btn-extra-large, - input.btn-extra-large { - @include font-size(24px); - padding: 1em 2em; - } - - - // Dropdowns - .btn.dropdown { - width: 100%; - - .dropdown-menu { - margin-top: auto; - text-align: left; - top: 100%; - width: 100%; - } - - &[class*='dropdown-arrow-'] .dropdown-menu { margin-top: 10px; } - - &.up { - .dropdown-menu { - margin-bottom: 0px; - top: auto; - } - - &[class*='dropdown-arrow-'] .dropdown-menu { margin-bottom: 10px; } - } - } - - @include breakpoint(small) { - .btn-extra-small .caret, - .btn-small .caret { - border-top: 4px solid; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - } - - .btn.dropdown { - width: auto; - - &.extra-small .dropdown-menu { margin-top: 6px; } - - &.dropdown-small .dropdown-menu { margin-top: 11px; } - - &.dropdown-large .dropdown-menu { margin-top: 21px; } - } - } - } -} diff --git a/scss/components/_colors.scss b/scss/components/_colors.scss deleted file mode 100644 index 66f33ea..0000000 --- a/scss/components/_colors.scss +++ /dev/null @@ -1,25 +0,0 @@ -//------------------------------------ -// COLORS -//------------------------------------ - -// Background colors -@if $use-bg-colors == true { - @each $bg-color, $color in $bg-colors { - .bg-#{$bg-color}, - %bg-#{$bg-color} { background-color: $color; } - - @if $bg-color != "white" { - .bg-light-#{$bg-color}, - %bg-light-#{$bg-color} { background-color: lighten($color, 32.5%); } - } - } -} - - -// Type colors -@if $use-type-colors == true { - @each $type-color, $color in $type-colors { - .color-#{$type-color}, - %color-#{$type-color} { color: $color; } - } -} diff --git a/scss/components/_dropdowns.scss b/scss/components/_dropdowns.scss deleted file mode 100644 index a1be889..0000000 --- a/scss/components/_dropdowns.scss +++ /dev/null @@ -1,155 +0,0 @@ -@if $use-dropdowns == true { - //------------------------------------ - // DROPDOWNS - //------------------------------------ - .dropdown { - cursor: pointer; - outline: none; - position: relative; - width: auto; - - .dropdown-menu { - background-color: $dropdown-bg-color; - border: 1px solid $dropdown-border-color; - border-radius: inherit; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - font-weight: inherit; - left: 0; - margin-left: 0px; - opacity: 0; - pointer-events: none; - position: absolute; - right: 0; - text-transform: none; - transition: all 0.3s ease-in; - z-index: 99999; - - a { text-decoration: none; } - - p { - margin: 0; - padding: 10px 15px; - } - - span { line-height: inherit; } - - img { - padding: 15px; - width: 100%; - } - - iframe { - height: auto; - padding: 15px; - width: 100%; - } - - img + p, - iframe + p { padding-top: 0px; } - - hr { margin: 10px; } - - li { - display: block; - padding: 5px 10px; - transition: all 0.3s ease-out; - } - - li:hover { background-color: $dropdown-hover-color; } - - - // Headers - & > .dropdown-header { margin: 0; } - } - - ul.dropdown-menu { list-style-type: none; } - - &.dropdown-active .dropdown-menu { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; - pointer-events: auto; - } - - .dropdown-header { - color: $dropdown-header-color; - cursor: default; - @include font-size(14px); - margin: 12px 0 0; - padding: 0 0 0 9px; - } - - &.dropdown-collapse-full .dropdown-menu { width: 100%; } - - @include breakpoint(small) { - & { - .dropdown-menu { width: 200px; } - - &.dropdown-small .dropdown-menu { width: 150px; } - - &.dropdown-large .dropdown-menu { width: 350px; } - - &.dropdown-full .dropdown-menu { width: 100%; } - - &.dropdown-collapse-full .dropdown-menu { width: 200px; } - } - } - - .dropdown-header:hover, - li.dropdown-header:hover { background: none; } - - - // Arrows - &[class*='dropdown-arrow-'] .dropdown-menu { - margin-top: 10px; - - &:before, - &:after { - border-color: $dropdown-bg-color transparent; - border-style: solid; - bottom: 100%; - border-width: 0 6px 6px 6px; - content: ""; - height: 0; - position: absolute; - width: 0; - } - - &:before { - border: 8px rgba(0, 0, 0, 0.1); - border-right-color: transparent; - border-left-color: transparent; - border-top-width: 0; - } - } - - &.dropdown-arrow-left .dropdown-menu { - &:after { left: 15px; } - - &:before { left: 13px; } - } - - &.dropdown-arrow-right .dropdown-menu { - &:after { right: 15px; } - - &:before { right: 13px; } - } - - - // Dropup - &.up { - .dropdown-menu { bottom: 100%; } - - &[class*='dropdown-arrow-'] .dropdown-menu { - margin-bottom: 10px; - - &:after, &:before { top: 100%; } - - &:after { border-width: 6px 6px 0 6px; } - - &:before { border-width: 8px 8px 0 8px; } - } - } - } -} diff --git a/scss/components/_navigation.scss b/scss/components/_navigation.scss deleted file mode 100644 index 9c20b9d..0000000 --- a/scss/components/_navigation.scss +++ /dev/null @@ -1,132 +0,0 @@ - @if $use-navigation == true { - //------------------------------------ - // NAVIGATION - //------------------------------------ - - // Silent Class - %before-responsive-icon { - clear: both; - content: "."; - display: block; - height: 0; - line-height: 0; - text-align: center; - visibility: hidden; - } - - - // Navigation Styles - nav { - ul, - ol { - list-style: none; - margin: 0; - } - - li { - cursor: pointer; - position: relative; - - .dropdown & { margin-right: 0px; } - } - } - - - @if $use-responsive-navigation == true { - // Responsive navigation - // - // Thanks to Ben Plum for the great work on his - // Naver plugin (https://github.com/benplum/Naver/) - .naver { - .naver-handle { - color: inherit; - cursor: pointer; - display: none; - @include font-size(24px); - text-align: right; - text-transform: uppercase; - user-select: none; - } - - .naver-wrapper { - height: auto; - width: 100%; - } - - &.enabled { - .naver-handle { display: block; } - - .naver-wrapper { - height: 0px; - overflow: hidden; - - li { - display: block; - padding: 8px; - text-align: left; - width: 100%; - - &:hover { background: #f9f9f9; } - } - } - } - } - - .nav-responsive { - &.naver .naver-handle:after { - content: "\2261"; - text-align: right; - } - - &.nav-responsive-text.naver { - .naver-handle:after { content: "\00a0 \2261"; } - - .naver-container:before { - @extend %before-responsive-icon; - } - } - } - - - // Left-aligned responsive navigation - .nav-responsive-left { - &.naver .naver-handle { - text-align: left; - - &:before { - content: "\2261"; - text-align: left; - } - } - - &.nav-responsive-text.naver { - .naver-handle:before { content: "\2261 \00a0"; } - - .naver-container:after { - @extend %before-responsive-icon; - } - } - } - - - // Centered responsive navigation - .nav-responsive-center { - &.naver .naver-handle { - text-align: center; - - &:before { - content: "\2261"; - text-align: center; - } - } - - &.nav-responsive-text.naver { - .naver-handle:before { content: "\2261 \00a0"; } - - .naver-container:after { - @extend %before-responsive-icon; - } - } - } - } -} diff --git a/scss/concise.scss b/scss/concise.scss deleted file mode 100644 index bf51a6b..0000000 --- a/scss/concise.scss +++ /dev/null @@ -1,60 +0,0 @@ -/** - * # Concise.CSS - * http://github.com/ConciseCSS/concise.css - * - * - * Copyright 2014 Contributors - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - - - - -//------------------------------------ -// IMPORTS -//------------------------------------ -// Utility helpers -@import "helpers/variables"; -@import "helpers/functions"; -@import "helpers/mixins"; -@import "helpers/normalize"; -@import "helpers/clearfix"; - - - - -// Base styles -@import "base/main"; -@import "base/vertical-rhythm"; -@import "base/selection"; -@import "base/type"; -@import "base/headings"; - - - - -// Layout styles -@import "layout/container"; -@import "layout/grid"; -@import "layout/lists"; -@import "layout/forms"; -@import "layout/tables"; - - - - -// Component styles -@import "components/colors"; -@import "components/buttons"; -@import "components/dropdowns"; -@import "components/navigation"; - - - - -// Helpers -@import "helpers/helpers"; -@import "helpers/conditional"; -@import "base/print"; diff --git a/scss/helpers/_clearfix.scss b/scss/helpers/_clearfix.scss deleted file mode 100644 index 59c26c6..0000000 --- a/scss/helpers/_clearfix.scss +++ /dev/null @@ -1,8 +0,0 @@ -@if $use-clearfix == true { - //------------------------------------ - // CLEARFIX - //------------------------------------ - .clearfix { - @include clearfix(); - } -} diff --git a/scss/helpers/_conditional.scss b/scss/helpers/_conditional.scss deleted file mode 100644 index ecbb0fc..0000000 --- a/scss/helpers/_conditional.scss +++ /dev/null @@ -1,128 +0,0 @@ -//------------------------------------ -// CONDITIONAL -//------------------------------------ - -// Silent Classes -// (mixins have to be used instead of proper silent classes -// because of the scope of `@include` inside of media queries.) -@mixin show-conditional { - display: block; - visibility: visible; -} - -@mixin hide-conditional { - display: none; - visibility: hidden; -} - - -@if $use-conditional == true { - // Thanks to Bootstrap for having a good method of - // showing/hiding content via breakpoints - // (http://getbootstrap.com/css/#responsive-utilities) - .show-extra-small, - .hide-small, - .hide-medium, - .hide-large, - .hide-extra-large, - .hide-print, - .hide-hd { - @include show-conditional; - } - - .hide-extra-small, - .show-small, - .show-medium, - .show-large, - .show-extra-large, - .show-print, - .show-hd { - @include hide-conditional; - } - - @include breakpoint(small) { - .show-small, - .hide-extra-small, - .hide-medium, - .hide-large, - .hide-extra-large { - @include show-conditional; - } - - .hide-small, - .show-extra-small, - .show-medium, - .show-large, - .show-extra-large { - @include hide-conditional; - } - } - - @include breakpoint(medium) { - .show-medium, - .hide-small, - .hide-extra-small, - .hide-large, - .hide-extra-large { - @include show-conditional; - } - - .hide-medium, - .show-small, - .show-extra-small, - .show-large, - .show-extra-large { - @include hide-conditional; - } - } - - @include breakpoint(large) { - .show-large, - .hide-extra-small, - .hide-small, - .hide-medium, - .hide-extra-large { - @include show-conditional; - } - - .hide-large, - .show-extra-small, - .show-small, - .show-medium, - .show-extra-large { - @include hide-conditional; - } - } - - @include breakpoint(extra-large) { - .show-extra-large, - .hide-extra-small, - .hide-small, - .hide-medium, - .hide-large { - @include show-conditional; - } - - .hide-extra-large, - .show-extra-small, - .show-small, - .show-medium, - .show-large { - @include hide-conditional; - } - } - - // HiDPI and retina - @media only screen and (-moz-min-device-pixel-ratio: 1.5), - only screen and (-o-min-device-pixel-ratio: 3 / 2), - only screen and (-webkit-min-device-pixel-ratio: 1.5), - only screen and (min-device-pixel-ratio: 1.5) { - .show-hd { - @include show-conditional; - } - - .hide-hd { - @include hide-conditional; - } - } -} diff --git a/scss/helpers/_functions.scss b/scss/helpers/_functions.scss deleted file mode 100644 index ad3f008..0000000 --- a/scss/helpers/_functions.scss +++ /dev/null @@ -1,32 +0,0 @@ -//------------------------------------ -// FUNCTIONS -//------------------------------------ - -// -// Calculates proper rem font-size given -// a pixel amount. -// -@function calculate-rem($font-size) { - $rem-size: ($font-size / $base-font-size) * 1rem; - - @return $rem-size; -} - - -// -// Calculates proper line-height given a -// font-size to maintain vertical rhythm. -// -@function calculate-line-height($font-size) { - $line-height-size: ceil($font-size / $base-line-height) * ($base-line-height / $font-size); - - @return $line-height-size; -} - - -// -// Strips the units from a value (px, em, etc). -// -@function strip-units($value) { - @return $value / ($value * 0 + 1); -} diff --git a/scss/helpers/_helpers.scss b/scss/helpers/_helpers.scss deleted file mode 100644 index df53546..0000000 --- a/scss/helpers/_helpers.scss +++ /dev/null @@ -1,115 +0,0 @@ -@if $use-helper == true { - //------------------------------------ - // HELPER - //------------------------------------ - - // Add/remove floats - .float-left { float: left; } - - .float-right { float: right; } - - .float-none { float: none; } - - - // Position elements - .align-center, - %align-center { - display: block; - margin-left: auto; - margin-right: auto; - } - - .no-margin { margin: 0; } - - - // Displaying content - .inline { display: inline; } - - .show, - %show { - display: block; - visibility: visible; - } - - .hide, - %hide { - display: none; - visibility: hidden; - } - - - // Hide text - .screen-reader, - %screen-reader, - .text-hide, - %text-hide { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } - - - // Full-width elements - .full-width { width: 100%; } - - img.full-width, - %full-width-image { - max-width: 100%; - height: auto; - display: block; - width: auto; - } - - - // Text alignment - .text-left { text-align: left; } - - .text-right { text-align: right; } - - .text-center { text-align: center; } - - .text-justify { text-align: justify; } - - - // Font weights - .weight-light, - %weight-light { font-weight: 300; } - - .weight-normal, - %weight-normal { font-weight: 400; } - - .weight-semibold, - %weight-semibold { font-weight: 600; } - - - // All-caps text - .text-uppercase { text-transform: uppercase; } - - - // Stylized ampersand - .amp { font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; } - - - // Caret icon - .caret { - border-top: 5px solid; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - display: inline-block; - margin: 0 0 3px 4px; - vertical-align: middle; - width: 0; - } - - - // Fluid container (ideal for img, embed object & iframe ) - .fluid { - max-width: 100%; - height: auto; - } -} diff --git a/scss/helpers/_mixins.scss b/scss/helpers/_mixins.scss deleted file mode 100644 index 1687985..0000000 --- a/scss/helpers/_mixins.scss +++ /dev/null @@ -1,320 +0,0 @@ -//------------------------------------ -// MIXINS -//------------------------------------ - -// -// Uses `calculate-rem()` to calculate rem font-size and px -// fallback. line-height is calculated with `calculate-line-height()` -// but passing `false` will prevent that. -// -// Parameters: -// $font-size: the font size (in pixels) to be converted to rem -// $rem-sizing: if you want to convert the font-size to rem or not (default is true) -// $line-height: set to false if you wish not to output a calculated line-height (defalt is true) -// -// Example: -// `@include font-size(24px);` -// -// -// Big thanks to inuitcss for inspiration behind this -// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss) -@mixin font-size($font-size, $rem-sizing: true, $line-height: true) { - font-size: $font-size; - - @if $rem-sizing == true { - font-size: calculate-rem($font-size); - } - - @if $line-height == true { - line-height: calculate-line-height($font-size); - } -} - - -// -// Proper vendor prefixes are created by passing -// a property, property value, and browser -// vendor (webkit, moz, ms, o, etc). -// -// Parameters: -// $property: what CSS property to generate vendor prefixes for -// $value: the value of what was defined in `$property` -// $vendors: what vendor prefixes to generate (default is none) -// -// Example: -// `@include vendor(border-radius, 4px, webkit moz ms)` -// -// -@mixin vendor($property, $value, $vendors: "") { - @each $vendor in $vendors { - @if $vendor != "" { - -#{$vendor}-#{$property}: $value; - } - } - - #{$property}: $value; -} - - -// -// Loops through all of the values in the `$breakpoints` -// map and outputs conditional statements used to generate -// media query code. -// -// When calling the mixin, if the parameter matches a key -// from the `breakpoints` map, a media query is output with -// that key's value. If an explicit value is set (ex: 360px) -// then a media query is output with that value. -// -// Parameters: -// $point: the breakpoint value for the media query output -// $min-max: set whether `min` or `max` is used (default is `min`) -// -// Example: -// `@include breakpoint(extra-small) { ... }` -// -// `@include breakpoint(360px, max) { ... }` -// -// -@mixin breakpoint($point, $min-max: "min") { - @if type-of($point) == string { - @each $breakpoint-name, $breakpoint-value in $breakpoint-map { - @if $point == $breakpoint-name { - @media (#{$min-max}-width: $breakpoint-value) { - @content; - } - } - } - } @else { - @media (#{$min-max}-width: $point) { - @content; - } - } -} - - -// -// Generates property media queries for any CSS property, -// value, and set of breakpoints. Allows you to easily change -// property values based a set of breakpoints. -// -// Parameters: -// $properties: what CSS property to output inside of the media queries (can have multiple) -// $values: the value for each property (can have multiple) -// $responsive-values: what breakpoints to generate media queries for -// $use-available-mixins: whether or not to use mixin outputs for properties like `font-size` or `line-height` (default is true) -// -// Example: -// @include responsive("font-size", 11px, -// ( -// "small" : 12px, -// 450px : 13px, -// 1100px : 14px, -// "large" : 15px, -// 1600px : 16px, -// ) -// ); -// -// -// Big thanks to Max Luster for a great article about chained media -// queries that created the majority of this mixin. -// (https://bugsnag.com/blog/responsive-typography-with-chained-media-queries) -@mixin responsive($properties, $values, $responsive-values, $use-available-mixins: true) { - @each $property in $properties { - @if $property == "font-size" and $use-available-mixins == true { - #{$property}: $values; - #{$property}: ($values / $base-font-size) * 1rem; - } @else if $property == "line-height" and $use-available-mixins == true { - #{$property}: ceil($values / $base-line-height) * ($base-line-height / $values); - } @else { - #{$property}: $values; - } - } - - @each $breakpoint, $value in $responsive-values { - @if type-of($breakpoint) == string { - @if(map-has-key($breakpoint-map, $breakpoint)) { - $breakpoint: map-get($breakpoint-map, $breakpoint); - } @else { - $breakpoint: "null"; - @warn "Couldn't find breakpoint: " + $breakpoint; - } - } - - @if $breakpoint != "null" { - @media (min-width: $breakpoint) { - @each $property in $properties { - @if $property == "font-size" and $use-available-mixins == true { - #{$property}: #{$value}; - #{$property}: ($value / $base-font-size) * 1rem; - } @else if $property == "line-height" and $use-available-mixins == true { - #{$property}: ceil($value / $base-line-height) * ($base-line-height / $value); - } @else { - #{$property}: #{$value}; - } - } - } - } - } -} - - -// -// Generates CSS to wrap semantic columns -// in a row. -// -// Example: -// `@include row()` -// -// -@mixin row() { - width: 100%; - - &:after { - clear: both; - content: " "; - display: table; - } -} - - -// -// Generates CSS for semantic columns. -// -// Parameters: -// $column: the number of this particular column (determines width) -// $number-columns: number of columns in the row (default is `$column-number`) -// $first-column: set to `true` if it's the first column in a row (default is false) -// $use-gutters: set to `true` if you want column gutters (default is false) -// $gutter-value: percentage value of the gutters to be applied (default is `$gutters` variable) -// -// Example: -// `@include column(16, 4, false, true, 4)` -// -// -@mixin column($column, $number-columns: $column-number, $first-column: false, $use-gutters: false, $gutter-value: strip-units($gutters)) { - background-clip: padding-box; - - @include breakpoint(small) { - @if $use-gutters == true { - $gutter-size: percentage($gutter-value) * 0.01; - $width-of-column: (100% - $gutter-size * ($number-columns - 1)) / $number-columns; - - float: left; - @if $first-column == false { - margin-left: $gutter-size; - } - width: $width-of-column * $column + $gutter-size * ($column - 1); - } @else { - float: left; - width: percentage(100 / $number-columns * $column) * .01; - } - } -} - - -// -// Generates CSS for pushing a semantic column left or right. -// -// Parameters: -// $option: set to `push` or `pull` to generate proper styles -// $column: the column number -// $number-columns: the number of columns in the row (default is $column-number) -// $use-gutters: set to `true` if your column has gutters (default is false) -// $gutter-value: percentage value of the gutters to be applied (default is `$gutters` variable) -// -// Example: -// `@include push-pull(push, 4, 16, true)` -// -// -@mixin push-pull($option, $column, $number-columns: $column-number, $use-gutters: false, $gutter-value: strip-units($gutters)) { - $property: ""; - - @if $option == "push" { - $property: "left"; - } @else { - $property: "right"; - } - - @if $use-gutters == true { - #{$property}: 100% / $number-columns * $column - $gutter-value; - } @else { - #{$property}: 100% / $number-columns * $column; - } -} - - -// -// Generates CSS that will clear both left -// and right floats. -// -// Example: -// `@include clearfix()` -// -// -@mixin clearfix() { - & { - &:after{ - content: ""; - display: table; - clear: both; - } - } -} - - -// -// Create variable-number grid columns given the value -// for variable `$column-number`. -// -// NOTE: -// This is a setup mixin for the Concise grid. If you -// wish to set up a grid, please use the `row()` and -// `column()` mixins. -// -@mixin grid-setup($number: $column-number) { - @for $i from 1 through $number { - $column-width-gutters: (100% - $gutters * ($number - 1)) / $number; - - .#{$column-prefix + $i}, - .gutters .gutters-off .#{$column-prefix + $i} { - width: 100% / $number * $i; - } - - .gutters .#{$column-prefix + $i} { - width: $column-width-gutters * $i + $gutters * ($i - 1); - } - } -} - - -// -// Create `.push-` and `.pull-` classes given -// the value for variabls `$option` and -// `$column-number`. -// -// NOTE: -// This is a setup mixin for the push and pull -// functionality in the Concise grid. If you wish -// to use that functionality, please use the -// `push-pull()` mixin. -// -@mixin push-pull-setup($option, $number: $column-number) { - $property: ""; - - @if $option == "push" { - $property: "left"; - } @else { - $property: "right"; - } - - @for $i from 1 to $number { - .#{$option}-#{$i} { - #{$property}: 100% / $number * $i; - - .gutters & { - #{$property}: 100% / $number * $i - $gutters; - } - } - } -} diff --git a/scss/helpers/_normalize.scss b/scss/helpers/_normalize.scss deleted file mode 100644 index 4e4b18a..0000000 --- a/scss/helpers/_normalize.scss +++ /dev/null @@ -1,190 +0,0 @@ -@if $use-normalize == true { - //------------------------------------ - // NORMALIZE - //------------------------------------ - html { - font-size: 100%; - text-size-adjust: 100%; - } - - article, - aside, - details, - figcaption, - figure, - footer, - header, - hgroup, - main, - nav, - section, - summary { display: block; } - - audio, - canvas, - progress, - video { - display: inline-block; - vertical-align: baseline; - } - - audio:not([controls]) { - display: none; - height: 0; - } - - [hidden], - template { display: none; } - - a { - background: transparent; - - &:focus { outline: thin dotted; } - - &:active, - &:hover { outline: 0; } - } - - abbr[title] { border-bottom: 1px dotted; } - - b, - strong { font-weight: bold; } - - dfn { font-style: italic; } - - mark { - background: #ff0; - color: #000; - } - - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - - sup { top: -0.5em; } - - sub { bottom: -0.25em; } - - img { - border: 0; - -ms-interpolation-mode: bicubic; - } - - svg:not(:root) { overflow: hidden; } - - figure { margin: 1em 40px; } - - hr { - border: solid #eee; - border-width: 1px 0 0; - box-sizing: content-box; - clear: both; - height: 0; - } - - pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; - } - - code, - kbd, - pre, - samp { - font-family: monospace, monospace; - @include font-size($base-font-size); - } - - q { - quotes: none; - - &:before, - &:after { - content: ''; - content: none; - } - } - - form { margin: 0; } - - button, - input, - optgroup, - select, - textarea { - color: inherit; - font: inherit; - margin: 0; - vertical-align: baseline; - } - - button { overflow: visible; } - - button, - select { text-transform: none; } - - button, - html input[type="button"], - input[type="reset"], - input[type="submit"] { - -webkit-appearance: button; - cursor: pointer; - } - - button[disabled], - html input[disabled] { cursor: default; } - - button::-moz-focus-inner, - input::-moz-focus-inner { - border: 0; - padding: 0; - } - - input { - line-height: normal; - - &[type="checkbox"], - &[type="radio"] { - box-sizing: border-box; - padding: 0; - } - - &[type="number"] { - &::-webkit-inner-spin-button, - &::-webkit-outer-spin-button { height: auto; } - } - - &[type="search"] { - box-sizing: content-box; - -webkit-appearance: textfield; - - &::-webkit-search-cancel-button, - &::-webkit-search-decoration { -webkit-appearance: none; } - } - } - - fieldset { margin: 0 2px; } - - legend { - border: 0; - padding: 0; - white-space: normal; - } - - textarea { overflow: auto; } - - optgroup { font-weight: bold; } - - table { - border-collapse: collapse; - border-spacing: 0; - } - - td, - th { padding: 0; } -} diff --git a/scss/helpers/_variables.scss b/scss/helpers/_variables.scss deleted file mode 100644 index 9ced120..0000000 --- a/scss/helpers/_variables.scss +++ /dev/null @@ -1,177 +0,0 @@ -//------------------------------------ -// BASE -//------------------------------------ - -// Website background (can use color or image) -$website-bg-color: #ffffff !default; - - -// Enable font smoothing? -$enable-font-smoothing: true !default; - - -// Base font sizes and colors -$base-font-size: 16px !default; -$base-line-height: 24px !default; -$base-font-color: #333333 !default; -$base-link-color: #62b3e7 !default; -$base-heading-color: #181818 !default; -$base-sub-heading-color: #808080 !default; - - -// Base font-family -$base-font-family: "Droid Sans", Helvetica, Arial, sans-serif !default; -$base-heading-font-family: "Droid Sans", Helvetica, Arial, sans-serif !default; -$base-print-font-family: Georgia, "Times New Roman", Times, serif !default; - - -// Element spacing and line-height ratio -$base-spacing-unit: $base-line-height !default; -$half-spacing-unit: $base-spacing-unit / 2 !default; -$line-height-ratio: $base-line-height / $base-font-size; - - - - -//------------------------------------ -// RESPONSIVE -//------------------------------------ - -// Breakpoints -$breakpoint-map: ( - "extra-small": 30em, - "small": 48em, - "medium": 60em, - "large": 70em, - "extra-large": 80em -); - - - - -//------------------------------------ -// COLORS -//------------------------------------ - -// Background colors -$bg-colors: ( - "white": #ffffff, - "black": #222222, - "gray": #999999, - "green": #5cb85c, - "blue": #5bc0de, - "yellow": #ed9c28, - "red": #d9534f -); - - -// Type colors -$type-colors: ( - "white": #ffffff, - "black": #222222, - "gray": #999999, - "green": #468847, - "blue": #3a87ad, - "yellow": #c09853, - "red": #d2322d -); - - -// Selection colors -$selection-background: #666666 !default; -$selection-color: #ffffff !default; - - -// Form placeholder colors -$placeholder-color: #bbbbbb !default; - - -// Colors used for our objects' borders, etc -$object-ui-color: #cccccc !default; - - -// Dropdown colors -$dropdown-bg-color: #ffffff !default; -$dropdown-border-color: #ededed !default; -$dropdown-hover-color: #f3f8f8 !default; -$dropdown-header-color: #aaaaaa !default; - - - -// Button font color -$button-font-color: #ffffff !default; -$button-hover-font-color: #ffffff !default; - - - - -//------------------------------------ -// Components -//------------------------------------ - -// Gutter size -$gutters: 2% !default; - - -// Prefix for grid columns. By default columns -// are formatted as `.column-8` -$column-prefix: 'column-' !default; - - -// Dictate how many columns you would like your -// grid system to use. Default is 16. -$column-number: 16 !default; - - - - -//------------------------------------ -// INCLUDE -//------------------------------------ - -// Set whatever components you want included -// in your project to `true` and any components -// you do not wish to be included to `false` -// -// Thanks to inuitcss (https://github.com/csswizardry/inuit.css/blob/master/_defaults.scss) -// for the idea to use feature switches in a framework. It's an absolutely brilliant idea -// that makes customization so much easier. - -// Utility -$use-normalize: true !default; -$use-clearfix: true !default; -$use-vertical-rhythm: true !default; - - -// Base -$use-main: true !default; -$use-selection: true !default; -$use-container: true !default; -$use-typography: true !default; -$use-headings: true !default; -$use-lists: true !default; - $use-list-styles: true !default; -$use-tables: true !default; - $use-table-styles: true !default; -$use-forms: true !default; - $use-form-styles: true !default; -$use-grid: true !default; - $use-push: true !default; - $use-pull: true !default; - - -// Components -$use-type-colors: true !default; -$use-bg-colors: true !default; -$use-buttons: true !default; - $use-button-bg-colors: true !default; - $use-button-styles: true !default; -$use-dropdowns: true !default; -$use-navigation: true !default; - $use-responsive-navigation: true !default; - - -// Helpers -$use-helper: true !default; -$use-conditional: true !default; -$use-print: true !default; diff --git a/scss/layout/_container.scss b/scss/layout/_container.scss deleted file mode 100644 index ee94342..0000000 --- a/scss/layout/_container.scss +++ /dev/null @@ -1,17 +0,0 @@ -@if $use-container == true { - //------------------------------------ - // CONTAINER - //------------------------------------ - .container { - margin: 0 auto; - - @include responsive("width", 90%, - ( - "small" : 620px, - "medium" : 768px, - "large" : 960px, - "extra-large" : 1140px - ) - ); - } -} diff --git a/scss/layout/_forms.scss b/scss/layout/_forms.scss deleted file mode 100644 index e14bce3..0000000 --- a/scss/layout/_forms.scss +++ /dev/null @@ -1,102 +0,0 @@ -@if $use-forms == true { - //------------------------------------ - // FORMS - //------------------------------------ - input { - &[type="checkbox"], - &[type="file"], - &[type="image"], - &[type="radio"] { - background: auto; - border: auto; - height: auto; - width: auto; - } - } - - input[disabled], - select[disabled], - textarea[disabled] { - background-color: #f6f6f6; - cursor: not-allowed; - } - - label { display: block; } - - textarea { height: auto; } - - - @if $use-form-styles == true { - // Form styling - .form { - input, - select, - textarea { - border: 1px solid $object-ui-color; - box-sizing: border-box; - height: 37px; - padding: 5px; - width: 100%; - - @include breakpoint(extra-small) { - & { width: 300px; } - } - } - - textarea { height: auto; } - - @include breakpoint(extra-small) { - input[type="submit"] { - display: block; - width: auto; - } - } - - input:focus, - select:focus, - textarea:focus, - button:focus, - [contenteditable="true"]:focus { outline: 1px solid darken($object-ui-color, 15%); } - - fieldset { - border: 1px solid $object-ui-color; - padding: 10px 25px; - - legend { - font-weight: bold; - @include font-size(13px); - padding: 0 10px; - } - } - } - - - // Block-level form items - .form-item { display: block; } - - - // Inline Form - .form-inline { - label { width: auto; } - - @include breakpoint(small) { - label { - display: inline-block; - width: 100px; - } - - textarea { width: auto; } - } - } - - - // Placeholder text - ::-webkit-input-placeholder { color: $placeholder-color; } - - :-ms-input-placeholder { color: $placeholder-color; } - - ::-moz-placeholder { color: $placeholder-color; } - - :-moz-placeholder { color: $placeholder-color; } - } -} diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss deleted file mode 100644 index 031aa1e..0000000 --- a/scss/layout/_grid.scss +++ /dev/null @@ -1,73 +0,0 @@ -@if $use-grid == true { - //------------------------------------ - // GRID - //------------------------------------ - .row { - width: 100%; - - &:after { - clear: both; - content: " "; - display: table; - } - } - - [class*='#{$column-prefix}'] { - background-clip: padding-box !important; - - &.right { float: right; } - - img { max-width: 100%; } - } - - @include breakpoint(small) { - [class*='#{$column-prefix}'] { float: left; } - - .gutters [class*='#{$column-prefix}'] { - margin-left: $gutters; - - &:first-child { margin-left: 0; } - } - - .gutters-off [class*='#{$column-prefix}'] { margin-left: 0; } - - - // Row columns - @include grid-setup(); - - - // Push - - // Thanks to inuitcss (https://github.com/csswizardry/inuit.css) for the idea to - // abstract 'push' and 'pull' into their own mixins. This makes adding/removing - // them to projects absolutely painless. - @if $use-push == true { - [class*='push-'] { position: relative; } - - @include push-pull-setup(push, $column-number); - } - - - // Pull - @if $use-pull == true { - [class*='pull-'] { position: relative; } - - @include push-pull-setup(pull, $column-number); - } - } - - - // Non-responsive grid - .non-responsive { - [class*='#{$column-prefix}'] { - float: left; - width: auto !important; - } - - .gutters [class*='#{$column-prefix}'], - &.gutters [class*='#{$column-prefix}'] { margin-left: $gutters; } - - .gutters [class*='#{$column-prefix}']:first-child, - &.gutters [class*='#{$column-prefix}']:first-child { margin-left: 0; } - } -} diff --git a/scss/layout/_lists.scss b/scss/layout/_lists.scss deleted file mode 100644 index 5b65e23..0000000 --- a/scss/layout/_lists.scss +++ /dev/null @@ -1,85 +0,0 @@ -@if $use-lists == true { - //------------------------------------ - // LISTS - //------------------------------------ - ul, - ol { - margin-left: 20px; - padding-left: 0px; - - li { line-height: 1.75em; } - - ul { - list-style-type: circle; - margin-bottom: auto; - - ul { list-style-type: square; } - - ol { list-style-type: lower-roman; } - - @include breakpoint(small) { - & { margin-left: 20px; } - } - } - - ol { - list-style-type: lower-latin; - margin-bottom: auto; - - ol { list-style-type: lower-roman; } - - ul { list-style-type: square; } - } - } - - - @if $use-list-styles == true { - // Unstyled - .list-unstyled { - margin-left: 0px; - list-style: none; - - ul { - list-style: none; - - ul { list-style: none; } - } - } - - - // Inline - .list-inline { - margin-left: 0px; - - li { - border-bottom: none; - display: inline; - margin-right: 15px; - - &:last-child { margin-right: 0px; } - - @include breakpoint(small) { - & { - margin-right: 15px; - - &:last-child { margin-right: 0px; } - } - } - - @include breakpoint(medium) { - & { - margin-right: 30px; - - &:last-child { margin-right: 0px; } - } - } - } - } - } - - - // Definition Lists - dt { font-weight: bold; } - - dd { margin-left: 0px; } -} diff --git a/scss/layout/_tables.scss b/scss/layout/_tables.scss deleted file mode 100644 index f39025a..0000000 --- a/scss/layout/_tables.scss +++ /dev/null @@ -1,63 +0,0 @@ -@if $use-tables == true { - //------------------------------------ - // TABLES - //------------------------------------ - - @if $use-table-styles == true { - table { - // Table styling - &.table { - empty-cells: show; - width: 100%; - - caption { - color: #000; - font: italic 85%/1 arial, sans-serif; - padding: 1em 0; - text-align: center; - } - - thead { border-bottom: 2px solid $object-ui-color; } - - th, - td { padding: 12px 15px; } - - td { border-top: 1px solid $object-ui-color; } - - @include breakpoint(extra-small) { - & { - width: auto; - - th, - td { padding: 10px 50px 10px 25px; } - } - } - } - - &.table-full, - &.table.table-full { width: 100%; } - } - } - - - // Responsive tables - .table-responsive { - overflow: auto; - width: 100%; - - table { margin-bottom: 0; } - - &::-webkit-scrollbar { - height: 14px; - width: 14px; - - -webkit-appearance: none; - } - - &::-webkit-scrollbar-thumb { - background-color: rgba(50, 50, 50, 0.2); - border: 3px solid #fff; - border-radius: 8px; - } - } -} diff --git a/src/addons/concise-ui/_concise-ui.scss b/src/addons/concise-ui/_concise-ui.scss new file mode 100644 index 0000000..db7ca40 --- /dev/null +++ b/src/addons/concise-ui/_concise-ui.scss @@ -0,0 +1,24 @@ +/** + * 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 new file mode 100644 index 0000000..6d60e45 --- /dev/null +++ b/src/addons/concise-ui/components/_alerts.scss @@ -0,0 +1,57 @@ +// +// 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 new file mode 100644 index 0000000..8bec4de --- /dev/null +++ b/src/addons/concise-ui/components/_badges.scss @@ -0,0 +1,13 @@ +// +// Badges +// ============================================================================= + +.badge { + background-color: getColor(base, primary); + border-radius: 25px; + color: white; + 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 new file mode 100644 index 0000000..3c57498 --- /dev/null +++ b/src/addons/concise-ui/components/_breadcrumbs.scss @@ -0,0 +1,47 @@ +// +// 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 new file mode 100644 index 0000000..d07e562 --- /dev/null +++ b/src/addons/concise-ui/components/_buttons.scss @@ -0,0 +1,85 @@ +// +// 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: white; + } +} + +@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: white; + } + + &: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 new file mode 100644 index 0000000..25d0dcf --- /dev/null +++ b/src/addons/concise-ui/components/_cards.scss @@ -0,0 +1,56 @@ +// +// 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: white; + 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 new file mode 100644 index 0000000..491cda7 --- /dev/null +++ b/src/addons/concise-ui/components/_collections.scss @@ -0,0 +1,27 @@ +// +// 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 new file mode 100644 index 0000000..361a45f --- /dev/null +++ b/src/addons/concise-ui/components/_dropdowns.scss @@ -0,0 +1,144 @@ +// +// 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 new file mode 100644 index 0000000..dcb5acc --- /dev/null +++ b/src/addons/concise-ui/components/_groups.scss @@ -0,0 +1,34 @@ +// +// 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 new file mode 100644 index 0000000..86debc0 --- /dev/null +++ b/src/addons/concise-ui/components/_labels.scss @@ -0,0 +1,13 @@ +// +// Labels +// ============================================================================= + +.label { + background-color: getColor(base, primary); + border-radius: 3px; + color: white; + 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 new file mode 100644 index 0000000..c31837a --- /dev/null +++ b/src/addons/concise-ui/components/_modals.scss @@ -0,0 +1,122 @@ +// +// 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: white; + padding: unitSize(2) 1.5em; + + h1, h2, h3, h4, h5, h6, + .h1, .h2, .h3, .h4, .h5, .h6, + .giga, .mega, .kilo { + color: white; + display: inline; + } +} + +.modal-body, +.modal-footer { + background-color: white; + margin-top: 0; + padding: unitSize(3) 2.5em; +} + +.modal-body { + p { margin-bottom: 0; } + + p + p { margin-bottom: unitSize(3, -4); } +} + +.modal-footer { + border-top: 1px solid getColor(base, lines); + font-size: pxToEm(14); + margin: 0; + + p { margin-bottom: 0; } +} + +.modal-close { + color: white; + 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: getColor(text, primary); } + } + + .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 new file mode 100644 index 0000000..2ac25ee --- /dev/null +++ b/src/addons/concise-ui/components/_progress.scss @@ -0,0 +1,111 @@ +// +// 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: white; + 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 new file mode 100644 index 0000000..7514f65 --- /dev/null +++ b/src/addons/concise-ui/components/_spinner.scss @@ -0,0 +1,19 @@ +// +// 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 new file mode 100644 index 0000000..f9ffbf5 --- /dev/null +++ b/src/addons/concise-ui/components/_tooltips.scss @@ -0,0 +1,191 @@ +// +// 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: white; + 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 new file mode 100644 index 0000000..aaa45a7 --- /dev/null +++ b/src/concise.scss @@ -0,0 +1,40 @@ +/** + * 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 new file mode 100644 index 0000000..c635a04 --- /dev/null +++ b/src/core/globals/_functions.scss @@ -0,0 +1,67 @@ +// +// 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 new file mode 100644 index 0000000..8e69df0 --- /dev/null +++ b/src/core/globals/_globals.scss @@ -0,0 +1,98 @@ +// +// 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 + ), + + 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 new file mode 100644 index 0000000..38ab208 --- /dev/null +++ b/src/core/globals/_mixins.scss @@ -0,0 +1,22 @@ +// +// 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 new file mode 100644 index 0000000..cc714b7 --- /dev/null +++ b/src/core/layout/_base.scss @@ -0,0 +1,129 @@ +// +// 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 new file mode 100644 index 0000000..b33910c --- /dev/null +++ b/src/core/layout/_blockquotes.scss @@ -0,0 +1,32 @@ +// +// 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 new file mode 100644 index 0000000..00d461f --- /dev/null +++ b/src/core/layout/_buttons.scss @@ -0,0 +1,126 @@ +// +// Buttons +// ============================================================================= + +button, +.button { + background-color: getColor(base, primary); + border: none; + color: white; + 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: white; + text-decoration: none; + } + + &:focus, + &:active { outline: none; } + + &:active { background-color: lighten(getColor(base, primary), 10%); } + + &[disabled] { + background-color: darken(getColor(background, light), 10%); + color: white; + 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 new file mode 100644 index 0000000..b46204c --- /dev/null +++ b/src/core/layout/_forms.scss @@ -0,0 +1,291 @@ +// +// 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 new file mode 100644 index 0000000..31d12df --- /dev/null +++ b/src/core/layout/_headings.scss @@ -0,0 +1,122 @@ +// +// 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 new file mode 100644 index 0000000..c76096d --- /dev/null +++ b/src/core/layout/_lists.scss @@ -0,0 +1,85 @@ +// +// Lists +// ============================================================================= + +li { line-height: unitSize(3); } + +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/_print.scss b/src/core/layout/_print.scss new file mode 100644 index 0000000..f74deff --- /dev/null +++ b/src/core/layout/_print.scss @@ -0,0 +1,157 @@ +// +// Print +// ============================================================================= + +// +// Variables +// --------- + +$font-family-print: "Georgia", "Times New Roman", "Times", serif !default; + + +// +// Styles +// --------- + +@media print { + @page { margin: .5cm; } + + *, + *:before, + *:after { + background: transparent !important; + color: black !important; + filter: none !important; + text-shadow: none !important; + } + + :root { + background-color: white; + color: black; + font: 11pt / 1.3 $font-family-print; + } + + 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; + + &[href]:after { + content: " (" attr(href) ")"; + font-size: smaller; + } + } + + q:after { content: " (Source: " attr(cite) ")"; } + + abbr[title]:after { content: " (" attr(title) ")"; } + + a { + &:after, + &[href^="javascript:"]:after, + &[href^="#"]:after { content: ""; } + } + + pre, + code { + background-color: none; + border: 1px solid getColor(base, lines); + page-break-inside: avoid; + } + + blockquote { + border: none; + page-break-inside: avoid; + } + + thead { display: table-header-group; } + + tr, + img { page-break-inside: avoid; } + + ol { padding-left: 1.25em; } + + ul { + padding-left: 0; + list-style: none; + + ul, + ul ul { padding-left: 1.5em; } + } + + ul, + ol { + li { content: "» "; } + } + + 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/core/layout/_tables.scss b/src/core/layout/_tables.scss new file mode 100644 index 0000000..01d8afe --- /dev/null +++ b/src/core/layout/_tables.scss @@ -0,0 +1,139 @@ +// +// 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 new file mode 100644 index 0000000..76afe1b --- /dev/null +++ b/src/core/layout/_type.scss @@ -0,0 +1,132 @@ +// +// 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 new file mode 100644 index 0000000..d46e8cb --- /dev/null +++ b/src/core/utils/_atgrid.scss @@ -0,0 +1,169 @@ +// +// atGrid.css - CSS Grid System with HTML Attributes +// ============================================================================= +// https://github.com/jameskolce/atGrid +// +// Copyright 2014 James Kolce
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.
+ + +
++ +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
+
-
+
- List Item
+
-
+
- List Item +
+
+ - 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 | +
+
+
+
+
+
+ Modal Header
+
+ ×
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget bibendum eros. Integer rhoncus pretium orci ut sagittis. Proin sollicitudin sapien eu dui imperdiet, et viverra enim dignissim.
+
+
+
+
+
+
+ Modal Header
+
+ ×
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget bibendum eros. Integer rhoncus pretium orci ut sagittis. Proin sollicitudin sapien eu dui imperdiet, et viverra enim dignissim.
+
+
+
+
+
+
+ Modal Header
+
+ ×
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget bibendum eros. Integer rhoncus pretium orci ut sagittis. Proin sollicitudin sapien eu dui imperdiet, et viverra enim dignissim.
+
+
+
+
+
+
+ Modal Header
+
+ ×
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget bibendum eros. Integer rhoncus pretium orci ut sagittis. Proin sollicitudin sapien eu dui imperdiet, et viverra enim dignissim.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Modal Header
+
+ ×
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget bibendum eros. Integer rhoncus pretium orci ut sagittis. Proin sollicitudin sapien eu dui imperdiet, et viverra enim dignissim.
+Label
+25
+ + + + + + + + + + + +
+ ×
+
+
+
+ Alert! This is a standard message for your application.
+
+ ×
+
+
+
+
+
+
+
+ Success! This is a success message 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.
+
+
+
+
+
+ 
+
+
+
+ Card Title
+
+
+
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+
+
+
+
+
+
+
+
+
+
+
+
+ Collection Header
+
+ Collection Item
+
+
+
+ Active Collection Item
+
+
+
+ Collection Item
+
+
+ 50%
+
+
+
+ 25%
+
+
+
+ 75%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ Dropdown
+
+
+ -
+
- Home +
- Account +
- Settings +
+ +
+ Dropdown Small
+
+
+ -
+
- Home +
- Account +
- Settings +
+ +
+ Dropdown Large
+
+
+ -
+
- Home +
- Account +
- Settings +
+ +
+ Dropdown Top
+
+
+ -
+
- Home +
- Account +
- Settings +
+ +
+ Dropdown Content
+
+
+
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
++ +
+ Dropdown Hover
+
+
+
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
+