From 9f304207fb80c96c9fbd2afa508ee9a909ef6723 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Tue, 2 Jun 2020 18:09:56 +0200 Subject: [PATCH] adding --- dist/crispy-all.css | 2 +- dist/crispy-minimal.css | 2 +- dist/example/components.html | 22 +-- dist/example/core.html | 2 +- dist/example/functions.html | 4 +- dist/example/getting-started.html | 2 +- dist/example/helpers.html | 43 +++++- dist/example/imprint.html | 2 +- dist/example/index.html | 2 +- dist/example/mixins.html | 47 +------ dist/example/privacy-policy.html | 2 +- dist/example/styles.css | 2 +- src/_core.scss | 4 +- src/_functions.scss | 61 ++------- src/_helpers.scss | 144 ++++++++++---------- src/_mixins.scss | 118 +++++++--------- src/_variables.scss | 4 +- src/components/_button.scss | 6 +- src/components/_code.scss | 4 +- src/components/_field.scss | 10 +- src/components/_group.scss | 2 +- src/components/_modal.scss | 4 +- src/components/_panel.scss | 2 +- src/components/_table.scss | 2 +- src/core/_heading.scss | 4 +- src/core/_normalize.scss | 4 +- src/core/_typography.scss | 4 +- src/example/components/_triangle.scss | 31 ----- src/example/{components => site}/_main.scss | 4 +- src/example/styles.scss | 7 +- src/html/partials/components.html | 22 +-- src/html/partials/footer.html | 4 +- src/html/partials/functions.html | 38 ++++-- src/html/partials/helpers.html | 121 +++++++++++++++- src/html/partials/imprint.html | 20 +++ src/html/partials/mixins.html | 125 ++++++----------- src/html/partials/privacy-policy.html | 25 ++++ 37 files changed, 475 insertions(+), 427 deletions(-) delete mode 100644 src/example/components/_triangle.scss rename src/example/{components => site}/_main.scss (87%) diff --git a/dist/crispy-all.css b/dist/crispy-all.css index 8469968..1295b33 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}figure{margin:0 0 15px}@media only screen and (min-width:992px){figure{margin:0 0 20px}}figcaption{margin:10px 0}button,input,optgroup,select,textarea{margin:0}fieldset{padding:.4em .6em}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:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.2;margin:0 0 15px}@media only screen and (min-width:992px){.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin:0 0 20px}}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!important}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.28rem!important}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.01rem!important}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.74rem!important}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.47rem!important}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.2rem!important}}p{margin:0 0 15px}@media only screen and (min-width:992px){p{margin:0 0 20px}}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:.4em .6em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 15px}@media only screen and (min-width:992px){dl,ol,ul{margin:0 0 20px}}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:1.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:1.1rem!important}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.8525rem!important}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.3475rem!important}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.595rem!important}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.8425rem!important}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:2.09rem!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}.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 15px;padding:.4em .8em}@media only screen and (min-width:992px){.button{font-size:1.1rem;margin:0 0 20px;padding:.6em 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 15px;padding:.4em .6em}@media only screen and (min-width:992px){.code{margin:0 0 20px;padding:.8em 1.1em}}.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 15px}@media only screen and (min-width:992px){.field{margin:0 0 20px}}.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:1.1rem}}.field__select,.field__text{display:block;width:100%;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.5em .6em}@media only screen and (min-width:992px){.field__select,.field__text{padding:.7em .8em}}.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{border:1px solid #dfdfdf;background-color:#fff;padding:.5em .3em}@media only screen and (min-width:992px){.field__select{padding:.7em .6em}}.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:.5em .6em}@media only screen and (min-width:992px){.field__panel{padding:.7em .8em}}.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 .5em}.group .group__item:first-child{margin-left:0}.group .group__item:last-child{margin-right:0}.group--hr .group__item{margin:0}.group--hr .group__item:after{margin:0 .5em;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:.4em .6em}@media only screen and (min-width:992px){.panel__inner{padding:.8em 1.1em}}.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:.4em .6em}@media only screen and (min-width:992px){.table td,.table th{padding:.8em 1.1em}}.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 15px}@media only screen and (min-width:992px){figure{margin:0 0 20px}}figcaption{margin:10px 0}button,input,optgroup,select,textarea{margin:0}fieldset{padding:5px 12px}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:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.2;margin:0 0 15px}@media only screen and (min-width:992px){.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin:0 0 20px}}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 15px}@media only screen and (min-width:992px){p{margin:0 0 20px}}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:5px 12px}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 15px}@media only screen and (min-width:992px){dl,ol,ul{margin:0 0 20px}}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:1.1rem}}.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}.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:1.1rem!important}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.8525rem!important}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.3475rem!important}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.595rem!important}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.8425rem!important}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:2.09rem!important}}.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}.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}.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}}.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 15px;padding:.4em .8em}@media only screen and (min-width:992px){.button{font-size:1.1rem;margin:0 0 20px;padding:.6em 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 15px;padding:5px 12px}@media only screen and (min-width:992px){.code{margin:0 0 20px;padding:10px 17px}}.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 15px}@media only screen and (min-width:992px){.field{margin:0 0 20px}}.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:1.1rem}}.field__select,.field__text{display:block;width:100%;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.5em .6em}@media only screen and (min-width:992px){.field__select,.field__text{padding:.7em .8em}}.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{border:1px solid #dfdfdf;background-color:#fff;padding:.5em .3em}@media only screen and (min-width:992px){.field__select{padding:.7em .6em}}.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:.5em .6em}@media only screen and (min-width:992px){.field__panel{padding:.7em .8em}}.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 .5em}.group .group__item:first-child{margin-left:0}.group .group__item:last-child{margin-right:0}.group--hr .group__item{margin:0}.group--hr .group__item:after{margin:0 .5em;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:5px 12px}@media only screen and (min-width:992px){.panel__inner{padding:10px 17px}}.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:5px 12px}@media only screen and (min-width:992px){.table td,.table th{padding:10px 17px}}.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 3895bc0..75215fb 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}figure{margin:0 0 15px}@media only screen and (min-width:992px){figure{margin:0 0 20px}}figcaption{margin:10px 0}button,input,optgroup,select,textarea{margin:0}fieldset{padding:.4em .6em}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:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.2;margin:0 0 15px}@media only screen and (min-width:992px){.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin:0 0 20px}}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!important}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.28rem!important}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.01rem!important}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.74rem!important}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.47rem!important}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.2rem!important}}p{margin:0 0 15px}@media only screen and (min-width:992px){p{margin:0 0 20px}}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:.4em .6em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 15px}@media only screen and (min-width:992px){dl,ol,ul{margin:0 0 20px}}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:1.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:1.1rem!important}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.8525rem!important}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.3475rem!important}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.595rem!important}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.8425rem!important}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:2.09rem!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}.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 +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 15px}@media only screen and (min-width:992px){figure{margin:0 0 20px}}figcaption{margin:10px 0}button,input,optgroup,select,textarea{margin:0}fieldset{padding:5px 12px}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:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.2;margin:0 0 15px}@media only screen and (min-width:992px){.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin:0 0 20px}}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 15px}@media only screen and (min-width:992px){p{margin:0 0 20px}}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:5px 12px}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 15px}@media only screen and (min-width:992px){dl,ol,ul{margin:0 0 20px}}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:1.1rem}}.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}.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:1.1rem!important}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.8525rem!important}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.3475rem!important}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.595rem!important}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.8425rem!important}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:2.09rem!important}}.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}.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}.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}}.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/components.html b/dist/example/components.html index b4e2dd9..7d4c014 100644 --- a/dist/example/components.html +++ b/dist/example/components.html @@ -1,4 +1,4 @@ -Components | Crispy CSS
Crispy CSS

Components

Button

SCSS:

$crispy__button__font-family: $crispy__font-family;
+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;
@@ -13,7 +13,7 @@ $crispy__button__margin-breakpoints: $crispy__margin-breakpoints;
 
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__border: $crispy__border;
+<button class="button width-100"></button>
     
Code
SCSS:
$crispy__code__border: $crispy__border;
 $crispy__code__background-color: $crispy__color-grey-light;
 
 $crispy__code__padding: $crispy__padding;
@@ -24,7 +24,7 @@ $crispy__code__margin-breakpoints: $crispy__margin-breakpoints;
 
Html:
<pre class="code">
     <code></code>
 </pre>
-
Fields
SCSS:
$crispy__field__margin: $crispy__margin;
+
Fields
SCSS:
$crispy__field__margin: $crispy__margin;
 $crispy__field__border: $crispy__border;
 
 $crispy__field__color--valid: $crispy__color-success;
@@ -159,14 +159,14 @@ $crispy__field__select__border: $crispy__border;
Group
SCSS:
$crispy__group__margin: 0 0.5em 0 !default;
+</div>
Group
SCSS:
$crispy__group__margin: 0 0.5em 0 !default;
 $crispy__group__character: '/' !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;
+</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>
@@ -184,26 +184,26 @@ $crispy__group__character: '/' !default;
Html:

Media

Html:

<img class="img-responsive" src="https://picsum.photos/400" />
+</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;
+
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;
+</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: (
+

Modal

SCSS:

$crispy__modal__max-width-breakpoints: (
     $crispy__md: 50%
 );
 
@@ -217,7 +217,7 @@ $crispy__modal__z-index: zIndex('modal');

Html:

< 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;
+</div>
.modal--top-left
.modal--top-right
.modal
.modal--bottom-left
.modal--bottom-right

Table

SCSS:

$crispy__table__padding: $crispy__padding;
 $crispy__table__padding-breakpoints: $crispy__padding-breakpoints;
 
 $crispy__table__td__border: 1px solid $crispy__color-border;
@@ -245,4 +245,4 @@ $crispy__table__striped__background-color: $crispy__color-grey-light;
nameage
Mr. Brown43
Mr. Magenta32
Mr. White45
\ No newline at end of file +</table>
nameage
Mr. Brown43
Mr. Magenta32
Mr. White45
\ No newline at end of file diff --git a/dist/example/core.html b/dist/example/core.html index 11423f1..cef23a2 100644 --- a/dist/example/core.html +++ b/dist/example/core.html @@ -1 +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 +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/example/functions.html b/dist/example/functions.html index 71c93b7..e788ba2 100644 --- a/dist/example/functions.html +++ b/dist/example/functions.html @@ -1,4 +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: (
+Functions | Crispy CSS
 Crispy CSS
Functions
getValue($map)
Returns a value from a map if key "default" found.
stripUnit($value)
Returns value without unit.
SCSS:
stripUnit(10px);
zIndex($name)
Returns value from $crispy__z-index.
SCSS:
$crispy__z-index: (
     'overlay': 90,
     'modal'  : 100
-);

\ No newline at end of file
+);
zIndex('modal');
\ No newline at end of file diff --git a/dist/example/getting-started.html b/dist/example/getting-started.html index a442db8..608cfcd 100644 --- a/dist/example/getting-started.html +++ b/dist/example/getting-started.html @@ -123,4 +123,4 @@ $crispy__border: 1px solid $crispy__color-border !default;

For Custom Variables add a File before importing Crispy.

@import
     "config",
     "node_modules/crispy-css/src/crispy";
-

Example

You find all of this Site in "/src/example". This is also an Example how you can use Crispy CSS and orginaize your Project.

Site

Contains header, footer and some partials that are used on a Site or Webapp.

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 +

Example

You find all of this Site in "/src/example". This is also an Example how you can use Crispy CSS and orginaize your Project.

Site

Contains header, footer and some partials that are used on a Site or Webapp.

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/example/helpers.html b/dist/example/helpers.html index 3707011..8989e99 100644 --- a/dist/example/helpers.html +++ b/dist/example/helpers.html @@ -1 +1,42 @@ -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 +Helpers | Crispy CSS
Crispy CSS

Helpers

Border

.round
.radiusless
.bordered
.rounded
.borderless

Margin / Padding

Padding and margin-left, -top, -right and -bottom. The Classes Paddingless and Marginless sets padding and margin in each direction to zero.

SCSS:

$crispy__helpers__spacing-gap: 8px;
+$crispy__helpers__spacing-steps: 6;
+$crispy__helpers__spacing-max-steps: 3;
+$crispy__helpers__spacing-breakpoints: (
+    $crispy__md: 12px
+);
+
padding-bottom-0
padding-bottom-1
padding-bottom-2
padding-bottom-3
padding-bottom-4
padding-bottom-5
padding-bottom-6
paddingless
marginless

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

Font Size

SCSS:

$crispy__font-size: 0.9rem;
+$crispy__font-size-breakpoints: (
+    $crispy__md: 1.1rem
+);
+
+$crispy__font-sizes: (
+    'default' : $crispy__font-size,
+    'small'   : $crispy__font-size * 0.75,
+    'medium'  : $crispy__font-size * 1.25,
+    'large'   : $crispy__font-size * 1.5,
+    'big'     : $crispy__font-size * 1.75,
+    'mega'    : $crispy__font-size * 2,
+);
+

text-size-small

text-size-medium

text-size-large

text-size-big

text-size-mega

Float

float-left

float-right

float-none

centered

Colors

SCSS:

$crispy__colors: (
+    'primary'    : $crispy__color-primary,
+    'secondary'  : $crispy__color-secondary,
+    'success'    : $crispy__color-success,
+    'warning'    : $crispy__color-warning,
+    'danger'     : $crispy__color-danger,
+    'info'       : $crispy__color-info,
+    'grey'       : $crispy__color-grey,
+    'grey-light' : $crispy__color-grey-light,
+    'grey-dark'  : $crispy__color-grey-dark,
+    'white'      : $crispy__color-white
+);
+

text-color-danger

background-color-info

border-color-success

Hide & Show

For each Breakpoint there is a hide & show-CSS-Class.

Html:

<span class="hide"></span>
+<span class="show"></span>
+<span class="show-inline"></span>
+<span class="show hide-lg"></span>
+

Width

SCSS:

$crispy__helpers__width: (
+    '25' : 25%,
+    '50' : 50%,
+    '75' : 75%,
+    '100': 100%
+);
+
width-25
width-50
width-75
width-100
\ No newline at end of file diff --git a/dist/example/imprint.html b/dist/example/imprint.html index bf66f6a..344aa8d 100644 --- a/dist/example/imprint.html +++ b/dist/example/imprint.html @@ -1 +1 @@ -Imprint | Crispy CSS
Crispy CSS

Imprint

\ No newline at end of file +Imprint | Crispy CSS
Crispy CSS

Imprint

Information pursuant to Sect. 5 German Telemedia Act (TMG)

Björn Hase
Tentakelfabrik
Obermarktstr. 18
32423 Minden

Contact

Phone: +49 (0)176 6335 6920
E-mail: me@tentakelfabrik.de

VAT ID

Sales tax identification number according to Sect. 27 a of the Sales Tax Law:
DE277227833

EU dispute resolution

The European Commission provides a platform for online dispute resolution (ODR): https://ec.europa.eu/consumers/odr.
Our e-mail address can be found above in the site notice.

Dispute resolution proceedings in front of a consumer arbitration board

We are not willing or obliged to participate in dispute resolution proceedings in front of a consumer arbitration board.

Liability for Contents

As service providers, we are liable for own contents of these websites according to Paragraph 7, Sect. 1 German Telemedia Act (TMG). However, according to Paragraphs 8 to 10 German Telemedia Act (TMG), service providers are not obligated to permanently monitor submitted or stored information or to search for evidences that indicate illegal activities.

Legal obligations to removing information or to blocking the use of information remain unchallenged. In this case, liability is only possible at the time of knowledge about a specific violation of law. Illegal contents will be removed immediately at the time we get knowledge of them.

Liability for Links

Our offer includes links to external third party websites. We have no influence on the contents of those websites, therefore we cannot guarantee for those contents. Providers or administrators of linked websites are always responsible for their own contents.

The linked websites had been checked for possible violations of law at the time of the establishment of the link. Illegal contents were not detected at the time of the linking. A permanent monitoring of the contents of linked websites cannot be imposed without reasonable indications that there has been a violation of law. Illegal links will be removed immediately at the time we get knowledge of them.

Copyright

Contents and compilations published on these websites by the providers are subject to German copyright laws. Reproduction, editing, distribution as well as the use of any kind outside the scope of the copyright law require a written permission of the author or originator. Downloads and copies of these websites are permitted for private use only.
The commercial use of our contents without permission of the originator is prohibited.

Copyright laws of third parties are respected as long as the contents on these websites do not originate from the provider. Contributions of third parties on this site are indicated as such. However, if you notice any violations of copyright law, please inform us. Such contents will be removed immediately.

\ No newline at end of file diff --git a/dist/example/index.html b/dist/example/index.html index c011afc..2efa36b 100644 --- a/dist/example/index.html +++ b/dist/example/index.html @@ -1 +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.

Getting started! Visit on Github

Apps and Websites that have been crafted

Tentakelfabrik

Gaming Circus

Trinkkofi

\ No newline at end of file +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.

Getting 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/example/mixins.html b/dist/example/mixins.html index ccbd89d..3fddde0 100644 --- a/dist/example/mixins.html +++ b/dist/example/mixins.html @@ -1,49 +1,8 @@ -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;
-}
-}
+Mixins | Crispy CSS
 Crispy CSS
