oo-loop 1.0.0-beta.2 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +1 -1
  3. package/dist/loop.css +1 -1
  4. package/package.json +4 -4
  5. package/scss/_config.scss +55 -55
  6. package/scss/_init.scss +14 -14
  7. package/scss/components/_column.scss +4 -0
  8. package/scss/components/form/_input.scss +1 -1
  9. package/scss/functions/_map.scss +7 -6
  10. package/scss/mixins/_breakpoint.scss +1 -1
  11. package/scss/mixins/_component.scss +13 -6
  12. package/scss/mixins/_props.scss +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # Loop changelog
2
2
 
3
+ ## 1.0.2: 2022-04-04
4
+
5
+ ### Fixes
6
+ - Fix `pointbreak()` on rem unit
7
+ - Fix generating double properties when merging custom map with camelCase `props`
8
+ - Fix the lost of references when merging custom config on `init`
9
+ - Bump dependencies
10
+
11
+ ## 1.0.1 : 2020-07-30
12
+
13
+ - Add missing `states` properties in variants
14
+ - Fix rule to add any pseudo elements, states and pseudo-selectors from `props`
15
+ - Bump lodash from 4.17.15 to 4.17.19
16
+
17
+ ## 1.0.0
18
+
19
+ ### Changes
20
+ - Unify all `props` to use kebab-case css properties
21
+ - `dataAttr` is set to *false* by default, back to `oo-component` from start
22
+ - Form inputs components are not included by default except for `oo-input`
23
+
24
+ ### Features
25
+ - Add `variants` property to column
26
+ - Ability to generate variants component only from the config map
27
+
3
28
  ## 1.0.0-beta.2
4
29
 
5
30
  - Reset properly the column to auto on breakpoint `auto@sm` `auto@md` `auto@lg`
package/README.md CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  **Flexible and Expressive CSS**
10
10
 
