oo-loop 1.0.2 → 1.1.0

package/dist/loop.css

@@ -1 +1 @@
-*,*::after,*::before{box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:1em;line-height:1.375;color:#444;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{margin-top:.67em;margin-bottom:.45em;line-height:1.125}h1{font-size:2rem}h2{font-size:1.625rem}h3{font-size:1.375rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:.875rem}p{margin-top:.5em;margin-bottom:1.125em}a{color:#28a6c7;text-decoration:none}[href]:hover{color:#1e7b94}[href]:focus{color:#1e7b94}ul,ol{margin-top:.5em;margin-bottom:1.125em;padding-left:1.1em}ul>ul,ul ol,ol>ul,ol ol{margin-top:.3em;margin-bottom:.5em}hr,.hr{display:block;border:none;margin:1rem auto;border-bottom:1px solid #cdcdcd}[oo-row]{position:relative;display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap;clear:both}[oo-col]{flex-shrink:0;flex-grow:1;flex-basis:0;min-width:0;max-width:100%}[oo-col~="span1"]{flex-basis:8.333333%;max-width:8.333333%}[oo-col~="span2"]{flex-basis:16.666667%;max-width:16.666667%}[oo-col~="span3"]{flex-basis:25%;max-width:25%}[oo-col~="span4"]{flex-basis:33.333333%;max-width:33.333333%}[oo-col~="span5"]{flex-basis:41.666667%;max-width:41.666667%}[oo-col~="span6"]{flex-basis:50%;max-width:50%}[oo-col~="span7"]{flex-basis:58.333333%;max-width:58.333333%}[oo-col~="span8"]{flex-basis:66.666667%;max-width:66.666667%}[oo-col~="span9"]{flex-basis:75%;max-width:75%}[oo-col~="span10"]{flex-basis:83.333333%;max-width:83.333333%}[oo-col~="span11"]{flex-basis:91.666667%;max-width:91.666667%}[oo-col~="span12"]{flex-basis:100%;max-width:100%}[oo-col~="fit"]{min-width:auto;flex-grow:0;flex-basis:auto}[oo-row~="align-left"]{justify-content:flex-start}[oo-row~="align-center"]{justify-content:center}[oo-row~="align-right"]{justify-content:flex-end}[oo-row~="align-evenly"]{justify-content:space-evenly}[oo-row~="align-between"]{justify-content:space-between}[oo-row~="valign-top"]{align-items:flex-start}[oo-row~="valign-middle"]{align-items:center}[oo-row~="valign-bottom"]{align-items:flex-end}[oo-col~="self-align-left"]{margin-left:initial;margin-right:initial}[oo-col~="self-align-center"]{margin-left:auto;margin-right:auto}[oo-col~="self-align-right"]{margin-left:auto;margin-right:initial}[oo-col~="self-valign-top"]{align-self:flex-start}[oo-col~="self-valign-middle"]{align-self:center}[oo-col~="self-valign-bottom"]{align-self:flex-end}@media (min-width: 37.5em){[oo-col~="auto@sm"]{flex-basis:0;flex-grow:1;min-width:0;max-width:100%}[oo-col~="span1@sm"]{flex-basis:8.333333%;max-width:8.333333%}[oo-col~="span2@sm"]{flex-basis:16.666667%;max-width:16.666667%}[oo-col~="span3@sm"]{flex-basis:25%;max-width:25%}[oo-col~="span4@sm"]{flex-basis:33.333333%;max-width:33.333333%}[oo-col~="span5@sm"]{flex-basis:41.666667%;max-width:41.666667%}[oo-col~="span6@sm"]{flex-basis:50%;max-width:50%}[oo-col~="span7@sm"]{flex-basis:58.333333%;max-width:58.333333%}[oo-col~="span8@sm"]{flex-basis:66.666667%;max-width:66.666667%}[oo-col~="span9@sm"]{flex-basis:75%;max-width:75%}[oo-col~="span10@sm"]{flex-basis:83.333333%;max-width:83.333333%}[oo-col~="span11@sm"]{flex-basis:91.666667%;max-width:91.666667%}[oo-col~="span12@sm"]{flex-basis:100%;max-width:100%}[oo-col~="fit@sm"]{min-width:auto;flex-grow:0;flex-basis:auto}}@media (min-width: 60em){[oo-col~="auto@md"]{flex-basis:0;flex-grow:1;min-width:0;max-width:100%}[oo-col~="span1@md"]{flex-basis:8.333333%;max-width:8.333333%}[oo-col~="span2@md"]{flex-basis:16.666667%;max-width:16.666667%}[oo-col~="span3@md"]{flex-basis:25%;max-width:25%}[oo-col~="span4@md"]{flex-basis:33.333333%;max-width:33.333333%}[oo-col~="span5@md"]{flex-basis:41.666667%;max-width:41.666667%}[oo-col~="span6@md"]{flex-basis:50%;max-width:50%}[oo-col~="span7@md"]{flex-basis:58.333333%;max-width:58.333333%}[oo-col~="span8@md"]{flex-basis:66.666667%;max-width:66.666667%}[oo-col~="span9@md"]{flex-basis:75%;max-width:75%}[oo-col~="span10@md"]{flex-basis:83.333333%;max-width:83.333333%}[oo-col~="span11@md"]{flex-basis:91.666667%;max-width:91.666667%}[oo-col~="span12@md"]{flex-basis:100%;max-width:100%}[oo-col~="fit@md"]{min-width:auto;flex-grow:0;flex-basis:auto}}@media (min-width: 80em){[oo-col~="auto@lg"]{flex-basis:0;flex-grow:1;min-width:0;max-width:100%}[oo-col~="span1@lg"]{flex-basis:8.333333%;max-width:8.333333%}[oo-col~="span2@lg"]{flex-basis:16.666667%;max-width:16.666667%}[oo-col~="span3@lg"]{flex-basis:25%;max-width:25%}[oo-col~="span4@lg"]{flex-basis:33.333333%;max-width:33.333333%}[oo-col~="span5@lg"]{flex-basis:41.666667%;max-width:41.666667%}[oo-col~="span6@lg"]{flex-basis:50%;max-width:50%}[oo-col~="span7@lg"]{flex-basis:58.333333%;max-width:58.333333%}[oo-col~="span8@lg"]{flex-basis:66.666667%;max-width:66.666667%}[oo-col~="span9@lg"]{flex-basis:75%;max-width:75%}[oo-col~="span10@lg"]{flex-basis:83.333333%;max-width:83.333333%}[oo-col~="span11@lg"]{flex-basis:91.666667%;max-width:91.666667%}[oo-col~="span12@lg"]{flex-basis:100%;max-width:100%}[oo-col~="fit@lg"]{min-width:auto;flex-grow:0;flex-basis:auto}}[oo-row~="stretch"]{align-items:stretch}[oo-row~="stretch"]>[oo-col]{display:flex}[oo-row~="stretch"]>[oo-col]>*{width:100%}[oo-row]>[oo-col]{background-clip:padding-box;border-left-style:solid;border-left-color:transparent}[oo-row]{left:-1rem;margin-bottom:-1rem;margin-right:-1rem}[oo-row]>[oo-col]{margin-bottom:1rem;border-left-width:1rem}@media (min-width: 37.5em){[oo-row]{left:-1.5rem;margin-bottom:-1.5rem;margin-right:-1.5rem}[oo-row]>[oo-col]{margin-bottom:1.5rem;border-left-width:1.5rem}}[oo-row~="gutter-less"]{left:-0;margin-bottom:-0;margin-right:-0}[oo-row~="gutter-less"]>[oo-col]{margin-bottom:0;border-left-width:0}[oo-col~="clear"]{margin:0 !important;flex-basis:100%;max-width:100%;border:0 !important}[oo-button]{display:inline-block;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;touch-action:manipulation;-webkit-appearance:none;-moz-appearance:none;padding:0.438em 1.2em;font-size:.875rem;font-weight:bold;line-height:1.45;color:#333;background-color:#fff;border:1px solid #cecece;border-radius:.2em}[oo-button]:disabled{cursor:not-allowed}[oo-button]:hover{color:#333;background-color:#e6e6e6}[oo-button]:focus{color:#333;background-color:#e6e6e6}[oo-button]:active{background-color:#e0e0e0;box-shadow:inset 1px 1px 1px 0 #bfbfbf;outline:none}[oo-button]:disabled{opacity:.75}[oo-button~="primary"]{color:#fff;background-color:#28a6c7;border-color:#28a6c7}[oo-button~="primary"]:hover:not(:disabled),[oo-button~="primary"]:focus:not(:disabled){color:#fff;background-color:#1f839d;border-color:#1f839d}[oo-button~="primary"]:focus:not(:disabled){outline:none;box-shadow:0 0 3px 4px #33b4d6}[oo-button~="primary"]:active:not(:disabled){color:#fff;background-color:#1e7b94;box-shadow:inset 1px 1px 1px 0 #134d5d;outline:none;border-color:#1e7b94}[oo-button~="secondary"]{color:#fff;background-color:#959595;border-color:#959595}[oo-button~="secondary"]:hover:not(:disabled),[oo-button~="secondary"]:focus:not(:disabled){color:#fff;background-color:#7c7c7c;border-color:#7c7c7c}[oo-button~="secondary"]:focus:not(:disabled){outline:none;box-shadow:0 0 3px 4px #a2a2a2}[oo-button~="secondary"]:active:not(:disabled){color:#fff;background-color:#767676;box-shadow:inset 1px 1px 1px 0 #555;outline:none;border-color:#767676}[oo-button~="full"]{width:100%}label{margin-bottom:.1875rem;display:inline-block;font-weight:500;line-height:1.5}[oo-input]{-webkit-appearance:none;-moz-appearance:none;padding:0.5em 0.625em;display:block;width:100%;min-height:2.5em;color:#4d4d4d;font-size:1rem;line-height:1.15;background-color:#fff;border:1px solid #d6d6d6;border-radius:.2em}[oo-input]:focus{outline:none;box-shadow:0 0 8px 0 rgba(170,170,170,0.25)}[oo-select]{position:relative;display:block}[oo-select]::before{position:absolute;top:0;right:0;bottom:0;content:'';border-top:1px solid #d6d6d6;border-right:1px solid #d6d6d6;border-bottom:1px solid #d6d6d6;border-top-right-radius:.2em;border-bottom-right-radius:.2em;pointer-events:none}[oo-select]::after{position:absolute;top:50%;content:'';border-bottom-style:solid;border-right-style:solid;pointer-events:none;transform:rotateZ(45deg) translateY(-50%) translateX(-50%)}[oo-select]::before{width:40px}[oo-select]::after{right:15px;width:10px;height:10px}[oo-select]::after{border-bottom-width:2px;border-right-width:2px}[oo-select]::before{background-color:#fff}[oo-select]::after{border-bottom-color:#4d4d4d;border-right-color:#4d4d4d}[oo-select]>select{margin:0;-webkit-appearance:none;-moz-appearance:none;padding:0.5em 0.625em;display:block;width:100%;min-height:2.5em;color:#4d4d4d;font-size:1rem;line-height:1.15;background-color:#fff;border:1px solid #d6d6d6;border-radius:.2em}[oo-select]>select::-ms-expand{display:none}[oo-select]>select:focus{outline:none;box-shadow:0 0 8px 0 rgba(170,170,170,0.25)}[oo-select][class*="color-"]>select{color:inherit !important}[oo-select][class*="bg-"]>select{background-color:inherit !important}[oo-select][class*="border-"]>select,[oo-select][class*="border-"]::before{border-color:inherit !important}[oo-checkbox]{position:absolute;opacity:0;pointer-events:none}[oo-checkbox]+label{position:relative;display:flex;align-items:center;width:fit-content;font-weight:inherit;line-height:1.1}[oo-checkbox]+label::after{display:flex;order:-1;content:'';background-color:#fff;border:1px solid #d6d6d6;border-radius:.2em;transition:background-color 250ms ease-out}[oo-checkbox]:checked+label::before{position:absolute;top:0;left:0;content:'';border-right:solid #fff;border-bottom:solid #fff;transform:translate(80%) translateY(20%) rotateZ(40deg)}[oo-checkbox]:checked+label::after{background-color:#4d4d4d;border:1px solid #4d4d4d}[oo-checkbox]+label::after{margin-right:.45rem;min-width:1.125rem;min-height:1.125rem}[oo-checkbox]+label+[oo-checkbox]+label{margin-top:.375rem}[oo-checkbox]:checked+label::before{min-width:.45rem;min-height:.675rem;border-right-width:.135rem;border-bottom-width:.135rem}[oo-checkbox][oo-checkbox~="inline"]+label:not(:last-child){margin-right:.9rem}[oo-checkbox~="inline"]+label{display:inline-flex}[oo-radio]{position:absolute;opacity:0;pointer-events:none}[oo-radio]+label{position:relative;display:flex;align-items:center;width:fit-content;font-weight:inherit;line-height:1.1}[oo-radio]+label::after{display:flex;order:-1;content:'';border-radius:50%;background-color:#fff;border:1px solid #d6d6d6}[oo-radio]:checked+label::before{position:absolute;top:0;left:0;content:'';border-radius:50%;background-color:#fff}[oo-radio]:checked+label::after{background-color:#4d4d4d;border-color:#4d4d4d;transition:background-color 250ms ease-out}[oo-radio]+label::after{margin-right:.5625rem;min-width:1.125rem;min-height:1.125rem}[oo-radio]+label+[oo-radio]+label{margin-top:.375rem}[oo-radio]:checked+label::before{top:calc(50% - .5625rem);min-width:1.125rem;min-height:1.125rem;transform:scale(0.4)}[oo-radio][oo-radio~="inline"]+label:not(:last-child){margin-right:.9rem}[oo-radio~="inline"]+label{display:inline-flex}[oo-toggle]{position:absolute;opacity:0;pointer-events:none}[oo-toggle]+label{position:relative;display:flex;align-items:center;width:fit-content;font-weight:inherit;line-height:1.1}[oo-toggle]+label::before{position:absolute;left:0;content:'';border-radius:50%;background-color:#fff;box-shadow:1px 1px 2px 0 rgba(77,77,77,0.3);transition:transform 300ms ease-out}[oo-toggle]+label::after{display:flex;order:-1;content:'';border:1px solid #d6d6d6;border-radius:50em;background-color:#d6d6d6;transition:background-color 300ms ease-in-out,border-color 300ms ease-in-out}[oo-toggle]+label:empty::after{margin-right:0 !important}[oo-toggle]:checked+label::after{border-color:#4d4d4d;background-color:#4d4d4d}[oo-toggle]+label::before{top:calc(50% - (1.05rem / 2));min-width:1.05rem;height:1.05rem;transform:translate3d(.3rem, 0, 0)}[oo-toggle]+label::after{margin-right:.6rem;min-width:2.7rem;min-height:1.5rem}[oo-toggle]+label+[oo-toggle]+label{margin-top:.5rem}[oo-toggle]:checked+label::before{transform:translate3d(calc(80% + (1.5rem * .35)), 0, 0)}.container,.container-fluid{margin-left:auto;margin-right:auto;display:block;padding-right:1rem;padding-left:1rem}@media (min-width: 37.5em){.container,.container-fluid{padding-right:1.5rem;padding-left:1.5rem}}.container{max-width:1280px}.hidden{display:none !important}@media print{.hidden\@print{display:none !important}}@media screen{.hidden\@screen{display:none !important}}@media (min-width: 37.5em){.hidden\@sm{display:none !important}}@media (min-width: 60em){.hidden\@md{display:none !important}}@media (min-width: 80em){.hidden\@lg{display:none !important}}@media (max-width: 37.499em){.hidden\!\@sm{display:none !important}}@media (max-width: 59.999em){.hidden\!\@md{display:none !important}}@media (max-width: 79.999em){.hidden\!\@lg{display:none !important}}ul.list-center,ol.list-center{text-align:center;padding-left:0;list-style-position:inside}.list-unstyle{padding-left:0;list-style:none}.list-unstyle ul{padding-left:2.2em}.list-unstyle .list-unstyle{padding-left:1em}.list-inline{padding-left:0;list-style:none}.list-inline>li{margin-bottom:0;display:inline-block}.list-inline>li:not(:last-child){margin-right:1em}.responsive{max-width:100%;height:auto}.color-primary{color:#28a6c7 !important}.color-secondary{color:#959595 !important}.bg-primary{background-color:#28a6c7 !important}.bg-secondary{background-color:#f8f8f8 !important}.font-large{font-size:1.25rem !important}.font-small{font-size:.875rem !important}.font-italic{font-style:italic !important}.font-bold{font-weight:700 !important}.font-light{font-weight:300 !important}.text-left{text-align:left !important}.text-right{text-align:right !important}.text-center{text-align:center !important}.text-uppercase{text-transform:uppercase !important}.clear{clear:both}.clearfix::before,.clearfix::after{display:block;content:'';clear:both}.float-left{float:left !important}.float-right{float:right !important}.ml-0{margin-left:0 !important}.ml-5{margin-left:.3125rem !important}.ml-10{margin-left:.625rem !important}.ml-15{margin-left:.9375rem !important}.mr-0{margin-right:0 !important}.mr-5{margin-right:.3125rem !important}.mr-10{margin-right:.625rem !important}.mr-15{margin-right:.9375rem !important}.mt-0{margin-top:0 !important}.mt-5{margin-top:.3125rem !important}.mt-10{margin-top:.625rem !important}.mt-15{margin-top:.9375rem !important}.mt-30{margin-top:1.875rem !important}.mb-0{margin-bottom:0 !important}.mb-5{margin-bottom:.3125rem !important}.mb-10{margin-bottom:.625rem !important}.mb-15{margin-bottom:.9375rem !important}.mb-30{margin-bottom:1.875rem !important}.wrapper-small{padding:1rem !important}.wrapper-medium{padding:1.5rem !important}
+*,*::after,*::before{box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:1em;line-height:1.375;color:#444;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{margin-top:.67em;margin-bottom:.45em;line-height:1.125}h1{font-size:2rem}h2{font-size:1.625rem}h3{font-size:1.375rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:.875rem}p{margin-top:.5em;margin-bottom:1.125em}a{color:#28a6c7;text-decoration:none}[href]:hover{color:rgb(29.7573221757,123.4928870293,148.0426778243)}[href]:focus{color:rgb(29.7573221757,123.4928870293,148.0426778243)}ul,ol{margin-top:.5em;margin-bottom:1.125em;padding-left:1.1em}ul>ul,ul ol,ol>ul,ol ol{margin-top:.3em;margin-bottom:.5em}hr,.hr{display:block;border:none;margin:1rem auto;border-bottom:1px solid #cdcdcd}[oo-row]{position:relative;display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap;clear:both}[oo-col]{flex-shrink:0;flex-grow:1;flex-basis:0;min-width:0;max-width:100%}[oo-col~=span1]{flex-basis:8.3333333333%;max-width:8.3333333333%}[oo-col~=span2]{flex-basis:16.6666666667%;max-width:16.6666666667%}[oo-col~=span3]{flex-basis:25%;max-width:25%}[oo-col~=span4]{flex-basis:33.3333333333%;max-width:33.3333333333%}[oo-col~=span5]{flex-basis:41.6666666667%;max-width:41.6666666667%}[oo-col~=span6]{flex-basis:50%;max-width:50%}[oo-col~=span7]{flex-basis:58.3333333333%;max-width:58.3333333333%}[oo-col~=span8]{flex-basis:66.6666666667%;max-width:66.6666666667%}[oo-col~=span9]{flex-basis:75%;max-width:75%}[oo-col~=span10]{flex-basis:83.3333333333%;max-width:83.3333333333%}[oo-col~=span11]{flex-basis:91.6666666667%;max-width:91.6666666667%}[oo-col~=span12]{flex-basis:100%;max-width:100%}[oo-col~=fit]{min-width:auto;flex-grow:0;flex-basis:auto}[oo-row~=align-left]{justify-content:flex-start}[oo-row~=align-center]{justify-content:center}[oo-row~=align-right]{justify-content:flex-end}[oo-row~=align-evenly]{justify-content:space-evenly}[oo-row~=align-between]{justify-content:space-between}[oo-row~=valign-top]{align-items:flex-start}[oo-row~=valign-middle]{align-items:center}[oo-row~=valign-bottom]{align-items:flex-end}[oo-col~=self-align-left]{margin-left:initial;margin-right:initial}[oo-col~=self-align-center]{margin-left:auto;margin-right:auto}[oo-col~=self-align-right]{margin-left:auto;margin-right:initial}[oo-col~=self-valign-top]{align-self:flex-start}[oo-col~=self-valign-middle]{align-self:center}[oo-col~=self-valign-bottom]{align-self:flex-end}@media(min-width: 37.5em){[oo-col~="auto@sm"]{flex-basis:0;flex-grow:1;min-width:0;max-width:100%}[oo-col~="span1@sm"]{flex-basis:8.3333333333%;max-width:8.3333333333%}[oo-col~="span2@sm"]{flex-basis:16.6666666667%;max-width:16.6666666667%}[oo-col~="span3@sm"]{flex-basis:25%;max-width:25%}[oo-col~="span4@sm"]{flex-basis:33.3333333333%;max-width:33.3333333333%}[oo-col~="span5@sm"]{flex-basis:41.6666666667%;max-width:41.6666666667%}[oo-col~="span6@sm"]{flex-basis:50%;max-width:50%}[oo-col~="span7@sm"]{flex-basis:58.3333333333%;max-width:58.3333333333%}[oo-col~="span8@sm"]{flex-basis:66.6666666667%;max-width:66.6666666667%}[oo-col~="span9@sm"]{flex-basis:75%;max-width:75%}[oo-col~="span10@sm"]{flex-basis:83.3333333333%;max-width:83.3333333333%}[oo-col~="span11@sm"]{flex-basis:91.6666666667%;max-width:91.6666666667%}[oo-col~="span12@sm"]{flex-basis:100%;max-width:100%}[oo-col~="fit@sm"]{min-width:auto;flex-grow:0;flex-basis:auto}}@media(min-width: 60em){[oo-col~="auto@md"]{flex-basis:0;flex-grow:1;min-width:0;max-width:100%}[oo-col~="span1@md"]{flex-basis:8.3333333333%;max-width:8.3333333333%}[oo-col~="span2@md"]{flex-basis:16.6666666667%;max-width:16.6666666667%}[oo-col~="span3@md"]{flex-basis:25%;max-width:25%}[oo-col~="span4@md"]{flex-basis:33.3333333333%;max-width:33.3333333333%}[oo-col~="span5@md"]{flex-basis:41.6666666667%;max-width:41.6666666667%}[oo-col~="span6@md"]{flex-basis:50%;max-width:50%}[oo-col~="span7@md"]{flex-basis:58.3333333333%;max-width:58.3333333333%}[oo-col~="span8@md"]{flex-basis:66.6666666667%;max-width:66.6666666667%}[oo-col~="span9@md"]{flex-basis:75%;max-width:75%}[oo-col~="span10@md"]{flex-basis:83.3333333333%;max-width:83.3333333333%}[oo-col~="span11@md"]{flex-basis:91.6666666667%;max-width:91.6666666667%}[oo-col~="span12@md"]{flex-basis:100%;max-width:100%}[oo-col~="fit@md"]{min-width:auto;flex-grow:0;flex-basis:auto}}@media(min-width: 80em){[oo-col~="auto@lg"]{flex-basis:0;flex-grow:1;min-width:0;max-width:100%}[oo-col~="span1@lg"]{flex-basis:8.3333333333%;max-width:8.3333333333%}[oo-col~="span2@lg"]{flex-basis:16.6666666667%;max-width:16.6666666667%}[oo-col~="span3@lg"]{flex-basis:25%;max-width:25%}[oo-col~="span4@lg"]{flex-basis:33.3333333333%;max-width:33.3333333333%}[oo-col~="span5@lg"]{flex-basis:41.6666666667%;max-width:41.6666666667%}[oo-col~="span6@lg"]{flex-basis:50%;max-width:50%}[oo-col~="span7@lg"]{flex-basis:58.3333333333%;max-width:58.3333333333%}[oo-col~="span8@lg"]{flex-basis:66.6666666667%;max-width:66.6666666667%}[oo-col~="span9@lg"]{flex-basis:75%;max-width:75%}[oo-col~="span10@lg"]{flex-basis:83.3333333333%;max-width:83.3333333333%}[oo-col~="span11@lg"]{flex-basis:91.6666666667%;max-width:91.6666666667%}[oo-col~="span12@lg"]{flex-basis:100%;max-width:100%}[oo-col~="fit@lg"]{min-width:auto;flex-grow:0;flex-basis:auto}}[oo-row~=stretch]{align-items:stretch}[oo-row~=stretch]>[oo-col]{display:flex}[oo-row~=stretch]>[oo-col]>*{width:100%}[oo-row]>[oo-col]{background-clip:padding-box;border-left-style:solid;border-left-color:rgba(0,0,0,0)}[oo-row]{left:-1rem;margin-bottom:-1rem;margin-right:-1rem}[oo-row]>[oo-col]{margin-bottom:1rem;border-left-width:1rem}@media(min-width: 37.5em){[oo-row]{left:-1.5rem;margin-bottom:-1.5rem;margin-right:-1.5rem}[oo-row]>[oo-col]{margin-bottom:1.5rem;border-left-width:1.5rem}}[oo-row~=gutter-less]{left:0;margin-bottom:0;margin-right:0}[oo-row~=gutter-less]>[oo-col]{margin-bottom:0;border-left-width:0}[oo-col~=clear]{margin:0 !important;flex-basis:100%;max-width:100%;border:0 !important}[oo-button]{display:inline-block;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;touch-action:manipulation;-webkit-appearance:none;-moz-appearance:none;padding:.438em 1.2em;font-size:.875rem;font-weight:bold;line-height:1.45;color:#333;background-color:#fff;border:1px solid #cecece;border-radius:.2em}[oo-button]:disabled{cursor:not-allowed}[oo-button]:hover{color:#333;background-color:hsl(0,0%,90%)}[oo-button]:focus{color:#333;background-color:hsl(0,0%,90%)}[oo-button]:active{background-color:hsl(0,0%,88%);box-shadow:inset 1px 1px 1px 0 hsl(0,0%,75%);outline:none}[oo-button]:disabled{opacity:.75}[oo-button~=primary]{color:#fff;background-color:#28a6c7;border-color:#28a6c7}[oo-button~=primary]:hover:not(:disabled),[oo-button~=primary]:focus:not(:disabled){color:#fff;background-color:rgb(31.4644351464,130.5774058577,156.5355648536);border-color:rgb(31.4644351464,130.5774058577,156.5355648536)}[oo-button~=primary]:focus:not(:disabled){outline:none;box-shadow:0 0 3px 4px rgb(50.5878661088,180.0146443515,213.9121338912)}[oo-button~=primary]:active:not(:disabled){color:#fff;background-color:rgb(29.7573221757,123.4928870293,148.0426778243);box-shadow:inset 1px 1px 1px 0 rgb(18.6610878661,77.4435146444,92.8389121339);outline:none;border-color:rgb(29.7573221757,123.4928870293,148.0426778243)}[oo-button~=secondary]{color:#fff;background-color:#959595;border-color:#959595}[oo-button~=secondary]:hover:not(:disabled),[oo-button~=secondary]:focus:not(:disabled){color:#fff;background-color:rgb(123.5,123.5,123.5);border-color:rgb(123.5,123.5,123.5)}[oo-button~=secondary]:focus:not(:disabled){outline:none;box-shadow:0 0 3px 4px hsl(0,0%,63.431372549%)}[oo-button~=secondary]:active:not(:disabled){color:#fff;background-color:rgb(118.4,118.4,118.4);box-shadow:inset 1px 1px 1px 0 rgb(85.25,85.25,85.25);outline:none;border-color:rgb(118.4,118.4,118.4)}[oo-button~=full]{width:100%}label{margin-bottom:.1875rem;display:inline-block;font-weight:500;line-height:1.5}[oo-input]{-webkit-appearance:none;-moz-appearance:none;padding:.5em .625em;display:block;width:100%;min-height:2.5em;color:#4d4d4d;font-size:1rem;line-height:1.15;background-color:#fff;border:1px solid #d6d6d6;border-radius:.2em}[oo-input]:focus{outline:none;box-shadow:0 0 8px 0 rgba(170,170,170,.25)}[oo-select]{position:relative;display:block}[oo-select]::before{position:absolute;top:0;right:0;bottom:0;content:"";border-top:1px solid #d6d6d6;border-right:1px solid #d6d6d6;border-bottom:1px solid #d6d6d6;border-top-right-radius:.2em;border-bottom-right-radius:.2em;pointer-events:none}[oo-select]::after{position:absolute;top:50%;content:"";border-bottom-style:solid;border-right-style:solid;pointer-events:none;transform:rotateZ(45deg) translateY(-50%) translateX(-50%)}[oo-select]::before{width:40px}[oo-select]::after{right:15px;width:10px;height:10px}[oo-select]::after{border-bottom-width:2px;border-right-width:2px}[oo-select]::before{background-color:#fff}[oo-select]::after{border-bottom-color:#4d4d4d;border-right-color:#4d4d4d}[oo-select]>select{margin:0;-webkit-appearance:none;-moz-appearance:none;padding:.5em .625em;display:block;width:100%;min-height:2.5em;color:#4d4d4d;font-size:1rem;line-height:1.15;background-color:#fff;border:1px solid #d6d6d6;border-radius:.2em}[oo-select]>select::-ms-expand{display:none}[oo-select]>select:focus{outline:none;box-shadow:0 0 8px 0 rgba(170,170,170,.25)}[oo-select][class*=color-]>select{color:inherit !important}[oo-select][class*=bg-]>select{background-color:inherit !important}[oo-select][class*=border-]>select,[oo-select][class*=border-]::before{border-color:inherit !important}[oo-checkbox]{position:absolute;opacity:0;pointer-events:none}[oo-checkbox]+label{position:relative;display:flex;align-items:center;width:fit-content;font-weight:inherit;line-height:1.1}[oo-checkbox]+label::after{display:flex;order:-1;content:"";background-color:#fff;border:1px solid #d6d6d6;border-radius:.2em;transition:background-color 250ms ease-out}[oo-checkbox]:checked+label::before{position:absolute;top:0;left:0;content:"";border-right:solid #fff;border-bottom:solid #fff;transform:translate(80%) translateY(20%) rotateZ(40deg)}[oo-checkbox]:checked+label::after{background-color:#4d4d4d;border:1px solid #4d4d4d}[oo-checkbox]+label::after{margin-right:.45rem;min-width:1.125rem;min-height:1.125rem}[oo-checkbox]+label+[oo-checkbox]+label{margin-top:.375rem}[oo-checkbox]:checked+label::before{min-width:.45rem;min-height:.675rem;border-right-width:.135rem;border-bottom-width:.135rem}[oo-checkbox][oo-checkbox~=inline]+label:not(:last-child){margin-right:.9rem}[oo-checkbox~=inline]+label{display:inline-flex}[oo-radio]{position:absolute;opacity:0;pointer-events:none}[oo-radio]+label{position:relative;display:flex;align-items:center;width:fit-content;font-weight:inherit;line-height:1.1}[oo-radio]+label::after{display:flex;order:-1;content:"";border-radius:50%;background-color:#fff;border:1px solid #d6d6d6}[oo-radio]:checked+label::before{position:absolute;top:0;left:0;content:"";border-radius:50%;background-color:#fff}[oo-radio]:checked+label::after{background-color:#4d4d4d;border-color:#4d4d4d;transition:background-color 250ms ease-out}[oo-radio]+label::after{margin-right:.5625rem;min-width:1.125rem;min-height:1.125rem}[oo-radio]+label+[oo-radio]+label{margin-top:.375rem}[oo-radio]:checked+label::before{top:calc(50% - 0.5625rem);min-width:1.125rem;min-height:1.125rem;transform:scale(0.4)}[oo-radio][oo-radio~=inline]+label:not(:last-child){margin-right:.9rem}[oo-radio~=inline]+label{display:inline-flex}[oo-toggle]{position:absolute;opacity:0;pointer-events:none}[oo-toggle]+label{position:relative;display:flex;align-items:center;width:fit-content;font-weight:inherit;line-height:1.1}[oo-toggle]+label::before{position:absolute;left:0;content:"";border-radius:50%;background-color:#fff;box-shadow:1px 1px 2px 0 rgba(77,77,77,.3);transition:transform 300ms ease-out}[oo-toggle]+label::after{display:flex;order:-1;content:"";border:1px solid #d6d6d6;border-radius:50em;background-color:#d6d6d6;transition:background-color 300ms ease-in-out,border-color 300ms ease-in-out}[oo-toggle]+label:empty::after{margin-right:0 !important}[oo-toggle]:checked+label::after{border-color:#4d4d4d;background-color:#4d4d4d}[oo-toggle]+label::before{top:calc(50% - .525rem);min-width:1.05rem;height:1.05rem;transform:translate3d(0.3rem, 0, 0)}[oo-toggle]+label::after{margin-right:.6rem;min-width:2.7rem;min-height:1.5rem}[oo-toggle]+label+[oo-toggle]+label{margin-top:.5rem}[oo-toggle]:checked+label::before{transform:translate3d(calc(80% + 1.5rem * 0.35), 0, 0)}.container,.container-fluid{margin-left:auto;margin-right:auto;display:block;padding-right:1rem;padding-left:1rem}@media(min-width: 37.5em){.container,.container-fluid{padding-right:1.5rem;padding-left:1.5rem}}.container{max-width:1280px}.hidden{display:none !important}@media print{.hidden\@print{display:none !important}}@media screen{.hidden\@screen{display:none !important}}@media(min-width: 37.5em){.hidden\@sm{display:none !important}}@media(min-width: 60em){.hidden\@md{display:none !important}}@media(min-width: 80em){.hidden\@lg{display:none !important}}@media(max-width: 37.499em){.hidden\!\@sm{display:none !important}}@media(max-width: 59.999em){.hidden\!\@md{display:none !important}}@media(max-width: 79.999em){.hidden\!\@lg{display:none !important}}ul.list-center,ol.list-center{text-align:center;padding-left:0;list-style-position:inside}.list-unstyle{padding-left:0;list-style:none}.list-unstyle ul{padding-left:2.2em}.list-unstyle .list-unstyle{padding-left:1em}.list-inline{padding-left:0;list-style:none}.list-inline>li{margin-bottom:0;display:inline-block}.list-inline>li:not(:last-child){margin-right:1em}.responsive{max-width:100%;height:auto}.color-primary{color:#28a6c7 !important}.color-secondary{color:#959595 !important}.bg-primary{background-color:#28a6c7 !important}.bg-secondary{background-color:#f8f8f8 !important}.font-large{font-size:1.25rem !important}.font-small{font-size:0.875rem !important}.font-italic{font-style:italic !important}.font-bold{font-weight:700 !important}.font-light{font-weight:300 !important}.text-left{text-align:left !important}.text-right{text-align:right !important}.text-center{text-align:center !important}.text-uppercase{text-transform:uppercase !important}.clear{clear:both}.clearfix::before,.clearfix::after{display:block;content:"";clear:both}.float-left{float:left !important}.float-right{float:right !important}.ml-0{margin-left:0 !important}.ml-5{margin-left:0.3125rem !important}.ml-10{margin-left:0.625rem !important}.ml-15{margin-left:0.9375rem !important}.mr-0{margin-right:0 !important}.mr-5{margin-right:0.3125rem !important}.mr-10{margin-right:0.625rem !important}.mr-15{margin-right:0.9375rem !important}.mt-0{margin-top:0 !important}.mt-5{margin-top:0.3125rem !important}.mt-10{margin-top:0.625rem !important}.mt-15{margin-top:0.9375rem !important}.mt-30{margin-top:1.875rem !important}.mb-0{margin-bottom:0 !important}.mb-5{margin-bottom:0.3125rem !important}.mb-10{margin-bottom:0.625rem !important}.mb-15{margin-bottom:0.9375rem !important}.mb-30{margin-bottom:1.875rem !important}.wrapper-small{padding:1rem !important}.wrapper-medium{padding:1.5rem !important}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oo-loop",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Loop CSS framework, flexible and expressive CSS",
   "keywords": [
     "scss",
@@ -36,13 +36,12 @@
     "url": "https://github.com/oo-loop/loop.git"
   },
   "scripts": {
-    "dev": "node-sass -r --output-style expanded --precision 6 src/index.scss dist/loop.css",
-    "build": "node-sass --output-style compressed --precision 6 src/index.scss dist/loop.css",
-    "watch": "npm run dev && npm run dev -- -w",
-    "example": "node-sass --output-style expanded --precision 6 example/src -o example/build"
+    "dev": "sass --watch --style=expanded --no-source-map src/index.scss:dist/loop.css scss",
+    "build": "sass --style=compressed --no-source-map src/index.scss dist/loop.css",
+    "example": "sass --watch --style=expanded --no-source-map example/src:example/build"
   },
   "devDependencies": {
-    "node-sass": "^7.0.0"
+    "sass": "^1.79.3"
   },
   "engines": {
     "node": ">= 6.0.0",

package/scss/_fn.scss

@@ -0,0 +1,13 @@
+@import 
+  'functions/type',
+  'functions/empty',
+  'functions/split',
+  'functions/extract',
+  'functions/replace',
+  'functions/strip',
+  'functions/number',
+  'functions/color',
+  'functions/list',
+  'functions/map',
+  'functions/convert'
+;

package/scss/_init.scss

@@ -1,3 +1,5 @@
+@use 'fn';
+
 /// Init single element
 /// @param string $name Name of settings
 /// @param map $settings data
@@ -6,7 +8,7 @@
 @mixin initElement($name, $settings, $use-name-as-param: true) {
   // $ooLoop: ooAdd('include', $name) !global; // for styleguide
   @if $settings != null {
-    $map: mapMergeDeep($ooLoop, if($use-name-as-param, (#{$name}: $settings), $settings));
+    $map: ooMergeDeep($ooLoop, if($use-name-as-param, (#{$name}: $settings), $settings));
     $ooLoop: if(hasRef($map), ooParse($map), $map) !global;
   }
 }
@@ -16,11 +18,11 @@
 
 @mixin ooInit($custom:null) {
   $map: $ooLoop;
-  @if isMap($custom) and isNotEmpty($custom) {
-    $map: mapMergeDeep($map, $custom);
+  @if fn.isMap($custom) and fn.isNotEmpty($custom) {
+    $map: ooMergeDeep($map, $custom);
   }
   $map: if(hasRef($map), ooParse($map), $map);
-  $map: setMapValue($map, 'init', true);
+  $map: fn.setMapValue($map, 'init', true);
   $ooLoop: $map !global;
 }
 

package/scss/_loop.scss

@@ -4,7 +4,7 @@
 @import
   "pre",
   "config",
-  "functions/all",
+  "oo/all",
   "mixins/all",
   "base/all"
 ;

package/scss/_pre.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 // Set available functions before configuration
 
 /// rem
@@ -7,5 +9,5 @@
 /// @return number rem value
 
 @function rem($pixel, $base: 16) {
-  @return  ((1rem * $pixel) / $base);
+  @return math.div((1rem * $pixel), $base);
 }

package/scss/base/_type.scss

@@ -1,9 +1,11 @@
+@use '../fn';
+
 // Typography
 
 @mixin Headings($param: null) {
   @include initElement('headings', $param);
 
-  @if isNotEmpty(oo('headings.props')) {
+  @if fn.isNotEmpty(oo('headings.props')) {
     h1,
     h2,
     h3,
@@ -14,10 +16,10 @@
     }
   }
 
-  @if isNotEmpty(oo('headings.sizes')) {
+  @if fn.isNotEmpty(oo('headings.sizes')) {
     @each $heading, $font-size in oo('headings.sizes') {
       #{$heading} {
-        @if isMap($font-size) {
+        @if fn.isMap($font-size) {
           @each $key, $value in $font-size {
             @include breakpoint($key) {
               font-size: $value;
@@ -27,7 +29,7 @@
           font-size: $font-size;
         }
       }
-      @if isNotEmpty(oo('headings.classes')) and inList($heading, oo('headings.classes')) {
+      @if fn.isNotEmpty(oo('headings.classes')) and fn.inList($heading, oo('headings.classes')) {
         .#{$heading} {
           @extend #{$heading};
         }

package/scss/components/_button.scss

@@ -1,8 +1,11 @@
+@use 'sass:color';
+@use '../fn';
+
 // Button
 
 @mixin paintButton($color-value) {
-  @if isColor($color-value) {
-    $color: if(isBright($color-value), darken($color-value, 80%), #fff);
+  @if fn.isColor($color-value) {
+    $color: if(fn.isBright($color-value), color.adjust($color-value, $lightness: -80%), #fff);
     
     color: $color;
     background-color: $color-value;
@@ -12,12 +15,12 @@
   
     @if oo('button.outline') {
       &[#{ooPrefix()}-button~="outline"] {
-        color: if(isBright($color-value, 210), darken($color-value, 30%), $color-value);
+        color: if(fn.isBright($color-value, 210), color.adjust($color-value, $lightness: -30%), $color-value);
         background: transparent;
         box-shadow: none;
   
-        @if oo('button.props.border') and isBright($color-value, 210) {
-          border-color: darken($color-value, 30%);
+        @if oo('button.props.border') and fn.isBright($color-value, 210) {
+          border-color: color.adjust($color-value, $lightness: -30%);
         }
       }
     }
@@ -25,9 +28,9 @@
     &:hover:not(:disabled),
     &:focus:not(:disabled) {
       color: $color;
-      background-color: darken($color-value, 10%);
+      background-color: color.adjust($color-value, $lightness: -10%);
       @if oo('button.props.border') {
-        border-color: darken($color-value, 10%);
+        border-color: color.adjust($color-value, $lightness: -10%);
       }
       @if oo('button.outline') {
         &[#{ooPrefix()}-button~="outline"] {
@@ -40,15 +43,15 @@
     }
     &:focus:not(:disabled) {
       outline: none;
-      box-shadow: 0 0 3px 4px lighten($color-value, 5%);
+      box-shadow: 0 0 3px 4px color.adjust($color-value, $lightness: 5%);
     }
     &:active:not(:disabled) {
       color: $color;
-      background-color: darken($color-value, 12%);
-      box-shadow: inset  1px 1px 1px 0 darken($color-value, 25%);
+      background-color: color.adjust($color-value, $lightness: -12%);
+      box-shadow: inset  1px 1px 1px 0 color.adjust($color-value, $lightness: -25%);
       outline: none;
       @if oo('button.props.border') {
-        border-color: darken($color-value, 12%);
+        border-color: color.adjust($color-value, $lightness: -12%);
       }
     }
   }
@@ -77,7 +80,7 @@
     @include generateStatesProperties(oo('button.states'));
   }
   
-  @if isNotEmpty(oo('button.colors') and isMap(oo('button.colors'))) {
+  @if fn.isNotEmpty(oo('button.colors') and fn.isMap(oo('button.colors'))) {
     @each $name, $value in oo('button.colors') {
       [#{ooPrefix()}-button~="#{$name}"] {
         @include paintButton($value);
@@ -85,7 +88,7 @@
     }
   }
 
-  @if isNotEmpty(oo('button.variants')) {
+  @if fn.isNotEmpty(oo('button.variants')) {
     @include generateComponentVariants('button', oo('button.variants'));
   }
 }

package/scss/components/_column.scss

@@ -1,9 +1,14 @@
+@use 'sass:list';
+@use 'sass:meta';
+@use 'sass:math';
+@use '../fn';
+
 // Column
 
 @mixin columnGutterProps($size) {
-  left: -#{$size};
-  margin-bottom: -#{$size};
-  margin-right: -#{$size};
+  left: -1 * $size;
+  margin-bottom: -1 * $size;
+  margin-right: -1 * $size;
   > [#{ooPrefix()}-col] {
     margin-bottom: $size;
     border-left-width: $size;
@@ -16,16 +21,16 @@
   }
 }
 @mixin columnGutterScreens($screens, $vertical:false) {
-  $screens: if(isString($screens), toList($screens), $screens);
+  $screens: if(fn.isString($screens), fn.toList($screens), $screens);
   $config-name: if($vertical, 'column.gutter.vsizes', 'column.gutter.sizes');
   $prefix: if($vertical, 'vgutter', 'gutter');
 
   @each $class, $gutter-name in $screens {
     @include breakpoint($class) {
       $suffix: \@#{$class};
-      @if $gutter-name == '*' or isList($screens) {
+      @if $gutter-name == '*' or fn.isList($screens) {
         @each $gutter-name, $gutter-size in oo('#{$config-name}') {
-          @if isString($gutter-size) or isNumber($gutter-size) {
+          @if fn.isString($gutter-size) or fn.isNumber($gutter-size) {
             [#{ooPrefix()}-row~="#{$prefix}-#{$gutter-name}#{$suffix}"] {
               @if $vertical {
                 @include columnVGutterProps($gutter-size);
@@ -35,11 +40,11 @@
             }
           } 
         }
-      } @else if isNotEmpty($gutter-name) {
-        $gutter-names: toList($gutter-name);
+      } @else if fn.isNotEmpty($gutter-name) {
+        $gutter-names: fn.toList($gutter-name);
         @each $name in $gutter-names {
           $gutter-size: oo('#{$config-name}.#{$name}');
-          @if isString($gutter-size) or isNumber($gutter-size) {
+          @if fn.isString($gutter-size) or fn.isNumber($gutter-size) {
             [#{ooPrefix()}-row~="#{$prefix}-#{$name}#{$suffix}"] {
               @if $vertical {
                 @include columnVGutterProps($gutter-size);
@@ -58,8 +63,8 @@
   @return if($index > 0, $index, -1);
 }
 @mixin columnResponsiveAttribute($attribute-name, $prop-name, $prop-function) {
-  @if function-exists('get-function') {
-    $prop-function: get-function($prop-function);
+  @if meta.function-exists('get-function') {
+    $prop-function: meta.get-function($prop-function);
   }
   @each $class, $values in oo('column.#{$attribute-name}.screens') {
     @include breakpoint($class) {
@@ -67,14 +72,14 @@
       @if $values == '*' {
         @for $i from 0 to oo('column.system') {
           [#{ooPrefix()}-col~="#{$attribute-name}#{$i}#{$suffix}"] { 
-            #{$prop-name}: call($prop-function, $i);
+            #{$prop-name}: meta.call($prop-function, $i);
           }
         }
-      } @else if isNotEmpty($values) {
-        $values: toList($values);
+      } @else if fn.isNotEmpty($values) {
+        $values: fn.toList($values);
         @each $value in $values {
           [#{ooPrefix()}-col~="#{$attribute-name}#{$value}#{$suffix}"] {
-            #{$prop-name}: call($prop-function, $value);
+            #{$prop-name}: meta.call($prop-function, $value);
           }
         }
       }
@@ -103,7 +108,7 @@
   }
 
   // reponsives classes starting from root
-  @each $class in join('rt', oo('column.screens')) {
+  @each $class in list.join('rt', oo('column.screens')) {
     @include breakpoint($class) {
       $suffix: '';
       @if $class != 'rt' {
@@ -121,13 +126,13 @@
       // columns
       @for $i from 1 through oo('column.system') {
         [#{ooPrefix()}-col~="span#{$i}#{$suffix}"] {
-          flex-basis: percentage($i / oo('column.system'));
-          max-width: percentage($i / oo('column.system'));
+          flex-basis: math.percentage(math.div($i, oo('column.system')));
+          max-width: math.percentage(math.div($i, oo('column.system')));
         }
       }
 
       @if oo('column.fit.use')
-        and (inList($class, toList(oo('column.fit.screens'))) or isEmpty($suffix)) {
+        and (fn.inList($class, fn.toList(oo('column.fit.screens'))) or fn.isEmpty($suffix)) {
         [#{ooPrefix()}-col~="fit#{$suffix}"] {
           min-width: auto;
           flex-grow: 0;
@@ -136,7 +141,7 @@
       }
 
       @if oo('column.alignment.use')
-        and (inList($class, toList(oo('column.alignment.screens'))) or isEmpty($suffix)) {
+        and (fn.inList($class, fn.toList(oo('column.alignment.screens'))) or fn.isEmpty($suffix)) {
         // horizontal alignment
         [#{ooPrefix()}-row~="align-left#{$suffix}"]   { justify-content: flex-start; }
         [#{ooPrefix()}-row~="align-center#{$suffix}"] { justify-content: center; }
@@ -151,7 +156,7 @@
       }
 
       @if oo('column.selfAlignment.use')
-        and (inList($class, toList(oo('column.selfAlignment.screens'))) or isEmpty($suffix)) {
+        and (fn.inList($class, fn.toList(oo('column.selfAlignment.screens'))) or fn.isEmpty($suffix)) {
         // horizontal alignment
         [#{ooPrefix()}-col~="self-align-left#{$suffix}"]   { margin-left: initial; margin-right: initial; }
         [#{ooPrefix()}-col~="self-align-center#{$suffix}"] { margin-left: auto; margin-right: auto; }
@@ -183,7 +188,7 @@
   }
 
   // Order
-  @if oo('column.order.use') and isNotEmpty(oo('column.order.screens')) {
+  @if oo('column.order.use') and fn.isNotEmpty(oo('column.order.screens')) {
     @include columnResponsiveAttribute('order', 'order', 'columnSetOrder');
   }
 
@@ -199,7 +204,7 @@
   }
 
   // gutter
-  @if isNotEmpty(oo('column.gutter')) {
+  @if fn.isNotEmpty(oo('column.gutter')) {
     [#{ooPrefix()}-row] > [#{ooPrefix()}-col] {
       background-clip: padding-box;
       border-left-style: solid;
@@ -207,12 +212,12 @@
     }
   }
 
-  @if isString(oo('column.gutter')) or isNumber(oo('column.gutter')) {
+  @if fn.isString(oo('column.gutter')) or fn.isNumber(oo('column.gutter')) {
     [#{ooPrefix()}-row] {
       $gutter-size: oo('column.gutter');
       @include columnGutterProps($gutter-size);
     }
-  } @else if isMap(oo('column.gutter')) and areKeysBreakpoints(oo('column.gutter')) {
+  } @else if fn.isMap(oo('column.gutter')) and areKeysBreakpoints(oo('column.gutter')) {
     [#{ooPrefix()}-row] {
       $gutter-size: oo('column.gutter');
       @each $key, $value in $gutter-size {
@@ -221,17 +226,17 @@
         }
       }
     }
-  } @else if isNotEmpty(oo('column.gutter.sizes')) {
+  } @else if fn.isNotEmpty(oo('column.gutter.sizes')) {
     @each $gutter-name, $gutter-size in oo('column.gutter.sizes') {
-      $selector: if(isEmpty($gutter-name) or $gutter-name == 'default', 'row', 'row~="gutter-#{$gutter-name}"');
+      $selector: if(fn.isEmpty($gutter-name) or $gutter-name == 'default', 'row', 'row~="gutter-#{$gutter-name}"');
       [#{ooPrefix()}-#{$selector}] {
-        @if (isMap($gutter-size)) {
+        @if (fn.isMap($gutter-size)) {
           @each $key, $value in $gutter-size {
             @include breakpoint($key) {
               @include columnGutterProps($value);
             }
           }
-        } @else if isString($gutter-size) or isNumber($gutter-size) {
+        } @else if fn.isString($gutter-size) or fn.isNumber($gutter-size) {
           @include columnGutterProps($gutter-size);
         }
       }
@@ -240,16 +245,16 @@
   }
 
   // vgutter
-  @if isNotEmpty(oo('column.gutter.vsizes')) {
+  @if fn.isNotEmpty(oo('column.gutter.vsizes')) {
     @each $gutter-name, $vgutter-size in oo('column.gutter.vsizes') {
-      $suffix: if(isEmpty($gutter-name) or $gutter-name == 'default', '', '-#{$gutter-name}');
-      @if (isMap($vgutter-size)) {
+      $suffix: if(fn.isEmpty($gutter-name) or $gutter-name == 'default', '', '-#{$gutter-name}');
+      @if (fn.isMap($vgutter-size)) {
         @each $key, $value in $vgutter-size {
           [#{ooPrefix()}-row~="vgutter#{$suffix}"] {
             @include columnVGutterProps($value);
           }
         }
-      } @else if isString($vgutter-size) or isNumber($vgutter-size) {
+      } @else if fn.isString($vgutter-size) or fn.isNumber($vgutter-size) {
         [#{ooPrefix()}-row~="vgutter#{$suffix}"] {
           @include columnVGutterProps($vgutter-size);
         }
@@ -266,7 +271,7 @@
     border: 0 !important;
   }
 
-  @if isNotEmpty(oo('column.variants')) {
+  @if fn.isNotEmpty(oo('column.variants')) {
     @include generateComponentVariants('col', oo('column.variants'));
   }
 }