Mixins
crispy__clearfix()
Clear Floats.
crispy__clearlist()
Resets Style for a List-Element
crispy__media-*, crispy__media-*-only
For each Breakpoint there is a Mixin as an Media Query.
@include crispy__media-xs() {
 
-.md {
-@include crispy__media-md() {
-display: block;
-}
 }
 
-.md-only {
-@include crispy__media-md-only() {
-display: block;
-}
-}
+@include crispy__media-xs-only() {
 
-.lg-only {
-@include crispy__media-lg-only() {
-display: block;
 }
-}
sm
md
md-only
lg-only

\ No newline at end of file
+

crispy__media-breakpoints($property, $breakpoints, $important: false)

Set property and his value for each Breakpoint.

crispy__media-breakpoints-calculate($property, $factor, $breakpoints, $important: false)

Set property and his value with an factor for each Breakpoint.

crispy__media-breakpoints-font-size($breakpoints, $font-size, $default, $important: false)

Set font-size from Breakpoints, use for calculating difference from font-size and default font-size

\ No newline at end of file diff --git a/dist/example/privacy-policy.html b/dist/example/privacy-policy.html index cca199c..d8e1bb8 100644 --- a/dist/example/privacy-policy.html +++ b/dist/example/privacy-policy.html @@ -1 +1 @@ -Privacy Policy | Crispy CSS
Crispy CSS

Privacy Policy

\ No newline at end of file +Privacy Policy | Crispy CSS
Crispy CSS

Privacy Policy

1. An overview of data protection

General information

The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit this website. The term “personal data” comprises all data that can be used to personally identify you. For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.

Data recording on this website

Who is the responsible party for the recording of data on this website (i.e. the “controller”)?

The data on this website is processed by the operator of the website, whose contact information is available under section “Information Required by Law” on this website.

How do we record your data?

We collect your data as a result of your sharing of your data with us. This may, for instance be information you enter into our contact form.

Other data shall be recorded by our IT systems automatically or after you consent to its recording during your website visit. This data comprises primarily technical information (e.g. web browser, operating system or time the site was accessed). This information is recorded automatically when you access this website.

What are the purposes we use your data for?

A portion of the information is generated to guarantee the error free provision of the website. Other data may be used to analyze your user patterns.

What rights do you have as far as your information is concerned?

You have the right to receive information about the source, recipients and purposes of your archived personal data at any time without having to pay a fee for such disclosures. You also have the right to demand that your data are rectified or eradicated. If you have consented to data processing, you have the option to revoke this consent at any time, which shall affect all future data processing. Moreover, you have the right to demand that the processing of your data be restricted under certain circumstances. Furthermore, you have the right to log a complaint with the competent supervising agency.

Please do not hesitate to contact us at any time under the address disclosed in section “Information Required by Law” on this website if you have questions about this or any other data protection related issues.

2. Hosting and Content Delivery Networks (CDN)

External Hosting

This website is hosted by an external service provider (host). Personal data collected on this website are stored on the servers of the host. These may include, but are not limited to, IP addresses, contact requests, metadata and communications, contract information, contact information, names, web page access, and other data generated through a web site.

The host is used for the purpose of fulfilling the contract with our potential and existing customers (Art. 6 para. 1 lit. b GDPR) and in the interest of secure, fast and efficient provision of our online services by a professional provider (Art. 6 para. 1 lit. f GDPR).

Our host will only process your data to the extent necessary to fulfil its performance obligations and to follow our instructions with respect to such data.

3. General information and mandatory information

Data protection

The operators of this website and its pages take the protection of your personal data very seriously. Hence, we handle your personal data as confidential information and in compliance with the statutory data protection regulations and this Data Protection Declaration.

Whenever you use this website, a variety of personal information will be collected. Personal data comprises data that can be used to personally identify you. This Data Protection Declaration explains which data we collect as well as the purposes we use this data for. It also explains how, and for which purpose the information is collected.

We herewith advise you that the transmission of data via the Internet (i.e. through e-mail communications) may be prone to security gaps. It is not possible to completely protect data against third party access.

Information about the responsible party (referred to as the “controller” in the GDPR)

The data processing controller on this website is:

Björn Hase
Tentakelfabrik
Obermarktstr. 18
32423 Minden

Phone: +49 (0)176 6335 6920
E-mail: me@tentakelfabrik.de

The controller is the natural person or legal entity that single-handedly or jointly with others makes decisions as to the purposes of and resources for the processing of personal data (e.g. names, e-mail addresses, etc.).

Revocation of your consent to the processing of data

A wide range of data processing transactions are possible only subject to your express consent. You can also revoke at any time any consent you have already given us. This shall be without prejudice to the lawfulness of any data collection that occurred prior to your revocation.

Right to object to the collection of data in special cases; right to object to direct advertising (Art. 21 GDPR)

IN THE EVENT THAT DATA ARE PROCESSED ON THE BASIS OF ART. 6 SECT. 1 LIT. E OR F GDPR, YOU HAVE THE RIGHT TO AT ANY TIME OBJECT TO THE PROCESSING OF YOUR PERSONAL DATA BASED ON GROUNDS ARISING FROM YOUR UNIQUE SITUATION. THIS ALSO APPLIES TO ANY PROFILING BASED ON THESE PROVISIONS. TO DETERMINE THE LEGAL BASIS, ON WHICH ANY PROCESSING OF DATA IS BASED, PLEASE CONSULT THIS DATA PROTECTION DECLARATION. IF YOU LOG AN OBJECTION, WE WILL NO LONGER PROCESS YOUR AFFECTED PERSONAL DATA, UNLESS WE ARE IN A POSITION TO PRESENT COMPELLING PROTECTION WORTHY GROUNDS FOR THE PROCESSING OF YOUR DATA, THAT OUTWEIGH YOUR INTERESTS, RIGHTS AND FREEDOMS OR IF THE PURPOSE OF THE PROCESSING IS THE CLAIMING, EXERCISING OR DEFENCE OF LEGAL ENTITLEMENTS (OBJECTION PURSUANT TO ART. 21 SECT. 1 GDPR).

IF YOUR PERSONAL DATA IS BEING PROCESSED IN ORDER TO ENGAGE IN DIRECT ADVERTISING, YOU HAVE THE RIGHT TO AT ANY TIME OBJECT TO THE PROCESSING OF YOUR AFFECTED PERSONAL DATA FOR THE PURPOSES OF SUCH ADVERTISING. THIS ALSO APPLIES TO PROFILING TO THE EXTENT THAT IT IS AFFILIATED WITH SUCH DIRECT ADVERTISING. IF YOU OBJECT, YOUR PERSONAL DATA WILL SUBSEQUENTLY NO LONGER BE USED FOR DIRECT ADVERTISING PURPOSES (OBJECTION PURSUANT TO ART. 21 SECT. 2 GDPR).

Right to log a complaint with the competent supervisory agency

In the event of violations of the GDPR, data subjects are entitled to log a complaint with a supervisory agency, in particular in the member state where they usually maintain their domicile, place of work or at the place where the alleged violation occurred. The right to log a complaint is in effect regardless of any other administrative or court proceedings available as legal recourses.

Right to data portability

You have the right to demand that we hand over any data we automatically process on the basis of your consent or in order to fulfil a contract be handed over to you or a third party in a commonly used, machine readable format. If you should demand the direct transfer of the data to another controller, this will be done only if it is technically feasible.

SSL and/or TLS encryption

For security reasons and to protect the transmission of confidential content, such as purchase orders or inquiries you submit to us as the website operator, this website uses either an SSL or a TLS encryption program. You can recognize an encrypted connection by checking whether the address line of the browser switches from “http://” to “https://” and also by the appearance of the lock icon in the browser line.

If the SSL or TLS encryption is activated, data you transmit to us cannot be read by third parties.

Information about, rectification and eradication of data

Within the scope of the applicable statutory provisions, you have the right to at any time demand information about your archived personal data, their source and recipients as well as the purpose of the processing of your data. You may also have a right to have your data rectified or eradicated. If you have questions about this subject matter or any other questions about personal data, please do not hesitate to contact us at any time at the address provided in section “Information Required by Law.”

Right to demand processing restrictions

You have the right to demand the imposition of restrictions as far as the processing of your personal data is concerned. To do so, you may contact us at any time at the address provided in section “Information Required by Law.” The right to demand restriction of processing applies in the following cases:

  • In the event that you should dispute the correctness of your data archived by us, we will usually need some time to verify this claim. During the time that this investigation is ongoing, you have the right to demand that we restrict the processing of your personal data.
  • If the processing of your personal data was/is conducted in an unlawful manner, you have the option to demand the restriction of the processing of your data in lieu of demanding the eradication of this data.
  • If we do not need your personal data any longer and you need it to exercise, defend or claim legal entitlements, you have the right to demand the restriction of the processing of your personal data instead of its eradication.
  • If you have raised an objection pursuant to Art. 21 Sect. 1 GDPR, your rights and our rights will have to be weighed against each other. As long as it has not been determined whose interests prevail, you have the right to demand a restriction of the processing of your personal data.

If you have restricted the processing of your personal data, these data – with the exception of their archiving – may be processed only subject to your consent or to claim, exercise or defend legal entitlements or to protect the rights of other natural persons or legal entities or for important public interest reasons cited by the European Union or a member state of the EU.

4. Recording of data on this website

Server log files

The provider of this website and its pages automatically collects and stores information in so-called server log files, which your browser communicates to us automatically. The information comprises:

  • The type and version of browser used
  • The used operating system
  • Referrer URL
  • The hostname of the accessing computer
  • The time of the server inquiry
  • The IP address

This data is not merged with other data sources.

This data is recorded on the basis of Art. 6 Sect. 1 lit. f GDPR. The operator of the website has a legitimate interest in the technically error free depiction and the optimization of the operator’s website. In order to achieve this, server log files must be recorded.

Request by e-mail, telephone or fax

If you contact us by e-mail, telephone or fax, your request, including all resulting personal data (name, request) will be stored and processed by us for the purpose of processing your request. We do not pass these data on without your consent.

These data are processed on the basis of Art. 6 Sect. 1 lit. b GDPR if your inquiry is related to the fulfillment of a contract or is required for the performance of pre-contractual measures. In all other cases, the data are processed on the basis of our legitimate interest in the effective handling of inquiries submitted to us (Art. 6 Sect. 1 lit. f GDPR) or on the basis of your consent (Art. 6 Sect. 1 lit. a GDPR) if it has been obtained.

The data sent by you to us via contact requests remain with us until you request us to delete, revoke your consent to the storage or the purpose for the data storage lapses (e.g. after completion of your request). Mandatory statutory provisions - in particular statutory retention periods - remain unaffected.

\ No newline at end of file diff --git a/dist/example/styles.css b/dist/example/styles.css index bfa97c5..2c5abbc 100644 --- a/dist/example/styles.css +++ b/dist/example/styles.css @@ -1 +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 15px}@media only screen and (min-width:992px){figure{margin:0 0 20px}}figcaption{margin:10px 0}button,input,optgroup,select,textarea{margin:0}fieldset{padding:.4em .6em}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:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.2;margin:0 0 15px}@media only screen and (min-width:992px){.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin:0 0 20px}}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!important}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.28rem!important}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.01rem!important}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.74rem!important}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.47rem!important}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.2rem!important}}p{margin:0 0 15px}@media only screen and (min-width:992px){p{margin:0 0 20px}}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:.4em .6em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 15px}@media only screen and (min-width:992px){dl,ol,ul{margin:0 0 20px}}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:1.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:1.1rem!important}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.8525rem!important}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.3475rem!important}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.595rem!important}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.8425rem!important}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:2.09rem!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}.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 15px;padding:.4em .8em}@media only screen and (min-width:992px){.button{font-size:1.1rem;margin:0 0 20px;padding:.6em 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 15px;padding:.4em .6em}@media only screen and (min-width:992px){.code{margin:0 0 20px;padding:.8em 1.1em}}.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 15px}@media only screen and (min-width:992px){.field{margin:0 0 20px}}.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:1.1rem}}.field__select,.field__text{display:block;width:100%;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.5em .6em}@media only screen and (min-width:992px){.field__select,.field__text{padding:.7em .8em}}.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{border:1px solid #dfdfdf;background-color:#fff;padding:.5em .3em}@media only screen and (min-width:992px){.field__select{padding:.7em .6em}}.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:.5em .6em}@media only screen and (min-width:992px){.field__panel{padding:.7em .8em}}.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 .5em}.group .group__item:first-child{margin-left:0}.group .group__item:last-child{margin-right:0}.group--hr .group__item{margin:0}.group--hr .group__item:after{margin:0 .5em;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:.4em .6em}@media only screen and (min-width:992px){.panel__inner{padding:.8em 1.1em}}.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:.4em .6em}@media only screen and (min-width:992px){.table td,.table th{padding:.8em 1.1em}}.table th{border-bottom-width:2px}.main__title{margin-top:80px}@media only screen and (min-width:768px){.main__title{margin-top:100px}}.button--transparent{padding:0;margin:0;border:0;background:transparent}.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}.header{max-width:100%}.header a{text-decoration:none}.header a .icon--big{font-size:6rem}.header a:hover{color:#f18f01}.header .group__item{display:block;margin:0}@media only screen and (min-width:768px){.header .group__item{margin-right:10px;display:inline-block}}.header .button--transparent:hover .icon{fill:#fff}.header--fixed{position:fixed;top:0;left:0;width:100%;z-index:101}.header nav a{color:#fff}.header nav a:hover{color:#363636}.page .header .icon{margin:-4px 0 0}.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} \ No newline at end of file +.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 15px}@media only screen and (min-width:992px){figure{margin:0 0 20px}}figcaption{margin:10px 0}button,input,optgroup,select,textarea{margin:0}fieldset{padding:5px 12px}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:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.2;margin:0 0 15px}@media only screen and (min-width:992px){.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin:0 0 20px}}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 15px}@media only screen and (min-width:992px){p{margin:0 0 20px}}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:5px 12px}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 15px}@media only screen and (min-width:992px){dl,ol,ul{margin:0 0 20px}}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:1.1rem}}.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}.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:1.1rem!important}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.8525rem!important}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.3475rem!important}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.595rem!important}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.8425rem!important}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:2.09rem!important}}.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}.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}.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}}.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 15px;padding:.4em .8em}@media only screen and (min-width:992px){.button{font-size:1.1rem;margin:0 0 20px;padding:.6em 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 15px;padding:5px 12px}@media only screen and (min-width:992px){.code{margin:0 0 20px;padding:10px 17px}}.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 15px}@media only screen and (min-width:992px){.field{margin:0 0 20px}}.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:1.1rem}}.field__select,.field__text{display:block;width:100%;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.5em .6em}@media only screen and (min-width:992px){.field__select,.field__text{padding:.7em .8em}}.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{border:1px solid #dfdfdf;background-color:#fff;padding:.5em .3em}@media only screen and (min-width:992px){.field__select{padding:.7em .6em}}.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:.5em .6em}@media only screen and (min-width:992px){.field__panel{padding:.7em .8em}}.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 .5em}.group .group__item:first-child{margin-left:0}.group .group__item:last-child{margin-right:0}.group--hr .group__item{margin:0}.group--hr .group__item:after{margin:0 .5em;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:5px 12px}@media only screen and (min-width:992px){.panel__inner{padding:10px 17px}}.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:5px 12px}@media only screen and (min-width:992px){.table td,.table th{padding:10px 17px}}.table th{border-bottom-width:2px}.button--transparent{padding:0;margin:0;border:0;background:transparent}.header{max-width:100%}.header a{text-decoration:none}.header a .icon--big{font-size:6rem}.header a:hover{color:#f18f01}.header .group__item{display:block;margin:0}@media only screen and (min-width:768px){.header .group__item{margin-right:10px;display:inline-block}}.header .button--transparent:hover .icon{fill:#fff}.header--fixed{position:fixed;top:0;left:0;width:100%;z-index:101}.header nav a{color:#fff}.header nav a:hover{color:#363636}.page .header .icon{margin:-4px 0 0}.main__title{margin-top:80px}@media only screen and (min-width:768px){.main__title{margin-top:100px}}.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} \ No newline at end of file diff --git a/src/_core.scss b/src/_core.scss index c82dddb..e613f75 100644 --- a/src/_core.scss +++ b/src/_core.scss @@ -50,9 +50,9 @@ direction: $crispy__direction; font-size: $crispy__font-size; - @include crispy__media__breakpoints('line-height', $crispy__line-height__breakpoints); + @include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints); line-height: $crispy__line-height; - @include crispy__media__breakpoints('font-size', $crispy__font-size-breakpoints); + @include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints); } } diff --git a/src/_functions.scss b/src/_functions.scss index 56c741e..2e3fede 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -10,30 +10,17 @@ /** - * strip unit from value + * strip unit from value + * + * @param {mixed} $value + * @return {number} * - * @param {mixed} $value - * @return {number} */ @function stripUnit($value) { @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 * @@ -41,17 +28,18 @@ * @return {boolean|unit} * */ -@function getDefault($values) { +@function getDefault($map) { $default: false; - @if map-has-key($values, 'default') { - $default: map-get($values, 'default'); + @if map-has-key($map, 'default') { + $default: map-get($map, 'default'); } @return $default; } + /** * z-index * @@ -71,35 +59,16 @@ } } + /** + * factor * * * - * @param {[type]} $directions [description] - * @return {[type]} [description] + * @param {integer} $x + * @return {float} * */ -@function oppositeDirection($direction) -{ - $opposite-direction: 0; - - $direction-map: ( - 'top': 'bottom', - 'right': 'left', - 'bottom': 'top', - 'left': 'right', - 'center': 'center', - 'ltr': 'rtl', - 'rtl': 'ltr' - ); - - $direction: to-lower-case($direction); - - @if map-has-key($direction-map, $direction) { - $opposite-direction: map-get($direction-map, $direction); - } @else { - @warn "No opposite direction can be found for `#{$direction}`. Direction omitted."; - } - - @return $opposite-direction; -} +@function factor($x) { + @return ($x * $x) / 2; +} \ No newline at end of file diff --git a/src/_helpers.scss b/src/_helpers.scss index 176865c..17a86b9 100644 --- a/src/_helpers.scss +++ b/src/_helpers.scss @@ -26,6 +26,33 @@ $crispy__helpers__width: ( @mixin crispy__helpers() { + /** + * borders + * + * + */ + + .bordered { + border: $crispy__border !important; + } + + .rounded { + border-radius: $crispy__border-radius !important; + } + + .round { + border-radius: 50% !important; + } + + .borderless { + border: 0 !important; + } + + .radiusless { + border-radius: 0 !important; + } + + /** * typography * @@ -94,10 +121,36 @@ $crispy__helpers__width: ( @each $name, $font-size in $crispy__font-sizes { .text-size-#{$name} { font-size: $font-size !important; - @include crispy__media__breakpoints__diff($crispy__font-size-breakpoints, $font-size, $defaultFontSize); + @include crispy__media-breakpoints-font-size($crispy__font-size-breakpoints, $font-size, $defaultFontSize, true); + } + } + + + /** + * colors + * + * + */ + + @each $name, $color in $crispy__colors { + .text-color-#{$name} { + color: $color !important; + } + } + + @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; } } + /** * floating * @@ -125,29 +178,6 @@ $crispy__helpers__width: ( @include crispy__clearfix(); } - /** - * colors - * - * - */ - - @each $name, $color in $crispy__colors { - .text-color-#{$name} { - color: $color !important; - } - } - - @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; - } - } /** * position @@ -211,11 +241,11 @@ $crispy__helpers__width: ( .show { display: block !important; - &--inline { + &-inline { display: inline !important; } - &--inline-block { + &-inline-block { display: inline-block !important; } @@ -223,11 +253,11 @@ $crispy__helpers__width: ( @include crispy__media-xs() { display: block !important; - &--inline { + &-inline { display: inline !important; } - &--inline-block { + &-inline-block { display: inline-block !important; } } @@ -237,11 +267,11 @@ $crispy__helpers__width: ( @include crispy__media-sm() { display: block !important; - &--inline { + &-inline { display: inline !important; } - &--inline-block { + &-inline-block { display: inline-block !important; } } @@ -251,11 +281,11 @@ $crispy__helpers__width: ( @include crispy__media-md() { display: block !important; - &--inline { + &-inline { display: inline !important; } - &--inline-block { + &-inline-block { display: inline-block !important; } } @@ -265,11 +295,11 @@ $crispy__helpers__width: ( @include crispy__media-lg() { display: block !important; - &--inline { + &-inline { display: inline !important; } - &--inline-block { + &-inline-block { display: inline-block !important; } } @@ -278,43 +308,17 @@ $crispy__helpers__width: ( &-xlg { @include crispy__media-xlg() { display: block !important; - &--inline { + &-inline { display: inline !important; } - &--inline-block { + &-inline-block { display: inline-block !important; } } } } - /** - * borders - * - * - */ - - .bordered { - border: $crispy__border !important; - } - - .rounded { - border-radius: $crispy__border-radius !important; - } - - .round { - border-radius: 50% !important; - } - - .borderless { - border: 0 !important; - } - - .radiusless { - border-radius: 0 !important; - } - /** * width * @@ -347,7 +351,7 @@ $crispy__helpers__width: ( margin-top: ($crispy__helpers__spacing-gap * factor($i)) !important; @if $i > 0 { - @include crispy__media__breakpoints_calculate('margin-top', factor($i), $crispy__helpers__spacing-breakpoints); + @include crispy__media-breakpoints-calculate('margin-top', factor($i), $crispy__helpers__spacing-breakpoints, true); } } @@ -355,7 +359,7 @@ $crispy__helpers__width: ( margin-bottom: ($crispy__helpers__spacing-gap * factor($i)) !important; @if $i > 0 { - @include crispy__media__breakpoints_calculate('margin-bottom', factor($i), $crispy__helpers__spacing-breakpoints); + @include crispy__media-breakpoints-calculate('margin-bottom', factor($i), $crispy__helpers__spacing-breakpoints, true); } } @@ -363,7 +367,7 @@ $crispy__helpers__width: ( padding-top: ($crispy__helpers__spacing-gap * $i) !important; @if $i > 0 { - @include crispy__media__breakpoints_calculate('padding-top', factor($i), $crispy__helpers__spacing-breakpoints); + @include crispy__media-breakpoints-calculate('padding-top', factor($i), $crispy__helpers__spacing-breakpoints, true); } } @@ -371,7 +375,7 @@ $crispy__helpers__width: ( padding-bottom: ($crispy__helpers__spacing-gap * $i) !important; @if $i > 0 { - @include crispy__media__breakpoints_calculate('padding-bottom', factor($i), $crispy__helpers__spacing-breakpoints); + @include crispy__media-breakpoints-calculate('padding-bottom', factor($i), $crispy__helpers__spacing-breakpoints, true); } } @@ -381,7 +385,7 @@ $crispy__helpers__width: ( margin-left: ($crispy__helpers__spacing-gap * $i) !important; @if $i > 0 { - @include crispy__media__breakpoints_calculate('margin-left', factor($i), $crispy__helpers__spacing-breakpoints); + @include crispy__media-breakpoints-calculate('margin-left', factor($i), $crispy__helpers__spacing-breakpoints, true); } } @@ -389,7 +393,7 @@ $crispy__helpers__width: ( margin-right: ($crispy__helpers__spacing-gap * $i) !important; @if $i > 0 { - @include crispy__media__breakpoints_calculate('margin-right', factor($i), $crispy__helpers__spacing-breakpoints); + @include crispy__media-breakpoints-calculate('margin-right', factor($i), $crispy__helpers__spacing-breakpoints, true); } } @@ -397,7 +401,7 @@ $crispy__helpers__width: ( padding-left: ($crispy__helpers__spacing-gap * $i) !important; @if $i > 0 { - @include crispy__media__breakpoints_calculate('padding-left', factor($i), $crispy__helpers__spacing-breakpoints); + @include crispy__media-breakpoints-calculate('padding-left', factor($i), $crispy__helpers__spacing-breakpoints, true); } } @@ -405,7 +409,7 @@ $crispy__helpers__width: ( padding-right: ($crispy__helpers__spacing-gap * $i) !important; @if $i > 0 { - @include crispy__media__breakpoints_calculate('padding-right', factor($i), $crispy__helpers__spacing-breakpoints); + @include crispy__media-breakpoints-calculate('padding-right', factor($i), $crispy__helpers__spacing-breakpoints, true); } } } diff --git a/src/_mixins.scss b/src/_mixins.scss index 0470da6..8349ded 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -10,7 +10,7 @@ /** - * clearfix to end floating + * Clear Floats * * * @@ -35,7 +35,7 @@ * */ -@mixin crispy__clear_list() { +@mixin crispy__clearlist() { list-style: none; margin: 0; padding: 0; @@ -48,7 +48,8 @@ /** - * media-queries + * media-queries as mixins + * based on breakpoints from variables * * * @@ -128,54 +129,72 @@ /** + * Set property and his value for each Breakpoint * - * @param {[type]} $property [description] - * @param {[type]} $breakpoints [description] + * ( + * $crispy__md: 10px + * ) * - * @return {[type]} [description] + * + * @param {css} $property + * @param {map} $breakpoints + * @param {Boolean} $important [false] * */ -@mixin crispy__media__breakpoints($property, $breakpoints) { +@mixin crispy__media-breakpoints($property, $breakpoints, $important: false) { @each $breakpoint, $value in $breakpoints { @media only screen and (min-width: $breakpoint) { - #{$property}: $value; + @if $important == false { + #{$property}: $value; + } @else { + #{$property}: $value !important; + } } } } /** + * Set property and his value with an factor for each Breakpoint * - * @param {[type]} $property [description] - * @param {[type]} $factor [description] - * @param {[type]} $breakpoints [description] + * ( + * $crispy__md: 10px + * ) + * + * @param {css} $property + * @param {number} $factor + * @param {map} $breakpoints + * @param {Boolean} $important [false] * - * @return {[type]} [description] */ -@mixin crispy__media__breakpoints_calculate($property, $factor, $breakpoints) { +@mixin crispy__media-breakpoints-calculate($property, $factor, $breakpoints, $important: false) { @each $breakpoint, $value in $breakpoints { @media only screen and (min-width: $breakpoint) { - #{$property}: ($value * $factor) !important; + @if $important == false { + #{$property}: ($value * $factor); + } @else { + #{$property}: ($value * $factor) !important; + } } } } - /** + * Set font-size from Breakpoints, use for calculating difference from font-size and default font-size * + * ( + * $crispy__md: 1rem + * ) * - * @param {[type]} $breakpoints [des - * @param {[type]} $font-sizes [description] - * @param {[type]} $font-size [description] - * - * @return {[type]} [description] + * @param {map} $breakpoints + * @param {unit} $font-size + * @param {unit} $default + * @param {Boolean} $important [false] * */ - -@mixin crispy__media__breakpoints__diff($breakpoints, $font-size, $default) { - +@mixin crispy__media-breakpoints-font-size($breakpoints, $font-size, $default, $important: false) { @each $breakpoint, $value in $breakpoints { // getting diff @@ -184,55 +203,12 @@ // ignore if factor is zero @if $factor > 0 { @media only screen and (min-width: $breakpoint) { - font-size: ($value * $factor) !important; + @if $important == false { + font-size: ($value * $factor); + } @else { + font-size: ($value * $factor) !important; + } } } } } - - -/** - * triangle - * - * - * @param {Direction} $direction - Triangle direction, either 'top', 'right', 'bottom' or 'left' - * @param {Color} $color [currentcolor] - Triangle color - * @param {Length} $size [1em] - Triangle size - * - */ - -@mixin triangle($direction, $color: currentcolor, $size: 1em) { - - @if not index(top right bottom left, $direction) { - @error "Direction must be either `top`, `right`, `bottom` or `left`."; - } - - width: 0; - height: 0; - content: ''; - z-index: 2; - - // adding opposite postion for border - $opposite: oppositeDirection($direction); - - // @TODO with #{opposite-position($direction)} it breaks in webpack - @if $opposite == top { - border-top: ($size * 1.5) solid $color; - } @else if $opposite == bottom { - border-bottom: ($size * 1.5) solid $color; - } @else if $opposite == left { - border-left: ($size * 1.5) solid $color; - } @else if $opposite == right { - border-right: ($size * 1.5) solid $color; - } - - $perpendicular-borders: $size solid transparent; - - @if $direction == top or $direction == bottom { - border-left: $perpendicular-borders; - border-right: $perpendicular-borders; - } @else if $direction == right or $direction == left { - border-bottom: $perpendicular-borders; - border-top: $perpendicular-borders; - } -} diff --git a/src/_variables.scss b/src/_variables.scss index bfe0b07..cdf82ef 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -115,9 +115,9 @@ $crispy__margin-breakpoints: ( $crispy__md: 0 0 20px ) !default; -$crispy__padding: 0.4em 0.6em !default; +$crispy__padding: 5px 12px !default; $crispy__padding-breakpoints: ( - $crispy__md: 0.8em 1.1em + $crispy__md: 10px 17px ) !default; diff --git a/src/components/_button.scss b/src/components/_button.scss index 05194b5..449d15f 100644 --- a/src/components/_button.scss +++ b/src/components/_button.scss @@ -35,13 +35,13 @@ $crispy__button__margin-breakpoints: $crispy__margin-breakpoints !default; font-weight: $crispy__button__font-weight; font-size: $crispy__button__font-size; - @include crispy__media__breakpoints('font-size', $crispy__button__font-size-breakpoints); + @include crispy__media-breakpoints('font-size', $crispy__button__font-size-breakpoints); margin: $crispy__button__margin; - @include crispy__media__breakpoints('margin', $crispy__button__margin-breakpoints); + @include crispy__media-breakpoints('margin', $crispy__button__margin-breakpoints); padding: $crispy__button__padding; - @include crispy__media__breakpoints('padding', $crispy__button__padding-breakpoints); + @include crispy__media-breakpoints('padding', $crispy__button__padding-breakpoints); &:hover { cursor: pointer; diff --git a/src/components/_code.scss b/src/components/_code.scss index 6fc517a..b3325a0 100644 --- a/src/components/_code.scss +++ b/src/components/_code.scss @@ -33,9 +33,9 @@ $crispy__code__margin-breakpoints: $crispy__margin-breakpoints !default; background-color: $crispy__code__background-color; margin: $crispy__code__margin; - @include crispy__media__breakpoints('margin', $crispy__code__margin-breakpoints); + @include crispy__media-breakpoints('margin', $crispy__code__margin-breakpoints); padding: $crispy__code__padding; - @include crispy__media__breakpoints('padding', $crispy__code__padding-breakpoints); + @include crispy__media-breakpoints('padding', $crispy__code__padding-breakpoints); } } diff --git a/src/components/_field.scss b/src/components/_field.scss index f7f7493..1a71517 100644 --- a/src/components/_field.scss +++ b/src/components/_field.scss @@ -53,7 +53,7 @@ $crispy__field__select__border: $crispy__border !default; @mixin crispy__field() { .field { margin: $crispy__field__margin; - @include crispy__media__breakpoints('margin', $crispy__field__margin-breakpoints); + @include crispy__media-breakpoints('margin', $crispy__field__margin-breakpoints); } .field__text, .field__select, .field__select, .field__label { @@ -61,7 +61,7 @@ $crispy__field__select__border: $crispy__border !default; font-weight: $crispy__field__font-weight; font-size: $crispy__field__font-size; - @include crispy__media__breakpoints('font-size', $crispy__field__font-size-breakpoints); + @include crispy__media-breakpoints('font-size', $crispy__field__font-size-breakpoints); } // basic style for input elements, will be used to @extend @@ -73,7 +73,7 @@ $crispy__field__select__border: $crispy__border !default; appearance: none; padding: $crispy__field__padding; - @include crispy__media__breakpoints('padding', $crispy__field__padding-breakpoints); + @include crispy__media-breakpoints('padding', $crispy__field__padding-breakpoints); } /** @@ -138,7 +138,7 @@ $crispy__field__select__border: $crispy__border !default; background-color: $crispy__field__select__background-color; padding: $crispy__field__select__padding; - @include crispy__media__breakpoints('padding', $crispy__field__select__padding-breakpoints); + @include crispy__media-breakpoints('padding', $crispy__field__select__padding-breakpoints); &:focus { outline: 0; @@ -219,7 +219,7 @@ $crispy__field__select__border: $crispy__border !default; .field__panel { padding: $crispy__field__padding; - @include crispy__media__breakpoints('padding', $crispy__field__padding-breakpoints); + @include crispy__media-breakpoints('padding', $crispy__field__padding-breakpoints); } .field--valid { diff --git a/src/components/_group.scss b/src/components/_group.scss index a8e702b..38e0a19 100644 --- a/src/components/_group.scss +++ b/src/components/_group.scss @@ -18,7 +18,7 @@ $crispy__group__character: '/' !default; @mixin crispy__group() { .group { - @include crispy__clear_list(); + @include crispy__clearlist(); display: inline-block; .group__item { diff --git a/src/components/_modal.scss b/src/components/_modal.scss index a741e65..3efbb89 100644 --- a/src/components/_modal.scss +++ b/src/components/_modal.scss @@ -36,7 +36,7 @@ $crispy__modal__z-index: zIndex('modal') !default; transform: translate(-50%,-50%); // make sure that on smartphones modal uses full width - @include crispy__media__breakpoints('max-width', $crispy__modal__max-width-breakpoints); + @include crispy__media-breakpoints('max-width', $crispy__modal__max-width-breakpoints); &--fixed { position: fixed; @@ -60,7 +60,7 @@ $crispy__modal__z-index: zIndex('modal') !default; &--center-right, &--center-left { transform: translate(0, 0); - @include crispy__media__breakpoints('margin', $crispy__modal__margin-breakpoints); + @include crispy__media-breakpoints('margin', $crispy__modal__margin-breakpoints); } &--bottom-left, &--bottom-right, &--bottom-center { diff --git a/src/components/_panel.scss b/src/components/_panel.scss index 41545d7..a0d98a6 100644 --- a/src/components/_panel.scss +++ b/src/components/_panel.scss @@ -23,7 +23,7 @@ $crispy__panel__background-color: $crispy__color-grey-light !default; &__inner { padding: $crispy__panel__inner-padding; - @include crispy__media__breakpoints('padding', $crispy__panel__inner-padding-breakpoints); + @include crispy__media-breakpoints('padding', $crispy__panel__inner-padding-breakpoints); } } } diff --git a/src/components/_table.scss b/src/components/_table.scss index 60c40b1..0e88155 100644 --- a/src/components/_table.scss +++ b/src/components/_table.scss @@ -57,7 +57,7 @@ $crispy__table__striped__background-color: $crispy__color-grey-light !default; border-bottom: $crispy__table__td__border; padding: $crispy__table__padding; - @include crispy__media__breakpoints('padding', $crispy__table__padding-breakpoints); + @include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints); } th { diff --git a/src/core/_heading.scss b/src/core/_heading.scss index 77b289b..c846cfb 100644 --- a/src/core/_heading.scss +++ b/src/core/_heading.scss @@ -21,7 +21,7 @@ line-height: 1.2; margin: $crispy__heading__margin; - @include crispy__media__breakpoints('margin', $crispy__heading__margin-breakpoints); + @include crispy__media-breakpoints('margin', $crispy__heading__margin-breakpoints); } h5 { @@ -35,7 +35,7 @@ @each $h, $font-size in $crispy__heading__font-sizes { #{$h}, .#{$h} { font-size: $font-size; - @include crispy__media__breakpoints__diff($crispy__heading__font-sizes__breakpoints, $font-size, $crispy__font-size); + @include crispy__media-breakpoints-font-size($crispy__heading__font-sizes__breakpoints, $font-size, $crispy__font-size); } } } \ No newline at end of file diff --git a/src/core/_normalize.scss b/src/core/_normalize.scss index f7758fe..ccd9ee3 100644 --- a/src/core/_normalize.scss +++ b/src/core/_normalize.scss @@ -45,7 +45,7 @@ figure { margin: $crispy__margin; - @include crispy__media__breakpoints('margin', $crispy__margin-breakpoints); + @include crispy__media-breakpoints('margin', $crispy__margin-breakpoints); } figcaption { @@ -170,6 +170,6 @@ font-family: $crispy__font-family-monospace; font-size: $crispy__font-size-monospace; - @include crispy__media__breakpoints('font-size', $crispy__font-size-monospace__breakpoints); + @include crispy__media-breakpoints('font-size', $crispy__font-size-monospace__breakpoints); } } \ No newline at end of file diff --git a/src/core/_typography.scss b/src/core/_typography.scss index da33905..f347563 100644 --- a/src/core/_typography.scss +++ b/src/core/_typography.scss @@ -12,7 +12,7 @@ // paragraphs p { margin: $crispy__margin; - @include crispy__media__breakpoints('margin', $crispy__margin-breakpoints); + @include crispy__media-breakpoints('margin', $crispy__margin-breakpoints); } // Semantic text elements @@ -93,7 +93,7 @@ padding: 0; margin: $crispy__margin; - @include crispy__media__breakpoints('margin', $crispy__margin-breakpoints); + @include crispy__media-breakpoints('margin', $crispy__margin-breakpoints); } ol, diff --git a/src/example/components/_triangle.scss b/src/example/components/_triangle.scss deleted file mode 100644 index 5892c60..0000000 --- a/src/example/components/_triangle.scss +++ /dev/null @@ -1,31 +0,0 @@ -/** - * components: triangle - * - * - * @author Björn Hase, Tentakelfabrik - * @license http://opensource.org/licenses/MIT The MIT License - * @link https://github.com/tentakelfabrik/crispy-css - * - */ - -@mixin component__triangle() { - .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); - } -} \ No newline at end of file diff --git a/src/example/components/_main.scss b/src/example/site/_main.scss similarity index 87% rename from src/example/components/_main.scss rename to src/example/site/_main.scss index 972db0d..be9c8fe 100644 --- a/src/example/components/_main.scss +++ b/src/example/site/_main.scss @@ -1,5 +1,5 @@ /** - * components: header + * site: header * * * @author Björn Hase, Tentakelfabrik @@ -8,7 +8,7 @@ * */ -@mixin component__main() { +@mixin site__main() { .main { &__title { margin-top: 80px; diff --git a/src/example/styles.scss b/src/example/styles.scss index 3fad039..796cefd 100644 --- a/src/example/styles.scss +++ b/src/example/styles.scss @@ -1,17 +1,14 @@ @import - 'reflex', '../crispy-all', 'site/header', + 'site/main', 'components/button', - 'components/main', - 'components/triangle', 'templates/home'; -@include component__main(); @include component__button(); -@include component__triangle(); @include site__header(); +@include site__main(); @include template__home(); .container { diff --git a/src/html/partials/components.html b/src/html/partials/components.html index 5c672e7..c71c847 100644 --- a/src/html/partials/components.html +++ b/src/html/partials/components.html @@ -1,5 +1,5 @@ -

+

Button

@@ -43,7 +43,7 @@ $crispy__button__margin-breakpoints: $crispy__margin-breakpoints; -

+

Code

@@ -66,7 +66,7 @@ $crispy__code__margin-breakpoints: $crispy__margin-breakpoints; -

+

Fields

SCSS:

@@ -372,7 +372,7 @@ $crispy__field__select__border: $crispy__border; -

+

Group

@@ -416,7 +416,7 @@ $crispy__group__character: '/' !default; -

+

Hero

Html:

@@ -429,7 +429,7 @@ $crispy__group__character: '/' !default; -

+

Icon

@@ -481,7 +481,7 @@ $crispy__group__character: '/' !default; -

+

Media

Html:

@@ -505,7 +505,7 @@ $crispy__group__character: '/' !default; -

+

Panel

@@ -529,7 +529,7 @@ $crispy__panel__background-color: $crispy__color-grey-light; -

+

Progress

@@ -552,7 +552,7 @@ $crispy__progress__border-color: $crispy__color-border; -

+

Modal

@@ -615,7 +615,7 @@ $crispy__modal__z-index: zIndex('modal'); -

+

Table

diff --git a/src/html/partials/footer.html b/src/html/partials/footer.html index fe58894..f38cd83 100644 --- a/src/html/partials/footer.html +++ b/src/html/partials/footer.html @@ -11,7 +11,7 @@ Privacy Policy
  • - + @@ -19,7 +19,7 @@

    • - Made with Euphorie by Björn Hase, Tentakelfabrik + Made with euphoria by Björn Hase, Tentakelfabrik

    diff --git a/src/html/partials/functions.html b/src/html/partials/functions.html index 50b692a..413f416 100644 --- a/src/html/partials/functions.html +++ b/src/html/partials/functions.html @@ -1,24 +1,38 @@ + +

    + getValue($map) +

    +
    +

    + Returns a value from a map if key "default" found. +

    + + -

    - stripUnit() -

    -

    Sass:

    -
    stripUnit(10px);
    +

    + stripUnit($value) +

    +

    Returns value without unit.

    +

    SCSS:

    +
    stripUnit(10px);
    + + -

    - zIndex(name) -

    -

    Sass:

    -
    zIndex('modal');
    +

    + zIndex($name) +

    +

    Returns value from $crispy__z-index.

    -

    Sass:

    + +

    SCSS:

    $crispy__z-index: (
     'overlay': 90,
     'modal'  : 100
-);
    \ No newline at end of file +); +
    zIndex('modal');
    \ No newline at end of file diff --git a/src/html/partials/helpers.html b/src/html/partials/helpers.html index d10ac2f..7c06723 100644 --- a/src/html/partials/helpers.html +++ b/src/html/partials/helpers.html @@ -1,5 +1,7 @@ -

    Border

    +

    Border

    +
    +
    .round @@ -12,8 +14,24 @@
    .rounded
    .borderless
    + -

    Margin / Padding

    +

    Margin / Padding

    +
    +

    + Padding and margin-left, -top, -right and -bottom. The Classes Paddingless and Marginless sets padding and margin in each + direction to zero. +

    + +

    SCSS:

    +
    $crispy__helpers__spacing-gap: 8px;