11
- [Loop](https://oo-loop.github.io/) is a fully customizable Sass framework aiming to create a more maintainable and readable CSS.
11
+ [Loop](https://oo-loop.github.io/) is a fully customizable CSS framework built with Sass aiming to create a more maintainable and readable Code.
12
12
  It gives you complete control on your project to let you create and match your styles with your design needs.
13
13
 
14
14
  ## Installation
package/dist/loop.css CHANGED
@@ -1 +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}[data-oo-row]{position:relative;display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap;clear:both}[data-oo-col]{flex-shrink:0;flex-grow:1;flex-basis:0;min-width:0;max-width:100%}[data-oo-col~="span1"]{flex-basis:8.333333%;max-width:8.333333%}[data-oo-col~="span2"]{flex-basis:16.666667%;max-width:16.666667%}[data-oo-col~="span3"]{flex-basis:25%;max-width:25%}[data-oo-col~="span4"]{flex-basis:33.333333%;max-width:33.333333%}[data-oo-col~="span5"]{flex-basis:41.666667%;max-width:41.666667%}[data-oo-col~="span6"]{flex-basis:50%;max-width:50%}[data-oo-col~="span7"]{flex-basis:58.333333%;max-width:58.333333%}[data-oo-col~="span8"]{flex-basis:66.666667%;max-width:66.666667%}[data-oo-col~="span9"]{flex-basis:75%;max-width:75%}[data-oo-col~="span10"]{flex-basis:83.333333%;max-width:83.333333%}[data-oo-col~="span11"]{flex-basis:91.666667%;max-width:91.666667%}[data-oo-col~="span12"]{flex-basis:100%;max-width:100%}[data-oo-col~="fit"]{min-width:auto;flex-grow:0;flex-basis:auto}[data-oo-row~="align-left"]{justify-content:flex-start}[data-oo-row~="align-center"]{justify-content:center}[data-oo-row~="align-right"]{justify-content:flex-end}[data-oo-row~="align-evenly"]{justify-content:space-evenly}[data-oo-row~="align-between"]{justify-content:space-between}[data-oo-row~="valign-top"]{align-items:flex-start}[data-oo-row~="valign-middle"]{align-items:center}[data-oo-row~="valign-bottom"]{align-items:flex-end}[data-oo-col~="self-align-left"]{margin-left:initial;margin-right:initial}[data-oo-col~="self-align-center"]{margin-left:auto;margin-right:auto}[data-oo-col~="self-align-right"]{margin-left:auto;margin-right:initial}[data-oo-col~="self-valign-top"]{align-self:flex-start}[data-oo-col~="self-valign-middle"]{align-self:center}[data-oo-col~="self-valign-bottom"]{align-self:flex-end}@media (min-width: 37.5em){[data-oo-col~="auto@sm"]{flex-basis:0;flex-grow:1;min-width:0;max-width:100%}[data-oo-col~="span1@sm"]{flex-basis:8.333333%;max-width:8.333333%}[data-oo-col~="span2@sm"]{flex-basis:16.666667%;max-width:16.666667%}[data-oo-col~="span3@sm"]{flex-basis:25%;max-width:25%}[data-oo-col~="span4@sm"]{flex-basis:33.333333%;max-width:33.333333%}[data-oo-col~="span5@sm"]{flex-basis:41.666667%;max-width:41.666667%}[data-oo-col~="span6@sm"]{flex-basis:50%;max-width:50%}[data-oo-col~="span7@sm"]{flex-basis:58.333333%;max-width:58.333333%}[data-oo-col~="span8@sm"]{flex-basis:66.666667%;max-width:66.666667%}[data-oo-col~="span9@sm"]{flex-basis:75%;max-width:75%}[data-oo-col~="span10@sm"]{flex-basis:83.333333%;max-width:83.333333%}[data-oo-col~="span11@sm"]{flex-basis:91.666667%;max-width:91.666667%}[data-oo-col~="span12@sm"]{flex-basis:100%;max-width:100%}[data-oo-col~="fit@sm"]{min-width:auto;flex-grow:0;flex-basis:auto}}@media (min-width: 60em){[data-oo-col~="auto@md"]{flex-basis:0;flex-grow:1;min-width:0;max-width:100%}[data-oo-col~="span1@md"]{flex-basis:8.333333%;max-width:8.333333%}[data-oo-col~="span2@md"]{flex-basis:16.666667%;max-width:16.666667%}[data-oo-col~="span3@md"]{flex-basis:25%;max-width:25%}[data-oo-col~="span4@md"]{flex-basis:33.333333%;max-width:33.333333%}[data-oo-col~="span5@md"]{flex-basis:41.666667%;max-width:41.666667%}[data-oo-col~="span6@md"]{flex-basis:50%;max-width:50%}[data-oo-col~="span7@md"]{flex-basis:58.333333%;max-width:58.333333%}[data-oo-col~="span8@md"]{flex-basis:66.666667%;max-width:66.666667%}[data-oo-col~="span9@md"]{flex-basis:75%;max-width:75%}[data-oo-col~="span10@md"]{flex-basis:83.333333%;max-width:83.333333%}[data-oo-col~="span11@md"]{flex-basis:91.666667%;max-width:91.666667%}[data-oo-col~="span12@md"]{flex-basis:100%;max-width:100%}[data-oo-col~="fit@md"]{min-width:auto;flex-grow:0;flex-basis:auto}}@media (min-width: 80em){[data-oo-col~="auto@lg"]{flex-basis:0;flex-grow:1;min-width:0;max-width:100%}[data-oo-col~="span1@lg"]{flex-basis:8.333333%;max-width:8.333333%}[data-oo-col~="span2@lg"]{flex-basis:16.666667%;max-width:16.666667%}[data-oo-col~="span3@lg"]{flex-basis:25%;max-width:25%}[data-oo-col~="span4@lg"]{flex-basis:33.333333%;max-width:33.333333%}[data-oo-col~="span5@lg"]{flex-basis:41.666667%;max-width:41.666667%}[data-oo-col~="span6@lg"]{flex-basis:50%;max-width:50%}[data-oo-col~="span7@lg"]{flex-basis:58.333333%;max-width:58.333333%}[data-oo-col~="span8@lg"]{flex-basis:66.666667%;max-width:66.666667%}[data-oo-col~="span9@lg"]{flex-basis:75%;max-width:75%}[data-oo-col~="span10@lg"]{flex-basis:83.333333%;max-width:83.333333%}[data-oo-col~="span11@lg"]{flex-basis:91.666667%;max-width:91.666667%}[data-oo-col~="span12@lg"]{flex-basis:100%;max-width:100%}[data-oo-col~="fit@lg"]{min-width:auto;flex-grow:0;flex-basis:auto}}[data-oo-row~="stretch"]{align-items:stretch}[data-oo-row~="stretch"]>[data-oo-col]{display:flex}[data-oo-row~="stretch"]>[data-oo-col]>*{width:100%}[data-oo-row]>[data-oo-col]{background-clip:padding-box;border-left-style:solid;border-left-color:transparent}[data-oo-row]{left:-1rem;margin-bottom:-1rem;margin-right:-1rem}[data-oo-row]>[data-oo-col]{margin-bottom:1rem;border-left-width:1rem}@media (min-width: 37.5em){[data-oo-row]{left:-1.5rem;margin-bottom:-1.5rem;margin-right:-1.5rem}[data-oo-row]>[data-oo-col]{margin-bottom:1.5rem;border-left-width:1.5rem}}[data-oo-row~="gutter-less"]{left:-0;margin-bottom:-0;margin-right:-0}[data-oo-row~="gutter-less"]>[data-oo-col]{margin-bottom:0;border-left-width:0}[data-oo-col~="clear"]{margin:0 !important;flex-basis:100%;max-width:100%;border:0 !important}[data-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}[data-oo-button]:disabled{cursor:not-allowed}[data-oo-button]:hover{color:#333;background-color:#e6e6e6}[data-oo-button]:focus{color:#333;background-color:#e6e6e6}[data-oo-button]:active{background-color:#e0e0e0;box-shadow:inset 1px 1px 1px 0 #bfbfbf;outline:none}[data-oo-button]:disabled{opacity:.75}[data-oo-button~="primary"]{color:#fff;background-color:#28a6c7;border-color:#28a6c7}[data-oo-button~="primary"]:hover:not(:disabled),[data-oo-button~="primary"]:focus:not(:disabled){color:#fff;background-color:#1f839d;border-color:#1f839d}[data-oo-button~="primary"]:focus:not(:disabled){outline:none;box-shadow:0 0 3px 4px #33b4d6}[data-oo-button~="primary"]:active:not(:disabled){color:#fff;background-color:#1e7b94;box-shadow:inset 1px 1px 1px 0 #134d5d;outline:none;border-color:#1e7b94}[data-oo-button~="secondary"]{color:#fff;background-color:#959595;border-color:#959595}[data-oo-button~="secondary"]:hover:not(:disabled),[data-oo-button~="secondary"]:focus:not(:disabled){color:#fff;background-color:#7c7c7c;border-color:#7c7c7c}[data-oo-button~="secondary"]:focus:not(:disabled){outline:none;box-shadow:0 0 3px 4px #a2a2a2}[data-oo-button~="secondary"]:active:not(:disabled){color:#fff;background-color:#767676;box-shadow:inset 1px 1px 1px 0 #555;outline:none;border-color:#767676}[data-oo-button~="full"]{width:100%}label{margin-bottom:.1875rem;display:inline-block;font-weight:500;line-height:1.5}[data-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}[data-oo-input]:focus{outline:none;box-shadow:0 0 8px 0 rgba(170,170,170,0.25)}[data-oo-select]{position:relative;display:block}[data-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}[data-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%)}[data-oo-select]::before{width:40px}[data-oo-select]::after{right:15px;width:10px;height:10px}[data-oo-select]::after{border-bottom-width:2px;border-right-width:2px}[data-oo-select]::before{background-color:#fff}[data-oo-select]::after{border-bottom-color:#4d4d4d;border-right-color:#4d4d4d}[data-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}[data-oo-select]>select::-ms-expand{display:none}[data-oo-select]>select:focus{outline:none;box-shadow:0 0 8px 0 rgba(170,170,170,0.25)}[data-oo-select][class*="color-"]>select{color:inherit !important}[data-oo-select][class*="bg-"]>select{background-color:inherit !important}[data-oo-select][class*="border-"]>select,[data-oo-select][class*="border-"]::before{border-color:inherit !important}[data-oo-checkbox]{position:absolute;opacity:0;pointer-events:none}[data-oo-checkbox]+label{position:relative;display:flex;align-items:center;width:fit-content;font-weight:inherit;line-height:1.1}[data-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}[data-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)}[data-oo-checkbox]:checked+label::after{background-color:#4d4d4d;border:1px solid #4d4d4d}[data-oo-checkbox]+label::after{margin-right:.45rem;min-width:1.125rem;min-height:1.125rem}[data-oo-checkbox]+label+[data-oo-checkbox]+label{margin-top:.375rem}[data-oo-checkbox]:checked+label::before{min-width:.45rem;min-height:.675rem;border-right-width:.135rem;border-bottom-width:.135rem}[data-oo-checkbox][data-oo-checkbox~="inline"]+label:not(:last-child){margin-right:.9rem}[data-oo-checkbox~="inline"]+label{display:inline-flex}[data-oo-radio]{position:absolute;opacity:0;pointer-events:none}[data-oo-radio]+label{position:relative;display:flex;align-items:center;width:fit-content;font-weight:inherit;line-height:1.1}[data-oo-radio]+label::after{display:flex;order:-1;content:'';border-radius:50%;background-color:#fff;border:1px solid #d6d6d6}[data-oo-radio]:checked+label::before{position:absolute;top:0;left:0;content:'';border-radius:50%;background-color:#fff}[data-oo-radio]:checked+label::after{background-color:#4d4d4d;border-color:#4d4d4d;transition:background-color 250ms ease-out}[data-oo-radio]+label::after{margin-right:.5625rem;min-width:1.125rem;min-height:1.125rem}[data-oo-radio]+label+[data-oo-radio]+label{margin-top:.375rem}[data-oo-radio]:checked+label::before{top:calc(50% - .5625rem);min-width:1.125rem;min-height:1.125rem;transform:scale(0.4)}[data-oo-radio][data-oo-radio~="inline"]+label:not(:last-child){margin-right:.9rem}[data-oo-radio~="inline"]+label{display:inline-flex}.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}
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}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "oo-loop",
3
- "version": "1.0.0-beta.2",
4
- "description": "Loop framework, flexible and expressive CSS",
3
+ "version": "1.0.2",
4
+ "description": "Loop CSS framework, flexible and expressive CSS",
5
5
  "keywords": [
6
6
  "scss",
7
7
  "sass",
@@ -39,10 +39,10 @@
39
39
  "dev": "node-sass -r --output-style expanded --precision 6 src/index.scss dist/loop.css",
40
40
  "build": "node-sass --output-style compressed --precision 6 src/index.scss dist/loop.css",
41
41
  "watch": "npm run dev && npm run dev -- -w",
42
- "example": "node-sass --output-style expanded --source-comments false --precision 6 -w example/ -o example/build"
42
+ "example": "node-sass --output-style expanded --precision 6 example/src -o example/build"
43
43
  },
44
44
  "devDependencies": {
45
- "node-sass": "^4.13.1"
45
+ "node-sass": "^7.0.0"
46
46
  },
47
47
  "engines": {
48
48
  "node": ">= 6.0.0",
package/scss/_config.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  $ooLoop: (
2
- dataAttr: true,
2
+ dataAttr: false,
3
3
 
4
4
  breakpoints: (
5
5
  xs: 30em, // 480px
@@ -18,9 +18,9 @@ $ooLoop: (
18
18
 
19
19
  body: (
20
20
  props: (
21
- fontFamily: (-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif),
22
- fontSize: 1em, // 16px
23
- lineHeight: 1.375,
21
+ font-family: (-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif),
22
+ font-size: 1em, // 16px
23
+ line-height: 1.375,
24
24
  color: #444,
25
25
  ),
26
26
  smoothing: true,
@@ -28,9 +28,9 @@ $ooLoop: (
28
28
 
29
29
  headings: (
30
30
  props: (
31
- marginTop: .67em,
32
- marginBottom: .45em,
33
- lineHeight: 1.125,
31
+ margin-top: .67em,
32
+ margin-bottom: .45em,
33
+ line-height: 1.125,
34
34
  ),
35
35
  sizes: (
36
36
  h1: 2rem,
@@ -45,15 +45,15 @@ $ooLoop: (
45
45
 
46
46
  paragraph: (
47
47
  props: (
48
- marginTop: .5em,
49
- marginBottom: 1.125em,
48
+ margin-top: .5em,
49
+ margin-bottom: 1.125em,
50
50
  )
51
51
  ),
52
52
 
53
53
  anchor: (
54
54
  props: (
55
55
  color: this('palette.primary'),
56
- textDecoration: none,
56
+ text-decoration: none,
57
57
  ),
58
58
  states: (
59
59
  hover: (
@@ -65,9 +65,9 @@ $ooLoop: (
65
65
 
66
66
  list: (
67
67
  props: (
68
- marginTop: .5em,
69
- marginBottom: 1.125em,
70
- paddingLeft: 1.1em,
68
+ margin-top: .5em,
69
+ margin-bottom: 1.125em,
70
+ padding-left: 1.1em,
71
71
  ),
72
72
  inlineSpacing: 1em,
73
73
  ),
@@ -75,7 +75,7 @@ $ooLoop: (
75
75
  hr: (
76
76
  props:(
77
77
  margin: 1rem auto,
78
- borderBottom: 1px solid #cdcdcd,
78
+ border-bottom: 1px solid #cdcdcd,
79
79
  )
80
80
  ),
81
81
 
@@ -246,23 +246,23 @@ $ooLoop: (
246
246
  button: (
247
247
  props: (
248
248
  padding: .438em 1.2em,
249
- fontSize: rem(14),
250
- fontWeight: bold,
251
- lineHeight: 1.45,
249
+ font-size: rem(14),
250
+ font-weight: bold,
251
+ line-height: 1.45,
252
252
  color: #333,
253
- backgroundColor: #fff,
253
+ background-color: #fff,
254
254
  border: 1px solid #cecece,
255
- borderRadius: .2em,
255
+ border-radius: .2em,
256
256
  ),
257
257
  states: (
258
258
  hover: (
259
259
  color: this('button.props.color'),
260
- backgroundColor: ooDarken(this('button.props.backgroundColor'), 10%),
260
+ background-color: ooDarken(this('button.props.backgroundColor'), 10%),
261
261
  ),
262
262
  focus: this('button.states.hover'),
263
263
  active: (
264
- backgroundColor: ooDarken(this('button.props.backgroundColor'), 12%),
265
- boxShadow: inset 1px 1px 1px 0 ooDarken(this('button.props.backgroundColor'), 25%),
264
+ background-color: ooDarken(this('button.props.backgroundColor'), 12%),
265
+ box-shadow: inset 1px 1px 1px 0 ooDarken(this('button.props.backgroundColor'), 25%),
266
266
  outline: none,
267
267
  ),
268
268
  disabled: (
@@ -280,10 +280,10 @@ $ooLoop: (
280
280
 
281
281
  label: (
282
282
  props: (
283
- marginBottom: rem(3),
283
+ margin-bottom: rem(3),
284
284
  display: inline-block,
285
- fontWeight: 500,
286
- lineHeight: 1.5
285
+ font-weight: 500,
286
+ line-height: 1.5
287
287
  )
288
288
  ),
289
289
 
@@ -292,18 +292,18 @@ $ooLoop: (
292
292
  padding: .5em .625em,
293
293
  display: block,
294
294
  width: 100%,
295
- minHeight: 2.5em,
295
+ min-height: 2.5em,
296
296
  color: #4d4d4d,
297
- fontSize: 1rem,
298
- lineHeight: 1.15,
299
- backgroundColor: #fff,
297
+ font-size: 1rem,
298
+ line-height: 1.15,
299
+ background-color: #fff,
300
300
  border: 1px solid #d6d6d6,
301
- borderRadius: .2em,
301
+ border-radius: .2em,
302
302
  ),
303
303
  states: (
304
304
  focus: (
305
305
  outline: none,
306
- boxShadow: 0 0 8px 0 rgba(#aaa, .25),
306
+ box-shadow: 0 0 8px 0 rgba(#aaa, .25),
307
307
  ),
308
308
  ),
309
309
  variants: (),
@@ -322,15 +322,15 @@ $ooLoop: (
322
322
  ),
323
323
  checkbox: (
324
324
  props: (
325
- backgroundColor: #fff,
325
+ background-color: #fff,
326
326
  border: 1px solid #d6d6d6,
327
- borderRadius: .2em,
327
+ border-radius: .2em,
328
328
  transition: background-color 250ms ease-out,
329
329
  ),
330
330
  checked: (
331
331
  markColor: #fff,
332
332
  props: (
333
- backgroundColor: #4d4d4d,
333
+ background-color: #4d4d4d,
334
334
  border: 1px solid #4d4d4d,
335
335
  )
336
336
  ),
@@ -341,14 +341,14 @@ $ooLoop: (
341
341
  ),
342
342
  radio: (
343
343
  props: (
344
- backgroundColor: #fff,
344
+ background-color: #fff,
345
345
  border: 1px solid #d6d6d6,
346
346
  ),
347
347
  checked: (
348
348
  markColor: #fff,
349
349
  props: (
350
- backgroundColor: #4d4d4d,
351
- borderColor: #4d4d4d,
350
+ background-color: #4d4d4d,
351
+ border-color: #4d4d4d,
352
352
  transition: background-color 250ms ease-out,
353
353
  )
354
354
  ),
@@ -360,20 +360,20 @@ $ooLoop: (
360
360
  toggle: (
361
361
  props: (
362
362
  border: 1px solid #d6d6d6,
363
- borderRadius: 50em,
364
- backgroundColor: #d6d6d6,
363
+ border-radius: 50em,
364
+ background-color: #d6d6d6,
365
365
  transition: (background-color 300ms ease-in-out, border-color 300ms ease-in-out),
366
366
  ),
367
367
  toggler: (
368
- borderRadius: 50%,
369
- backgroundColor: #fff,
370
- boxShadow: 1px 1px 2px 0 rgba(#4d4d4d, 0.3),
368
+ border-radius: 50%,
369
+ background-color: #fff,
370
+ box-shadow: 1px 1px 2px 0 rgba(#4d4d4d, 0.3),
371
371
  transition: transform 300ms ease-out,
372
372
  ),
373
373
  checked: (
374
374
  props: (
375
- borderColor: #4d4d4d,
376
- backgroundColor: this('toggle.checked.props.borderColor'),
375
+ border-color: #4d4d4d,
376
+ background-color: this('toggle.checked.props.borderColor'),
377
377
  )
378
378
  ),
379
379
  sizes: (
@@ -386,7 +386,7 @@ $ooLoop: (
386
386
  misc: (
387
387
  'responsive': (
388
388
  props: (
389
- maxWidth: 100%,
389
+ max-width: 100%,
390
390
  height: auto,
391
391
  )
392
392
  ),
@@ -396,19 +396,19 @@ $ooLoop: (
396
396
  base: true,
397
397
  headings: true,
398
398
  content: true,
399
-
400
- form: (
401
- textfield: true,
402
- select: true,
403
- checkbox: true,
404
- radio: true,
405
- toggle: false,
406
- ),
407
399
 
408
400
  column: true,
409
401
  template: true,
410
402
  button: true,
411
403
 
404
+ form: (
405
+ input: true,
406
+ select: false,
407
+ checkbox: false,
408
+ radio: false,
409
+ toggle: false,
410
+ ),
411
+
412
412
  container: true,
413
413
  visibility: true,
414
414
  list: true,
@@ -416,9 +416,9 @@ $ooLoop: (
416
416
 
417
417
  utilities: (
418
418
  color: true,
419
- float: true,
420
- spacing: true,
421
419
  typo: true,
420
+ spacing: true,
421
+ float: true,
422
422
  wrapper: true,
423
423
  ),
424
424
  )
package/scss/_init.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  /// @param bool $use-name-as-param Use the name as parameter in settings
5
5
 
6
6
  @mixin initElement($name, $settings, $use-name-as-param: true) {
7
- $ooLoop: ooAdd('include', $name) !global;
7
+ // $ooLoop: ooAdd('include', $name) !global; // for styleguide
8
8
  @if $settings != null {
9
9
  $map: mapMergeDeep($ooLoop, if($use-name-as-param, (#{$name}: $settings), $settings));
10
10
  $ooLoop: if(hasRef($map), ooParse($map), $map) !global;
@@ -15,11 +15,11 @@
15
15
  /// Init ooLoop configs
16
16
 
17
17
  @mixin ooInit($custom:null) {
18
- $map: if(hasRef($ooLoop), ooParse($ooLoop), $ooLoop);
18
+ $map: $ooLoop;
19
19
  @if isMap($custom) and isNotEmpty($custom) {
20
20
  $map: mapMergeDeep($map, $custom);
21
- $map: if(hasRef($map), ooParse($map), $map);
22
21
  }
22
+ $map: if(hasRef($map), ooParse($map), $map);
23
23
  $map: setMapValue($map, 'init', true);
24
24
  $ooLoop: $map !global;
25
25
  }
@@ -49,20 +49,20 @@
49
49
  @if oo('use.button') {
50
50
  @include Button;
51
51
  }
52
- @if oo('use.form.textfield') {
52
+ @if oo('use.form.input') or oo('use.form') == true {
53
53
  @include Label;
54
- @include TextField;
54
+ @include InputField;
55
55
  }
56
- @if oo('use.form.select') {
56
+ @if oo('use.form.select') or oo('use.form') == true {
57
57
  @include SelectField;
58
58
  }
59
- @if oo('use.form.checkbox') {
59
+ @if oo('use.form.checkbox') or oo('use.form') == true {
60
60
  @include Checkbox;
61
61
  }
62
- @if oo('use.form.radio') {
62
+ @if oo('use.form.radio') or oo('use.form') == true {
63
63
  @include Radio;
64
64
  }
65
- @if oo('use.form.toggle') {
65
+ @if oo('use.form.toggle') or oo('use.form') == true {
66
66
  @include Toggle;
67
67
  }
68
68
  @if oo('use.container') {
@@ -77,19 +77,19 @@
77
77
  @if (oo('use.misc')) {
78
78
  @include Misc;
79
79
  }
80
- @if oo('use.utilities.color') {
80
+ @if oo('use.utilities.color') or oo('use.utilities') == true {
81
81
  @include Color;
82
82
  }
83
- @if oo('use.utilities.typo') {
83
+ @if oo('use.utilities.typo') or oo('use.utilities') == true {
84
84
  @include Typography;
85
85
  }
86
- @if oo('use.utilities.float') {
86
+ @if oo('use.utilities.float') or oo('use.utilities') == true {
87
87
  @include Float;
88
88
  }
89
- @if oo('use.utilities.spacing') {
89
+ @if oo('use.utilities.spacing') or oo('use.utilities') == true {
90
90
  @include Spacing;
91
91
  }
92
- @if oo('use.utilities.wrapper') {
92
+ @if oo('use.utilities.wrapper') or oo('use.utilities') == true {
93
93
  @include Wrapper;
94
94
  }
95
95
  @if oo('utilities') {
package/scss/components/_column.scss CHANGED
@@ -265,4 +265,8 @@
265
265
  max-width: 100%;
266
266
  border: 0 !important;
267
267
  }
268
+
269
+ @if isNotEmpty(oo('column.variants')) {
270
+ @include generateComponentVariants('col', oo('column.variants'));
271
+ }
268
272
  }
package/scss/components/form/_input.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  }
10
10
  }
11
11
 
12
- @mixin TextField($param: null) {
12
+ @mixin InputField($param: null) {
13
13
  @include initElement('input', $param);
14
14
 
15
15
  [#{ooPrefix()}-input] {
package/scss/functions/_map.scss CHANGED
@@ -21,11 +21,11 @@
21
21
  /// @credit-to https://gist.github.com/pentzzsolt
22
22
  /// @param map $parentMap Map of data to be merged into
23
23
  /// @param map $childMap The set of data
24
- /// @param map $refMap The base map to refer too,
25
- /// usually equivalent to the $ooLoop before going into nested merge
24
+ /// @param map $refMap The base map to refer too, usually equivalent to the $ooLoop before going into nested merge
25
+ /// @param bool $forceKebab force the use of kebab-case property
26
26
  /// @return map
27
27
 
28
- @function mapMergeDeep($parentMap, $childMap, $refMap:null) {
28
+ @function mapMergeDeep($parentMap, $childMap, $refMap:null, $forceKebab: false) {
29
29
  $map: $parentMap;
30
30
  @if not isMap($map) {
31
31
  @return $map;
@@ -33,15 +33,16 @@
33
33
 
34
34
  $refMap: if($refMap == null, $ooLoop, $refMap);
35
35
 
36
- @each $key, $value in $childMap {
36
+ @each $key, $value in $childMap {
37
+ $key: if($forceKebab, toKebabCase($key), $key);
37
38
  @if isRef(map-get($map, $key)) {
38
39
  $mapValue: getRefValue(map-get($map, $key), $refMap);
39
40
  $map: map-merge($map, ($key: $mapValue));
40
41
  }
41
42
  @if (not map-has-key($map, $key)) or (type-of(map-get($map, $key) ) != type-of($value)) or (not (isMap(map-get($map, $key)) and isMap($value))) {
42
- $map: map-merge($map, ($key: $value));
43
+ $map: map-merge($map, ($key: $value));
43
44
  } @else {
44
- $map: map-merge($map, ($key: mapMergeDeep(map-get($map, $key), $value, $refMap)));
45
+ $map: map-merge($map, ($key: mapMergeDeep(map-get($map, $key), $value, $refMap, inList($key, ('props', 'states')))));
45
46
  }
46
47
  }
47
48
  @return $map;
package/scss/mixins/_breakpoint.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  @if map-has-key(oo('breakpoints'), $key) {
16
16
  $minWidth: map-get(oo('breakpoints'), $key);
17
17
  $maxWidth: $minWidth - 1;
18
- @if unit($minWidth) == 'em' or unit('rem') {
18
+ @if inList(unit($minWidth), ('em', 'rem')) {
19
19
  $maxWidth: $minWidth - 0.001;
20
20
  }
21
21
  @media (max-width: $maxWidth) {
package/scss/mixins/_component.scss CHANGED
@@ -36,7 +36,13 @@
36
36
  @if isNotEmpty($variantsMap) {
37
37
  @each $name, $props in $variantsMap {
38
38
  @if isMap($props) {
39
+ $hasStates: if(map-has-key($props, 'states'), map-get($props, 'states'), null);
39
40
  [#{ooPrefix()}-#{$componentName}~="#{toKebabCase($name)}"] {
41
+ @if map-has-key($props, 'states') {
42
+ $states: map-get($props, 'states');
43
+ $props: map-remove($props, 'states');
44
+ @include generateStatesProperties($states);
45
+ }
40
46
  @include generateProperties($props);
41
47
  }
42
48
  }
@@ -46,19 +52,20 @@
46
52
 
47
53
 
48
54
  /// Generate Component
49
- /// @param $componentMap
55
+ /// @param $componentMap
50
56
 
51
57
  @mixin generateComponent($componentMap) {
52
58
  $name: if(map-has-key($componentMap, 'name'), toKebabCase(map-get($componentMap, 'name')), null);
53
- $props: if(map-has-key($componentMap, 'props'), map-get($componentMap, 'props'), null);
59
+ $hasProps: if(map-has-key($componentMap, 'props') or map-has-key($componentMap, 'states'), true, false);
60
+ $variants: if(map-has-key($componentMap, 'variants'), map-get($componentMap, 'variants'), null);
54
61
 
55
- @if isNotEmpty($name) and isNotEmpty($props) {
62
+ @if isNotEmpty($name) and $hasProps {
56
63
  [#{ooPrefix()}-#{$name}] {
57
64
  @include generateStyles($componentMap);
58
65
  }
59
- @if map-has-key($componentMap, 'variants') {
60
- @include generateComponentVariants($name, map-get($componentMap, 'variants'));
61
- }
66
+ }
67
+ @if isNotEmpty($name) and isNotEmpty($variants) {
68
+ @include generateComponentVariants($name, $variants);
62
69
  }
63
70
  }
64
71
 
package/scss/mixins/_props.scss CHANGED
@@ -7,8 +7,8 @@
7
7
  @each $propertyName, $propertyValue in $propertiesMap {
8
8
  $propertyName: toKebabCase($propertyName);
9
9
 
10
- @if inList($propertyName, ('before', 'after')) {
11
- &::#{$propertyName} {
10
+ @if isString($propertyName) and str-slice($propertyName,1,1) == ':' {
11
+ &#{$propertyName} {
12
12
  @include generateProperties($propertyValue);
13
13
  }
14
14
  } @else if isMap($propertyValue) and areKeysBreakpoints($propertyValue) {