From 03f24b040c3f233eec4a7b51054104226916df6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Sun, 31 May 2020 17:46:30 +0200 Subject: [PATCH] adding --- dist/crispy-all.css | 2 +- dist/crispy-minimal.css | 2 +- dist/example/getstarted.html | 973 ------------------ dist/example/imprint.html | 66 -- dist/example/privacy-policy.html | 66 -- dist/example/styles.css | 1 - dist/examples/components.html | 240 +++++ dist/examples/core.html | 1 + dist/examples/functions.html | 4 + dist/examples/getstarted.html | 16 + dist/examples/getting-started.html | 16 + dist/examples/helpers.html | 1 + .../img/gaming-circus.jpg | Bin .../img/tentakelfabrik.jpg | Bin dist/{example => examples}/img/trinkkofi.jpg | Bin dist/examples/imprint.html | 1 + dist/examples/index.html | 1 + dist/examples/mixins.html | 49 + dist/examples/privacy-policy.html | 1 + dist/examples/styles.css | 1 + dist/{example => examples}/symbol-defs.svg | 0 mix-manifest.json | 4 +- package-lock.json | 351 +++++++ package.json | 1 + src/_core.scss | 327 +----- src/_functions.scss | 51 +- src/{_modifiers.scss => _helpers.scss} | 123 ++- src/_mixins.scss | 58 ++ src/_normalize.scss | 341 ------ src/_variables.scss | 74 +- src/components/_button.scss | 21 +- src/components/_code.scss | 7 +- src/components/_field.scss | 14 +- src/components/_group.scss | 23 +- src/components/_icon.scss | 18 +- src/components/_modal.scss | 17 +- src/components/_panel.scss | 6 +- src/components/_progress.scss | 6 +- src/components/_table.scss | 5 +- src/core/_heading.scss | 35 + src/core/_normalize.scss | 190 ++++ src/core/_typography.scss | 127 +++ src/crispy-all.scss | 4 +- src/crispy-minimal.scss | 2 +- src/crispy.scss | 2 +- .../components/_nav.scss | 0 src/{example => examples}/site/_header.scss | 3 +- src/{example => examples}/styles.scss | 0 .../templates/_home.scss | 0 .../index.html => src/html/index.html.ejs | 48 +- src/html/page.html.ejs | 81 ++ src/html/partials/components.html | 666 ++++++++++++ src/html/partials/core.html | 69 ++ src/html/partials/footer.html | 21 + src/html/partials/functions.html | 24 + src/html/partials/getting-started.html | 53 + src/html/partials/helpers.html | 52 + src/html/partials/imprint.html | 0 src/html/partials/mixins.html | 94 ++ src/html/partials/privacy-policy.html | 0 webpack.mix.js | 78 +- 61 files changed, 2513 insertions(+), 1924 deletions(-) delete mode 100644 dist/example/getstarted.html delete mode 100644 dist/example/imprint.html delete mode 100644 dist/example/privacy-policy.html delete mode 100644 dist/example/styles.css create mode 100644 dist/examples/components.html create mode 100644 dist/examples/core.html create mode 100644 dist/examples/functions.html create mode 100644 dist/examples/getstarted.html create mode 100644 dist/examples/getting-started.html create mode 100644 dist/examples/helpers.html rename dist/{example => examples}/img/gaming-circus.jpg (100%) rename dist/{example => examples}/img/tentakelfabrik.jpg (100%) rename dist/{example => examples}/img/trinkkofi.jpg (100%) create mode 100644 dist/examples/imprint.html create mode 100644 dist/examples/index.html create mode 100644 dist/examples/mixins.html create mode 100644 dist/examples/privacy-policy.html create mode 100644 dist/examples/styles.css rename dist/{example => examples}/symbol-defs.svg (100%) rename src/{_modifiers.scss => _helpers.scss} (63%) delete mode 100644 src/_normalize.scss create mode 100644 src/core/_heading.scss create mode 100644 src/core/_normalize.scss create mode 100644 src/core/_typography.scss rename src/{example => examples}/components/_nav.scss (100%) rename src/{example => examples}/site/_header.scss (92%) rename src/{example => examples}/styles.scss (100%) rename src/{example => examples}/templates/_home.scss (100%) rename dist/example/index.html => src/html/index.html.ejs (74%) create mode 100644 src/html/page.html.ejs create mode 100644 src/html/partials/components.html create mode 100644 src/html/partials/core.html create mode 100644 src/html/partials/footer.html create mode 100644 src/html/partials/functions.html create mode 100644 src/html/partials/getting-started.html create mode 100644 src/html/partials/helpers.html create mode 100644 src/html/partials/imprint.html create mode 100644 src/html/partials/mixins.html create mode 100644 src/html/partials/privacy-policy.html diff --git a/dist/crispy-all.css b/dist/crispy-all.css index fbee6bd..aca127f 100644 --- a/dist/crispy-all.css +++ b/dist/crispy-all.css @@ -1 +1 @@ -html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.8em 1.2em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1rem}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 1rem}figcaption{margin:.3em 0 0}button,input,optgroup,select,textarea{margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:.9rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .3em}h5{line-height:1.4}h6{line-height:1.618}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.5rem}}@media only screen and (min-width:1600px){.h1,h1{font-size:2.75rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2rem}}@media only screen and (min-width:1600px){.h2,h2{font-size:2.2rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:1.75rem}}@media only screen and (min-width:1600px){.h3,h3{font-size:1.925rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.5rem}}@media only screen and (min-width:1600px){.h4,h4{font-size:1.65rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.25rem}}@media only screen and (min-width:1600px){.h5,h5{font-size:1.375rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1rem}}@media only screen and (min-width:1600px){.h6,h6{font-size:1.1rem}}body,button,input,optgroup,select,textarea{font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400}button,input,optgroup,select,textarea{font-size:.9em;line-height:1.4}body{color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{font-size:1rem}}@media only screen and (min-width:1600px){body{font-size:1.1rem}}@media only screen and (min-width:992px){body{line-height:1.618}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1rem!important}}@media only screen and (min-width:1600px){.text-size-default{font-size:1.1rem!important}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.75rem!important}}@media only screen and (min-width:1600px){.text-size-small{font-size:.825rem!important}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.25rem!important}}@media only screen and (min-width:1600px){.text-size-medium{font-size:1.375rem!important}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.5rem!important}}@media only screen and (min-width:1600px){.text-size-large{font-size:1.65rem!important}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.75rem!important}}@media only screen and (min-width:1600px){.text-size-big{font-size:1.925rem!important}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:2rem!important}}@media only screen and (min-width:1600px){.text-size-mega{font-size:2.2rem!important}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-left-0{margin-left:0!important}.margin-right-0{margin-right:0!important}.padding-left-0{padding-left:0!important}.padding-right-0{padding-right:0!important}.margin-left-1{margin-left:.375rem!important}.margin-right-1{margin-right:.375rem!important}.padding-left-1{padding-left:.375rem!important}.padding-right-1{padding-right:.375rem!important}.margin-left-2{margin-left:.75rem!important}.margin-right-2{margin-right:.75rem!important}.padding-left-2{padding-left:.75rem!important}.padding-right-2{padding-right:.75rem!important}.margin-left-3{margin-left:1.125rem!important}.margin-right-3{margin-right:1.125rem!important}.padding-left-3{padding-left:1.125rem!important}.padding-right-3{padding-right:1.125rem!important}.margin-top-0{margin-top:0!important}@media only screen and (min-width:992px){.margin-top-0{margin-top:0!important}}.margin-bottom-0{margin-bottom:0!important}@media only screen and (min-width:992px){.margin-bottom-0{margin-bottom:0!important}}.padding-top-0{padding-top:0!important}@media only screen and (min-width:992px){.padding-top-0{padding-top:0!important}}.padding-bottom-0{padding-bottom:0!important}@media only screen and (min-width:992px){.padding-bottom-0{padding-bottom:0!important}}.margin-top-1{margin-top:.375rem!important}@media only screen and (min-width:992px){.margin-top-1{margin-top:.75rem!important}}.margin-bottom-1{margin-bottom:.375rem!important}@media only screen and (min-width:992px){.margin-bottom-1{margin-bottom:.75rem!important}}.padding-top-1{padding-top:.375rem!important}@media only screen and (min-width:992px){.padding-top-1{padding-top:.75rem!important}}.padding-bottom-1{padding-bottom:.375rem!important}@media only screen and (min-width:992px){.padding-bottom-1{padding-bottom:.75rem!important}}.margin-top-2{margin-top:.75rem!important}@media only screen and (min-width:992px){.margin-top-2{margin-top:1.5rem!important}}.margin-bottom-2{margin-bottom:.75rem!important}@media only screen and (min-width:992px){.margin-bottom-2{margin-bottom:1.5rem!important}}.padding-top-2{padding-top:.75rem!important}@media only screen and (min-width:992px){.padding-top-2{padding-top:1.5rem!important}}.padding-bottom-2{padding-bottom:.75rem!important}@media only screen and (min-width:992px){.padding-bottom-2{padding-bottom:1.5rem!important}}.margin-top-3{margin-top:1.125rem!important}@media only screen and (min-width:992px){.margin-top-3{margin-top:2.25rem!important}}.margin-bottom-3{margin-bottom:1.125rem!important}@media only screen and (min-width:992px){.margin-bottom-3{margin-bottom:2.25rem!important}}.padding-top-3{padding-top:1.125rem!important}@media only screen and (min-width:992px){.padding-top-3{padding-top:2.25rem!important}}.padding-bottom-3{padding-bottom:1.125rem!important}@media only screen and (min-width:992px){.padding-bottom-3{padding-bottom:2.25rem!important}}.margin-top-4{margin-top:1.5rem!important}@media only screen and (min-width:992px){.margin-top-4{margin-top:3rem!important}}.margin-bottom-4{margin-bottom:1.5rem!important}@media only screen and (min-width:992px){.margin-bottom-4{margin-bottom:3rem!important}}.padding-top-4{padding-top:1.5rem!important}@media only screen and (min-width:992px){.padding-top-4{padding-top:3rem!important}}.padding-bottom-4{padding-bottom:1.5rem!important}@media only screen and (min-width:992px){.padding-bottom-4{padding-bottom:3rem!important}}.margin-top-5{margin-top:1.875rem!important}@media only screen and (min-width:992px){.margin-top-5{margin-top:3.75rem!important}}.margin-bottom-5{margin-bottom:1.875rem!important}@media only screen and (min-width:992px){.margin-bottom-5{margin-bottom:3.75rem!important}}.padding-top-5{padding-top:1.875rem!important}@media only screen and (min-width:992px){.padding-top-5{padding-top:3.75rem!important}}.padding-bottom-5{padding-bottom:1.875rem!important}@media only screen and (min-width:992px){.padding-bottom-5{padding-bottom:3.75rem!important}}.margin-top-6{margin-top:2.25rem!important}@media only screen and (min-width:992px){.margin-top-6{margin-top:4.5rem!important}}.margin-bottom-6{margin-bottom:2.25rem!important}@media only screen and (min-width:992px){.margin-bottom-6{margin-bottom:4.5rem!important}}.padding-top-6{padding-top:2.25rem!important}@media only screen and (min-width:992px){.padding-top-6{padding-top:4.5rem!important}}.padding-bottom-6{padding-bottom:2.25rem!important}@media only screen and (min-width:992px){.padding-bottom-6{padding-bottom:4.5rem!important}}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;text-decoration:none;padding:.5em 1.2em .6em;margin:0 0 1rem}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;padding:.8em 1.2em;background-color:#f7f7f7;margin:0 0 1rem}.code,.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 1rem}.field__select,.field__text{display:block;width:100%;line-height:1.618;padding:.4em .6em;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:1rem;font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.field__label{display:inline-block;width:100%}.field--valid .field__label{color:#5cb85c}.field--error .field__label{color:#d9534f}.field__text{margin:0;border:1px solid #dfdfdf}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{padding:.3em .5em;border:1px solid #dfdfdf;background-color:#fff}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:.3em 0 0}.field--valid .field__choice__checked,.field--valid .field__choice__unchecked{fill:#5cb85c}.field--error .field__choice__checked,.field--error .field__choice__unchecked{fill:#d9534f}.field__panel{padding:.3em .6em}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.group{list-style:none}.group,.group li{margin:0;padding:0}.group--horizontal .group__item{display:inline-block}.group--separate .group__item:after{margin:0 .3em;content:"/"}.group--separate .group__item:last-child:after{display:none}.hero{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.hero--top{background-position:top}.hero--bottom{background-position:bottom}.hero--contain{background-size:contain}.icon{width:1.1em;height:1.1em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;line-height:1.4}@media only screen and (min-width:992px){.icon{line-height:1.618}}.button .icon{margin:-.2em 0 0}.icon-color-primary{fill:#f18f01!important}.icon-color-secondary{fill:#b3b2af!important}.icon-color-success{fill:#5cb85c!important}.icon-color-warning{fill:#f0ad4e!important}.icon-color-danger{fill:#d9534f!important}.icon-color-info{fill:#0090d4!important}.icon-color-grey{fill:#7a7a7a!important}.icon-color-grey-light{fill:#f7f7f7!important}.icon-color-grey-dark{fill:#4a4a4a!important}.icon-color-white{fill:#fff!important}.img-responsive{display:block;max-width:100%;height:auto}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.modal{position:absolute;z-index:100;width:100%;max-width:50%;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:1em;transform:translate(0)}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.panel{background-color:#f7f7f7}.panel__inner{padding:.8em 1.2em}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f7f7f7}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{padding:.8em 1.2em;text-align:left;border-bottom:1px solid #dfdfdf}.table th{border-bottom-width:2px} \ No newline at end of file +html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}figure{margin:0 0 1rem}figcaption{margin:.3em 0 0}button,input,optgroup,select,textarea{margin:0}button,input,label,optgroup,select,textarea{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){button,input,label,optgroup,select,textarea{font-size:1rem;line-height:1.618}}fieldset{padding:.3em .45em}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}progress{vertical-align:baseline}details{display:block}summary{display:list-item}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:1rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1.1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .3em}h5,h6{line-height:1.4}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.82rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.28rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.01rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.74rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.47rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.2rem}}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:70%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.3em .45em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1rem}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}body{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{line-height:1.618;font-size:1rem}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1rem}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.775rem}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.225rem}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.45rem}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.675rem}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:1.9rem}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.border-color-primary{border-color:#f18f01!important}.border-color-secondary{border-color:#b3b2af!important}.border-color-success{border-color:#5cb85c!important}.border-color-warning{border-color:#f0ad4e!important}.border-color-danger{border-color:#d9534f!important}.border-color-info{border-color:#0090d4!important}.border-color-grey{border-color:#7a7a7a!important}.border-color-grey-light{border-color:#f7f7f7!important}.border-color-grey-dark{border-color:#4a4a4a!important}.border-color-white{border-color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:3px!important}.round{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-bottom-0{margin-bottom:0!important}.padding-top-0{padding-top:0!important}.padding-bottom-0{padding-bottom:0!important}.margin-left-0{margin-left:0!important}.margin-right-0{margin-right:0!important}.padding-left-0{padding-left:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:4px!important}@media only screen and (min-width:992px){.margin-top-1{margin-top:6px!important}}.margin-bottom-1{margin-bottom:4px!important}@media only screen and (min-width:992px){.margin-bottom-1{margin-bottom:6px!important}}.padding-top-1{padding-top:8px!important}@media only screen and (min-width:992px){.padding-top-1{padding-top:6px!important}}.padding-bottom-1{padding-bottom:8px!important}@media only screen and (min-width:992px){.padding-bottom-1{padding-bottom:6px!important}}.margin-left-1{margin-left:8px!important}@media only screen and (min-width:992px){.margin-left-1{margin-left:6px!important}}.margin-right-1{margin-right:8px!important}@media only screen and (min-width:992px){.margin-right-1{margin-right:6px!important}}.padding-left-1{padding-left:8px!important}@media only screen and (min-width:992px){.padding-left-1{padding-left:6px!important}}.padding-right-1{padding-right:8px!important}@media only screen and (min-width:992px){.padding-right-1{padding-right:6px!important}}.margin-top-2{margin-top:16px!important}@media only screen and (min-width:992px){.margin-top-2{margin-top:24px!important}}.margin-bottom-2{margin-bottom:16px!important}@media only screen and (min-width:992px){.margin-bottom-2{margin-bottom:24px!important}}.padding-top-2{padding-top:16px!important}@media only screen and (min-width:992px){.padding-top-2{padding-top:24px!important}}.padding-bottom-2{padding-bottom:16px!important}@media only screen and (min-width:992px){.padding-bottom-2{padding-bottom:24px!important}}.margin-left-2{margin-left:16px!important}@media only screen and (min-width:992px){.margin-left-2{margin-left:24px!important}}.margin-right-2{margin-right:16px!important}@media only screen and (min-width:992px){.margin-right-2{margin-right:24px!important}}.padding-left-2{padding-left:16px!important}@media only screen and (min-width:992px){.padding-left-2{padding-left:24px!important}}.padding-right-2{padding-right:16px!important}@media only screen and (min-width:992px){.padding-right-2{padding-right:24px!important}}.margin-top-3{margin-top:36px!important}@media only screen and (min-width:992px){.margin-top-3{margin-top:54px!important}}.margin-bottom-3{margin-bottom:36px!important}@media only screen and (min-width:992px){.margin-bottom-3{margin-bottom:54px!important}}.padding-top-3{padding-top:24px!important}@media only screen and (min-width:992px){.padding-top-3{padding-top:54px!important}}.padding-bottom-3{padding-bottom:24px!important}@media only screen and (min-width:992px){.padding-bottom-3{padding-bottom:54px!important}}.margin-top-4{margin-top:64px!important}@media only screen and (min-width:992px){.margin-top-4{margin-top:96px!important}}.margin-bottom-4{margin-bottom:64px!important}@media only screen and (min-width:992px){.margin-bottom-4{margin-bottom:96px!important}}.padding-top-4{padding-top:32px!important}@media only screen and (min-width:992px){.padding-top-4{padding-top:96px!important}}.padding-bottom-4{padding-bottom:32px!important}@media only screen and (min-width:992px){.padding-bottom-4{padding-bottom:96px!important}}.margin-top-5{margin-top:100px!important}@media only screen and (min-width:992px){.margin-top-5{margin-top:150px!important}}.margin-bottom-5{margin-bottom:100px!important}@media only screen and (min-width:992px){.margin-bottom-5{margin-bottom:150px!important}}.padding-top-5{padding-top:40px!important}@media only screen and (min-width:992px){.padding-top-5{padding-top:150px!important}}.padding-bottom-5{padding-bottom:40px!important}@media only screen and (min-width:992px){.padding-bottom-5{padding-bottom:150px!important}}.margin-top-6{margin-top:144px!important}@media only screen and (min-width:992px){.margin-top-6{margin-top:216px!important}}.margin-bottom-6{margin-bottom:144px!important}@media only screen and (min-width:992px){.margin-bottom-6{margin-bottom:216px!important}}.padding-top-6{padding-top:48px!important}@media only screen and (min-width:992px){.padding-top-6{padding-top:216px!important}}.padding-bottom-6{padding-bottom:48px!important}@media only screen and (min-width:992px){.padding-bottom-6{padding-bottom:216px!important}}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;text-decoration:none;font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem;margin:0 0 1rem;padding:.3em .8em}@media only screen and (min-width:992px){.button{font-size:1rem;padding:.4em 1.2em}}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;border:1px solid #dfdfdf;background-color:#f7f7f7;margin:0 0 1rem;padding:.3em .45em}@media only screen and (min-width:992px){.code{padding:.6em .9em}}.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 1rem}.field__label,.field__select,.field__text{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem}@media only screen and (min-width:992px){.field__label,.field__select,.field__text{font-size:1rem}}.field__select,.field__text{display:block;width:100%;padding:.4em .6em;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none}.field__label{display:inline-block;width:100%}.field--valid .field__label{color:#5cb85c}.field--error .field__label{color:#d9534f}.field__text{margin:0;border:1px solid #dfdfdf}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{padding:.3em .5em;border:1px solid #dfdfdf;background-color:#fff}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:.3em 0 0}.field--valid .field__choice__checked,.field--valid .field__choice__unchecked{fill:#5cb85c}.field--error .field__choice__checked,.field--error .field__choice__unchecked{fill:#d9534f}.field__panel{padding:.3em .6em}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.group{list-style:none;display:inline-block}.group,.group li{margin:0;padding:0}.group .group__item{display:inline-block;margin:0 .3em 0 0}.group--hr .group__item,.group .group__item:last-child:after{margin:0}.group--hr .group__item:after{margin:0 .3em;content:"/"}.group--hr .group__item:last-child:after{display:none}.hero{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.hero--top{background-position:top}.hero--bottom{background-position:bottom}.hero--contain{background-size:contain}.icon{width:1.15em;height:1.15em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;line-height:1.4}.icon-color-primary{fill:#f18f01!important}.icon-color-secondary{fill:#b3b2af!important}.icon-color-success{fill:#5cb85c!important}.icon-color-warning{fill:#f0ad4e!important}.icon-color-danger{fill:#d9534f!important}.icon-color-info{fill:#0090d4!important}.icon-color-grey{fill:#7a7a7a!important}.icon-color-grey-light{fill:#f7f7f7!important}.icon-color-grey-dark{fill:#4a4a4a!important}.icon-color-white{fill:#fff!important}.img-responsive{display:block;max-width:100%;height:auto}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.modal{position:absolute;z-index:100;width:100%;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}@media only screen and (min-width:992px){.modal{max-width:50%}}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{transform:translate(0)}@media only screen and (min-width:992px){.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:.75em}}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.panel{background-color:#f7f7f7}.panel__inner{padding:.3em .45em}@media only screen and (min-width:992px){.panel__inner{padding:.6em .9em}}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f7f7f7}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{text-align:left;border-bottom:1px solid #dfdfdf;padding:.3em .45em}@media only screen and (min-width:992px){.table td,.table th{padding:.6em .9em}}.table th{border-bottom-width:2px} \ No newline at end of file diff --git a/dist/crispy-minimal.css b/dist/crispy-minimal.css index bac08fa..1f203e6 100644 --- a/dist/crispy-minimal.css +++ b/dist/crispy-minimal.css @@ -1 +1 @@ -html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.8em 1.2em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1rem}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 1rem}figcaption{margin:.3em 0 0}button,input,optgroup,select,textarea{margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:.9rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .3em}h5{line-height:1.4}h6{line-height:1.618}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.5rem}}@media only screen and (min-width:1600px){.h1,h1{font-size:2.75rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2rem}}@media only screen and (min-width:1600px){.h2,h2{font-size:2.2rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:1.75rem}}@media only screen and (min-width:1600px){.h3,h3{font-size:1.925rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.5rem}}@media only screen and (min-width:1600px){.h4,h4{font-size:1.65rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.25rem}}@media only screen and (min-width:1600px){.h5,h5{font-size:1.375rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1rem}}@media only screen and (min-width:1600px){.h6,h6{font-size:1.1rem}}body,button,input,optgroup,select,textarea{font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400}button,input,optgroup,select,textarea{font-size:.9em;line-height:1.4}body{color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{font-size:1rem}}@media only screen and (min-width:1600px){body{font-size:1.1rem}}@media only screen and (min-width:992px){body{line-height:1.618}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1rem!important}}@media only screen and (min-width:1600px){.text-size-default{font-size:1.1rem!important}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.75rem!important}}@media only screen and (min-width:1600px){.text-size-small{font-size:.825rem!important}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.25rem!important}}@media only screen and (min-width:1600px){.text-size-medium{font-size:1.375rem!important}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.5rem!important}}@media only screen and (min-width:1600px){.text-size-large{font-size:1.65rem!important}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.75rem!important}}@media only screen and (min-width:1600px){.text-size-big{font-size:1.925rem!important}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:2rem!important}}@media only screen and (min-width:1600px){.text-size-mega{font-size:2.2rem!important}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-left-0{margin-left:0!important}.margin-right-0{margin-right:0!important}.padding-left-0{padding-left:0!important}.padding-right-0{padding-right:0!important}.margin-left-1{margin-left:.375rem!important}.margin-right-1{margin-right:.375rem!important}.padding-left-1{padding-left:.375rem!important}.padding-right-1{padding-right:.375rem!important}.margin-left-2{margin-left:.75rem!important}.margin-right-2{margin-right:.75rem!important}.padding-left-2{padding-left:.75rem!important}.padding-right-2{padding-right:.75rem!important}.margin-left-3{margin-left:1.125rem!important}.margin-right-3{margin-right:1.125rem!important}.padding-left-3{padding-left:1.125rem!important}.padding-right-3{padding-right:1.125rem!important}.margin-top-0{margin-top:0!important}@media only screen and (min-width:992px){.margin-top-0{margin-top:0!important}}.margin-bottom-0{margin-bottom:0!important}@media only screen and (min-width:992px){.margin-bottom-0{margin-bottom:0!important}}.padding-top-0{padding-top:0!important}@media only screen and (min-width:992px){.padding-top-0{padding-top:0!important}}.padding-bottom-0{padding-bottom:0!important}@media only screen and (min-width:992px){.padding-bottom-0{padding-bottom:0!important}}.margin-top-1{margin-top:.375rem!important}@media only screen and (min-width:992px){.margin-top-1{margin-top:.75rem!important}}.margin-bottom-1{margin-bottom:.375rem!important}@media only screen and (min-width:992px){.margin-bottom-1{margin-bottom:.75rem!important}}.padding-top-1{padding-top:.375rem!important}@media only screen and (min-width:992px){.padding-top-1{padding-top:.75rem!important}}.padding-bottom-1{padding-bottom:.375rem!important}@media only screen and (min-width:992px){.padding-bottom-1{padding-bottom:.75rem!important}}.margin-top-2{margin-top:.75rem!important}@media only screen and (min-width:992px){.margin-top-2{margin-top:1.5rem!important}}.margin-bottom-2{margin-bottom:.75rem!important}@media only screen and (min-width:992px){.margin-bottom-2{margin-bottom:1.5rem!important}}.padding-top-2{padding-top:.75rem!important}@media only screen and (min-width:992px){.padding-top-2{padding-top:1.5rem!important}}.padding-bottom-2{padding-bottom:.75rem!important}@media only screen and (min-width:992px){.padding-bottom-2{padding-bottom:1.5rem!important}}.margin-top-3{margin-top:1.125rem!important}@media only screen and (min-width:992px){.margin-top-3{margin-top:2.25rem!important}}.margin-bottom-3{margin-bottom:1.125rem!important}@media only screen and (min-width:992px){.margin-bottom-3{margin-bottom:2.25rem!important}}.padding-top-3{padding-top:1.125rem!important}@media only screen and (min-width:992px){.padding-top-3{padding-top:2.25rem!important}}.padding-bottom-3{padding-bottom:1.125rem!important}@media only screen and (min-width:992px){.padding-bottom-3{padding-bottom:2.25rem!important}}.margin-top-4{margin-top:1.5rem!important}@media only screen and (min-width:992px){.margin-top-4{margin-top:3rem!important}}.margin-bottom-4{margin-bottom:1.5rem!important}@media only screen and (min-width:992px){.margin-bottom-4{margin-bottom:3rem!important}}.padding-top-4{padding-top:1.5rem!important}@media only screen and (min-width:992px){.padding-top-4{padding-top:3rem!important}}.padding-bottom-4{padding-bottom:1.5rem!important}@media only screen and (min-width:992px){.padding-bottom-4{padding-bottom:3rem!important}}.margin-top-5{margin-top:1.875rem!important}@media only screen and (min-width:992px){.margin-top-5{margin-top:3.75rem!important}}.margin-bottom-5{margin-bottom:1.875rem!important}@media only screen and (min-width:992px){.margin-bottom-5{margin-bottom:3.75rem!important}}.padding-top-5{padding-top:1.875rem!important}@media only screen and (min-width:992px){.padding-top-5{padding-top:3.75rem!important}}.padding-bottom-5{padding-bottom:1.875rem!important}@media only screen and (min-width:992px){.padding-bottom-5{padding-bottom:3.75rem!important}}.margin-top-6{margin-top:2.25rem!important}@media only screen and (min-width:992px){.margin-top-6{margin-top:4.5rem!important}}.margin-bottom-6{margin-bottom:2.25rem!important}@media only screen and (min-width:992px){.margin-bottom-6{margin-bottom:4.5rem!important}}.padding-top-6{padding-top:2.25rem!important}@media only screen and (min-width:992px){.padding-top-6{padding-top:4.5rem!important}}.padding-bottom-6{padding-bottom:2.25rem!important}@media only screen and (min-width:992px){.padding-bottom-6{padding-bottom:4.5rem!important}} \ No newline at end of file +html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}figure{margin:0 0 1rem}figcaption{margin:.3em 0 0}button,input,optgroup,select,textarea{margin:0}button,input,label,optgroup,select,textarea{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){button,input,label,optgroup,select,textarea{font-size:1rem;line-height:1.618}}fieldset{padding:.3em .45em}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}progress{vertical-align:baseline}details{display:block}summary{display:list-item}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:1rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1.1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .3em}h5,h6{line-height:1.4}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.82rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.28rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.01rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.74rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.47rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.2rem}}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:70%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.3em .45em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1rem}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}body{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{line-height:1.618;font-size:1rem}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1rem}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.775rem}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.225rem}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.45rem}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.675rem}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:1.9rem}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.border-color-primary{border-color:#f18f01!important}.border-color-secondary{border-color:#b3b2af!important}.border-color-success{border-color:#5cb85c!important}.border-color-warning{border-color:#f0ad4e!important}.border-color-danger{border-color:#d9534f!important}.border-color-info{border-color:#0090d4!important}.border-color-grey{border-color:#7a7a7a!important}.border-color-grey-light{border-color:#f7f7f7!important}.border-color-grey-dark{border-color:#4a4a4a!important}.border-color-white{border-color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:3px!important}.round{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-bottom-0{margin-bottom:0!important}.padding-top-0{padding-top:0!important}.padding-bottom-0{padding-bottom:0!important}.margin-left-0{margin-left:0!important}.margin-right-0{margin-right:0!important}.padding-left-0{padding-left:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:4px!important}@media only screen and (min-width:992px){.margin-top-1{margin-top:6px!important}}.margin-bottom-1{margin-bottom:4px!important}@media only screen and (min-width:992px){.margin-bottom-1{margin-bottom:6px!important}}.padding-top-1{padding-top:8px!important}@media only screen and (min-width:992px){.padding-top-1{padding-top:6px!important}}.padding-bottom-1{padding-bottom:8px!important}@media only screen and (min-width:992px){.padding-bottom-1{padding-bottom:6px!important}}.margin-left-1{margin-left:8px!important}@media only screen and (min-width:992px){.margin-left-1{margin-left:6px!important}}.margin-right-1{margin-right:8px!important}@media only screen and (min-width:992px){.margin-right-1{margin-right:6px!important}}.padding-left-1{padding-left:8px!important}@media only screen and (min-width:992px){.padding-left-1{padding-left:6px!important}}.padding-right-1{padding-right:8px!important}@media only screen and (min-width:992px){.padding-right-1{padding-right:6px!important}}.margin-top-2{margin-top:16px!important}@media only screen and (min-width:992px){.margin-top-2{margin-top:24px!important}}.margin-bottom-2{margin-bottom:16px!important}@media only screen and (min-width:992px){.margin-bottom-2{margin-bottom:24px!important}}.padding-top-2{padding-top:16px!important}@media only screen and (min-width:992px){.padding-top-2{padding-top:24px!important}}.padding-bottom-2{padding-bottom:16px!important}@media only screen and (min-width:992px){.padding-bottom-2{padding-bottom:24px!important}}.margin-left-2{margin-left:16px!important}@media only screen and (min-width:992px){.margin-left-2{margin-left:24px!important}}.margin-right-2{margin-right:16px!important}@media only screen and (min-width:992px){.margin-right-2{margin-right:24px!important}}.padding-left-2{padding-left:16px!important}@media only screen and (min-width:992px){.padding-left-2{padding-left:24px!important}}.padding-right-2{padding-right:16px!important}@media only screen and (min-width:992px){.padding-right-2{padding-right:24px!important}}.margin-top-3{margin-top:36px!important}@media only screen and (min-width:992px){.margin-top-3{margin-top:54px!important}}.margin-bottom-3{margin-bottom:36px!important}@media only screen and (min-width:992px){.margin-bottom-3{margin-bottom:54px!important}}.padding-top-3{padding-top:24px!important}@media only screen and (min-width:992px){.padding-top-3{padding-top:54px!important}}.padding-bottom-3{padding-bottom:24px!important}@media only screen and (min-width:992px){.padding-bottom-3{padding-bottom:54px!important}}.margin-top-4{margin-top:64px!important}@media only screen and (min-width:992px){.margin-top-4{margin-top:96px!important}}.margin-bottom-4{margin-bottom:64px!important}@media only screen and (min-width:992px){.margin-bottom-4{margin-bottom:96px!important}}.padding-top-4{padding-top:32px!important}@media only screen and (min-width:992px){.padding-top-4{padding-top:96px!important}}.padding-bottom-4{padding-bottom:32px!important}@media only screen and (min-width:992px){.padding-bottom-4{padding-bottom:96px!important}}.margin-top-5{margin-top:100px!important}@media only screen and (min-width:992px){.margin-top-5{margin-top:150px!important}}.margin-bottom-5{margin-bottom:100px!important}@media only screen and (min-width:992px){.margin-bottom-5{margin-bottom:150px!important}}.padding-top-5{padding-top:40px!important}@media only screen and (min-width:992px){.padding-top-5{padding-top:150px!important}}.padding-bottom-5{padding-bottom:40px!important}@media only screen and (min-width:992px){.padding-bottom-5{padding-bottom:150px!important}}.margin-top-6{margin-top:144px!important}@media only screen and (min-width:992px){.margin-top-6{margin-top:216px!important}}.margin-bottom-6{margin-bottom:144px!important}@media only screen and (min-width:992px){.margin-bottom-6{margin-bottom:216px!important}}.padding-top-6{padding-top:48px!important}@media only screen and (min-width:992px){.padding-top-6{padding-top:216px!important}}.padding-bottom-6{padding-bottom:48px!important}@media only screen and (min-width:992px){.padding-bottom-6{padding-bottom:216px!important}} \ No newline at end of file diff --git a/dist/example/getstarted.html b/dist/example/getstarted.html deleted file mode 100644 index 8908681..0000000 --- a/dist/example/getstarted.html +++ /dev/null @@ -1,973 +0,0 @@ - - - - - - - Get Started | Crispy CSS - - - - - - -
-
-
-
- -
-
-
-
-
-
-
- -

