oo-loop 0.5.1 → 0.6.0

package/scss/components/_grid.scss

@@ -1,55 +1,44 @@
-/**
- * Grid
- */
-
-$use-grid-layout: true !default;
-$use-grid-areas:  true !default;
-$use-grid-order:  true !default;
-$use-grid-gap:    true !default;
-$use-v-grid-gap:  true !default;
-
-$grid-gap: 	  $columns-gutter !default;
-$grid-system: $columns-system !default;
-$grid-template-areas: () !default ;
-
-$grid-gap-sizes:   $columns-gutter-sizes !default;
-$grid-v-gap-sizes: $grid-gap-sizes !default;
+@use 'sass:list';
+@use 'sass:map';
+@use '../variables' as v;
+@use '../mixins/breakpoint';
+@use '../functions' as fn;
 
 
 // Grid layout
-@if $use-grid-layout {
-  [#{$loop-component-prefix}-grid~="layout"] {
+@if v.$use-grid-layout {
+  [#{v.$loop-component-prefix}-grid~="layout"] {
     display: grid;
-    grid-template-columns: repeat($grid-system, 1fr);
-    grid-gap: $grid-gap;
+    grid-template-columns: repeat(v.$grid-system, 1fr);
+    grid-gap: v.$grid-gap;
   }
 
-  [#{$loop-component-prefix}-grid*="col"],
-  [#{$loop-component-prefix}-grid*="row"] {
+  [#{v.$loop-component-prefix}-grid*="col"],
+  [#{v.$loop-component-prefix}-grid*="row"] {
     min-width: 0;
   }
 
-  @each $class in $breakpoints-classes-width-default-value {
-    @include breakpoint($class) {
+  @each $class in v.$breakpoints-classes-width-default-value {
+    @include breakpoint.from($class) {
       $suffix: '';
       @if $class != '' {
         $suffix: \@#{$class};
       }
-      @for $i from 1 through $grid-system {
-        [#{$loop-component-prefix}-grid~="col-#{$i}#{$suffix}"] { grid-column: span $i; }
-        [#{$loop-component-prefix}-grid~="row-#{$i}#{$suffix}"] { grid-row: span $i; }
+      @for $i from 1 through v.$grid-system {
+        [#{v.$loop-component-prefix}-grid~="col-#{$i}#{$suffix}"] { grid-column: span $i; }
+        [#{v.$loop-component-prefix}-grid~="row-#{$i}#{$suffix}"] { grid-row: span $i; }
       }
     }
   }
 
-  @if $use-grid-order {
-    @each $class in $breakpoints-classes {
-      @include breakpoint($class) {
+  @if v.$use-grid-order {
+    @each $class in v.$breakpoints-classes {
+      @include breakpoint.from($class) {
         $suffix: \@#{$class};
         // order-0 to make sure it is first
-        [#{$loop-component-prefix}-grid~="order-0#{$suffix}"] { order: -1; }
-        @for $i from 1 through $grid-system {
-          [#{$loop-component-prefix}-grid~="order-#{$i}#{$suffix}"] { order: $i; }
+        [#{v.$loop-component-prefix}-grid~="order-0#{$suffix}"] { order: -1; }
+        @for $i from 1 through v.$grid-system {
+          [#{v.$loop-component-prefix}-grid~="order-#{$i}#{$suffix}"] { order: $i; }
         }
       }
     }
@@ -61,10 +50,10 @@ $grid-v-gap-sizes: $grid-gap-sizes !default;
 @function getAreaNames($areas) {
   $list: ();
   @each $area in $areas {
-    $areaNames: split(' ', $area);
+    $areaNames: fn.split(' ', $area);
     @each $areaName in $areaNames {
-      @if notInList($areaName, $list) {
-        $list: join($list, $areaName);
+      @if fn.notInList($areaName, $list) {
+        $list: list.join($list, $areaName);
       }
     }
   }
@@ -72,8 +61,8 @@ $grid-v-gap-sizes: $grid-gap-sizes !default;
 }
 @function getAreaColumnNumber($areas) {
   @each $area in $areas {
-    $areaNames: split(' ', $area);
-    @return length($areaNames);
+    $areaNames: fn.split(' ', $area);
+    @return list.length($areaNames);
   }
 }
 
@@ -83,7 +72,7 @@ $grid-v-gap-sizes: $grid-gap-sizes !default;
 }
 @mixin makeGridArea($areaNames) {
   @each $area in $areaNames {
-    [#{$loop-component-prefix}-grid~="#{$area}"] {
+    [#{v.$loop-component-prefix}-grid~="#{$area}"] {
       grid-area: #{$area};
       min-width: 0;
     }
@@ -97,46 +86,45 @@ $grid-v-gap-sizes: $grid-gap-sizes !default;
   $area-names-list: ();
   @each $breakpoint, $areas in $grid-template-areas {
     $area-names-list: getAreaNames(join($area-names-list, getAreaNames($areas)));
-    @include breakpoint($breakpoint) {
+    @include breakpoint.from($breakpoint) {
       @include makeGridTemplate($areas);
     }
   }
   @include makeGridArea($area-names-list);
 }
 
-@if $use-grid-areas and isNotEmpty($grid-template-areas) {
+@if v.$use-grid-areas and fn.isNotEmpty(v.$grid-template-areas) {
 
-  [#{$loop-component-prefix}-grid~="areas"] {
+  [#{v.$loop-component-prefix}-grid~="areas"] {
     display: grid;
-    grid-gap: $grid-gap;
+    grid-gap: v.$grid-gap;
   }
 
-  @if isList($grid-template-areas) {
-    [#{$loop-component-prefix}-grid~="areas"] {
-      @include makeGrid($grid-template-areas);
+  @if fn.isList(v.$grid-template-areas) {
+    [#{v.$loop-component-prefix}-grid~="areas"] {
+      @include makeGrid(v.$grid-template-areas);
     }
-  } @else if isMap($grid-template-areas) {
+  } @else if fn.isMap(v.$grid-template-areas) {
 
     // are keys Breakpoints ?
     $are-keys-breakpoints: false;
-    $map-keys: map-keys($grid-template-areas);
+    $map-keys: map.keys(v.$grid-template-areas);
     @each $key in $map-keys {
-      @if inList($key, $breakpoints-classes) {
+      @if fn.inList($key, $breakpoints-classes) {
         $are-keys-breakpoints: true;
-        @break;
       }
     }
 
     @if $are-keys-breakpoints {
-      [#{$loop-component-prefix}-grid~="areas"] {
-        @include makeGridOnBreakpoints($grid-template-areas);
+      [#{v.$loop-component-prefix}-grid~="areas"] {
+        @include makeGridOnBreakpoints(v.$grid-template-areas);
       }
     } @else {
-      @each $grid-name, $grid-sub-areas in $grid-template-areas {
-        [#{$loop-component-prefix}-grid~="areas"][#{$loop-component-prefix}-grid~="#{$grid-name}"] {
-          @if isMap($grid-sub-areas) {
+      @each $grid-name, $grid-sub-areas in v.$grid-template-areas {
+        [#{v.$loop-component-prefix}-grid~="areas"][#{v.$loop-component-prefix}-grid~="#{$grid-name}"] {
+          @if fn.isMap($grid-sub-areas) {
             @include makeGridOnBreakpoints($grid-sub-areas);
-          } @else if isList($grid-sub-areas) {
+          } @else if fn.isList($grid-sub-areas) {
             @include makeGrid($grid-sub-areas);
           }
         }
@@ -146,13 +134,13 @@ $grid-v-gap-sizes: $grid-gap-sizes !default;
 }
 
 // Grid Gap
-@if $use-grid-gap {
-  @each $gap-name, $gap-size in $grid-gap-sizes {
-    [#{$loop-component-prefix}-grid~="gap-#{$gap-name}"] { grid-gap: $gap-size; }
+@if v.$use-grid-gap {
+  @each $gap-name, $gap-size in v.$grid-gap-sizes {
+    [#{v.$loop-component-prefix}-grid~="gap-#{$gap-name}"] { grid-gap: $gap-size; }
   }
 }
-@if $use-grid-gap and $use-v-grid-gap {
-  @each $gap-name, $gap-size in $grid-v-gap-sizes {
-    [#{$loop-component-prefix}-grid~="v-gap-#{$gap-name}"] { grid-row-gap: $gap-size; }
+@if v.$use-grid-gap and v.$use-v-grid-gap {
+  @each $gap-name, $gap-size in v.$grid-v-gap-sizes {
+    [#{v.$loop-component-prefix}-grid~="v-gap-#{$gap-name}"] { grid-row-gap: $gap-size; }
   }
 }

package/scss/components/form/_checkbox.scss

@@ -1,22 +1,14 @@
 @use 'sass:math';
+@use '../../mixins/breakpoint';
+@use '../../mixins/loop';
+@use '../../functions' as fn;
+@use '../../variables' as v;
+@use 'mixin' as m;
 
 /**
  * Checkbox
  */
 
-$checkbox-size:                  1.8rem !default;
-$checkbox-bgcolor:               $input-bgcolor !default;
-$checkbox-border-color:          $input-border-color !default;
-$checkbox-border-radus:          $input-border-radius !default;
-$checkbox-box-shadow:            1px 1px 2px 0 rgba(#aaa, .3) !default;
-$checkbox-checked-color:         $input-color !default;
-$checkbox-checked-bgcolor:       $input-bgcolor !default;
-$checkbox-checked-border-color:  $checkbox-border-color !default;
-
-$use-checkbox-animation: true !default;
-$checkbox-sizes:() !default;
-$checkbox-breakpoints-classes:() !default;
-
 @mixin checkbox-size($size) {
   $checked_width: ($size * 0.4);
   $checked_height: ($size * 0.6);
@@ -25,7 +17,7 @@ $checkbox-breakpoints-classes:() !default;
   & + label {
     &::before {
       left: math.div($size, 2) - math.div($checked_width, 2) + math.div($checked_border-width, 3);
-      @if $use-checkbox-animation {
+      @if v.$use-checkbox-animation {
         min-width: ($checked_width * 2);
         min-height: ($checked_height * 2);
         border-right-width: ($checked_border-width * 2);
@@ -38,7 +30,7 @@ $checkbox-breakpoints-classes:() !default;
       min-height: $size;
     }
 
-    & + [#{$loop-component-prefix}-form~="checkbox"] + label { margin-top: math.div($size, 3); }
+    & + [#{v.$loop-component-prefix}-form~="checkbox"] + label { margin-top: math.div($size, 3); }
   }
   &:checked + label::before {
     min-width: $checked_width;
@@ -48,7 +40,7 @@ $checkbox-breakpoints-classes:() !default;
   }
 }
 
-[#{$loop-component-prefix}-form~="checkbox"] {
+[#{v.$loop-component-prefix}-form~="checkbox"] {
   position: absolute;
   opacity: 0;
 
@@ -58,7 +50,7 @@ $checkbox-breakpoints-classes:() !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;
@@ -71,7 +63,7 @@ $checkbox-breakpoints-classes:() !default;
 
       transform: rotateZ(40deg);
 
-      @if $use-checkbox-animation {
+      @if v.$use-checkbox-animation {
         transition: border 200ms ease-in-out, min-width 200ms ease-in-out, min-height 200ms ease-in-out;
       }
     }
@@ -79,12 +71,12 @@ $checkbox-breakpoints-classes:() !default;
       display: flex;
       order: -1;
       content:'';
-      border: 1px solid $checkbox-border-color;
-      border-radius: $checkbox-border-radus;
-      background-color: $checkbox-bgcolor;
-      box-shadow: $checkbox-box-shadow;
+      border: 1px solid v.$checkbox-border-color;
+      border-radius: v.$checkbox-border-radus;
+      background-color: v.$checkbox-bgcolor;
+      box-shadow: v.$checkbox-box-shadow;
 
-      @if $use-checkbox-animation {
+      @if v.$use-checkbox-animation {
         transition: background-color 300ms ease-in-out;
       }
     }
@@ -92,39 +84,39 @@ $checkbox-breakpoints-classes:() !default;
 
   &:checked + label {
     &::before {
-      border-right-color: $checkbox-checked-color;
-      border-bottom-color: $checkbox-checked-color;
+      border-right-color: v.$checkbox-checked-color;
+      border-bottom-color: v.$checkbox-checked-color;
 
-      @if $use-checkbox-animation {
-        box-shadow: 1px 1px 2px $checkbox-checked-bgcolor;
+      @if v.$use-checkbox-animation {
+        box-shadow: 1px 1px 2px v.$checkbox-checked-bgcolor;
       }
     }
     &::after {
-      background-color: $checkbox-checked-bgcolor;
-      border-color: $checkbox-checked-border-color;
+      background-color: v.$checkbox-checked-bgcolor;
+      border-color: v.$checkbox-checked-border-color;
     }
   }
-  &:focus + label::after { @extend %inputFocus; }
+  &:focus + label::after { @include m.inputFocus; }
 
-  @include checkbox-size($checkbox-size);
+  @include checkbox-size(v.$checkbox-size);
 
-  @if isMap($checkbox-sizes) {
-    @each $size_name, $size_value in $checkbox-sizes {
-      &[#{$loop-component-prefix}-form~="#{$size_name}"] { @include checkbox-size($size_value) }
+  @if fn.isMap(v.$checkbox-sizes) {
+    @each $size_name, $size_value in v.$checkbox-sizes {
+      &[#{v.$loop-component-prefix}-form~="#{$size_name}"] { @include checkbox-size($size_value) }
     }
 
-    @if isNotEmpty($checkbox-breakpoints-classes) {
-      @each $breakpoint in $checkbox-breakpoints-classes {
-        @include breakpoint($breakpoint) {
-          @each $size_name, $size_value in $checkbox-sizes {
+    @if fn.isNotEmpty(v.$checkbox-breakpoints-classes) {
+      @each $breakpoint in v.$checkbox-breakpoints-classes {
+        @include breakpoint.from($breakpoint) {
+          @each $size_name, $size_value in v.$checkbox-sizes {
             $suffix: \@#{$breakpoint};
-            &[#{$loop-component-prefix}-form~="#{$size_name}#{$suffix}"] { @include checkbox-size($size_value) }
+            &[#{v.$loop-component-prefix}-form~="#{$size_name}#{$suffix}"] { @include checkbox-size($size_value) }
           }
         }
       }
     }
   }
 
-  @include loop($border-colors, 'border-color', '&[class*="border', true, '"] + label::after');
-  @include loopMapKeys($border-colors-classes, $colors, 'border-color', '&[class*="border', true, '"] + label::after');
+  @include loop.loop(v.$border-colors, 'border-color', '&[class*="border', true, '"] + label::after');
+  @include loop.loopMapKeys(v.$border-colors-classes, v.$colors, 'border-color', '&[class*="border', true, '"] + label::after');
 }

package/scss/components/form/_input.scss

@@ -1,84 +1,22 @@
-/**
- * Input
- */
+@use '../../variables' as v;
+@use '../../functions' as fn;
+@use 'mixin' as m;
 
-$input-color:            #4d4d4d !default;
-$input-bgcolor:          #fff !default;
-$input-font-family:      $font-family-base !default;
-$input-font-size:        $font-size-base !default;
-$input-font-style:       normal !default;
-$input-line-height:      1.15 !default;
-$input-height:           2.5em !default;
-
-$input-padding:          .5em .625em !default; // relative to the size of the input
-$input-padding-sizes:    () !default;
-
-$input-border-color:     #d6d6d6 !default;
-$input-border:           1px solid $input-border-color !default;
-$input-border-radius:    .2em !default; // relative to the size of the input
-$input-box-shadow:       1px 1px 1px 0 rgba(#aaa, .50) !default;
-$input-focus-box-shadow: 1px 1px 2px 0px rgba(#aaa, .85) !default;
-$input-focus-border-color: $input-border-color !default;
-
-$label-font-weight:      500 !default;
-$label-margin:           .3rem !default;
-
-%inputFocus {
-  @if $input-box-shadow == none and $input-focus-box-shadow != none {
-    box-shadow: $input-focus-box-shadow;
-  } @else if $input-focus-box-shadow != none {
-    box-shadow: $input-box-shadow, $input-focus-box-shadow;
-  }
-
-  @if $input-border-color != $input-focus-border-color {
-    border-color: $input-focus-border-color;
-  }
-}
-
-%input,
-[#{$loop-component-prefix}-form~="input"] {
-  padding: $input-padding;
-
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  min-height: $input-height;
-
-  color: $input-color;
-  font-family: $input-font-family;
-  font-size: $input-font-size;
-  font-style: $input-font-style;
-  line-height: $input-line-height;
-
-  border: $input-border;
-  border-radius: $input-border-radius;
-  background-color: $input-bgcolor;
-
-  @if $input-box-shadow != none {
-    box-shadow: $input-box-shadow;
-  }
-
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  &:focus {
-    outline:none;
-    @extend %inputFocus;
-  }
+[#{v.$loop-component-prefix}-form~="input"] {
+  @include m.input;
 }
 
 label {
-  font-weight: $label-font-weight;
-  + [#{$loop-component-prefix}-form~="input"],
-  + [#{$loop-component-prefix}-form~="select"] {
-    margin-top: $label-margin;
+  font-weight: v.$label-font-weight;
+  + [#{v.$loop-component-prefix}-form~="input"],
+  + [#{v.$loop-component-prefix}-form~="select"] {
+    margin-top: v.$label-margin;
   }
 }
 
-@if isNotEmpty($input-padding-sizes) {
-  @each $name, $padding in $input-padding-sizes {
-    [#{$loop-component-prefix}-form~="input"][#{$loop-component-prefix}-form~="#{$name}"] {
+@if fn.isNotEmpty(v.$input-padding-sizes) {
+  @each $name, $padding in v.$input-padding-sizes {
+    [#{v.$loop-component-prefix}-form~="input"][#{v.$loop-component-prefix}-form~="#{$name}"] {
       padding: #{$padding};
     }
   }

package/scss/components/form/_mixin.scss

@@ -0,0 +1,47 @@
+@use '../../variables' as v;
+
+@mixin inputFocus {
+  @if v.$input-box-shadow ==none and v.$input-focus-box-shadow !=none {
+    box-shadow: v.$input-focus-box-shadow;
+  }
+
+  @else if v.$input-focus-box-shadow !=none {
+    box-shadow: v.$input-box-shadow, v.$input-focus-box-shadow;
+  }
+
+  @if v.$input-border-color !=v.$input-focus-border-color {
+    border-color: v.$input-focus-border-color;
+  }
+}
+
+@mixin input {
+  padding: v.$input-padding;
+
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-height: v.$input-height;
+
+  color: v.$input-color;
+  font-family: v.$input-font-family;
+  font-size: v.$input-font-size;
+  font-style: v.$input-font-style;
+  line-height: v.$input-line-height;
+
+  border: v.$input-border;
+  border-radius: v.$input-border-radius;
+  background-color: v.$input-bgcolor;
+
+  @if v.$input-box-shadow !=none {
+    box-shadow: v.$input-box-shadow;
+  }
+
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  &:focus {
+    outline: none;
+    @include inputFocus;
+  }
+}

package/scss/components/form/_radio.scss

@@ -1,27 +1,20 @@
 @use 'sass:math';
+@use '../../mixins/breakpoint';
+@use '../../mixins/loop';
+@use '../../variables' as v;
+@use '../../functions' as fn;
+@use 'mixin' as m;
 
 /**
  * Radio
  */
 
-$radio-size:                  $checkbox-size !default;
-$radio-bgcolor:               $checkbox-bgcolor !default;
-$radio-border-color:          $checkbox-border-color !default;
-$radio-box-shadow:            $checkbox-box-shadow !default;
-$radio-checked-color:         $input-color !default;
-$radio-checked-bgcolor:       $radio-bgcolor !default;
-$radio-checked-border-color:  $radio-border-color !default;
-
-$use-radio-animation: $use-checkbox-animation !default;
-$radio-sizes: $checkbox-sizes !default;
-$radio-breakpoints-classes: $checkbox-breakpoints-classes !default;
-
 @mixin radio-size($size) {
   & + label {
     &::after {
       margin-right: math.div($size, 3);
     }
-    & + [#{$loop-component-prefix}-form~="radio"] + label { margin-top: math.div($size, 3); }
+    & + [#{v.$loop-component-prefix}-form~="radio"] + label { margin-top: math.div($size, 3); }
   }
 
   & + label::after,
@@ -31,7 +24,7 @@ $radio-breakpoints-classes: $checkbox-breakpoints-classes !default;
   }
 }
 
-[#{$loop-component-prefix}-form~="radio"] {
+[#{v.$loop-component-prefix}-form~="radio"] {
   position: absolute;
   opacity: 0;
 
@@ -41,7 +34,7 @@ $radio-breakpoints-classes: $checkbox-breakpoints-classes !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;
@@ -49,7 +42,7 @@ $radio-breakpoints-classes: $checkbox-breakpoints-classes !default;
       left: 0;
       content: '';
       border-radius: 50%;
-      @if $use-radio-animation {
+      @if v.$use-radio-animation {
         transform: scale(1.5);
         transition: transform 300ms ease-in-out, background-color 300ms ease-in-out;
       }
@@ -58,45 +51,45 @@ $radio-breakpoints-classes: $checkbox-breakpoints-classes !default;
       display: flex;
       order:-1;
       content:'';
-      border: 1px solid $radio-border-color;
+      border: 1px solid v.$radio-border-color;
       border-radius: 50%;
-      background-color: $radio-bgcolor;
-      box-shadow: $radio-box-shadow;
+      background-color: v.$radio-bgcolor;
+      box-shadow: v.$radio-box-shadow;
     }
   }
 
   &:checked + label {
     &::before {
-      background-color: $radio-checked-color;
+      background-color: v.$radio-checked-color;
       transform: scale(0.5);
     }
     &::after {
-      background-color: $radio-checked-bgcolor;
-      border-color: $radio-checked-border-color;
+      background-color: v.$radio-checked-bgcolor;
+      border-color: v.$radio-checked-border-color;
     }
   }
 
-  &:focus + label::after { @extend %inputFocus; }
+  &:focus + label::after { @include m.inputFocus; }
 
-  @include radio-size($radio-size);
+  @include radio-size(v.$radio-size);
 
-  @if isMap($radio-sizes) {
-    @each $size_name, $size_value in $radio-sizes {
-      &[#{$loop-component-prefix}-form~="#{$size_name}"] { @include radio-size($size_value) }
+  @if fn.isMap(v.$radio-sizes) {
+    @each $size_name, $size_value in v.$radio-sizes {
+      &[#{v.$loop-component-prefix}-form~="#{$size_name}"] { @include radio-size($size_value) }
     }
 
-    @if isNotEmpty($radio-breakpoints-classes) {
-      @each $breakpoint in $radio-breakpoints-classes {
-        @include breakpoint($breakpoint) {
-          @each $size_name, $size_value in $radio-sizes {
+    @if fn.isNotEmpty(v.$radio-breakpoints-classes) {
+      @each $breakpoint in v.$radio-breakpoints-classes {
+        @include breakpoint.from($breakpoint) {
+          @each $size_name, $size_value in v.$radio-sizes {
             $suffix: \@#{$breakpoint};
-            &[#{$loop-component-prefix}-form~="#{$size_name}#{$suffix}"] { @include radio-size($size_value) }
+            &[#{v.$loop-component-prefix}-form~="#{$size_name}#{$suffix}"] { @include radio-size($size_value) }
           }
         }
       }
     }
   }
 
-  @include loop($border-colors, 'border-color', '&[class*="border', true, '"] + label::after');
-  @include loopMapKeys($border-colors-classes, $colors, 'border-color', '&[class*="border', true, '"] + label::after');
+  @include loop.loop(v.$border-colors, 'border-color', '&[class*="border', true, '"] + label::after');
+  @include loop.loopMapKeys(v.$border-colors-classes, v.$colors, 'border-color', '&[class*="border', true, '"] + label::after');
 }