+$crispy__helpers__spacing-steps: 6;
+$crispy__helpers__spacing-max-steps: 3;
+$crispy__helpers__spacing-breakpoints: (
+    $crispy__md: 12px
+);
+
    +
    padding-bottom-0
    padding-bottom-1
    padding-bottom-2
    @@ -21,9 +39,14 @@
    padding-bottom-4
    padding-bottom-5
    padding-bottom-6
    +
    paddingless
    +
    marginless
    + -

    Typography

    +

    Typography

    +
    +

    text-left

    text-center

    text-right

    @@ -44,8 +67,98 @@

    text-crossed

    text-underline

    + + +

    Font Size

    +
    +

    SCSS:

    +
    $crispy__font-size: 0.9rem;
+$crispy__font-size-breakpoints: (
+    $crispy__md: 1.1rem
+);
+
+$crispy__font-sizes: (
+    'default' : $crispy__font-size,
+    'small'   : $crispy__font-size * 0.75,
+    'medium'  : $crispy__font-size * 1.25,
+    'large'   : $crispy__font-size * 1.5,
+    'big'     : $crispy__font-size * 1.75,
+    'mega'    : $crispy__font-size * 2,
+);
+
    +

    text-size-small

    +

    text-size-medium

    +

    text-size-large

    +

    text-size-big

    +

    text-size-mega

    + + + +

    Float

    +
    +

    + float-left +

    +

    + float-right +

    +

    + float-none +

    +

    + centered +

    + + + +

    Colors

    +
    +

    SCSS:

    +
    $crispy__colors: (
+    'primary'    : $crispy__color-primary,
+    'secondary'  : $crispy__color-secondary,
+    'success'    : $crispy__color-success,
+    'warning'    : $crispy__color-warning,
+    'danger'     : $crispy__color-danger,
+    'info'       : $crispy__color-info,
+    'grey'       : $crispy__color-grey,
+    'grey-light' : $crispy__color-grey-light,
+    'grey-dark'  : $crispy__color-grey-dark,
+    'white'      : $crispy__color-white
+);
+
    +

    text-color-danger

    +

    background-color-info

    +

    border-color-success

    + + + +

    Hide & Show

    +
    +

    + For each Breakpoint there is a hide & show-CSS-Class. +

    + +

    Html:

    +
    <span class="hide"></span>
