Merge pull request #33 from supple-kit/feature/feature/#32-lock-also-…

…on-html

responsive.lock also on root elements

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);
   }

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