diff --git a/.gitignore b/.gitignore index e4f0302..e3387f4 100644 --- a/.gitignore +++ b/.gitignore @@ -80,7 +80,6 @@ typings/ # Nuxt.js build / generate output .nuxt -dist # Gatsby files .cache/ diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..4d71948 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,12 @@ +{ + "extends": [ + "stylelint-config-standard", + "stylelint-config-prettier" + ], + "ignorePath": [ + "dist/**" + ], + "rules": { + "custom-property-pattern": null + } +} \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock index 2a020cf..6088588 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -211,6 +211,8 @@ GEM jekyll-feed (~> 0.9) jekyll-seo-tag (~> 2.1) minitest (5.16.3) + nokogiri (1.13.10-arm64-darwin) + racc (~> 1.4) nokogiri (1.13.10-x86_64-linux) racc (~> 1.4) octokit (4.25.1) @@ -253,6 +255,8 @@ GEM zeitwerk (2.6.0) PLATFORMS + arm64-darwin-21 + arm64-darwin-22 x86_64-linux DEPENDENCIES diff --git a/dist/chota.css b/dist/chota.css index c63b7c8..cfe97a6 100644 --- a/dist/chota.css +++ b/dist/chota.css @@ -1,8 +1,8 @@ /*! chota.css v0.8.1 | MIT License | github.com/jenil/chota */ :root { - --bg-color: #ffffff; + --bg-color: #fff; --bg-secondary-color: #f3f3f6; - --color-primary: #14854F; + --color-primary: #14854f; --color-lightGrey: #d2d6dd; --color-grey: #747681; --color-darkGrey: #3f4144; @@ -11,10 +11,10 @@ --grid-maxWidth: 120rem; --grid-gutter: 2rem; --font-size: 1.6rem; - --font-color: #333333; - --font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", - "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", - "Droid Sans", "Helvetica Neue", sans-serif; + --font-color: #333; + --font-family-sans: -apple-system, "BlinkMacSystemFont", "Avenir", + "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", + "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-family-mono: monaco, "Consolas", "Lucida Console", monospace; } html { @@ -22,10 +22,14 @@ html { box-sizing: border-box; font-size: 62.5%; line-height: 1.15; - -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + text-size-adjust: 100%; } -*, *:before, *:after { +*, +*::before, +*::after { -webkit-box-sizing: inherit; box-sizing: inherit; } @@ -47,7 +51,7 @@ body { line-height: 1.6; font-size: var(--font-size); color: var(--font-color); - font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/ + font-family: "Segoe UI", "Helvetica Neue", sans-serif; /* fallback */ font-family: var(--font-family-sans); margin: 0; padding: 0; @@ -59,7 +63,7 @@ h4, h5, h6 { font-weight: 500; - margin: 0.35em 0 0.7em 0; + margin: 0.35em 0 0.7em; } h1 { font-size: 2em; @@ -136,7 +140,6 @@ tt { } code, kbd { - padding: 0 0.4rem; font-size: 90%; white-space: pre-wrap; border-radius: 4px; @@ -170,296 +173,296 @@ iframe { border: 0; } .container { - max-width: var(--grid-maxWidth); - margin: 0 auto; - width: 96%; - padding: 0 calc(var(--grid-gutter) / 2); + max-width: var(--grid-maxWidth); + margin: 0 auto; + width: 96%; + padding: 0 calc(var(--grid-gutter) / 2); } .row { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -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); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -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); } .row.reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } .col { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } .col, [class*=" col-"], -[class^='col-'] { - margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2); +[class^="col-"] { + margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2); } .col-1 { + -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 { + -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 { + -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 { + -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 { + -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 { + -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 { + -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 { + -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 { + -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 { + -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 { + -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 { + -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: 599px) { + .container { + width: 100%; + } + + .col, + [class*="col-"], + [class^="col-"] { + -webkit-box-flex: 0; + -ms-flex: 0 1 100%; + flex: 0 1 100%; + max-width: 100%; + } +} +@media screen and (min-width: 900px) { + .col-1-md { -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 { + } + + .col-2-md { -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 { + } + + .col-3-md { -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 { + } + + .col-4-md { -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 { + } + + .col-5-md { -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 { + } + + .col-6-md { -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 { + } + + .col-7-md { -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 { + } + + .col-8-md { -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 { + } + + .col-9-md { -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 { + } + + .col-10-md { -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 { + } + + .col-11-md { -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 { + } + + .col-12-md { -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: 599px) { - .container { - width: 100%; - } - - .col, - [class*="col-"], - [class^='col-'] { - -webkit-box-flex: 0; - -ms-flex: 0 1 100%; - flex: 0 1 100%; - max-width: 100%; - } -} -@media screen and (min-width: 900px) { - .col-1-md { - -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-md { - -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-md { - -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-md { - -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-md { - -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-md { - -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-md { - -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-md { - -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-md { - -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-md { - -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-md { - -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-md { - -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 (min-width: 1200px) { - .col-1-lg { - -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-1-lg { + -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-lg { - -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-2-lg { + -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-lg { - -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-3-lg { + -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-lg { - -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-4-lg { + -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-lg { - -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-5-lg { + -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-lg { - -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-6-lg { + -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-lg { - -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-7-lg { + -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-lg { - -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-8-lg { + -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-lg { - -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-9-lg { + -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-lg { - -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-10-lg { + -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-lg { - -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-11-lg { + -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-lg { - -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)); - } + .col-12-lg { + -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)); + } } fieldset { padding: 0.5rem 2rem; @@ -469,7 +472,7 @@ legend { font-size: 0.8em; letter-spacing: 0.1rem; } -input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]), +input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]), select, textarea, textarea[type="text"] { @@ -483,42 +486,15 @@ textarea[type="text"] { display: block; 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 { - outline: none; - 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; + -moz-appearance: none; + appearance: none; background: #f3f3f6 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; -} -/* BUTTONS */ .button, [type="button"], [type="reset"], @@ -540,27 +516,16 @@ button { display: inline-block; cursor: pointer; } -.grouped { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} -.grouped > *:not(:last-child) { - margin-right: 16px; -} -.grouped.gapless > * { - margin: 0 0 0 -1px !important; - border-radius:0 !important; -} -.grouped.gapless > *:first-child { - margin: 0 !important; - border-radius:4px 0 0 4px !important; -} -.grouped.gapless > *:last-child { - border-radius:0 4px 4px 0 !important; -} -.button + .button { - margin-left: 1rem; +.button.primary, +.button.secondary, +.button.dark, +.button.error, +.button.success, +[type="submit"] { + color: #fff; + z-index: 1; /* hightlight from other button's border when grouped */ + background-color: #000; + background-color: var(--color-primary); } .button:hover, [type="button"]:hover, @@ -578,22 +543,62 @@ button:active { transform: scale(0.98); } input:disabled, -button:disabled, input:disabled:hover, +button:disabled, button:disabled:hover { opacity: 0.4; cursor: not-allowed; } -.button.primary, -.button.secondary, -.button.dark, -.button.error, -.button.success, -[type="submit"] { - color: #fff; - z-index: 1; /* hightlight from other button's border when grouped */ - background-color: #000; - background-color: var(--color-primary); +.grouped { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.grouped > *:not(:last-child) { + margin-right: 16px; +} +.grouped.gapless > * { + margin: 0 0 0 -1px !important; + border-radius: 0 !important; +} +.grouped.gapless > *:first-child { + margin: 0 !important; + border-radius: 4px 0 0 4px !important; +} +.grouped.gapless > *:last-child { + border-radius: 0 4px 4px 0 !important; +} +input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"], :disabled):hover, +select:hover, +textarea:hover, +textarea[type="text"]:hover { + border-color: var(--color-grey); +} +input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]):focus, +select:focus, +textarea:focus, +textarea[type="text"]:focus { + outline: none; + 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"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]), +textarea.error { + border-color: var(--color-error); +} +input.success:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]), +textarea.success { + border-color: var(--color-success); +} +[type="checkbox"], +[type="radio"] { + width: 1.6rem; + height: 1.6rem; +} +/* BUTTONS */ +.button + .button { + margin-left: 1rem; } .button.secondary { background-color: var(--color-grey); @@ -658,92 +663,93 @@ button:disabled:hover { color: #bdbfc4; } .nav { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - min-height: 5rem; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height: 5rem; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; } .nav img { - max-height: 3rem; + max-height: 3rem; } -.nav>.container { - display: -webkit-box; - display: -ms-flexbox; - display: flex; +.nav > .container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } .nav-center, .nav-left, .nav-right { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } .nav-left { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } .nav-right { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } .nav-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +@media screen and (max-width: 480px) { + .nav, + .nav > .container { + -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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -} -@media screen and (max-width: 480px) { - .nav, - .nav>.container { - -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; - -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; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 1rem 2rem; - color: var(--color-darkGrey); + text-decoration: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 1rem 2rem; + color: var(--color-darkGrey); } .nav [aria-current="page"]:not(.button), .nav .active:not(.button) { - color: #000; /* fallback */ - color: var(--color-primary); + color: #000; /* fallback */ + color: var(--color-primary); } .nav .brand { - font-size: 1.75em; - padding-top: 0; - padding-bottom: 0; + font-size: 1.75em; + padding-top: 0; + padding-bottom: 0; } .nav .brand img { - padding-right: 1rem; + padding-right: 1rem; } .nav .button { - margin: auto 1rem; + margin: auto 1rem; } .card { padding: 1rem 2rem; @@ -760,37 +766,37 @@ button:disabled:hover { margin-bottom: 1rem; } .tabs { - display: -webkit-box; - display: -ms-flexbox; - display: flex; + display: -webkit-box; + display: -ms-flexbox; + display: flex; } .tabs a { - text-decoration: none; + text-decoration: none; } .tabs > .dropdown > summary, .tabs > a { - padding: 1rem 2rem; - -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; + padding: 1rem 2rem; + -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[aria-current="page"], .tabs > a.active, .tabs > a:hover { - opacity: 1; - border-bottom: 2px solid var(--color-darkGrey); + opacity: 1; + border-bottom: 2px solid var(--color-darkGrey); } .tabs > a[aria-current="page"], .tabs > a.active { - border-color: var(--color-primary); + border-color: var(--color-primary); } .tabs.is-full a { - -webkit-box-flex: 1; - -ms-flex: 1 1 auto; - flex: 1 1 auto; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } .tag { display: inline-block; @@ -809,7 +815,7 @@ button:disabled:hover { padding: 0.7rem; font-size: 1.125em; } -.tag+.tag { +.tag + .tag { margin-left: 1rem; } details.dropdown { @@ -823,192 +829,192 @@ details.dropdown > :last-child { } /* Colors */ .bg-primary { - background-color: var(--color-primary) !important; + background-color: var(--color-primary) !important; } .bg-light { - background-color: var(--color-lightGrey) !important; + background-color: var(--color-lightGrey) !important; } .bg-dark { - background-color: var(--color-darkGrey) !important; + background-color: var(--color-darkGrey) !important; } .bg-grey { - background-color: var(--color-grey) !important; + background-color: var(--color-grey) !important; } .bg-error { - background-color: var(--color-error) !important; + background-color: var(--color-error) !important; } .bg-success { - background-color: var(--color-success) !important; + background-color: var(--color-success) !important; } .bd-primary { - border: 1px solid var(--color-primary) !important; + border: 1px solid var(--color-primary) !important; } .bd-light { - border: 1px solid var(--color-lightGrey) !important; + border: 1px solid var(--color-lightGrey) !important; } .bd-dark { - border: 1px solid var(--color-darkGrey) !important; + border: 1px solid var(--color-darkGrey) !important; } .bd-grey { - border: 1px solid var(--color-grey) !important; + border: 1px solid var(--color-grey) !important; } .bd-error { - border: 1px solid var(--color-error) !important; + border: 1px solid var(--color-error) !important; } .bd-success { - border: 1px solid var(--color-success) !important; + border: 1px solid var(--color-success) !important; } .text-primary { - color: var(--color-primary) !important; + color: var(--color-primary) !important; } .text-light { - color: var(--color-lightGrey) !important; + color: var(--color-lightGrey) !important; } .text-dark { - color: var(--color-darkGrey) !important; + color: var(--color-darkGrey) !important; } .text-grey { - color: var(--color-grey) !important; + color: var(--color-grey) !important; } .text-error { - color: var(--color-error) !important; + color: var(--color-error) !important; } .text-success { - color: var(--color-success) !important; + color: var(--color-success) !important; } .text-white { - color: #fff !important; + color: #fff !important; } /* Position & alignment */ .pull-right { - float: right !important; + float: right !important; } .pull-left { - float: left !important; + float: left !important; } .text-center { - text-align: center; + text-align: center; } .text-left { - text-align: left; + text-align: left; } .text-right { - text-align: right; + text-align: right; } .text-justify { - text-align: justify; + text-align: justify; } .text-uppercase { - text-transform: uppercase; + text-transform: uppercase; } .text-lowercase { - text-transform: lowercase; + text-transform: lowercase; } .text-capitalize { - text-transform: capitalize; + text-transform: capitalize; } .is-full-screen { - width: 100%; - min-height: 100vh; + width: 100%; + min-height: 100vh; } .is-full-width { - width: 100% !important; + width: 100% !important; } .is-vertical-align { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } .is-horizontal-align { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } .is-center { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -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; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -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; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -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; - width: 100%; + position: fixed; + width: 100%; } .is-paddingless { - padding: 0 !important; + padding: 0 !important; } .is-marginless { - margin: 0 !important; + margin: 0 !important; } .is-pointer { - cursor: pointer !important; + cursor: pointer !important; } .is-rounded { - border-radius: 100%; + border-radius: 100%; } .clearfix { - content: ""; - display: table; - clear: both; + content: ""; + display: table; + clear: both; } .is-hidden { - display: none !important; + display: none !important; } @media screen and (max-width: 599px) { - .hide-xs { - display: none !important; - } + .hide-xs { + display: none !important; + } } @media screen and (min-width: 600px) and (max-width: 899px) { - .hide-sm { - display: none !important; - } + .hide-sm { + display: none !important; + } } @media screen and (min-width: 900px) and (max-width: 1199px) { - .hide-md { - display: none !important; - } + .hide-md { + display: none !important; + } } @media screen and (min-width: 1200px) { - .hide-lg { - display: none !important; - } + .hide-lg { + display: none !important; + } } @media print { - .hide-pr { - display: none !important; - } + .hide-pr { + display: none !important; + } } diff --git a/dist/chota.min.css b/dist/chota.min.css index 559bed8..5763411 100644 --- a/dist/chota.min.css +++ b/dist/chota.min.css @@ -1 +1 @@ -/*! chota.css v0.8.1 | MIT License | github.com/jenil/chota */:root{--bg-color:#fff;--bg-secondary-color:#f3f3f6;--color-primary:#14854f;--color-lightGrey:#d2d6dd;--color-grey:#747681;--color-darkGrey:#3f4144;--color-error:#d43939;--color-success:#28bd14;--grid-maxWidth:120rem;--grid-gutter:2rem;--font-size:1.6rem;--font-color:#333;--font-family-sans:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-family-mono:monaco,"Consolas","Lucida Console",monospace}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:62.5%;line-height:1.15}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}*{scrollbar-color:var(--color-lightGrey) var(--bg-primary);scrollbar-width:thin}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--color-lightGrey)}body{background-color:var(--bg-color);color:var(--font-color);font-family:Segoe UI,Helvetica Neue,sans-serif;font-family:var(--font-family-sans);font-size:var(--font-size);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}button{font-family:inherit}p{margin-top:0}blockquote{background-color:var(--bg-secondary-color);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:var(--bg-secondary-color)}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:var(--font-family-mono)}code,kbd{border-radius:4px;color:var(--color-error);font-size:90%;padding:.2em .4em;white-space:pre-wrap}code,kbd,pre{background-color:var(--bg-secondary-color)}pre{font-size:1em;overflow-x:auto;padding:1rem}pre code{background:none;padding:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;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{-webkit-box-direction:normal;-webkit-box-pack:start;-ms-flex-pack:start;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;justify-content:flex-start;margin-left:calc(var(--grid-gutter)/-2);margin-right:calc(var(--grid-gutter)/-2)}.row,.row.reverse{-webkit-box-orient:horizontal}.row.reverse{-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col{-webkit-box-flex:1;-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(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-10,.col-9{-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:599px){.container{width:100%}.col,[class*=col-],[class^=col-]{-webkit-box-flex:0;-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}}@media screen and (min-width:900px){.col-1-md{-webkit-box-flex:0;-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-2-md{-webkit-box-flex:0;-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-md{-webkit-box-flex:0;-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-4-md{-webkit-box-flex:0;-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-md{-webkit-box-flex:0;-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-6-md{-webkit-box-flex:0;-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-md{-webkit-box-flex:0;-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-8-md{-webkit-box-flex:0;-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-md{-webkit-box-flex:0;-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-10-md{-webkit-box-flex:0;-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-md{-webkit-box-flex:0;-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-12-md{-webkit-box-flex:0;-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 (min-width:1200px){.col-1-lg{-webkit-box-flex:0;-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-2-lg{-webkit-box-flex:0;-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-lg{-webkit-box-flex:0;-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-4-lg{-webkit-box-flex:0;-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-lg{-webkit-box-flex:0;-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-6-lg{-webkit-box-flex:0;-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-lg{-webkit-box-flex:0;-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-8-lg{-webkit-box-flex:0;-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-lg{-webkit-box-flex:0;-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-10-lg{-webkit-box-flex:0;-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-lg{-webkit-box-flex:0;-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-12-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(100% - var(--grid-gutter));flex:0 0 calc(100% - var(--grid-gutter));max-width:calc(100% - var(--grid-gutter))}}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]{border:1px solid var(--color-lightGrey);border-radius:4px;display:block;font-family:inherit;font-size:1em;padding:.8rem 1rem;-webkit-transition:all .2s ease;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{border-color:var(--color-primary);-webkit-box-shadow:0 0 1px 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{background:var(--color-lightGrey);border:1px solid transparent;border-radius:4px;color:var(--color-darkGrey);cursor:pointer;display:inline-block;font-size:var(--font-size);line-height:1;padding:1rem 2.5rem;text-align:center;text-decoration:none;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.grouped{display:-webkit-box;display:-ms-flexbox;display:flex}.grouped>:not(:last-child){margin-right:16px}.grouped.gapless>*{border-radius:0!important;margin:0 0 0 -1px!important}.grouped.gapless>:first-child{border-radius:4px 0 0 4px!important;margin:0!important}.grouped.gapless>:last-child{border-radius:0 4px 4px 0!important}.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;z-index:1}.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-color: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{-webkit-box-align:center;-ms-flex-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}::-moz-placeholder{color:#bdbfc4}:-ms-input-placeholder{color:#bdbfc4}::-ms-input-placeholder{color:#bdbfc4}::placeholder{color:#bdbfc4}.nav{-webkit-box-align:stretch;-ms-flex-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{-webkit-box-flex:1;-ms-flex:1;flex:1}.nav-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.nav-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.nav-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (max-width:480px){.nav,.nav>.container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nav-center,.nav-left,.nav-right{-webkit-box-pack:center;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center}}.nav .brand,.nav a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-darkGrey);display:-webkit-box;display:-ms-flexbox;display:flex;padding:1rem 2rem;text-decoration:none}.nav .active:not(.button),.nav [aria-current=page]: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{background:var(--bg-color);border-radius:4px;-webkit-box-shadow:0 1px 3px var(--color-grey);box-shadow:0 1px 3px var(--color-grey);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>.dropdown>summary,.tabs>a{-webkit-box-flex:0;border-bottom:2px solid var(--color-lightGrey);color:var(--color-darkGrey);-ms-flex:0 1 auto;flex:0 1 auto;padding:1rem 2rem;text-align:center}.tabs>a.active,.tabs>a:hover,.tabs>a[aria-current=page]{border-bottom:2px solid var(--color-darkGrey);opacity:1}.tabs>a.active,.tabs>a[aria-current=page]{border-color:var(--color-primary)}.tabs.is-full a{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.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}details.dropdown{display:inline-block;position:relative}details.dropdown>:last-child{left:0;position:absolute;white-space:nowrap}.bg-primary{background-color:var(--color-primary)!important}.bg-light{background-color:var(--color-lightGrey)!important}.bg-dark{background-color:var(--color-darkGrey)!important}.bg-grey{background-color:var(--color-grey)!important}.bg-error{background-color:var(--color-error)!important}.bg-success{background-color:var(--color-success)!important}.bd-primary{border:1px solid var(--color-primary)!important}.bd-light{border:1px solid var(--color-lightGrey)!important}.bd-dark{border:1px solid var(--color-darkGrey)!important}.bd-grey{border:1px solid var(--color-grey)!important}.bd-error{border:1px solid var(--color-error)!important}.bd-success{border:1px solid var(--color-success)!important}.text-primary{color:var(--color-primary)!important}.text-light{color:var(--color-lightGrey)!important}.text-dark{color:var(--color-darkGrey)!important}.text-grey{color:var(--color-grey)!important}.text-error{color:var(--color-error)!important}.text-success{color:var(--color-success)!important}.text-white{color:#fff!important}.pull-right{float:right!important}.pull-left{float:left!important}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.is-full-screen{min-height:100vh;width:100%}.is-full-width{width:100%!important}.is-vertical-align{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.is-center,.is-horizontal-align{-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.is-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.is-left,.is-right{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.is-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.is-fixed{position:fixed;width:100%}.is-paddingless{padding:0!important}.is-marginless{margin:0!important}.is-pointer{cursor:pointer!important}.is-rounded{border-radius:100%}.clearfix{clear:both;content:"";display:table}.is-hidden{display:none!important}@media screen and (max-width:599px){.hide-xs{display:none!important}}@media screen and (min-width:600px) and (max-width:899px){.hide-sm{display:none!important}}@media screen and (min-width:900px) and (max-width:1199px){.hide-md{display:none!important}}@media screen and (min-width:1200px){.hide-lg{display:none!important}}@media print{.hide-pr{display:none!important}} \ No newline at end of file +/*! chota.css v0.8.1 | MIT License | github.com/jenil/chota */:root{--bg-color:#fff;--bg-secondary-color:#f3f3f6;--color-primary:#14854f;--color-lightGrey:#d2d6dd;--color-grey:#747681;--color-darkGrey:#3f4144;--color-error:#d43939;--color-success:#28bd14;--grid-maxWidth:120rem;--grid-gutter:2rem;--font-size:1.6rem;--font-color:#333;--font-family-sans:-apple-system,"BlinkMacSystemFont","Avenir","Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-family-mono:monaco,"Consolas","Lucida Console",monospace}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:62.5%;line-height:1.15}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}*{scrollbar-color:var(--color-lightGrey) var(--bg-primary);scrollbar-width:thin}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--color-lightGrey)}body{background-color:var(--bg-color);color:var(--font-color);font-family:Segoe UI,Helvetica Neue,sans-serif;font-family:var(--font-family-sans);font-size:var(--font-size);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}button{font-family:inherit}p{margin-top:0}blockquote{background-color:var(--bg-secondary-color);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:var(--bg-secondary-color)}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:var(--font-family-mono)}code,kbd{border-radius:4px;color:var(--color-error);font-size:90%;padding:.2em .4em;white-space:pre-wrap}code,kbd,pre{background-color:var(--bg-secondary-color)}pre{font-size:1em;overflow-x:auto;padding:1rem}pre code{background:none;padding:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;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{-webkit-box-direction:normal;-webkit-box-pack:start;-ms-flex-pack:start;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;justify-content:flex-start;margin-left:calc(var(--grid-gutter)/-2);margin-right:calc(var(--grid-gutter)/-2)}.row,.row.reverse{-webkit-box-orient:horizontal}.row.reverse{-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col{-webkit-box-flex:1;-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(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-10,.col-9{-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:599px){.container{width:100%}.col,[class*=col-],[class^=col-]{-webkit-box-flex:0;-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}}@media screen and (min-width:900px){.col-1-md{-webkit-box-flex:0;-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-2-md{-webkit-box-flex:0;-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-md{-webkit-box-flex:0;-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-4-md{-webkit-box-flex:0;-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-md{-webkit-box-flex:0;-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-6-md{-webkit-box-flex:0;-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-md{-webkit-box-flex:0;-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-8-md{-webkit-box-flex:0;-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-md{-webkit-box-flex:0;-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-10-md{-webkit-box-flex:0;-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-md{-webkit-box-flex:0;-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-12-md{-webkit-box-flex:0;-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 (min-width:1200px){.col-1-lg{-webkit-box-flex:0;-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-2-lg{-webkit-box-flex:0;-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-lg{-webkit-box-flex:0;-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-4-lg{-webkit-box-flex:0;-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-lg{-webkit-box-flex:0;-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-6-lg{-webkit-box-flex:0;-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-lg{-webkit-box-flex:0;-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-8-lg{-webkit-box-flex:0;-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-lg{-webkit-box-flex:0;-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-10-lg{-webkit-box-flex:0;-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-lg{-webkit-box-flex:0;-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-12-lg{-webkit-box-flex:0;-ms-flex:0 0 calc(100% - var(--grid-gutter));flex:0 0 calc(100% - var(--grid-gutter));max-width:calc(100% - var(--grid-gutter))}}fieldset{padding:.5rem 2rem}legend{font-size:.8em;letter-spacing:.1rem;text-transform:uppercase}input:not([type=checkbox],[type=radio],[type=submit],[type=color],[type=button],[type=reset]),select,textarea,textarea[type=text]{border:1px solid var(--color-lightGrey);border-radius:4px;display:block;font-family:inherit;font-size:1em;padding:.8rem 1rem;-webkit-transition:all .2s ease;transition:all .2s ease;width:100%}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f3f3f6 no-repeat 100%;background-image:url("data:image/svg+xml;utf8,");background-origin:content-box;background-size:1ex}.button,[type=button],[type=reset],[type=submit],button{background:var(--color-lightGrey);border:1px solid transparent;border-radius:4px;color:var(--color-darkGrey);cursor:pointer;display:inline-block;font-size:var(--font-size);line-height:1;padding:1rem 2.5rem;text-align:center;text-decoration:none;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.button.dark,.button.error,.button.primary,.button.secondary,.button.success,[type=submit]{background-color:#000;background-color:var(--color-primary);color:#fff;z-index:1}.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}.grouped{display:-webkit-box;display:-ms-flexbox;display:flex}.grouped>:not(:last-child){margin-right:16px}.grouped.gapless>*{border-radius:0!important;margin:0 0 0 -1px!important}.grouped.gapless>:first-child{border-radius:4px 0 0 4px!important;margin:0!important}.grouped.gapless>:last-child{border-radius:0 4px 4px 0!important}input:not([type=checkbox],[type=radio],[type=submit],[type=color],[type=button],[type=reset],:disabled):hover,select:hover,textarea:hover,textarea[type=text]:hover{border-color:var(--color-grey)}input:not([type=checkbox],[type=radio],[type=submit],[type=color],[type=button],[type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{border-color:var(--color-primary);-webkit-box-shadow:0 0 1px var(--color-primary);box-shadow:0 0 1px var(--color-primary);outline:none}input.error:not([type=checkbox],[type=radio],[type=submit],[type=color],[type=button],[type=reset]),textarea.error{border-color:var(--color-error)}input.success:not([type=checkbox],[type=radio],[type=submit],[type=color],[type=button],[type=reset]),textarea.success{border-color:var(--color-success)}[type=checkbox],[type=radio]{height:1.6rem;width:1.6rem}.button+.button{margin-left:1rem}.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-color: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{-webkit-box-align:center;-ms-flex-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}::-moz-placeholder{color:#bdbfc4}:-ms-input-placeholder{color:#bdbfc4}::-ms-input-placeholder{color:#bdbfc4}::placeholder{color:#bdbfc4}.nav{-webkit-box-align:stretch;-ms-flex-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{-webkit-box-flex:1;-ms-flex:1;flex:1}.nav-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.nav-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.nav-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (max-width:480px){.nav,.nav>.container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nav-center,.nav-left,.nav-right{-webkit-box-pack:center;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center}}.nav .brand,.nav a{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-darkGrey);display:-webkit-box;display:-ms-flexbox;display:flex;padding:1rem 2rem;text-decoration:none}.nav .active:not(.button),.nav [aria-current=page]: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{background:var(--bg-color);border-radius:4px;-webkit-box-shadow:0 1px 3px var(--color-grey);box-shadow:0 1px 3px var(--color-grey);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>.dropdown>summary,.tabs>a{-webkit-box-flex:0;border-bottom:2px solid var(--color-lightGrey);color:var(--color-darkGrey);-ms-flex:0 1 auto;flex:0 1 auto;padding:1rem 2rem;text-align:center}.tabs>a.active,.tabs>a:hover,.tabs>a[aria-current=page]{border-bottom:2px solid var(--color-darkGrey);opacity:1}.tabs>a.active,.tabs>a[aria-current=page]{border-color:var(--color-primary)}.tabs.is-full a{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.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}details.dropdown{display:inline-block;position:relative}details.dropdown>:last-child{left:0;position:absolute;white-space:nowrap}.bg-primary{background-color:var(--color-primary)!important}.bg-light{background-color:var(--color-lightGrey)!important}.bg-dark{background-color:var(--color-darkGrey)!important}.bg-grey{background-color:var(--color-grey)!important}.bg-error{background-color:var(--color-error)!important}.bg-success{background-color:var(--color-success)!important}.bd-primary{border:1px solid var(--color-primary)!important}.bd-light{border:1px solid var(--color-lightGrey)!important}.bd-dark{border:1px solid var(--color-darkGrey)!important}.bd-grey{border:1px solid var(--color-grey)!important}.bd-error{border:1px solid var(--color-error)!important}.bd-success{border:1px solid var(--color-success)!important}.text-primary{color:var(--color-primary)!important}.text-light{color:var(--color-lightGrey)!important}.text-dark{color:var(--color-darkGrey)!important}.text-grey{color:var(--color-grey)!important}.text-error{color:var(--color-error)!important}.text-success{color:var(--color-success)!important}.text-white{color:#fff!important}.pull-right{float:right!important}.pull-left{float:left!important}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.is-full-screen{min-height:100vh;width:100%}.is-full-width{width:100%!important}.is-vertical-align{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.is-center,.is-horizontal-align{-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center}.is-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.is-left,.is-right{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.is-left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.is-fixed{position:fixed;width:100%}.is-paddingless{padding:0!important}.is-marginless{margin:0!important}.is-pointer{cursor:pointer!important}.is-rounded{border-radius:100%}.clearfix{clear:both;content:"";display:table}.is-hidden{display:none!important}@media screen and (max-width:599px){.hide-xs{display:none!important}}@media screen and (min-width:600px) and (max-width:899px){.hide-sm{display:none!important}}@media screen and (min-width:900px) and (max-width:1199px){.hide-md{display:none!important}}@media screen and (min-width:1200px){.hide-lg{display:none!important}}@media print{.hide-pr{display:none!important}} \ No newline at end of file diff --git a/docs/doc-styles.css b/docs/doc-styles.css index 141c293..b26973e 100644 --- a/docs/doc-styles.css +++ b/docs/doc-styles.css @@ -1,3 +1,6 @@ +/* stylelint-disable color-function-notation */ +/* stylelint-disable length-zero-no-unit */ +/* stylelint-disable property-no-vendor-prefix */ body.dark { --bg-color: #000; --bg-secondary-color: #262626; @@ -60,21 +63,21 @@ hr { margin: 3rem 0; } +body.dark .card { + box-shadow: 0 1px 3px var(--color-darkGrey); +} + #grid .card { padding: 1rem 0rem; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; - background-color: rgba(26, 159, 96, 0.2); + background-color: rgba(26, 159, 96, 20%); font-size: 1.2rem; } body.dark #grid .card { - background-color: rgba(26, 159, 96, 0.4); -} - -body.dark .card { - box-shadow: 0 1px 3px var(--color-darkGrey); + background-color: rgba(26, 159, 96, 40%); } .buttons { @@ -95,6 +98,7 @@ body.dark .card { code { background-color: var(--bg-secondary-color); } + .highlight .c { color: #93a1a1; } /* Comment */ diff --git a/package.json b/package.json index f9bbd66..75287cb 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,8 @@ "main": "dist/chota.min.css", "scripts": { "start": "run-p docs watch", - "docs": "jekyll s -s docs", - "build": "rimraf dist/* && yarn postcss && cross-env NODE_ENV=production yarn postcss --ext .min.css && gzip -c dist/chota.min.css | wc -c | xargs echo 'Size:'", + "docs": "bundle exec jekyll s -s docs", + "build": "rimraf dist/* && stylelint src/*.css --fix && yarn postcss && cross-env NODE_ENV=production yarn postcss --ext .min.css && gzip -c dist/chota.min.css | wc -c | xargs echo 'Size:'", "postcss": "postcss ./src/chota.css -d dist/", "watch": "cross-env NODE_ENV=development yarn postcss -w", "test": "echo \"Error: no test specified\" && exit 1", @@ -28,15 +28,20 @@ "url": "https://github.com/jenil/chota/issues" }, "devDependencies": { - "autoprefixer": "^10.4.8", - "cross-env": "^7.0.2", - "cssnano": "^5.1.13", - "npm-run-all": "^4.1.5", - "postcss": "^8.4.16", - "postcss-cli": "^10.0.0", - "postcss-csso": "^6.0.1", - "postcss-import": "^15.0.0", - "rimraf": "^3.0.0" + "autoprefixer": "10.4.8", + "cross-env": "7.0.2", + "cssnano": "5.1.13", + "npm-run-all": "4.1.5", + "postcss": "8.4.16", + "postcss-cli": "10.0.0", + "postcss-csso": "6.0.1", + "postcss-import": "15.0.0", + "postcss-reporter": "7.0.5", + "prettier": "2.7.1", + "rimraf": "3.0.0", + "stylelint": "14.11.0", + "stylelint-config-prettier": "9.0.3", + "stylelint-config-standard": "28.0.0" }, "files": [ "src/", @@ -45,5 +50,8 @@ ], "browserslist": [ "last 2 versions" - ] + ], + "prettier": { + "tabWidth": 2 + } } diff --git a/postcss.config.js b/postcss.config.js index 7a05528..a7bfca4 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,16 +1,19 @@ let plugins = [ - require("postcss-import"), - require("autoprefixer")() + require("postcss-import")({ + plugins: [require("stylelint")({ fix: true, formatter: "compact" })], + }), + require("autoprefixer")(), + require("postcss-reporter")({ clearReportedMessages: true }), ]; // if (process.env.NODE_ENV == 'production') plugins.push(require("postcss-csso")) if (process.env.NODE_ENV == "production") plugins.push( require("cssnano")({ - preset: "default" + preset: "default", }) ); module.exports = { - plugins + plugins, }; diff --git a/src/_base.css b/src/_base.css index 6cbf7c0..8b80f26 100644 --- a/src/_base.css +++ b/src/_base.css @@ -1,7 +1,7 @@ :root { - --bg-color: #ffffff; + --bg-color: #fff; --bg-secondary-color: #f3f3f6; - --color-primary: #14854F; + --color-primary: #14854f; --color-lightGrey: #d2d6dd; --color-grey: #747681; --color-darkGrey: #3f4144; @@ -10,10 +10,10 @@ --grid-maxWidth: 120rem; --grid-gutter: 2rem; --font-size: 1.6rem; - --font-color: #333333; - --font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", - "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", - "Droid Sans", "Helvetica Neue", sans-serif; + --font-color: #333; + --font-family-sans: -apple-system, "BlinkMacSystemFont", "Avenir", + "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", + "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-family-mono: monaco, "Consolas", "Lucida Console", monospace; } @@ -21,11 +21,12 @@ html { box-sizing: border-box; font-size: 62.5%; line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; } -*, *:before, *:after { +*, +*::before, +*::after { box-sizing: inherit; } @@ -51,7 +52,7 @@ body { line-height: 1.6; font-size: var(--font-size); color: var(--font-color); - font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/ + font-family: "Segoe UI", "Helvetica Neue", sans-serif; /* fallback */ font-family: var(--font-family-sans); margin: 0; padding: 0; @@ -64,7 +65,7 @@ h4, h5, h6 { font-weight: 500; - margin: 0.35em 0 0.7em 0; + margin: 0.35em 0 0.7em; } h1 { @@ -161,7 +162,6 @@ tt { code, kbd { - padding: 0 0.4rem; font-size: 90%; white-space: pre-wrap; border-radius: 4px; diff --git a/src/_form.css b/src/_form.css index d4e44ba..0c37dda 100644 --- a/src/_form.css +++ b/src/_form.css @@ -8,7 +8,7 @@ legend { letter-spacing: 0.1rem; } -input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]), +input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]), select, textarea, textarea[type="text"] { @@ -22,47 +22,14 @@ textarea[type="text"] { 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 { - outline: none; - 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; + appearance: none; background: #f3f3f6 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; -} - -/* BUTTONS */ .button, [type="button"], [type="reset"], @@ -83,29 +50,16 @@ button { cursor: pointer; } -.grouped { - display: flex; -} - -.grouped > *:not(:last-child) { - margin-right: 16px; -} - -.grouped.gapless > * { - margin: 0 0 0 -1px !important; - border-radius:0 !important; -} -.grouped.gapless > *:first-child { - margin: 0 !important; - border-radius:4px 0 0 4px !important; -} - -.grouped.gapless > *:last-child { - border-radius:0 4px 4px 0 !important; -} - -.button + .button { - margin-left: 1rem; +.button.primary, +.button.secondary, +.button.dark, +.button.error, +.button.success, +[type="submit"] { + color: #fff; + z-index: 1; /* hightlight from other button's border when grouped */ + background-color: #000; + background-color: var(--color-primary); } .button:hover, @@ -125,23 +79,71 @@ button:active { } input:disabled, -button:disabled, input:disabled:hover, +button:disabled, button:disabled:hover { opacity: 0.4; cursor: not-allowed; } -.button.primary, -.button.secondary, -.button.dark, -.button.error, -.button.success, -[type="submit"] { - color: #fff; - z-index: 1; /* hightlight from other button's border when grouped */ - background-color: #000; - background-color: var(--color-primary); +.grouped { + display: flex; +} + +.grouped > *:not(:last-child) { + margin-right: 16px; +} + +.grouped.gapless > * { + margin: 0 0 0 -1px !important; + border-radius: 0 !important; +} + +.grouped.gapless > *:first-child { + margin: 0 !important; + border-radius: 4px 0 0 4px !important; +} + +.grouped.gapless > *:last-child { + border-radius: 0 4px 4px 0 !important; +} + +input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"], :disabled):hover, +select:hover, +textarea:hover, +textarea[type="text"]:hover { + border-color: var(--color-grey); +} + +input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]):focus, +select:focus, +textarea:focus, +textarea[type="text"]:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 1px var(--color-primary); +} + +input.error:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]), +textarea.error { + border-color: var(--color-error); +} + +input.success:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]), +textarea.success { + border-color: var(--color-success); +} + +[type="checkbox"], +[type="radio"] { + width: 1.6rem; + height: 1.6rem; +} + +/* BUTTONS */ + +.button + .button { + margin-left: 1rem; } .button.secondary { @@ -194,6 +196,7 @@ button:disabled:hover { .button.icon > img { margin-left: 2px; } + .button.icon-only { padding: 1rem; } diff --git a/src/_grid.css b/src/_grid.css index 99ba164..d683264 100644 --- a/src/_grid.css +++ b/src/_grid.css @@ -1,225 +1,225 @@ .container { - max-width: var(--grid-maxWidth); - margin: 0 auto; - width: 96%; - padding: 0 calc(var(--grid-gutter) / 2); + max-width: var(--grid-maxWidth); + margin: 0 auto; + width: 96%; + padding: 0 calc(var(--grid-gutter) / 2); } .row { - display: flex; - flex-flow: row wrap; - justify-content: flex-start; - margin-left: calc(var(--grid-gutter) / -2); - margin-right: calc(var(--grid-gutter) / -2); + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + margin-left: calc(var(--grid-gutter) / -2); + margin-right: calc(var(--grid-gutter) / -2); } .row.reverse { - flex-direction: row-reverse; + flex-direction: row-reverse; } .col { - flex: 1; + flex: 1; } .col, [class*=" col-"], -[class^='col-'] { - margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2); +[class^="col-"] { + margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2); } .col-1 { - flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); - max-width: 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 { - flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); - max-width: 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 { - flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); - max-width: 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 { - flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); - max-width: 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 { - flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); - max-width: 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 { - flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); - max-width: 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 { - flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); - max-width: 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 { - flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); - max-width: 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 { - flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); - max-width: 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 { - flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); - max-width: 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 { - flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); - max-width: 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 { - flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); - max-width: 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: 599px) { - .container { - width: 100%; - } + .container { + width: 100%; + } - .col, - [class*="col-"], - [class^='col-'] { - flex: 0 1 100%; - max-width: 100%; - } + .col, + [class*="col-"], + [class^="col-"] { + flex: 0 1 100%; + max-width: 100%; + } } @media screen and (min-width: 900px) { - .col-1-md { - flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); - max-width: calc((100% / (12/1)) - var(--grid-gutter)); - } + .col-1-md { + flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); + max-width: calc((100% / (12/1)) - var(--grid-gutter)); + } - .col-2-md { - flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); - max-width: calc((100% / (12/2)) - var(--grid-gutter)); - } + .col-2-md { + flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); + max-width: calc((100% / (12/2)) - var(--grid-gutter)); + } - .col-3-md { - flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); - max-width: calc((100% / (12/3)) - var(--grid-gutter)); - } + .col-3-md { + flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); + max-width: calc((100% / (12/3)) - var(--grid-gutter)); + } - .col-4-md { - flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); - max-width: calc((100% / (12/4)) - var(--grid-gutter)); - } + .col-4-md { + flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); + max-width: calc((100% / (12/4)) - var(--grid-gutter)); + } - .col-5-md { - flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); - max-width: calc((100% / (12/5)) - var(--grid-gutter)); - } + .col-5-md { + flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); + max-width: calc((100% / (12/5)) - var(--grid-gutter)); + } - .col-6-md { - flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); - max-width: calc((100% / (12/6)) - var(--grid-gutter)); - } + .col-6-md { + flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); + max-width: calc((100% / (12/6)) - var(--grid-gutter)); + } - .col-7-md { - flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); - max-width: calc((100% / (12/7)) - var(--grid-gutter)); - } + .col-7-md { + flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); + max-width: calc((100% / (12/7)) - var(--grid-gutter)); + } - .col-8-md { - flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); - max-width: calc((100% / (12/8)) - var(--grid-gutter)); - } + .col-8-md { + flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); + max-width: calc((100% / (12/8)) - var(--grid-gutter)); + } - .col-9-md { - flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); - max-width: calc((100% / (12/9)) - var(--grid-gutter)); - } + .col-9-md { + flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); + max-width: calc((100% / (12/9)) - var(--grid-gutter)); + } - .col-10-md { - flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); - max-width: calc((100% / (12/10)) - var(--grid-gutter)); - } + .col-10-md { + flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); + max-width: calc((100% / (12/10)) - var(--grid-gutter)); + } - .col-11-md { - flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); - max-width: calc((100% / (12/11)) - var(--grid-gutter)); - } + .col-11-md { + flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); + max-width: calc((100% / (12/11)) - var(--grid-gutter)); + } - .col-12-md { - flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); - max-width: calc((100% / (12/12)) - var(--grid-gutter)); - } + .col-12-md { + flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); + max-width: calc((100% / (12/12)) - var(--grid-gutter)); + } } @media screen and (min-width: 1200px) { - .col-1-lg { - flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); - max-width: calc((100% / (12/1)) - var(--grid-gutter)); - } + .col-1-lg { + flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); + max-width: calc((100% / (12/1)) - var(--grid-gutter)); + } - .col-2-lg { - flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); - max-width: calc((100% / (12/2)) - var(--grid-gutter)); - } + .col-2-lg { + flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); + max-width: calc((100% / (12/2)) - var(--grid-gutter)); + } - .col-3-lg { - flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); - max-width: calc((100% / (12/3)) - var(--grid-gutter)); - } + .col-3-lg { + flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); + max-width: calc((100% / (12/3)) - var(--grid-gutter)); + } - .col-4-lg { - flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); - max-width: calc((100% / (12/4)) - var(--grid-gutter)); - } + .col-4-lg { + flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); + max-width: calc((100% / (12/4)) - var(--grid-gutter)); + } - .col-5-lg { - flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); - max-width: calc((100% / (12/5)) - var(--grid-gutter)); - } + .col-5-lg { + flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); + max-width: calc((100% / (12/5)) - var(--grid-gutter)); + } - .col-6-lg { - flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); - max-width: calc((100% / (12/6)) - var(--grid-gutter)); - } + .col-6-lg { + flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); + max-width: calc((100% / (12/6)) - var(--grid-gutter)); + } - .col-7-lg { - flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); - max-width: calc((100% / (12/7)) - var(--grid-gutter)); - } + .col-7-lg { + flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); + max-width: calc((100% / (12/7)) - var(--grid-gutter)); + } - .col-8-lg { - flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); - max-width: calc((100% / (12/8)) - var(--grid-gutter)); - } + .col-8-lg { + flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); + max-width: calc((100% / (12/8)) - var(--grid-gutter)); + } - .col-9-lg { - flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); - max-width: calc((100% / (12/9)) - var(--grid-gutter)); - } + .col-9-lg { + flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); + max-width: calc((100% / (12/9)) - var(--grid-gutter)); + } - .col-10-lg { - flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); - max-width: calc((100% / (12/10)) - var(--grid-gutter)); - } + .col-10-lg { + flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); + max-width: calc((100% / (12/10)) - var(--grid-gutter)); + } - .col-11-lg { - flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); - max-width: calc((100% / (12/11)) - var(--grid-gutter)); - } + .col-11-lg { + flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); + max-width: calc((100% / (12/11)) - var(--grid-gutter)); + } - .col-12-lg { - flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); - max-width: calc((100% / (12/12)) - var(--grid-gutter)); - } -} \ No newline at end of file + .col-12-lg { + flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); + max-width: calc((100% / (12/12)) - var(--grid-gutter)); + } +} diff --git a/src/_nav.css b/src/_nav.css index d7799db..02ee213 100644 --- a/src/_nav.css +++ b/src/_nav.css @@ -1,74 +1,75 @@ .nav { - display: flex; - min-height: 5rem; - align-items: stretch; + display: flex; + min-height: 5rem; + align-items: stretch; } .nav img { - max-height: 3rem; + max-height: 3rem; } -.nav>.container { - display: flex; +.nav > .container { + display: flex; } .nav-center, .nav-left, .nav-right { - display: flex; - flex: 1; + display: flex; + flex: 1; } .nav-left { - justify-content: flex-start; + justify-content: flex-start; } .nav-right { - justify-content: flex-end; + justify-content: flex-end; } .nav-center { - justify-content: center; + justify-content: center; } @media screen and (max-width: 480px) { - .nav, - .nav>.container { - flex-direction: column; - } - .nav-center, - .nav-left, - .nav-right { - flex-wrap: wrap; - justify-content: center; - } + .nav, + .nav > .container { + flex-direction: column; + } + + .nav-center, + .nav-left, + .nav-right { + flex-wrap: wrap; + justify-content: center; + } } .nav a, .nav .brand { - text-decoration: none; - display: flex; - align-items: center; - padding: 1rem 2rem; - color: var(--color-darkGrey); + text-decoration: none; + display: flex; + align-items: center; + padding: 1rem 2rem; + color: var(--color-darkGrey); } .nav [aria-current="page"]:not(.button), .nav .active:not(.button) { - color: #000; /* fallback */ - color: var(--color-primary); + color: #000; /* fallback */ + color: var(--color-primary); } .nav .brand { - font-size: 1.75em; - padding-top: 0; - padding-bottom: 0; + font-size: 1.75em; + padding-top: 0; + padding-bottom: 0; } .nav .brand img { - padding-right: 1rem; + padding-right: 1rem; } .nav .button { - margin: auto 1rem; + margin: auto 1rem; } diff --git a/src/_tab.css b/src/_tab.css index 1b36c77..a7fda4f 100644 --- a/src/_tab.css +++ b/src/_tab.css @@ -1,32 +1,32 @@ .tabs { - display: flex; + display: flex; } .tabs a { - text-decoration: none; + text-decoration: none; } .tabs > .dropdown > summary, .tabs > a { - padding: 1rem 2rem; - flex: 0 1 auto; - color: var(--color-darkGrey); - border-bottom: 2px solid var(--color-lightGrey); - text-align: center; + padding: 1rem 2rem; + flex: 0 1 auto; + color: var(--color-darkGrey); + border-bottom: 2px solid var(--color-lightGrey); + text-align: center; } .tabs > a[aria-current="page"], .tabs > a.active, .tabs > a:hover { - opacity: 1; - border-bottom: 2px solid var(--color-darkGrey); + opacity: 1; + border-bottom: 2px solid var(--color-darkGrey); } .tabs > a[aria-current="page"], .tabs > a.active { - border-color: var(--color-primary); + border-color: var(--color-primary); } .tabs.is-full a { - flex: 1 1 auto; + flex: 1 1 auto; } diff --git a/src/_tag.css b/src/_tag.css index f72f24f..8828226 100644 --- a/src/_tag.css +++ b/src/_tag.css @@ -18,6 +18,6 @@ font-size: 1.125em; } -.tag+.tag { +.tag + .tag { margin-left: 1rem; -} \ No newline at end of file +} diff --git a/src/_util.css b/src/_util.css index 7aaae96..fc9e672 100644 --- a/src/_util.css +++ b/src/_util.css @@ -1,211 +1,211 @@ /* Colors */ .bg-primary { - background-color: var(--color-primary) !important; + background-color: var(--color-primary) !important; } .bg-light { - background-color: var(--color-lightGrey) !important; + background-color: var(--color-lightGrey) !important; } .bg-dark { - background-color: var(--color-darkGrey) !important; + background-color: var(--color-darkGrey) !important; } .bg-grey { - background-color: var(--color-grey) !important; + background-color: var(--color-grey) !important; } .bg-error { - background-color: var(--color-error) !important; + background-color: var(--color-error) !important; } .bg-success { - background-color: var(--color-success) !important; + background-color: var(--color-success) !important; } .bd-primary { - border: 1px solid var(--color-primary) !important; + border: 1px solid var(--color-primary) !important; } .bd-light { - border: 1px solid var(--color-lightGrey) !important; + border: 1px solid var(--color-lightGrey) !important; } .bd-dark { - border: 1px solid var(--color-darkGrey) !important; + border: 1px solid var(--color-darkGrey) !important; } .bd-grey { - border: 1px solid var(--color-grey) !important; + border: 1px solid var(--color-grey) !important; } .bd-error { - border: 1px solid var(--color-error) !important; + border: 1px solid var(--color-error) !important; } .bd-success { - border: 1px solid var(--color-success) !important; + border: 1px solid var(--color-success) !important; } .text-primary { - color: var(--color-primary) !important; + color: var(--color-primary) !important; } .text-light { - color: var(--color-lightGrey) !important; + color: var(--color-lightGrey) !important; } .text-dark { - color: var(--color-darkGrey) !important; + color: var(--color-darkGrey) !important; } .text-grey { - color: var(--color-grey) !important; + color: var(--color-grey) !important; } .text-error { - color: var(--color-error) !important; + color: var(--color-error) !important; } .text-success { - color: var(--color-success) !important; + color: var(--color-success) !important; } .text-white { - color: #fff !important; + color: #fff !important; } /* Position & alignment */ .pull-right { - float: right !important; + float: right !important; } .pull-left { - float: left !important; + float: left !important; } .text-center { - text-align: center; + text-align: center; } .text-left { - text-align: left; + text-align: left; } .text-right { - text-align: right; + text-align: right; } .text-justify { - text-align: justify; + text-align: justify; } .text-uppercase { - text-transform: uppercase; + text-transform: uppercase; } .text-lowercase { - text-transform: lowercase; + text-transform: lowercase; } .text-capitalize { - text-transform: capitalize; + text-transform: capitalize; } .is-full-screen { - width: 100%; - min-height: 100vh; + width: 100%; + min-height: 100vh; } .is-full-width { - width: 100% !important; + width: 100% !important; } .is-vertical-align { - display: flex; - align-items: center; + display: flex; + align-items: center; } .is-horizontal-align { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } .is-center { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } .is-right { - display: flex; - align-items: center; - justify-content: flex-end; + display: flex; + align-items: center; + justify-content: flex-end; } .is-left { - display: flex; - align-items: center; - justify-content: flex-start; + display: flex; + align-items: center; + justify-content: flex-start; } .is-fixed { - position: fixed; - width: 100%; + position: fixed; + width: 100%; } .is-paddingless { - padding: 0 !important; + padding: 0 !important; } .is-marginless { - margin: 0 !important; + margin: 0 !important; } .is-pointer { - cursor: pointer !important; + cursor: pointer !important; } .is-rounded { - border-radius: 100%; + border-radius: 100%; } .clearfix { - content: ""; - display: table; - clear: both; + content: ""; + display: table; + clear: both; } .is-hidden { - display: none !important; + display: none !important; } @media screen and (max-width: 599px) { - .hide-xs { - display: none !important; - } + .hide-xs { + display: none !important; + } } @media screen and (min-width: 600px) and (max-width: 899px) { - .hide-sm { - display: none !important; - } + .hide-sm { + display: none !important; + } } @media screen and (min-width: 900px) and (max-width: 1199px) { - .hide-md { - display: none !important; - } + .hide-md { + display: none !important; + } } @media screen and (min-width: 1200px) { - .hide-lg { - display: none !important; - } + .hide-lg { + display: none !important; + } } @media print { - .hide-pr { - display: none !important; - } -} \ No newline at end of file + .hide-pr { + display: none !important; + } +} diff --git a/src/chota.css b/src/chota.css index 2625b75..9dfa7a6 100644 --- a/src/chota.css +++ b/src/chota.css @@ -2,11 +2,9 @@ @import "_base.css"; @import "_grid.css"; @import "_form.css"; - @import "_nav.css"; @import "_card.css"; @import "_tab.css"; @import "_tag.css"; @import "_dropdown.css"; - @import "_util.css"; diff --git a/test/index.html b/test/index.html index 89967af..bb7de27 100644 --- a/test/index.html +++ b/test/index.html @@ -4,7 +4,7 @@ Elements - +