@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/sass/_corefiles.scss

@@ -1,60 +1,53 @@
-@use "sass:math";
-@use "_func" as *;
-
-@mixin bsgrid(){
-  @if $disable-bs-grid == "false" {
+@use 'sass:math';
+@use '_func' as *;
 
+@mixin bsgrid() {
+  @if $disable-bs-grid == 'false' {
     @content;
-  }
-  @else {
+  } @else {
     // Grid Disabled
   }
 }
 
 @layer reset, elements, components, templates, utilities, overrides;
 
-
-$root: ":root"!default;
-$layers: "true"!default;
+$root: ':root' !default;
+$layers: 'true' !default;
 
 // Foundations
 @include layer('reset') {
-  
-  @import "foundations/root.scss";
-  @import "foundations/reboot.scss";
-  @import "foundations/grid.scss";
+  @import 'foundations/root.scss';
+  @import 'foundations/reboot.scss';
+  @import 'foundations/grid.scss';
 }
 
-@include bsgrid(){
-  @import "foundations/bs_grid.scss";
+@include bsgrid() {
+  @import 'foundations/bs_grid.scss';
 }
 
 @include layer('elements') {
-  @import "_elements.scss";
+  @import '_elements.scss';
 }
 
 @include layer('components') {
-
   // Deal with preloaded state of native components
-  @import "_components.scss";
-
+  @import '_components.scss';
 }
 
 @include layer('templates') {
-  @import "templates/form.scss";
-  @import "templates/auth.scss";
+  @import 'templates/form.scss';
+  @import 'templates/auth.scss';
 }
 
 @include layer('utilities') {
-    
-  @import "_utilities.scss";
+  @import '_utilities.scss';
 }
 
 @include layer('overrides') {
   @media (prefers-reduced-motion) {
-   * {
-    transition: unset;
-    animation: none;
-   }
+    * {
+      transition: unset;
+      animation: none;
+    }
   }
-}
+}

package/assets/sass/_elements.scss

@@ -1,23 +1,23 @@
-@import "elements/brand.scss";
-@import "elements/icons.scss";
-@import "elements/media.scss";
-@import "elements/type.scss";
+@import 'elements/brand.scss';
+@import 'elements/icons.scss';
+@import 'elements/media.scss';
+@import 'elements/type.scss';
 // elements
-@import "elements/lists.scss";
-@import "elements/tooltips.scss";
-@import "elements/container.scss";
-@import "elements/table.element.scss";
+@import 'elements/lists.scss';
+@import 'elements/tooltips.scss';
+@import 'elements/container.scss';
+@import 'elements/table.element.scss';
 
-@import "elements/links.scss";
-@import "elements/buttons";
-@import "elements/dialog.scss";
-@import "elements/popover.scss";
-@import "elements/modal.scss";
-@import "elements/admin-panel.scss";
-  
-@import "elements/forms.scss";
+@import 'elements/links.scss';
+@import 'elements/buttons';
+@import 'elements/dialog.scss';
+@import 'elements/popover.scss';
+@import 'elements/modal.scss';
+@import 'elements/admin-panel.scss';
 
-@import "elements/badge-tag.scss";
-@import "elements/details.scss";
+@import 'elements/forms.scss';
 
-@import "elements/progress.scss";
+@import 'elements/badge-tag.scss';
+@import 'elements/details.scss';
+
+@import 'elements/progress.scss';

package/assets/sass/_fonts.scss

@@ -2,24 +2,27 @@ $fontPath: '../fonts/' !default;
 
 @font-face {
   font-family: 'Qanelas';
-  src: url($fontPath+'qanelas-medium-webfont.woff2') format('woff2'),
-       url($fontPath+'qanelas-medium-webfont.woff') format('woff');
+  src:
+    url($fontPath + 'qanelas-medium-webfont.woff2') format('woff2'),
+    url($fontPath + 'qanelas-medium-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Qanelas';
-  src: url($fontPath+'qanelas-semibold-webfont.woff2') format('woff2'),
-       url($fontPath+'qanelas-semibold-webfont.woff') format('woff');
+  src:
+    url($fontPath + 'qanelas-semibold-webfont.woff2') format('woff2'),
+    url($fontPath + 'qanelas-semibold-webfont.woff') format('woff');
   font-weight: bold;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Qanelas';
-  src: url($fontPath+'qanelas-bold-webfont.woff2') format('woff2'),
-       url($fontPath+'qanelas-bold-webfont.woff') format('woff');
+  src:
+    url($fontPath + 'qanelas-bold-webfont.woff2') format('woff2'),
+    url($fontPath + 'qanelas-bold-webfont.woff') format('woff');
   font-weight: 900;
   font-style: normal;
-}
+}

package/assets/sass/_func.scss

@@ -1,20 +1,20 @@
-$compatible: 'false'!default;
-$mobileOnly: 'false'!default;
-$darkMode: 'true'!default;
-$layers: 'true'!default;
-$optionalText: 'true'!default;
+$compatible: 'false' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+$layers: 'true' !default;
+$optionalText: 'true' !default;
 
 // Declare global vars variable
-$vars: ()!default;
-$varsSM: ()!default;
-$varsMD: ()!default;
+$vars: () !default;
+$varsSM: () !default;
+$varsMD: () !default;
 
 $prefix: '';
 
-$enable-new-grid: "false"!default;
-$disable-bs-grid: "false"!default;
+$enable-new-grid: 'false' !default;
+$disable-bs-grid: 'false' !default;
 
-@import "_functions/functions";
-@import "_functions/variables";
-@import "_functions/mixins";
-@import "_functions/utilities";
+@import '_functions/functions';
+@import '_functions/variables';
+@import '_functions/mixins';
+@import '_functions/utilities';

package/assets/sass/_functions/functions.scss

@@ -1,5 +1,5 @@
-@use "sass:math";
-@use "sass:map";
+@use 'sass:math';
+@use 'sass:map';
 
 // #region from Bootstrap
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
@@ -10,7 +10,7 @@
   $prev-key: null;
   $prev-num: null;
   @each $key, $num in $map {
-    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
+    @if $prev-num == null or unit($num) == '%' or unit($prev-num) == '%' {
       // Do nothing
     } @else if not comparable($prev-num, $num) {
       @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -24,7 +24,7 @@
 
 // Starts at zero
 // Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
   @if length($map) > 0 {
     $values: map-values($map);
     $first-value: nth($values, 1);
@@ -41,9 +41,10 @@
 
 // stylelint-disable scss/dollar-variable-pattern
 @function rgba-css-var($identifier, $target) {
-  @if $identifier == "body" and $target == "bg" {
+  @if $identifier == 'body' and $target == 'bg' {
     @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
-  } @if $identifier == "body" and $target == "text" {
+  }
+  @if $identifier == 'body' and $target == 'text' {
     @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
   } @else {
     @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
@@ -57,10 +58,15 @@
     // allow to pass the $key and $value of the map as an function argument
     $_args: ();
     @each $arg in $args {
-      $_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
+      $_args: append($_args, if($arg == '$key', $key, if($arg == '$value', $value, $arg)));
     }
 
-    $_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
+    $_map: map-merge(
+      $_map,
+      (
+        $key: call(get-function($func), $_args...),
+      )
+    );
   }
 
   @return $_map;
@@ -81,7 +87,7 @@
   $result: ();
   @each $key, $value in $map {
     @if $key != 0 {
-      $result: map-merge($result, ("n" + $key: (-$value)));
+      $result: map-merge($result, ('n' + $key: (-$value)));
     }
   }
   @return $result;
@@ -92,7 +98,12 @@
   $result: ();
   @each $key, $value in $map {
     @if (index($values, $key) != null) {
-      $result: map-merge($result, ($key: $value));
+      $result: map-merge(
+        $result,
+        (
+          $key: $value,
+        )
+      );
     }
   }
   @return $result;
@@ -116,11 +127,12 @@
 // @param {String} $search - Substring to replace
 // @param {String} $replace ('') - New value
 // @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
+@function str-replace($string, $search, $replace: '') {
   $index: str-index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
   }
 
   @return $string;
@@ -131,11 +143,11 @@
 // Requires the use of quotes around data URIs.
 
 @function escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
+  @if str-index($string, 'data:image/svg+xml') {
     @each $char, $encoded in $escaped-characters {
       // Do not escape the url brackets
-      @if str-index($string, "url(") == 1 {
-        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      @if str-index($string, 'url(') == 1 {
+        $string: url('#{str-replace(str-slice($string, 6, -3), $char, $encoded)}');
       } @else {
         $string: str-replace($string, $char, $encoded);
       }
@@ -150,9 +162,29 @@
 
 // A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
 // stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
-$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
-
-@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
+$_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.0027 0.003 0.0033 0.0037 0.004 0.0044
+  0.0048 0.0052 0.0056 0.006 0.0065 0.007 0.0075 0.008 0.0086 0.0091 0.0097 0.0103 0.011 0.0116 0.0123 0.013 0.0137
+  0.0144 0.0152 0.016 0.0168 0.0176 0.0185 0.0194 0.0203 0.0212 0.0222 0.0232 0.0242 0.0252 0.0262 0.0273 0.0284 0.0296
+  0.0307 0.0319 0.0331 0.0343 0.0356 0.0369 0.0382 0.0395 0.0409 0.0423 0.0437 0.0452 0.0467 0.0482 0.0497 0.0513 0.0529
+  0.0545 0.0561 0.0578 0.0595 0.0612 0.063 0.0648 0.0666 0.0685 0.0704 0.0723 0.0742 0.0762 0.0782 0.0802 0.0823 0.0844
+  0.0865 0.0887 0.0908 0.0931 0.0953 0.0976 0.0999 0.1022 0.1046 0.107 0.1095 0.1119 0.1144 0.117 0.1195 0.1221 0.1248
+  0.1274 0.1301 0.1329 0.1356 0.1384 0.1413 0.1441 0.147 0.15 0.1529 0.1559 0.159 0.162 0.1651 0.1683 0.1714 0.1746
+  0.1779 0.1812 0.1845 0.1878 0.1912 0.1946 0.1981 0.2016 0.2051 0.2086 0.2122 0.2159 0.2195 0.2232 0.227 0.2307 0.2346
+  0.2384 0.2423 0.2462 0.2502 0.2542 0.2582 0.2623 0.2664 0.2705 0.2747 0.2789 0.2831 0.2874 0.2918 0.2961 0.3005 0.305
+  0.3095 0.314 0.3185 0.3231 0.3278 0.3325 0.3372 0.3419 0.3467 0.3515 0.3564 0.3613 0.3663 0.3712 0.3763 0.3813 0.3864
+  0.3916 0.3968 0.402 0.4072 0.4125 0.4179 0.4233 0.4287 0.4342 0.4397 0.4452 0.4508 0.4564 0.4621 0.4678 0.4735 0.4793
+  0.4851 0.491 0.4969 0.5029 0.5089 0.5149 0.521 0.5271 0.5333 0.5395 0.5457 0.552 0.5583 0.5647 0.5711 0.5776 0.5841
+  0.5906 0.5972 0.6038 0.6105 0.6172 0.624 0.6308 0.6376 0.6445 0.6514 0.6584 0.6654 0.6724 0.6795 0.6867 0.6939 0.7011
+  0.7084 0.7157 0.7231 0.7305 0.7379 0.7454 0.7529 0.7605 0.7682 0.7758 0.7835 0.7913 0.7991 0.807 0.8148 0.8228 0.8308
+  0.8388 0.8469 0.855 0.8632 0.8714 0.8796 0.8879 0.8963 0.9047 0.9131 0.9216 0.9301 0.9387 0.9473 0.956 0.9647 0.9734
+  0.9823 0.9911 1;
+
+@function color-contrast(
+  $background,
+  $color-contrast-dark: $color-contrast-dark,
+  $color-contrast-light: $color-contrast-light,
+  $min-contrast-ratio: $min-contrast-ratio
+) {
   $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
   $max-ratio: 0;
   $max-ratio-color: null;
@@ -176,7 +208,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $l1: luminance($background);
   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+  @return if($l1 > $l2, divide($l1 + 0.05, $l2 + 0.05), divide($l2 + 0.05, $l1 + 0.05));
 }
 
 // Return WCAG2.1 relative luminance
@@ -184,17 +216,22 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 @function luminance($color) {
   $rgb: (
-    "r": red($color),
-    "g": green($color),
-    "b": blue($color)
+    'r': red($color),
+    'g': green($color),
+    'b': blue($color),
   );
 
   @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
-    $rgb: map-merge($rgb, ($name: $value));
+    $value: if(divide($value, 255) < 0.03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+    $rgb: map-merge(
+      $rgb,
+      (
+        $name: $value,
+      )
+    );
   }
 
-  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+  @return (map-get($rgb, 'r') * 0.2126) + (map-get($rgb, 'g') * 0.7152) + (map-get($rgb, 'b') * 0.0722);
 }
 
 // Return opaque color
@@ -234,7 +271,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     @return $value1 + $value2;
   }
 
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(' + ') + $value2);
 }
 
 @function subtract($value1, $value2, $return-calc: true) {
@@ -255,10 +292,10 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   }
 
   @if type-of($value2) != number {
-    $value2: unquote("(") + $value2 + unquote(")");
+    $value2: unquote('(') + $value2 + unquote(')');
   }
 
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(' - ') + $value2);
 }
 
 @function divide($dividend, $divisor, $precision: 10) {
@@ -281,7 +318,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
       $quotient: $quotient + 1;
     }
     $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
+    $factor: $factor * 0.1;
     $remainder: $remainder * 10;
     $precision: $precision - 1;
     @if ($precision < 0 and $remainder >= $divisor * 5) {
@@ -292,10 +329,10 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $dividend-unit: unit($dividend);
   $divisor-unit: unit($divisor);
   $unit-map: (
-    "px": 1px,
-    "rem": 1rem,
-    "em": 1em,
-    "%": 1%
+    'px': 1px,
+    'rem': 1rem,
+    'em': 1em,
+    '%': 1%,
   );
   @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
     $result: $result * map-get($unit-map, $dividend-unit);
@@ -304,56 +341,51 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 }
 // #endregion
 
-
-
-@function spacing($int){
+@function spacing($int) {
   @return map.get($spacers, $int);
 }
 
 @function pow($x, $n) {
   $ret: 1;
-    
+
   @if $n >= 0 {
     @for $i from 1 through $n {
       $ret: $ret * $x;
-    } 
+    }
   } @else {
     @for $i from $n to 0 {
-      $ret: math.div($ret,$x);
+      $ret: math.div($ret, $x);
     }
   }
-  
+
   @return $ret;
 }
 
 @function to-fixed($float, $digits: 2) {
   $sass-precision: 5;
-  
+
   @if $digits > $sass-precision {
     @warn "Sass sets default precision to #{$sass-precision} digits, and there is no way to change that for now."
     + "The returned number will have #{$sass-precision} digits, even if you asked for `#{$digits}`."
     + "See https://github.com/sass/sass/issues/1122 for further informations.";
   }
-  
+
   $pow: pow(10, $digits);
-  @return math.div(round($float * $pow),$pow);
+  @return math.div(round($float * $pow), $pow);
 }
 
 // converts pixels to em (context sets the current size of the font)
-@function em($pixels, $context: 16)
-{
-	@return #{math.div($pixels,$context)}em;
+@function em($pixels, $context: 16) {
+  @return #{math.div($pixels, $context)}em;
 }
 
-@function rem($pixels, $context: 16)
-{
-	@return #{math.div($pixels,$context)}rem;
+@function rem($pixels, $context: 16) {
+  @return #{math.div($pixels, $context)}rem;
 }
 
-@function vw($pixels, $context: 16)
-{
-	$size: math.div(16,$pixels) * 100;
-	@return #{to-fixed($size,5)}vw;
+@function vw($pixels, $context: 16) {
+  $size: math.div(16, $pixels) * 100;
+  @return #{to-fixed($size, 5)}vw;
 }
 
 @function strip-px($number) {
@@ -365,36 +397,30 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 }
 
 // prevent colours being changed via sass functions
-@function darken($colour, $percent)
-{
-	@return $colour;
+@function darken($colour, $percent) {
+  @return $colour;
 }
 
-@function lighten($colour, $percent)
-{
-	@return $colour;
+@function lighten($colour, $percent) {
+  @return $colour;
 }
 
-@function saturate($colour, $percent)
-{
-	@return $colour;
+@function saturate($colour, $percent) {
+  @return $colour;
 }
-@function desaturate($colour, $percent)
-{
-	@return $colour;
+@function desaturate($colour, $percent) {
+  @return $colour;
 }
 
-@function adjust-hue($colour, $percent)
-{
-	@return $colour;
+@function adjust-hue($colour, $percent) {
+  @return $colour;
 }
 
 @function tint($colour, $percentage) {
   @return mix(white, $colour, $percentage);
 }
-@function shade($colour, $percent)
-{
-	@return $colour;
+@function shade($colour, $percent) {
+  @return $colour;
 }
 
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
@@ -403,47 +429,46 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 }
 
 // Trims the start/left of the string:
-@function str-trimStart ($str) {
+@function str-trimStart($str) {
   @if (str-slice($str, 1, 1) == ' ') {
-      @return str-trimStart(str-slice($str, 2));
+    @return str-trimStart(str-slice($str, 2));
   } @else {
-      @return $str;
+    @return $str;
   }
 }
 
 // Trims the end/right of the string:
-@function str-trimEnd ($str) {
-@if (str-slice($str, str-length($str), -1) == ' ') {
-      @return str-trimEnd(str-slice($str, 1, -2));
+@function str-trimEnd($str) {
+  @if (str-slice($str, str-length($str), -1) == ' ') {
+    @return str-trimEnd(str-slice($str, 1, -2));
   } @else {
-      @return $str;
+    @return $str;
   }
 }
 
 // Trims both the start and end of the string:
-@function str-trim ($str) {
-@return str-trimStart(str-trimEnd($str));
+@function str-trim($str) {
+  @return str-trimStart(str-trimEnd($str));
 }
 
 @function str-split($string, $separator) {
   // empty array/list
   $split-arr: ();
   // first index of separator in string
-  $index : str-index($string, $separator);
+  $index: str-index($string, $separator);
   // loop through string
   @while $index != null {
-      // get the substring from the first character to the separator
-      $item: str-slice($string, 1, $index - 1);
-      // push item to array
-      $split-arr: append($split-arr, str-trim($item));
-      // remove item and separator from string
-      $string: str-slice($string, $index + 1);
-      // find new index of separator
-      $index : str-index($string, $separator);
+    // get the substring from the first character to the separator
+    $item: str-slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: append($split-arr, str-trim($item));
+    // remove item and separator from string
+    $string: str-slice($string, $index + 1);
+    // find new index of separator
+    $index: str-index($string, $separator);
   }
   // add the remaining string to list (the last item)
   $split-arr: append($split-arr, str-trim($string));
 
   @return $split-arr;
 }
-