- Get started! -

- -

- Installation -

-
- - 
npm install crispy-css
- -

SCSS

- 
@import
-    "crispy";
-

Now include Mixins you need. Components and Modifiziers only works if you include them,

- 
@include crispy__core();
-@include crispy__modifiers();
-
-// components
-@include crispy__button();
-@include crispy__code();
-@include crispy__field();
-@include crispy__group();
-@include crispy__hero();
-@include crispy__icon();
-@include crispy__media();
-@include crispy__modal();
-@include crispy__overlay();
-@include crispy__panel();
-@include crispy__progress();
-@include crispy__table();
-

For Custom Variables add a File before importing Crispy,

- 
@import
-    "config",
-    "crispy";
- -

If you need all, mixins will be included,

- 
@import
-    "crispy-all";
- -

Only need Core and Modifiziers?

- 
@import
-    "crispy-minimal";
- -

CSS

-

For using CSS you can use crispy-all.css for all Styles or crispy-mininmal.css without Components.

- -

Example

-

- You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you. -

- -

Site

-

- Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand. -

- -

Templates

-

- Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components. -

- - -

- Typography -

-
- - -

a

-

Html:

- 
<a href=""></a>
-

- Color of Text is set by $crispy__color-primary. Hover is set by - $crispy__color-text -

- - -

