oo-loop 0.5.1 → 0.6.0

package/scss/utilities/_list.scss

@@ -1,15 +1,10 @@
 @use 'sass:math';
+@use '../variables' as v;
 
 /**
  * List
  */
 
-$list-inline-spacing: 1em !default;
-$list-divide-spacing: $list-inline-spacing !default;
-$list-divide-size: 1.2em !default;
-$list-divide-affix: '|' !default;
-$list-divide-affix-color: #cdcdcd !default;
-
 ul,
 ol {
   &.list-center {
@@ -35,7 +30,7 @@ ol {
       margin-bottom: 0;
       display: inline-block;
       &:not(:last-child) {
-        margin-right: $list-inline-spacing;
+        margin-right: v.$list-inline-spacing;
       }
     }
   }
@@ -52,18 +47,18 @@ ol {
       align-items: center;
 
       &:not(:last-child)::after {
-        padding-left: math.div($list-divide-spacing, 2);
-        padding-right: math.div($list-divide-spacing, 2);
+        padding-left: math.div(v.$list-divide-spacing, 2);
+        padding-right: math.div(v.$list-divide-spacing, 2);
 
         display: inline-block;
-        content: $list-divide-affix;
-        color: $list-divide-affix-color;
-        font-size: $list-divide-size;
+        content: v.$list-divide-affix;
+        color: v.$list-divide-affix-color;
+        font-size: v.$list-divide-size;
       }
       &:last-child::after {
         display: inline-block;
-        content: $list-divide-affix;
-        font-size: $list-divide-size;
+        content: v.$list-divide-affix;
+        font-size: v.$list-divide-size;
         visibility: hidden;
       }
     }

package/scss/utilities/_spacing.scss

@@ -1,69 +1,58 @@
+@use 'sass:list';
+@use 'sass:map';
 @use 'sass:math';
+@use '../variables' as v;
+@use '../functions/array';
+@use '../mixins/loop';
 
 /**
  * Spacing
  */
-$spacing-ratio: 0.1; // with 62.5% on root 10px = 1rem;
 
 // vertical spacing
-$use-v-spacing: true !default;
-$v-spacing-from: 0 !default;
-$v-spacing-to:   50 !default;
-$v-spacing-step: 5 !default;
-$v-spacing-addon: () !default;
-$v-spacing-breakpoints-classes: () !default;
-
 // set default spacing
 $v-spacing: ();
-@for $i from $v-spacing-from through math.ceil(math.div($v-spacing-to, $v-spacing-step)) {
-  $v-spacing: map-merge($v-spacing, (#{$i*$v-spacing-step}: #{$i*$v-spacing-step * $spacing-ratio}rem));
+@for $i from v.$v-spacing-from through math.ceil(math.div(v.$v-spacing-to, v.$v-spacing-step)) {
+  $v-spacing: map.merge($v-spacing, (#{$i*v.$v-spacing-step}: #{$i*v.$v-spacing-step * v.$spacing-ratio}rem));
 }
 
 // check if any custom sizes have been required
 $v-spacing-addons: ();
-@if length($v-spacing-addon) > 0 {
-  @each $value in $v-spacing-addon {
-    $spacing_value: if($value == auto, auto, #{$value * $spacing-ratio}rem);
-    $v-spacing-addons: map-merge($v-spacing-addons, (#{$value}: $spacing_value));
+@if list.length(v.$v-spacing-addon) > 0 {
+  @each $value in v.$v-spacing-addon {
+    $spacing_value: if($value == auto, auto, #{$value * v.$spacing-ratio}rem);
+    $v-spacing-addons: map.merge($v-spacing-addons, (#{$value}: $spacing_value));
   }
 }
 
-@if ($use-v-spacing) {
-  $v-spacings: mergeArray($v-spacing, $v-spacing-addons);
-  @include loop($v-spacings, 'margin-top', '.mt', true);
-  @include loopBreakpoints($v-spacing-breakpoints-classes, $v-spacings, 'margin-top', '.mt', true);
-  @include loop($v-spacings, 'margin-bottom', '.mb', true);
-  @include loopBreakpoints($v-spacing-breakpoints-classes, $v-spacings, 'margin-bottom', '.mb', true);
+@if (v.$use-v-spacing) {
+  $v-spacings: array.mergeArray($v-spacing, $v-spacing-addons);
+  @include loop.loop($v-spacings, 'margin-top', '.mt', true);
+  @include loop.loopBreakpoints(v.$v-spacing-breakpoints-classes, $v-spacings, 'margin-top', '.mt', true);
+  @include loop.loop($v-spacings, 'margin-bottom', '.mb', true);
+  @include loop.loopBreakpoints(v.$v-spacing-breakpoints-classes, $v-spacings, 'margin-bottom', '.mb', true);
 }
 
 // horizontal spacing
-
-$use-h-spacing: true !default;
-$h-spacing-from: 0 !default;
-$h-spacing-to:   25 !default;
-$h-spacing-step: 5 !default;
-$h-spacing-addon: () !default;
-$h-spacing-breakpoints-classes: () !default;
-
 // set default spacing
 $h-spacing: ();
-@for $i from $h-spacing-from through math.ceil(math.div($h-spacing-to, $h-spacing-step)) {
-  $h-spacing: map-merge($h-spacing, (#{$i*$h-spacing-step}: #{$i*$h-spacing-step * $spacing-ratio}rem));
+@for $i from v.$h-spacing-from through math.ceil(math.div(v.$h-spacing-to, v.$h-spacing-step)) {
+  $h-spacing: map.merge($h-spacing, (#{$i*v.$h-spacing-step}: #{$i*v.$h-spacing-step * v.$spacing-ratio}rem));
 }
 
 // check if any custom sizes have been required
 $h-spacing-addons: ();
-@if length($h-spacing-addon) > 0 {
-  @each $value in $h-spacing-addon {
-    $spacing_value: if($value == auto, auto, #{$value * $spacing-ratio}rem);
-    $h-spacing-addons: map-merge($h-spacing-addons, (#{$value}: $spacing_value));
+@if list.length(v.$h-spacing-addon) > 0 {
+  @each $value in v.$h-spacing-addon {
+    $spacing_value: if($value == auto, auto, #{$value * v.$spacing-ratio}rem);
+    $h-spacing-addons: map.merge($h-spacing-addons, (#{$value}: $spacing_value));
   }
 }
 
-@if ($use-h-spacing) {
-  $h-spacings: mergeArray($h-spacing, $h-spacing-addons);
-  @include loop($h-spacings, 'margin-left', '.ml', true);
-  @include loopBreakpoints($h-spacing-breakpoints-classes, $h-spacings, 'margin-left', '.ml', true);
-  @include loop($h-spacings, 'margin-right', '.mr', true);
-  @include loopBreakpoints($h-spacing-breakpoints-classes, $h-spacings, 'margin-right', '.mr', true);
+@if (v.$use-h-spacing) {
+  $h-spacings: array.mergeArray($h-spacing, $h-spacing-addons);
+  @include loop.loop($h-spacings, 'margin-left', '.ml', true);
+  @include loop.loopBreakpoints(v.$h-spacing-breakpoints-classes, $h-spacings, 'margin-left', '.ml', true);
+  @include loop.loop($h-spacings, 'margin-right', '.mr', true);
+  @include loop.loopBreakpoints(v.$h-spacing-breakpoints-classes, $h-spacings, 'margin-right', '.mr', true);
 }

package/scss/utilities/_text.scss

@@ -1,3 +1,6 @@
+@use '../variables' as v;
+@use '../mixins/loop';
+
 /**
  * Text utilites
  *
@@ -8,101 +11,53 @@
 /**
  * Text Sizes
  */
-$text-sizes: (
-  'large': 2rem,
-  'small': 1.4rem,
-  'tiny': 1.2rem,
-) !default;
-$text-sizes-breakpoints-classes: () !default;
-$text-sizes-is-important: true !default;
-
-@include loop($text-sizes, 'font-size', '.text', $text-sizes-is-important);
-@include loopBreakpoints($text-sizes-breakpoints-classes, $text-sizes, 'font-size', '.text', $text-sizes-is-important);
+@include loop.loop(v.$text-sizes, 'font-size', '.text', v.$text-sizes-is-important);
+@include loop.loopBreakpoints(v.$text-sizes-breakpoints-classes, v.$text-sizes, 'font-size', '.text', v.$text-sizes-is-important);
 
 
 /**
  * Text alignements
  */
-$text-alignments: (
-  'left',
-  'right',
-  'center',
-) !default;
-$text-alignments-breakpoints-classes: () !default;
-$text-alignments-is-important: false !default;
-
-@include loop($text-alignments, 'text-align', '.text', $text-alignments-is-important);
-@include loopBreakpoints($text-alignments-breakpoints-classes, $text-alignments, 'text-align', '.text', $text-alignments-is-important);
+@include loop.loop(v.$text-alignments, 'text-align', '.text', v.$text-alignments-is-important);
+@include loop.loopBreakpoints(v.$text-alignments-breakpoints-classes, v.$text-alignments, 'text-align', '.text', v.$text-alignments-is-important);
 
 
 /**
  * Text Transform
  */
-$text-transforms: (
-  'uppercase',
-) !default;
-$text-transforms-breakpoints-classes: () !default;
-$text-transforms-is-important: false !default;
-@include loop($text-transforms, 'text-transform', '.text', $text-transforms-is-important);
-@include loopBreakpoints($text-transforms-breakpoints-classes, $text-transforms, 'text-transform', '.text', $text-transforms-is-important);
+@include loop.loop(v.$text-transforms, 'text-transform', '.text', v.$text-transforms-is-important);
+@include loop.loopBreakpoints(v.$text-transforms-breakpoints-classes, v.$text-transforms, 'text-transform', '.text', v.$text-transforms-is-important);
 
 
 /**
  * Text Decoration
  */
-$text-decorations: () !default;
-$text-decorations-breakpoints-classes: () !default;
-$text-decorations-is-important: false !default;
-@include loop($text-decorations, 'text-decoration', '.text', $text-decorations-is-important);
-@include loopBreakpoints($text-decorations-breakpoints-classes, $text-decorations, 'text-decoration', '.text', $text-decorations-is-important);
+@include loop.loop(v.$text-decorations, 'text-decoration', '.text', v.$text-decorations-is-important);
+@include loop.loopBreakpoints(v.$text-decorations-breakpoints-classes, v.$text-decorations, 'text-decoration', '.text', v.$text-decorations-is-important);
 
 /**
  * Letter Spacing
  */
-$letter-spacings: (
-  'narrow': -.05rem,
-  'wide': .05rem,
-) !default;
-$letter-spacings-breakpoints-classes: () !default;
-$letter-spacings-is-important: false !default;
-@include loop($letter-spacings, 'letter-spacing', '.letter-spacing', $letter-spacings-is-important);
-@include loopBreakpoints($letter-spacings-breakpoints-classes, $letter-spacings, 'letter-spacing', '.letter-spacing', $letter-spacings-is-important);
+@include loop.loop(v.$letter-spacings, 'letter-spacing', '.letter-spacing', v.$letter-spacings-is-important);
+@include loop.loopBreakpoints(v.$letter-spacings-breakpoints-classes, v.$letter-spacings, 'letter-spacing', '.letter-spacing', v.$letter-spacings-is-important);
 
 
 
 /**
  * Font Style
  */
-$font-styles: (
-  'italic',
-) !default;
-$font-styles-breakpoints-classes: () !default;
-$font-styles-is-important: false !default;
-@include loop($font-styles, 'font-style', '.font', $font-styles-is-important);
-@include loopBreakpoints($font-styles-breakpoints-classes, $font-styles, 'font-style', '.font', $font-styles-is-important);
+@include loop.loop(v.$font-styles, 'font-style', '.font', v.$font-styles-is-important);
+@include loop.loopBreakpoints(v.$font-styles-breakpoints-classes, v.$font-styles, 'font-style', '.font', v.$font-styles-is-important);
 
 /**
  * Font Weight
  */
-$font-weights: (
-  'light': 300, // font-weight-light
-  'bold': 700, // font-weight-bold
-) !default;
-$font-weights-breakpoints-classes: () !default;
-$font-weights-is-important: false !default;
-@include loop($font-weights, 'font-weight', '.font', $font-weights-is-important);
-@include loopBreakpoints($font-weights-breakpoints-classes, $font-weights, 'font-weight', '.font', $font-weights-is-important);
+@include loop.loop(v.$font-weights, 'font-weight', '.font', v.$font-weights-is-important);
+@include loop.loopBreakpoints(v.$font-weights-breakpoints-classes, v.$font-weights, 'font-weight', '.font', v.$font-weights-is-important);
 
 
 /**
  * Font Family
  */
-$font-family-secondary: 'Georgia', times, serif !default;
-$font-families: (
-  'primary': $font-family-base,
-  'secondary': $font-family-secondary,
-) !default;
-$font-families-breakpoints-classes: () !default;
-$font-families-is-important: false !default;
-@include loop($font-families, 'font-family', '.font', $font-families-is-important);
-@include loopBreakpoints($font-families-breakpoints-classes, $font-families, 'font-family', '.font', $font-families-is-important);
+@include loop.loop(v.$font-families, 'font-family', '.font', v.$font-families-is-important);
+@include loop.loopBreakpoints(v.$font-families-breakpoints-classes, v.$font-families, 'font-family', '.font', v.$font-families-is-important);

package/scss/utilities/_visibility.scss

@@ -1,10 +1,11 @@
+@use '../variables' as v;
+@use '../mixins/breakpoint';
+@use '../functions/empty';
+
 /**
  * Visibility Utilities
  */
 
-$visibility-breakpoints-classes: $breakpoints-classes !default;
-$visibility-pointbreaks-classes: $pointbreaks-classes !default;
-
 .hidden { display: none !important; }
 
 .hidden\@print {
@@ -14,17 +15,17 @@ $visibility-pointbreaks-classes: $pointbreaks-classes !default;
   @media screen { display: none !important; }
 }
 
-@if isNotEmpty($visibility-breakpoints-classes) {
-  @each $class in $visibility-breakpoints-classes {
-      @include breakpoint($class) {
+@if empty.isNotEmpty(v.$visibility-breakpoints-classes) {
+  @each $class in v.$visibility-breakpoints-classes {
+      @include breakpoint.from($class) {
           .hidden\@#{$class} { display: none !important; }
       }
   }
 }
 
-@if isNotEmpty($visibility-pointbreaks-classes) {
-  @each $class in $visibility-pointbreaks-classes {
-    @include pointbreak($class) {
+@if empty.isNotEmpty(v.$visibility-pointbreaks-classes) {
+  @each $class in v.$visibility-pointbreaks-classes {
+    @include breakpoint.to($class) {
       .hidden\!\@#{$class} { display: none !important; }
     }
   }

package/scss/utilities/_wrapper.scss

@@ -1,13 +1,8 @@
+@use '../variables' as v;
+@use '../mixins/loop';
+
 /**
  * Wrapper
  */
-
-$wrapper-padding-sizes: (
-  'tiny': .8rem,
-  'small': 1.6rem,
-  'medium': 2.4rem,
-) !default;
-$wrapper-breakpoints-classes: () !default;
-
-@include loop($wrapper-padding-sizes, 'padding', '.wrapper');
-@include loopBreakpoints($wrapper-breakpoints-classes, $wrapper-padding-sizes, 'padding', '.wrapper');
+@include loop.loop(v.$wrapper-padding-sizes, 'padding', '.wrapper');
+@include loop.loopBreakpoints(v.$wrapper-breakpoints-classes, v.$wrapper-padding-sizes, 'padding', '.wrapper');

package/scss/base/_all.scss

@@ -1,9 +0,0 @@
-/**
- * Import bases
- */
-
- @import
-  "normalize",
-  "base",
-  "type"
-;

package/scss/functions/_all.scss

@@ -1,9 +0,0 @@
-@import
-  'array',
-  'brightness',
-  'empty',
-  'map',
-  'replace',
-  'split',
-  'type'
-;

package/scss/mixins/_all.scss

@@ -1,7 +0,0 @@
-@import
-  'breakpoint',
-  'clearfix',
-  'font-smoothing',
-  'loop',
-  'triangle'
-;