From c93da5d12354510094f86944e75348a022f65f36 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Sat, 26 Aug 2017 10:03:58 -0400 Subject: [PATCH] Add initial version of grid system forked from BS4 --- .stylelintrc | 1 + dist/shoelace.css | 10 + docs/grid-system.html | 258 ++++++++++--- source/css/_docs.css | 117 ++---- source/css/_homepage.css | 6 - source/css/grid.css | 763 +++++++++++++++++++++++++++++++++++++ source/css/shoelace.css | 21 + source/docs/attribution.md | 2 +- source/docs/grid-system.md | 240 ++++++++++-- 9 files changed, 1256 insertions(+), 162 deletions(-) create mode 100644 source/css/grid.css diff --git a/.stylelintrc b/.stylelintrc index ca0633315..bfdcc3ca5 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -6,6 +6,7 @@ "custom-property-empty-line-before": null, "declaration-block-single-line-max-declarations": null, "number-leading-zero": "never", + "selector-list-comma-newline-after": null, "shorthand-property-no-redundant-values": null } } diff --git a/dist/shoelace.css b/dist/shoelace.css index dbfdf91aa..da8bdf58a 100644 --- a/dist/shoelace.css +++ b/dist/shoelace.css @@ -20,6 +20,16 @@ /*! Forms */fieldset{border:1px solid #ddd;border-radius:.25rem;padding:1.5rem 2rem;margin-bottom:1.5rem}fieldset legend{font-weight:700;padding:0 .25rem}fieldset>:last-child{margin-bottom:0}label{color:inherit;display:inline-block;margin-bottom:.25rem}label+label{margin-left:1rem}input[type=color],input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{width:100%;font-family:inherit;font-size:1rem;font-weight:inherit;color:#111;border:1px solid #ddd;border-radius:.25rem;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);background-color:#fff;height:2.25rem;line-height:2.25rem;vertical-align:middle;display:block;padding-left:.5rem;padding-right:.5rem;margin:0;-webkit-transition:border-color .1s,background-color .1s,color .1s;transition:border-color .1s,background-color .1s,color .1s;white-space:nowrap;-moz-appearance:none;-webkit-appearance:none}input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{outline:none;border-color:#0074d9}input[type=color][disabled],input[type=date][disabled],input[type=datetime-local][disabled],input[type=email][disabled],input[type=month][disabled],input[type=number][disabled],input[type=password][disabled],input[type=search][disabled],input[type=tel][disabled],input[type=text][disabled],input[type=time][disabled],input[type=url][disabled],input[type=week][disabled],select[disabled],textarea[disabled]{opacity:.5;cursor:not-allowed}input[type=color][readonly],input[type=date][readonly],input[type=datetime-local][readonly],input[type=email][readonly],input[type=month][readonly],input[type=number][readonly],input[type=password][readonly],input[type=search][readonly],input[type=tel][readonly],input[type=text][readonly],input[type=time][readonly],input[type=url][readonly],input[type=week][readonly],select[readonly],textarea[readonly]{background-color:#f2f2f2}input[type=color][type=color],input[type=date][type=color],input[type=datetime-local][type=color],input[type=email][type=color],input[type=month][type=color],input[type=number][type=color],input[type=password][type=color],input[type=search][type=color],input[type=tel][type=color],input[type=text][type=color],input[type=time][type=color],input[type=url][type=color],input[type=week][type=color],select[type=color],textarea[type=color]{padding:.5rem}input[type=color][type=color]::-webkit-color-swatch-wrapper,input[type=date][type=color]::-webkit-color-swatch-wrapper,input[type=datetime-local][type=color]::-webkit-color-swatch-wrapper,input[type=email][type=color]::-webkit-color-swatch-wrapper,input[type=month][type=color]::-webkit-color-swatch-wrapper,input[type=number][type=color]::-webkit-color-swatch-wrapper,input[type=password][type=color]::-webkit-color-swatch-wrapper,input[type=search][type=color]::-webkit-color-swatch-wrapper,input[type=tel][type=color]::-webkit-color-swatch-wrapper,input[type=text][type=color]::-webkit-color-swatch-wrapper,input[type=time][type=color]::-webkit-color-swatch-wrapper,input[type=url][type=color]::-webkit-color-swatch-wrapper,input[type=week][type=color]::-webkit-color-swatch-wrapper,select[type=color]::-webkit-color-swatch-wrapper,textarea[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color][type=color]::-webkit-color-swatch,input[type=date][type=color]::-webkit-color-swatch,input[type=datetime-local][type=color]::-webkit-color-swatch,input[type=email][type=color]::-webkit-color-swatch,input[type=month][type=color]::-webkit-color-swatch,input[type=number][type=color]::-webkit-color-swatch,input[type=password][type=color]::-webkit-color-swatch,input[type=search][type=color]::-webkit-color-swatch,input[type=tel][type=color]::-webkit-color-swatch,input[type=text][type=color]::-webkit-color-swatch,input[type=time][type=color]::-webkit-color-swatch,input[type=url][type=color]::-webkit-color-swatch,input[type=week][type=color]::-webkit-color-swatch,select[type=color]::-webkit-color-swatch,textarea[type=color]::-webkit-color-swatch{border:none;border-radius:.25rem}input[type=color][type=checkbox],input[type=color][type=radio],input[type=date][type=checkbox],input[type=date][type=radio],input[type=datetime-local][type=checkbox],input[type=datetime-local][type=radio],input[type=email][type=checkbox],input[type=email][type=radio],input[type=month][type=checkbox],input[type=month][type=radio],input[type=number][type=checkbox],input[type=number][type=radio],input[type=password][type=checkbox],input[type=password][type=radio],input[type=search][type=checkbox],input[type=search][type=radio],input[type=tel][type=checkbox],input[type=tel][type=radio],input[type=text][type=checkbox],input[type=text][type=radio],input[type=time][type=checkbox],input[type=time][type=radio],input[type=url][type=checkbox],input[type=url][type=radio],input[type=week][type=checkbox],input[type=week][type=radio],select[type=checkbox],select[type=radio],textarea[type=checkbox],textarea[type=radio]{padding:0}input[type=color].input-xs,input[type=date].input-xs,input[type=datetime-local].input-xs,input[type=email].input-xs,input[type=month].input-xs,input[type=number].input-xs,input[type=password].input-xs,input[type=search].input-xs,input[type=tel].input-xs,input[type=text].input-xs,input[type=time].input-xs,input[type=url].input-xs,input[type=week].input-xs,select.input-xs,textarea.input-xs{font-size:.7rem;height:1.25rem;line-height:1.25rem}input[type=color].input-sm,input[type=date].input-sm,input[type=datetime-local].input-sm,input[type=email].input-sm,input[type=month].input-sm,input[type=number].input-sm,input[type=password].input-sm,input[type=search].input-sm,input[type=tel].input-sm,input[type=text].input-sm,input[type=time].input-sm,input[type=url].input-sm,input[type=week].input-sm,select.input-sm,textarea.input-sm{font-size:.8rem;height:1.75rem;line-height:1.75rem}input[type=color].input-lg,input[type=date].input-lg,input[type=datetime-local].input-lg,input[type=email].input-lg,input[type=month].input-lg,input[type=number].input-lg,input[type=password].input-lg,input[type=search].input-lg,input[type=tel].input-lg,input[type=text].input-lg,input[type=time].input-lg,input[type=url].input-lg,input[type=week].input-lg,select.input-lg,textarea.input-lg{font-size:1.25rem;height:2.75rem;line-height:2.75rem}input[type=color].input-xl,input[type=date].input-xl,input[type=datetime-local].input-xl,input[type=email].input-xl,input[type=month].input-xl,input[type=number].input-xl,input[type=password].input-xl,input[type=search].input-xl,input[type=tel].input-xl,input[type=text].input-xl,input[type=time].input-xl,input[type=url].input-xl,input[type=week].input-xl,select.input-xl,textarea.input-xl{font-size:1.5rem;height:3.25rem;line-height:3.25rem}select{position:relative;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='41' height='26' viewBox='0 0 41 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 5.382l19.983 19.983L40.14 5.208 34.932 0 19.869 15.062 4.84.032z' fill-rule='evenodd'/%3E%3C/svg%3E");background-position:right .4rem center;background-repeat:no-repeat;background-size:.75rem;padding-top:0;padding-bottom:0;padding-right:1.5rem}textarea,textarea.input-lg,textarea.input-sm,textarea.input-xl,textarea.input-xs{height:auto;resize:vertical;line-height:1.5;white-space:normal}input[type=range]{-webkit-appearance:none;width:100%;height:2.25rem;line-height:2.25rem;vertical-align:middle}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:.5rem;cursor:pointer;background:#f2f2f2;border-radius:.25rem;border:none;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}input[type=range]::-webkit-slider-thumb{border:none;width:1.25rem;height:1.25rem;border-radius:50%;background:#0074d9;cursor:pointer;-webkit-appearance:none;margin-top:-.375rem}input[type=range]:focus::-webkit-slider-runnable-track{background:#f2f2f2}input[type=range]:focus::-webkit-slider-thumb{-webkit-box-shadow:0 0 0 2px rgba(0,116,217,.5);box-shadow:0 0 0 2px rgba(0,116,217,.5)}input[type=range]::-moz-range-track{width:100%;height:.5rem;cursor:pointer;background:#f2f2f2;border-radius:.25rem;border:none;box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}input[type=range]::-moz-range-thumb{border:none;height:1.25rem;width:1.25rem;border-radius:50%;background:#0074d9;cursor:pointer}input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 2px rgba(0,116,217,.5)}input[type=range]::-ms-track{width:100%;height:.5rem;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background:#f2f2f2;border:none;border-radius:.25rem}input[type=range]::-ms-thumb{border:none;height:1.25rem;width:1.25rem;border-radius:50%;background:#0074d9;cursor:pointer;margin-top:-.25rem}input[type=range]:focus::-ms-thumb{box-shadow:0 0 0 2px rgba(0,116,217,.5)}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background:#f2f2f2}.input-field,.input-group{margin-bottom:1.5rem}.input-group{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.input-group>.button,.input-group>.dropdown .button,.input-group>.dropdown button,.input-group>button,.input-group>input{border-radius:0}.input-group>.button:first-child,.input-group>.dropdown:first-child .button,.input-group>.dropdown:first-child button,.input-group>button:first-child,.input-group>input:first-child{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.input-group>.button:last-child,.input-group>.dropdown:last-child .button,.input-group>.dropdown:last-child button,.input-group>button:last-child,.input-group>input:last-child{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.input-group>input+input{border-left-width:0}.input-group>input+input:focus{border-left-width:1px;margin-left:-1px}.input-group :focus{-webkit-transform:translateZ(0);transform:translateZ(0)}.input-addon{font-size:1rem;height:2.25rem;line-height:2.25rem;border-top:1px solid #ddd;border-bottom:1px solid #ddd;background:#f2f2f2;color:#aaa;padding:0 .5rem;white-space:nowrap}.input-addon:first-child{border-left:1px solid #ddd;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.input-addon:last-child{border-right:1px solid #ddd;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.input-addon.input-addon-xs{font-size:.7rem;height:1.25rem;line-height:1.25rem}.input-addon.input-addon-sm{font-size:.8rem;height:1.75rem;line-height:1.75rem}.input-addon.input-addon-lg{font-size:1.25rem;height:2.75rem;line-height:2.75rem}.input-addon.input-addon-xl{font-size:1.5rem;height:3.25rem;line-height:3.25rem}.input-invalid label{color:#ff4136!important}.input-invalid input,.input-invalid select{color:#ff4136!important;border-color:#ff4136!important}.input-valid label{color:#2ecc40!important}.input-valid input,.input-valid select{color:#2ecc40!important;border-color:#2ecc40!important} +/*! Grid System + + Forked from Bootstrap 4. + + Copyright (c) 2011-2017 Twitter, Inc. + Copyright (c) 2011-2017 The Bootstrap Authors + + Licensed under the MIT license. +*/.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media only screen and (min-width:576px){.container{max-width:540px}}@media only screen and (min-width:768px){.container{max-width:720px}}@media only screen and (min-width:992px){.container{max-width:960px}}@media only screen and (min-width:1200px){.container{max-width:1140px}}.row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-1rem;margin-left:-1rem}.no-gutters{margin-left:0;margin-right:0;>.col,>[class*=col-]{padding-left:0;padding-right:0}}.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-auto,.col-lg,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-auto,.col-md,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-auto,.col-sm,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-auto{position:relative;width:100%;min-height:1px;padding-right:1rem;padding-left:1rem}.col{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-1,.col-auto{-webkit-box-flex:0}.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-2,.col-3{-webkit-box-flex:0}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-4,.col-5{-webkit-box-flex:0}.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-6,.col-7{-webkit-box-flex:0}.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-8,.col-9{-webkit-box-flex:0}.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-10,.col-11{-webkit-box-flex:0}.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-1{margin-left:8.333333%}.offset-2{margin-left:16.666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333333%}.offset-5{margin-left:41.666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333333%}.offset-8{margin-left:66.666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333333%}.offset-11{margin-left:91.666667%}@media only screen and (min-width:576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-sm-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-sm-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-sm-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-sm-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-sm-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-sm-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-sm-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-sm-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-sm-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-sm-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-sm-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-sm-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-sm-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-sm-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.333333%}.offset-sm-2{margin-left:16.666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.333333%}.offset-sm-5{margin-left:41.666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.333333%}.offset-sm-8{margin-left:66.666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.333333%}.offset-sm-11{margin-left:91.666667%}}@media only screen and (min-width:768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-md-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-md-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-md-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-md-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-md-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-md-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-md-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-md-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-md-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-md-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-md-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-md-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-md-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-md-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.333333%}.offset-md-2{margin-left:16.666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.333333%}.offset-md-5{margin-left:41.666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.333333%}.offset-md-8{margin-left:66.666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.333333%}.offset-md-11{margin-left:91.666667%}}@media only screen and (min-width:992px){.col-lg{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-lg-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-lg-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-lg-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-lg-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-lg-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-lg-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-lg-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-lg-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-lg-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-lg-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-lg-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-lg-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-lg-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-lg-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-lg-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.333333%}.offset-lg-2{margin-left:16.666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.333333%}.offset-lg-5{margin-left:41.666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.333333%}.offset-lg-8{margin-left:66.666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.333333%}.offset-lg-11{margin-left:91.666667%}}@media only screen and (min-width:1200px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-xl-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-xl-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-xl-1{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.order-xl-2{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.order-xl-3{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.order-xl-4{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.order-xl-5{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5}.order-xl-6{-webkit-box-ordinal-group:7;-ms-flex-order:6;order:6}.order-xl-7{-webkit-box-ordinal-group:8;-ms-flex-order:7;order:7}.order-xl-8{-webkit-box-ordinal-group:9;-ms-flex-order:8;order:8}.order-xl-9{-webkit-box-ordinal-group:10;-ms-flex-order:9;order:9}.order-xl-10{-webkit-box-ordinal-group:11;-ms-flex-order:10;order:10}.order-xl-11{-webkit-box-ordinal-group:12;-ms-flex-order:11;order:11}.order-xl-12{-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.333333%}.offset-xl-2{margin-left:16.666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.333333%}.offset-xl-5{margin-left:41.666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.333333%}.offset-xl-8{margin-left:66.666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.333333%}.offset-xl-11{margin-left:91.666667%}}.flex-row{-webkit-box-orient:horizontal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-column,.flex-row{-webkit-box-direction:normal!important}.flex-column{-webkit-box-orient:vertical!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-row-reverse{-webkit-box-orient:horizontal!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-column-reverse,.flex-row-reverse{-webkit-box-direction:reverse!important}.flex-column-reverse{-webkit-box-orient:vertical!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}@media only screen and (min-width:576px){.flex-sm-row{-webkit-box-orient:horizontal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-sm-column,.flex-sm-row{-webkit-box-direction:normal!important}.flex-sm-column{-webkit-box-orient:vertical!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-sm-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-sm-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-sm-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-sm-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-sm-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-sm-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-sm-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-sm-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-sm-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-sm-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-sm-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-sm-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-sm-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-sm-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-sm-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-sm-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-sm-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-sm-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-sm-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-sm-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-sm-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-sm-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-sm-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-sm-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-sm-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-sm-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-sm-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media only screen and (min-width:768px){.flex-md-row{-webkit-box-orient:horizontal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-md-column,.flex-md-row{-webkit-box-direction:normal!important}.flex-md-column{-webkit-box-orient:vertical!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-md-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-md-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-md-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-md-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-md-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-md-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-md-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-md-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-md-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-md-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-md-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-md-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-md-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-md-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-md-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-md-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-md-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-md-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-md-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-md-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-md-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-md-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-md-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-md-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-md-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-md-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-md-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media only screen and (min-width:992px){.flex-lg-row{-webkit-box-orient:horizontal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-lg-column,.flex-lg-row{-webkit-box-direction:normal!important}.flex-lg-column{-webkit-box-orient:vertical!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-lg-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-lg-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-lg-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-lg-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-lg-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-lg-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-lg-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-lg-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-lg-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-lg-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-lg-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-lg-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-lg-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-lg-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-lg-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-lg-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-lg-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-lg-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-lg-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-lg-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-lg-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-lg-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-lg-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-lg-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-lg-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-lg-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-lg-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media only screen and (min-width:1200px){.flex-xl-row{-webkit-box-orient:horizontal!important;-ms-flex-direction:row!important;flex-direction:row!important}.flex-xl-column,.flex-xl-row{-webkit-box-direction:normal!important}.flex-xl-column{-webkit-box-orient:vertical!important;-ms-flex-direction:column!important;flex-direction:column!important}.flex-xl-row-reverse{-webkit-box-orient:horizontal!important;-webkit-box-direction:reverse!important;-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-xl-column-reverse{-webkit-box-orient:vertical!important;-webkit-box-direction:reverse!important;-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-xl-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-xl-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-xl-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-xl-start{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-xl-end{-webkit-box-pack:end!important;-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-xl-center{-webkit-box-pack:center!important;-ms-flex-pack:center!important;justify-content:center!important}.justify-content-xl-between{-webkit-box-pack:justify!important;-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-xl-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-xl-start{-webkit-box-align:start!important;-ms-flex-align:start!important;align-items:flex-start!important}.align-items-xl-end{-webkit-box-align:end!important;-ms-flex-align:end!important;align-items:flex-end!important}.align-items-xl-center{-webkit-box-align:center!important;-ms-flex-align:center!important;align-items:center!important}.align-items-xl-baseline{-webkit-box-align:baseline!important;-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-xl-stretch{-webkit-box-align:stretch!important;-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-xl-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-xl-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-xl-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-xl-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-xl-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-xl-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-xl-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-xl-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-xl-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-xl-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-xl-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-xl-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}} + /*! Loaders */.loader{width:2.25rem;height:2.25rem;border-radius:50%;border:.2rem solid #cce7ff;border-top-color:#0074d9;border-left-color:#0074d9;display:inline-block;-webkit-animation:loader .75s linear infinite;animation:loader .75s linear infinite;margin:0 .5em;vertical-align:middle}.loader.loader-xs{width:1.25rem;height:1.25rem;border-width:.1rem}.loader.loader-sm{width:1.75rem;height:1.75rem;border-width:.13333rem}.loader.loader-lg{width:2.75rem;height:2.75rem;border-width:.3rem}.loader.loader-xl{width:3.25rem;height:3.25rem;border-width:.4rem}.loader.loader-secondary{border-color:#e6e6e6;border-top-color:#aaa;border-left-color:#aaa}.loader.loader-success{border-color:#d5f6d9;border-top-color:#2ecc40;border-left-color:#2ecc40}.loader.loader-info{border-color:#d6f5f5;border-top-color:#39cccc;border-left-color:#39cccc}.loader.loader-warning{border-color:#ffe4cc;border-top-color:#ff851b;border-left-color:#ff851b}.loader.loader-danger{border-color:#ffcfcc;border-top-color:#ff4136;border-left-color:#ff4136}.loader.loader-light{border-color:#e6e6e6;border-top-color:#fff;border-left-color:#fff}.loader.loader-dark{border-color:#e6e6e6;border-top-color:#111;border-left-color:#111}.loader-bg{position:relative}.loader-bg:after{content:"";position:absolute;top:calc(50% - 1.125rem);left:calc(50% - 1.125rem);width:2.25rem;height:2.25rem;border-radius:50%;border:.2rem solid #cce7ff;border-top-color:#0074d9;border-left-color:#0074d9;-webkit-animation:loader .75s linear infinite;animation:loader .75s linear infinite}.loader-bg.loader-bg-xs:after{top:calc(50% - .625rem);left:calc(50% - .625rem);width:1.25rem;height:1.25rem;border-width:.1rem}.loader-bg.loader-bg-sm:after{top:calc(50% - .875rem);left:calc(50% - .875rem);width:1.75rem;height:1.75rem;border-width:.13333rem}.loader-bg.loader-bg-lg:after{top:calc(50% - 1.375rem);left:calc(50% - 1.375rem);width:2.75rem;height:2.75rem;border-width:.3rem}.loader-bg.loader-bg-xl:after{top:calc(50% - 1.625rem);left:calc(50% - 1.625rem);width:3.25rem;height:3.25rem;border-width:.4rem}.loader-bg.loader-bg-secondary:after{border-color:#e6e6e6;border-top-color:#aaa;border-left-color:#aaa}.loader-bg.loader-bg-success:after{border-color:#d5f6d9;border-top-color:#2ecc40;border-left-color:#2ecc40}.loader-bg.loader-bg-info:after{border-color:#d6f5f5;border-top-color:#39cccc;border-left-color:#39cccc}.loader-bg.loader-bg-warning:after{border-color:#ffe4cc;border-top-color:#ff851b;border-left-color:#ff851b}.loader-bg.loader-bg-danger:after{border-color:#ffcfcc;border-top-color:#ff4136;border-left-color:#ff4136}.loader-bg.loader-bg-light:after{border-color:#e6e6e6;border-top-color:#fff;border-left-color:#fff}.loader-bg.loader-bg-dark:after{border-color:#e6e6e6;border-top-color:#111;border-left-color:#111}@-webkit-keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} /*! Progress Bars */.progress{position:relative;width:100%;height:2.25rem;line-height:2.25rem;font-size:1rem;background-color:#f2f2f2;border-radius:.25rem;display:block;overflow:hidden;margin-bottom:1.5rem;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.progress .progress-bar{position:absolute;top:0;left:0;width:0;height:100%;text-align:center;color:#fff;background-color:#0074d9;-webkit-transition:width .1s;transition:width .1s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.progress.progress-indeterminate .progress-bar{width:75%!important;-webkit-animation:progress-indeterminate ease-in-out 3s infinite;animation:progress-indeterminate ease-in-out 3s infinite}.progress.progress-xs{font-size:.7rem;height:1.25rem;line-height:1.25rem}.progress.progress-sm{font-size:.8rem;height:1.75rem;line-height:1.75rem}.progress.progress-lg{font-size:1.25rem;height:2.75rem;line-height:2.75rem}.progress.progress-xl{font-size:1.5rem;height:3.25rem;line-height:3.25rem}.progress.progress-secondary .progress-bar{background-color:#aaa}.progress.progress-success .progress-bar{background-color:#2ecc40}.progress.progress-info .progress-bar{background-color:#39cccc}.progress.progress-warning .progress-bar{background-color:#ff851b}.progress.progress-danger .progress-bar{background-color:#ff4136}.progress.progress-light{background-color:#111}.progress.progress-light .progress-bar{color:#111;background-color:#fff}.progress.progress-dark{background-color:#fff}.progress.progress-dark .progress-bar{color:#fff;background-color:#111}@-webkit-keyframes progress-indeterminate{0%{left:-65%}50%{left:90%}to{left:-65%}}@keyframes progress-indeterminate{0%{left:-65%}50%{left:90%}to{left:-65%}} diff --git a/docs/grid-system.html b/docs/grid-system.html index 708ca9e3d..d99d4afd9 100644 --- a/docs/grid-system.html +++ b/docs/grid-system.html @@ -24,60 +24,220 @@

-
- +
+
+
+ +
-
-

Grid System

-

Shoelace doesn’t ship with a grid system because you don’t need one. You should use the CSS Grid Layout instead.

-

This website uses the CSS Grid Layout. It’s really simple!

-
<main id="wrap">
-  <nav id="nav">
-    ...
-  </nav>
-
-  <div id="content">
-    ...
+      

+        

+          
Grid System

+
Shoelace features a 12-column grid system based heavily on Bootstrap 4’s grid. It’s flexible, easy to use, and fully responsive.

+
Structure

+
The grid consists of containers, rows, and columns. A basic, two-column grid looks like this:

+
<div class="container">
+  <div class="row">
+    <div class="col">1st column</div>
+    <div class="col">2nd column</div>
   </div>
-</main>
+</div>
 

-
Now we just need a couple styles to turn the nav and content elements into columns. This will make the nav 12rem wide and the content 100% - 12rem so it fills the rest of the space.

-
#wrap {
-  display: grid;
-  grid-template-columns: 12rem calc(100% - 12rem);
-}
-