abbr

-

Html:

- 
<abbr title=""></abbr>
-

- Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats -

- - -

blockquote

-

Html:

- 
<blockquote></blockquote>
-
- Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag. -
- - -

hr

-

Html:

- 
<hr>
-

-

-

- - -

paragraph

-

Html:

- 
<p></p>
-

- Glossier viral occupy mixtape pok pok. -

- - -

mark

-

Html:

- 
<mark></mark>
-

- Pug before they four loko Deep v bespoke -

- - -

list

-

Html:

- 
<ul>
-    <li>item 1</li>
-    <li>item 2
-        <ul>
-            <li>child item 1</li>
-            <li>child item 2</li>
-        </ul>
-    </li>
-</ul>
-<ol>
-    <li>item 1</li>
-    <li>item 2</li>
-</ol>
-<dl>
-    <dt>defined title 1</dt>
-    <dd>defined item 1</dd>
-</dl>
-
    -
  • item 1
    • -
  • - item 2 -
      -
    • child item 1
      • -
    • child item 2
      • -
    -
    • -
-
    -
  1. item 1
    2. -
  2. item 2
    3. -
-
-
defined title 1
-
defined item 1
-
- - -

- Heading -

-

Html:

- 
<h2></h2>
-    <h2 class="h3"></h2>
-

Sass:

- 
$crispy__heading__font-sizes: (
-        'h1': 40px,
-        'h2': 36px,
-        'h3': 32px,
-        'h4': 28px,
-        'h5': 24px,
-        'h6': 20px
-    ) !default;
- -

Heading h1

-

Heading h2

-

Heading h3

-

Heading h4

-
Heading h5
-
Heading h6
- - -

- Components -

-
- - -

- Button -

-

Html:

- 
<button class="button"></button>
-<button class="button text-size-large"></button>
-<button class="button width-100"></button>
- - -

- With Modifiers you can also change Size and width. -

- - - - -

- Also with the Component Icon you can use SVG. -

- - - - - -

- Code -

-

Html:

- 
<pre class="code"><code></code></pre>
- - -

- Group -

-

Html:

- 
<nav>
-    <ul class="group">
-        <li class="group__item">first item</li>
-        <li class="group__item">second item</li>
-        <li class="group__item">third item</li>
-    </ul>
-</nav>
-
- -
-

Html:

- 
<nav>
-    <ul class="group group--horizontal group--separate">
-        <li class="group__item">first item</li>
-        <li class="group__item">second item</li>
-        <li class="group__item">third item</li>
-    </ul>
-</nav>
-
- -
- - -

- Hero -

-

Html:

- 
<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
-
- 
<div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
-
- 
<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
-
- - -

- Icon -

-

- Change Size of Icons with "text-size-*", you find them in the modifiers. -

-

Html:

- 
<svg class="icon text-size-small">
-    <use xlink:href="symbol-defs.svg#icon-minus"></use>
-</svg>
-
-
- - - - - -
-
-

- To change Color you can use "icon-color-*". -

-

Html:

- 
<svg class="icon icon-color-danger">
-    <use xlink:href="symbol-defs.svg#icon-flask"></use>
-</svg>
-
-
- -
-
- - -

- Panel -

-

Html:

- 
<div class="panel">
-    <div class="panel__inner">
-        Lorem Ipsum
-    </div>
-</div>
-
-
- Lorem Ipsum -
-
- - -

- Progress -

-

Html:

- 
<div class="progress">
-    <div class="progress__inner" style="width: 80%">
-    </div>
-</div>
-
-
-
-
- - -

- Modal -

-

Html:

- 
<div class="modal modal--bottom width-100">
-    <div class="panel">
-        <div class="panel__inner">
-            Lorem Ipsum
-        </div>
-    </div>
-</div>
-
-
-
-
- .modal--top-left -
-
-
-
-
-
- .modal--top-right -
-
-
-
-
-
- .modal -
-
-
-
-
-
- .modal--bottom-left -
-
-
-
-
-
- .modal--bottom-right -
-
-
-
- - -

- Table -

-

Html:

- 
<table class="table table--striped">
-    <thead>
-        <tr>
-            <th></th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td></td>
-        </tr>
-    </tbody>
-</table>
- - - - - - - - - - - - - - - - - - - - - - -
nameage
Mr. Brown43
Mr. Magenta32
Mr. White45
- - -

- Media -

- 
<img class="img-responsive" src="https://picsum.photos/400" />
-<figure>
-    <img class="img-responsive" src="https://picsum.photos/400" />
-    <figcaption class="text-center">Lorem Ipsum</figcaption>
-</figure>
-<div class="video-responsive" style="height: 280px;">
-    <iframe src="https://giphy.com/embed/13XW2MJE0XCoM0" width="480" height="361"></iframe>
-</div>
-
-
- -
-
-
- -
Lorem Ipsum
-
-
-
- -

- Fields -

- -

- Fields are Form-Elements. -

- - -

- Checkbox -

-

- Checkboxes -

-
- - - - -
-
- - -
- error item 1 -
-
- - -

- Radio -

-
- -
- - -
- - -
- -
- - -
- error item 1 -
-
- - -

- Select -

-
- -
-
- -
- - -

- Input / Textarea -

-
- -
-
- -
- error item 1 -
-
-
- -
- error item 1 -
-
-
- -
-
- -
- error item 1 -
-
- - -

- Modifiers -

-
- - -

- Margin & Padding -

-

- Adding margin and padding-top, -left, -bottom and -right. For left and right steps and values - are halved. -

-

Sass:

- 
-$crispy__modifiers__spacing__value: 0.75em;
-$crispy__modifiers__spacing__steps: 6;
-
- -

Html:

- 
<div class="margin-bottom-1">margin-bottom-1</div>
-
margin-bottom-0
-
margin-bottom-1
-
margin-bottom-2
-
margin-bottom-3
-
margin-bottom-4
-
margin-bottom-5
-
margin-bottom-6
- -
margin-left-0
-
margin-left-1
-
margin-left-2
-
margin-left-3
- -

- Also set padding and margin to 0, -

- - 
<div class="marginless"</div>
-<div class="paddingless"</div>
- - -

- Typography -

- 
<div class="text-left"></div>
-<div class="text-center"></div>
-<div class="text-right"></div>
-<div class="text-justify"></div>
-<div class="text-italic"></div>
-<div class="text-light"></div>
-<div class="text-normal"></div>
-<div class="text-medium"></div>
-<div class="text-bold"></div>
-<div class="text-capitalize"></div>
-<div class="text-uppercase"></div>
-<div class="text-lowercase"></div>
-<div class="text-smaller"></div>
-<div class="text-crossed"></div>
-<div class="text-underline"></div>
- -

- Also there are classes for, -

-
    -
  • text-size-* with $crispy__font-sizes for "font-size"
    • -
  • text-color-* with $crispy__colors for "color"
    • -
  • background-color-* with $crispy__font-sizes for "background-color"
    • -
- - -

- Float -

- 
<div class="float-left"></div>
-<div class="float-right"></div>
-<div class="float-none"></div>
-<div class="centered"></div>
-<div class="clearfix"></div>
- - -

- Position -

- 
<div class="relative"></div>
-<div class="absolute"></div>
-<div class="fixed"></div>
- - -

- Border -

- 
<div class="bordered"></div>
-<div class="rounded"></div>
-<div class="borderless"></div>
-<div class="radiusless"></div>
- - -

- Visibility -

- 
<div class="hidden"></div>
-<div class="visible"></div>
-<div class="visible visible--inline"></div>
-<div class="visible visible--inline-block"></div>
- - -

- Width -

-

Sass:

- 
$crispy__width: (
-    '25' : 25%,
-    '50' : 50%,
-    '75' : 75%,
-    '100': 100%
-)
- -

Html:

- 
<div class="panel width-25">width-25</div>
-<div class="width-50">width-50</div>
-<div class="width-75">width-75</div>
-<div class="width-100">width-100</div>
-
width-25
-
width-50
-
width-75
-
width-100
- - -
-

- Mixins -

- - -

- Triangle -

-

Sass:

- 
.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
-    display: block;
-}
-
-.triangle-left {
-    @include triangle('left', $crispy__color-primary);
-}
-
-.triangle-right {
-    @include triangle('right', $crispy__color-primary);
-}
-
-.triangle-top {
-    @include triangle('top', $crispy__color-primary);
-}
-
-.triangle-bottom {
-    @include triangle('bottom', $crispy__color-primary);
-}
-
-

- - - - -

- - -

- Media Queries -

-

- These @mixins were used with the Breakpoints from http://reflexgrid.com/docs/. - Reflex-Grid is also used as grid for this Site. -

-
    -
  • xs 576px
    • -
  • sm 768px
    • -
  • md 992px
    • -
  • lg 1200px
    • -
  • xlg 1600px
    • -
-

Html:

- 
<div class="sm">sm</div>
-<div class="md">md</div>
-<div class="md-only">md-only</div>
-<div class="lg-only">lg-only</div>
-

Sass:

- 
.sm, .md, .md-only, .lg-only {
-    display: none;
-}
-
-.sm {
-    @include crispy__media-sm() {
-        display: block;
-    }
-}
-
-.md {
-    @include crispy__media-md() {
-        display: block;
-    }
-}
-
-.md-only {
-    @include crispy__media-md-only() {
-        display: block;
-    }
-}
-
-.lg-only {
-    @include crispy__media-lg-only() {
-        display: block;
-    }
-}
-
-
-
sm
-
-
-
md
-
-
-
md-only
-
-
-
lg-only
-
-
- - -

- Functions -

-
- - -

- stripUnit() -

-

Sass:

- 
stripUnit(10px);
-

- Returns value without unit. -

- - -

- zIndex(name) -

-

Sass:

- 
zIndex('modal');
-

- Returns value from $crispy__z-index. -

-

Sass:

