oo-loop 0.5.0 → 0.6.0

package/scss/components/_button.scss

@@ -1,64 +1,36 @@
 @use 'sass:color';
+@use 'sass:map';
+@use '../variables' as v;
+@use '../functions' as fn;
 
 /**
  * Button
  */
-$btn-colors: () !default;
-$btn-colors-classes: $colors-classes !default;
 
-$btn-color:          $color-base !default;
-$btn-color-hover:    $btn-color !default;
-$btn-bgcolor:        #fff !default;
-$btn-bgcolor-hover:  darken($btn-bgcolor, 10%) !default;
-$btn-bgcolor-active: darken($btn-bgcolor, 12%) !default;
-$btn-border-color:   #eee !default;
-
-$btn-padding:        .415em 1.2em !default; // relative to the size of the button
-$btn-padding-sizes: () !default;
-
-$btn-font-family:    $font-family-base !default;
-$btn-font-size:      $font-size-base !default;
-$btn-font-weight:    700 !default;
-$btn-text-transform: initial !default;
-$btn-border-radius:  .2em !default; // relative to the size of the button
-$btn-box-shadow:     1px 1px 1px 0 #999!default;
-
-
-$btn-outline-colors:         $btn-colors !default;
-$btn-outline-colors-classes: $btn-colors-classes !default;
-
-$btn-outline-color:          $btn-color !default; // set inherit to get the colors from the borders
-$btn-outline-padding:        $btn-padding !default;
-$btn-outline-font-family:    $btn-font-family !default;
-$btn-outline-font-weight:    $btn-font-weight !default;
-$btn-outline-text-transform: $btn-text-transform !default;
-$btn-outline-box-shadow:     none !default;
-
-
-[#{$loop-component-prefix}-button] {
-  padding: $btn-padding;
+[#{v.$loop-component-prefix}-button] {
+  padding: v.$btn-padding;
   display: inline-block;
 
-  color: $btn-color;
+  color: v.$btn-color;
   line-height: 1.4;
   // letter-spacing: .05rem;
 
-  font-family: $btn-font-family;
-  font-size: $btn-font-size;
-  font-weight: $btn-font-weight;
+  font-family: v.$btn-font-family;
+  font-size: v.$btn-font-size;
+  font-weight: v.$btn-font-weight;
 
   text-align: center;
   text-decoration: none !important;
-  @if $btn-text-transform != initial {
-      text-transform: $btn-text-transform;
+  @if v.$btn-text-transform != initial {
+      text-transform: v.$btn-text-transform;
   }
   vertical-align: middle;
   // white-space: nowrap;
 
-  border: 1px solid $btn-border-color;
-  border-radius: $btn-border-radius;
-  background-color: $btn-bgcolor;
-  box-shadow: $btn-box-shadow;
+  border: 1px solid v.$btn-border-color;
+  border-radius: v.$btn-border-radius;
+  background-color: v.$btn-bgcolor;
+  box-shadow: v.$btn-box-shadow;
 
   cursor: pointer;
   user-select: none;
@@ -72,12 +44,12 @@ $btn-outline-box-shadow:     none !default;
 
   &:hover,
   &:focus {
-    color: $btn-color-hover;
-    background-color: $btn-bgcolor-hover;
+    color: v.$btn-color-hover;
+    background-color: v.$btn-bgcolor-hover;
   }
   &:active {
-    background-color: $btn-bgcolor-active;
-    box-shadow: inset 1px 1px 1px 0 color.adjust($btn-bgcolor, $lightness: -20%);
+    background-color: v.$btn-bgcolor-active;
+    box-shadow: inset 1px 1px 1px 0 color.adjust(v.$btn-bgcolor, $lightness: -20%);
   }
 
   &.full {
@@ -87,15 +59,15 @@ $btn-outline-box-shadow:     none !default;
 }
 
 @mixin paintButton($color-value) {
-  color: if(isBright($color-value), $color-base, #fff);
+  color: if(fn.isBright($color-value), v.$color-base, #fff);
   background-color: $color-value;
 
-  @if $btn-border-color != transparent {
+  @if v.$btn-border-color != transparent {
     border-color: $color-value;
   }
   &:hover,
   &:focus {
-    color: if(isBright($color-value), $color-base, #fff);
+    color: if(fn.isBright($color-value), v.$color-base, #fff);
     border-color: color.adjust($color-value, $lightness: -10%);
     background-color: color.adjust($color-value, $lightness: -10%);
   }
@@ -106,75 +78,75 @@ $btn-outline-box-shadow:     none !default;
   }
 }
 
-@if isNotEmpty($btn-colors-classes) {
-  @each $color in $btn-colors-classes {
-    [#{$loop-component-prefix}-button~="#{$color}"] {
-      @include paintButton(map-get($colors, $color));
+@if fn.isNotEmpty(v.$btn-colors-classes) {
+  @each $color in v.$btn-colors-classes {
+    [#{v.$loop-component-prefix}-button~="#{$color}"] {
+      @include paintButton(map.get(v.$colors, $color));
     }
   }
 }
 
-@if isNotEmpty($btn-colors) and isMap($btn-colors) {
-  @each $name, $value in $btn-colors {
-    [#{$loop-component-prefix}-button~="#{$name}"] {
+@if fn.isNotEmpty(v.$btn-colors) and fn.isMap(v.$btn-colors) {
+  @each $name, $value in v.$btn-colors {
+    [#{v.$loop-component-prefix}-button~="#{$name}"] {
       @include paintButton($value);
     }
   }
 }
 
 @mixin paintButtonOutline($color-value) {
-  @if $btn-outline-color == inherit {
+  @if v.$btn-outline-color == inherit {
     color: $color-value;
   }
   border-color: $color-value;
 
   &:hover,
   &:focus {
-    color: if(isBright($color-value), $color-base, #fff);
+    color: if(fn.isBright($color-value), v.$color-base, #fff);
     border-color: color.adjust($color-value, $lightness: -10%);
     background-color: color.adjust($color-value, $lightness: -10%);
   }
   &:active {
-    color: if(isBright($color-value), $color-base, #fff);
+    color: if(fn.isBright($color-value), v.$color-base, #fff);
     border-color: color.adjust($color-value, $lightness: -12%);
     background-color: color.adjust($color-value, $lightness: -12%);
     box-shadow: inset  1px 1px 1px 0 color.adjust($color-value, $lightness: -25%);
   }
 }
 
-@if isNotEmpty($btn-outline-colors-classes) or (isNotEmpty($btn-outline-colors) and isMap($btn-outline-colors)) {
-  [#{$loop-component-prefix}-button~="outline"] {
+@if fn.isNotEmpty(v.$btn-outline-colors-classes) or (fn.isNotEmpty(v.$btn-outline-colors) and fn.isMap(v.$btn-outline-colors)) {
+  [#{v.$loop-component-prefix}-button~="outline"] {
     background-color: transparent;
 
-    @if $btn-outline-padding != $btn-padding {
-      padding: $btn-outline-padding
+    @if v.$btn-outline-padding != v.$btn-padding {
+      padding: v.$btn-outline-padding
     }
-    @if $btn-outline-font-family != $btn-font-family {
-      font-family: $btn-outline-font-family
+    @if v.$btn-outline-font-family != v.$btn-font-family {
+      font-family: v.$btn-outline-font-family
     }
-    @if $btn-outline-font-weight != $btn-font-weight {
-      font-weight: $btn-outline-font-weight
+    @if v.$btn-outline-font-weight != v.$btn-font-weight {
+      font-weight: v.$btn-outline-font-weight
     }
-    @if $btn-outline-text-transform != $btn-text-transform {
-      text-transform: $btn-outline-text-transform
+    @if v.$btn-outline-text-transform != v.$btn-text-transform {
+      text-transform: v.$btn-outline-text-transform
     }
-    @if $btn-outline-color != inherit {
-      color: $btn-outline-color;
+    @if v.$btn-outline-color != inherit {
+      color: v.$btn-outline-color;
     }
-    @if $btn-box-shadow != $btn-outline-box-shadow {
-      box-shadow: $btn-outline-box-shadow;
+    @if v.$btn-box-shadow != v.$btn-outline-box-shadow {
+      box-shadow: v.$btn-outline-box-shadow;
     }
 
-    @if isNotEmpty($btn-outline-colors-classes) {
-      @each $color in $btn-outline-colors-classes {
-        &[#{$loop-component-prefix}-button~="#{$color}"] {
-          @include paintButtonOutline(map-get($colors, $color));
+    @if fn.isNotEmpty(v.$btn-outline-colors-classes) {
+      @each $color in v.$btn-outline-colors-classes {
+        &[#{v.$loop-component-prefix}-button~="#{$color}"] {
+          @include paintButtonOutline(map.get(v.$colors, $color));
         }
       }
     }
-    @if isNotEmpty($btn-outline-colors) and isMap($btn-outline-colors) {
-      @each $name, $value in $btn-colors {
-        &[#{$loop-component-prefix}-button~="#{$name}"] {
+    @if fn.isNotEmpty(v.$btn-outline-colors) and fn.isMap(v.$btn-outline-colors) {
+      @each $name, $value in v.$btn-colors {
+        &[#{v.$loop-component-prefix}-button~="#{$name}"] {
           @include paintButtonOutline($value);
         }
       }
@@ -182,9 +154,9 @@ $btn-outline-box-shadow:     none !default;
   }
 }
 
-@if isNotEmpty($btn-padding-sizes) {
-  @each $name, $padding in $btn-padding-sizes {
-    [#{$loop-component-prefix}-button~="#{$name}"] {
+@if fn.isNotEmpty(v.$btn-padding-sizes) {
+  @each $name, $padding in v.$btn-padding-sizes {
+    [#{v.$loop-component-prefix}-button~="#{$name}"] {
       padding: #{$padding};
     }
   }

package/scss/components/_columns.scss

@@ -1,35 +1,18 @@
+@use 'sass:list';
 @use 'sass:math';
+@use '../variables' as v;
+@use '../functions' as fn;
+@use '../mixins/breakpoint';
 
 /**
  * Column
  */
 
-$columns-gutter: 2.4rem !default;
-$columns-system: 12 !default;
-$use-columns-order: true !default;
-$use-columns-offset: false !default;
-$use-columns-alignment: true !default;
-$use-columns-self-alignment: true !default;
-$use-columns-child-alignment: true !default;
-
-$use-columns-alignment-breakpoints: true !default;
-$use-columns-self-alignment-breakpoints: true !default;
-$use-columns-self-adjustment-breakpoints: false !default;
-
-$columns-gutter-sizes: (
-  'less' : 0,
-  'small': 1.6rem,
-) !default;
-$columns-gutter-sizes-breakpoints-classes: () !default;
-
-$columns-v-gutter-sizes: $columns-gutter-sizes !default;
-$columns-v-gutter-sizes-breakpoints-classes: $columns-gutter-sizes-breakpoints-classes !default;
-
 // row
-[#{$loop-component-prefix}-column~="row"] {
+[#{v.$loop-component-prefix}-column~="row"] {
   position: relative;
-  left: -#{$columns-gutter};
-  margin-right: -#{$columns-gutter};
+  left: -#{v.$columns-gutter};
+  margin-right: -#{v.$columns-gutter};
 
   display: flex;
   flex: 0 1 auto;
@@ -39,9 +22,9 @@ $columns-v-gutter-sizes-breakpoints-classes: $columns-gutter-sizes-breakpoints-c
 
 
 // columns
-[#{$loop-component-prefix}-column*="col"] {
-  padding-left: $columns-gutter;
-  padding-bottom: $columns-gutter;
+[#{v.$loop-component-prefix}-column*="col"] {
+  padding-left: v.$columns-gutter;
+  padding-bottom: v.$columns-gutter;
 
   flex-shrink: 0;
   flex-grow: 1;
@@ -52,102 +35,102 @@ $columns-v-gutter-sizes-breakpoints-classes: $columns-gutter-sizes-breakpoints-c
 }
 
 // reponsives classes starting from default value
-@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};
     }
 
     // auto col
-    [#{$loop-component-prefix}-column~="col#{$suffix}"] {
+    [#{v.$loop-component-prefix}-column~="col#{$suffix}"] {
       flex-basis: 0;
       max-width: 100%;
     }
 
     // columns
-    @for $i from 1 through $columns-system {
-      [#{$loop-component-prefix}-column~="col-#{$i}#{$suffix}"] {
-        flex-basis: percentage(math.div($i, $columns-system));
-        max-width: percentage(math.div($i, $columns-system));
+    @for $i from 1 through v.$columns-system {
+      [#{v.$loop-component-prefix}-column~="col-#{$i}#{$suffix}"] {
+        flex-basis: math.percentage(math.div($i, v.$columns-system));
+        max-width: math.percentage(math.div($i, v.$columns-system));
       }
     }
 
-    @if $use-columns-self-adjustment-breakpoints == true or isEmpty($suffix) {
+    @if v.$use-columns-self-adjustment-breakpoints == true or fn.isEmpty($suffix) {
       // adjust to the size of the content
-      [#{$loop-component-prefix}-column~="self-adjust#{$suffix}"] {
+      [#{v.$loop-component-prefix}-column~="self-adjust#{$suffix}"] {
         min-width: auto;
         flex-grow: 0;
         flex-basis: auto;
       }
     }
 
-    @if $use-columns-alignment == true
-      and ($use-columns-alignment-breakpoints == true or isEmpty($suffix)) {
+    @if v.$use-columns-alignment == true
+      and (v.$use-columns-alignment-breakpoints == true or fn.isEmpty($suffix)) {
       // horizontal alignment
-      [#{$loop-component-prefix}-column~="align-left#{$suffix}"]   { justify-content: flex-start; }
-      [#{$loop-component-prefix}-column~="align-center#{$suffix}"] { justify-content: center; }
-      [#{$loop-component-prefix}-column~="align-right#{$suffix}"]  { justify-content: flex-end; }
-      [#{$loop-component-prefix}-column~="align-evenly#{$suffix}"] { justify-content: space-evenly; }
-      [#{$loop-component-prefix}-column~="align-between#{$suffix}"]{ justify-content: space-between; }
+      [#{v.$loop-component-prefix}-column~="align-left#{$suffix}"]   { justify-content: flex-start; }
+      [#{v.$loop-component-prefix}-column~="align-center#{$suffix}"] { justify-content: center; }
+      [#{v.$loop-component-prefix}-column~="align-right#{$suffix}"]  { justify-content: flex-end; }
+      [#{v.$loop-component-prefix}-column~="align-evenly#{$suffix}"] { justify-content: space-evenly; }
+      [#{v.$loop-component-prefix}-column~="align-between#{$suffix}"]{ justify-content: space-between; }
 
       // vertical alignment
-      [#{$loop-component-prefix}-column~="align-top#{$suffix}"]    { align-items: flex-start; }
-      [#{$loop-component-prefix}-column~="align-middle#{$suffix}"] { align-items: center; }
-      [#{$loop-component-prefix}-column~="align-bottom#{$suffix}"] { align-items: flex-end; }
+      [#{v.$loop-component-prefix}-column~="align-top#{$suffix}"]    { align-items: flex-start; }
+      [#{v.$loop-component-prefix}-column~="align-middle#{$suffix}"] { align-items: center; }
+      [#{v.$loop-component-prefix}-column~="align-bottom#{$suffix}"] { align-items: flex-end; }
     }
 
-    @if $use-columns-self-alignment == true
-      and ($use-columns-self-alignment-breakpoints == true or isEmpty($suffix)) {
+    @if v.$use-columns-self-alignment == true
+      and (v.$use-columns-self-alignment-breakpoints == true or fn.isEmpty($suffix)) {
           // horizontal alignment
-      [#{$loop-component-prefix}-column~="self-align-left#{$suffix}"]   { margin-left: initial; margin-right: initial; }
-      [#{$loop-component-prefix}-column~="self-align-center#{$suffix}"] { margin-left: auto; margin-right: auto; }
-      [#{$loop-component-prefix}-column~="self-align-right#{$suffix}"]  { margin-left: auto; margin-right: initial; }
+      [#{v.$loop-component-prefix}-column~="self-align-left#{$suffix}"]   { margin-left: initial; margin-right: initial; }
+      [#{v.$loop-component-prefix}-column~="self-align-center#{$suffix}"] { margin-left: auto; margin-right: auto; }
+      [#{v.$loop-component-prefix}-column~="self-align-right#{$suffix}"]  { margin-left: auto; margin-right: initial; }
 
       // vertical alignment
-      [#{$loop-component-prefix}-column~="self-align-top#{$suffix}"]    { align-self: flex-start; }
-      [#{$loop-component-prefix}-column~="self-align-middle#{$suffix}"] { align-self: center; }
-      [#{$loop-component-prefix}-column~="self-align-bottom#{$suffix}"] { align-self: flex-end; }
+      [#{v.$loop-component-prefix}-column~="self-align-top#{$suffix}"]    { align-self: flex-start; }
+      [#{v.$loop-component-prefix}-column~="self-align-middle#{$suffix}"] { align-self: center; }
+      [#{v.$loop-component-prefix}-column~="self-align-bottom#{$suffix}"] { align-self: flex-end; }
     }
   }
 }
 
 
-@if $use-columns-child-alignment == true {
-  [#{$loop-component-prefix}-column*="child-align-"] > * {
+@if v.$use-columns-child-alignment == true {
+  [#{v.$loop-component-prefix}-column*="child-align-"] > * {
     display: flex;
     flex-direction: column;
   }
 
   // horizontal alignment
-  [#{$loop-component-prefix}-column~="child-align-left"] > *    { align-items: flex-start; }
-  [#{$loop-component-prefix}-column~="child-align-center"] > *  { align-items: center; }
-  [#{$loop-component-prefix}-column~="child-align-right"] > *   { align-items: flex-end; }
+  [#{v.$loop-component-prefix}-column~="child-align-left"] > *    { align-items: flex-start; }
+  [#{v.$loop-component-prefix}-column~="child-align-center"] > *  { align-items: center; }
+  [#{v.$loop-component-prefix}-column~="child-align-right"] > *   { align-items: flex-end; }
 
   // vertical alignment
-  [#{$loop-component-prefix}-column~="child-align-top"] > *    { justify-content: flex-start; }
-  [#{$loop-component-prefix}-column~="child-align-middle"] > * { justify-content: center; }
-  [#{$loop-component-prefix}-column~="child-align-bottom"] > * { justify-content: flex-end; }
+  [#{v.$loop-component-prefix}-column~="child-align-top"] > *    { justify-content: flex-start; }
+  [#{v.$loop-component-prefix}-column~="child-align-middle"] > * { justify-content: center; }
+  [#{v.$loop-component-prefix}-column~="child-align-bottom"] > * { justify-content: flex-end; }
 }
 
 
 // responsive classes
-@each $class in $breakpoints-classes {
-  @include breakpoint($class) {
+@each $class in v.$breakpoints-classes {
+  @include breakpoint.from($class) {
     $suffix: \@#{$class};
 
     // order-0 to make sure it is first
-    @if $use-columns-order == true {
-      [#{$loop-component-prefix}-column~="order-0#{$suffix}"] { order: -1; }
+    @if v.$use-columns-order == true {
+      [#{v.$loop-component-prefix}-column~="order-0#{$suffix}"] { order: -1; }
     }
-    @for $i from 1 through $columns-system {
+    @for $i from 1 through v.$columns-system {
       // offset
-      @if $use-columns-offset == true {
-        [#{$loop-component-prefix}-column~="offset-#{$i}#{$suffix}"] { margin-left: percentage($i/$columns-system); }
+      @if v.$use-columns-offset == true {
+        [#{v.$loop-component-prefix}-column~="offset-#{$i}#{$suffix}"] { margin-left: math.percentage($i/v.$columns-system); }
       }
       // order
-      @if $use-columns-order == true {
-        [#{$loop-component-prefix}-column~="order-#{$i}#{$suffix}"] { order: $i; }
+      @if v.$use-columns-order == true {
+        [#{v.$loop-component-prefix}-column~="order-#{$i}#{$suffix}"] { order: $i; }
       }
     }
   }
@@ -155,9 +138,9 @@ $columns-v-gutter-sizes-breakpoints-classes: $columns-gutter-sizes-breakpoints-c
 
 
 // stretch
-[#{$loop-component-prefix}-column~="stretch"] {
+[#{v.$loop-component-prefix}-column~="stretch"] {
   align-items: stretch;
-  > [#{$loop-component-prefix}-column*="col"] {
+  > [#{v.$loop-component-prefix}-column*="col"] {
     display: flex;
     > * {
       width:100%;
@@ -165,18 +148,16 @@ $columns-v-gutter-sizes-breakpoints-classes: $columns-gutter-sizes-breakpoints-c
   }
 }
 
-
 // gutters
-$columns-gutter-sizes-breakpoints-classes: join('', $columns-gutter-sizes-breakpoints-classes);
-@each $class in $columns-gutter-sizes-breakpoints-classes {
-  @include breakpoint($class) {
-    $suffix: if(isEmpty($class), '', \@#{$class});
-    @each $gutter-name, $gutter-size in $columns-gutter-sizes {
-      [#{$loop-component-prefix}-column~="gutter-#{$gutter-name}#{$suffix}"] {
+@each $class in list.join('', v.$columns-gutter-sizes-breakpoints-classes) {
+  @include breakpoint.from($class) {
+    $suffix: if(fn.isEmpty($class), '', \@#{$class});
+    @each $gutter-name, $gutter-size in v.$columns-gutter-sizes {
+      [#{v.$loop-component-prefix}-column~="gutter-#{$gutter-name}#{$suffix}"] {
         left: -#{$gutter-size};
         margin-right: -#{$gutter-size};
 
-        > [#{$loop-component-prefix}-column*="col"] {
+        > [#{v.$loop-component-prefix}-column*="col"] {
           padding-bottom: $gutter-size;
           padding-left: $gutter-size;
         }
@@ -185,13 +166,12 @@ $columns-gutter-sizes-breakpoints-classes: join('', $columns-gutter-sizes-breakp
   }
 }
 
-$columns-v-gutter-sizes-breakpoints-classes: join('', $columns-v-gutter-sizes-breakpoints-classes);
-@each $class in $columns-v-gutter-sizes-breakpoints-classes {
-  @include breakpoint($class) {
-    $suffix: if(isEmpty($class), '', \@#{$class});
-    @each $gutter-name, $gutter-size in $columns-v-gutter-sizes {
-      [#{$loop-component-prefix}-column~="v-gutter-#{$gutter-name}#{$suffix}"] {
-        > [#{$loop-component-prefix}-column*="col"] {
+@each $class in list.join('', v.$columns-v-gutter-sizes-breakpoints-classes) {
+  @include breakpoint.from($class) {
+    $suffix: if(fn.isEmpty($class), '', \@#{$class});
+    @each $gutter-name, $gutter-size in v.$columns-v-gutter-sizes {
+      [#{v.$loop-component-prefix}-column~="v-gutter-#{$gutter-name}#{$suffix}"] {
+        > [#{v.$loop-component-prefix}-column*="col"] {
           padding-bottom: $gutter-size;
         }
       }
@@ -200,7 +180,7 @@ $columns-v-gutter-sizes-breakpoints-classes: join('', $columns-v-gutter-sizes-br
 }
 
 // clear
-[#{$loop-component-prefix}-column~="clear"] {
+[#{v.$loop-component-prefix}-column~="clear"] {
   flex-basis: 100%;
   max-width: 100%;
 }

package/scss/components/_form.scss

@@ -1,7 +1,5 @@
-@import
-  'form/input',
-  'form/select',
-  'form/checkbox',
-  'form/radio',
-  'form/toggle'
-;
+@forward 'form/input';
+@forward 'form/select';
+@forward 'form/checkbox';
+@forward 'form/radio';
+@forward 'form/toggle';