+<span class="show"></span>
+<span class="show-inline"></span>
+<span class="show hide-lg"></span>
+
    + + -

    Width

    +

    Width

    +
    +

    SCSS:

    +
    $crispy__helpers__width: (
+    '25' : 25%,
+    '50' : 50%,
+    '75' : 75%,
+    '100': 100%
+);
+
    +
    width-25
    width-50
    width-75
    diff --git a/src/html/partials/imprint.html b/src/html/partials/imprint.html index e69de29..b25895a 100644 --- a/src/html/partials/imprint.html +++ b/src/html/partials/imprint.html @@ -0,0 +1,20 @@ +

    Information pursuant to Sect. 5 German Telemedia Act (TMG)

    +

    Björn Hase
    +Tentakelfabrik
    +Obermarktstr. 18
    +32423 Minden

    + +

    Contact

    +

    Phone: +49 (0)176 6335 6920
    +E-mail: me@tentakelfabrik.de

    + +

    VAT ID

    +

    Sales tax identification number according to Sect. 27 a of the Sales Tax Law:
    +DE277227833

    + +

    EU dispute resolution

    +

    The European Commission provides a platform for online dispute resolution (ODR): https://ec.europa.eu/consumers/odr.
    Our e-mail address can be found above in the site notice.

    + +

    Dispute resolution proceedings in front of a consumer arbitration board

    We are not willing or obliged to participate in dispute resolution proceedings in front of a consumer arbitration board.

    + +

    Liability for Contents

    As service providers, we are liable for own contents of these websites according to Paragraph 7, Sect. 1 German Telemedia Act (TMG). However, according to Paragraphs 8 to 10 German Telemedia Act (TMG), service providers are not obligated to permanently monitor submitted or stored information or to search for evidences that indicate illegal activities.

    Legal obligations to removing information or to blocking the use of information remain unchallenged. In this case, liability is only possible at the time of knowledge about a specific violation of law. Illegal contents will be removed immediately at the time we get knowledge of them.

    Liability for Links

    Our offer includes links to external third party websites. We have no influence on the contents of those websites, therefore we cannot guarantee for those contents. Providers or administrators of linked websites are always responsible for their own contents.

    The linked websites had been checked for possible violations of law at the time of the establishment of the link. Illegal contents were not detected at the time of the linking. A permanent monitoring of the contents of linked websites cannot be imposed without reasonable indications that there has been a violation of law. Illegal links will be removed immediately at the time we get knowledge of them.

    Copyright

    Contents and compilations published on these websites by the providers are subject to German copyright laws. Reproduction, editing, distribution as well as the use of any kind outside the scope of the copyright law require a written permission of the author or originator. Downloads and copies of these websites are permitted for private use only.
    The commercial use of our contents without permission of the originator is prohibited.

    Copyright laws of third parties are respected as long as the contents on these websites do not originate from the provider. Contributions of third parties on this site are indicated as such. However, if you notice any violations of copyright law, please inform us. Such contents will be removed immediately.

    \ No newline at end of file diff --git a/src/html/partials/mixins.html b/src/html/partials/mixins.html index 66338e0..fe37ccf 100644 --- a/src/html/partials/mixins.html +++ b/src/html/partials/mixins.html @@ -1,94 +1,55 @@ - -

    - Triangle -

    -

    Sass:

    -
    .triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