- 
$crispy__z-index: (
-    'overlay': 90,
-    'modal'  : 100
-);
-
-
-
- - - - - - - - Crispy CSS | Lightweight CSS Framework for Building Apps and Websites - - - - - - - - -
- -
- - - - - \ No newline at end of file diff --git a/dist/example/privacy-policy.html b/dist/example/privacy-policy.html deleted file mode 100644 index 34819c2..0000000 --- a/dist/example/privacy-policy.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - - Crispy CSS | Lightweight CSS Framework for Building Apps and Websites - - - - - - - - -
- -
- - - - - \ No newline at end of file diff --git a/dist/example/styles.css b/dist/example/styles.css deleted file mode 100644 index 1e3b22d..0000000 --- a/dist/example/styles.css +++ /dev/null @@ -1 +0,0 @@ -.container,.container-full{box-sizing:border-box;width:100%;margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}.container-full .grid,.container .grid{margin-right:-15px;margin-left:-15px}@media (min-width:576px){.container{max-width:576px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:992px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1600px){.container{max-width:1600px}}.grid{box-sizing:border-box;display:block;display:flex;flex-wrap:wrap;padding:0;margin:0 auto;position:relative;letter-spacing:-.31em;*letter-spacing:normal;word-spacing:-.43em;list-style-type:none}.grid:after,.grid:before,[class*=col-]{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;white-space:normal}[class*=col-]{position:relative;width:100%;vertical-align:top;padding:15px;display:inline-block;*display:inline;zoom:1}[class*=col-]:after,[class*=col-]:before{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;white-space:normal}[class*=col-] .grid{flex:1 1 auto;margin:-15px}.col-12{width:100%;*width:99.9%}.col-11{width:91.6666666667%;*width:91.5666666667%}.col-10{width:83.3333333333%;*width:83.2333333333%}.col-9{width:75%;*width:74.9%}.col-8{width:66.6666666667%;*width:66.5666666667%}.col-7{width:58.3333333333%;*width:58.2333333333%}.col-6{width:50%;*width:49.9%}.col-5{width:41.6666666667%;*width:41.5666666667%}.col-4{width:33.3333333333%;*width:33.2333333333%}.col-3{width:25%;*width:24.9%}.col-2{width:16.6666666667%;*width:16.5666666667%}.col-1{width:8.3333333333%;*width:8.2333333333%}@media (min-width:576px){.col-xs-12{width:100%;*width:99.9%}.col-xs-11{width:91.6666666667%;*width:91.5666666667%}.col-xs-10{width:83.3333333333%;*width:83.2333333333%}.col-xs-9{width:75%;*width:74.9%}.col-xs-8{width:66.6666666667%;*width:66.5666666667%}.col-xs-7{width:58.3333333333%;*width:58.2333333333%}.col-xs-6{width:50%;*width:49.9%}.col-xs-5{width:41.6666666667%;*width:41.5666666667%}.col-xs-4{width:33.3333333333%;*width:33.2333333333%}.col-xs-3{width:25%;*width:24.9%}.col-xs-2{width:16.6666666667%;*width:16.5666666667%}.col-xs-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:768px){.col-sm-12{width:100%;*width:99.9%}.col-sm-11{width:91.6666666667%;*width:91.5666666667%}.col-sm-10{width:83.3333333333%;*width:83.2333333333%}.col-sm-9{width:75%;*width:74.9%}.col-sm-8{width:66.6666666667%;*width:66.5666666667%}.col-sm-7{width:58.3333333333%;*width:58.2333333333%}.col-sm-6{width:50%;*width:49.9%}.col-sm-5{width:41.6666666667%;*width:41.5666666667%}.col-sm-4{width:33.3333333333%;*width:33.2333333333%}.col-sm-3{width:25%;*width:24.9%}.col-sm-2{width:16.6666666667%;*width:16.5666666667%}.col-sm-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:992px){.col-md-12{width:100%;*width:99.9%}.col-md-11{width:91.6666666667%;*width:91.5666666667%}.col-md-10{width:83.3333333333%;*width:83.2333333333%}.col-md-9{width:75%;*width:74.9%}.col-md-8{width:66.6666666667%;*width:66.5666666667%}.col-md-7{width:58.3333333333%;*width:58.2333333333%}.col-md-6{width:50%;*width:49.9%}.col-md-5{width:41.6666666667%;*width:41.5666666667%}.col-md-4{width:33.3333333333%;*width:33.2333333333%}.col-md-3{width:25%;*width:24.9%}.col-md-2{width:16.6666666667%;*width:16.5666666667%}.col-md-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:1200px){.col-lg-12{width:100%;*width:99.9%}.col-lg-11{width:91.6666666667%;*width:91.5666666667%}.col-lg-10{width:83.3333333333%;*width:83.2333333333%}.col-lg-9{width:75%;*width:74.9%}.col-lg-8{width:66.6666666667%;*width:66.5666666667%}.col-lg-7{width:58.3333333333%;*width:58.2333333333%}.col-lg-6{width:50%;*width:49.9%}.col-lg-5{width:41.6666666667%;*width:41.5666666667%}.col-lg-4{width:33.3333333333%;*width:33.2333333333%}.col-lg-3{width:25%;*width:24.9%}.col-lg-2{width:16.6666666667%;*width:16.5666666667%}.col-lg-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:1600px){.col-xlg-12{width:100%;*width:99.9%}.col-xlg-11{width:91.6666666667%;*width:91.5666666667%}.col-xlg-10{width:83.3333333333%;*width:83.2333333333%}.col-xlg-9{width:75%;*width:74.9%}.col-xlg-8{width:66.6666666667%;*width:66.5666666667%}.col-xlg-7{width:58.3333333333%;*width:58.2333333333%}.col-xlg-6{width:50%;*width:49.9%}.col-xlg-5{width:41.6666666667%;*width:41.5666666667%}.col-xlg-4{width:33.3333333333%;*width:33.2333333333%}.col-xlg-3{width:25%;*width:24.9%}.col-xlg-2{width:16.6666666667%;*width:16.5666666667%}.col-xlg-1{width:8.3333333333%;*width:8.2333333333%}}.col-auto{flex:1 0 0px;width:auto}@media (min-width:576px){.col-xs-auto{flex:1 0 0px;width:auto}}@media (min-width:768px){.col-sm-auto{flex:1 0 0px;width:auto}}@media (min-width:992px){.col-md-auto{flex:1 0 0px;width:auto}}@media (min-width:1200px){.col-lg-auto{flex:1 0 0px;width:auto}}@media (min-width:1600px){.col-xlg-auto{flex:1 0 0px;width:auto}}.order-12{order:12}.order-11{order:11}.order-10{order:10}.order-9{order:9}.order-8{order:8}.order-7{order:7}.order-6{order:6}.order-5{order:5}.order-4{order:4}.order-3{order:3}.order-2{order:2}.order-1{order:1}.order-0{order:0}@media only screen and (min-width:576px){.order-xs-12{order:12}.order-xs-11{order:11}.order-xs-10{order:10}.order-xs-9{order:9}.order-xs-8{order:8}.order-xs-7{order:7}.order-xs-6{order:6}.order-xs-5{order:5}.order-xs-4{order:4}.order-xs-3{order:3}.order-xs-2{order:2}.order-xs-1{order:1}.order-xs-0{order:0}}@media only screen and (min-width:768px){.order-sm-12{order:12}.order-sm-11{order:11}.order-sm-10{order:10}.order-sm-9{order:9}.order-sm-8{order:8}.order-sm-7{order:7}.order-sm-6{order:6}.order-sm-5{order:5}.order-sm-4{order:4}.order-sm-3{order:3}.order-sm-2{order:2}.order-sm-1{order:1}.order-sm-0{order:0}}@media only screen and (min-width:992px){.order-md-12{order:12}.order-md-11{order:11}.order-md-10{order:10}.order-md-9{order:9}.order-md-8{order:8}.order-md-7{order:7}.order-md-6{order:6}.order-md-5{order:5}.order-md-4{order:4}.order-md-3{order:3}.order-md-2{order:2}.order-md-1{order:1}.order-md-0{order:0}}@media only screen and (min-width:1200px){.order-lg-12{order:12}.order-lg-11{order:11}.order-lg-10{order:10}.order-lg-9{order:9}.order-lg-8{order:8}.order-lg-7{order:7}.order-lg-6{order:6}.order-lg-5{order:5}.order-lg-4{order:4}.order-lg-3{order:3}.order-lg-2{order:2}.order-lg-1{order:1}.order-lg-0{order:0}}@media only screen and (min-width:1600px){.order-xlg-12{order:12}.order-xlg-11{order:11}.order-xlg-10{order:10}.order-xlg-9{order:9}.order-xlg-8{order:8}.order-xlg-7{order:7}.order-xlg-6{order:6}.order-xlg-5{order:5}.order-xlg-4{order:4}.order-xlg-3{order:3}.order-xlg-2{order:2}.order-xlg-1{order:1}.order-xlg-0{order:0}}.offset-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-9{margin-left:75%;*margin-left:74.9%}.offset-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-6{margin-left:50%;*margin-left:49.9%}.offset-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-3{margin-left:25%;*margin-left:24.9%}.offset-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}@media only screen and (min-width:576px){.offset-xs-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-xs-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-xs-9{margin-left:75%;*margin-left:74.9%}.offset-xs-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-xs-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-xs-6{margin-left:50%;*margin-left:49.9%}.offset-xs-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-xs-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-xs-3{margin-left:25%;*margin-left:24.9%}.offset-xs-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-xs-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-xs-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:768px){.offset-sm-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-sm-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-sm-9{margin-left:75%;*margin-left:74.9%}.offset-sm-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-sm-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-sm-6{margin-left:50%;*margin-left:49.9%}.offset-sm-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-sm-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-sm-3{margin-left:25%;*margin-left:24.9%}.offset-sm-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-sm-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-sm-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:992px){.offset-md-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-md-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-md-9{margin-left:75%;*margin-left:74.9%}.offset-md-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-md-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-md-6{margin-left:50%;*margin-left:49.9%}.offset-md-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-md-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-md-3{margin-left:25%;*margin-left:24.9%}.offset-md-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-md-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-md-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:1200px){.offset-lg-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-lg-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-lg-9{margin-left:75%;*margin-left:74.9%}.offset-lg-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-lg-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-lg-6{margin-left:50%;*margin-left:49.9%}.offset-lg-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-lg-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-lg-3{margin-left:25%;*margin-left:24.9%}.offset-lg-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-lg-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-lg-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:1600px){.offset-xlg-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-xlg-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-xlg-9{margin-left:75%;*margin-left:74.9%}.offset-xlg-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-xlg-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-xlg-6{margin-left:50%;*margin-left:49.9%}.offset-xlg-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-xlg-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-xlg-3{margin-left:25%;*margin-left:24.9%}.offset-xlg-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-xlg-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-xlg-0{margin-left:0;*margin-left:-.1%}}.wrap{flex-wrap:wrap}.no-wrap{flex-wrap:nowrap}.no-wrap [class*=col-]{flex-shrink:1}.wrap-reverse{flex-wrap:wrap-reverse}.direction-row{flex-direction:row}.direction-row-reverse{flex-direction:row-reverse}.direction-column{flex-direction:column}.direction-column-reverse{flex-direction:column-reverse}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-end [class*=col-]{vertical-align:bottom}.align-center{align-items:center}.align-center [class*=col-]{vertical-align:middle}.align-baseline{align-items:baseline}.align-content-start{align-content:flex-start}.align-content-end{align-content:flex-end}.align-content-end [class*=col-]{vertical-align:bottom}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-self-stretch{align-self:stretch}.align-self-start{align-self:flex-start}.align-self-end{align-self:flex-end;vertical-align:bottom}.align-self-center{align-self:center;vertical-align:middle}.align-self-baseline{align-self:baseline;vertical-align:baseline}.justify-start{justify-content:flex-start}.justify-start.grid{text-align:left}.justify-end{justify-content:flex-end}.justify-end.grid{text-align:right;-moz-text-align-last:right;text-align-last:right}.justify-end.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.justify-center{justify-content:center}.justify-center.grid{text-align:center;-moz-text-align-last:center;text-align-last:center}.justify-center.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.justify-space-between{justify-content:space-between}.justify-space-between.grid{text-align:justify;-moz-text-align-last:justify;text-align-last:justify}.justify-space-between.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.justify-space-around{justify-content:space-around}.justify-space-around.grid{text-align:justify;-moz-text-align-last:justify;text-align-last:justify}.justify-space-around.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.grid-bleed [class*=col-]{padding:0}.col-grid{display:flex;flex-direction:column}.col-grid.direction-row{flex-direction:row}.col-bleed{padding:0}.col-bleed-x{padding:15px 0}.col-bleed-y{padding:0 15px}.flex-img{display:block;flex:0 0 auto;max-width:100%;height:auto;width:100%;*width:auto}.flex-footer{width:100%;margin-top:auto}.flex-footer,.flex-footer>:last-child{margin-bottom:0}@media (max-width:575px){.hidden-xxs{display:none}}@media (min-width:576px)and (max-width:767px){.hidden-xs{display:none}}@media (min-width:768px)and (max-width:991px){.hidden-sm{display:none}}@media (min-width:992px)and (max-width:1199px){.hidden-md{display:none}}@media (min-width:1200px)and (max-width:1599px){.hidden-lg{display:none}}@media (min-width:1600px){.hidden-xlg{display:none}}html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.8em 1.2em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1rem}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 1rem}figcaption{margin:.3em 0 0}button,input,optgroup,select,textarea{margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:.9rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .3em}h5{line-height:1.4}h6{line-height:1.618}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.5rem}}@media only screen and (min-width:1600px){.h1,h1{font-size:2.75rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2rem}}@media only screen and (min-width:1600px){.h2,h2{font-size:2.2rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:1.75rem}}@media only screen and (min-width:1600px){.h3,h3{font-size:1.925rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.5rem}}@media only screen and (min-width:1600px){.h4,h4{font-size:1.65rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.25rem}}@media only screen and (min-width:1600px){.h5,h5{font-size:1.375rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1rem}}@media only screen and (min-width:1600px){.h6,h6{font-size:1.1rem}}body,button,input,optgroup,select,textarea{font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400}button,input,optgroup,select,textarea{font-size:.9em;line-height:1.4}body{color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{font-size:1rem}}@media only screen and (min-width:1600px){body{font-size:1.1rem}}@media only screen and (min-width:992px){body{line-height:1.618}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1rem!important}}@media only screen and (min-width:1600px){.text-size-default{font-size:1.1rem!important}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.75rem!important}}@media only screen and (min-width:1600px){.text-size-small{font-size:.825rem!important}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.25rem!important}}@media only screen and (min-width:1600px){.text-size-medium{font-size:1.375rem!important}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.5rem!important}}@media only screen and (min-width:1600px){.text-size-large{font-size:1.65rem!important}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.75rem!important}}@media only screen and (min-width:1600px){.text-size-big{font-size:1.925rem!important}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:2rem!important}}@media only screen and (min-width:1600px){.text-size-mega{font-size:2.2rem!important}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-left-0{margin-left:0!important}.margin-right-0{margin-right:0!important}.padding-left-0{padding-left:0!important}.padding-right-0{padding-right:0!important}.margin-left-1{margin-left:.375rem!important}.margin-right-1{margin-right:.375rem!important}.padding-left-1{padding-left:.375rem!important}.padding-right-1{padding-right:.375rem!important}.margin-left-2{margin-left:.75rem!important}.margin-right-2{margin-right:.75rem!important}.padding-left-2{padding-left:.75rem!important}.padding-right-2{padding-right:.75rem!important}.margin-left-3{margin-left:1.125rem!important}.margin-right-3{margin-right:1.125rem!important}.padding-left-3{padding-left:1.125rem!important}.padding-right-3{padding-right:1.125rem!important}.margin-top-0{margin-top:0!important}@media only screen and (min-width:992px){.margin-top-0{margin-top:0!important}}.margin-bottom-0{margin-bottom:0!important}@media only screen and (min-width:992px){.margin-bottom-0{margin-bottom:0!important}}.padding-top-0{padding-top:0!important}@media only screen and (min-width:992px){.padding-top-0{padding-top:0!important}}.padding-bottom-0{padding-bottom:0!important}@media only screen and (min-width:992px){.padding-bottom-0{padding-bottom:0!important}}.margin-top-1{margin-top:.375rem!important}@media only screen and (min-width:992px){.margin-top-1{margin-top:.75rem!important}}.margin-bottom-1{margin-bottom:.375rem!important}@media only screen and (min-width:992px){.margin-bottom-1{margin-bottom:.75rem!important}}.padding-top-1{padding-top:.375rem!important}@media only screen and (min-width:992px){.padding-top-1{padding-top:.75rem!important}}.padding-bottom-1{padding-bottom:.375rem!important}@media only screen and (min-width:992px){.padding-bottom-1{padding-bottom:.75rem!important}}.margin-top-2{margin-top:.75rem!important}@media only screen and (min-width:992px){.margin-top-2{margin-top:1.5rem!important}}.margin-bottom-2{margin-bottom:.75rem!important}@media only screen and (min-width:992px){.margin-bottom-2{margin-bottom:1.5rem!important}}.padding-top-2{padding-top:.75rem!important}@media only screen and (min-width:992px){.padding-top-2{padding-top:1.5rem!important}}.padding-bottom-2{padding-bottom:.75rem!important}@media only screen and (min-width:992px){.padding-bottom-2{padding-bottom:1.5rem!important}}.margin-top-3{margin-top:1.125rem!important}@media only screen and (min-width:992px){.margin-top-3{margin-top:2.25rem!important}}.margin-bottom-3{margin-bottom:1.125rem!important}@media only screen and (min-width:992px){.margin-bottom-3{margin-bottom:2.25rem!important}}.padding-top-3{padding-top:1.125rem!important}@media only screen and (min-width:992px){.padding-top-3{padding-top:2.25rem!important}}.padding-bottom-3{padding-bottom:1.125rem!important}@media only screen and (min-width:992px){.padding-bottom-3{padding-bottom:2.25rem!important}}.margin-top-4{margin-top:1.5rem!important}@media only screen and (min-width:992px){.margin-top-4{margin-top:3rem!important}}.margin-bottom-4{margin-bottom:1.5rem!important}@media only screen and (min-width:992px){.margin-bottom-4{margin-bottom:3rem!important}}.padding-top-4{padding-top:1.5rem!important}@media only screen and (min-width:992px){.padding-top-4{padding-top:3rem!important}}.padding-bottom-4{padding-bottom:1.5rem!important}@media only screen and (min-width:992px){.padding-bottom-4{padding-bottom:3rem!important}}.margin-top-5{margin-top:1.875rem!important}@media only screen and (min-width:992px){.margin-top-5{margin-top:3.75rem!important}}.margin-bottom-5{margin-bottom:1.875rem!important}@media only screen and (min-width:992px){.margin-bottom-5{margin-bottom:3.75rem!important}}.padding-top-5{padding-top:1.875rem!important}@media only screen and (min-width:992px){.padding-top-5{padding-top:3.75rem!important}}.padding-bottom-5{padding-bottom:1.875rem!important}@media only screen and (min-width:992px){.padding-bottom-5{padding-bottom:3.75rem!important}}.margin-top-6{margin-top:2.25rem!important}@media only screen and (min-width:992px){.margin-top-6{margin-top:4.5rem!important}}.margin-bottom-6{margin-bottom:2.25rem!important}@media only screen and (min-width:992px){.margin-bottom-6{margin-bottom:4.5rem!important}}.padding-top-6{padding-top:2.25rem!important}@media only screen and (min-width:992px){.padding-top-6{padding-top:4.5rem!important}}.padding-bottom-6{padding-bottom:2.25rem!important}@media only screen and (min-width:992px){.padding-bottom-6{padding-bottom:4.5rem!important}}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;text-decoration:none;padding:.5em 1.2em .6em;margin:0 0 1rem}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;padding:.8em 1.2em;background-color:#f7f7f7;margin:0 0 1rem}.code,.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 1rem}.field__select,.field__text{display:block;width:100%;line-height:1.618;padding:.4em .6em;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:1rem;font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.field__label{display:inline-block;width:100%}.field--valid .field__label{color:#5cb85c}.field--error .field__label{color:#d9534f}.field__text{margin:0;border:1px solid #dfdfdf}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{padding:.3em .5em;border:1px solid #dfdfdf;background-color:#fff}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:.3em 0 0}.field--valid .field__choice__checked,.field--valid .field__choice__unchecked{fill:#5cb85c}.field--error .field__choice__checked,.field--error .field__choice__unchecked{fill:#d9534f}.field__panel{padding:.3em .6em}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.group{list-style:none}.group,.group li{margin:0;padding:0}.group--horizontal .group__item{display:inline-block}.group--separate .group__item:after{margin:0 .3em;content:"/"}.group--separate .group__item:last-child:after{display:none}.hero{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.hero--top{background-position:top}.hero--bottom{background-position:bottom}.hero--contain{background-size:contain}.icon{width:1.1em;height:1.1em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;line-height:1.4}@media only screen and (min-width:992px){.icon{line-height:1.618}}.button .icon{margin:-.2em 0 0}.icon-color-primary{fill:#f18f01!important}.icon-color-secondary{fill:#b3b2af!important}.icon-color-success{fill:#5cb85c!important}.icon-color-warning{fill:#f0ad4e!important}.icon-color-danger{fill:#d9534f!important}.icon-color-info{fill:#0090d4!important}.icon-color-grey{fill:#7a7a7a!important}.icon-color-grey-light{fill:#f7f7f7!important}.icon-color-grey-dark{fill:#4a4a4a!important}.icon-color-white{fill:#fff!important}.img-responsive{display:block;max-width:100%;height:auto}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.modal{position:absolute;z-index:100;width:100%;max-width:50%;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:1em;transform:translate(0)}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.panel{background-color:#f7f7f7}.panel__inner{padding:.8em 1.2em}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f7f7f7}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{padding:.8em 1.2em;text-align:left;border-bottom:1px solid #dfdfdf}.table th{border-bottom-width:2px}.header{text-align:center;max-width:100%}.header a{text-decoration:none}.header a .icon--big{font-size:6rem}.header a:hover{color:#f18f01}.header .group__item{margin-right:10px}.header--fixed{position:fixed;top:0;left:0;width:100%;z-index:91}.h3__icon{display:inline-block;border-radius:50%;padding:.9em;margin:0 0 .5em}.h3__icon .icon{font-size:3rem!important}.container{max-width:1200px}.lg-only,.md,.md-only,.sm{display:none}@media only screen and (min-width:768px){.sm{display:block}}@media only screen and (min-width:992px){.md{display:block}}@media only screen and (min-width:992px)and (max-width:1199px){.md-only{display:block}}@media only screen and (min-width:1200px)and (max-width:1599px){.lg-only{display:block}}.triangle-bottom,.triangle-left,.triangle-right,.triangle-top{display:block}.triangle-left{border-right:1.5em solid #f18f01}.triangle-left,.triangle-right{width:0;height:0;content:"";z-index:2;border-bottom:1em solid transparent;border-top:1em solid transparent}.triangle-right{border-left:1.5em solid #f18f01}.triangle-top{border-bottom:1.5em solid #f18f01}.triangle-bottom,.triangle-top{width:0;height:0;content:"";z-index:2;border-left:1em solid transparent;border-right:1em solid transparent}.triangle-bottom{border-top:1.5em solid #f18f01} \ No newline at end of file diff --git a/dist/examples/components.html b/dist/examples/components.html new file mode 100644 index 0000000..4b641f1 --- /dev/null +++ b/dist/examples/components.html @@ -0,0 +1,240 @@ +Components | Crispy CSS
Crispy CSS

Components

Button

Scss:

$crispy__button__font-family: $crispy__font-family;
+$crispy__button__font-weight: $crispy__font-weight;
+$crispy__button__font-size: $crispy__font-size;
+$crispy__button__font-size-breakpoints: $crispy__font-size__breakpoints;
+
+$crispy__button__padding: 0.3em 0.8em;
+$crispy__button__padding-breakpoints: (
+    $crispy__md: 0.4em 1.2em
+);
+

Html:

<button class="button"></button>
+<button class="button text-size-medium"></button>
+<button class="button text-size-large"></button>
+<button class="button width-100"></button>

Code

Scss:

$crispy__code__padding: $crispy__padding;
+$crispy__code__padding-breakpoints: $crispy__padding-breakpoints;
+$crispy__code__margin: $crispy__margin;
+$crispy__code__border: $crispy__border;
+$crispy__code__background-color: $crispy__color-grey-light;
+

Html:

<pre class="code"><code></code></pre>

Fields

Scss:

