From 7ccd848e5ff37df6e9d160b804718940dad688a7 Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Mon, 23 Sep 2024 12:43:24 +0200 Subject: [PATCH] feat (theme): update fluid-size sass function --- src/scss/02-tools/_f-fluid-size.scss | 26 ++++++++++---------------- 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/src/scss/02-tools/_f-fluid-size.scss b/src/scss/02-tools/_f-fluid-size.scss index 99cfd90f..1b797bf4 100644 --- a/src/scss/02-tools/_f-fluid-size.scss +++ b/src/scss/02-tools/_f-fluid-size.scss @@ -7,32 +7,26 @@ * * @author Cédric Andrietti * - * @param $min-size -> Minimal display size (mobile) - * @param $max-size -> Maximal display size (Desktop) - * @param $fluid-breakpoint-start -> Start fluid after this value - * @param $fluid-breakpoint-end -> End fluid after this value - To be defined with designer + * @param $min -> Minimal display size (mobile) + * @param $max -> Maximal display size (Desktop) + * @param $start -> Start breakpoint + * @param $end -> End breakpoint * * Examples : * * h1 { - * font-size: #{fluid-size(58px, 156px)}; + * font-size: #{fluid-size(58px, 156px, sm, md)}; * line-height: #{fluid-size(1.05, 1.2)}; * } * */ +@use "sass:map"; @use "sass:math"; -@function fluid-size($min-size, $max-size, $fluid-breakpoint-start: 375, $fluid-breakpoint-end: 1440) { - $default_scale_factor : 1; - $view_port_width_offset : math.div($fluid-breakpoint-start, 100) * 1px; - $linear_factor : 100 * math.div(( $max-size - $min-size ), ( $fluid-breakpoint-end - $fluid-breakpoint-start )); - $linear_factor_scaled : strip-units($linear_factor * $default_scale_factor); - $fluid_target_font_size : #{$min-size}#{" + ((1vw - "}#{$view_port_width_offset}#{") * "}#{$linear_factor_scaled}#{")"}; +@function fluid-size($min, $max, $start: xs, $end: sm) { + $start: math.div(map.get($breakpoints, $start), 100); + $end: math.div(map.get($breakpoints, $end), 100); - @return clamp( - #{$min-size}, - #{$fluid_target_font_size}, - #{$max-size} - ); + @return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{strip-units($max - $min)}, #{$max}); }