-display: block;
-}
+
+
    
+    crispy__clearfix()
+
    
+
    
+
    Clear Floats.
    
 
-.triangle-left {
-@include triangle('left', $crispy__color-primary);
-}
 
-.triangle-right {
-@include triangle('right', $crispy__color-primary);
-}
+
+
    
+    crispy__clearlist()
+
    
+
    
+
    Resets Style for a List-Element
    
+
+
+
+
    
+    crispy__media-*, crispy__media-*-only
+
    
+
    
+
    For each Breakpoint there is a Mixin as an Media Query.
    
+
+
    @include crispy__media-xs() {
 
-.triangle-top {
-@include triangle('top', $crispy__color-primary);
 }
 
-.triangle-bottom {
-@include triangle('bottom', $crispy__color-primary);
+@include crispy__media-xs-only() {
+
 }
 
    
-
    
-    
-    
-    
-    
-
    
 
-
-
    
-    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;
-}
-}
+
+
    
+    crispy__media-breakpoints($property, $breakpoints, $important: false)
+
    
+
    
+
    Set property and his value for each Breakpoint.
    
 
-.md {
-@include crispy__media-md() {
-display: block;
-}
-}
 
-.md-only {
-@include crispy__media-md-only() {
-display: block;
-}
-}
+
+
    