$crispy__field__margin: $crispy__margin;
+$crispy__field__border: $crispy__border;
+
+$crispy__field__color--valid: $crispy__color-success;
+$crispy__field__color--error: $crispy__color-danger;
+
+$crispy__field__border-color--focus: $crispy__color-primary;
+$crispy__field__border-color--valid: $crispy__color-success;
+$crispy__field__border-color--error: $crispy__color-danger;
+
+$crispy__field__choice__checked__color: $crispy__color-success;
+$crispy__field__choice__unchecked__color: $crispy__color-danger;
+
+$crispy__field__input__padding: 0.4em 0.6em;
+$crispy__field__input__color: $crispy__color-text;
+
+$crispy__field__select__padding: 0.3em 0.5em;
+$crispy__field__panel__padding: 0.3em 0.6em;
+
+$crispy__field__select__background-color: white;
+$crispy__field__select__border: $crispy__border;

Input / Textarea

<div class="field">
+    <input class="field__text" type="text" />
+</div>
+<div class="field field--valid">
+    <label class="field__label">
+        Text
+        <input type="text" class="field__text" />
+    </label>
+    <div class="field__panel">
+        error item 1
+    </div>
+</div>
+<div class="field field--error">
+    <label class="field__label">
+        Text
+        <input type="text" class="field__text" />
+    </label>
+    <div class="field__panel">
+        error item 1
+    </div>
+</div>
+<div class="field">
+    <label class="field__label">
+        Textarea
+        <textarea class="field__text"></textarea>
+    </label>
+</div>
error item 1
error item 1

Checkbox

<div class="field">
+    <input id="field__checkbox__1" class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
+    <label for="field__checkbox__1" class="field__label">
+        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
+            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
+        </svg>
+        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
+            <use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
+        </svg>
+        checkbox 1
+    </label>
+    <input id="field__checkbox__2" class="field__choice" type="checkbox" name="field__checkbox__2" value="true" />
+    <label for="field__checkbox__2" class="field__label">
+        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
+            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
+        </svg>
+        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
+            <use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
+        </svg>
+        checkbox 2
+    </label>
+</div>
error item 1

Radio

<div class="field">
+    <input id="field__radio__1" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
+    <label for="field__radio__1" class="field__label">
+        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
+            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
+        </svg>
+        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
+            <use xlink:href="symbol-defs.svg#icon-toggle-right" />
+        </svg>
+        radio item 1
+    </label><br />
+    <input id="field__radio__2" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
+    <label for="field__radio__2" class="field__label">
+        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
+            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
+        </svg>
+        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
+            <use xlink:href="symbol-defs.svg#icon-toggle-right" />
+        </svg>
+        radio item 2
+    </label>
+</div>
+<div class="field field--error">
+    <input id="field__radio__3" class="field__choice" type="radio" name="field__radio__2[]" value="true" />
+    <label for="field__radio__3" class="field__label">
+        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
+            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
+        </svg>
+        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
+            <use xlink:href="symbol-defs.svg#icon-toggle-right" />
+        </svg>
+        radio item 1
+    </label><br />
+    <input id="field__radio__4" class="field__choice" type="radio" name="field__radio__2[]" value="true" />
+    <label for="field__radio__4" class="field__label">
+        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
+            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
+        </svg>
+        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
+            <use xlink:href="symbol-defs.svg#icon-toggle-right" />
+        </svg>
+        radio item 2
+    </label>
+    <div class="field__panel">
+        error item 1
+    </div>
+</div>


error item 1

Select

<div class="field">
+    <label class="field__label">
+        Select Item
+        <select class="field__select">
+            <option>select item 1</option>
+            <option>select item 2</option>
+            <option>select item 3</option>
+        </select>
+    </label>
+</div>
+<div class="field field--error">
+    <label class="field__label">
+        Select Item
+        <select class="field__select">
+            <option>select item 1</option>
+            <option>select item 2</option>
+            <option>select item 3</option>
+        </select>
+        <div class="field__panel">
+            error item 1
+        </div>
+    </label>
+</div>

Group

Scss:

$crispy__group__margin: 0.3em !default;
+$crispy__group__character: '/' !default;
+$crispy__group__character-margin: 0 $crispy__group__margin 0 !default;

Html:

<nav>
+    <ul class="group group--hr">
+        <li class="group__item">first item</li>
+        <li class="group__item">second item</li>
+        <li class="group__item">third item</li>
+    </ul>
+</nav>

Hero

Html:

<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
<div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>

Icon

Scss:

$crispy__icon__size: 1.15em;
+

Html:

<svg class="icon text-size-small" aria-hidden="true">
+     <use xlink:href="symbol-defs.svg#icon-flask"></use>
+</svg>
+<svg class="icon" aria-hidden="true">
+     <use xlink:href="symbol-defs.svg#icon-flask"></use>
+</svg>
+<svg class="icon text-size-large" aria-hidden="true">
+     <use xlink:href="symbol-defs.svg#icon-flask"></use>
+</svg>
+<svg class="icon text-size-big" aria-hidden="true">
+     <use xlink:href="symbol-defs.svg#icon-flask"></use>
+</svg>
+<svg class="icon text-size-mega" aria-hidden="true">
+     <use xlink:href="symbol-defs.svg#icon-flask"></use>
+</svg>
+<svg class="icon icon-color-danger" aria-hidden="true">
+     <use xlink:href="symbol-defs.svg#icon-flask"></use>
+</svg>;

Media

Html:

<img class="img-responsive" src="https://picsum.photos/400" />
+<figure>
+    <img class="img-responsive" src="https://picsum.photos/400" />
+    <figcaption class="text-center">Lorem Ipsum</figcaption>
+</figure>
+
Lorem Ipsum

Panel

Scss:

$crispy__panel__inner-padding: $crispy__padding;
+$crispy__panel__inner-padding-breakpoints: $crispy__padding-breakpoints;
+$crispy__panel__background-color: $crispy__color-grey-light;
+

Html:

<div class="panel">
+    <div class="panel__inner">
+        Lorem Ipsum
+    </div>
+</div>
Lorem Ipsum

Progress

Scss:

$crispy__progress__height: 30px;
+$crispy__progress__background-color: $crispy__color-primary;
+$crispy__progress__border-width: 1px;
+$crispy__progress__border-color: $crispy__color-border;
+

Html:

<div class="progress">
+    <div class="progress__inner" style="width: 80%"></div>
+</div>
+

Modal

Scss:

$crispy__modal__max-width-breakpoints: (
+    $crispy__md: 50%
+);
+
+$crispy__modal__margin-breakpoints: (
+    $crispy__md: 0.75em
+);
+
+$crispy__modal__z-index: zIndex('modal');

Html:

<div class="modal modal--bottom width-100">
+    <div class="panel">
+        <div class="panel__inner">
+            Lorem Ipsum
+        </div>
+    </div>
+</div>
.modal--top-left
.modal--top-right
.modal
.modal--bottom-left
.modal--bottom-right

Table

Scss:

$crispy__table__padding: $crispy__padding !default;
+$crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;
+
+$crispy__table__td__border: 1px solid $crispy__color-border !default;
+$crispy__table__th__border-width: 2px !default;
+
+$crispy__table__color: $crispy__color-text !default;
+$crispy__table__striped__background-color: $crispy__color-grey-light !default;

Html:

<table class="table table--striped margin-bottom-2">
+    <thead>
+        <tr>
+            <th>name</th>
+            <th>age</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Mr. Brown</td>
+            <td>43</td>
+        </tr>
+        <tr>
+            <td>Mr. Magenta</td>
+            <td>32</td>
+        </tr>
+        <tr>
+            <td>Mr. White</td>
+            <td>45</td>
+        </tr>
+    </tbody>
+</table>
nameage
Mr. Brown43
Mr. Magenta32
Mr. White45
\ No newline at end of file diff --git a/dist/examples/core.html b/dist/examples/core.html new file mode 100644 index 0000000..5ff5864 --- /dev/null +++ b/dist/examples/core.html @@ -0,0 +1 @@ +Core | Crispy CSS
Crispy CSS

Core

Normalize

a

Link

Typography

Heading

Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6

abbr

Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats

blockquote

Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.

hr

paragraph

Glossier viral occupy mixtape pok pok.

mark

Pug before they four loko Deep v bespoke

list

  • item 1
  • item 2
    • child item 1
    • child item 2
  1. item 1
  2. item 2
defined title 1
defined item 1
\ No newline at end of file diff --git a/dist/examples/functions.html b/dist/examples/functions.html new file mode 100644 index 0000000..0252e96 --- /dev/null +++ b/dist/examples/functions.html @@ -0,0 +1,4 @@ +Functions | Crispy CSS
Crispy CSS

Functions

stripUnit()

Sass:

stripUnit(10px);

Returns value without unit.

zIndex(name)

Sass:

zIndex('modal');

Returns value from $crispy__z-index.

Sass:

$crispy__z-index: (
+    'overlay': 90,
+    'modal'  : 100
+);
\ No newline at end of file diff --git a/dist/examples/getstarted.html b/dist/examples/getstarted.html new file mode 100644 index 0000000..18bb76e --- /dev/null +++ b/dist/examples/getstarted.html @@ -0,0 +1,16 @@ +Get Started | Crispy CSS
Crispy CSS

Get Started

Installation

npm install crispy-css

SCSS

@import "crispy";

Now include Mixins you need. Components and Modifiziers only works if you include them,

@include crispy__button();
+@include crispy__code();
+@include crispy__field();
+@include crispy__group();
+@include crispy__hero();
+@include crispy__icon();
+@include crispy__media();
+@include crispy__modal();
+@include crispy__overlay();
+@include crispy__panel();
+@include crispy__progress();
+@include crispy__table();

For Custom Variables add a File before importing Crispy,

@import
+    "config",
+    "crispy";

If you need all, mixins will be included,

@import
+    "crispy-all";

Only need Core and Modifiziers?

@import
+    "crispy-minimal";

CSS

For using CSS you can use crispy-all.css for all Styles or crispy-mininmal.css without Components.

Example

You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.

Site

Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand.

Templates

Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.

\ No newline at end of file diff --git a/dist/examples/getting-started.html b/dist/examples/getting-started.html new file mode 100644 index 0000000..e5d8caf --- /dev/null +++ b/dist/examples/getting-started.html @@ -0,0 +1,16 @@ +Getting started! | Crispy CSS
Crispy CSS

Getting started!

Installation

npm install crispy-css

Scss

@import "crispy";

Now include Mixins you need. Components and Modifiziers only works if you include them,

@include crispy__button();
+@include crispy__code();
+@include crispy__field();
+@include crispy__group();
+@include crispy__hero();
+@include crispy__icon();
+@include crispy__media();
+@include crispy__modal();
+@include crispy__overlay();
+@include crispy__panel();
+@include crispy__progress();
+@include crispy__table();

For Custom Variables add a File before importing Crispy,

@import
+    "config",
+    "crispy";

If you need all, mixins will be included,

@import
+    "crispy-all";

Only need Core and Modifiziers?

@import
+    "crispy-minimal";

CSS

For using CSS you can use crispy-all.css for all Styles or crispy-mininmal.css without Components.

Example

You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.

Site

Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand.

Templates

Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.

\ No newline at end of file diff --git a/dist/examples/helpers.html b/dist/examples/helpers.html new file mode 100644 index 0000000..f7e98c7 --- /dev/null +++ b/dist/examples/helpers.html @@ -0,0 +1 @@ +Helpers | Crispy CSS
Crispy CSS

Helpers

Border

.round
.radiusless
.bordered
.rounded
.borderless

Margin / Padding

padding-bottom-0
padding-bottom-1
padding-bottom-2
padding-bottom-3
padding-bottom-4
padding-bottom-5
padding-bottom-6

Typography

text-left

text-center

text-right

text-justify
I'm baby literally tousled ramps 8-bit franzen, yuccie before they sold out stumptown XOXO palo santo. Blog taiyaki vegan crucifix. Mustache raw denim shabby chic vegan hexagon aesthetic deep v tofu man braid church-key pork belly unicorn pinterest. Palo santo heirloom banh mi waistcoat, neutra listicle selvage sustainable adaptogen tote bag art party migas ethical PBR&B 8-bit. Chillwave hammock VHS post-ironic, tumblr brunch normcore blue bottle chambray. Austin vice microdosing celiac. Bushwick blog farm-to-table succulents mlkshk actually.

text-italic

text-light

text-normal

text-medium

text-bold

text-capitalize

text-uppercase

text-smaller

text-crossed

text-underline

Width

width-25
width-50
width-75
width-100
\ No newline at end of file diff --git a/dist/example/img/gaming-circus.jpg b/dist/examples/img/gaming-circus.jpg similarity index 100% rename from dist/example/img/gaming-circus.jpg rename to dist/examples/img/gaming-circus.jpg diff --git a/dist/example/img/tentakelfabrik.jpg b/dist/examples/img/tentakelfabrik.jpg similarity index 100% rename from dist/example/img/tentakelfabrik.jpg rename to dist/examples/img/tentakelfabrik.jpg diff --git a/dist/example/img/trinkkofi.jpg b/dist/examples/img/trinkkofi.jpg similarity index 100% rename from dist/example/img/trinkkofi.jpg rename to dist/examples/img/trinkkofi.jpg diff --git a/dist/examples/imprint.html b/dist/examples/imprint.html new file mode 100644 index 0000000..6dddcf4 --- /dev/null +++ b/dist/examples/imprint.html @@ -0,0 +1 @@ +Imprint | Crispy CSS
Crispy CSS

Imprint

\ No newline at end of file diff --git a/dist/examples/index.html b/dist/examples/index.html new file mode 100644 index 0000000..2161998 --- /dev/null +++ b/dist/examples/index.html @@ -0,0 +1 @@ +Crispy CSS | Lightweight CSS Framework for Building Apps and Websites

Ugly

Yes, this Framework has no fancy Layout or shiny Elements, because what created with Crispy CSS could be fancy. This Framework adds basic styles and support your Work.

Helpers

Mixins, Functions and Modifiers make your Workflow simpler. Only import Components you really need and make your Work lightweight.

Coding Style

Crispy CSS uses BEM, but an simpler approach of it. BEM is good to show dependencies in Components and add structure to your Styles.

Get started! Visit on Github

Apps and Websites that have been crafted

Tentakelfabrik

Gaming Circus

Trinkkofi

\ No newline at end of file diff --git a/dist/examples/mixins.html b/dist/examples/mixins.html new file mode 100644 index 0000000..eb66e1d --- /dev/null +++ b/dist/examples/mixins.html @@ -0,0 +1,49 @@ +Mixins | Crispy CSS
Crispy CSS

Mixins

Triangle

Sass:

.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
+display: block;
+}
+
+.triangle-left {
+@include triangle('left', $crispy__color-primary);
+}
+
+.triangle-right {
+@include triangle('right', $crispy__color-primary);
+}
+
+.triangle-top {
+@include triangle('top', $crispy__color-primary);
+}
+
+.triangle-bottom {
+@include triangle('bottom', $crispy__color-primary);
+}
+

Media Queries

These @mixins were used with the Breakpoints from http://reflexgrid.com/docs/. Reflex-Grid is also used as grid for this Site.

  • xs 576px
  • sm 768px
  • md 992px
  • lg 1200px
  • xlg 1600px

Html:

<div class="sm">sm</div>
+<div class="md">md</div>
+<div class="md-only">md-only</div>
+<div class="lg-only">lg-only</div>

Sass:

.sm, .md, .md-only, .lg-only {
+display: none;
+}
+
+.sm {
+@include crispy__media-sm() {
+display: block;
+}
+}
+
+.md {
+@include crispy__media-md() {
+display: block;
+}
+}
+
+.md-only {
+@include crispy__media-md-only() {
+display: block;
+}
+}
+
+.lg-only {
+@include crispy__media-lg-only() {
+display: block;
+}
+}
sm
md
md-only
lg-only
\ No newline at end of file diff --git a/dist/examples/privacy-policy.html b/dist/examples/privacy-policy.html new file mode 100644 index 0000000..ac46588 --- /dev/null +++ b/dist/examples/privacy-policy.html @@ -0,0 +1 @@ +Privacy Policy | Crispy CSS
Crispy CSS

Privacy Policy

