From 1dcdcd016f7e40aabf0a8e4e02570cf14a0fc8c8 Mon Sep 17 00:00:00 2001 From: nicholaswmin Date: Sun, 2 Dec 2018 17:13:23 +0200 Subject: [PATCH] Use combo of .row and .reverse to reverse direction --- dist/chota.css | 758 +-------------------------------------- docs/_includes/grid.html | 6 +- src/_grid.css | 2 +- 3 files changed, 5 insertions(+), 761 deletions(-) diff --git a/dist/chota.css b/dist/chota.css index 1c4d812..cefffa8 100644 --- a/dist/chota.css +++ b/dist/chota.css @@ -1,757 +1 @@ -/*! chota.css v0.5.2 | MIT License | github.com/jenil/chota */ -:root { - --color-primary: #1a9f60; - --color-lightGrey: #d2d6dd; - --color-grey: #7e818b; - --color-darkGrey: #3f4144; - --color-error: #d43939; - --color-success: #28bd14; - --grid-maxWidth: 120rem; - --grid-gutter: 2rem; - --font-size: 1.6rem; - --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", - "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", - "Droid Sans", "Helvetica Neue", sans-serif; -} -* { - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -html { - font-size: 62.5%; - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; -} -body { - letter-spacing: 0.01em; - line-height: 1.6; - font-size: var(--font-size); - font-weight: 400; - font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/ - font-family: var(--font-family); - margin: 0; - padding: 0; -} -h1, -h2, -h3, -h4, -h5, -h6 { - font-weight: 500; - margin: 0.35em 0 0.7em 0; -} -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: 0.85em; -} -a { - color: var(--color-primary); - text-decoration: none; -} -a:hover:not(.button) { - opacity: 0.75; -} -p { - margin-top: 0; -} -blockquote { - background-color: #f3f3f6; - padding: 1.5rem 2rem; - border-left: 3px solid var(--color-lightGrey); -} -dl dt { - font-weight: bold; -} -hr { - border: none; - background-color: var(--color-lightGrey); - height: 1px; - margin: 1rem 0; -} -table { - width: 100%; - border: none; - border-collapse: collapse; - border-spacing: 0; - text-align: left; -} -table.striped tr:nth-of-type(2n) { - background-color: #f3f3f6; -} -td, -th { - vertical-align: middle; - padding: 1.2rem 0.4rem; -} -thead { - border-bottom: 2px solid var(--color-lightGrey); -} -tfoot { - border-top: 2px solid var(--color-lightGrey); -} -code, -kbd, -pre, -samp, -tt { - font-family: monaco, "Consolas", "Lucida Console", monospace; -} -code, -kbd { - padding: 0 0.4rem; - font-size: 90%; - white-space: pre-wrap; - border-radius: 4px; - color: #d43939; - padding: 0.2em 0.4em; - background-color: #f3f3f6; -} -pre { - background-color: #f3f3f6; - font-size: 1em; - padding: 1rem; - overflow-x: auto; -} -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 { - 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); -} -.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; -} -.col, -[class*=" col-"], -[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: 768px) { - .container { - width: 100%; - } - - .col, - [class*=" col-"], - [class^='col-'] { - -webkit-box-flex: 0; - -ms-flex: 0 1 100%; - flex: 0 1 100%; - max-width: 100%; - } -} -fieldset { - padding: 0.5rem 2rem; -} -legend { - text-transform: uppercase; - 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"]), -select, -textarea, -textarea[type="text"] { - font-family: inherit; - padding: 0.8rem 1rem; - border-radius: 4px; - border: 1px solid var(--color-lightGrey); - font-size: 1em; - -webkit-transition: all 0.2s ease; - transition: all 0.2s ease; - display: block; - width: 100%; -} -input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):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; - 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"], -[type="submit"], -button { - padding: 1rem 2.5rem; - color: var(--color-darkGrey); - background: var(--color-lightGrey); - border-radius: 4px; - border: none; - font-size: var(--font-size); - line-height: 1; - text-align: center; - -webkit-transition: opacity 0.2s ease; - transition: opacity 0.2s ease; - text-decoration: none; - -webkit-transform: scale(1); - transform: scale(1); - display: inline-block; -} -.grouped { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} -.grouped > input:not(:last-child), -.grouped > .button:not(:last-child) { - margin-right: 16px; -} -.button + .button { - margin-left: 1rem; -} -.button:hover, -[type="button"]:hover, -[type="reset"]:hover, -[type="submit"]:hover, -button:hover { - opacity: 0.8; -} -.button:active, -[type="button"]:active, -[type="reset"]:active, -[type="submit"]:active, -button:active { - -webkit-transform: scale(0.98); - transform: scale(0.98); -} -input[disabled], -button[disabled], -input[disabled]:hover, -button[disabled]:hover { - opacity: 0.4; - cursor: not-allowed; -} -.button.primary, -.button.secondary, -.button.dark, -.button.error, -.button.success, -[type="submit"] { - color: #fff; - background-color: #000; - background-color: var(--color-primary); -} -.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; - -webkit-box-shadow: inset 0 0 0 1px var(--color-lightGrey); - box-shadow: inset 0 0 0 1px var(--color-lightGrey); -} -.button.outline.primary { - -webkit-box-shadow: inset 0 0 0 1px var(--color-primary); - box-shadow: inset 0 0 0 1px var(--color-primary); - color: var(--color-primary); -} -.button.outline.secondary { - -webkit-box-shadow: inset 0 0 0 1px var(--color-grey); - box-shadow: inset 0 0 0 1px var(--color-grey); - color: var(--color-grey); -} -.button.outline.dark { - -webkit-box-shadow: inset 0 0 0 1px var(--color-darkGrey); - box-shadow: inset 0 0 0 1px var(--color-darkGrey); - color: var(--color-darkGrey); -} -.button.clear { - background-color: transparent; - border-color: transparent; - color: var(--color-primary); -} -.button.icon { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} -.button.icon > img { - margin-left: 2px; -} -.button.icon-only { - padding: 1rem; -} -::-webkit-input-placeholder { - color: #bdbfc4; -} -:-ms-input-placeholder { - color: #bdbfc4; -} -::-ms-input-placeholder { - color: #bdbfc4; -} -::placeholder { - color: #bdbfc4; -} -.nav { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - min-height: 5rem; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; -} -.nav img { - max-height: 3rem; -} -.nav>.container { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} -.nav-center, -.nav-left, -.nav-right { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -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 { - -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: #555; -} -.nav .active:not(.button) { - color: #000; /* fallback */ - color: var(--color-primary); -} -.nav .brand { - font-size: 1.75em; - padding-top: 0; - padding-bottom: 0; -} -.nav .brand img { - padding-right: 1rem; -} -.nav .button { - margin: auto 1rem; -} -.card { - padding: 1rem 2rem; - border-radius: 4px; - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); -} -.card p:last-child { - margin: 0; -} -.card header > * { - margin-top: 0; - margin-bottom: 1rem; -} -.tabs { - display: -webkit-box; - display: -ms-flexbox; - display: flex; -} -.tabs a { - text-decoration: none; -} -.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; -} -.tabs > a.active, -.tabs > a:hover { - opacity: 1; - border-bottom: 2px solid #555; -} -.tabs > a.active { - border-color: var(--color-primary); -} -.tabs.is-full a { - -webkit-box-flex: 1; - -ms-flex: 1 1 auto; - flex: 1 1 auto; -} -.tag { - display: inline-block; - border: 1px solid var(--color-lightGrey); - text-transform: uppercase; - color: var(--color-grey); - padding: 0.5rem; - line-height: 1; - letter-spacing: 0.5px; -} -.tag.is-small { - padding: 0.4rem; - font-size: 0.75em; -} -.tag.is-large { - padding: 0.7rem; - font-size: 1.125em; -} -.tag+.tag { - margin-left: 1rem; -} -/* Colors */ -.bg-primary { - background-color: var(--color-primary); - color: #fff; -} -.bg-light { - background-color: var(--color-lightGrey); -} -.bg-dark { - background-color: var(--color-darkGrey); - color: #fff; -} -.bg-grey { - background-color: var(--color-grey); - color: #fff; -} -.bg-error { - background-color: var(--color-error); - color: #fff; -} -.bg-success { - background-color: var(--color-success); - color: #fff; -} -.text-primary { - color: var(--color-primary); -} -.text-light { - color: var(--color-lightGrey); -} -.text-dark { - color: var(--color-darkGrey); -} -.text-grey { - color: var(--color-grey); -} -.text-error { - color: var(--color-error); -} -.text-success { - color: var(--color-success); -} -/* Position & alignment */ -.pull-right { - float: right; -} -.pull-left { - float: left; -} -.is-text-center { - text-align: center; -} -.is-text-left { - text-align: left; -} -.is-text-right { - text-align: right; -} -.is-text-uppercase { - text-transform: uppercase; -} -.is-text-lowercase { - text-transform: lowercase; -} -.is-text-capitalize { - text-transform: capitalize; -} -.is-full-screen { - width: 100%; - min-height: 100vh; -} -.is-full-width { - width: 100%; -} -.is-vertical-align { - display: -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; -} -.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; -} -.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; -} -.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; -} -.is-fixed { - position: fixed; - width: 100%; -} -.is-paddingless { - padding: 0 !important; -} -.is-marginless { - margin: 0 !important; -} -.clearfix { - content: ""; - display: table; - clear: both; -} -.is-hidden { - display: none !important; -} -@media screen and (max-width: 480px) { - .hide-phone { - display: none !important; - } -} -@media screen and (max-width: 768px) { - .hide-tablet { - display: none !important; - } -} +/*! chota.css v0.5.2 | MIT License | github.com/jenil/chota */:root{--color-primary:#1a9f60;--color-lightGrey:#d2d6dd;--color-grey:#7e818b;--color-darkGrey:#3f4144;--color-error:#d43939;--color-success:#28bd14;--grid-maxWidth:120rem;--grid-gutter:2rem;--font-size:1.6rem;--font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif}*{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{letter-spacing:.01em;line-height:1.6;font-size:var(--font-size);font-weight:400;font-family:Segoe UI,Helvetica Neue,sans-serif;font-family:var(--font-family);margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:500;margin:.35em 0 .7em}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1em}h6{font-size:.85em}a{color:var(--color-primary);text-decoration:none}a:hover:not(.button){opacity:.75}p{margin-top:0}blockquote{background-color:#f3f3f6;padding:1.5rem 2rem;border-left:3px solid var(--color-lightGrey)}dl dt{font-weight:700}hr{background-color:var(--color-lightGrey);height:1px;margin:1rem 0}hr,table{border:none}table{width:100%;border-collapse:collapse;border-spacing:0;text-align:left}table.striped tr:nth-of-type(2n){background-color:#f3f3f6}td,th{vertical-align:middle;padding:1.2rem .4rem}thead{border-bottom:2px solid var(--color-lightGrey)}tfoot{border-top:2px solid var(--color-lightGrey)}code,kbd,pre,samp,tt{font-family:monaco,Consolas,Lucida Console,monospace}code,kbd{font-size:90%;white-space:pre-wrap;border-radius:4px;color:#d43939;padding:.2em .4em}code,kbd,pre{background-color:#f3f3f6}pre{font-size:1em;padding:1rem;overflow-x:auto}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{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-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,.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-9,.col-10{-webkit-box-flex:0}.col-10{-ms-flex:0 0 calc(83.33333% - var(--grid-gutter));flex:0 0 calc(83.33333% - var(--grid-gutter));max-width:calc(83.33333% - var(--grid-gutter))}.col-11{-ms-flex:0 0 calc(91.66667% - var(--grid-gutter));flex:0 0 calc(91.66667% - var(--grid-gutter));max-width:calc(91.66667% - var(--grid-gutter))}.col-11,.col-12{-webkit-box-flex:0}.col-12{-ms-flex:0 0 calc(100% - var(--grid-gutter));flex:0 0 calc(100% - var(--grid-gutter));max-width:calc(100% - var(--grid-gutter))}@media screen and (max-width:768px){.container{width:100%}.col,[class*=" col-"],[class^=col-]{-webkit-box-flex:0;-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}}fieldset{padding:.5rem 2rem}legend{text-transform:uppercase;font-size:.8em;letter-spacing:.1rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),select,textarea,textarea[type=text]{font-family:inherit;padding:.8rem 1rem;border-radius:4px;border:1px solid var(--color-lightGrey);font-size:1em;-webkit-transition:all .2s ease;transition:all .2s ease;display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):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;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}.button,[type=button],[type=reset],[type=submit],button{padding:1rem 2.5rem;color:var(--color-darkGrey);background:var(--color-lightGrey);border-radius:4px;border:none;font-size:var(--font-size);line-height:1;text-align:center;-webkit-transition:opacity .2s ease;transition:opacity .2s ease;text-decoration:none;-webkit-transform:scale(1);transform:scale(1);display:inline-block}.grouped{display:-webkit-box;display:-ms-flexbox;display:flex}.grouped>.button:not(:last-child),.grouped>input:not(:last-child){margin-right:16px}.button+.button{margin-left:1rem}.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{opacity:.8}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{-webkit-transform:scale(.98);transform:scale(.98)}button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{opacity:.4;cursor:not-allowed}.button.dark,.button.error,.button.primary,.button.secondary,.button.success,[type=submit]{color:#fff;background-color:#000;background-color:var(--color-primary)}.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;-webkit-box-shadow:inset 0 0 0 1px var(--color-lightGrey);box-shadow:inset 0 0 0 1px var(--color-lightGrey)}.button.outline.primary{-webkit-box-shadow:inset 0 0 0 1px var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary);color:var(--color-primary)}.button.outline.secondary{-webkit-box-shadow:inset 0 0 0 1px var(--color-grey);box-shadow:inset 0 0 0 1px var(--color-grey);color:var(--color-grey)}.button.outline.dark{-webkit-box-shadow:inset 0 0 0 1px var(--color-darkGrey);box-shadow:inset 0 0 0 1px var(--color-darkGrey);color:var(--color-darkGrey)}.button.clear{background-color:transparent;border-color:transparent;color:var(--color-primary)}.button.icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.button.icon>img{margin-left:2px}.button.icon-only{padding:1rem}::-webkit-input-placeholder{color:#bdbfc4}:-ms-input-placeholder{color:#bdbfc4}::-ms-input-placeholder{color:#bdbfc4}::placeholder{color:#bdbfc4}.nav{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:5rem;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.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{-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.nav .brand,.nav a{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:#555}.nav .active:not(.button){color:#000;color:var(--color-primary)}.nav .brand{font-size:1.75em;padding-top:0;padding-bottom:0}.nav .brand img{padding-right:1rem}.nav .button{margin:auto 1rem}.card{padding:1rem 2rem;border-radius:4px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.3)}.card p:last-child{margin:0}.card header>*{margin-top:0;margin-bottom:1rem}.tabs{display:-webkit-box;display:-ms-flexbox;display:flex}.tabs a{text-decoration:none}.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}.tabs>a.active,.tabs>a:hover{opacity:1;border-bottom:2px solid #555}.tabs>a.active{border-color:var(--color-primary)}.tabs.is-full a{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.tag{display:inline-block;border:1px solid var(--color-lightGrey);text-transform:uppercase;color:var(--color-grey);padding:.5rem;line-height:1;letter-spacing:.5px}.tag.is-small{padding:.4rem;font-size:.75em}.tag.is-large{padding:.7rem;font-size:1.125em}.tag+.tag{margin-left:1rem}.bg-primary{background-color:var(--color-primary);color:#fff}.bg-light{background-color:var(--color-lightGrey)}.bg-dark{background-color:var(--color-darkGrey);color:#fff}.bg-grey{background-color:var(--color-grey);color:#fff}.bg-error{background-color:var(--color-error);color:#fff}.bg-success{background-color:var(--color-success);color:#fff}.text-primary{color:var(--color-primary)}.text-light{color:var(--color-lightGrey)}.text-dark{color:var(--color-darkGrey)}.text-grey{color:var(--color-grey)}.text-error{color:var(--color-error)}.text-success{color:var(--color-success)}.pull-right{float:right}.pull-left{float:left}.is-text-center{text-align:center}.is-text-left{text-align:left}.is-text-right{text-align:right}.is-text-uppercase{text-transform:uppercase}.is-text-lowercase{text-transform:lowercase}.is-text-capitalize{text-transform:capitalize}.is-full-screen{width:100%;min-height:100vh}.is-full-width{width:100%}.is-vertical-align{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-center,.is-horizontal-align{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;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{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.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}.clearfix{content:"";display:table;clear:both}.is-hidden{display:none!important}@media screen and (max-width:480px){.hide-phone{display:none!important}}@media screen and (max-width:768px){.hide-tablet{display:none!important}} \ No newline at end of file diff --git a/docs/_includes/grid.html b/docs/_includes/grid.html index 792fef0..a0879ae 100644 --- a/docs/_includes/grid.html +++ b/docs/_includes/grid.html @@ -168,8 +168,8 @@
Reverse Direction
-

Add .row-reverse to the .row to reverse the column direction.

-
+

Add .reverse to the .row to reverse the column direction.

+
.col-6
@@ -181,7 +181,7 @@
{% highlight html %} -
+
.col-6
diff --git a/src/_grid.css b/src/_grid.css index db36066..1b86647 100644 --- a/src/_grid.css +++ b/src/_grid.css @@ -13,7 +13,7 @@ margin-right: calc(var(--grid-gutter) / -2); } -.row-reverse { +.row.reverse { flex-direction: row-reverse; }