+    crispy__media-breakpoints-calculate($property, $factor, $breakpoints, $important: false)
+
    
+
    
+
    Set property and his value with an factor for each Breakpoint.
    
 
-.lg-only {
-@include crispy__media-lg-only() {
-display: block;
-}
-}
    
-
    
-    
    
-        
    sm
    
-    
    
-    
    
-        
    md
    
-    
    
-    
    
-        
    md-only
    
-    
    
-    
    
-        
    lg-only
    
-    
    
-
    
\ No newline at end of file
+
+
+
    
+    crispy__media-breakpoints-font-size($breakpoints, $font-size, $default, $important: false)
+
    
+
    
+
    Set font-size from Breakpoints, use for calculating difference from font-size and default font-size
    
\ No newline at end of file
diff --git a/src/html/partials/privacy-policy.html b/src/html/partials/privacy-policy.html
index e69de29..22c851b 100644
--- a/src/html/partials/privacy-policy.html
+++ b/src/html/partials/privacy-policy.html
@@ -0,0 +1,25 @@
+
    1. An overview of data protection
    
+
    General information
     
    The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit this website. The term “personal data” comprises all data that can be used to personally identify you. For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.
    
+
    Data recording on this website
     
    Who is the responsible party for the recording of data on this website (i.e. the “controller”)?
     
    The data on this website is processed by the operator of the website, whose contact information is available under section “Information Required by Law” on this website.
     
    How do we record your data?
     
    We collect your data as a result of your sharing of your data with us. This may, for instance be information you enter into our contact form.
     
    Other data shall be recorded by our IT systems automatically or after you consent to its recording during your website visit. This data comprises primarily technical information (e.g. web browser, operating system or time the site was accessed). This information is recorded automatically when you access this website.
     
    What are the purposes we use your data for?
     
    A portion of the information is generated to guarantee the error free provision of the website. Other data may be used to analyze your user patterns.
     
    What rights do you have as far as your information is concerned?
     
    You have the right to receive information about the source, recipients and purposes of your archived personal data at any time without having to pay a fee for such disclosures. You also have the right to demand that your data are rectified or eradicated. If you have consented to data processing, you have the option to revoke this consent at any time, which shall affect all future data processing. Moreover, you have the right to demand that the processing of your data be restricted under certain circumstances. Furthermore, you have the right to log a complaint with the competent supervising agency.
     
    Please do not hesitate to contact us at any time under the address disclosed in section “Information Required by Law” on this website if you have questions about this or any other data protection related issues.
    