-
You can use media queries to make grids responsive. This is how we make the nav appear on top of the content on smaller screens.

-
@media (max-width: 60rem) {
-  #wrap {
-    display: block;
-  }
-}
-

-
For Older Browsers

-
Support for CSS Grid Layouts is decent, but if you have an obligation to support Internet Explorer or Edge < 16, consider using the Flexbox Grid in combination with Shoelace.

-
You can use it as-is or include the source files and customize it with CSS variables in your build process.

+

+  

+    
1st column

+    
2nd column

+  

+

 
+
Containers can be used to wrap sections of your page. Use the container class to create a responsive, fixed-width container or the container-fluid class to create a fluid container.

+
Rows are used to group columns horizontally. Rows can only contain columns as child elements.

+
Columns are where your content will go. To create a complete row, use any combination of columns that adds up to 12 wide.

+
Creating Columns

+
Columns are equal width by default. The grid will automatically determine the appropriate size for columns with the col class.

+
<div class="row">
+  <div class="col">1</div>
+</div>
+
+<div class="row">
+  <div class="col">1</div>
+  <div class="col">2</div>
+</div>
+
+<div class="row">
+  <div class="col">1</div>
+  <div class="col">2</div>
+  <div class="col">3</div>
+</div>
+

+

+  

+    
col

