diff --git a/docs/ts-scss/atlantis/index.mdx b/docs/ts-scss/atlantis/index.mdx index 06e0e5b..3032e1f 100644 --- a/docs/ts-scss/atlantis/index.mdx +++ b/docs/ts-scss/atlantis/index.mdx @@ -71,4 +71,5 @@ All available mixins: All available functions: +- [`fluid-prop()`](library#functions/fluid/fluid-prop) - [`inline-svg()`](library#functions/svg/inline-svg) diff --git a/docs/ts-scss/atlantis/library.mdx b/docs/ts-scss/atlantis/library.mdx index 040eaa2..692abd7 100644 --- a/docs/ts-scss/atlantis/library.mdx +++ b/docs/ts-scss/atlantis/library.mdx @@ -313,11 +313,51 @@ Prevents wrapping of text by displaying ellipsis instead. ## Functions +### Fluid +#### `.fluid-prop()` {#functions/fluid/fluid-prop} + +```scss +atlantis.fluid-prop($min-vw, $max-vw, $min-value, $max-value); +``` + +Returns a clamp function with calculated values, depending on the given params. + +* `$min-vw` -> viewport at which the value starts to be fluid +* `$max-vw` -> viewport at which the value ends to be fluid +* `$min-value` -> value at the beginning +* `$max-value` -> value at the end + +Usage: + +```scss +.element { + font-size: atlantis.fluid-prop(30rem, 140rem, 2rem, 4rem); +} +``` + +We recommend for multiple uses, such as font-sizes that all have the same `$min-vw` and `$max-vw` value, to build a helper function that is then used for better readability when using the function. For example: + +```scss title="_mixins.scss" +@use "~@21torr/atlantis/mixins" as atlantis; + +@function font-fluid-prop ($min-value, $max-value) { + @return atlantis.fluid-prop(30rem, 140rem, $min-value, $max-value); +} +``` + +```scss title="element.scss" +@use "mixins"; + +.element { + font-size: mixins.font-fluid-prop(2rem, 4rem); +} +``` + ### SVG #### `.inline-svg()` {#functions/svg/inline-svg} ```scss -@include atlantis.inline-svg($svg); +atlantis.inline-svg($svg); ``` Inlines the SVG on the element. Will return a `url()` element so it can be used directly as an image.