diff --git a/src/scss/02-tools/_f-to-number.scss b/src/scss/02-tools/_f-to-number.scss new file mode 100644 index 00000000..22828520 --- /dev/null +++ b/src/scss/02-tools/_f-to-number.scss @@ -0,0 +1,50 @@ +@use "sass:map"; +@use "sass:math"; +@use "sass:string"; + +/** + * To number - convert string to number + * + * @author: Stackoverflow - https://stackoverflow.com/questions/47630616/scss-arithmetic-operation-with-string + * + * @param string $value + * + * Examples : + * @for $i from 1 through 6 { + * &[data-per-line="#{$i}"] { + * .card { + * width: column(to-number(#{math.div(12, $i + 1)})); + * } + * } + * } + */ + +@function to-number($value) { + @if type-of($value) == "number" { + @return $value; + } @else if type-of($value) != "string" { + @error "Value for `to-number` should be a number or a string."; + } + + $result: 0; + $digits: 0; + $minus: string.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: string.slice($value, $i, $i); + + @if (index(map-keys($numbers), $character) or $character == ".") { + @if $character == "." { + $digits: 1; + } @else if $digits == 0 { + $result: $result * 10 + map.get($numbers, $character); + } @else { + $digits: $digits * 10; + $result: $result + math.div(map.get($numbers, $character), $digits); + } + } + } + + @return if($minus, -$result, $result); +} diff --git a/src/scss/02-tools/_m-sr-only.scss b/src/scss/02-tools/_m-sr-only.scss index 5b3ab2bc..1c778d16 100644 --- a/src/scss/02-tools/_m-sr-only.scss +++ b/src/scss/02-tools/_m-sr-only.scss @@ -43,6 +43,8 @@ @mixin sr-only($focusable: false) { position: absolute; + top: auto !important; + left: -10000px !important; width: 1px !important; height: 1px !important; padding: 0 !important;