diff --git a/tools/_rem.scss b/tools/_rem.scss index 157c491..bb47fa0 100644 --- a/tools/_rem.scss +++ b/tools/_rem.scss @@ -12,12 +12,14 @@ * to-rem * Converts a single px value to a rem unit based on the current browser context */ -@function to-rem($value) { +@function to-rem($value, $font-size-override: false) { @if (meta.type-of($value) == string) or (math.is-unitless($value) == true) or (math.unit($value) != 'px') { @return $value; + } @else if $font-size-override and math.unit($font-size-override) == 'px' { + @return (math.div($value, $font-size-override) * 1rem); } @else { @return (math.div($value, defaults.$font-size) * 1rem); } diff --git a/tools/_responsive.scss b/tools/_responsive.scss index a2a7091..096fcef 100644 --- a/tools/_responsive.scss +++ b/tools/_responsive.scss @@ -127,6 +127,21 @@ padding: responsive.lock(18px, 24px, desk, wall); */ @function lock($size-min: 16px, $size-max: 20px, $min-bp: lap, $max-bp: desk) { $return: $size-min; + $root-font-size: defaults.$font-size; + + /** + * Check if responsive lock is used on a root element only, then set the root + * font-size to browser default 16px + */ + @if (list.length(&) == 1) and + ( + (string.unquote(list.nth(list.nth(&, 1), 1)) == 'html') or + (string.unquote(list.nth(list.nth(&, 1), 1)) == ':root') or + (string.unquote(list.nth(list.nth(&, 1), 1)) == ':host') + ) + { + $root-font-size: 16px; + } @if map.has-key(defaults.$breakpoints, $min-bp) and map.has-key(defaults.$breakpoints, $max-bp) @@ -141,13 +156,17 @@ padding: responsive.lock(18px, 24px, desk, wall); $max-bp-value: map.get(defaults.$breakpoints, $max-bp); // Breakpoints - $min-bp-rem-unitless: functions.strip-units(rem.convert($min-bp-value)); - $max-bp-rem-unitless: functions.strip-units(rem.convert($max-bp-value)); + $min-bp-rem-unitless: functions.strip-units( + rem.to-rem($min-bp-value, $root-font-size) + ); + $max-bp-rem-unitless: functions.strip-units( + rem.to-rem($max-bp-value, $root-font-size) + ); // Sizes - $size-min-rem: rem.convert($size-min); + $size-min-rem: rem.to-rem($size-min, $root-font-size); $size-min-rem-unitless: functions.strip-units($size-min-rem); - $size-max-rem: rem.convert($size-max); + $size-max-rem: rem.to-rem($size-max, $root-font-size); $size-max-rem-unitless: functions.strip-units($size-max-rem); // Calculations