oo-loop 0.5.1 → 0.6.1

package/scss/components/form/_select.scss

@@ -1,52 +1,44 @@
+@use 'sass:map';
+@use '../../variables' as v;
+@use '../../functions' as fn;
+@use 'mixin' as m;
+
 /**
  * Select
  */
 
-$select-size:    10px !default;
-$select-weight:  2px !default;
-$select-color:   $input-color !default;
-$select-bgcolor: $input-bgcolor !default;
-
-$select-themes: (
-// 'plain' : (
-//     'size' : $select-size,
-//     'color': $select-bgcolor,
-//     'bgcolor': $input-border-color,
-// )
-) !default;
-
 @mixin selectTheme($theme) {
-  @if map-has-key($theme, 'size') {
-    &::before { width: (map-get($theme, 'size') * 3); }
+  @if map.has-key($theme, 'size') {
+    &::before { width: (map.get($theme, 'size') * 3); }
     &::after {
-      right: map-get($theme, 'size');
-      width: map-get($theme, 'size');
-      height: map-get($theme, 'size');
+      right: map.get($theme, 'size');
+      width: map.get($theme, 'size');
+      height: map.get($theme, 'size');
     }
   }
-  @if map-has-key($theme, 'weight') {
+  @if map.has-key($theme, 'weight') {
     &::after {
-      border-bottom-width: map-get($theme, 'weight');
-      border-right-width: map-get($theme, 'weight');
+      border-bottom-width: map.get($theme, 'weight');
+      border-right-width: map.get($theme, 'weight');
     }
   }
-  @if map-has-key($theme, 'bgcolor') {
-    &::before { background-color: map-get($theme, 'bgcolor'); }
+  @if map.has-key($theme, 'bgcolor') {
+    &::before { background-color: map.get($theme, 'bgcolor'); }
   }
-  @if map-has-key($theme, 'color') {
+  @if map.has-key($theme, 'color') {
     &::after {
-      border-bottom-color: map-get($theme, 'color');
-      border-right-color: map-get($theme, 'color');
+      border-bottom-color: map.get($theme, 'color');
+      border-right-color: map.get($theme, 'color');
     }
   }
 }
 
-[#{$loop-component-prefix}-form~="select"] {
+[#{v.$loop-component-prefix}-form~="select"] {
   position: relative;
   display: block;
-  min-height: $input-height;
-  font-size: $input-font-size;
-  line-height: $input-line-height;
+  min-height: v.$input-height;
+  font-size: v.$input-font-size;
+  line-height: v.$input-line-height;
 
   &::before {
     position: absolute;
@@ -56,11 +48,11 @@ $select-themes: (
 
     content: '';
 
-    border-top: $input-border;
-    border-right: $input-border;
-    border-bottom: $input-border;
-    border-top-right-radius: $input-border-radius;
-    border-bottom-right-radius: $input-border-radius;
+    border-top: v.$input-border;
+    border-right: v.$input-border;
+    border-bottom: v.$input-border;
+    border-top-right-radius: v.$input-border-radius;
+    border-bottom-right-radius: v.$input-border-radius;
 
     pointer-events: none;
   }
@@ -79,14 +71,14 @@ $select-themes: (
   }
 
   @include selectTheme((
-    'size' : $select-size,
-    'color': $select-color,
-    'bgcolor': $select-bgcolor,
-    'weight': $select-weight,
+    'size' : v.$select-size,
+    'color': v.$select-color,
+    'bgcolor': v.$select-bgcolor,
+    'weight': v.$select-weight,
   ));
 
   > select {
-    @extend %input;
+    @include m.input;
     margin: 0;
     height: 100%;
     font-size: inherit;
@@ -98,9 +90,9 @@ $select-themes: (
     }
   }
 
-  @if isNotEmpty($select-themes) and isMap($select-themes) {
-    @each $theme-name, $theme in $select-themes {
-      &[#{$loop-component-prefix}-form~="#{$theme-name}"] {
+  @if fn.isNotEmpty(v.$select-themes) and fn.isMap(v.$select-themes) {
+    @each $theme-name, $theme in v.$select-themes {
+      &[#{v.$loop-component-prefix}-form~="#{$theme-name}"] {
         @include selectTheme($theme);
       }
     }
@@ -120,9 +112,9 @@ $select-themes: (
   }
 }
 
-@if isNotEmpty($input-padding-sizes) {
-  @each $name, $padding in $input-padding-sizes {
-    [#{$loop-component-prefix}-form~="select"][#{$loop-component-prefix}-form~="#{$name}"] > select {
+@if fn.isNotEmpty(v.$input-padding-sizes) {
+  @each $name, $padding in v.$input-padding-sizes {
+    [#{v.$loop-component-prefix}-form~="select"][#{v.$loop-component-prefix}-form~="#{$name}"] > select {
       padding: #{$padding};
       padding-right: 0;
     }

package/scss/components/form/_toggle.scss

@@ -1,21 +1,12 @@
 @use 'sass:math';
+@use '../../variables' as v;
+@use '../../functions/type';
+@use 'mixin' as m;
 
 /**
  * Toggle
  */
 
-$toggle-size:                  2.4rem !default;
-$toggle-color:                 $input-bgcolor !default;
-$toggle-bgcolor:               $input-border-color !default;
-$toggle-border-color:          $toggle-bgcolor !default;
-$toggle-box-shadow:            $checkbox-box-shadow !default;
-
-$toggle-checked-bgcolor:       $input-color !default;
-$toggle-checked-border-color:  $toggle-checked-bgcolor !default;
-
-$use-toggle-animation: true !default;
-$toggle-sizes:() !default;
-
 @mixin toggle-size($size) {
   & + label {
     &::before {
@@ -31,7 +22,7 @@ $toggle-sizes:() !default;
       min-height: $size;
     }
 
-    & + [#{$loop-component-prefix}-form~="toggle"] + label { margin-top: math.div($size, 3); }
+    & + [#{v.$loop-component-prefix}-form~="toggle"] + label { margin-top: math.div($size, 3); }
   }
 
   &:checked + label::before {
@@ -39,7 +30,7 @@ $toggle-sizes:() !default;
   }
 }
 
-[#{$loop-component-prefix}-form~="toggle"] {
+[#{v.$loop-component-prefix}-form~="toggle"] {
   position: absolute;
   opacity: 0;
 
@@ -49,17 +40,17 @@ $toggle-sizes:() !default;
     align-items: center;
     width: fit-content;
     line-height: 1.1;
-    font-weight: $font-weight-base;
+    font-weight: v.$font-weight-base;
 
     &::before {
       position: absolute;
       left: 0;
       content: '';
       border-radius: 50%;
-      background-color: $toggle-color;
-      box-shadow: $toggle-box-shadow;
+      background-color: v.$toggle-color;
+      box-shadow: v.$toggle-box-shadow;
 
-      @if $use-toggle-animation {
+      @if v.$use-toggle-animation {
         transition: transform 300ms ease-out;
       }
     }
@@ -67,30 +58,30 @@ $toggle-sizes:() !default;
       display: flex;
       order: -1;
       content:'';
-      border: 1px solid $toggle-border-color;
+      border: 1px solid v.$toggle-border-color;
       border-radius: 50em;
-      background-color: $toggle-bgcolor;
-      box-shadow: $toggle-box-shadow;
+      background-color: v.$toggle-bgcolor;
+      box-shadow: v.$toggle-box-shadow;
 
-      @if $use-toggle-animation {
+      @if v.$use-toggle-animation {
         transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out;
       }
     }
   }
 
   &:checked + label::after {
-    background-color: $toggle-checked-bgcolor;
-    border-color: $toggle-checked-border-color;
+    background-color: v.$toggle-checked-bgcolor;
+    border-color: v.$toggle-checked-border-color;
   }
-  &:focus + label::after { @extend %inputFocus; }
+  &:focus + label::after { @include m.inputFocus; }
 
-  @include toggle-size($toggle-size);
+  @include toggle-size(v.$toggle-size);
 
-  @if isMap($toggle-sizes) {
-    @each $size_name, $size_value in $toggle-sizes {
-      &[#{$loop-component-prefix}-form~="#{$size_name}"] { @include toggle-size($size_value) }
+  @if type.isMap(v.$toggle-sizes) {
+    @each $size_name, $size_value in v.$toggle-sizes {
+      &[#{v.$loop-component-prefix}-form~="#{$size_name}"] { @include toggle-size($size_value) }
     }
   }
 
-  [#{$loop-component-prefix}-form~="labelless"] + label::after { margin-right: 0; }
+  [#{v.$loop-component-prefix}-form~="labelless"] + label::after { margin-right: 0; }
 }

package/scss/functions/_array.scss

@@ -1,4 +1,8 @@
-@import 'empty';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+
+@use 'empty';
 
 /**
  * In List
@@ -8,7 +12,7 @@
  */
 
 @function inList($needle, $haystack) {
-  @if index($haystack, $needle) == null {
+  @if list.index($haystack, $needle) == null {
     @return false;
   } @else {
     @return true;
@@ -16,7 +20,7 @@
 }
 
 @function notInList($needle, $haystack) {
-  @return if(inList($needle, $haystack), false, true);
+  @return if(sass(inList($needle, $haystack)): false; else: true);
 }
 
 // inArray Deprecated
@@ -35,15 +39,15 @@
   $merge: ();
 
   // merge if $array1 or $array2 is not empty
-  @if isNotEmpty($array1) {
-    @if type-of($array1) == 'list' and type-of($array2) == 'list' {
-      $merge: join($array1, $array2);
-    } @else if type-of($array1) == 'map' and type-of($array2) == 'map' {
-      $merge: map-merge($array1, $array2);
+  @if empty.isNotEmpty($array1) {
+    @if meta.type-of($array1) == 'list' and meta.type-of($array2) == 'list' {
+      $merge: list.join($array1, $array2);
+    } @else if meta.type-of($array1) == 'map' and meta.type-of($array2) == 'map' {
+      $merge: map.merge($array1, $array2);
     } @else {
       $merge: $array1;
     }
-  } @else if isNotEmpty($array2) {
+  } @else if empty.isNotEmpty($array2) {
     $merge: $array2;
   }
 

package/scss/functions/_empty.scss

@@ -1,4 +1,7 @@
-@import 'type';
+@use "sass:list";
+@use "sass:string";
+
+@use 'type';
 
 /**
  * Empty
@@ -7,9 +10,9 @@
  */
 
 @function isEmpty($data) {
-  @if isString($data) and str-length($data) == 0 {
+  @if type.isString($data) and string.length($data) == 0 {
     @return true;
-  } @else if isList($data) and length($data) == 0 {
+  } @else if type.isList($data) and list.length($data) == 0 {
     @return true;
   } @else {
     @return false;
@@ -17,5 +20,5 @@
 }
 
 @function isNotEmpty($data) {
-  @return if(isEmpty($data), false, true);
+  @return if(sass(isEmpty($data)): false; else: true);
 }

package/scss/functions/_index.scss

@@ -0,0 +1,7 @@
+@forward 'array';
+@forward 'brightness';
+@forward 'empty';
+@forward 'map';
+@forward 'replace';
+@forward 'split';
+@forward 'type';

package/scss/functions/_map.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 /**
  * getMapValue
  * @param $map  map  map of data
@@ -5,11 +7,11 @@
  * @return string
  */
 @function getMapValue($map, $key) {
-  @if map-has-key($map, $key) == false {
+  @if map.has-key($map, $key) == false {
     @warn ('key does not exist when using getMapValue()');
     @return '';
   }
-  @return map-get($map, $key);
+  @return map.get($map, $key);
 }
 
 /**

package/scss/functions/_replace.scss

@@ -1,3 +1,6 @@
+@use 'sass:meta';
+@use 'sass:string';
+
 /**
  * Replace
  * @param string $search  The value being searched
@@ -8,10 +11,10 @@
  */
 
 @function replace($search, $replace, $subject) {
-  $searchIndex: str-index($subject, $search);
-  @if type-of($search) == 'string' and type-of($replace) == 'string' and type-of($subject) == 'string' and $searchIndex {
-    $subjectStart: str-slice($subject, 1, $searchIndex - 1);
-    $subjectEnd: str-slice($subject, $searchIndex + str-length($search));
+  $searchIndex: string.index($subject, $search);
+  @if meta.type-of($search) == 'string' and meta.type-of($replace) == 'string' and meta.type-of($subject) == 'string' and $searchIndex {
+    $subjectStart: string.slice($subject, 1, $searchIndex - 1);
+    $subjectEnd: string.slice($subject, $searchIndex + string.length($search));
     $newSubject: $subjectStart + $replace + $subjectEnd;
     @return replace($search, $replace, $newSubject);
   } @else {

package/scss/functions/_split.scss

@@ -1,3 +1,7 @@
+@use 'sass:list';
+@use 'sass:meta';
+@use 'sass:string';
+
 /**
  * Split
  * @param string $pattern The string character to split your string by
@@ -8,14 +12,14 @@
  */
 
 @function split($pattern, $subject, $list:()) {
-  $searchIndex: str-index($subject, $pattern);
-  @if type-of($pattern) == 'string' and type-of($subject) == 'string' and $searchIndex {
-    $subjectStart: str-slice($subject, 1, $searchIndex - 1);
-    $subjectEnd: str-slice($subject, $searchIndex + str-length($pattern));
-    $newList: join($list, $subjectStart);
+  $searchIndex: string.index($subject, $pattern);
+  @if meta.type-of($pattern) == 'string' and meta.type-of($subject) == 'string' and $searchIndex {
+    $subjectStart: string.slice($subject, 1, $searchIndex - 1);
+    $subjectEnd: string.slice($subject, $searchIndex + string.length($pattern));
+    $newList: list.join($list, $subjectStart);
     @return split($pattern, $subjectEnd, $newList);
   } @else {
-    $newList: join($list, $subject);
+    $newList: list.join($list, $subject);
     @return $newList;
   }
 }

package/scss/functions/_type.scss

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 /**
  * isString
  * @param string|list $data
@@ -5,7 +7,7 @@
  */
 
 @function isString($data) {
-  @if type-of($data) == 'string'{
+  @if meta.type-of($data) == 'string'{
     @return true;
   } @else {
     @return false;
@@ -13,7 +15,7 @@
 }
 
 @function isNotString($data) {
-  @return if(isString($data), false, true);
+  @return if(sass(isString($data)): false; else: true);
 }
 
 /**
@@ -23,7 +25,7 @@
  */
 
 @function isList($data) {
-  @if type-of($data) == 'list'{
+  @if meta.type-of($data) == 'list'{
     @return true;
   } @else {
     @return false;
@@ -31,7 +33,7 @@
 }
 
 @function isNotList($data) {
-  @return if(isList($data), false, true);
+  @return if(sass(isList($data)): false; else: true);
 }
 
 /**
@@ -41,7 +43,7 @@
  */
 
 @function isMap($data) {
-  @if type-of($data) == 'map'{
+  @if meta.type-of($data) == 'map'{
     @return true;
   } @else {
     @return false;
@@ -49,5 +51,5 @@
 }
 
 @function isNotMap($data) {
-  @return if(isMap($data), false, true);
+  @return if(sass(isMap($data)): false; else: true);
 }

package/scss/mixins/_breakpoint.scss

@@ -3,42 +3,32 @@
  * based on material guidelines
  * https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
  */
+@use 'sass:list';
+@use 'sass:map';
+@use '../variables' as v;
+@use '../functions' as fn;
 
-@import '../functions/all';
 
-$breakpoints: (
-  xs: 480px,  // min width
-  sm: 600px,  // min width
-  md: 960px,  // min width
-  lg: 1280px, // min width
-) !default;
-
-$breakpoints-classes: (sm, md, lg) !default;
-$pointbreaks-classes: (sm, md, lg) !default;
-
-// including the first step
-$breakpoints-classes-width-default-value: join('', $breakpoints-classes);
-
-@mixin breakpoint($key) {
+@mixin from($key) {
   // make sure the key exist
-  @if map-has-key($breakpoints, $key) {
-    $width: map-get($breakpoints, $key);
+  @if map.has-key(v.$breakpoints, $key) {
+    $width: map.get(v.$breakpoints, $key);
     @media (min-width: $width) {
       @content;
     }
-  } @else if isEmpty($key) or $key == 'rt' {
+  } @else if fn.isEmpty($key) or $key == 'rt' {
     @content;
   }
 }
 
-@mixin pointbreak($key) {
+@mixin to($key) {
   // make sure the key exist
-  @if map-has-key($breakpoints, $key) {
-    $width: map-get($breakpoints, $key) - 1;
+  @if map.has-key(v.$breakpoints, $key) {
+    $width: map.get(v.$breakpoints, $key) - 1;
     @media (max-width: $width) {
       @content;
     }
-  } @else if isEmpty($key) or $key == 'rt' {
+  } @else if fn.isEmpty($key) or $key == 'rt' {
     @content;
   }
 }

package/scss/mixins/_loop.scss

@@ -1,19 +1,21 @@
-/**
- * Loop
- */
+@use 'sass:map';
 
-@import '../functions/all';
-@import 'breakpoint';
+@use 'breakpoint';
+@use '../functions/empty';
+@use '../functions/type';
 
+/**
+ * Loop properties
+ */
 
 @mixin loopProperties($properties, $value, $is-important) {
   // multiple properties
-  @if isList($properties) {
+  @if type.isList($properties) {
     @each $property in $properties {
-      #{$property}: if($is-important, #{$value} !important, #{$value});
+      #{$property}: $value #{if(sass($is-important): '!important')};
     }
   } @else {
-    #{$properties}: if($is-important, #{$value} !important, #{$value});
+    #{$properties}: $value #{if(sass($is-important): '!important')};
   }
 }
 
@@ -31,16 +33,16 @@
   $affix: '-';
 
   // Make sure to have the correct format or do not generate rules
-  @if isNotEmpty($data) {
-    @if isMap($data) {
+  @if empty.isNotEmpty($data) {
+    @if type.isMap($data) {
       @each $key, $value in $data {
-        $affix: if(isEmpty($key), '', $affix);
+        $affix: if(sass(empty.isEmpty($key)): ''; else: $affix);
 
         #{$prefix}#{$affix}#{$key}#{$suffix} {
           // responsive properties ?
-          @if isMap($value) {
+          @if type.isMap($value) {
             @each $child-breakpoint, $child-value in $value {
-              @include breakpoint($child-breakpoint) {
+              @include breakpoint.from($child-breakpoint) {
                 @include loopProperties($properties, $child-value, $is-important);
               }
             }
@@ -49,7 +51,7 @@
           }
         }
       }
-    } @else if isList($data) {
+    } @else if type.isList($data) {
       @each $value in $data {
         #{$prefix}#{$affix}#{$value}#{$suffix} {
           @include loopProperties($properties, $value, $is-important);
@@ -75,9 +77,9 @@
  * @param $suffix       ?string     String to append to the selector
  */
 @mixin loopBreakpoints($breakpoints, $data, $properties, $prefix, $is-important:false, $suffix:'') {
-  @if isNotEmpty($breakpoints) and isNotEmpty($data) {
+  @if empty.isNotEmpty($breakpoints) and empty.isNotEmpty($data) {
     @each $breakpoint in $breakpoints {
-      @include breakpoint($breakpoint) {
+      @include breakpoint.from($breakpoint) {
         $suffixes: #{$suffix}\@#{$breakpoint};
         @include loop($data, $properties, $prefix, $is-important, $suffixes);
       }
@@ -97,12 +99,12 @@
  * @param $suffix       ?string     String to append to the selector
  */
 @mixin loopMapKeys($keys, $map, $properties, $prefix, $is-important:false, $suffix:'')  {
-  @if isNotEmpty($keys) {
+  @if empty.isNotEmpty($keys) {
     $affix: '-';
 
     @each $key in $keys {
-      @if map-has-key($map, $key) {
-        $value: map-get($map, $key);
+      @if map.has-key($map, $key) {
+        $value: map.get($map, $key);
         $selector: #{$prefix}#{$affix}#{$key}#{$suffix};
 
         #{$selector}{

package/scss/utilities/_color.scss

@@ -1,28 +1,19 @@
+@use '../mixins/loop';
+@use '../variables' as v;
+
 /**
  * Color Utilities
  */
 
 // Text colors
-$text-colors: () !default;
-$text-colors-classes: $colors-classes !default;
-$text-colors-is-important: true !default;
-
-@include loop($text-colors, 'color', '.color', $text-colors-is-important);
-@include loopMapKeys($text-colors-classes, $colors, 'color', '.color', $text-colors-is-important);
+@include loop.loop(v.$text-colors, 'color', '.color', v.$text-colors-is-important);
+@include loop.loopMapKeys(v.$text-colors-classes, v.$colors, 'color', '.color', v.$text-colors-is-important);
 
 // Bg colors
-$bg-colors: () !default;
-$bg-colors-classes: $colors-classes !default;
-$bg-colors-is-important: false !default;
-
-@include loop($bg-colors, 'background-color', '.bg', $bg-colors-is-important);
-@include loopMapKeys($bg-colors-classes, $colors, 'background-color', '.bg', $bg-colors-is-important);
+@include loop.loop(v.$bg-colors, 'background-color', '.bg', v.$bg-colors-is-important);
+@include loop.loopMapKeys(v.$bg-colors-classes, v.$colors, 'background-color', '.bg', v.$bg-colors-is-important);
 
 // Border colors
-$border-colors: () !default;
-$border-colors-classes: $colors-classes !default;
-$border-colors-is-important: true !default;
-
-@include loop($border-colors, 'border-color', '.border', $border-colors-is-important);
-@include loopMapKeys($border-colors-classes, $colors, 'border-color', '.border', $border-colors-is-important);
+@include loop.loop(v.$border-colors, 'border-color', '.border', v.$border-colors-is-important);
+@include loop.loopMapKeys(v.$border-colors-classes, v.$colors, 'border-color', '.border', v.$border-colors-is-important);
 

package/scss/utilities/_container.scss

@@ -1,25 +1,24 @@
+@use '../variables' as v;
+@use '../mixins/breakpoint';
+
 /**
  * Container
  */
 
-$container-gutter: 1.6rem !default;
-$container-gutter-sm: 2.4rem !default;
-$containers-max-width: 1080px !default;
-
 .container,
 .container-fluid {
   margin-left: auto;
   margin-right: auto;
 
-  padding-right: $container-gutter;
-  padding-left: $container-gutter;
+  padding-right: v.$container-gutter;
+  padding-left: v.$container-gutter;
 
   display: block;
-  max-width: $containers-max-width;
+  max-width: v.$containers-max-width;
 
-  @include breakpoint(sm) {
-    padding-left: $container-gutter-sm;
-    padding-right: $container-gutter-sm;
+  @include breakpoint.from(sm) {
+    padding-left: v.$container-gutter-sm;
+    padding-right: v.$container-gutter-sm;
   }
 }