diff options
Diffstat (limited to 'src/styles/type-helper.scss')
-rw-r--r-- | src/styles/type-helper.scss | 99 |
1 files changed, 61 insertions, 38 deletions
diff --git a/src/styles/type-helper.scss b/src/styles/type-helper.scss index b1da394b5..b618d24cf 100644 --- a/src/styles/type-helper.scss +++ b/src/styles/type-helper.scss | |||
@@ -1,23 +1,23 @@ | |||
1 | @function str-split($string, $separator) { | 1 | @function str-split($string, $separator) { |
2 | // empty array/list | 2 | // empty array/list |
3 | $split-arr: (); | 3 | $split-arr: (); |
4 | // first index of separator in string | 4 | // first index of separator in string |
5 | $index : str-index($string, $separator); | 5 | $index: str-index($string, $separator); |
6 | // loop through string | 6 | // loop through string |
7 | @while $index != null { | 7 | @while $index != null { |
8 | // get the substring from the first character to the separator | 8 | // get the substring from the first character to the separator |
9 | $item: str-slice($string, 1, $index - 1); | 9 | $item: str-slice($string, 1, $index - 1); |
10 | // push item to array | 10 | // push item to array |
11 | $split-arr: append($split-arr, $item); | 11 | $split-arr: append($split-arr, $item); |
12 | // remove item and separator from string | 12 | // remove item and separator from string |
13 | $string: str-slice($string, $index + 1); | 13 | $string: str-slice($string, $index + 1); |
14 | // find new index of separator | 14 | // find new index of separator |
15 | $index : str-index($string, $separator); | 15 | $index: str-index($string, $separator); |
16 | } | 16 | } |
17 | // add the remaining string to list (the last item) | 17 | // add the remaining string to list (the last item) |
18 | $split-arr: append($split-arr, $string); | 18 | $split-arr: append($split-arr, $string); |
19 | 19 | ||
20 | @return $split-arr; | 20 | @return $split-arr; |
21 | } | 21 | } |
22 | 22 | ||
23 | // ---- | 23 | // ---- |
@@ -29,7 +29,6 @@ | |||
29 | /// @author Hugo Giraudel | 29 | /// @author Hugo Giraudel |
30 | /// @access private | 30 | /// @access private |
31 | 31 | ||
32 | |||
33 | /// Casts a string into a number | 32 | /// Casts a string into a number |
34 | /// | 33 | /// |
35 | /// @param {String | Number} $value - Value to be parsed | 34 | /// @param {String | Number} $value - Value to be parsed |
@@ -42,32 +41,42 @@ | |||
42 | } @else if type-of($value) != 'string' { | 41 | } @else if type-of($value) != 'string' { |
43 | $_: log('Value for `to-number` should be a number or a string.'); | 42 | $_: log('Value for `to-number` should be a number or a string.'); |
44 | } | 43 | } |
45 | 44 | ||
46 | $result: 0; | 45 | $result: 0; |
47 | $digits: 0; | 46 | $digits: 0; |
48 | $minus: str-slice($value, 1, 1) == '-'; | 47 | $minus: str-slice($value, 1, 1) == '-'; |
49 | $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); | 48 | $numbers: ( |
50 | 49 | '0': 0, | |
50 | '1': 1, | ||
51 | '2': 2, | ||
52 | '3': 3, | ||
53 | '4': 4, | ||
54 | '5': 5, | ||
55 | '6': 6, | ||
56 | '7': 7, | ||
57 | '8': 8, | ||
58 | '9': 9, | ||
59 | ); | ||
60 | |||
51 | @for $i from if($minus, 2, 1) through str-length($value) { | 61 | @for $i from if($minus, 2, 1) through str-length($value) { |
52 | $character: str-slice($value, $i, $i); | 62 | $character: str-slice($value, $i, $i); |
53 | 63 | ||
54 | @if not (index(map-keys($numbers), $character) or $character == '.') { | 64 | @if not(index(map-keys($numbers), $character) or $character == '.') { |
55 | @return to-length(if($minus, -$result, $result), str-slice($value, $i)) | 65 | @return to-length(if($minus, -$result, $result), str-slice($value, $i)); |
56 | } | 66 | } |
57 | 67 | ||
58 | @if $character == '.' { | 68 | @if $character == '.' { |
59 | $digits: 1; | 69 | $digits: 1; |
60 | } @else if $digits == 0 { | 70 | } @else if $digits == 0 { |
61 | $result: $result * 10 + map-get($numbers, $character); | 71 | $result: $result * 10 + map-get($numbers, $character); |
62 | } @else { | 72 | } @else { |
63 | $digits: $digits * 10; | 73 | $digits: $digits * 10; |
64 | $result: $result + map-get($numbers, $character) / $digits; | 74 | $result: $result + map-get($numbers, $character) / $digits; |
65 | } | 75 | } |
66 | } | 76 | } |
67 | |||
68 | @return if($minus, -$result, $result);; | ||
69 | } | ||
70 | 77 | ||
78 | @return if($minus, -$result, $result); | ||
79 | } | ||
71 | 80 | ||
72 | /// Add `$unit` to `$value` | 81 | /// Add `$unit` to `$value` |
73 | /// | 82 | /// |
@@ -76,18 +85,32 @@ | |||
76 | /// | 85 | /// |
77 | /// @return {Number} - `$value` expressed in `$unit` | 86 | /// @return {Number} - `$value` expressed in `$unit` |
78 | @function to-length($value, $unit) { | 87 | @function to-length($value, $unit) { |
79 | $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); | 88 | $units: ( |
80 | 89 | 'px': 1px, | |
90 | 'cm': 1cm, | ||
91 | 'mm': 1mm, | ||
92 | '%': 1%, | ||
93 | 'ch': 1ch, | ||
94 | 'pc': 1pc, | ||
95 | 'in': 1in, | ||
96 | 'em': 1em, | ||
97 | 'rem': 1rem, | ||
98 | 'pt': 1pt, | ||
99 | 'ex': 1ex, | ||
100 | 'vw': 1vw, | ||
101 | 'vh': 1vh, | ||
102 | 'vmin': 1vmin, | ||
103 | 'vmax': 1vmax, | ||
104 | ); | ||
105 | |||
81 | @if not index(map-keys($units), $unit) { | 106 | @if not index(map-keys($units), $unit) { |
82 | $_: log('Invalid unit `#{$unit}`.'); | 107 | $_: log('Invalid unit `#{$unit}`.'); |
83 | } | 108 | } |
84 | 109 | ||
85 | @return $value * map-get($units, $unit); | 110 | @return $value * map-get($units, $unit); |
86 | } | 111 | } |
87 | 112 | ||
88 | 113 | /// converts injectes rgb strings to sass colors | |
89 | |||
90 | /// converts injectes rgb strings to sass colors | ||
91 | @function convert-rgb-string-to-color($string) { | 114 | @function convert-rgb-string-to-color($string) { |
92 | $values: str-split($string, ','); | 115 | $values: str-split($string, ','); |
93 | $colorList: (); | 116 | $colorList: (); |
@@ -97,4 +120,4 @@ | |||
97 | 120 | ||
98 | $rgbaColor: rgb(nth($colorList, 1), nth($colorList, 2), nth($colorList, 3)); | 121 | $rgbaColor: rgb(nth($colorList, 1), nth($colorList, 2), nth($colorList, 3)); |
99 | @return $rgbaColor; | 122 | @return $rgbaColor; |
100 | } \ No newline at end of file | 123 | } |