diff --git a/dist/chota.css b/dist/chota.css index bf2b3c0..0813bd9 100644 --- a/dist/chota.css +++ b/dist/chota.css @@ -1,450 +1,546 @@ /*! chota.css | MIT License | github.com/jenil/chota */ -:root{ - --primary-color:#1a9f60; - --lightGrey-color:#d2d6dd; - --grid-maxWidth:120rem; - --grid-gutter:2rem; - --font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; +:root { + --primary-color: #1a9f60; + --lightGrey-color: #d2d6dd; + --grid-maxWidth: 120rem; + --grid-gutter: 2rem; + --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } -*{ - box-sizing:border-box; +* { + box-sizing: border-box; } -html{ - font-size:62.5%; - line-height:1.15; - -ms-text-size-adjust:100%; - -webkit-text-size-adjust:100%; +html { + font-size: 62.5%; + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; } -body{ - letter-spacing:.01em; - line-height:1.6; - font-size:1.6rem; - font-weight:400; - font-family:Segoe UI,Helvetica Neue,san-serif; - font-family:var(--font-family); - margin:0; - padding:0; +body { + letter-spacing: 0.01em; + line-height: 1.6; + font-size: 1.6rem; + font-weight: 400; + font-family: "Segoe UI", "Helvetica Neue", san-serif; /*fallback*/ + font-family: var(--font-family); + margin: 0; + padding: 0; } -h1,h2,h3,h4,h5,h6{ - font-weight:500; - margin:.35em 0 .7em; +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 500; + margin: 0.35em 0 0.7em 0; } -h1{ - font-size:2em; +h1 { + font-size: 2em; } -h2{ - font-size:1.75em; +h2 { + font-size: 1.75em; } -h3{ - font-size:1.5em; +h3 { + font-size: 1.5em; } -h4{ - font-size:1.25em; +h4 { + font-size: 1.25em; } -h5{ - font-size:1em; +h5 { + font-size: 1em; } -h6{ - font-size:.85em; +h6 { + font-size: 0.85em; } -a{ - color:var(--primary-color); - text-decoration:none; +a { + color: var(--primary-color); + text-decoration: none; } -a:hover:not(.button){ - opacity:.6; +a:hover:not(.button) { + opacity: 0.6; } -p{ - margin-top:0; +p { + margin-top: 0; } -blockquote{ - background-color:#f3f3f3; - padding:1.5rem 2rem; - border-left:3px solid var(--lightGrey-color); +blockquote { + background-color: #f3f3f3; + padding: 1.5rem 2rem; + border-left: 3px solid var(--lightGrey-color); } -dl dt{ - font-weight:700; +dl dt { + font-weight: bold; } -hr{ - background-color:var(--lightGrey-color); - height:1px; - margin:1rem 0; +hr { + border: none; + background-color: var(--lightGrey-color); + height: 1px; + margin: 1rem 0; } -hr,table{ - border:none; +table { + width: 100%; + border: none; + border-collapse: collapse; + border-spacing: 0; + text-align: left; } -table{ - width:100%; - border-collapse:collapse; - border-spacing:0; - text-align:left; +td, +th { + vertical-align: middle; + padding: 1.2rem 0.4rem; } -td,th{ - vertical-align:middle; - padding:1.2rem .4rem; +thead { + border-bottom: 2px solid var(--lightGrey-color); } -thead{ - border-bottom:2px solid var(--lightGrey-color); +tfoot { + border-top: 2px solid var(--lightGrey-color); } -tfoot{ - border-top:2px solid var(--lightGrey-color); +code, +kbd, +pre, +samp, +tt { + font-family: monaco, "Consolas", "Lucida Console", monospace; } -code,kbd,pre,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: #c62424; + padding: 0.2em 0.4em; + background-color: #f7f7f7; } -code,kbd{ - padding:0 .4rem; - font-size:90%; - white-space:pre-wrap; - border-radius:4px; - color:#c62424; - padding:.2em .4em; +pre { + background-color: #f7f7f7; + font-size: 1em; + padding: 1rem; + overflow-x: auto; } -code,kbd,pre{ - background-color:#f7f7f7; +pre code { + background: none; + padding: 0; } -pre{ - font-size:1em; - padding:1rem; - overflow-x:auto; +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; } -pre code{ - background:none; - padding:0; +img { + max-width: 100%; } -abbr[title]{ - border-bottom:none; - text-decoration:underline; - text-decoration:underline dotted; +fieldset, +iframe { + border: 1px solid var(--lightGrey-color); } -img{ - max-width:100%; +.container { + max-width: var(--grid-maxWidth); + margin: 0 auto; + width: 96%; + padding: 0 calc(var(--grid-gutter) / 2); } -fieldset,iframe{ - border:1px solid var(--lightGrey-color); +.row { + display: -ms-flexbox; + display: flex; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -ms-flex-pack: start; + justify-content: flex-start; + margin-left: calc(var(--grid-gutter) / -2); + margin-right: calc(var(--grid-gutter) / -2); } -.container{ - max-width:var(--grid-maxWidth); - margin:0 auto; - width:96%; - padding:0 calc(var(--grid-gutter) / 2); +.col { + -ms-flex: 1; + flex: 1; } -.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); +.col, +[class*=" col-"], +[class^='col-'] { + margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2); } -.col{ - flex:1; +.col-1 { + -ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); + max-width: calc((100% / (12/1)) - var(--grid-gutter)); } -.col,[class*=" col-"],[class^=col-]{ - margin:0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2); +.col-2 { + -ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); + max-width: calc((100% / (12/2)) - var(--grid-gutter)); } -.col-1{ - flex:0 0 calc((100% / (12/1)) - var(--grid-gutter)); - max-width:calc((100% / (12/1)) - var(--grid-gutter)); +.col-3 { + -ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); + max-width: calc((100% / (12/3)) - var(--grid-gutter)); } -.col-2{ - flex:0 0 calc((100% / (12/2)) - var(--grid-gutter)); - max-width:calc((100% / (12/2)) - var(--grid-gutter)); +.col-4 { + -ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); + max-width: calc((100% / (12/4)) - var(--grid-gutter)); } -.col-3{ - flex:0 0 calc((100% / (12/3)) - var(--grid-gutter)); - max-width:calc((100% / (12/3)) - var(--grid-gutter)); +.col-5 { + -ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); + max-width: calc((100% / (12/5)) - var(--grid-gutter)); } -.col-4{ - flex:0 0 calc((100% / (12/4)) - var(--grid-gutter)); - max-width:calc((100% / (12/4)) - var(--grid-gutter)); +.col-6 { + -ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); + max-width: calc((100% / (12/6)) - var(--grid-gutter)); } -.col-5{ - flex:0 0 calc((100% / (12/5)) - var(--grid-gutter)); - max-width:calc((100% / (12/5)) - var(--grid-gutter)); +.col-7 { + -ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); + max-width: calc((100% / (12/7)) - var(--grid-gutter)); } -.col-6{ - flex:0 0 calc((100% / (12/6)) - var(--grid-gutter)); - max-width:calc((100% / (12/6)) - var(--grid-gutter)); +.col-8 { + -ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); + max-width: calc((100% / (12/8)) - var(--grid-gutter)); } -.col-7{ - flex:0 0 calc((100% / (12/7)) - var(--grid-gutter)); - max-width:calc((100% / (12/7)) - var(--grid-gutter)); +.col-9 { + -ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); + max-width: calc((100% / (12/9)) - var(--grid-gutter)); } -.col-8{ - flex:0 0 calc((100% / (12/8)) - var(--grid-gutter)); - max-width:calc((100% / (12/8)) - var(--grid-gutter)); +.col-10 { + -ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); + max-width: calc((100% / (12/10)) - var(--grid-gutter)); } -.col-9{ - flex:0 0 calc((100% / (12/9)) - var(--grid-gutter)); - max-width:calc((100% / (12/9)) - var(--grid-gutter)); +.col-11 { + -ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); + max-width: calc((100% / (12/11)) - var(--grid-gutter)); } -.col-10{ - flex:0 0 calc((100% / (12/10)) - var(--grid-gutter)); - max-width:calc((100% / (12/10)) - var(--grid-gutter)); +.col-12 { + -ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); + max-width: calc((100% / (12/12)) - var(--grid-gutter)); } -.col-11{ - 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)); -} -@media screen and (max-width:768px){ - .container{ - width:100%; +@media screen and (max-width: 768px) { + .container { + width: 100%; } - .col,[class*=" col-"],[class^=col-]{ - flex:0 1 100%; - max-width:100%; + .col, + [class*=" col-"], + [class^='col-'] { + -ms-flex: 0 1 100%; + flex: 0 1 100%; + max-width: 100%; } } -fieldset{ - padding:.5rem 2rem; +fieldset { + padding: 0.5rem 2rem; } -legend{ - text-transform:uppercase; - font-size:.8em; - letter-spacing:.1rem; +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:.7rem 1rem; - border-radius:4px; - border:1px solid var(--lightGrey-color); - font-size:1em; - transition:all .2s ease; - display:block; - width:100%; +input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]), +select, +textarea, +textarea[type=text] { + font-family: inherit; + padding: 0.7rem 1rem; + border-radius: 4px; + border: 1px solid var(--lightGrey-color); + font-size: 1em; + transition: all 0.2s ease; + display: block; + width: 100%; } -input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,select:hover,textarea:hover,textarea[type=text]:hover{ - border-color:#aaa; +input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover, +select:hover, +textarea:hover, +textarea[type=text]:hover { + border-color: #aaa; } -input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{ - outline:none; - border-color:var(--primary-color); +input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus, +select:focus, +textarea:focus, +textarea[type=text]:focus { + outline: none; + border-color: var(--primary-color); } -select{ - -webkit-appearance:none; - background:#fafafa no-repeat 100%; - background-size:1ex; - background-origin:content-box; - background-image:url("data:image/svg+xml;utf8,"); +select { + -webkit-appearance: none; + background: #fafafa no-repeat 100%; + background-size: 1ex; + background-origin: content-box; + background-image: url("data:image/svg+xml;utf8,"); } -[type=checkbox],[type=radio]{ - width:1.6rem; - height:1.6rem; +[type="checkbox"], +[type="radio"] { + width: 1.6rem; + height: 1.6rem; } -.button,[type=button],[type=reset],[type=submit],button{ - padding:1rem 2.5rem; - color:#333; - background:#e6e6e6; - border-radius:4px; - border:none; - font-size:1.5rem; - line-height:1; - text-align:center; - transition:opacity .2s ease; - text-decoration:none; - transform:scale(1); - display:inline-block; +/* BUTTONS */ +.button, +[type=button], +[type=reset], +[type=submit], +button { + padding: 1rem 2.5rem; + color: #333; + background: #e6e6e6; + border-radius: 4px; + border: none; + font-size: 1.5rem; + line-height: 1; + text-align: center; + transition: opacity 0.2s ease; + text-decoration: none; + transform: scale(1); + display: inline-block; } -.button+.button{ - margin-left:1rem; +.button + .button { + margin-left: 1rem; } -.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{ - opacity:.8; +.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{ - transform:scale(.98); +.button:active, +[type=button]:active, +[type=reset]:active, +[type=submit]:active, +button:active { + transform: scale(0.98); } -button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{ - opacity:.4; - cursor:not-allowed; +input[disabled], +button[disabled], +input[disabled]:hover, +button[disabled]:hover { + opacity: 0.4; + cursor: not-allowed; } -.button.primary,[type=submit]{ - color:#fff; - background-color:#000; - background:var(--primary-color); +.button.primary, +[type=submit] { + color: #fff; + background-color: #000; + background: var(--primary-color); } -.button.outline{ - background-color:transparent; - border:1px solid var(--lightGrey-color); +.button.outline { + background-color: transparent; + border: 1px solid var(--lightGrey-color); } -.button.outline.primary{ - border-color:var(--primary-color); - color:var(--primary-color); +.button.outline.primary { + border-color: var(--primary-color); + color: var(--primary-color); } -.button.clear{ - background-color:transparent; - border-color:transparent; - color:var(--primary-color); +.button.clear { + background-color: transparent; + border-color: transparent; + color: var(--primary-color); } -.nav{ - display:flex; - min-height:5rem; - align-items:stretch; +.nav { + display: -ms-flexbox; + display: flex; + min-height: 5rem; + -ms-flex-align: stretch; + align-items: stretch; } -.nav img{ - max-height:3rem; +.nav img { + max-height: 3rem; } -.nav>.container{ - display:flex; +.nav>.container { + display: -ms-flexbox; + display: flex; } -.nav-center,.nav-left,.nav-right{ - display:flex; - flex:1; +.nav-center, +.nav-left, +.nav-right { + display: -ms-flexbox; + display: flex; + -ms-flex: 1; + flex: 1; } -.nav-left{ - justify-content:flex-start; +.nav-left { + -ms-flex-pack: start; + justify-content: flex-start; } -.nav-right{ - justify-content:flex-end; +.nav-right { + -ms-flex-pack: end; + justify-content: flex-end; } -.nav-center{ - justify-content:center; +.nav-center { + -ms-flex-pack: center; + justify-content: center; } -@media screen and (max-width:480px){ - .nav,.nav>.container{ - flex-direction:column; +@media screen and (max-width: 480px) { + .nav, + .nav>.container { + -ms-flex-direction: column; + flex-direction: column; } - .nav-center,.nav-left,.nav-right{ - flex-wrap:wrap; - justify-content:center; + .nav-center, + .nav-left, + .nav-right { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-pack: center; + justify-content: center; } } -.nav .brand,.nav a{ - text-decoration:none; - display:flex; - align-items:center; - padding:1rem 2rem; - color:#555; +.nav a, +.nav .brand { + text-decoration: none; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + padding: 1rem 2rem; + color: #555; } -.nav .active:not(.button){ - color:#000; - color:var(--primary-color); +.nav .active:not(.button) { + color: #000; /* fallback */ + color: var(--primary-color); } -.nav .brand{ - font-size:1.75em; - padding-top:0; - padding-bottom:0; +.nav .brand { + font-size: 1.75em; + padding-top: 0; + padding-bottom: 0; } -.nav .button{ - margin:auto 1rem; +.nav .button { + margin: auto 1rem; } -.card{ - padding:1rem 2rem; - border-radius:4px; - box-shadow:0 0 2px rgba(0,0,0,.4); +.card { + padding: 1rem 2rem; + border-radius: 4px; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); } -.card p:last-child{ - margin:0; +.card p:last-child { + margin: 0; } -.card header>*{ - margin-top:0; - margin-bottom:1rem; +.card header > * { + margin-top: 0; + margin-bottom: 1rem; } -.tabs{ - display:flex; +.tabs { + display: -ms-flexbox; + display: flex; } -.tabs a{ - text-decoration:none; +.tabs a { + text-decoration: none; } -.tabs>a{ - padding:1rem 2rem; - flex:0 1 auto; - color:#555; - border-bottom:2px solid var(--lightGrey-color); - text-align:center; +.tabs > a { + padding: 1rem 2rem; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + color: #555; + border-bottom: 2px solid var(--lightGrey-color); + text-align: center; } -.tabs>a.active,.tabs>a:hover{ - opacity:1; - border-bottom:2px solid #555; +.tabs > a.active, +.tabs > a:hover { + opacity: 1; + border-bottom: 2px solid #555; } -.tabs>a.active{ - border-color:var(--primary-color); +.tabs > a.active { + border-color: var(--primary-color); } -.tabs.is-full a{ - flex:1; +.tabs.is-full a { + -ms-flex: 1; + flex: 1; } -.pull-right{ - float:right; +.pull-right { + float: right; } -.pull-left{ - float:left; +.pull-left { + float: left; } -.is-text-center{ - text-align:center; +.is-text-center { + text-align: center; } -.is-text-left{ - text-align:left; +.is-text-left { + text-align: left; } -.is-text-right{ - text-align:right; +.is-text-right { + text-align: right; } -.is-text-uppercase{ - text-transform:uppercase; +.is-text-uppercase { + text-transform: uppercase; } -.is-text-lowercase{ - text-transform:lowercase; +.is-text-lowercase { + text-transform: lowercase; } -.is-text-capitalize{ - text-transform:capitalize; +.is-text-capitalize { + text-transform: capitalize; } -.is-full-screen{ - width:100%; - min-height:100vh; +.is-full-screen { + width: 100%; + min-height: 100vh; } -.is-full-width{ - width:100%; +.is-full-width { + width: 100%; } -.is-vertical-align{ - display:flex; - align-items:center; +.is-vertical-align { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; } -.is-center,.is-horizontal-align{ - display:flex; - justify-content:center; +.is-horizontal-align { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; } -.is-center{ - align-items:center; +.is-center { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; } -.is-right{ - justify-content:flex-end; +.is-right { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: end; + justify-content: flex-end; } -.is-left,.is-right{ - display:flex; - align-items:center; +.is-left { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: start; + justify-content: flex-start; } -.is-left{ - justify-content:flex-start; +.is-fixed { + position: fixed; + width: 100%; } -.is-fixed{ - position:fixed; - width:100%; +.is-paddingless { + padding: 0 !important; } -.is-paddingless{ - padding:0 !important; +.is-marginless { + margin: 0 !important; } -.is-marginless{ - margin:0 !important; +.clearfix { + content: ""; + display: table; + clear: both; } -.clearfix{ - content:""; - display:table; - clear:both; +.is-hidden { + display: none !important; } -.is-hidden{ - display:none !important; -} -@media screen and (max-width:480px){ - .hide-phone{ - display:none; +@media screen and (max-width: 480px) { + .hide-phone { + display: none; } } -@media screen and (max-width:768px){ - .hide-tablet{ - display:none; +@media screen and (max-width: 768px) { + .hide-tablet { + display: none; } } diff --git a/dist/chota.min.css b/dist/chota.min.css index 93ec47f..5299d78 100644 --- a/dist/chota.min.css +++ b/dist/chota.min.css @@ -1 +1,2 @@ -/*! chota.css | MIT License | github.com/jenil/chota */:root{--primary-color:#1a9f60;--lightGrey-color:#d2d6dd;--grid-maxWidth:120rem;--grid-gutter:2rem;--font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif}*{box-sizing:border-box}html{font-size:62.5%;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{letter-spacing:.01em;line-height:1.6;font-size:1.6rem;font-weight:400;font-family:Segoe UI,Helvetica Neue,san-serif;font-family:var(--font-family);margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:500;margin:.35em 0 .7em}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1em}h6{font-size:.85em}a{color:var(--primary-color);text-decoration:none}a:hover:not(.button){opacity:.6}p{margin-top:0}blockquote{background-color:#f3f3f3;padding:1.5rem 2rem;border-left:3px solid var(--lightGrey-color)}dl dt{font-weight:700}hr{background-color:var(--lightGrey-color);height:1px;margin:1rem 0}hr,table{border:none}table{width:100%;border-collapse:collapse;border-spacing:0;text-align:left}td,th{vertical-align:middle;padding:1.2rem .4rem}thead{border-bottom:2px solid var(--lightGrey-color)}tfoot{border-top:2px solid var(--lightGrey-color)}code,kbd,pre,samp,tt{font-family:monaco,Consolas,Lucida Console,monospace}code,kbd{padding:0 .4rem;font-size:90%;white-space:pre-wrap;border-radius:4px;color:#c62424;padding:.2em .4em}code,kbd,pre{background-color:#f7f7f7}pre{font-size:1em;padding:1rem;overflow-x:auto}pre code{background:none;padding:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}img{max-width:100%}fieldset,iframe{border:1px solid var(--lightGrey-color)}.container{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)}.col{flex:1}.col,[class*=" col-"],[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))}.col-2{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))}.col-4{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))}.col-6{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))}.col-8{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))}.col-10{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))}.col-12{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-]{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:.7rem 1rem;border-radius:4px;border:1px solid var(--lightGrey-color);font-size:1em;transition:all .2s ease;display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,select:hover,textarea:hover,textarea[type=text]:hover{border-color:#aaa}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{outline:none;border-color:var(--primary-color)}select{-webkit-appearance:none;background:#fafafa no-repeat 100%;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,")}[type=checkbox],[type=radio]{width:1.6rem;height:1.6rem}.button,[type=button],[type=reset],[type=submit],button{padding:1rem 2.5rem;color:#333;background:#e6e6e6;border-radius:4px;border:none;font-size:1.5rem;line-height:1;text-align:center;transition:opacity .2s ease;text-decoration:none;transform:scale(1);display:inline-block}.button+.button{margin-left:1rem}.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{opacity:.8}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{transform:scale(.98)}button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{opacity:.4;cursor:not-allowed}.button.primary,[type=submit]{color:#fff;background-color:#000;background:var(--primary-color)}.button.outline{background-color:transparent;border:1px solid var(--lightGrey-color)}.button.outline.primary{border-color:var(--primary-color);color:var(--primary-color)}.button.clear{background-color:transparent;border-color:transparent;color:var(--primary-color)}.nav{display:flex;min-height:5rem;align-items:stretch}.nav img{max-height:3rem}.nav>.container{display:flex}.nav-center,.nav-left,.nav-right{display:flex;flex:1}.nav-left{justify-content:flex-start}.nav-right{justify-content:flex-end}.nav-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 .brand,.nav a{text-decoration:none;display:flex;align-items:center;padding:1rem 2rem;color:#555}.nav .active:not(.button){color:#000;color:var(--primary-color)}.nav .brand{font-size:1.75em;padding-top:0;padding-bottom:0}.nav .button{margin:auto 1rem}.card{padding:1rem 2rem;border-radius:4px;box-shadow:0 0 2px rgba(0,0,0,.4)}.card p:last-child{margin:0}.card header>*{margin-top:0;margin-bottom:1rem}.tabs{display:flex}.tabs a{text-decoration:none}.tabs>a{padding:1rem 2rem;flex:0 1 auto;color:#555;border-bottom:2px solid var(--lightGrey-color);text-align:center}.tabs>a.active,.tabs>a:hover{opacity:1;border-bottom:2px solid #555}.tabs>a.active{border-color:var(--primary-color)}.tabs.is-full a{flex:1}.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:flex;align-items:center}.is-center,.is-horizontal-align{display:flex;justify-content:center}.is-center{align-items:center}.is-right{justify-content:flex-end}.is-left,.is-right{display:flex;align-items:center}.is-left{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}}@media screen and (max-width:768px){.hide-tablet{display:none}} \ No newline at end of file +/*! chota.css | MIT License | github.com/jenil/chota */ +:root{--primary-color: #1a9f60;--lightGrey-color: #d2d6dd;--grid-maxWidth: 120rem;--grid-gutter: 2rem;--font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif}*{box-sizing:border-box}html{font-size:62.5%;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{letter-spacing:.01em;line-height:1.6;font-size:1.6rem;font-weight:400;font-family:"Segoe UI","Helvetica Neue",san-serif;font-family:var(--font-family);margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:500;margin:.35em 0 .7em}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1em}h6{font-size:.85em}a{color:var(--primary-color);text-decoration:none}a:hover:not(.button){opacity:.6}p{margin-top:0}blockquote{background-color:#f3f3f3;padding:1.5rem 2rem;border-left:3px solid var(--lightGrey-color)}dl dt{font-weight:700}hr{border:0;background-color:var(--lightGrey-color);height:1px;margin:1rem 0}table{width:100%;border:0;border-collapse:collapse;border-spacing:0;text-align:left}td,th{vertical-align:middle;padding:1.2rem .4rem}thead{border-bottom:2px solid var(--lightGrey-color)}tfoot{border-top:2px solid var(--lightGrey-color)}code,kbd,pre,samp,tt{font-family:monaco,"Consolas","Lucida Console",monospace}code,kbd,pre{background-color:#f7f7f7}code,kbd{white-space:pre-wrap;border-radius:4px;color:#c62424;padding:.2em .4em;padding:0 .4rem;font-size:90%}pre{font-size:1em;padding:1rem;overflow-x:auto}pre code{background:0 0;padding:0}abbr[title]{border-bottom:none;text-decoration:underline dotted}img{max-width:100%}fieldset,iframe{border:1px solid var(--lightGrey-color)}.container{max-width:var(--grid-maxWidth);margin:0 auto;width:96%;padding:0 calc(var(--grid-gutter)/2)}.row{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-pack:start;justify-content:flex-start;margin-left:calc(var(--grid-gutter)/-2);margin-right:calc(var(--grid-gutter)/-2)}.col{-ms-flex:1;flex:1}.col,[class*=" col-"],[class^=col-]{margin:0 calc(var(--grid-gutter)/2) calc(var(--grid-gutter)/2)}.col-1{-ms-flex:0 0 calc((100%/(12/1)) - var(--grid-gutter));flex:0 0 calc((100%/(12/1)) - var(--grid-gutter));max-width:calc((100%/(12/1)) - var(--grid-gutter))}.col-2{-ms-flex:0 0 calc((100%/(12/2)) - var(--grid-gutter));flex:0 0 calc((100%/(12/2)) - var(--grid-gutter));max-width:calc((100%/(12/2)) - var(--grid-gutter))}.col-3{-ms-flex:0 0 calc((100%/(12/3)) - var(--grid-gutter));flex:0 0 calc((100%/(12/3)) - var(--grid-gutter));max-width:calc((100%/(12/3)) - var(--grid-gutter))}.col-4{-ms-flex:0 0 calc((100%/(12/4)) - var(--grid-gutter));flex:0 0 calc((100%/(12/4)) - var(--grid-gutter));max-width:calc((100%/(12/4)) - var(--grid-gutter))}.col-5{-ms-flex:0 0 calc((100%/(12/5)) - var(--grid-gutter));flex:0 0 calc((100%/(12/5)) - var(--grid-gutter));max-width:calc((100%/(12/5)) - var(--grid-gutter))}.col-6{-ms-flex:0 0 calc((100%/(12/6)) - var(--grid-gutter));flex:0 0 calc((100%/(12/6)) - var(--grid-gutter));max-width:calc((100%/(12/6)) - var(--grid-gutter))}.col-7{-ms-flex:0 0 calc((100%/(12/7)) - var(--grid-gutter));flex:0 0 calc((100%/(12/7)) - var(--grid-gutter));max-width:calc((100%/(12/7)) - var(--grid-gutter))}.col-8{-ms-flex:0 0 calc((100%/(12/8)) - var(--grid-gutter));flex:0 0 calc((100%/(12/8)) - var(--grid-gutter));max-width:calc((100%/(12/8)) - var(--grid-gutter))}.col-9{-ms-flex:0 0 calc((100%/(12/9)) - var(--grid-gutter));flex:0 0 calc((100%/(12/9)) - var(--grid-gutter));max-width:calc((100%/(12/9)) - var(--grid-gutter))}.col-10{-ms-flex:0 0 calc((100%/(12/10)) - var(--grid-gutter));flex:0 0 calc((100%/(12/10)) - var(--grid-gutter));max-width:calc((100%/(12/10)) - var(--grid-gutter))}.col-11{-ms-flex:0 0 calc((100%/(12/11)) - var(--grid-gutter));flex:0 0 calc((100%/(12/11)) - var(--grid-gutter));max-width:calc((100%/(12/11)) - var(--grid-gutter))}.col-12{-ms-flex:0 0 calc((100%/(12/12)) - var(--grid-gutter));flex:0 0 calc((100%/(12/12)) - var(--grid-gutter));max-width:calc((100%/(12/12)) - var(--grid-gutter))}@media screen and (max-width:768px){.container{width:100%}.col,[class*=" col-"],[class^=col-]{-ms-flex:0 1 100%;flex:0 1 100%;max-width:100%}}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:.7rem 1rem;border-radius:4px;border:1px solid var(--lightGrey-color);font-size:1em;transition:all .2s ease;display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,select:hover,textarea:hover,textarea[type=text]:hover{border-color:#aaa}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{outline:0;border-color:var(--primary-color)}select{-webkit-appearance:none;background:#fafafa no-repeat 100%;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,")}[type=checkbox],[type=radio]{width:1.6rem;height:1.6rem}.button,[type=button],[type=reset]{color:#333}.button,[type=button],[type=reset],[type=submit],button{padding:1rem 2.5rem;background:#e6e6e6;border-radius:4px;border:0;font-size:1.5rem;line-height:1;text-align:center;transition:opacity .2s ease;text-decoration:none;transform:scale(1);display:inline-block}button{color:#333}.button+.button{margin-left:1rem}.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{opacity:.8}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{transform:scale(.98)}button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{opacity:.4;cursor:not-allowed}.button.primary,[type=submit]{color:#fff;background-color:#000;background:var(--primary-color)}.button.outline{background-color:transparent;border:1px solid var(--lightGrey-color)}.button.outline.primary{border-color:var(--primary-color);color:var(--primary-color)}.button.clear{background-color:transparent;border-color:transparent;color:var(--primary-color)}.nav{min-height:5rem;-ms-flex-align:stretch;align-items:stretch}.nav img{max-height:3rem}.nav,.nav>.container{display:-ms-flexbox;display:flex}.nav-center,.nav-left,.nav-right{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.nav-left{-ms-flex-pack:start;justify-content:flex-start}.nav-right{-ms-flex-pack:end;justify-content:flex-end}.nav-center{-ms-flex-pack:center;justify-content:center}@media screen and (max-width:480px){.nav,.nav>.container{-ms-flex-direction:column;flex-direction:column}.nav-center,.nav-left,.nav-right{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center}}.nav .brand,.nav a{text-decoration:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:1rem 2rem;color:#555}.nav .active:not(.button){color:#000;color:var(--primary-color)}.nav .brand{font-size:1.75em;padding-top:0;padding-bottom:0}.nav .button{margin:auto 1rem}.card{padding:1rem 2rem;border-radius:4px;box-shadow:0 0 2px rgba(0,0,0,.4)}.card p:last-child{margin:0}.card header>*{margin-top:0;margin-bottom:1rem}.tabs{display:-ms-flexbox;display:flex}.tabs a{text-decoration:none}.tabs>a{padding:1rem 2rem;-ms-flex:0 1 auto;flex:0 1 auto;color:#555;border-bottom:2px solid var(--lightGrey-color);text-align:center}.tabs>a.active,.tabs>a:hover{opacity:1;border-bottom:2px solid #555}.tabs>a.active{border-color:var(--primary-color)}.tabs.is-full a{-ms-flex:1;flex:1}.pull-right{float:right}.pull-left{float:left}.is-text-center{text-align:center}.is-text-left{text-align:left}.is-text-right{text-align:right}.is-text-uppercase{text-transform:uppercase}.is-text-lowercase{text-transform:lowercase}.is-text-capitalize{text-transform:capitalize}.is-full-screen{width:100%;min-height:100vh}.is-full-width{width:100%}.is-vertical-align{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.is-center,.is-horizontal-align,.is-left,.is-right{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.is-center,.is-left,.is-right{-ms-flex-align:center;align-items:center}.is-left,.is-right{-ms-flex-pack:end;justify-content:flex-end}.is-left{-ms-flex-pack:start;justify-content:flex-start}.is-fixed{position:fixed;width:100%}.is-paddingless{padding:0!important}.is-marginless{margin:0!important}.clearfix{content:"";display:table;clear:both}.is-hidden{display:none!important}@media screen and (max-width:480px){.hide-phone{display:none}}@media screen and (max-width:768px){.hide-tablet{display:none}} \ No newline at end of file diff --git a/package.json b/package.json index af17def..c7b4632 100644 --- a/package.json +++ b/package.json @@ -4,19 +4,14 @@ "description": "A really small CSS framework", "main": "dist/chota.min.css", "scripts": { - "start": "browser-sync start --server --directory --files '**/*.css' '**/*.html'", - "build": "rm -r dist/ && yarn postcss && yarn postcss -- -x .min.css && yarn cssnano && yarn cssnano:min", - "postcss": "postcss ./src/chota.css -u postcss-import -d dist/ --no-map", - "cssnano": "cssnano ./dist/chota.css ./dist/chota.css --no-calc --no-core", - "cssnano:min": "cssnano ./dist/chota.min.css ./dist/chota.min.css --no-calc", - "watch": "yarn postcss -- -u cssnano -x .min.css -w", + "start": + "browser-sync start --server --directory --files '**/*.css' '**/*.html'", + "build": "rm -r dist/ && yarn postcss && NODE_ENV=production yarn postcss -x .min.css", + "postcss": "postcss ./src/chota.css -d dist/", + "watch": "NODE_ENV=development yarn postcss -w", "test": "echo \"Error: no test specified\" && exit 1" }, - "keywords": [ - "css", - "minimal", - "web" - ], + "keywords": ["css", "minimal", "web"], "author": "Jenil Gogari", "license": "MIT", "homepage": "https://jenil.github.io/chota", @@ -30,13 +25,9 @@ "devDependencies": { "autoprefixer": "^6.7.7", "browser-sync": "^2.18.8", - "cssnano-cli": "^1.0.5", - "postcss-cli": "^3.0.0", + "postcss-cli": "^4.1.1", + "postcss-csso": "^3.0.0", "postcss-import": "^9.1.0" }, - "files": [ - "src/", - "dist/", - "README.md" - ] + "files": ["src/", "dist/", "README.md"] } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..2c5b16c --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,10 @@ +let plugins = [ + require("postcss-import"), + require("autoprefixer")({ browsers: "last 2 versions" }) +]; + +if (process.env.NODE_ENV == 'production') plugins.push(require("postcss-csso")) + +module.exports = { + plugins +} diff --git a/test/components.html b/test/components.html index e708fbb..bb2dea1 100644 --- a/test/components.html +++ b/test/components.html @@ -5,7 +5,7 @@ Components - +