- This is a small CSS / SASS Framework that gives you an amount of varaibles, components, modifiziers, mixins and functions. -
-- The problem of most frameworks is they trying to hard adding a lot of styles - which has to be customized and documented if you used it for a Project. - Often these changes cause a loss of performance and raise the propability of errors. -
-- Crispy uses normalize.css -
-- The boilerplate uses as coding style BEM, - but as a more simpler idea of it. One of the benefits of BEM is that you create components and can reuse them. - But one the other hand it can be really strange if you overthinking it. -
-- Components are created to give you a structure and a basic set of styles and not to look fancy. - The idea is to extend each component and save time to write a bunch of extra CSS code and - therefore get more performance while minimize the causes of errors. Of Course is really Fancy to get more Performance and less Errors. -
- - -npm install crispy-boilerplateMain SCSS-file:
-@import
+
+
+
+
+ Lightweight
+
+
+ Only what you need! Basic Styles to create UI-Elements,
+ but without endless overwritting. Less Code, less Size and that means Crispy is simple and fast!
+
+
+
+
+
+ Modifiziers, Mixins and Functions
+
+
+ A small amount of Usefull Helpers to support your Work. That make it easer to create new Styles.
+ Modifiziers are helping to reduce code.
+
+
+
+
+
+ Customizable
+
+
+ There are many Frameworks that really great, but if you want customize them,
+ that can be a lot of work. Crispy is great to build Styles for Layouts that are unusual.
+
+
+
+
+
+ Coding Style
+
+
+ Crispy uses BEM for naming, but
+ a simpler approach of it. BEM is good to show other Developers what classes
+ are belong to a Component.
+
+
+
+
+
+
+
+
+
+ Installation
+ npm install crispy
+
+ How it works
+
+ @import
"crispy";
- After this include mixins you need:
- @include crispy__*()
- To overwrite defaults simple add your own config-file before importing crispy:
+ Now include Mixins you need. Components and Modifiziers only works if you include them,
+ @include crispy__core();
+@include crispy__modifiers();
+
+// components
+@include crispy__button();
+@include crispy__code();
+@include crispy__field();
+@include crispy__group();
+@include crispy__heading();
+@include crispy__hero();
+@include crispy__icon();
+@include crispy__media();
+@include crispy__modal();
+@include crispy__overlay();
+@include crispy__panel();
+@include crispy__table();
+ For Custom Variables add a File before importing Crispy
@import
- "config",
+ "variables",
"crispy";
- Example
+ Example
- You find an example in "/src/example", this is this documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.
+ You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.
Site
diff --git a/dist/example/styles.css b/dist/example/styles.css
index b20f419..354f66e 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%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:0 0 .625em}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.3125em}blockquote{border-left:1px solid #b3b2af;margin-left:0;padding:.625em 1.25em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 .625em 1.25em}ol ol,ul ul{margin-top:.3125em}ol{list-style:decimal outside}ul{list-style:disc outside}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 .625em}figcaption{margin:.625em 0 0}hr{border:0;border-top:1px solid #b3b2af;margin:.625em 0}body{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:400;line-height:1.618;color:#363636;background-color:#fff;direction:ltr;font-size:1rem}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalized{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-weight-light{font-weight:lighter!important}.text-weight-normal{font-weight:400!important}.text-weight-bold{font-weight:bolder!important}.text-weight-medium{font-weight:medium!important}.text-size-default{font-size:16px!important}.text-size-small{font-size:.75rem!important}.text-size-large{font-size:1.25rem!important}.text-size-big{font-size:1.5rem!important}.text-size-mega{font-size:1.75rem!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}.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}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hidden{display:none!important}.visible{display:block!important}.visible--inline{display:inline!important}.visible--inline-block{display:inline-block!important}.bordered{border:1px solid #d0d0d0!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-left-0{margin-left:0!important}.margin-bottom-0{margin-bottom:0!important}.margin-right-0{margin-right:0!important}.padding-top-0{padding-top:0!important}.padding-left-0{padding-left:0!important}.padding-bottom-0{padding-bottom:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:10px!important}.margin-left-1{margin-left:10px!important}.margin-bottom-1{margin-bottom:10px!important}.margin-right-1{margin-right:10px!important}.padding-top-1{padding-top:10px!important}.padding-left-1{padding-left:10px!important}.padding-bottom-1{padding-bottom:10px!important}.padding-right-1{padding-right:10px!important}.margin-top-2{margin-top:20px!important}.margin-left-2{margin-left:20px!important}.margin-bottom-2{margin-bottom:20px!important}.margin-right-2{margin-right:20px!important}.padding-top-2{padding-top:20px!important}.padding-left-2{padding-left:20px!important}.padding-bottom-2{padding-bottom:20px!important}.padding-right-2{padding-right:20px!important}.margin-top-3{margin-top:30px!important}.margin-left-3{margin-left:30px!important}.margin-bottom-3{margin-bottom:30px!important}.margin-right-3{margin-right:30px!important}.padding-top-3{padding-top:30px!important}.padding-left-3{padding-left:30px!important}.padding-bottom-3{padding-bottom:30px!important}.padding-right-3{padding-right:30px!important}.margin-top-4{margin-top:40px!important}.margin-left-4{margin-left:40px!important}.margin-bottom-4{margin-bottom:40px!important}.margin-right-4{margin-right:40px!important}.padding-top-4{padding-top:40px!important}.padding-left-4{padding-left:40px!important}.padding-bottom-4{padding-bottom:40px!important}.padding-right-4{padding-right:40px!important}.margin-top-5{margin-top:50px!important}.margin-left-5{margin-left:50px!important}.margin-bottom-5{margin-bottom:50px!important}.margin-right-5{margin-right:50px!important}.padding-top-5{padding-top:50px!important}.padding-left-5{padding-left:50px!important}.padding-bottom-5{padding-bottom:50px!important}.padding-right-5{padding-right:50px!important}.button{position:relative;display:inline-block;text-decoration:none;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.625em 1.5625em}.button--wide{width:100%}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{font-family:monospace,monospace;white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;padding:.625em 1.25em;border:1px solid #d0d0d0;background-color:#f9f9f9;margin:0 0 .625em;font-size:16px}.group{list-style:none}.group,.group li{margin:0;padding:0}.group--horizontal .group__item{display:inline-block}.group--separate .group__item:after{margin:0 .625em;content:"/"}.group--separate .group__item:last-child:after{display:none}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.618;margin:0 0 .3125em}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2.25rem}.h3,h3{font-size:2rem}.h4,h4{font-size:1.75rem}.h5,h5{font-size:1.5rem}.h6,h6{font-size:1.25rem}.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.5em;height:1.5em;vertical-align:middle;overflow:hidden}.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;max-width:500px;top:50%;left:50%;transform:translate(-50%,-50%)}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:1em;transform:translate(0)}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.field{margin:0 0 .625em}.field .icon{vertical-align:top}.field__select,.field__text{display:block;width:100%;line-height:1.618;padding:.375em .5em;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:16px}.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 #b3b2af}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{padding:.5em;border:1px solid #d0d0d0;background-color:#fff}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:10px 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:.625em}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.panel{background-color:#d0d0d0}.panel__inner{padding:.625em}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f5f5f5}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{padding:.625em .5em;text-align:left;border-bottom:1px solid #9c9c9c}.table th{border-bottom-width:2px}.header__logo{vertical-align:top}.header a{text-decoration:none}.header a:hover{color:#f18f01}.container{max-width:992px}
\ 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%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:0 0 .625em}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.3125em}blockquote{border-left:1px solid #b3b2af;margin-left:0;padding:.625em 1.25em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 .625em 1.25em}ol ol,ul ul{margin-top:.3125em}ol{list-style:decimal outside}ul{list-style:disc outside}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 .625em}figcaption{margin:.625em 0 0}hr{border:0;border-top:1px solid #b3b2af;margin:.625em 0}body{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:400;line-height:1.618;color:#363636;background-color:#fff;direction:ltr;font-size:1rem}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalized{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-weight-light{font-weight:lighter!important}.text-weight-normal{font-weight:400!important}.text-weight-bold{font-weight:bolder!important}.text-weight-medium{font-weight:medium!important}.text-size-default{font-size:16px!important}.text-size-small{font-size:.75rem!important}.text-size-medium{font-size:1.125rem!important}.text-size-large{font-size:1.25rem!important}.text-size-big{font-size:1.5rem!important}.text-size-mega{font-size:1.75rem!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}.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}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hidden{display:none!important}.visible{display:block!important}.visible--inline{display:inline!important}.visible--inline-block{display:inline-block!important}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-left-0{margin-left:0!important}.margin-bottom-0{margin-bottom:0!important}.margin-right-0{margin-right:0!important}.padding-top-0{padding-top:0!important}.padding-left-0{padding-left:0!important}.padding-bottom-0{padding-bottom:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:10px!important}.margin-left-1{margin-left:10px!important}.margin-bottom-1{margin-bottom:10px!important}.margin-right-1{margin-right:10px!important}.padding-top-1{padding-top:10px!important}.padding-left-1{padding-left:10px!important}.padding-bottom-1{padding-bottom:10px!important}.padding-right-1{padding-right:10px!important}.margin-top-2{margin-top:20px!important}.margin-left-2{margin-left:20px!important}.margin-bottom-2{margin-bottom:20px!important}.margin-right-2{margin-right:20px!important}.padding-top-2{padding-top:20px!important}.padding-left-2{padding-left:20px!important}.padding-bottom-2{padding-bottom:20px!important}.padding-right-2{padding-right:20px!important}.margin-top-3{margin-top:30px!important}.margin-left-3{margin-left:30px!important}.margin-bottom-3{margin-bottom:30px!important}.margin-right-3{margin-right:30px!important}.padding-top-3{padding-top:30px!important}.padding-left-3{padding-left:30px!important}.padding-bottom-3{padding-bottom:30px!important}.padding-right-3{padding-right:30px!important}.margin-top-4{margin-top:40px!important}.margin-left-4{margin-left:40px!important}.margin-bottom-4{margin-bottom:40px!important}.margin-right-4{margin-right:40px!important}.padding-top-4{padding-top:40px!important}.padding-left-4{padding-left:40px!important}.padding-bottom-4{padding-bottom:40px!important}.padding-right-4{padding-right:40px!important}.margin-top-5{margin-top:50px!important}.margin-left-5{margin-left:50px!important}.margin-bottom-5{margin-bottom:50px!important}.margin-right-5{margin-right:50px!important}.padding-top-5{padding-top:50px!important}.padding-left-5{padding-left:50px!important}.padding-bottom-5{padding-bottom:50px!important}.padding-right-5{padding-right:50px!important}.button{position:relative;display:inline-block;text-decoration:none;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.625em 1.5625em}.button--wide{width:100%}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{font-family:monospace,monospace;white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;padding:.625em 1.25em;border:1px solid #dfdfdf;background-color:#f9f9f9;margin:0 0 .625em;font-size:16px}.group{list-style:none}.group,.group li{margin:0;padding:0}.group--horizontal .group__item{display:inline-block}.group--separate .group__item:after{margin:0 .625em;content:"/"}.group--separate .group__item:last-child:after{display:none}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.618;margin:0 0 .3125em}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2.25rem}.h3,h3{font-size:2rem}.h4,h4{font-size:1.75rem}.h5,h5{font-size:1.5rem}.h6,h6{font-size:1.25rem}.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.5em;height:1.5em;vertical-align:middle;overflow:hidden;line-height:1.618}.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}.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;max-width:500px;top:50%;left:50%;transform:translate(-50%,-50%)}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:1em;transform:translate(0)}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.field{margin:0 0 .625em}.field .icon{vertical-align:top}.field__select,.field__text{display:block;width:100%;line-height:1.618;padding:.375em .5em;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:16px}.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 #b3b2af}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{padding:.5em;border:1px solid #dfdfdf;background-color:#fff}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:10px 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:.625em}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.panel{background-color:#f9f9f9}.panel__inner{padding:.9375em 1.25em}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f5f5f5}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{padding:.625em .5em;text-align:left;border-bottom:1px solid #9c9c9c}.table th{border-bottom-width:2px}.header__logo{vertical-align:top}.header a{text-decoration:none}.header a:hover{color:#f18f01}.container{max-width:992px}
\ No newline at end of file
diff --git a/dist/example/symbol-defs.svg b/dist/example/symbol-defs.svg
index 03251d8..8712c1f 100644
--- a/dist/example/symbol-defs.svg
+++ b/dist/example/symbol-defs.svg
@@ -19,6 +19,18 @@
+chronometer
+
+
+transformers
+
+
+paperplane
+
checked
minus
+
+shipping
+
+
+ruler
+
diff --git a/mix-manifest.json b/mix-manifest.json
index 834eebc..b8228ec 100644
--- a/mix-manifest.json
+++ b/mix-manifest.json
@@ -1,5 +1,6 @@
{
"/dist/crispy.css": "/dist/crispy.css",
+ "/dist/crispy_minimal.css": "/dist/crispy_minimal.css",
"/dist/example/styles.css": "/dist/example/styles.css",
"/dist/example/symbol-defs.svg": "/dist/example/symbol-defs.svg"
}
diff --git a/src/_variables.scss b/src/_variables.scss
index 5cd447b..b089710 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -33,10 +33,10 @@ $crispy__color-danger: #d9534f !default;
$crispy__color-info: #0090d4 !default;
$crispy__color-text: #363636 !default;
-$crispy__color-border: #d0d0d0 !default;
+$crispy__color-border: #dfdfdf !default;
$crispy__color-background: #ffffff !default;
-$crispy__color-panel: #d0d0d0 !default;
+$crispy__color-panel: #f9f9f9 !default;
$crispy__color-link: $crispy__color-primary !default;
$crispy__color-link-hover: $crispy__color-secondary !default;
@@ -45,7 +45,7 @@ $crispy__color-link-focus: $crispy__color-primary !default;
$crispy__color-link-active: $crispy__color-primary !default;
// borders
-$crispy__border-radius: 0 !default;
+$crispy__border-radius: 0.5em !default;
$crispy__border: 1px solid $crispy__color-border !default;
// breakpoints
@@ -68,10 +68,11 @@ $crispy__colors: (
// font-sizes as map
$crispy__font-sizes: (
'default': $crispy__font-size,
- 'small': toRem(12px),
- 'large': toRem(20px),
- 'big' : toRem(24px),
- 'mega' : toRem(28px)
+ 'small' : toRem(12px),
+ 'medium': toRem(18px),
+ 'large' : toRem(20px),
+ 'big' : toRem(24px),
+ 'mega' : toRem(28px)
) !default;
// z-index
diff --git a/src/all.scss b/src/all.scss
index 226d385..3b8c46a 100644
--- a/src/all.scss
+++ b/src/all.scss
@@ -3,10 +3,9 @@
@include crispy__core();
@include crispy__modifiers();
-
@include crispy__button();
@include crispy__code();
-
+@include crispy__field();
@include crispy__group();
@include crispy__heading();
@include crispy__hero();
@@ -14,8 +13,5 @@
@include crispy__media();
@include crispy__modal();
@include crispy__overlay();
-
-@include crispy__field();
-
@include crispy__panel();
@include crispy__table();
diff --git a/src/components/_icon.scss b/src/components/_icon.scss
index cf29d7a..0683834 100644
--- a/src/components/_icon.scss
+++ b/src/components/_icon.scss
@@ -17,5 +17,12 @@ $crispy__icon__width: 1.5em !default;
height: $crispy__icon__width;
vertical-align: middle;
overflow: hidden;
+ line-height: $crispy__golden-ratio;
+ }
+
+ @each $name, $color in $crispy__colors {
+ .icon-color-#{$name} {
+ fill: $color !important;
+ }
}
}
diff --git a/src/components/_panel.scss b/src/components/_panel.scss
index a7de9ec..64f67c9 100644
--- a/src/components/_panel.scss
+++ b/src/components/_panel.scss
@@ -13,7 +13,7 @@
*
*/
-$crispy__panel__padding: toEm($crispy__spacing) !default;
+$crispy__panel__padding: toEm(15px 20px) !default;
@mixin crispy__panel {
.panel {
diff --git a/src/minimal.scss b/src/minimal.scss
new file mode 100644
index 0000000..44c1594
--- /dev/null
+++ b/src/minimal.scss
@@ -0,0 +1,5 @@
+@import
+ 'crispy';
+
+@include crispy__core();
+@include crispy__modifiers();
diff --git a/webpack.mix.js b/webpack.mix.js
index 78bec4a..5d391cc 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -18,6 +18,13 @@ mix.sass('src/all.scss', 'dist/crispy.css', {
]
}
})
+ .sass('src/minimal.scss', 'dist/crispy_minimal.css', {
+ sassOptions: {
+ includePaths: [
+ 'node_modules/normalize-scss/sass'
+ ]
+ }
+ })
.sass('src/example/styles.scss', 'dist/example/styles.css', {
sassOptions: {
includePaths: [