+
    2. Hosting and Content Delivery Networks (CDN)
    
+
    External Hosting
     
    This website is hosted by an external service provider (host). Personal data collected on this website are stored on the servers of the host. These may include, but are not limited to, IP addresses, contact requests, metadata and communications, contract information, contact information, names, web page access, and other data generated through a web site.
     
    The host is used for the purpose of fulfilling the contract with our potential and existing customers (Art. 6 para. 1 lit. b GDPR) and in the interest of secure, fast and efficient provision of our online services by a professional provider (Art. 6 para. 1 lit. f GDPR).
     
    Our host will only process your data to the extent necessary to fulfil its performance obligations and to follow our instructions with respect to such data.
    
+
    3. General information and mandatory information
    
+
    Data protection
     
    The operators of this website and its pages take the protection of your personal data very seriously. Hence, we handle your personal data as confidential information and in compliance with the statutory data protection regulations and this Data Protection Declaration.
     
    Whenever you use this website, a variety of personal information will be collected. Personal data comprises data that can be used to personally identify you. This Data Protection Declaration explains which data we collect as well as the purposes we use this data for. It also explains how, and for which purpose the information is collected.
     
    We herewith advise you that the transmission of data via the Internet (i.e. through e-mail communications) may be prone to security gaps. It is not possible to completely protect data against third party access.
    
