chore: add styles

4 files changed, 58 insertions, 0 deletions

diff --git a/htdocs/src/scss/abstracts/functions/_convert.scss b/htdocs/src/scss/abstracts/functions/_convert.scss
new file mode 100644
index 0000000..9f51dc7
--- /dev/null
+++ b/htdocs/src/scss/abstracts/functions/_convert.scss
@@ -0,0 +1,16 @@
+@use "sass:math";
+
+/// Convert px to rem or em.
+/// @param  {Number} $px Value in px
+/// @param  {String} $to Unit. Either "rem" or "em"
+/// @param  {Number} $standard 1rem (or 1em) = 16px
+/// @return {Number} Value in rem or em
+@function convert-px($px, $to: "rem", $standard: 16) {
+  @if $to == "rem" {
+    @return math.div($px, $standard) + 0rem; // stylelint-disable-line
+  } @else if $to == "em" {
+    @return math.div($px, $standard) + 0em; // stylelint-disable-line
+  } @else {
+    @error "`$to` must be either `rem` or `em`.";
+  }
+}
diff --git a/htdocs/src/scss/abstracts/functions/_css-vars.scss b/htdocs/src/scss/abstracts/functions/_css-vars.scss
new file mode 100644
index 0000000..89e1a15
--- /dev/null
+++ b/htdocs/src/scss/abstracts/functions/_css-vars.scss
@@ -0,0 +1,8 @@
+/// Retrieve a CSS variable value with prefix
+/// @see https://dev.to/felipperegazio/css-custom-properties-vars-with-sass-scss-a-practical-architecture-strategy-1m88
+/// @param  {String} $name Variable name
+/// @param  {String} $prefix Variable prefix
+/// @return {String} Variable in CSS format
+@function get-var($name, $prefix: dap) {
+  @return var(--#{$prefix}-#{$name});
+}
diff --git a/htdocs/src/scss/abstracts/functions/_encode.scss b/htdocs/src/scss/abstracts/functions/_encode.scss
new file mode 100644
index 0000000..4350185
--- /dev/null
+++ b/htdocs/src/scss/abstracts/functions/_encode.scss
@@ -0,0 +1,14 @@
+@use "str-replace" as fun;
+
+/// Encode a SVG.
+/// @param {String} $svg A complete svg (`<svg>...</svg>`).
+/// @return The encoded svg, ready to use for background-image.
+@function encode-svg($svg) {
+  $svg-encoding: (("<", "%3C"), (">", "%3E"), ("#", "%23"));
+
+  @each $char, $encoded in $svg-encoding {
+    $svg: fun.str-replace($svg, $char, $encoded);
+  }
+
+  @return "data:image/svg+xml;utf8," + $svg;
+}
diff --git a/htdocs/src/scss/abstracts/functions/_str-replace.scss b/htdocs/src/scss/abstracts/functions/_str-replace.scss
new file mode 100644
index 0000000..624bf33
--- /dev/null
+++ b/htdocs/src/scss/abstracts/functions/_str-replace.scss
@@ -0,0 +1,20 @@
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
+
+  @return $string;
+}