\ No newline at end of file diff --git a/dist/examples/styles.css b/dist/examples/styles.css new file mode 100644 index 0000000..20b29d0 --- /dev/null +++ b/dist/examples/styles.css @@ -0,0 +1 @@ +.container,.container-full{box-sizing:border-box;width:100%;margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}.container-full .grid,.container .grid{margin-right:-15px;margin-left:-15px}@media (min-width:576px){.container{max-width:576px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:992px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1600px){.container{max-width:1600px}}.grid{box-sizing:border-box;display:block;display:flex;flex-wrap:wrap;padding:0;margin:0 auto;position:relative;letter-spacing:-.31em;*letter-spacing:normal;word-spacing:-.43em;list-style-type:none}.grid:after,.grid:before,[class*=col-]{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;white-space:normal}[class*=col-]{position:relative;width:100%;vertical-align:top;padding:15px;display:inline-block;*display:inline;zoom:1}[class*=col-]:after,[class*=col-]:before{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;white-space:normal}[class*=col-] .grid{flex:1 1 auto;margin:-15px}.col-12{width:100%;*width:99.9%}.col-11{width:91.6666666667%;*width:91.5666666667%}.col-10{width:83.3333333333%;*width:83.2333333333%}.col-9{width:75%;*width:74.9%}.col-8{width:66.6666666667%;*width:66.5666666667%}.col-7{width:58.3333333333%;*width:58.2333333333%}.col-6{width:50%;*width:49.9%}.col-5{width:41.6666666667%;*width:41.5666666667%}.col-4{width:33.3333333333%;*width:33.2333333333%}.col-3{width:25%;*width:24.9%}.col-2{width:16.6666666667%;*width:16.5666666667%}.col-1{width:8.3333333333%;*width:8.2333333333%}@media (min-width:576px){.col-xs-12{width:100%;*width:99.9%}.col-xs-11{width:91.6666666667%;*width:91.5666666667%}.col-xs-10{width:83.3333333333%;*width:83.2333333333%}.col-xs-9{width:75%;*width:74.9%}.col-xs-8{width:66.6666666667%;*width:66.5666666667%}.col-xs-7{width:58.3333333333%;*width:58.2333333333%}.col-xs-6{width:50%;*width:49.9%}.col-xs-5{width:41.6666666667%;*width:41.5666666667%}.col-xs-4{width:33.3333333333%;*width:33.2333333333%}.col-xs-3{width:25%;*width:24.9%}.col-xs-2{width:16.6666666667%;*width:16.5666666667%}.col-xs-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:768px){.col-sm-12{width:100%;*width:99.9%}.col-sm-11{width:91.6666666667%;*width:91.5666666667%}.col-sm-10{width:83.3333333333%;*width:83.2333333333%}.col-sm-9{width:75%;*width:74.9%}.col-sm-8{width:66.6666666667%;*width:66.5666666667%}.col-sm-7{width:58.3333333333%;*width:58.2333333333%}.col-sm-6{width:50%;*width:49.9%}.col-sm-5{width:41.6666666667%;*width:41.5666666667%}.col-sm-4{width:33.3333333333%;*width:33.2333333333%}.col-sm-3{width:25%;*width:24.9%}.col-sm-2{width:16.6666666667%;*width:16.5666666667%}.col-sm-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:992px){.col-md-12{width:100%;*width:99.9%}.col-md-11{width:91.6666666667%;*width:91.5666666667%}.col-md-10{width:83.3333333333%;*width:83.2333333333%}.col-md-9{width:75%;*width:74.9%}.col-md-8{width:66.6666666667%;*width:66.5666666667%}.col-md-7{width:58.3333333333%;*width:58.2333333333%}.col-md-6{width:50%;*width:49.9%}.col-md-5{width:41.6666666667%;*width:41.5666666667%}.col-md-4{width:33.3333333333%;*width:33.2333333333%}.col-md-3{width:25%;*width:24.9%}.col-md-2{width:16.6666666667%;*width:16.5666666667%}.col-md-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:1200px){.col-lg-12{width:100%;*width:99.9%}.col-lg-11{width:91.6666666667%;*width:91.5666666667%}.col-lg-10{width:83.3333333333%;*width:83.2333333333%}.col-lg-9{width:75%;*width:74.9%}.col-lg-8{width:66.6666666667%;*width:66.5666666667%}.col-lg-7{width:58.3333333333%;*width:58.2333333333%}.col-lg-6{width:50%;*width:49.9%}.col-lg-5{width:41.6666666667%;*width:41.5666666667%}.col-lg-4{width:33.3333333333%;*width:33.2333333333%}.col-lg-3{width:25%;*width:24.9%}.col-lg-2{width:16.6666666667%;*width:16.5666666667%}.col-lg-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:1600px){.col-xlg-12{width:100%;*width:99.9%}.col-xlg-11{width:91.6666666667%;*width:91.5666666667%}.col-xlg-10{width:83.3333333333%;*width:83.2333333333%}.col-xlg-9{width:75%;*width:74.9%}.col-xlg-8{width:66.6666666667%;*width:66.5666666667%}.col-xlg-7{width:58.3333333333%;*width:58.2333333333%}.col-xlg-6{width:50%;*width:49.9%}.col-xlg-5{width:41.6666666667%;*width:41.5666666667%}.col-xlg-4{width:33.3333333333%;*width:33.2333333333%}.col-xlg-3{width:25%;*width:24.9%}.col-xlg-2{width:16.6666666667%;*width:16.5666666667%}.col-xlg-1{width:8.3333333333%;*width:8.2333333333%}}.col-auto{flex:1 0 0px;width:auto}@media (min-width:576px){.col-xs-auto{flex:1 0 0px;width:auto}}@media (min-width:768px){.col-sm-auto{flex:1 0 0px;width:auto}}@media (min-width:992px){.col-md-auto{flex:1 0 0px;width:auto}}@media (min-width:1200px){.col-lg-auto{flex:1 0 0px;width:auto}}@media (min-width:1600px){.col-xlg-auto{flex:1 0 0px;width:auto}}.order-12{order:12}.order-11{order:11}.order-10{order:10}.order-9{order:9}.order-8{order:8}.order-7{order:7}.order-6{order:6}.order-5{order:5}.order-4{order:4}.order-3{order:3}.order-2{order:2}.order-1{order:1}.order-0{order:0}@media only screen and (min-width:576px){.order-xs-12{order:12}.order-xs-11{order:11}.order-xs-10{order:10}.order-xs-9{order:9}.order-xs-8{order:8}.order-xs-7{order:7}.order-xs-6{order:6}.order-xs-5{order:5}.order-xs-4{order:4}.order-xs-3{order:3}.order-xs-2{order:2}.order-xs-1{order:1}.order-xs-0{order:0}}@media only screen and (min-width:768px){.order-sm-12{order:12}.order-sm-11{order:11}.order-sm-10{order:10}.order-sm-9{order:9}.order-sm-8{order:8}.order-sm-7{order:7}.order-sm-6{order:6}.order-sm-5{order:5}.order-sm-4{order:4}.order-sm-3{order:3}.order-sm-2{order:2}.order-sm-1{order:1}.order-sm-0{order:0}}@media only screen and (min-width:992px){.order-md-12{order:12}.order-md-11{order:11}.order-md-10{order:10}.order-md-9{order:9}.order-md-8{order:8}.order-md-7{order:7}.order-md-6{order:6}.order-md-5{order:5}.order-md-4{order:4}.order-md-3{order:3}.order-md-2{order:2}.order-md-1{order:1}.order-md-0{order:0}}@media only screen and (min-width:1200px){.order-lg-12{order:12}.order-lg-11{order:11}.order-lg-10{order:10}.order-lg-9{order:9}.order-lg-8{order:8}.order-lg-7{order:7}.order-lg-6{order:6}.order-lg-5{order:5}.order-lg-4{order:4}.order-lg-3{order:3}.order-lg-2{order:2}.order-lg-1{order:1}.order-lg-0{order:0}}@media only screen and (min-width:1600px){.order-xlg-12{order:12}.order-xlg-11{order:11}.order-xlg-10{order:10}.order-xlg-9{order:9}.order-xlg-8{order:8}.order-xlg-7{order:7}.order-xlg-6{order:6}.order-xlg-5{order:5}.order-xlg-4{order:4}.order-xlg-3{order:3}.order-xlg-2{order:2}.order-xlg-1{order:1}.order-xlg-0{order:0}}.offset-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-9{margin-left:75%;*margin-left:74.9%}.offset-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-6{margin-left:50%;*margin-left:49.9%}.offset-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-3{margin-left:25%;*margin-left:24.9%}.offset-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}@media only screen and (min-width:576px){.offset-xs-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-xs-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-xs-9{margin-left:75%;*margin-left:74.9%}.offset-xs-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-xs-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-xs-6{margin-left:50%;*margin-left:49.9%}.offset-xs-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-xs-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-xs-3{margin-left:25%;*margin-left:24.9%}.offset-xs-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-xs-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-xs-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:768px){.offset-sm-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-sm-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-sm-9{margin-left:75%;*margin-left:74.9%}.offset-sm-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-sm-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-sm-6{margin-left:50%;*margin-left:49.9%}.offset-sm-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-sm-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-sm-3{margin-left:25%;*margin-left:24.9%}.offset-sm-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-sm-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-sm-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:992px){.offset-md-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-md-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-md-9{margin-left:75%;*margin-left:74.9%}.offset-md-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-md-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-md-6{margin-left:50%;*margin-left:49.9%}.offset-md-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-md-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-md-3{margin-left:25%;*margin-left:24.9%}.offset-md-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-md-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-md-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:1200px){.offset-lg-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-lg-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-lg-9{margin-left:75%;*margin-left:74.9%}.offset-lg-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-lg-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-lg-6{margin-left:50%;*margin-left:49.9%}.offset-lg-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-lg-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-lg-3{margin-left:25%;*margin-left:24.9%}.offset-lg-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-lg-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-lg-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:1600px){.offset-xlg-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-xlg-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-xlg-9{margin-left:75%;*margin-left:74.9%}.offset-xlg-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-xlg-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-xlg-6{margin-left:50%;*margin-left:49.9%}.offset-xlg-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-xlg-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-xlg-3{margin-left:25%;*margin-left:24.9%}.offset-xlg-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-xlg-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-xlg-0{margin-left:0;*margin-left:-.1%}}.wrap{flex-wrap:wrap}.no-wrap{flex-wrap:nowrap}.no-wrap [class*=col-]{flex-shrink:1}.wrap-reverse{flex-wrap:wrap-reverse}.direction-row{flex-direction:row}.direction-row-reverse{flex-direction:row-reverse}.direction-column{flex-direction:column}.direction-column-reverse{flex-direction:column-reverse}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-end [class*=col-]{vertical-align:bottom}.align-center{align-items:center}.align-center [class*=col-]{vertical-align:middle}.align-baseline{align-items:baseline}.align-content-start{align-content:flex-start}.align-content-end{align-content:flex-end}.align-content-end [class*=col-]{vertical-align:bottom}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-self-stretch{align-self:stretch}.align-self-start{align-self:flex-start}.align-self-end{align-self:flex-end;vertical-align:bottom}.align-self-center{align-self:center;vertical-align:middle}.align-self-baseline{align-self:baseline;vertical-align:baseline}.justify-start{justify-content:flex-start}.justify-start.grid{text-align:left}.justify-end{justify-content:flex-end}.justify-end.grid{text-align:right;-moz-text-align-last:right;text-align-last:right}.justify-end.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.justify-center{justify-content:center}.justify-center.grid{text-align:center;-moz-text-align-last:center;text-align-last:center}.justify-center.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.justify-space-between{justify-content:space-between}.justify-space-between.grid{text-align:justify;-moz-text-align-last:justify;text-align-last:justify}.justify-space-between.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.justify-space-around{justify-content:space-around}.justify-space-around.grid{text-align:justify;-moz-text-align-last:justify;text-align-last:justify}.justify-space-around.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.grid-bleed [class*=col-]{padding:0}.col-grid{display:flex;flex-direction:column}.col-grid.direction-row{flex-direction:row}.col-bleed{padding:0}.col-bleed-x{padding:15px 0}.col-bleed-y{padding:0 15px}.flex-img{display:block;flex:0 0 auto;max-width:100%;height:auto;width:100%;*width:auto}.flex-footer{width:100%;margin-top:auto}.flex-footer,.flex-footer>:last-child{margin-bottom:0}@media (max-width:575px){.hidden-xxs{display:none}}@media (min-width:576px)and (max-width:767px){.hidden-xs{display:none}}@media (min-width:768px)and (max-width:991px){.hidden-sm{display:none}}@media (min-width:992px)and (max-width:1199px){.hidden-md{display:none}}@media (min-width:1200px)and (max-width:1599px){.hidden-lg{display:none}}@media (min-width:1600px){.hidden-xlg{display:none}}html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}figure{margin:0 0 1rem}figcaption{margin:.3em 0 0}button,input,optgroup,select,textarea{margin:0}button,input,label,optgroup,select,textarea{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){button,input,label,optgroup,select,textarea{font-size:1rem;line-height:1.618}}fieldset{padding:.3em .45em}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}progress{vertical-align:baseline}details{display:block}summary{display:list-item}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:1rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1.1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .3em}h5,h6{line-height:1.4}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.82rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.28rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.01rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.74rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.47rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.2rem}}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:70%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.3em .45em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1rem}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}body{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{line-height:1.618;font-size:1rem}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1rem}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.775rem}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.225rem}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.45rem}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.675rem}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:1.9rem}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.border-color-primary{border-color:#f18f01!important}.border-color-secondary{border-color:#b3b2af!important}.border-color-success{border-color:#5cb85c!important}.border-color-warning{border-color:#f0ad4e!important}.border-color-danger{border-color:#d9534f!important}.border-color-info{border-color:#0090d4!important}.border-color-grey{border-color:#7a7a7a!important}.border-color-grey-light{border-color:#f7f7f7!important}.border-color-grey-dark{border-color:#4a4a4a!important}.border-color-white{border-color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:3px!important}.round{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-bottom-0{margin-bottom:0!important}.padding-top-0{padding-top:0!important}.padding-bottom-0{padding-bottom:0!important}.margin-left-0{margin-left:0!important}.margin-right-0{margin-right:0!important}.padding-left-0{padding-left:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:4px!important}@media only screen and (min-width:992px){.margin-top-1{margin-top:6px!important}}.margin-bottom-1{margin-bottom:4px!important}@media only screen and (min-width:992px){.margin-bottom-1{margin-bottom:6px!important}}.padding-top-1{padding-top:8px!important}@media only screen and (min-width:992px){.padding-top-1{padding-top:6px!important}}.padding-bottom-1{padding-bottom:8px!important}@media only screen and (min-width:992px){.padding-bottom-1{padding-bottom:6px!important}}.margin-left-1{margin-left:8px!important}@media only screen and (min-width:992px){.margin-left-1{margin-left:6px!important}}.margin-right-1{margin-right:8px!important}@media only screen and (min-width:992px){.margin-right-1{margin-right:6px!important}}.padding-left-1{padding-left:8px!important}@media only screen and (min-width:992px){.padding-left-1{padding-left:6px!important}}.padding-right-1{padding-right:8px!important}@media only screen and (min-width:992px){.padding-right-1{padding-right:6px!important}}.margin-top-2{margin-top:16px!important}@media only screen and (min-width:992px){.margin-top-2{margin-top:24px!important}}.margin-bottom-2{margin-bottom:16px!important}@media only screen and (min-width:992px){.margin-bottom-2{margin-bottom:24px!important}}.padding-top-2{padding-top:16px!important}@media only screen and (min-width:992px){.padding-top-2{padding-top:24px!important}}.padding-bottom-2{padding-bottom:16px!important}@media only screen and (min-width:992px){.padding-bottom-2{padding-bottom:24px!important}}.margin-left-2{margin-left:16px!important}@media only screen and (min-width:992px){.margin-left-2{margin-left:24px!important}}.margin-right-2{margin-right:16px!important}@media only screen and (min-width:992px){.margin-right-2{margin-right:24px!important}}.padding-left-2{padding-left:16px!important}@media only screen and (min-width:992px){.padding-left-2{padding-left:24px!important}}.padding-right-2{padding-right:16px!important}@media only screen and (min-width:992px){.padding-right-2{padding-right:24px!important}}.margin-top-3{margin-top:36px!important}@media only screen and (min-width:992px){.margin-top-3{margin-top:54px!important}}.margin-bottom-3{margin-bottom:36px!important}@media only screen and (min-width:992px){.margin-bottom-3{margin-bottom:54px!important}}.padding-top-3{padding-top:24px!important}@media only screen and (min-width:992px){.padding-top-3{padding-top:54px!important}}.padding-bottom-3{padding-bottom:24px!important}@media only screen and (min-width:992px){.padding-bottom-3{padding-bottom:54px!important}}.margin-top-4{margin-top:64px!important}@media only screen and (min-width:992px){.margin-top-4{margin-top:96px!important}}.margin-bottom-4{margin-bottom:64px!important}@media only screen and (min-width:992px){.margin-bottom-4{margin-bottom:96px!important}}.padding-top-4{padding-top:32px!important}@media only screen and (min-width:992px){.padding-top-4{padding-top:96px!important}}.padding-bottom-4{padding-bottom:32px!important}@media only screen and (min-width:992px){.padding-bottom-4{padding-bottom:96px!important}}.margin-top-5{margin-top:100px!important}@media only screen and (min-width:992px){.margin-top-5{margin-top:150px!important}}.margin-bottom-5{margin-bottom:100px!important}@media only screen and (min-width:992px){.margin-bottom-5{margin-bottom:150px!important}}.padding-top-5{padding-top:40px!important}@media only screen and (min-width:992px){.padding-top-5{padding-top:150px!important}}.padding-bottom-5{padding-bottom:40px!important}@media only screen and (min-width:992px){.padding-bottom-5{padding-bottom:150px!important}}.margin-top-6{margin-top:144px!important}@media only screen and (min-width:992px){.margin-top-6{margin-top:216px!important}}.margin-bottom-6{margin-bottom:144px!important}@media only screen and (min-width:992px){.margin-bottom-6{margin-bottom:216px!important}}.padding-top-6{padding-top:48px!important}@media only screen and (min-width:992px){.padding-top-6{padding-top:216px!important}}.padding-bottom-6{padding-bottom:48px!important}@media only screen and (min-width:992px){.padding-bottom-6{padding-bottom:216px!important}}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;text-decoration:none;font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem;margin:0 0 1rem;padding:.3em .8em}@media only screen and (min-width:992px){.button{font-size:1rem;padding:.4em 1.2em}}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;border:1px solid #dfdfdf;background-color:#f7f7f7;margin:0 0 1rem;padding:.3em .45em}@media only screen and (min-width:992px){.code{padding:.6em .9em}}.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 1rem}.field__label,.field__select,.field__text{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem}@media only screen and (min-width:992px){.field__label,.field__select,.field__text{font-size:1rem}}.field__select,.field__text{display:block;width:100%;padding:.4em .6em;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none}.field__label{display:inline-block;width:100%}.field--valid .field__label{color:#5cb85c}.field--error .field__label{color:#d9534f}.field__text{margin:0;border:1px solid #dfdfdf}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{padding:.3em .5em;border:1px solid #dfdfdf;background-color:#fff}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:.3em 0 0}.field--valid .field__choice__checked,.field--valid .field__choice__unchecked{fill:#5cb85c}.field--error .field__choice__checked,.field--error .field__choice__unchecked{fill:#d9534f}.field__panel{padding:.3em .6em}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.group{list-style:none;display:inline-block}.group,.group li{margin:0;padding:0}.group .group__item{display:inline-block;margin:0 .3em 0 0}.group--hr .group__item,.group .group__item:last-child:after{margin:0}.group--hr .group__item:after{margin:0 .3em;content:"/"}.group--hr .group__item:last-child:after{display:none}.hero{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.hero--top{background-position:top}.hero--bottom{background-position:bottom}.hero--contain{background-size:contain}.icon{width:1.15em;height:1.15em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;line-height:1.4}.icon-color-primary{fill:#f18f01!important}.icon-color-secondary{fill:#b3b2af!important}.icon-color-success{fill:#5cb85c!important}.icon-color-warning{fill:#f0ad4e!important}.icon-color-danger{fill:#d9534f!important}.icon-color-info{fill:#0090d4!important}.icon-color-grey{fill:#7a7a7a!important}.icon-color-grey-light{fill:#f7f7f7!important}.icon-color-grey-dark{fill:#4a4a4a!important}.icon-color-white{fill:#fff!important}.img-responsive{display:block;max-width:100%;height:auto}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.modal{position:absolute;z-index:100;width:100%;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}@media only screen and (min-width:992px){.modal{max-width:50%}}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{transform:translate(0)}@media only screen and (min-width:992px){.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:.75em}}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.panel{background-color:#f7f7f7}.panel__inner{padding:.3em .45em}@media only screen and (min-width:992px){.panel__inner{padding:.6em .9em}}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f7f7f7}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{text-align:left;border-bottom:1px solid #dfdfdf;padding:.3em .45em}@media only screen and (min-width:992px){.table td,.table th{padding:.6em .9em}}.table th{border-bottom-width:2px}.header{max-width:100%}.header a{text-decoration:none}.header a .icon--big{font-size:6rem}.header a:hover{color:#f18f01}.header .group__item{margin-right:10px}.header--fixed{position:fixed;top:0;left:0;width:100%;z-index:101}.h3__icon{display:inline-block;border-radius:50%;padding:.9em;margin:0 0 .5em}.h3__icon .icon{font-size:3rem!important}.container{max-width:1200px}.lg-only,.md,.md-only,.sm{display:none}@media only screen and (min-width:768px){.sm{display:block}}@media only screen and (min-width:992px){.md{display:block}}@media only screen and (min-width:992px)and (max-width:1199px){.md-only{display:block}}@media only screen and (min-width:1200px)and (max-width:1599px){.lg-only{display:block}}.triangle-bottom,.triangle-left,.triangle-right,.triangle-top{display:block}.triangle-left{border-right:1.5em solid #f18f01}.triangle-left,.triangle-right{width:0;height:0;content:"";z-index:2;border-bottom:1em solid transparent;border-top:1em solid transparent}.triangle-right{border-left:1.5em solid #f18f01}.triangle-top{border-bottom:1.5em solid #f18f01}.triangle-bottom,.triangle-top{width:0;height:0;content:"";z-index:2;border-left:1em solid transparent;border-right:1em solid transparent}.triangle-bottom{border-top:1.5em solid #f18f01} \ No newline at end of file diff --git a/dist/example/symbol-defs.svg b/dist/examples/symbol-defs.svg similarity index 100% rename from dist/example/symbol-defs.svg rename to dist/examples/symbol-defs.svg diff --git a/mix-manifest.json b/mix-manifest.json index 239b104..058dd3b 100644 --- a/mix-manifest.json +++ b/mix-manifest.json @@ -1,7 +1,7 @@ { "/dist/crispy-all.css": "/dist/crispy-all.css", "/dist/crispy-minimal.css": "/dist/crispy-minimal.css", - "/dist/example/styles.css": "/dist/example/styles.css", + "/dist/examples/styles.css": "/dist/examples/styles.css", "/spritemap.js": "/spritemap.js", - "/dist/example/symbol-defs.svg": "/dist/example/symbol-defs.svg" + "/dist/examples/symbol-defs.svg": "/dist/examples/symbol-defs.svg" } diff --git a/package-lock.json b/package-lock.json index 6c80b4d..2d77584 100644 --- a/package-lock.json +++ b/package-lock.json @@ -985,6 +985,12 @@ "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=", "dev": true }, + "@types/anymatch": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", + "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==", + "dev": true + }, "@types/events": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz", @@ -1002,6 +1008,12 @@ "@types/node": "*" } }, + "@types/html-minifier-terser": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz", + "integrity": "sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==", + "dev": true + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -1020,6 +1032,76 @@ "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==", "dev": true }, + "@types/source-list-map": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", + "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==", + "dev": true + }, + "@types/tapable": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.5.tgz", + "integrity": "sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==", + "dev": true + }, + "@types/uglify-js": { + "version": "3.9.2", + "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.9.2.tgz", + "integrity": "sha512-d6dIfpPbF+8B7WiCi2ELY7m0w1joD8cRW4ms88Emdb2w062NeEpbNCeWwVCgzLRpVG+5e74VFSg4rgJ2xXjEiQ==", + "dev": true, + "requires": { + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "@types/webpack": { + "version": "4.41.13", + "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.13.tgz", + "integrity": "sha512-RYmIHOWSxnTTa765N6jJBVE45pd2SYNblEYshVDduLw6RhocazNmRzE5/ytvBD8IkDMH6DI+bcrqxh8NILimBA==", + "dev": true, + "requires": { + "@types/anymatch": "*", + "@types/node": "*", + "@types/tapable": "*", + "@types/uglify-js": "*", + "@types/webpack-sources": "*", + "source-map": "^0.6.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, + "@types/webpack-sources": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.7.tgz", + "integrity": "sha512-XyaHrJILjK1VHVC4aVlKsdNN5KBTwufMb43cQs+flGxtPAf/1Qwl8+Q0tp5BwEGaI8D6XT1L+9bSWXckgkjTLw==", + "dev": true, + "requires": { + "@types/node": "*", + "@types/source-list-map": "*", + "source-map": "^0.6.1" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + } + } + }, "@vue/component-compiler-utils": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.1.2.tgz", @@ -3175,6 +3257,15 @@ "buffer-indexof": "^1.0.0" } }, + "dom-converter": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", + "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==", + "dev": true, + "requires": { + "utila": "~0.4" + } + }, "dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", @@ -3205,6 +3296,15 @@ "integrity": "sha1-0EjESzew0Qp/Kj1f7j9DM9eQSB8=", "dev": true }, + "domhandler": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz", + "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==", + "dev": true, + "requires": { + "domelementtype": "1" + } + }, "domutils": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", @@ -3215,6 +3315,37 @@ "domelementtype": "1" } }, + "dot-case": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.3.tgz", + "integrity": "sha512-7hwEmg6RiSQfm/GwPL4AAWXKy3YNNZA3oFv2Pdiey0mwkRCPZ9x6SZbkLcn8Ma5PYeVokzoD4Twv2n7LKp5WeA==", + "dev": true, + "requires": { + "no-case": "^3.0.3", + "tslib": "^1.10.0" + }, + "dependencies": { + "lower-case": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz", + "integrity": "sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==", + "dev": true, + "requires": { + "tslib": "^1.10.0" + } + }, + "no-case": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz", + "integrity": "sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==", + "dev": true, + "requires": { + "lower-case": "^2.0.1", + "tslib": "^1.10.0" + } + } + } + }, "dot-prop": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz", @@ -4492,12 +4623,142 @@ "uglify-js": "3.4.x" } }, + "html-minifier-terser": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz", + "integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==", + "dev": true, + "requires": { + "camel-case": "^4.1.1", + "clean-css": "^4.2.3", + "commander": "^4.1.1", + "he": "^1.2.0", + "param-case": "^3.0.3", + "relateurl": "^0.2.7", + "terser": "^4.6.3" + }, + "dependencies": { + "camel-case": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.1.tgz", + "integrity": "sha512-7fa2WcG4fYFkclIvEmxBbTvmibwF2/agfEBc6q3lOpVu0A13ltLsA+Hr/8Hp6kp5f+G7hKi6t8lys6XxP+1K6Q==", + "dev": true, + "requires": { + "pascal-case": "^3.1.1", + "tslib": "^1.10.0" + } + }, + "commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true + }, + "param-case": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.3.tgz", + "integrity": "sha512-VWBVyimc1+QrzappRs7waeN2YmoZFCGXWASRYX1/rGHtXqEcrGEIDm+jqIwFa2fRXNgQEwrxaYuIrX0WcAguTA==", + "dev": true, + "requires": { + "dot-case": "^3.0.3", + "tslib": "^1.10.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "terser": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-4.7.0.tgz", + "integrity": "sha512-Lfb0RiZcjRDXCC3OSHJpEkxJ9Qeqs6mp2v4jf2MHfy8vGERmVDuvjXdd/EnP5Deme5F2yBRBymKmKHCBg2echw==", + "dev": true, + "requires": { + "commander": "^2.20.0", + "source-map": "~0.6.1", + "source-map-support": "~0.5.12" + }, + "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + } + } + } + } + }, + "html-webpack-plugin": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.3.0.tgz", + "integrity": "sha512-C0fzKN8yQoVLTelcJxZfJCE+aAvQiY2VUf3UuKrR4a9k5UMWYOtpDLsaXwATbcVCnI05hUS7L9ULQHWLZhyi3w==", + "dev": true, + "requires": { + "@types/html-minifier-terser": "^5.0.0", + "@types/tapable": "^1.0.5", + "@types/webpack": "^4.41.8", + "html-minifier-terser": "^5.0.1", + "loader-utils": "^1.2.3", + "lodash": "^4.17.15", + "pretty-error": "^2.1.1", + "tapable": "^1.1.3", + "util.promisify": "1.0.0" + }, + "dependencies": { + "util.promisify": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz", + "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==", + "dev": true, + "requires": { + "define-properties": "^1.1.2", + "object.getownpropertydescriptors": "^2.0.3" + } + } + } + }, "html4-id": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/html4-id/-/html4-id-1.0.0.tgz", "integrity": "sha1-uS9lInlVRoHNL24W0n6q9nwCmL8=", "dev": true }, + "htmlparser2": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", + "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==", + "dev": true, + "requires": { + "domelementtype": "^1.3.1", + "domhandler": "^2.3.0", + "domutils": "^1.5.1", + "entities": "^1.1.1", + "inherits": "^2.0.1", + "readable-stream": "^3.1.1" + }, + "dependencies": { + "entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==", + "dev": true + }, + "readable-stream": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + } + } + } + }, "http-deceiver": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz", @@ -6189,6 +6450,37 @@ "integrity": "sha1-naGee+6NEt/wUT7Vt2lXeTvC6NQ=", "dev": true }, + "pascal-case": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.1.tgz", + "integrity": "sha512-XIeHKqIrsquVTQL2crjq3NfJUxmdLasn3TYOU0VBM+UX2a6ztAWBlJQBePLGY7VHW8+2dRadeIPK5+KImwTxQA==", + "dev": true, + "requires": { + "no-case": "^3.0.3", + "tslib": "^1.10.0" + }, + "dependencies": { + "lower-case": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz", + "integrity": "sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==", + "dev": true, + "requires": { + "tslib": "^1.10.0" + } + }, + "no-case": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz", + "integrity": "sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==", + "dev": true, + "requires": { + "lower-case": "^2.0.1", + "tslib": "^1.10.0" + } + } + } + }, "pascalcase": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz", @@ -7087,6 +7379,16 @@ "dev": true, "optional": true }, + "pretty-error": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz", + "integrity": "sha1-X0+HyPkeWuPzuoerTPXgOxoX8aM=", + "dev": true, + "requires": { + "renderkid": "^2.0.1", + "utila": "~0.4" + } + }, "private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", @@ -7418,6 +7720,49 @@ "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=", "dev": true }, + "renderkid": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.3.tgz", + "integrity": "sha512-z8CLQp7EZBPCwCnncgf9C4XAi3WR0dv+uWu/PjIyhhAb5d6IJ/QZqlHFprHeKT+59//V6BNUsLbvN8+2LarxGA==", + "dev": true, + "requires": { + "css-select": "^1.1.0", + "dom-converter": "^0.2", + "htmlparser2": "^3.3.0", + "strip-ansi": "^3.0.0", + "utila": "^0.4.0" + }, + "dependencies": { + "css-select": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", + "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=", + "dev": true, + "requires": { + "boolbase": "~1.0.0", + "css-what": "2.1", + "domutils": "1.5.1", + "nth-check": "~1.0.1" + } + }, + "css-what": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", + "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==", + "dev": true + }, + "domutils": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz", + "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=", + "dev": true, + "requires": { + "dom-serializer": "0", + "domelementtype": "1" + } + } + } + }, "repeat-element": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz", @@ -9109,6 +9454,12 @@ "object.getownpropertydescriptors": "^2.1.0" } }, + "utila": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz", + "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=", + "dev": true + }, "utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", diff --git a/package.json b/package.json index b682326..26f48f3 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "license": "MIT", "devDependencies": { "cross-env": "^5.2.1", + "html-webpack-plugin": "^4.3.0", "laravel-mix": "^5.0.4", "postcss-css-variables": "^0.11.0", "resolve-url-loader": "^3.1.1", diff --git a/src/_core.scss b/src/_core.scss index 35a7a91..4de22d7 100644 --- a/src/_core.scss +++ b/src/_core.scss @@ -1,12 +1,6 @@ /** * core * - * - normalize - * - typograhy - * - links - * - fonts - * - * Thanks to https://necolas.github.io/normalize.css/, use a lot from them * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License @@ -16,84 +10,17 @@ @import 'functions', - 'mixins'; - -@mixin crispy__core() { - html { - font-size: 100%; - line-height: 1.15; // Correct the line height in all browsers. - -webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS. - } - - body, - html { - margin: 0; - height: 100%; - } - - html, - legend { - box-sizing: border-box; - } - - main { - display: block; // Render the `main` element consistently in IE. - } - - *, - *::after, - *::before { - box-sizing: inherit; - } - - table { - border-collapse: collapse; - border-spacing: 0; - } - - // paragraphs - p { - margin: $crispy__margin; - } - - // Semantic text elements - a, - ins, - u { - text-decoration-skip: ink edges; - } - - // Add the correct font weight in Chrome, Edge, and Safari. - b, - strong { - font-weight: bolder; - } + 'mixins', - // Add the correct font size in all browsers. - small { - font-size: 80%; - } + 'core/normalize', + 'core/heading', + 'core/typography'; - /** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ +@include crispy__core__normalize(); +@include crispy__core__heading(); +@include crispy__core__typography(); - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } - - sub { - bottom: -0.25em; - } - - sup { - top: -0.5em; - } +@mixin crispy__core() { a { color: $crispy__color-link; @@ -107,247 +34,25 @@ } } - abbr[title] { - border-bottom: 1px dotted; - cursor: help; - text-decoration: none; - } - - mark { - padding: 0.25em; - } - - // blockquote - blockquote { - border-left: $crispy__border; - margin-left: 0; - padding: $crispy__padding; - - p:last-child { - margin-bottom: 0; - } - } - - /** - * lists - * - */ - - dl, - ol, - ul { - padding: 0; - margin: $crispy__margin; - } - - ol, - ul { - margin-left: 1.5em; - } - - ol ol, - ul ul { - margin-top: 0; - margin-left: 1em; - } - - ol { - list-style: decimal outside; - } - - ul { - list-style: disc outside; - } - - dl { - margin-left: 0.5em; - } - - dd, - dt { - margin: 0; - } - - dt { - font-weight: bold; - } - - // media - figure { - margin: $crispy__margin; - } - - figcaption { - margin: 0.3em 0 0; - } - - /** - * form elements - * - * - */ - - // Remove the margin in Firefox and Safari. - button, - input, - optgroup, - select, - textarea { - margin: 0; - } - - // Remove the inheritance of text transform in Firefox - button, - select { - text-transform: none; - } - - // Correct the inability to style clickable types in iOS and Safari. - button, - [type="button"], - [type="reset"], - [type="submit"] { - -webkit-appearance: button; - } - - // Remove the inner border and padding in Firefox. - button::-moz-focus-inner, - [type="button"]::-moz-focus-inner, - [type="reset"]::-moz-focus-inner, - [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; - } - - // Restore the focus styles unset by the previous rule. - button:-moz-focusring, - [type="button"]:-moz-focusring, - [type="reset"]:-moz-focusring, - [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; - } - - // Correct the padding in Firefox. - fieldset { - padding: 0.35em 0.75em 0.625em; - } - - // divider - hr { - box-sizing: content-box; // Add the correct box sizing in Firefox. - height: 0; // Add the correct box sizing in Firefox. - overflow: visible; // Show the overflow in Edge and IE. - - border: 0; - border-top: 1px solid $crispy__color-secondary; - margin: 0.3em 0; - } - - code, - pre, - kbd, - samp { - font-family: $crispy__font-family-monospace; - - // responsive for font-size - font-size: $crispy__font-size-xxs; - - @include crispy__media-md() { - font-size: $crispy__font-size-md; - } - } - - /** - * Heading - * - * - */ - - h1, .h1, - h2, .h2, - h3, .h3, - h4, .h4, - h5, .h5, - h6, .h6 { - font-family: $crispy__heading__font-family; - font-weight: $crispy__heading__font-weight; - line-height: 1.2; - margin: $crispy__heading__margin; - } - - h5 { - line-height: 1.4; - } - - h6 { - line-height: $crispy__line-height; - } - - @each $h, $font-size in $crispy__heading__font-sizes { - #{$h}, .#{$h} { - font-size: $font-size * $crispy__xxs__multiplicator; - - // responsive for font-size - @include crispy__media-md() { - font-size: $font-size; - } - - @include crispy__media-xlg() { - font-size: $font-size * $crispy__xlg__multiplicator; - } - } - } - /** + * body * * * - */ - - body, - button, - input, - optgroup, - select, - textarea { - font-family: $crispy__font-family-primary; - font-weight: $crispy__font-weight; - } - - button, - input, - optgroup, - select, - textarea { - font-size: 0.9em; - line-height: 1.4; - } - - /** - * body + * line-height and breakpoints + * font-size and breakpoints * */ body { + font-family: $crispy__font-family; color: $crispy__color-text; background-color: $crispy__color-background; direction: $crispy__direction; - // responsive for font-size - font-size: $crispy__font-size-xxs; + font-size: $crispy__font-size; + @include crispy__media__breakpoints('line-height', $crispy__line-height__breakpoints); - @include crispy__media-md() { - font-size: $crispy__font-size-md; - } - - @include crispy__media-xlg() { - font-size: $crispy__font-size-xlg; - } - - // responsive for line-height - line-height: $crispy__line-height-xxs; - - @include crispy__media-md() { - line-height: $crispy__line-height-md; - } + line-height: $crispy__line-height; + @include crispy__media__breakpoints('font-size', $crispy__font-size__breakpoints); } } diff --git a/src/_functions.scss b/src/_functions.scss index 34ebb94..56c741e 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -1,15 +1,14 @@ /** - * functions + * functions * * - * - * - * @author Björn Hase - * @license http://opensource.org/licenses/MIT The MIT License - * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css * */ + /** * strip unit from value * @@ -20,12 +19,46 @@ @return $value / ($value * 0 + 1); } + +/** + * factor + * + * + * + * @param {integer} $x + * @return {float} + * + */ +@function factor($x) { + @return ($x * $x) / 2; +} + + +/** + * get value of key "default" in map + * + * @param {map} $value + * @return {boolean|unit} + * + */ +@function getDefault($values) { + + $default: false; + + @if map-has-key($values, 'default') { + $default: map-get($values, 'default'); + } + + @return $default; +} + /** - * function: z-index + * z-index * - * uses map $crispy__z-index to get value by key + * uses map $crispy__z-index to get value by key * - * @author Björn Hase + * @param {string} $value + * @return {null|unit} * */ diff --git a/src/_modifiers.scss b/src/_helpers.scss similarity index 63% rename from src/_modifiers.scss rename to src/_helpers.scss index 73f7a9d..cc96406 100644 --- a/src/_modifiers.scss +++ b/src/_helpers.scss @@ -1,24 +1,30 @@ /** - * modifiers * * - * @author Björn Hase + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css * */ // spacing -$crispy__modifiers__spacing: 0.75rem !default; -$crispy__modifiers__spacing__steps: 6 !default; +$crispy__helpers__spacing-gap: 8px !default; +$crispy__helpers__spacing-steps: 6 !default; +$crispy__helpers__spacing-max-steps: 3 !default; +$crispy__helpers__spacing-breakpoints: ( + $crispy__md: 12px +) !default; // width -$crispy__modifiers__width: ( +$crispy__helpers__width: ( '25' : 25%, '50' : 50%, '75' : 75%, '100': 100% ) !default; -@mixin crispy__modifiers() { +@mixin crispy__helpers() { /** * typography @@ -82,17 +88,13 @@ $crispy__modifiers__width: ( font-weight: bolder !important; } + // getting default + $defaultFontSize: getDefault($crispy__font-sizes); + @each $name, $font-size in $crispy__font-sizes { .text-size-#{$name} { - font-size: ($font-size * $crispy__xxs__multiplicator) !important; - - @include crispy__media-md() { - font-size: $font-size !important; - } - - @include crispy__media-xlg() { - font-size: ($font-size * $crispy__xlg__multiplicator) !important; - } + font-size: $font-size !important; + @include crispy__media__breakpoints__diff($crispy__font-size__breakpoints, $font-size, $defaultFontSize); } } @@ -135,6 +137,12 @@ $crispy__modifiers__width: ( } } + @each $name, $color in $crispy__colors { + .border-color-#{$name} { + border-color: $color !important; + } + } + @each $name, $color in $crispy__colors { .background-color-#{$name} { background-color: $color !important; @@ -159,6 +167,7 @@ $crispy__modifiers__width: ( position: relative !important; } + /** * hide & show * @@ -291,6 +300,10 @@ $crispy__modifiers__width: ( } .rounded { + border-radius: $crispy__border-radius !important; + } + + .round { border-radius: 50% !important; } @@ -308,12 +321,13 @@ $crispy__modifiers__width: ( * */ - @each $name, $width in $crispy__modifiers__width { + @each $name, $width in $crispy__helpers__width { .width-#{$name} { width: $width !important; } } + /** * margin & padding * @@ -328,54 +342,71 @@ $crispy__modifiers__width: ( padding: 0 !important; } - @for $i from 0 through ($crispy__modifiers__spacing__steps / 2) { - .margin-left-#{$i} { - margin-left: ($crispy__modifiers__spacing * $i * 0.5) !important; - } + @for $i from 0 through $crispy__helpers__spacing-steps { + .margin-top-#{$i} { + margin-top: ($crispy__helpers__spacing-gap * factor($i)) !important; - .margin-right-#{$i} { - margin-right: ($crispy__modifiers__spacing * $i * 0.5) !important; + @if $i > 0 { + @include crispy__media__breakpoints_calculate('margin-top', factor($i), $crispy__helpers__spacing-breakpoints); + } } - .padding-left-#{$i} { - padding-left: ($crispy__modifiers__spacing * $i * 0.5) !important; - } + .margin-bottom-#{$i} { + margin-bottom: ($crispy__helpers__spacing-gap * factor($i)) !important; - .padding-right-#{$i} { - padding-right: ($crispy__modifiers__spacing * $i * 0.5) !important; + @if $i > 0 { + @include crispy__media__breakpoints_calculate('margin-bottom', factor($i), $crispy__helpers__spacing-breakpoints); + } } - } - @for $i from 0 through $crispy__modifiers__spacing__steps { - .margin-top-#{$i} { - margin-top: ($crispy__modifiers__spacing * $i * 0.5) !important; + .padding-top-#{$i} { + padding-top: ($crispy__helpers__spacing-gap * $i) !important; - @include crispy__media-md() { - margin-top: ($crispy__modifiers__spacing * $i) !important; + @if $i > 0 { + @include crispy__media__breakpoints_calculate('padding-top', factor($i), $crispy__helpers__spacing-breakpoints); } } - .margin-bottom-#{$i} { - margin-bottom: ($crispy__modifiers__spacing * $i * 0.5) !important; + .padding-bottom-#{$i} { + padding-bottom: ($crispy__helpers__spacing-gap * $i) !important; - @include crispy__media-md() { - margin-bottom: ($crispy__modifiers__spacing * $i) !important; + @if $i > 0 { + @include crispy__media__breakpoints_calculate('padding-bottom', factor($i), $crispy__helpers__spacing-breakpoints); } } - .padding-top-#{$i} { - padding-top: ($crispy__modifiers__spacing * $i * 0.5) !important; + // to reduce size of css only use max steps + @if $i < $crispy__helpers__spacing-max-steps { + .margin-left-#{$i} { + margin-left: ($crispy__helpers__spacing-gap * $i) !important; - @include crispy__media-md() { - padding-top: ($crispy__modifiers__spacing * $i) !important; + @if $i > 0 { + @include crispy__media__breakpoints_calculate('margin-left', factor($i), $crispy__helpers__spacing-breakpoints); + } } - } - .padding-bottom-#{$i} { - padding-bottom: ($crispy__modifiers__spacing * $i * 0.5) !important; + .margin-right-#{$i} { + margin-right: ($crispy__helpers__spacing-gap * $i) !important; - @include crispy__media-md() { - padding-bottom: ($crispy__modifiers__spacing * $i) !important; + @if $i > 0 { + @include crispy__media__breakpoints_calculate('margin-right', factor($i), $crispy__helpers__spacing-breakpoints); + } + } + + .padding-left-#{$i} { + padding-left: ($crispy__helpers__spacing-gap * $i) !important; + + @if $i > 0 { + @include crispy__media__breakpoints_calculate('padding-left', factor($i), $crispy__helpers__spacing-breakpoints); + } + } + + .padding-right-#{$i} { + padding-right: ($crispy__helpers__spacing-gap * $i) !important; + + @if $i > 0 { + @include crispy__media__breakpoints_calculate('padding-right', factor($i), $crispy__helpers__spacing-breakpoints); + } } } } diff --git a/src/_mixins.scss b/src/_mixins.scss index 4b38e93..9a91763 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -124,6 +124,64 @@ } } +/** + * + * @param {[type]} $property [description] + * @param {[type]} $breakpoints [description] + * + * @return {[type]} [description] + * + */ +@mixin crispy__media__breakpoints($property, $breakpoints) { + @each $breakpoint, $value in $breakpoints { + @media only screen and (min-width: $breakpoint) { + #{$property}: $value; + } + } +} + +/** + * + * @param {[type]} $property [description] + * @param {[type]} $factor [description] + * @param {[type]} $breakpoints [description] + * + * @return {[type]} [description] + */ +@mixin crispy__media__breakpoints_calculate($property, $factor, $breakpoints) { + @each $breakpoint, $value in $breakpoints { + @media only screen and (min-width: $breakpoint) { + #{$property}: ($value * $factor) !important; + } + } +} + +/** + * + * + * @param {[type]} $breakpoints [des + * @param {[type]} $font-sizes [description] + * @param {[type]} $font-size [description] + * + * @return {[type]} [description] + * + */ +@mixin crispy__media__breakpoints__diff($breakpoints, $font-size, $default) { + + @each $breakpoint, $value in $breakpoints { + + // getting diff + $factor: (stripUnit($font-size) - stripUnit($default)) + 1; + + // ignore if factor is zero + @if $factor > 0 { + @media only screen and (min-width: $breakpoint) { + font-size: $value * $factor; + } + } + } +} + /** * triangle diff --git a/src/_normalize.scss b/src/_normalize.scss deleted file mode 100644 index 5c78141..0000000 --- a/src/_normalize.scss +++ /dev/null @@ -1,341 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Modifized - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} diff --git a/src/_variables.scss b/src/_variables.scss index 6d99780..dccacb0 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -14,25 +14,40 @@ $crispy__golden-ratio: 1.618 !default; -// fonts -$crispy__xxs__multiplicator: 0.9; -$crispy__xlg__multiplicator: 1.1; -$crispy__font-size: 1rem !default; -$crispy__font-size-xxs: $crispy__font-size * $crispy__xxs__multiplicator !default; -$crispy__font-size-md: $crispy__font-size !default; -$crispy__font-size-xlg: $crispy__font-size * $crispy__xlg__multiplicator !default; +/** + * Breakpoints + * + */ -$crispy__font-weight: normal !default; +$crispy__xs : 576px !default; +$crispy__sm : 768px !default; +$crispy__md : 992px !default; +$crispy__lg : 1200px !default; +$crispy__xlg: 1600px !default; -$crispy__line-height: $crispy__golden-ratio !default; -$crispy__line-height-xxs: 1.4 !default; -$crispy__line-height-md: $crispy__golden-ratio !default; -$crispy__font-family-primary: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; -$crispy__font-family-monospace: "Lucida Console", Monaco, monospace !default; +/** + * Font Size + * + */ + $crispy__direction: ltr !default; +$crispy__font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; +$crispy__font-weight: normal !default; +$crispy__font-size: 0.9rem !default; +$crispy__font-size__breakpoints: ( + $crispy__md: 1rem +) !default; + +$crispy__font-family-monospace: "Lucida Console", Monaco, monospace !default; +$crispy__font-weight-monospace: normal !default; +$crispy__font-size-monospace: 1rem !default; +$crispy__font-size-monospace__breakpoints: ( + $crispy__md: 1.1rem +) !default; + $crispy__font-sizes: ( 'default' : $crispy__font-size, 'small' : $crispy__font-size * 0.75, @@ -42,7 +57,18 @@ $crispy__font-sizes: ( 'mega' : $crispy__font-size * 2, ) !default; -// colors +$crispy__line-height: 1.4; +$crispy__line-height__breakpoints: ( + $crispy__md: $crispy__golden-ratio +) !default; + + +/** + * colors + * + * + */ + $crispy__color-primary: #f18f01 !default; $crispy__color-secondary: #b3b2af !default; $crispy__color-success: #5cb85c !default; @@ -81,12 +107,17 @@ $crispy__colors: ( 'white' : $crispy__color-white ) !default; + /** * Padding & Margin * */ + $crispy__margin: 0 0 1rem !default; -$crispy__padding: 0.8em 1.2em !default; +$crispy__padding: 0.3em 0.45em !default; +$crispy__padding-breakpoints: ( + $crispy__md: .6em 0.9em +) !default; /** @@ -103,6 +134,10 @@ $crispy__heading__font-sizes: ( 'h6': $crispy__font-size ) !default; +$crispy__heading__font-sizes__breakpoints: ( + $crispy__md: 1.2rem +) !default; + $crispy__heading__font-weight: bold !default; $crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default; $crispy__heading__margin: 0 0 0.3em !default; @@ -118,17 +153,10 @@ $crispy__border: 1px solid $crispy__color-border !default; /** - * Breakpoints + * * */ -$crispy__xs : 576px !default; -$crispy__sm : 768px !default; -$crispy__md : 992px !default; -$crispy__lg : 1200px !default; -$crispy__xlg: 1600px !default; - -// z-index $crispy__z-index: ( 'overlay': 90, 'modal' : 100 diff --git a/src/components/_button.scss b/src/components/_button.scss index fb2829a..5ab3e4b 100644 --- a/src/components/_button.scss +++ b/src/components/_button.scss @@ -11,7 +11,16 @@ * */ -$crispy__button__padding: 0.5em 1.2em 0.6em !default; +$crispy__button__font-family: $crispy__font-family !default; +$crispy__button__font-weight: $crispy__font-weight !default; +$crispy__button__font-size: $crispy__font-size !default; +$crispy__button__font-size-breakpoints: $crispy__font-size__breakpoints !default; + +$crispy__button__padding: 0.3em 0.8em !default; +$crispy__button__padding-breakpoints: ( + $crispy__md: 0.4em 1.2em +) !default; + $crispy__button__margin: $crispy__margin !default; @mixin crispy__button() { @@ -21,9 +30,17 @@ $crispy__button__margin: $crispy__margin !default; display: inline-block; text-decoration: none; - padding: $crispy__button__padding; + font-family: $crispy__button__font-family; + font-weight: $crispy__button__font-weight; + + font-size: $crispy__button__font-size; + @include crispy__media__breakpoints('font-size', $crispy__button__font-size-breakpoints); + margin: $crispy__button__margin; + padding: $crispy__button__padding; + @include crispy__media__breakpoints('padding', $crispy__button__padding-breakpoints); + &:hover { cursor: pointer; text-decoration: none; diff --git a/src/components/_code.scss b/src/components/_code.scss index c026913..e45ed9f 100644 --- a/src/components/_code.scss +++ b/src/components/_code.scss @@ -1,5 +1,5 @@ /** - * component: code + * components: code * * 
  *      
@@ -14,6 +14,7 @@
  */
 
 $crispy__code__padding: $crispy__padding !default;
+$crispy__code__padding-breakpoints: $crispy__padding-breakpoints !default;
 $crispy__code__margin: $crispy__margin !default;
 $crispy__code__border: $crispy__border !default;
 $crispy__code__background-color: $crispy__color-grey-light !default;
@@ -25,10 +26,12 @@ $crispy__code__background-color: $crispy__color-grey-light !default;
 
         overflow-y: hidden;
         overflow-x: auto;
-        padding: $crispy__code__padding;
         border: $crispy__code__border;
         background-color: $crispy__code__background-color;
 
         margin: $crispy__code__margin;
+
+        padding: $crispy__code__padding;
+        @include crispy__media__breakpoints('padding', $crispy__code__padding-breakpoints);
     }
 }