+  

+  

+    
col

+    
col

+  

+  

+    
col

+    
col

+    
col

+  

+

+
+
To set the width of column, use the col-* modifier with a value of 1–12. Widths are calculated based on a total of 12 possible columns. Additional columns will wrap to a new line.

+
<div class="row">
+  <div class="col-2">col-2</div>
+  <div class="col-4">col-4</div>
+  <div class="col-6">col-6</div>
+</div>
+

+

+  

+    
col-2

+    
col-4

+    
col-6

+  

+

+
+
You can mix and match sized columns with unsized columns for flexibility. Unsized columns will take up equal widths of the remaining space.

+
<div class="row">
+  <div class="col">col</div>
+  <div class="col-6">col-6</div>
+  <div class="col">col</div>
+</div>
+

+

+  

+    
col

+    
col-6

+    
col

+  

+

+
+
Making Columns Responsive

+
There are five responsive tiers in Shoelace: xs, sm, md, lg, and xl. You can use these tiers to change the way the grid responds at various breakpoints.

+
Use the col-{tier}-* modifier to target a specific tier. Note that tiers are based on minimum widths, so using col-sm-6 will target sm, md, lg, and xl. However, you can target multiple tiers on the same column as needed.

+
For example, the following columns will stack on xs screens, take up 50% each (6 out of 12 columns) on sm screens, and 75% and 25% respectively on md, lg, and xl screens.