+
    Information about the responsible party (referred to as the “controller” in the GDPR)
     
    The data processing controller on this website is:
     
    Björn Hase
    
+Tentakelfabrik
    
+Obermarktstr. 18
    
+32423 Minden
    
+
+
    Phone: +49 (0)176 6335 6920
    
+E-mail: me@tentakelfabrik.de
    
+ 
    The controller is the natural person or legal entity that single-handedly or jointly with others makes decisions as to the purposes of and resources for the processing of personal data (e.g. names, e-mail addresses, etc.).
    
+
    Revocation of your consent to the processing of data
     
    A wide range of data processing transactions are possible only subject to your express consent. You can also revoke at any time any consent you have already given us. This shall be without prejudice to the lawfulness of any data collection that occurred prior to your revocation.
    
+
    Right to object to the collection of data in special cases; right to object to direct advertising (Art. 21 GDPR)
     
    IN THE EVENT THAT DATA ARE PROCESSED ON THE BASIS OF ART. 6 SECT. 1 LIT. E OR F GDPR, YOU HAVE THE RIGHT TO AT ANY TIME OBJECT TO THE PROCESSING OF YOUR PERSONAL DATA BASED ON GROUNDS ARISING FROM YOUR UNIQUE SITUATION. THIS ALSO APPLIES TO ANY PROFILING BASED ON THESE PROVISIONS. TO DETERMINE THE LEGAL BASIS, ON WHICH ANY PROCESSING OF DATA IS BASED, PLEASE CONSULT THIS DATA PROTECTION DECLARATION. IF YOU LOG AN OBJECTION, WE WILL NO LONGER PROCESS YOUR AFFECTED PERSONAL DATA, UNLESS WE ARE IN A POSITION TO PRESENT COMPELLING PROTECTION WORTHY GROUNDS FOR THE PROCESSING OF YOUR DATA, THAT OUTWEIGH YOUR INTERESTS, RIGHTS AND FREEDOMS OR IF THE PURPOSE OF THE PROCESSING IS THE CLAIMING, EXERCISING OR DEFENCE OF LEGAL ENTITLEMENTS (OBJECTION PURSUANT TO ART. 21 SECT. 1 GDPR).
     
    IF YOUR PERSONAL DATA IS BEING PROCESSED IN ORDER TO ENGAGE IN DIRECT ADVERTISING, YOU HAVE THE RIGHT TO AT ANY TIME OBJECT TO THE PROCESSING OF YOUR AFFECTED PERSONAL DATA FOR THE PURPOSES OF SUCH ADVERTISING. THIS ALSO APPLIES TO PROFILING TO THE EXTENT THAT IT IS AFFILIATED WITH SUCH DIRECT ADVERTISING. IF YOU OBJECT, YOUR PERSONAL DATA WILL SUBSEQUENTLY NO LONGER BE USED FOR DIRECT ADVERTISING PURPOSES (OBJECTION PURSUANT TO ART. 21 SECT. 2 GDPR).
    
+
    Right to log a complaint with the competent supervisory agency
     
    In the event of violations of the GDPR, data subjects are entitled to log a complaint with a supervisory agency, in particular in the member state where they usually maintain their domicile, place of work or at the place where the alleged violation occurred. The right to log a complaint is in effect regardless of any other administrative or court proceedings available as legal recourses.
    
+
    Right to data portability
     
    You have the right to demand that we hand over any data we automatically process on the basis of your consent or in order to fulfil a contract be handed over to you or a third party in a commonly used, machine readable format. If you should demand the direct transfer of the data to another controller, this will be done only if it is technically feasible.
    
+
    SSL and/or TLS encryption
     
    For security reasons and to protect the transmission of confidential content, such as purchase orders or inquiries you submit to us as the website operator, this website uses either an SSL or a TLS encryption program. You can recognize an encrypted connection by checking whether the address line of the browser switches from “http://” to “https://” and also by the appearance of the lock icon in the browser line.
     
    If the SSL or TLS encryption is activated, data you transmit to us cannot be read by third parties.
    
+
    Information about, rectification and eradication of data
     
    Within the scope of the applicable statutory provisions, you have the right to at any time demand information about your archived personal data, their source and recipients as well as the purpose of the processing of your data. You may also have a right to have your data rectified or eradicated. If you have questions about this subject matter or any other questions about personal data, please do not hesitate to contact us at any time at the address provided in section “Information Required by Law.”
    
+
    Right to demand processing restrictions
     
    You have the right to demand the imposition of restrictions as far as the processing of your personal data is concerned. To do so, you may contact us at any time at the address provided in section “Information Required by Law.” The right to demand restriction of processing applies in the following cases:
     
       
    • In the event that you should dispute the correctness of your data archived by us, we will usually need some time to verify this claim. During the time that this investigation is ongoing, you have the right to demand that we restrict the processing of your personal data.
      •  
    • If the processing of your personal data was/is conducted in an unlawful manner, you have the option to demand the restriction of the processing of your data in lieu of demanding the eradication of this data.
      •  
    • If we do not need your personal data any longer and you need it to exercise, defend or claim legal entitlements, you have the right to demand the restriction of the processing of your personal data instead of its eradication.
      •  
    • If you have raised an objection pursuant to Art. 21 Sect. 1 GDPR, your rights and our rights will have to be weighed against each other. As long as it has not been determined whose interests prevail, you have the right to demand a restriction of the processing of your personal data.
      •  
     
    If you have restricted the processing of your personal data, these data – with the exception of their archiving – may be processed only subject to your consent or to claim, exercise or defend legal entitlements or to protect the rights of other natural persons or legal entities or for important public interest reasons cited by the European Union or a member state of the EU.
    
+
    4. Recording of data on this website
    
+
    Server log files
     
    The provider of this website and its pages automatically collects and stores information in so-called server log files, which your browser communicates to us automatically. The information comprises:
     
       
    • The type and version of browser used
      •  
    • The used operating system
      •  
    • Referrer URL
      •  
    • The hostname of the accessing computer
      •  
    • The time of the server inquiry
      •  
    • The IP address
      •  
     
    This data is not merged with other data sources.
     
    This data is recorded on the basis of Art. 6 Sect. 1 lit. f GDPR. The operator of the website has a legitimate interest in the technically error free depiction and the optimization of the operator’s website. In order to achieve this, server log files must be recorded.
    
+
    Request by e-mail, telephone or fax
     
    If you contact us by e-mail, telephone or fax, your request, including all resulting personal data (name, request) will be stored and processed by us for the purpose of processing your request. We do not pass these data on without your consent.
     
    These data are processed on the basis of Art. 6 Sect. 1 lit. b GDPR if your inquiry is related to the fulfillment of a contract or is required for the performance of pre-contractual measures. In all other cases, the data are processed on the basis of our legitimate interest in the effective handling of inquiries submitted to us (Art. 6 Sect. 1 lit. f GDPR) or on the basis of your consent (Art. 6 Sect. 1 lit. a GDPR) if it has been obtained.
     
    The data sent by you to us via contact requests remain with us until you request us to delete, revoke your consent to the storage or the purpose for the data storage lapses (e.g. after completion of your request). Mandatory statutory provisions - in particular statutory retention periods - remain unaffected.