diff --git a/src/components/_field.scss b/src/components/_field.scss
index 7f4471b..b7b512b 100644
--- a/src/components/_field.scss
+++ b/src/components/_field.scss
@@ -26,7 +26,6 @@ $crispy__field__border-color--error: $crispy__color-danger !default;
 $crispy__field__choice__checked__color: $crispy__color-success !default;
 $crispy__field__choice__unchecked__color: $crispy__color-danger !default;
 
-$crispy__field__input__font-size: $crispy__font-size !default;
 $crispy__field__input__padding: 0.4em 0.6em !default;
 $crispy__field__input__color: $crispy__color-text !default;
 
@@ -41,17 +40,22 @@ $crispy__field__select__border: $crispy__border !default;
         margin: $crispy__field__margin;
     }
 
+    .field__text, .field__select, .field__select, .field__label {
+        font-family: $crispy__font-family;
+        font-weight: $crispy__font-weight;
+
+        font-size: $crispy__font-size;
+        @include crispy__media__breakpoints('font-size', $crispy__font-size__breakpoints);
+    }
+
     // basic style for input elements, will be used to @extend
     .field__text, .field__select, .field__select {
         display: block;
         width: 100%;
-        line-height: $crispy__golden-ratio;
+
         padding: $crispy__field__input__padding;
         color: $crispy__field__input__color;
         appearance: none;
-
-        font-size: $crispy__field__input__font-size;
-        font-family: $crispy__font-family-primary;
     }
 
     /**
diff --git a/src/components/_group.scss b/src/components/_group.scss
index d918ba5..5f21528 100644
--- a/src/components/_group.scss
+++ b/src/components/_group.scss
@@ -1,5 +1,5 @@
 /**
- *  component: group
+ *  components: group
  *
  *