+
<div class="row">
+  <div class="col-12 col-sm-6 col-md-8">1st column</div>
+  <div class="col-12 col-sm-6 col-md-4">2nd column</div>
+</div>
+

+

+  

+    
1st column

+    
2nd column

+  

+

+
+
Offsetting Columns

+
You can offset columns using offset-* and offset-{tier}-* modifiers. To reset an offset at a specific tier, use offset-{tier}-0.

+
<div class="row">
+  <div class="col-2">left</div>
+  <div class="col-2 offset-2">center</div>
+  <div class="col-2 offset-2">right</div>
+</div>
+

+

+  

+    
left

+    
center

+    
right

+  

+

+
+
Reordering Columns

+
You can control the visual order of columns using the order-* and order-{tier}-* modifiers. Note that columns without an order modifier will not be affected.

+
<div class="row">
+  <div class="col-4">1st (no order)</div>
+  <div class="col-4 order-3">2nd (shown 3rd)</div>
+  <div class="col-4 order-2">3rd (shown 2nd)</div>
+</div>
+

+

+  

+    
1st (unordered)

+    
2nd

+    
3rd

+  

+

+
+
Hiding Columns

+
You can hide columns based on breakpoints using display utilities.

+
<div class="row">
+  <div class="col-2">always</div>
+  <div class="col-2 hidden-xs">hidden-xs</div>
+  <div class="col-2 hidden-sm">hidden-sm</div>
+  <div class="col-2 hidden-md">hidden-md</div>
+  <div class="col-2 hidden-lg">hidden-lg</div>
+  <div class="col-2 hidden-xl">hidden-xl</div>
+  </div>
+</div>
+

+

+  

+    
+    
+    
md

+    
+    
     

+  

+

+
+
Removing Gutters

+
By default, columns have horizontal spacing around them to create “gutters.” You can remove this spacing by applying the no-gutters class to the parent row.

+
<div class="row no-gutters">
+  ...
+</div>
+

+
For an edge-to-edge design, refrain from using container and container-fluid.

+
Nesting Grids

+
Grids can be nested. Simply add a new row inside of a column.

+
<div class="row">
+  <div class="col-8">
+    outer, col-8
+    <div class="row">
+      <div class="col-3">inner, col-3</div>
+      <div class="col-9">inner, col-9</div>
+    </div>
+  </div>
+</div>
+

+

+  

+    

+      outer, col-8
+      

+        
inner, col-3

+        
inner, col-9

+      

+    

+  

+

+
+        

+