diff --git a/dist/chota.css b/dist/chota.css
index 218d9dd..31e8672 100644
--- a/dist/chota.css
+++ b/dist/chota.css
@@ -1,30 +1,37 @@
-/*! chota.css | MIT License | github.com/jenil/chota */
+/*! chota.css v0.5.0 | MIT License | github.com/jenil/chota */
:root {
- --primary-color: #1a9f60;
- --lightGrey-color: #d2d6dd;
- --darkGrey-color: #84868b;
- --grid-maxWidth: 120rem;
- --grid-gutter: 2rem;
- --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+ --color-primary: #1a9f60;
+ --color-lightGrey: #d2d6dd;
+ --color-grey: #7e818b;
+ --color-darkGrey: #3f4144;
+ --color-error: #d43939;
+ --color-success: #28bd14;
+ --grid-maxWidth: 120rem;
+ --grid-gutter: 2rem;
+ --font-size: 1.6rem;
+ --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next",
+ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+ "Droid Sans", "Helvetica Neue", sans-serif;
}
* {
- box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
html {
- font-size: 62.5%;
- line-height: 1.15;
- -ms-text-size-adjust: 100%;
- -webkit-text-size-adjust: 100%;
+ font-size: 62.5%;
+ line-height: 1.15;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
}
body {
- letter-spacing: 0.01em;
- line-height: 1.6;
- font-size: 1.6rem;
- font-weight: 400;
- font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
- font-family: var(--font-family);
- margin: 0;
- padding: 0;
+ letter-spacing: 0.01em;
+ line-height: 1.6;
+ font-size: var(--font-size);
+ font-weight: 400;
+ font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
+ font-family: var(--font-family);
+ margin: 0;
+ padding: 0;
}
h1,
h2,
@@ -32,109 +39,113 @@ h3,
h4,
h5,
h6 {
- font-weight: 500;
- margin: 0.35em 0 0.7em 0;
+ font-weight: 500;
+ margin: 0.35em 0 0.7em 0;
}
h1 {
- font-size: 2em;
+ font-size: 2em;
}
h2 {
- font-size: 1.75em;
+ font-size: 1.75em;
}
h3 {
- font-size: 1.5em;
+ font-size: 1.5em;
}
h4 {
- font-size: 1.25em;
+ font-size: 1.25em;
}
h5 {
- font-size: 1em;
+ font-size: 1em;
}
h6 {
- font-size: 0.85em;
+ font-size: 0.85em;
}
a {
- color: var(--primary-color);
- text-decoration: none;
+ color: var(--color-primary);
+ text-decoration: none;
}
a:hover:not(.button) {
- opacity: 0.6;
+ opacity: 0.75;
}
p {
- margin-top: 0;
+ margin-top: 0;
}
blockquote {
- background-color: #f3f3f3;
- padding: 1.5rem 2rem;
- border-left: 3px solid var(--lightGrey-color);
+ background-color: #f3f3f6;
+ padding: 1.5rem 2rem;
+ border-left: 3px solid var(--color-lightGrey);
}
dl dt {
- font-weight: bold;
+ font-weight: bold;
}
hr {
- border: none;
- background-color: var(--lightGrey-color);
- height: 1px;
- margin: 1rem 0;
+ border: none;
+ background-color: var(--color-lightGrey);
+ height: 1px;
+ margin: 1rem 0;
}
table {
- width: 100%;
- border: none;
- border-collapse: collapse;
- border-spacing: 0;
- text-align: left;
+ width: 100%;
+ border: none;
+ border-collapse: collapse;
+ border-spacing: 0;
+ text-align: left;
+}
+table.striped tr:nth-of-type(2n) {
+ background-color: #f3f3f6;
}
td,
th {
- vertical-align: middle;
- padding: 1.2rem 0.4rem;
+ vertical-align: middle;
+ padding: 1.2rem 0.4rem;
}
thead {
- border-bottom: 2px solid var(--lightGrey-color);
+ border-bottom: 2px solid var(--color-lightGrey);
}
tfoot {
- border-top: 2px solid var(--lightGrey-color);
+ border-top: 2px solid var(--color-lightGrey);
}
code,
kbd,
pre,
samp,
tt {
- font-family: monaco, "Consolas", "Lucida Console", monospace;
+ font-family: monaco, "Consolas", "Lucida Console", monospace;
}
code,
kbd {
- padding: 0 0.4rem;
- font-size: 90%;
- white-space: pre-wrap;
- border-radius: 4px;
- color: #c62424;
- padding: 0.2em 0.4em;
- background-color: #f7f7f7;
+ padding: 0 0.4rem;
+ font-size: 90%;
+ white-space: pre-wrap;
+ border-radius: 4px;
+ color: #d43939;
+ padding: 0.2em 0.4em;
+ background-color: #f3f3f6;
}
pre {
- background-color: #f7f7f7;
- font-size: 1em;
- padding: 1rem;
- overflow-x: auto;
+ background-color: #f3f3f6;
+ font-size: 1em;
+ padding: 1rem;
+ overflow-x: auto;
}
pre code {
- background: none;
- padding: 0;
+ background: none;
+ padding: 0;
}
abbr[title] {
- border-bottom: none;
- text-decoration: underline;
- text-decoration: underline dotted;
+ border-bottom: none;
+ text-decoration: underline;
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted;
}
img {
- max-width: 100%;
+ max-width: 100%;
}
fieldset {
- border: 1px solid var(--lightGrey-color);
+ border: 1px solid var(--color-lightGrey);
}
iframe {
- border: 0;
+ border: 0;
}
.container {
max-width: var(--grid-maxWidth);
@@ -143,18 +154,23 @@ iframe {
padding: 0 calc(var(--grid-gutter) / 2);
}
.row {
+ display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
- -ms-flex-pack: start;
- justify-content: flex-start;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
margin-left: calc(var(--grid-gutter) / -2);
margin-right: calc(var(--grid-gutter) / -2);
}
.col {
- -ms-flex: 1;
- flex: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
}
.col,
[class*=" col-"],
@@ -162,63 +178,75 @@ iframe {
margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2);
}
.col-1 {
- -ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
- flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
+ flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
max-width: calc((100% / (12/1)) - var(--grid-gutter));
}
.col-2 {
- -ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
- flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
+ flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
max-width: calc((100% / (12/2)) - var(--grid-gutter));
}
.col-3 {
- -ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
- flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
+ flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
max-width: calc((100% / (12/3)) - var(--grid-gutter));
}
.col-4 {
- -ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
- flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
+ flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
max-width: calc((100% / (12/4)) - var(--grid-gutter));
}
.col-5 {
- -ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
- flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
+ flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
max-width: calc((100% / (12/5)) - var(--grid-gutter));
}
.col-6 {
- -ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
- flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
+ flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
max-width: calc((100% / (12/6)) - var(--grid-gutter));
}
.col-7 {
- -ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
- flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
+ flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
max-width: calc((100% / (12/7)) - var(--grid-gutter));
}
.col-8 {
- -ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
- flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
+ flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
max-width: calc((100% / (12/8)) - var(--grid-gutter));
}
.col-9 {
- -ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
- flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
+ flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
max-width: calc((100% / (12/9)) - var(--grid-gutter));
}
.col-10 {
- -ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
- flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
+ flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
max-width: calc((100% / (12/10)) - var(--grid-gutter));
}
.col-11 {
- -ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
- flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
+ flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
max-width: calc((100% / (12/11)) - var(--grid-gutter));
}
.col-12 {
- -ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
- flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
+ flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
max-width: calc((100% / (12/12)) - var(--grid-gutter));
}
@media screen and (max-width: 768px) {
@@ -229,8 +257,9 @@ iframe {
.col,
[class*=" col-"],
[class^='col-'] {
- -ms-flex: 0 1 100%;
- flex: 0 1 100%;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 100%;
+ flex: 0 1 100%;
max-width: 100%;
}
}
@@ -247,30 +276,41 @@ select,
textarea,
textarea[type="text"] {
font-family: inherit;
- padding: 0.7rem 1rem;
+ padding: 0.8rem 1rem;
border-radius: 4px;
- border: 1px solid var(--lightGrey-color);
+ border: 1px solid var(--color-lightGrey);
font-size: 1em;
+ -webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: block;
width: 100%;
}
-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):hover,
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):not[disabled]:hover,
select:hover,
textarea:hover,
textarea[type="text"]:hover {
- border-color: #aaa;
+ border-color: var(--color-grey);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus,
select:focus,
textarea:focus,
textarea[type="text"]:focus {
outline: none;
- border-color: var(--primary-color);
+ border-color: var(--color-primary);
+ -webkit-box-shadow: 0 0 1px var(--color-primary);
+ box-shadow: 0 0 1px var(--color-primary);
+}
+input.error:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
+textarea.error {
+ border-color: var(--color-error);
+}
+input.success:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
+textarea.success {
+ border-color: var(--color-success);
}
select {
-webkit-appearance: none;
- background: #fafafa no-repeat 100%;
+ background: #f3f3f6 no-repeat 100%;
background-size: 1ex;
background-origin: content-box;
background-image: url("data:image/svg+xml;utf8,");
@@ -287,18 +327,29 @@ select {
[type="submit"],
button {
padding: 1rem 2.5rem;
- color: #333;
- background: #e6e6e6;
+ color: var(--color-darkGrey);
+ background: var(--color-lightGrey);
border-radius: 4px;
border: none;
- font-size: 1.5rem;
+ font-size: var(--font-size);
line-height: 1;
text-align: center;
+ -webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
text-decoration: none;
- transform: scale(1);
+ -webkit-transform: scale(1);
+ transform: scale(1);
display: inline-block;
}
+.grouped {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.grouped > input:not(:last-child),
+.grouped > .button:not(:last-child) {
+ margin-right: 16px;
+}
.button + .button {
margin-left: 1rem;
}
@@ -314,7 +365,8 @@ button:hover {
[type="reset"]:active,
[type="submit"]:active,
button:active {
- transform: scale(0.98);
+ -webkit-transform: scale(0.98);
+ transform: scale(0.98);
}
input[disabled],
button[disabled],
@@ -325,93 +377,148 @@ button[disabled]:hover {
}
.button.primary,
.button.secondary,
+.button.dark,
+.button.error,
+.button.success,
[type="submit"] {
color: #fff;
background-color: #000;
- background: var(--primary-color);
+ background-color: var(--color-primary);
}
.button.secondary {
- background: var(--darkGrey-color);
+ background-color: var(--color-grey);
+}
+.button.dark {
+ background-color: var(--color-darkGrey);
+}
+.button.error {
+ background-color: var(--color-error);
+}
+.button.success {
+ background-color: var(--color-success);
}
.button.outline {
background-color: transparent;
- border: 1px solid var(--lightGrey-color);
+ border: 1px solid var(--color-lightGrey);
}
.button.outline.primary {
- border-color: var(--primary-color);
- color: var(--primary-color);
+ border-color: var(--color-primary);
+ color: var(--color-primary);
}
.button.outline.secondary {
- border-color: var(--darkGrey-color);
- color: var(--darkGrey-color);
+ border-color: var(--color-grey);
+ color: var(--color-grey);
+}
+.button.outline.dark {
+ border-color: var(--color-darkGrey);
+ color: var(--color-darkGrey);
}
.button.clear {
background-color: transparent;
border-color: transparent;
- color: var(--primary-color);
+ color: var(--color-primary);
+}
+.button.icon {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+.button.icon > img {
+ margin-left: 2px;
+}
+.button.icon-only {
+ padding: 1rem;
+}
+::-webkit-input-placeholder {
+ color: #bdbfc4;
+}
+:-ms-input-placeholder {
+ color: #bdbfc4;
+}
+::-ms-input-placeholder {
+ color: #bdbfc4;
+}
+::placeholder {
+ color: #bdbfc4;
}
.nav {
+ display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 5rem;
- -ms-flex-align: stretch;
- align-items: stretch;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
}
.nav img {
max-height: 3rem;
}
.nav>.container {
+ display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.nav-center,
.nav-left,
.nav-right {
+ display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -ms-flex: 1;
- flex: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
}
.nav-left {
- -ms-flex-pack: start;
- justify-content: flex-start;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
}
.nav-right {
- -ms-flex-pack: end;
- justify-content: flex-end;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
}
.nav-center {
- -ms-flex-pack: center;
- justify-content: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
}
@media screen and (max-width: 480px) {
.nav,
.nav>.container {
- -ms-flex-direction: column;
- flex-direction: column;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
}
.nav-center,
.nav-left,
.nav-right {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
- -ms-flex-pack: center;
- justify-content: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
}
}
.nav a,
.nav .brand {
text-decoration: none;
+ display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -ms-flex-align: center;
- align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
padding: 1rem 2rem;
color: #555;
}
.nav .active:not(.button) {
color: #000; /* fallback */
- color: var(--primary-color);
+ color: var(--color-primary);
}
.nav .brand {
font-size: 1.75em;
@@ -427,7 +534,8 @@ button[disabled]:hover {
.card {
padding: 1rem 2rem;
border-radius: 4px;
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.card p:last-child {
margin: 0;
@@ -437,6 +545,7 @@ button[disabled]:hover {
margin-bottom: 1rem;
}
.tabs {
+ display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@@ -445,10 +554,11 @@ button[disabled]:hover {
}
.tabs > a {
padding: 1rem 2rem;
- -ms-flex: 0 1 auto;
- flex: 0 1 auto;
- color: #555;
- border-bottom: 2px solid var(--lightGrey-color);
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ color: var(--color-darkGrey);
+ border-bottom: 2px solid var(--color-lightGrey);
text-align: center;
}
.tabs > a.active,
@@ -457,17 +567,18 @@ button[disabled]:hover {
border-bottom: 2px solid #555;
}
.tabs > a.active {
- border-color: var(--primary-color);
+ border-color: var(--color-primary);
}
.tabs.is-full a {
- -ms-flex: 1;
- flex: 1;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
}
.tag {
display: inline-block;
- border: 1px solid var(--lightGrey-color);
+ border: 1px solid var(--color-lightGrey);
text-transform: uppercase;
- color: var(--darkGrey-color);
+ color: var(--color-grey);
padding: 0.5rem;
line-height: 1;
letter-spacing: 0.5px;
@@ -483,6 +594,49 @@ button[disabled]:hover {
.tag+.tag {
margin-left: 1rem;
}
+/* Colors */
+.bg-primary {
+ background-color: var(--color-primary);
+ color: #fff;
+}
+.bg-light {
+ background-color: var(--color-lightGrey);
+}
+.bg-dark {
+ background-color: var(--color-darkGrey);
+ color: #fff;
+}
+.bg-grey {
+ background-color: var(--color-grey);
+ color: #fff;
+}
+.bg-error {
+ background-color: var(--color-error);
+ color: #fff;
+}
+.bg-success {
+ background-color: var(--color-success);
+ color: #fff;
+}
+.text-primary {
+ color: var(--color-primary);
+}
+.text-light {
+ color: var(--color-lightGrey);
+}
+.text-dark {
+ color: var(--color-darkGrey);
+}
+.text-grey {
+ color: var(--color-grey);
+}
+.text-error {
+ color: var(--color-error);
+}
+.text-success {
+ color: var(--color-success);
+}
+/* Position & alignment */
.pull-right {
float: right;
}
@@ -515,40 +669,53 @@ button[disabled]:hover {
width: 100%;
}
.is-vertical-align {
+ display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -ms-flex-align: center;
- align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
}
.is-horizontal-align {
+ display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -ms-flex-pack: center;
- justify-content: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
}
.is-center {
+ display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -ms-flex-align: center;
- align-items: center;
- -ms-flex-pack: center;
- justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
}
.is-right {
+ display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -ms-flex-align: center;
- align-items: center;
- -ms-flex-pack: end;
- justify-content: flex-end;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
}
.is-left {
+ display: -webkit-box;
display: -ms-flexbox;
display: flex;
- -ms-flex-align: center;
- align-items: center;
- -ms-flex-pack: start;
- justify-content: flex-start;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
}
.is-fixed {
position: fixed;
diff --git a/dist/chota.min.css b/dist/chota.min.css
index b24353e..6e72525 100644
--- a/dist/chota.min.css
+++ b/dist/chota.min.css
@@ -1,2 +1 @@
-/*! chota.css | MIT License | github.com/jenil/chota */
-:root{--primary-color: #1a9f60;--lightGrey-color: #d2d6dd;--darkGrey-color: #84868b;--grid-maxWidth: 120rem;--grid-gutter: 2rem;--font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif}*{box-sizing:border-box}html{font-size:62.5%;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{letter-spacing:.01em;line-height:1.6;font-size:1.6rem;font-weight:400;font-family:"Segoe UI","Helvetica Neue",sans-serif;font-family:var(--font-family);margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:500;margin:.35em 0 .7em}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1em}h6{font-size:.85em}a{color:var(--primary-color);text-decoration:none}a:hover:not(.button){opacity:.6}p{margin-top:0}blockquote{background-color:#f3f3f3;padding:1.5rem 2rem;border-left:3px solid var(--lightGrey-color)}dl dt{font-weight:700}hr{background-color:var(--lightGrey-color);height:1px;margin:1rem 0}table{width:100%;border-collapse:collapse;border-spacing:0;text-align:left}td,th{vertical-align:middle;padding:1.2rem .4rem}thead{border-bottom:2px solid var(--lightGrey-color)}tfoot{border-top:2px solid var(--lightGrey-color)}code,kbd,pre,samp,tt{font-family:monaco,"Consolas","Lucida Console",monospace}code,kbd,pre{background-color:#f7f7f7}code,kbd{white-space:pre-wrap;border-radius:4px;color:#c62424;padding:.2em .4em;padding:0 .4rem;font-size:90%}pre{font-size:1em;padding:1rem;overflow-x:auto}pre code{background:0 0;padding:0}abbr[title]{border-bottom:none;text-decoration:underline dotted}img{max-width:100%}fieldset{border:1px solid var(--lightGrey-color);padding:.5rem 2rem}hr,iframe,table{border:0}.container{max-width:var(--grid-maxWidth);margin:0 auto;width:96%;padding:0 calc(var(--grid-gutter)/2)}.row{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:start;justify-content:flex-start;margin-left:calc(var(--grid-gutter)/-2);margin-right:calc(var(--grid-gutter)/-2)}.col{-ms-flex:1;flex:1}.col,[class*=" col-"],[class^=col-]{margin:0 calc(var(--grid-gutter)/2) calc(var(--grid-gutter)/2)}.col-1{-ms-flex:0 0 calc((100%/(12/1)) - var(--grid-gutter));flex:0 0 calc((100%/(12/1)) - var(--grid-gutter));max-width:calc((100%/(12/1)) - var(--grid-gutter))}.col-2{-ms-flex:0 0 calc((100%/(12/2)) - var(--grid-gutter));flex:0 0 calc((100%/(12/2)) - var(--grid-gutter));max-width:calc((100%/(12/2)) - var(--grid-gutter))}.col-3{-ms-flex:0 0 calc((100%/(12/3)) - var(--grid-gutter));flex:0 0 calc((100%/(12/3)) - var(--grid-gutter));max-width:calc((100%/(12/3)) - var(--grid-gutter))}.col-4{-ms-flex:0 0 calc((100%/(12/4)) - var(--grid-gutter));flex:0 0 calc((100%/(12/4)) - var(--grid-gutter));max-width:calc((100%/(12/4)) - var(--grid-gutter))}.col-5{-ms-flex:0 0 calc((100%/(12/5)) - var(--grid-gutter));flex:0 0 calc((100%/(12/5)) - var(--grid-gutter));max-width:calc((100%/(12/5)) - var(--grid-gutter))}.col-6{-ms-flex:0 0 calc((100%/(12/6)) - var(--grid-gutter));flex:0 0 calc((100%/(12/6)) - var(--grid-gutter));max-width:calc((100%/(12/6)) - var(--grid-gutter))}.col-7{-ms-flex:0 0 calc((100%/(12/7)) - var(--grid-gutter));flex:0 0 calc((100%/(12/7)) - var(--grid-gutter));max-width:calc((100%/(12/7)) - var(--grid-gutter))}.col-8{-ms-flex:0 0 calc((100%/(12/8)) - var(--grid-gutter));flex:0 0 calc((100%/(12/8)) - var(--grid-gutter));max-width:calc((100%/(12/8)) - var(--grid-gutter))}.col-9{-ms-flex:0 0 calc((100%/(12/9)) - var(--grid-gutter));flex:0 0 calc((100%/(12/9)) - var(--grid-gutter));max-width:calc((100%/(12/9)) - var(--grid-gutter))}.col-10{-ms-flex:0 0 calc((100%/(12/10)) - var(--grid-gutter));flex:0 0 calc((100%/(12/10)) - var(--grid-gutter));max-width:calc((100%/(12/10)) - var(--grid-gutter))}.col-11{-ms-flex:0 0 calc((100%/(12/11)) - var(--grid-gutter));flex:0 0 calc((100%/(12/11)) - var(--grid-gutter));max-width:calc((100%/(12/11)) - var(--grid-gutter))}.col-12{-ms-flex:0 0 calc((100%/(12/12)) - var(--grid-gutter));flex:0 0 calc((100%/(12/12)) - var(--grid-gutter));max-width:calc((100%/(12/12)) - var(--grid-gutter))}@media screen and (max-width:768px){.container{width:100%}.col,[class*=" col-"],[class^=col-]{-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}}legend{text-transform:uppercase;font-size:.8em;letter-spacing:.1rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),select,textarea,textarea[type=text]{font-family:inherit;padding:.7rem 1rem;border-radius:4px;border:1px solid var(--lightGrey-color);font-size:1em;transition:all .2s ease;display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,select:hover,textarea:hover,textarea[type=text]:hover{border-color:#aaa}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{outline:0;border-color:var(--primary-color)}select{-webkit-appearance:none;background:#fafafa no-repeat 100%;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,")}[type=checkbox],[type=radio]{width:1.6rem;height:1.6rem}.button,[type=button],[type=reset]{color:#333}.button,[type=button],[type=reset],[type=submit],button{padding:1rem 2.5rem;background:#e6e6e6;border-radius:4px;border:0;font-size:1.5rem;line-height:1;text-align:center;transition:opacity .2s ease;text-decoration:none;transform:scale(1);display:inline-block}button{color:#333}.button+.button{margin-left:1rem}.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{opacity:.8}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{transform:scale(.98)}button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{opacity:.4;cursor:not-allowed}.button.primary,.button.secondary,[type=submit]{color:#fff;background-color:#000;background:var(--primary-color)}.button.secondary{background:var(--darkGrey-color)}.button.outline{background-color:transparent;border:1px solid var(--lightGrey-color)}.button.outline.primary{border-color:var(--primary-color);color:var(--primary-color)}.button.outline.secondary{border-color:var(--darkGrey-color);color:var(--darkGrey-color)}.button.clear{background-color:transparent;border-color:transparent;color:var(--primary-color)}.nav{min-height:5rem;-ms-flex-align:stretch;align-items:stretch}.nav img{max-height:3rem}.nav,.nav>.container{display:-ms-flexbox;display:flex}.nav-center,.nav-left,.nav-right{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.nav-left{-ms-flex-pack:start;justify-content:flex-start}.nav-right{-ms-flex-pack:end;justify-content:flex-end}.nav-center{-ms-flex-pack:center;justify-content:center}@media screen and (max-width:480px){.nav,.nav>.container{-ms-flex-direction:column;flex-direction:column}.nav-center,.nav-left,.nav-right{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center}}.nav .brand,.nav a{text-decoration:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:1rem 2rem;color:#555}.nav .active:not(.button){color:#000;color:var(--primary-color)}.nav .brand{font-size:1.75em;padding-top:0;padding-bottom:0}.nav .brand img{padding-right:1rem}.nav .button{margin:auto 1rem}.card{padding:1rem 2rem;border-radius:4px;box-shadow:0 0 2px rgba(0,0,0,.4)}.card p:last-child{margin:0}.card header>*{margin-top:0;margin-bottom:1rem}.tabs{display:-ms-flexbox;display:flex}.tabs a{text-decoration:none}.tabs>a{padding:1rem 2rem;-ms-flex:0 1 auto;flex:0 1 auto;color:#555;border-bottom:2px solid var(--lightGrey-color);text-align:center}.tabs>a.active,.tabs>a:hover{opacity:1;border-bottom:2px solid #555}.tabs>a.active{border-color:var(--primary-color)}.tabs.is-full a{-ms-flex:1;flex:1}.tag{display:inline-block;border:1px solid var(--lightGrey-color);text-transform:uppercase;color:var(--darkGrey-color);padding:.5rem;line-height:1;letter-spacing:.5px}.tag.is-small{padding:.4rem;font-size:.75em}.tag.is-large{padding:.7rem;font-size:1.125em}.tag+.tag{margin-left:1rem}.pull-right{float:right}.pull-left{float:left}.is-text-center{text-align:center}.is-text-left{text-align:left}.is-text-right{text-align:right}.is-text-uppercase{text-transform:uppercase}.is-text-lowercase{text-transform:lowercase}.is-text-capitalize{text-transform:capitalize}.is-full-screen{width:100%;min-height:100vh}.is-full-width{width:100%}.is-vertical-align{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.is-center,.is-horizontal-align,.is-left,.is-right{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.is-center,.is-left,.is-right{-ms-flex-align:center;align-items:center}.is-left,.is-right{-ms-flex-pack:end;justify-content:flex-end}.is-left{-ms-flex-pack:start;justify-content:flex-start}.is-fixed{position:fixed;width:100%}.is-paddingless{padding:0!important}.is-marginless{margin:0!important}.clearfix{content:"";display:table;clear:both}.is-hidden{display:none!important}@media screen and (max-width:480px){.hide-phone{display:none!important}}@media screen and (max-width:768px){.hide-tablet{display:none!important}}
\ No newline at end of file
+/*! chota.css v0.5.0 | MIT License | github.com/jenil/chota */:root{--color-darkGrey:#3f4144;--color-error:#d43939;--color-grey:#7e818b;--color-lightGrey:#d2d6dd;--color-primary:#1a9f60;--color-success:#28bd14;--font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-size:1.6rem;--grid-gutter:2rem;--grid-maxWidth:120rem}*{-webkit-box-sizing:border-box;box-sizing:border-box}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:62.5%;line-height:1.15}body{font-family:Segoe UI,Helvetica Neue,sans-serif;font-family:var(--font-family);font-size:var(--font-size);font-weight:400;letter-spacing:.01em;line-height:1.6;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:500;margin:.35em 0 .7em}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1em}h6{font-size:.85em}a{color:var(--color-primary);text-decoration:none}a:hover:not(.button){opacity:.75}p{margin-top:0}blockquote{background-color:#f3f3f6;border-left:3px solid var(--color-lightGrey);padding:1.5rem 2rem}dl dt{font-weight:700}hr{background-color:var(--color-lightGrey);height:1px;margin:1rem 0}hr,table{border:none}table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}table.striped tr:nth-of-type(2n){background-color:#f3f3f6}td,th{padding:1.2rem .4rem;vertical-align:middle}thead{border-bottom:2px solid var(--color-lightGrey)}tfoot{border-top:2px solid var(--color-lightGrey)}code,kbd,pre,samp,tt{font-family:monaco,Consolas,Lucida Console,monospace}code,kbd{border-radius:4px;color:#d43939;font-size:90%;padding:.2em .4em;white-space:pre-wrap}code,kbd,pre{background-color:#f3f3f6}pre{font-size:1em;overflow-x:auto;padding:1rem}pre code{background:none;padding:0}abbr[title]{-webkit-text-decoration:underline dotted;border-bottom:none;text-decoration:underline;text-decoration:underline dotted}img{max-width:100%}fieldset{border:1px solid var(--color-lightGrey)}iframe{border:0}.container{margin:0 auto;max-width:var(--grid-maxWidth);padding:0 calc(var(--grid-gutter) / 2);width:96%}.row{-ms-flex-flow:row wrap;-ms-flex-pack:start;-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-box-pack:start;display:-webkit-box;display:-ms-flexbox;display:flex;flex-flow:row wrap;justify-content:flex-start;margin-left:calc(var(--grid-gutter) / -2);margin-right:calc(var(--grid-gutter) / -2)}.col{-ms-flex:1;-webkit-box-flex:1;flex:1}.col,[class*=" col-"],[class^=col-]{margin:0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2)}.col-1{-ms-flex:0 0 calc(8.33333% - var(--grid-gutter));flex:0 0 calc(8.33333% - var(--grid-gutter));max-width:calc(8.33333% - var(--grid-gutter))}.col-1,.col-2{-webkit-box-flex:0}.col-2{-ms-flex:0 0 calc(16.66667% - var(--grid-gutter));flex:0 0 calc(16.66667% - var(--grid-gutter));max-width:calc(16.66667% - var(--grid-gutter))}.col-3{-ms-flex:0 0 calc(25% - var(--grid-gutter));flex:0 0 calc(25% - var(--grid-gutter));max-width:calc(25% - var(--grid-gutter))}.col-3,.col-4{-webkit-box-flex:0}.col-4{-ms-flex:0 0 calc(33.33333% - var(--grid-gutter));flex:0 0 calc(33.33333% - var(--grid-gutter));max-width:calc(33.33333% - var(--grid-gutter))}.col-5{-ms-flex:0 0 calc(41.66667% - var(--grid-gutter));flex:0 0 calc(41.66667% - var(--grid-gutter));max-width:calc(41.66667% - var(--grid-gutter))}.col-5,.col-6{-webkit-box-flex:0}.col-6{-ms-flex:0 0 calc(50% - var(--grid-gutter));flex:0 0 calc(50% - var(--grid-gutter));max-width:calc(50% - var(--grid-gutter))}.col-7{-ms-flex:0 0 calc(58.33333% - var(--grid-gutter));flex:0 0 calc(58.33333% - var(--grid-gutter));max-width:calc(58.33333% - var(--grid-gutter))}.col-7,.col-8{-webkit-box-flex:0}.col-8{-ms-flex:0 0 calc(66.66667% - var(--grid-gutter));flex:0 0 calc(66.66667% - var(--grid-gutter));max-width:calc(66.66667% - var(--grid-gutter))}.col-9{-ms-flex:0 0 calc(75% - var(--grid-gutter));flex:0 0 calc(75% - var(--grid-gutter));max-width:calc(75% - var(--grid-gutter))}.col-9,.col-10{-webkit-box-flex:0}.col-10{-ms-flex:0 0 calc(83.33333% - var(--grid-gutter));flex:0 0 calc(83.33333% - var(--grid-gutter));max-width:calc(83.33333% - var(--grid-gutter))}.col-11{-ms-flex:0 0 calc(91.66667% - var(--grid-gutter));flex:0 0 calc(91.66667% - var(--grid-gutter));max-width:calc(91.66667% - var(--grid-gutter))}.col-11,.col-12{-webkit-box-flex:0}.col-12{-ms-flex:0 0 calc(100% - var(--grid-gutter));flex:0 0 calc(100% - var(--grid-gutter));max-width:calc(100% - var(--grid-gutter))}@media screen and (max-width:768px){.container{width:100%}.col,[class*=" col-"],[class^=col-]{-ms-flex:0 1 100%;-webkit-box-flex:0;flex:0 1 100%;max-width:100%}}fieldset{padding:.5rem 2rem}legend{font-size:.8em;letter-spacing:.1rem;text-transform:uppercase}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),select,textarea,textarea[type=text]{-webkit-transition:all .2s ease;border:1px solid var(--color-lightGrey);border-radius:4px;display:block;font-family:inherit;font-size:1em;padding:.8rem 1rem;transition:all .2s ease;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):not[disabled]:hover,select:hover,textarea:hover,textarea[type=text]:hover{border-color:var(--color-grey)}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{-webkit-box-shadow:0 0 1px var(--color-primary);border-color:var(--color-primary);box-shadow:0 0 1px var(--color-primary);outline:none}input.error:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),textarea.error{border-color:var(--color-error)}input.success:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),textarea.success{border-color:var(--color-success)}select{-webkit-appearance:none;background:#f3f3f6 no-repeat 100%;background-image:url("data:image/svg+xml;utf8,");background-origin:content-box;background-size:1ex}[type=checkbox],[type=radio]{height:1.6rem;width:1.6rem}.button,[type=button],[type=reset],[type=submit],button{-webkit-transform:scale(1);-webkit-transition:opacity .2s ease;background:var(--color-lightGrey);border:none;border-radius:4px;color:var(--color-darkGrey);display:inline-block;font-size:var(--font-size);line-height:1;padding:1rem 2.5rem;text-align:center;text-decoration:none;transform:scale(1);transition:opacity .2s ease}.grouped{display:-webkit-box;display:-ms-flexbox;display:flex}.grouped>.button:not(:last-child),.grouped>input:not(:last-child){margin-right:16px}.button+.button{margin-left:1rem}.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{opacity:.8}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{-webkit-transform:scale(.98);transform:scale(.98)}button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{cursor:not-allowed;opacity:.4}.button.dark,.button.error,.button.primary,.button.secondary,.button.success,[type=submit]{background-color:#000;background-color:var(--color-primary);color:#fff}.button.secondary{background-color:var(--color-grey)}.button.dark{background-color:var(--color-darkGrey)}.button.error{background-color:var(--color-error)}.button.success{background-color:var(--color-success)}.button.outline{background-color:transparent;border:1px solid var(--color-lightGrey)}.button.outline.primary{border-color:var(--color-primary);color:var(--color-primary)}.button.outline.secondary{border-color:var(--color-grey);color:var(--color-grey)}.button.outline.dark{border-color:var(--color-darkGrey);color:var(--color-darkGrey)}.button.clear{background-color:transparent;border-color:transparent;color:var(--color-primary)}.button.icon{-ms-flex-align:center;-webkit-box-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.button.icon>img{margin-left:2px}.button.icon-only{padding:1rem}::-webkit-input-placeholder{color:#bdbfc4}:-ms-input-placeholder{color:#bdbfc4}::-ms-input-placeholder{color:#bdbfc4}::placeholder{color:#bdbfc4}.nav{-ms-flex-align:stretch;-webkit-box-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:5rem}.nav img{max-height:3rem}.nav-center,.nav-left,.nav-right,.nav>.container{display:-webkit-box;display:-ms-flexbox;display:flex}.nav-center,.nav-left,.nav-right{-ms-flex:1;-webkit-box-flex:1;flex:1}.nav-left{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.nav-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.nav-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}@media screen and (max-width:480px){.nav,.nav>.container{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;flex-direction:column}.nav-center,.nav-left,.nav-right{-ms-flex-pack:center;-ms-flex-wrap:wrap;-webkit-box-pack:center;flex-wrap:wrap;justify-content:center}}.nav .brand,.nav a{-ms-flex-align:center;-webkit-box-align:center;align-items:center;color:#555;display:-webkit-box;display:-ms-flexbox;display:flex;padding:1rem 2rem;text-decoration:none}.nav .active:not(.button){color:#000;color:var(--color-primary)}.nav .brand{font-size:1.75em;padding-bottom:0;padding-top:0}.nav .brand img{padding-right:1rem}.nav .button{margin:auto 1rem}.card{-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.3);padding:1rem 2rem}.card p:last-child{margin:0}.card header>*{margin-bottom:1rem;margin-top:0}.tabs{display:-webkit-box;display:-ms-flexbox;display:flex}.tabs a{text-decoration:none}.tabs>a{-ms-flex:0 1 auto;-webkit-box-flex:0;border-bottom:2px solid var(--color-lightGrey);color:var(--color-darkGrey);flex:0 1 auto;padding:1rem 2rem;text-align:center}.tabs>a.active,.tabs>a:hover{border-bottom:2px solid #555;opacity:1}.tabs>a.active{border-color:var(--color-primary)}.tabs.is-full a{-ms-flex:1;-webkit-box-flex:1;flex:1}.tag{border:1px solid var(--color-lightGrey);color:var(--color-grey);display:inline-block;letter-spacing:.5px;line-height:1;padding:.5rem;text-transform:uppercase}.tag.is-small{font-size:.75em;padding:.4rem}.tag.is-large{font-size:1.125em;padding:.7rem}.tag+.tag{margin-left:1rem}.bg-primary{background-color:var(--color-primary);color:#fff}.bg-light{background-color:var(--color-lightGrey)}.bg-dark{background-color:var(--color-darkGrey);color:#fff}.bg-grey{background-color:var(--color-grey);color:#fff}.bg-error{background-color:var(--color-error);color:#fff}.bg-success{background-color:var(--color-success);color:#fff}.text-primary{color:var(--color-primary)}.text-light{color:var(--color-lightGrey)}.text-dark{color:var(--color-darkGrey)}.text-grey{color:var(--color-grey)}.text-error{color:var(--color-error)}.text-success{color:var(--color-success)}.pull-right{float:right}.pull-left{float:left}.is-text-center{text-align:center}.is-text-left{text-align:left}.is-text-right{text-align:right}.is-text-uppercase{text-transform:uppercase}.is-text-lowercase{text-transform:lowercase}.is-text-capitalize{text-transform:capitalize}.is-full-screen{min-height:100vh;width:100%}.is-full-width{width:100%}.is-vertical-align{-ms-flex-align:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.is-center,.is-horizontal-align{-ms-flex-pack:center;-webkit-box-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.is-center{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.is-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.is-left,.is-right{-ms-flex-align:center;-webkit-box-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.is-left{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.is-fixed{position:fixed;width:100%}.is-paddingless{padding:0!important}.is-marginless{margin:0!important}.clearfix{clear:both;content:"";display:table}.is-hidden{display:none!important}@media screen and (max-width:480px){.hide-phone{display:none!important}}@media screen and (max-width:768px){.hide-tablet{display:none!important}}
\ No newline at end of file
diff --git a/package.json b/package.json
index 583b9b4..a51662c 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"main": "dist/chota.min.css",
"scripts": {
"start": "browser-sync start --server --directory --files '**/*.css' '**/*.html'",
- "build": "rm -r dist/ && yarn postcss && NODE_ENV=production yarn postcss -x .min.css",
+ "build": "rm -r dist/ && yarn postcss && NODE_ENV=production yarn postcss --ext .min.css && gzip -c dist/chota.min.css | wc -c",
"postcss": "postcss ./src/chota.css -d dist/",
"watch": "NODE_ENV=development yarn postcss -w",
"test": "echo \"Error: no test specified\" && exit 1"
@@ -26,11 +26,12 @@
"url": "https://github.com/jenil/chota/issues"
},
"devDependencies": {
- "autoprefixer": "^6.7.7",
+ "autoprefixer": "^9.0.1",
"browser-sync": "^2.18.8",
- "postcss-cli": "^4.1.1",
+ "cssnano": "^4.0.4",
+ "postcss-cli": "^6.0.0",
"postcss-csso": "^3.0.0",
- "postcss-import": "^9.1.0"
+ "postcss-import": "^11.1.0"
},
"files": [
"src/",
diff --git a/postcss.config.js b/postcss.config.js
index 2c5b16c..ad7eb80 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,8 +3,14 @@ let plugins = [
require("autoprefixer")({ browsers: "last 2 versions" })
];
-if (process.env.NODE_ENV == 'production') plugins.push(require("postcss-csso"))
+// if (process.env.NODE_ENV == 'production') plugins.push(require("postcss-csso"))
+if (process.env.NODE_ENV == "production")
+ plugins.push(
+ require("cssnano")({
+ preset: "default"
+ })
+ );
module.exports = {
plugins
-}
+};
diff --git a/src/_base.css b/src/_base.css
index 24c503a..80efc52 100644
--- a/src/_base.css
+++ b/src/_base.css
@@ -1,32 +1,38 @@
:root {
- --primary-color: #1a9f60;
- --lightGrey-color: #d2d6dd;
- --darkGrey-color: #84868b;
- --grid-maxWidth: 120rem;
- --grid-gutter: 2rem;
- --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+ --color-primary: #1a9f60;
+ --color-lightGrey: #d2d6dd;
+ --color-grey: #7e818b;
+ --color-darkGrey: #3f4144;
+ --color-error: #d43939;
+ --color-success: #28bd14;
+ --grid-maxWidth: 120rem;
+ --grid-gutter: 2rem;
+ --font-size: 1.6rem;
+ --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next",
+ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+ "Droid Sans", "Helvetica Neue", sans-serif;
}
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
html {
- font-size: 62.5%;
- line-height: 1.15;
- -ms-text-size-adjust: 100%;
- -webkit-text-size-adjust: 100%;
+ font-size: 62.5%;
+ line-height: 1.15;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
}
body {
- letter-spacing: 0.01em;
- line-height: 1.6;
- font-size: 1.6rem;
- font-weight: 400;
- font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
- font-family: var(--font-family);
- margin: 0;
- padding: 0;
+ letter-spacing: 0.01em;
+ line-height: 1.6;
+ font-size: var(--font-size);
+ font-weight: 400;
+ font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/
+ font-family: var(--font-family);
+ margin: 0;
+ padding: 0;
}
h1,
@@ -35,84 +41,88 @@ h3,
h4,
h5,
h6 {
- font-weight: 500;
- margin: 0.35em 0 0.7em 0;
+ font-weight: 500;
+ margin: 0.35em 0 0.7em 0;
}
h1 {
- font-size: 2em;
+ font-size: 2em;
}
h2 {
- font-size: 1.75em;
+ font-size: 1.75em;
}
h3 {
- font-size: 1.5em;
+ font-size: 1.5em;
}
h4 {
- font-size: 1.25em;
+ font-size: 1.25em;
}
h5 {
- font-size: 1em;
+ font-size: 1em;
}
h6 {
- font-size: 0.85em;
+ font-size: 0.85em;
}
a {
- color: var(--primary-color);
- text-decoration: none;
+ color: var(--color-primary);
+ text-decoration: none;
}
a:hover:not(.button) {
- opacity: 0.6;
+ opacity: 0.75;
}
p {
- margin-top: 0;
+ margin-top: 0;
}
blockquote {
- background-color: #f3f3f3;
- padding: 1.5rem 2rem;
- border-left: 3px solid var(--lightGrey-color);
+ background-color: #f3f3f6;
+ padding: 1.5rem 2rem;
+ border-left: 3px solid var(--color-lightGrey);
}
dl dt {
- font-weight: bold;
+ font-weight: bold;
}
hr {
- border: none;
- background-color: var(--lightGrey-color);
- height: 1px;
- margin: 1rem 0;
+ border: none;
+ background-color: var(--color-lightGrey);
+ height: 1px;
+ margin: 1rem 0;
}
table {
- width: 100%;
- border: none;
- border-collapse: collapse;
- border-spacing: 0;
- text-align: left;
+ width: 100%;
+ border: none;
+ border-collapse: collapse;
+ border-spacing: 0;
+ text-align: left;
+}
+
+table.striped tr:nth-of-type(2n) {
+ background-color: #f3f3f6;
}
td,
th {
- vertical-align: middle;
- padding: 1.2rem 0.4rem;
+ vertical-align: middle;
+ padding: 1.2rem 0.4rem;
}
thead {
- border-bottom: 2px solid var(--lightGrey-color);
+ border-bottom: 2px solid var(--color-lightGrey);
}
tfoot {
- border-top: 2px solid var(--lightGrey-color);
+ border-top: 2px solid var(--color-lightGrey);
}
code,
@@ -120,46 +130,46 @@ kbd,
pre,
samp,
tt {
- font-family: monaco, "Consolas", "Lucida Console", monospace;
+ font-family: monaco, "Consolas", "Lucida Console", monospace;
}
code,
kbd {
- padding: 0 0.4rem;
- font-size: 90%;
- white-space: pre-wrap;
- border-radius: 4px;
- color: #c62424;
- padding: 0.2em 0.4em;
- background-color: #f7f7f7;
+ padding: 0 0.4rem;
+ font-size: 90%;
+ white-space: pre-wrap;
+ border-radius: 4px;
+ color: #d43939;
+ padding: 0.2em 0.4em;
+ background-color: #f3f3f6;
}
pre {
- background-color: #f7f7f7;
- font-size: 1em;
- padding: 1rem;
- overflow-x: auto;
+ background-color: #f3f3f6;
+ font-size: 1em;
+ padding: 1rem;
+ overflow-x: auto;
}
pre code {
- background: none;
- padding: 0;
+ background: none;
+ padding: 0;
}
abbr[title] {
- border-bottom: none;
- text-decoration: underline;
- text-decoration: underline dotted;
+ border-bottom: none;
+ text-decoration: underline;
+ text-decoration: underline dotted;
}
img {
- max-width: 100%;
+ max-width: 100%;
}
fieldset {
- border: 1px solid var(--lightGrey-color);
+ border: 1px solid var(--color-lightGrey);
}
iframe {
- border: 0;
+ border: 0;
}
diff --git a/src/_card.css b/src/_card.css
index ba5b876..7566441 100644
--- a/src/_card.css
+++ b/src/_card.css
@@ -1,7 +1,7 @@
.card {
padding: 1rem 2rem;
border-radius: 4px;
- box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.card p:last-child {
diff --git a/src/_form.css b/src/_form.css
index 3410b2b..b6df305 100644
--- a/src/_form.css
+++ b/src/_form.css
@@ -13,20 +13,20 @@ select,
textarea,
textarea[type="text"] {
font-family: inherit;
- padding: 0.7rem 1rem;
+ padding: 0.8rem 1rem;
border-radius: 4px;
- border: 1px solid var(--lightGrey-color);
+ border: 1px solid var(--color-lightGrey);
font-size: 1em;
transition: all 0.2s ease;
display: block;
width: 100%;
}
-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):hover,
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):not[disabled]:hover,
select:hover,
textarea:hover,
textarea[type="text"]:hover {
- border-color: #aaa;
+ border-color: var(--color-grey);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus,
@@ -34,12 +34,23 @@ select:focus,
textarea:focus,
textarea[type="text"]:focus {
outline: none;
- border-color: var(--primary-color);
+ border-color: var(--color-primary);
+ box-shadow: 0 0 1px var(--color-primary);
+}
+
+input.error:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
+textarea.error {
+ border-color: var(--color-error);
+}
+
+input.success:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
+textarea.success {
+ border-color: var(--color-success);
}
select {
-webkit-appearance: none;
- background: #fafafa no-repeat 100%;
+ background: #f3f3f6 no-repeat 100%;
background-size: 1ex;
background-origin: content-box;
background-image: url("data:image/svg+xml;utf8,");
@@ -58,11 +69,11 @@ select {
[type="submit"],
button {
padding: 1rem 2.5rem;
- color: #333;
- background: #e6e6e6;
+ color: var(--color-darkGrey);
+ background: var(--color-lightGrey);
border-radius: 4px;
border: none;
- font-size: 1.5rem;
+ font-size: var(--font-size);
line-height: 1;
text-align: center;
transition: opacity 0.2s ease;
@@ -71,6 +82,15 @@ button {
display: inline-block;
}
+.grouped {
+ display: flex;
+}
+
+.grouped > input:not(:last-child),
+.grouped > .button:not(:last-child) {
+ margin-right: 16px;
+}
+
.button + .button {
margin-left: 1rem;
}
@@ -101,33 +121,69 @@ button[disabled]:hover {
.button.primary,
.button.secondary,
+.button.dark,
+.button.error,
+.button.success,
[type="submit"] {
color: #fff;
background-color: #000;
- background: var(--primary-color);
+ background-color: var(--color-primary);
}
.button.secondary {
- background: var(--darkGrey-color);
+ background-color: var(--color-grey);
+}
+
+.button.dark {
+ background-color: var(--color-darkGrey);
+}
+
+.button.error {
+ background-color: var(--color-error);
+}
+
+.button.success {
+ background-color: var(--color-success);
}
.button.outline {
background-color: transparent;
- border: 1px solid var(--lightGrey-color);
+ border: 1px solid var(--color-lightGrey);
}
.button.outline.primary {
- border-color: var(--primary-color);
- color: var(--primary-color);
+ border-color: var(--color-primary);
+ color: var(--color-primary);
}
.button.outline.secondary {
- border-color: var(--darkGrey-color);
- color: var(--darkGrey-color);
+ border-color: var(--color-grey);
+ color: var(--color-grey);
+}
+
+.button.outline.dark {
+ border-color: var(--color-darkGrey);
+ color: var(--color-darkGrey);
}
.button.clear {
background-color: transparent;
border-color: transparent;
- color: var(--primary-color);
+ color: var(--color-primary);
+}
+
+.button.icon {
+ display: inline-flex;
+ align-items: center;
+}
+
+.button.icon > img {
+ margin-left: 2px;
+}
+.button.icon-only {
+ padding: 1rem;
+}
+
+::placeholder {
+ color: #bdbfc4;
}
diff --git a/src/_nav.css b/src/_nav.css
index c262e4b..1999e4b 100644
--- a/src/_nav.css
+++ b/src/_nav.css
@@ -55,7 +55,7 @@
.nav .active:not(.button) {
color: #000; /* fallback */
- color: var(--primary-color);
+ color: var(--color-primary);
}
.nav .brand {
diff --git a/src/_tab.css b/src/_tab.css
index be71690..4c18c9e 100644
--- a/src/_tab.css
+++ b/src/_tab.css
@@ -9,8 +9,8 @@
.tabs > a {
padding: 1rem 2rem;
flex: 0 1 auto;
- color: #555;
- border-bottom: 2px solid var(--lightGrey-color);
+ color: var(--color-darkGrey);
+ border-bottom: 2px solid var(--color-lightGrey);
text-align: center;
}
@@ -21,7 +21,7 @@
}
.tabs > a.active {
- border-color: var(--primary-color);
+ border-color: var(--color-primary);
}
.tabs.is-full a {
diff --git a/src/_tag.css b/src/_tag.css
index 8285684..f72f24f 100644
--- a/src/_tag.css
+++ b/src/_tag.css
@@ -1,8 +1,8 @@
.tag {
display: inline-block;
- border: 1px solid var(--lightGrey-color);
+ border: 1px solid var(--color-lightGrey);
text-transform: uppercase;
- color: var(--darkGrey-color);
+ color: var(--color-grey);
padding: 0.5rem;
line-height: 1;
letter-spacing: 0.5px;
diff --git a/src/_util.css b/src/_util.css
index aebf3ff..506db55 100644
--- a/src/_util.css
+++ b/src/_util.css
@@ -1,3 +1,58 @@
+/* Colors */
+.bg-primary {
+ background-color: var(--color-primary);
+ color: #fff;
+}
+
+.bg-light {
+ background-color: var(--color-lightGrey);
+}
+
+.bg-dark {
+ background-color: var(--color-darkGrey);
+ color: #fff;
+}
+
+.bg-grey {
+ background-color: var(--color-grey);
+ color: #fff;
+}
+
+.bg-error {
+ background-color: var(--color-error);
+ color: #fff;
+}
+
+.bg-success {
+ background-color: var(--color-success);
+ color: #fff;
+}
+
+.text-primary {
+ color: var(--color-primary);
+}
+
+.text-light {
+ color: var(--color-lightGrey);
+}
+
+.text-dark {
+ color: var(--color-darkGrey);
+}
+
+.text-grey {
+ color: var(--color-grey);
+}
+
+.text-error {
+ color: var(--color-error);
+}
+
+.text-success {
+ color: var(--color-success);
+}
+
+/* Position & alignment */
.pull-right {
float: right;
}
diff --git a/src/chota.css b/src/chota.css
index 249fff2..2056433 100644
--- a/src/chota.css
+++ b/src/chota.css
@@ -1,4 +1,4 @@
-/*! chota.css | MIT License | github.com/jenil/chota */
+/*! chota.css v0.5.0 | MIT License | github.com/jenil/chota */
@import "_base.css";
@import "_grid.css";
@import "_form.css";
diff --git a/test/components.html b/test/components.html
index 5f22380..79a43f6 100644
--- a/test/components.html
+++ b/test/components.html
@@ -140,7 +140,13 @@
OneTwoThreeSmallLarge
+ One
+ Two
+ Three
+ Small
+ Large
+ Primary Light Grey Dark Error SuccessTag
- Grid
@@ -311,7 +317,59 @@
Helpers
+ Text color
+ Background color
+ Icons
+
+
+
+
+
+
+
+