From 4ea044ae6b2e27e48d45bc3be1c366f4882bbda5 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Sat, 24 Nov 2018 20:15:39 +0100 Subject: feat(App): Lay groundwork for general themeing support --- src/styles/type-helper.scss | 100 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 src/styles/type-helper.scss (limited to 'src/styles/type-helper.scss') diff --git a/src/styles/type-helper.scss b/src/styles/type-helper.scss new file mode 100644 index 000000000..b1da394b5 --- /dev/null +++ b/src/styles/type-helper.scss @@ -0,0 +1,100 @@ +@function str-split($string, $separator) { + // empty array/list + $split-arr: (); + // first index of separator in string + $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, $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, $string); + + @return $split-arr; +} + +// ---- +// Sass (v3.4.13) +// Compass (v1.0.3) +// ---- + +/// String to number converter +/// @author Hugo Giraudel +/// @access private + + +/// Casts a string into a number +/// +/// @param {String | Number} $value - Value to be parsed +/// +/// @return {Number} + +@function to-number($value) { + @if type-of($value) == 'number' { + @return $value; + } @else if type-of($value) != 'string' { + $_: log('Value for `to-number` should be a number or a string.'); + } + + $result: 0; + $digits: 0; + $minus: str-slice($value, 1, 1) == '-'; + $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); + + @for $i from if($minus, 2, 1) through str-length($value) { + $character: str-slice($value, $i, $i); + + @if not (index(map-keys($numbers), $character) or $character == '.') { + @return to-length(if($minus, -$result, $result), str-slice($value, $i)) + } + + @if $character == '.' { + $digits: 1; + } @else if $digits == 0 { + $result: $result * 10 + map-get($numbers, $character); + } @else { + $digits: $digits * 10; + $result: $result + map-get($numbers, $character) / $digits; + } + } + + @return if($minus, -$result, $result);; +} + + +/// Add `$unit` to `$value` +/// +/// @param {Number} $value - Value to add unit to +/// @param {String} $unit - String representation of the unit +/// +/// @return {Number} - `$value` expressed in `$unit` +@function to-length($value, $unit) { + $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax); + + @if not index(map-keys($units), $unit) { + $_: log('Invalid unit `#{$unit}`.'); + } + + @return $value * map-get($units, $unit); +} + + + +/// converts injectes rgb strings to sass colors +@function convert-rgb-string-to-color($string) { + $values: str-split($string, ','); + $colorList: (); + @each $value in $values { + $colorList: append($colorList, to-number($value)); + } + + $rgbaColor: rgb(nth($colorList, 1), nth($colorList, 2), nth($colorList, 3)); + @return $rgbaColor; +} \ No newline at end of file -- cgit v1.2.3-54-g00ecf