diff --git a/.gitignore b/.gitignore
index ea8c4bf..a4d6576 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
/target
+/public/styles
diff --git a/Cargo.lock b/Cargo.lock
new file mode 100644
index 0000000..91d605d
--- /dev/null
+++ b/Cargo.lock
@@ -0,0 +1,1117 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 3
+
+[[package]]
+name = "addr2line"
+version = "0.21.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a30b2e23b9e17a9f90641c7ab1549cd9b44f296d3ccbf309d2863cfe398a0cb"
+dependencies = [
+ "gimli",
+]
+
+[[package]]
+name = "adler"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f26201604c87b1e01bd3d98f8d5d9a8fcbb815e8cedb41ffccbeb4bf593a35fe"
+
+[[package]]
+name = "aho-corasick"
+version = "1.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e60d3430d3a69478ad0993f19238d2df97c507009a52b3c10addcd7f6bcb916"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "async-trait"
+version = "0.1.80"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c6fa2087f2753a7da8cc1c0dbfcf89579dd57458e36769de5ac750b4671737ca"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "autocfg"
+version = "1.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f1fdabc7756949593fe60f30ec81974b613357de856987752631dea1e3394c80"
+
+[[package]]
+name = "axum"
+version = "0.7.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3a6c9af12842a67734c9a2e355436e5d03b22383ed60cf13cd0c18fbfe3dcbcf"
+dependencies = [
+ "async-trait",
+ "axum-core",
+ "bytes",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-body-util",
+ "hyper",
+ "hyper-util",
+ "itoa",
+ "matchit",
+ "memchr",
+ "mime",
+ "percent-encoding",
+ "pin-project-lite",
+ "rustversion",
+ "serde",
+ "serde_json",
+ "serde_path_to_error",
+ "serde_urlencoded",
+ "sync_wrapper 1.0.1",
+ "tokio",
+ "tower",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "axum-core"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a15c63fd72d41492dc4f497196f5da1fb04fb7529e631d73630d1b491e47a2e3"
+dependencies = [
+ "async-trait",
+ "bytes",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-body-util",
+ "mime",
+ "pin-project-lite",
+ "rustversion",
+ "sync_wrapper 0.1.2",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "backtrace"
+version = "0.3.71"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "26b05800d2e817c8b3b4b54abd461726265fa9789ae34330622f2db9ee696f9d"
+dependencies = [
+ "addr2line",
+ "cc",
+ "cfg-if",
+ "libc",
+ "miniz_oxide",
+ "object",
+ "rustc-demangle",
+]
+
+[[package]]
+name = "bitflags"
+version = "1.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"
+
+[[package]]
+name = "bitflags"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cf4b9d6a944f767f8e5e0db018570623c85f3d925ac718db4e06d0187adb21c1"
+
+[[package]]
+name = "bytes"
+version = "1.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "514de17de45fdb8dc022b1a7975556c53c86f9f0aa5f534b98977b171857c2c9"
+
+[[package]]
+name = "cc"
+version = "1.0.95"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d32a725bc159af97c3e629873bb9f88fb8cf8a4867175f76dc987815ea07c83b"
+
+[[package]]
+name = "cfg-if"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
+
+[[package]]
+name = "clego-app"
+version = "0.1.0"
+dependencies = [
+ "axum",
+ "maud",
+ "tokio",
+ "tower",
+ "tower-http",
+ "tracing",
+ "tracing-subscriber",
+]
+
+[[package]]
+name = "fnv"
+version = "1.0.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f9eec918d3f24069decb9af1554cad7c880e2da24a9afd88aca000531ab82c1"
+
+[[package]]
+name = "form_urlencoded"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e13624c2627564efccf4934284bdd98cbaa14e79b0b5a141218e507b3a823456"
+dependencies = [
+ "percent-encoding",
+]
+
+[[package]]
+name = "futures-channel"
+version = "0.3.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eac8f7d7865dcb88bd4373ab671c8cf4508703796caa2b1985a9ca867b3fcb78"
+dependencies = [
+ "futures-core",
+]
+
+[[package]]
+name = "futures-core"
+version = "0.3.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dfc6580bb841c5a68e9ef15c77ccc837b40a7504914d52e47b8b0e9bbda25a1d"
+
+[[package]]
+name = "futures-sink"
+version = "0.3.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9fb8e00e87438d937621c1c6269e53f536c14d3fbd6a042bb24879e57d474fb5"
+
+[[package]]
+name = "futures-task"
+version = "0.3.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "38d84fa142264698cdce1a9f9172cf383a0c82de1bddcf3092901442c4097004"
+
+[[package]]
+name = "futures-util"
+version = "0.3.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3d6401deb83407ab3da39eba7e33987a73c3df0c82b4bb5813ee871c19c41d48"
+dependencies = [
+ "futures-core",
+ "futures-task",
+ "pin-project-lite",
+ "pin-utils",
+]
+
+[[package]]
+name = "gimli"
+version = "0.28.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4271d37baee1b8c7e4b708028c57d816cf9d2434acb33a549475f78c181f6253"
+
+[[package]]
+name = "hermit-abi"
+version = "0.3.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d231dfb89cfffdbc30e7fc41579ed6066ad03abda9e567ccafae602b97ec5024"
+
+[[package]]
+name = "http"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "21b9ddb458710bc376481b842f5da65cdf31522de232c1ca8146abce2a358258"
+dependencies = [
+ "bytes",
+ "fnv",
+ "itoa",
+]
+
+[[package]]
+name = "http-body"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1cac85db508abc24a2e48553ba12a996e87244a0395ce011e62b37158745d643"
+dependencies = [
+ "bytes",
+ "http",
+]
+
+[[package]]
+name = "http-body-util"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0475f8b2ac86659c21b64320d5d653f9efe42acd2a4e560073ec61a155a34f1d"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "http",
+ "http-body",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "http-range-header"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3ce4ef31cda248bbdb6e6820603b82dfcd9e833db65a43e997a0ccec777d11fe"
+
+[[package]]
+name = "httparse"
+version = "1.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d897f394bad6a705d5f4104762e116a75639e470d80901eed05a860a95cb1904"
+
+[[package]]
+name = "httpdate"
+version = "1.0.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df3b46402a9d5adb4c86a0cf463f42e19994e3ee891101b1841f30a545cb49a9"
+
+[[package]]
+name = "hyper"
+version = "1.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fe575dd17d0862a9a33781c8c4696a55c320909004a67a00fb286ba8b1bc496d"
+dependencies = [
+ "bytes",
+ "futures-channel",
+ "futures-util",
+ "http",
+ "http-body",
+ "httparse",
+ "httpdate",
+ "itoa",
+ "pin-project-lite",
+ "smallvec",
+ "tokio",
+]
+
+[[package]]
+name = "hyper-util"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ca38ef113da30126bbff9cd1705f9273e15d45498615d138b0c20279ac7a76aa"
+dependencies = [
+ "bytes",
+ "futures-util",
+ "http",
+ "http-body",
+ "hyper",
+ "pin-project-lite",
+ "socket2",
+ "tokio",
+]
+
+[[package]]
+name = "itoa"
+version = "1.0.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "49f1f14873335454500d59611f1cf4a4b0f786f9ac11f4312a78e4cf2566695b"
+
+[[package]]
+name = "lazy_static"
+version = "1.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
+
+[[package]]
+name = "libc"
+version = "0.2.153"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9c198f91728a82281a64e1f4f9eeb25d82cb32a5de251c6bd1b5154d63a8e7bd"
+
+[[package]]
+name = "lock_api"
+version = "0.4.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c168f8615b12bc01f9c17e2eb0cc07dcae1940121185446edc3744920e8ef45"
+dependencies = [
+ "autocfg",
+ "scopeguard",
+]
+
+[[package]]
+name = "log"
+version = "0.4.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "90ed8c1e510134f979dbc4f070f87d4313098b704861a105fe34231c70a3901c"
+
+[[package]]
+name = "matchers"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8263075bb86c5a1b1427b5ae862e8889656f126e9f77c484496e8b47cf5c5558"
+dependencies = [
+ "regex-automata 0.1.10",
+]
+
+[[package]]
+name = "matchit"
+version = "0.7.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0e7465ac9959cc2b1404e8e2367b43684a6d13790fe23056cc8c6c5a6b7bcb94"
+
+[[package]]
+name = "maud"
+version = "0.26.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df518b75016b4289cdddffa1b01f2122f4a49802c93191f3133f6dc2472ebcaa"
+dependencies = [
+ "axum-core",
+ "http",
+ "itoa",
+ "maud_macros",
+]
+
+[[package]]
+name = "maud_macros"
+version = "0.26.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fa453238ec218da0af6b11fc5978d3b5c3a45ed97b722391a2a11f3306274e18"
+dependencies = [
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "memchr"
+version = "2.7.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6c8640c5d730cb13ebd907d8d04b52f55ac9a2eec55b440c8892f40d56c76c1d"
+
+[[package]]
+name = "mime"
+version = "0.3.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
+
+[[package]]
+name = "mime_guess"
+version = "2.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4192263c238a5f0d0c6bfd21f336a313a4ce1c450542449ca191bb657b4642ef"
+dependencies = [
+ "mime",
+ "unicase",
+]
+
+[[package]]
+name = "miniz_oxide"
+version = "0.7.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9d811f3e15f28568be3407c8e7fdb6514c1cda3cb30683f15b6a1a1dc4ea14a7"
+dependencies = [
+ "adler",
+]
+
+[[package]]
+name = "mio"
+version = "0.8.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4a650543ca06a924e8b371db273b2756685faae30f8487da1b56505a8f78b0c"
+dependencies = [
+ "libc",
+ "wasi",
+ "windows-sys 0.48.0",
+]
+
+[[package]]
+name = "nu-ansi-term"
+version = "0.46.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "77a8165726e8236064dbb45459242600304b42a5ea24ee2948e18e023bf7ba84"
+dependencies = [
+ "overload",
+ "winapi",
+]
+
+[[package]]
+name = "num_cpus"
+version = "1.16.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4161fcb6d602d4d2081af7c3a45852d875a03dd337a6bfdd6e06407b61342a43"
+dependencies = [
+ "hermit-abi",
+ "libc",
+]
+
+[[package]]
+name = "object"
+version = "0.32.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a6a622008b6e321afc04970976f62ee297fdbaa6f95318ca343e3eebb9648441"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "once_cell"
+version = "1.19.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3fdb12b2476b595f9358c5161aa467c2438859caa136dec86c26fdd2efe17b92"
+
+[[package]]
+name = "overload"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b15813163c1d831bf4a13c3610c05c0d03b39feb07f7e09fa234dac9b15aaf39"
+
+[[package]]
+name = "parking_lot"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3742b2c103b9f06bc9fff0a37ff4912935851bee6d36f3c02bcc755bcfec228f"
+dependencies = [
+ "lock_api",
+ "parking_lot_core",
+]
+
+[[package]]
+name = "parking_lot_core"
+version = "0.9.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4c42a9226546d68acdd9c0a280d17ce19bfe27a46bf68784e4066115788d008e"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "redox_syscall",
+ "smallvec",
+ "windows-targets 0.48.5",
+]
+
+[[package]]
+name = "percent-encoding"
+version = "2.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3148f5046208a5d56bcfc03053e3ca6334e51da8dfb19b6cdc8b306fae3283e"
+
+[[package]]
+name = "pin-project"
+version = "1.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6bf43b791c5b9e34c3d182969b4abb522f9343702850a2e57f460d00d09b4b3"
+dependencies = [
+ "pin-project-internal",
+]
+
+[[package]]
+name = "pin-project-internal"
+version = "1.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2f38a4412a78282e09a2cf38d195ea5420d15ba0602cb375210efbc877243965"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "pin-project-lite"
+version = "0.2.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bda66fc9667c18cb2758a2ac84d1167245054bcf85d5d1aaa6923f45801bdd02"
+
+[[package]]
+name = "pin-utils"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
+
+[[package]]
+name = "proc-macro-error"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da25490ff9892aab3fcf7c36f08cfb902dd3e71ca0f9f9517bea02a73a5ce38c"
+dependencies = [
+ "proc-macro-error-attr",
+ "proc-macro2",
+ "quote",
+ "version_check",
+]
+
+[[package]]
+name = "proc-macro-error-attr"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a1be40180e52ecc98ad80b184934baf3d0d29f979574e439af5a55274b35f869"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "version_check",
+]
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.81"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3d1597b0c024618f09a9c3b8655b7e430397a36d23fdafec26d6965e9eec3eba"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.36"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fa76aaf39101c457836aec0ce2316dbdc3ab723cdda1c6bd4e6ad4208acaca7"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "redox_syscall"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4722d768eff46b75989dd134e5c353f0d6296e5aaa3132e776cbdb56be7731aa"
+dependencies = [
+ "bitflags 1.3.2",
+]
+
+[[package]]
+name = "regex"
+version = "1.10.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c117dbdfde9c8308975b6a18d71f3f385c89461f7b3fb054288ecf2a2058ba4c"
+dependencies = [
+ "aho-corasick",
+ "memchr",
+ "regex-automata 0.4.6",
+ "regex-syntax 0.8.3",
+]
+
+[[package]]
+name = "regex-automata"
+version = "0.1.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6c230d73fb8d8c1b9c0b3135c5142a8acee3a0558fb8db5cf1cb65f8d7862132"
+dependencies = [
+ "regex-syntax 0.6.29",
+]
+
+[[package]]
+name = "regex-automata"
+version = "0.4.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "86b83b8b9847f9bf95ef68afb0b8e6cdb80f498442f5179a29fad448fcc1eaea"
+dependencies = [
+ "aho-corasick",
+ "memchr",
+ "regex-syntax 0.8.3",
+]
+
+[[package]]
+name = "regex-syntax"
+version = "0.6.29"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f162c6dd7b008981e4d40210aca20b4bd0f9b60ca9271061b07f78537722f2e1"
+
+[[package]]
+name = "regex-syntax"
+version = "0.8.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "adad44e29e4c806119491a7f06f03de4d1af22c3a680dd47f1e6e179439d1f56"
+
+[[package]]
+name = "rustc-demangle"
+version = "0.1.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d626bb9dae77e28219937af045c257c28bfd3f69333c512553507f5f9798cb76"
+
+[[package]]
+name = "rustversion"
+version = "1.0.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "80af6f9131f277a45a3fba6ce8e2258037bb0477a67e610d3c1fe046ab31de47"
+
+[[package]]
+name = "ryu"
+version = "1.0.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e86697c916019a8588c99b5fac3cead74ec0b4b819707a682fd4d23fa0ce1ba1"
+
+[[package]]
+name = "scopeguard"
+version = "1.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
+
+[[package]]
+name = "serde"
+version = "1.0.198"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9846a40c979031340571da2545a4e5b7c4163bdae79b301d5f86d03979451fcc"
+dependencies = [
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.198"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e88edab869b01783ba905e7d0153f9fc1a6505a96e4ad3018011eedb838566d9"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "serde_json"
+version = "1.0.116"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3e17db7126d17feb94eb3fad46bf1a96b034e8aacbc2e775fe81505f8b0b2813"
+dependencies = [
+ "itoa",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "serde_path_to_error"
+version = "0.1.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "af99884400da37c88f5e9146b7f1fd0fbcae8f6eec4e9da38b67d05486f814a6"
+dependencies = [
+ "itoa",
+ "serde",
+]
+
+[[package]]
+name = "serde_urlencoded"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd"
+dependencies = [
+ "form_urlencoded",
+ "itoa",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "sharded-slab"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f40ca3c46823713e0d4209592e8d6e826aa57e928f09752619fc696c499637f6"
+dependencies = [
+ "lazy_static",
+]
+
+[[package]]
+name = "signal-hook-registry"
+version = "1.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a9e9e0b4211b72e7b8b6e85c807d36c212bdb33ea8587f7569562a84df5465b1"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "smallvec"
+version = "1.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c5e1a9a646d36c3599cd173a41282daf47c44583ad367b8e6837255952e5c67"
+
+[[package]]
+name = "socket2"
+version = "0.5.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05ffd9c0a93b7543e062e759284fcf5f5e3b098501104bfbdde4d404db792871"
+dependencies = [
+ "libc",
+ "windows-sys 0.52.0",
+]
+
+[[package]]
+name = "syn"
+version = "2.0.60"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "909518bc7b1c9b779f1bbf07f2929d35af9f0f37e47c6e9ef7f9dddc1e1821f3"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "sync_wrapper"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2047c6ded9c721764247e62cd3b03c09ffc529b2ba5b10ec482ae507a4a70160"
+
+[[package]]
+name = "sync_wrapper"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a7065abeca94b6a8a577f9bd45aa0867a2238b74e8eb67cf10d492bc39351394"
+
+[[package]]
+name = "thread_local"
+version = "1.1.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b9ef9bad013ada3808854ceac7b46812a6465ba368859a37e2100283d2d719c"
+dependencies = [
+ "cfg-if",
+ "once_cell",
+]
+
+[[package]]
+name = "tokio"
+version = "1.37.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1adbebffeca75fcfd058afa480fb6c0b81e165a0323f9c9d39c9697e37c46787"
+dependencies = [
+ "backtrace",
+ "bytes",
+ "libc",
+ "mio",
+ "num_cpus",
+ "parking_lot",
+ "pin-project-lite",
+ "signal-hook-registry",
+ "socket2",
+ "tokio-macros",
+ "windows-sys 0.48.0",
+]
+
+[[package]]
+name = "tokio-macros"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b8a1e28f2deaa14e508979454cb3a223b10b938b45af148bc0986de36f1923b"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "tokio-util"
+version = "0.7.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5419f34732d9eb6ee4c3578b7989078579b7f039cbbb9ca2c4da015749371e15"
+dependencies = [
+ "bytes",
+ "futures-core",
+ "futures-sink",
+ "pin-project-lite",
+ "tokio",
+]
+
+[[package]]
+name = "tower"
+version = "0.4.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8fa9be0de6cf49e536ce1851f987bd21a43b771b09473c3549a6c853db37c1c"
+dependencies = [
+ "futures-core",
+ "futures-util",
+ "pin-project",
+ "pin-project-lite",
+ "tokio",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "tower-http"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e9cd434a998747dd2c4276bc96ee2e0c7a2eadf3cae88e52be55a05fa9053f5"
+dependencies = [
+ "bitflags 2.5.0",
+ "bytes",
+ "futures-util",
+ "http",
+ "http-body",
+ "http-body-util",
+ "http-range-header",
+ "httpdate",
+ "mime",
+ "mime_guess",
+ "percent-encoding",
+ "pin-project-lite",
+ "tokio",
+ "tokio-util",
+ "tower-layer",
+ "tower-service",
+ "tracing",
+]
+
+[[package]]
+name = "tower-layer"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c20c8dbed6283a09604c3e69b4b7eeb54e298b8a600d4d5ecb5ad39de609f1d0"
+
+[[package]]
+name = "tower-service"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6bc1c9ce2b5135ac7f93c72918fc37feb872bdc6a5533a8b85eb4b86bfdae52"
+
+[[package]]
+name = "tracing"
+version = "0.1.40"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c3523ab5a71916ccf420eebdf5521fcef02141234bbc0b8a49f2fdc4544364ef"
+dependencies = [
+ "log",
+ "pin-project-lite",
+ "tracing-attributes",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-attributes"
+version = "0.1.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "34704c8d6ebcbc939824180af020566b01a7c01f80641264eba0999f6c2b6be7"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "tracing-core"
+version = "0.1.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c06d3da6113f116aaee68e4d601191614c9053067f9ab7f6edbcb161237daa54"
+dependencies = [
+ "once_cell",
+ "valuable",
+]
+
+[[package]]
+name = "tracing-log"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ee855f1f400bd0e5c02d150ae5de3840039a3f54b025156404e34c23c03f47c3"
+dependencies = [
+ "log",
+ "once_cell",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-subscriber"
+version = "0.3.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ad0f048c97dbd9faa9b7df56362b8ebcaa52adb06b498c050d2f4e32f90a7a8b"
+dependencies = [
+ "matchers",
+ "nu-ansi-term",
+ "once_cell",
+ "regex",
+ "sharded-slab",
+ "smallvec",
+ "thread_local",
+ "tracing",
+ "tracing-core",
+ "tracing-log",
+]
+
+[[package]]
+name = "unicase"
+version = "2.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f7d2d4dafb69621809a81864c9c1b864479e1235c0dd4e199924b9742439ed89"
+dependencies = [
+ "version_check",
+]
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3354b9ac3fae1ff6755cb6db53683adb661634f67557942dea4facebec0fee4b"
+
+[[package]]
+name = "valuable"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "830b7e5d4d90034032940e4ace0d9a9a057e7a45cd94e6c007832e39edb82f6d"
+
+[[package]]
+name = "version_check"
+version = "0.9.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "49874b5167b65d7193b8aba1567f5c7d93d001cafc34600cee003eda787e483f"
+
+[[package]]
+name = "wasi"
+version = "0.11.0+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
+
+[[package]]
+name = "winapi"
+version = "0.3.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c839a674fcd7a98952e593242ea400abe93992746761e38641405d28b00f419"
+dependencies = [
+ "winapi-i686-pc-windows-gnu",
+ "winapi-x86_64-pc-windows-gnu",
+]
+
+[[package]]
+name = "winapi-i686-pc-windows-gnu"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ac3b87c63620426dd9b991e5ce0329eff545bccbbb34f3be09ff6fb6ab51b7b6"
+
+[[package]]
+name = "winapi-x86_64-pc-windows-gnu"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
+
+[[package]]
+name = "windows-sys"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "677d2418bec65e3338edb076e806bc1ec15693c5d0104683f2efe857f61056a9"
+dependencies = [
+ "windows-targets 0.48.5",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "282be5f36a8ce781fad8c8ae18fa3f9beff57ec1b52cb3de0789201425d9a33d"
+dependencies = [
+ "windows-targets 0.52.5",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9a2fa6e2155d7247be68c096456083145c183cbbbc2764150dda45a87197940c"
+dependencies = [
+ "windows_aarch64_gnullvm 0.48.5",
+ "windows_aarch64_msvc 0.48.5",
+ "windows_i686_gnu 0.48.5",
+ "windows_i686_msvc 0.48.5",
+ "windows_x86_64_gnu 0.48.5",
+ "windows_x86_64_gnullvm 0.48.5",
+ "windows_x86_64_msvc 0.48.5",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.52.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6f0713a46559409d202e70e28227288446bf7841d3211583a4b53e3f6d96e7eb"
+dependencies = [
+ "windows_aarch64_gnullvm 0.52.5",
+ "windows_aarch64_msvc 0.52.5",
+ "windows_i686_gnu 0.52.5",
+ "windows_i686_gnullvm",
+ "windows_i686_msvc 0.52.5",
+ "windows_x86_64_gnu 0.52.5",
+ "windows_x86_64_gnullvm 0.52.5",
+ "windows_x86_64_msvc 0.52.5",
+]
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2b38e32f0abccf9987a4e3079dfb67dcd799fb61361e53e2882c3cbaf0d905d8"
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.52.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7088eed71e8b8dda258ecc8bac5fb1153c5cffaf2578fc8ff5d61e23578d3263"
+
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc35310971f3b2dbbf3f0690a219f40e2d9afcf64f9ab7cc1be722937c26b4bc"
+
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.52.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9985fd1504e250c615ca5f281c3f7a6da76213ebd5ccc9561496568a2752afb6"
+
+[[package]]
+name = "windows_i686_gnu"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a75915e7def60c94dcef72200b9a8e58e5091744960da64ec734a6c6e9b3743e"
+
+[[package]]
+name = "windows_i686_gnu"
+version = "0.52.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "88ba073cf16d5372720ec942a8ccbf61626074c6d4dd2e745299726ce8b89670"
+
+[[package]]
+name = "windows_i686_gnullvm"
+version = "0.52.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "87f4261229030a858f36b459e748ae97545d6f1ec60e5e0d6a3d32e0dc232ee9"
+
+[[package]]
+name = "windows_i686_msvc"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f55c233f70c4b27f66c523580f78f1004e8b5a8b659e05a4eb49d4166cca406"
+
+[[package]]
+name = "windows_i686_msvc"
+version = "0.52.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "db3c2bf3d13d5b658be73463284eaf12830ac9a26a90c717b7f771dfe97487bf"
+
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "53d40abd2583d23e4718fddf1ebec84dbff8381c07cae67ff7768bbf19c6718e"
+
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.52.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4e4246f76bdeff09eb48875a0fd3e2af6aada79d409d33011886d3e1581517d9"
+
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b7b52767868a23d5bab768e390dc5f5c55825b6d30b86c844ff2dc7414044cc"
+
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.52.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "852298e482cd67c356ddd9570386e2862b5673c85bd5f88df9ab6802b334c596"
+
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.48.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ed94fce61571a4006852b7389a063ab983c02eb1bb37b47f8272ce92d06d9538"
+
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.52.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bec47e5bfd1bff0eeaf6d8b485cc1074891a197ab4225d504cb7a1ab88b02bf0"
diff --git a/Cargo.toml b/Cargo.toml
index 03842e7..764db1a 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -6,3 +6,10 @@ edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
+axum = "0.7.5"
+maud = { version = "0.26.0", features = ["axum"] }
+tokio = { version = "1.37.0", features = ["full"] }
+tower = "0.4.13"
+tower-http = { version = "0.5.2", features = ["fs"] }
+tracing = "0.1.40"
+tracing-subscriber = { version = "0.3.18", features = ["env-filter"] }
diff --git a/README.md b/README.md
index d86a19a..68c8e7b 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,10 @@
# clego-app
+
+## Tech Stack
+- Rust
+- Axum: for serving static assets and powering the backend API
+- Maud: HTML templating
+- htmx: for reactivity on the UI
+- Sass: for styling
+- Bulma: no-js css-style framwork
+- Bootstrap Icons: for icons
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..89fd461
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/fonts/bootstrap-icons.woff b/public/fonts/bootstrap-icons.woff
new file mode 100644
index 0000000..51204d2
Binary files /dev/null and b/public/fonts/bootstrap-icons.woff differ
diff --git a/public/fonts/bootstrap-icons.woff2 b/public/fonts/bootstrap-icons.woff2
new file mode 100644
index 0000000..92c4830
Binary files /dev/null and b/public/fonts/bootstrap-icons.woff2 differ
diff --git a/public/htmx.min.js b/public/htmx.min.js
new file mode 100644
index 0000000..de5f0f1
--- /dev/null
+++ b/public/htmx.min.js
@@ -0,0 +1 @@
+(function(e,t){if(typeof define==="function"&&define.amd){define([],t)}else if(typeof module==="object"&&module.exports){module.exports=t()}else{e.htmx=e.htmx||t()}})(typeof self!=="undefined"?self:this,function(){return function(){"use strict";var Q={onLoad:F,process:zt,on:de,off:ge,trigger:ce,ajax:Nr,find:C,findAll:f,closest:v,values:function(e,t){var r=dr(e,t||"post");return r.values},remove:_,addClass:z,removeClass:n,toggleClass:$,takeClass:W,defineExtension:Ur,removeExtension:Br,logAll:V,logNone:j,logger:null,config:{historyEnabled:true,historyCacheSize:10,refreshOnHistoryMiss:false,defaultSwapStyle:"innerHTML",defaultSwapDelay:0,defaultSettleDelay:20,includeIndicatorStyles:true,indicatorClass:"htmx-indicator",requestClass:"htmx-request",addedClass:"htmx-added",settlingClass:"htmx-settling",swappingClass:"htmx-swapping",allowEval:true,allowScriptTags:true,inlineScriptNonce:"",attributesToSettle:["class","style","width","height"],withCredentials:false,timeout:0,wsReconnectDelay:"full-jitter",wsBinaryType:"blob",disableSelector:"[hx-disable], [data-hx-disable]",useTemplateFragments:false,scrollBehavior:"smooth",defaultFocusScroll:false,getCacheBusterParam:false,globalViewTransitions:false,methodsThatUseUrlParams:["get"],selfRequestsOnly:false,ignoreTitle:false,scrollIntoViewOnBoost:true,triggerSpecsCache:null},parseInterval:d,_:t,createEventSource:function(e){return new EventSource(e,{withCredentials:true})},createWebSocket:function(e){var t=new WebSocket(e,[]);t.binaryType=Q.config.wsBinaryType;return t},version:"1.9.12"};var r={addTriggerHandler:Lt,bodyContains:se,canAccessLocalStorage:U,findThisElement:xe,filterValues:yr,hasAttribute:o,getAttributeValue:te,getClosestAttributeValue:ne,getClosestMatch:c,getExpressionVars:Hr,getHeaders:xr,getInputValues:dr,getInternalData:ae,getSwapSpecification:wr,getTriggerSpecs:it,getTarget:ye,makeFragment:l,mergeObjects:le,makeSettleInfo:T,oobSwap:Ee,querySelectorExt:ue,selectAndSwap:je,settleImmediately:nr,shouldCancel:ut,triggerEvent:ce,triggerErrorEvent:fe,withExtensions:R};var w=["get","post","put","delete","patch"];var i=w.map(function(e){return"[hx-"+e+"], [data-hx-"+e+"]"}).join(", ");var S=e("head"),q=e("title"),H=e("svg",true);function e(e,t){return new RegExp("<"+e+"(\\s[^>]*>|>)([\\s\\S]*?)<\\/"+e+">",!!t?"gim":"im")}function d(e){if(e==undefined){return undefined}let t=NaN;if(e.slice(-2)=="ms"){t=parseFloat(e.slice(0,-2))}else if(e.slice(-1)=="s"){t=parseFloat(e.slice(0,-1))*1e3}else if(e.slice(-1)=="m"){t=parseFloat(e.slice(0,-1))*1e3*60}else{t=parseFloat(e)}return isNaN(t)?undefined:t}function ee(e,t){return e.getAttribute&&e.getAttribute(t)}function o(e,t){return e.hasAttribute&&(e.hasAttribute(t)||e.hasAttribute("data-"+t))}function te(e,t){return ee(e,t)||ee(e,"data-"+t)}function u(e){return e.parentElement}function re(){return document}function c(e,t){while(e&&!t(e)){e=u(e)}return e?e:null}function L(e,t,r){var n=te(t,r);var i=te(t,"hx-disinherit");if(e!==t&&i&&(i==="*"||i.split(" ").indexOf(r)>=0)){return"unset"}else{return n}}function ne(t,r){var n=null;c(t,function(e){return n=L(t,e,r)});if(n!=="unset"){return n}}function h(e,t){var r=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;return r&&r.call(e,t)}function A(e){var t=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i;var r=t.exec(e);if(r){return r[1].toLowerCase()}else{return""}}function s(e,t){var r=new DOMParser;var n=r.parseFromString(e,"text/html");var i=n.body;while(t>0){t--;i=i.firstChild}if(i==null){i=re().createDocumentFragment()}return i}function N(e){return/
"+n+"",0);var a=i.querySelector("template").content;if(Q.config.allowScriptTags){oe(a.querySelectorAll("script"),function(e){if(Q.config.inlineScriptNonce){e.nonce=Q.config.inlineScriptNonce}e.htmxExecuted=navigator.userAgent.indexOf("Firefox")===-1})}else{oe(a.querySelectorAll("script"),function(e){_(e)})}return a}switch(r){case"thead":case"tbody":case"tfoot":case"colgroup":case"caption":return s("",1);case"col":return s("",2);case"tr":return s("",2);case"td":case"th":return s("",3);case"script":case"style":return s(""+n+"
",1);default:return s(n,0)}}function ie(e){if(e){e()}}function I(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"}function k(e){return I(e,"Function")}function P(e){return I(e,"Object")}function ae(e){var t="htmx-internal-data";var r=e[t];if(!r){r=e[t]={}}return r}function M(e){var t=[];if(e){for(var r=0;r=0}function se(e){if(e.getRootNode&&e.getRootNode()instanceof window.ShadowRoot){return re().body.contains(e.getRootNode().host)}else{return re().body.contains(e)}}function D(e){return e.trim().split(/\s+/)}function le(e,t){for(var r in t){if(t.hasOwnProperty(r)){e[r]=t[r]}}return e}function E(e){try{return JSON.parse(e)}catch(e){b(e);return null}}function U(){var e="htmx:localStorageTest";try{localStorage.setItem(e,e);localStorage.removeItem(e);return true}catch(e){return false}}function B(t){try{var e=new URL(t);if(e){t=e.pathname+e.search}if(!/^\/$/.test(t)){t=t.replace(/\/+$/,"")}return t}catch(e){return t}}function t(e){return Tr(re().body,function(){return eval(e)})}function F(t){var e=Q.on("htmx:load",function(e){t(e.detail.elt)});return e}function V(){Q.logger=function(e,t,r){if(console){console.log(t,e,r)}}}function j(){Q.logger=null}function C(e,t){if(t){return e.querySelector(t)}else{return C(re(),e)}}function f(e,t){if(t){return e.querySelectorAll(t)}else{return f(re(),e)}}function _(e,t){e=p(e);if(t){setTimeout(function(){_(e);e=null},t)}else{e.parentElement.removeChild(e)}}function z(e,t,r){e=p(e);if(r){setTimeout(function(){z(e,t);e=null},r)}else{e.classList&&e.classList.add(t)}}function n(e,t,r){e=p(e);if(r){setTimeout(function(){n(e,t);e=null},r)}else{if(e.classList){e.classList.remove(t);if(e.classList.length===0){e.removeAttribute("class")}}}}function $(e,t){e=p(e);e.classList.toggle(t)}function W(e,t){e=p(e);oe(e.parentElement.children,function(e){n(e,t)});z(e,t)}function v(e,t){e=p(e);if(e.closest){return e.closest(t)}else{do{if(e==null||h(e,t)){return e}}while(e=e&&u(e));return null}}function g(e,t){return e.substring(0,t.length)===t}function G(e,t){return e.substring(e.length-t.length)===t}function J(e){var t=e.trim();if(g(t,"<")&&G(t,"/>")){return t.substring(1,t.length-2)}else{return t}}function Z(e,t){if(t.indexOf("closest ")===0){return[v(e,J(t.substr(8)))]}else if(t.indexOf("find ")===0){return[C(e,J(t.substr(5)))]}else if(t==="next"){return[e.nextElementSibling]}else if(t.indexOf("next ")===0){return[K(e,J(t.substr(5)))]}else if(t==="previous"){return[e.previousElementSibling]}else if(t.indexOf("previous ")===0){return[Y(e,J(t.substr(9)))]}else if(t==="document"){return[document]}else if(t==="window"){return[window]}else if(t==="body"){return[document.body]}else{return re().querySelectorAll(J(t))}}var K=function(e,t){var r=re().querySelectorAll(t);for(var n=0;n=0;n--){var i=r[n];if(i.compareDocumentPosition(e)===Node.DOCUMENT_POSITION_FOLLOWING){return i}}};function ue(e,t){if(t){return Z(e,t)[0]}else{return Z(re().body,e)[0]}}function p(e){if(I(e,"String")){return C(e)}else{return e}}function ve(e,t,r){if(k(t)){return{target:re().body,event:e,listener:t}}else{return{target:p(e),event:t,listener:r}}}function de(t,r,n){jr(function(){var e=ve(t,r,n);e.target.addEventListener(e.event,e.listener)});var e=k(r);return e?r:n}function ge(t,r,n){jr(function(){var e=ve(t,r,n);e.target.removeEventListener(e.event,e.listener)});return k(r)?r:n}var pe=re().createElement("output");function me(e,t){var r=ne(e,t);if(r){if(r==="this"){return[xe(e,t)]}else{var n=Z(e,r);if(n.length===0){b('The selector "'+r+'" on '+t+" returned no matches!");return[pe]}else{return n}}}}function xe(e,t){return c(e,function(e){return te(e,t)!=null})}function ye(e){var t=ne(e,"hx-target");if(t){if(t==="this"){return xe(e,"hx-target")}else{return ue(e,t)}}else{var r=ae(e);if(r.boosted){return re().body}else{return e}}}function be(e){var t=Q.config.attributesToSettle;for(var r=0;r0){o=e.substr(0,e.indexOf(":"));t=e.substr(e.indexOf(":")+1,e.length)}else{o=e}var r=re().querySelectorAll(t);if(r){oe(r,function(e){var t;var r=i.cloneNode(true);t=re().createDocumentFragment();t.appendChild(r);if(!Se(o,e)){t=r}var n={shouldSwap:true,target:e,fragment:t};if(!ce(e,"htmx:oobBeforeSwap",n))return;e=n.target;if(n["shouldSwap"]){Fe(o,e,e,t,a)}oe(a.elts,function(e){ce(e,"htmx:oobAfterSwap",n)})});i.parentNode.removeChild(i)}else{i.parentNode.removeChild(i);fe(re().body,"htmx:oobErrorNoTarget",{content:i})}return e}function Ce(e,t,r){var n=ne(e,"hx-select-oob");if(n){var i=n.split(",");for(var a=0;a0){var r=t.replace("'","\\'");var n=e.tagName.replace(":","\\:");var i=o.querySelector(n+"[id='"+r+"']");if(i&&i!==o){var a=e.cloneNode();we(e,i);s.tasks.push(function(){we(e,a)})}}})}function Oe(e){return function(){n(e,Q.config.addedClass);zt(e);Nt(e);qe(e);ce(e,"htmx:load")}}function qe(e){var t="[autofocus]";var r=h(e,t)?e:e.querySelector(t);if(r!=null){r.focus()}}function a(e,t,r,n){Te(e,r,n);while(r.childNodes.length>0){var i=r.firstChild;z(i,Q.config.addedClass);e.insertBefore(i,t);if(i.nodeType!==Node.TEXT_NODE&&i.nodeType!==Node.COMMENT_NODE){n.tasks.push(Oe(i))}}}function He(e,t){var r=0;while(r-1){var t=e.replace(H,"");var r=t.match(q);if(r){return r[2]}}}function je(e,t,r,n,i,a){i.title=Ve(n);var o=l(n);if(o){Ce(r,o,i);o=Be(r,o,a);Re(o);return Fe(e,r,t,o,i)}}function _e(e,t,r){var n=e.getResponseHeader(t);if(n.indexOf("{")===0){var i=E(n);for(var a in i){if(i.hasOwnProperty(a)){var o=i[a];if(!P(o)){o={value:o}}ce(r,a,o)}}}else{var s=n.split(",");for(var l=0;l0){var o=t[0];if(o==="]"){n--;if(n===0){if(a===null){i=i+"true"}t.shift();i+=")})";try{var s=Tr(e,function(){return Function(i)()},function(){return true});s.source=i;return s}catch(e){fe(re().body,"htmx:syntax:error",{error:e,source:i});return null}}}else if(o==="["){n++}if(Qe(o,a,r)){i+="(("+r+"."+o+") ? ("+r+"."+o+") : (window."+o+"))"}else{i=i+o}a=t.shift()}}}function y(e,t){var r="";while(e.length>0&&!t.test(e[0])){r+=e.shift()}return r}function tt(e){var t;if(e.length>0&&Ze.test(e[0])){e.shift();t=y(e,Ke).trim();e.shift()}else{t=y(e,x)}return t}var rt="input, textarea, select";function nt(e,t,r){var n=[];var i=Ye(t);do{y(i,Je);var a=i.length;var o=y(i,/[,\[\s]/);if(o!==""){if(o==="every"){var s={trigger:"every"};y(i,Je);s.pollInterval=d(y(i,/[,\[\s]/));y(i,Je);var l=et(e,i,"event");if(l){s.eventFilter=l}n.push(s)}else if(o.indexOf("sse:")===0){n.push({trigger:"sse",sseEvent:o.substr(4)})}else{var u={trigger:o};var l=et(e,i,"event");if(l){u.eventFilter=l}while(i.length>0&&i[0]!==","){y(i,Je);var f=i.shift();if(f==="changed"){u.changed=true}else if(f==="once"){u.once=true}else if(f==="consume"){u.consume=true}else if(f==="delay"&&i[0]===":"){i.shift();u.delay=d(y(i,x))}else if(f==="from"&&i[0]===":"){i.shift();if(Ze.test(i[0])){var c=tt(i)}else{var c=y(i,x);if(c==="closest"||c==="find"||c==="next"||c==="previous"){i.shift();var h=tt(i);if(h.length>0){c+=" "+h}}}u.from=c}else if(f==="target"&&i[0]===":"){i.shift();u.target=tt(i)}else if(f==="throttle"&&i[0]===":"){i.shift();u.throttle=d(y(i,x))}else if(f==="queue"&&i[0]===":"){i.shift();u.queue=y(i,x)}else if(f==="root"&&i[0]===":"){i.shift();u[f]=tt(i)}else if(f==="threshold"&&i[0]===":"){i.shift();u[f]=y(i,x)}else{fe(e,"htmx:syntax:error",{token:i.shift()})}}n.push(u)}}if(i.length===a){fe(e,"htmx:syntax:error",{token:i.shift()})}y(i,Je)}while(i[0]===","&&i.shift());if(r){r[t]=n}return n}function it(e){var t=te(e,"hx-trigger");var r=[];if(t){var n=Q.config.triggerSpecsCache;r=n&&n[t]||nt(e,t,n)}if(r.length>0){return r}else if(h(e,"form")){return[{trigger:"submit"}]}else if(h(e,'input[type="button"], input[type="submit"]')){return[{trigger:"click"}]}else if(h(e,rt)){return[{trigger:"change"}]}else{return[{trigger:"click"}]}}function at(e){ae(e).cancelled=true}function ot(e,t,r){var n=ae(e);n.timeout=setTimeout(function(){if(se(e)&&n.cancelled!==true){if(!ct(r,e,Wt("hx:poll:trigger",{triggerSpec:r,target:e}))){t(e)}ot(e,t,r)}},r.pollInterval)}function st(e){return location.hostname===e.hostname&&ee(e,"href")&&ee(e,"href").indexOf("#")!==0}function lt(t,r,e){if(t.tagName==="A"&&st(t)&&(t.target===""||t.target==="_self")||t.tagName==="FORM"){r.boosted=true;var n,i;if(t.tagName==="A"){n="get";i=ee(t,"href")}else{var a=ee(t,"method");n=a?a.toLowerCase():"get";if(n==="get"){}i=ee(t,"action")}e.forEach(function(e){ht(t,function(e,t){if(v(e,Q.config.disableSelector)){m(e);return}he(n,i,e,t)},r,e,true)})}}function ut(e,t){if(e.type==="submit"||e.type==="click"){if(t.tagName==="FORM"){return true}if(h(t,'input[type="submit"], button')&&v(t,"form")!==null){return true}if(t.tagName==="A"&&t.href&&(t.getAttribute("href")==="#"||t.getAttribute("href").indexOf("#")!==0)){return true}}return false}function ft(e,t){return ae(e).boosted&&e.tagName==="A"&&t.type==="click"&&(t.ctrlKey||t.metaKey)}function ct(e,t,r){var n=e.eventFilter;if(n){try{return n.call(t,r)!==true}catch(e){fe(re().body,"htmx:eventFilter:error",{error:e,source:n.source});return true}}return false}function ht(a,o,e,s,l){var u=ae(a);var t;if(s.from){t=Z(a,s.from)}else{t=[a]}if(s.changed){t.forEach(function(e){var t=ae(e);t.lastValue=e.value})}oe(t,function(n){var i=function(e){if(!se(a)){n.removeEventListener(s.trigger,i);return}if(ft(a,e)){return}if(l||ut(e,a)){e.preventDefault()}if(ct(s,a,e)){return}var t=ae(e);t.triggerSpec=s;if(t.handledFor==null){t.handledFor=[]}if(t.handledFor.indexOf(a)<0){t.handledFor.push(a);if(s.consume){e.stopPropagation()}if(s.target&&e.target){if(!h(e.target,s.target)){return}}if(s.once){if(u.triggeredOnce){return}else{u.triggeredOnce=true}}if(s.changed){var r=ae(n);if(r.lastValue===n.value){return}r.lastValue=n.value}if(u.delayed){clearTimeout(u.delayed)}if(u.throttle){return}if(s.throttle>0){if(!u.throttle){o(a,e);u.throttle=setTimeout(function(){u.throttle=null},s.throttle)}}else if(s.delay>0){u.delayed=setTimeout(function(){o(a,e)},s.delay)}else{ce(a,"htmx:trigger");o(a,e)}}};if(e.listenerInfos==null){e.listenerInfos=[]}e.listenerInfos.push({trigger:s.trigger,listener:i,on:n});n.addEventListener(s.trigger,i)})}var vt=false;var dt=null;function gt(){if(!dt){dt=function(){vt=true};window.addEventListener("scroll",dt);setInterval(function(){if(vt){vt=false;oe(re().querySelectorAll("[hx-trigger='revealed'],[data-hx-trigger='revealed']"),function(e){pt(e)})}},200)}}function pt(t){if(!o(t,"data-hx-revealed")&&X(t)){t.setAttribute("data-hx-revealed","true");var e=ae(t);if(e.initHash){ce(t,"revealed")}else{t.addEventListener("htmx:afterProcessNode",function(e){ce(t,"revealed")},{once:true})}}}function mt(e,t,r){var n=D(r);for(var i=0;i=0){var t=wt(n);setTimeout(function(){xt(s,r,n+1)},t)}};t.onopen=function(e){n=0};ae(s).webSocket=t;t.addEventListener("message",function(e){if(yt(s)){return}var t=e.data;R(s,function(e){t=e.transformResponse(t,null,s)});var r=T(s);var n=l(t);var i=M(n.children);for(var a=0;a0){ce(u,"htmx:validation:halted",i);return}t.send(JSON.stringify(l));if(ut(e,u)){e.preventDefault()}})}else{fe(u,"htmx:noWebSocketSourceError")}}function wt(e){var t=Q.config.wsReconnectDelay;if(typeof t==="function"){return t(e)}if(t==="full-jitter"){var r=Math.min(e,6);var n=1e3*Math.pow(2,r);return n*Math.random()}b('htmx.config.wsReconnectDelay must either be a function or the string "full-jitter"')}function St(e,t,r){var n=D(r);for(var i=0;i0){setTimeout(i,n)}else{i()}}function Ht(t,i,e){var a=false;oe(w,function(r){if(o(t,"hx-"+r)){var n=te(t,"hx-"+r);a=true;i.path=n;i.verb=r;e.forEach(function(e){Lt(t,e,i,function(e,t){if(v(e,Q.config.disableSelector)){m(e);return}he(r,n,e,t)})})}});return a}function Lt(n,e,t,r){if(e.sseEvent){Rt(n,r,e.sseEvent)}else if(e.trigger==="revealed"){gt();ht(n,r,t,e);pt(n)}else if(e.trigger==="intersect"){var i={};if(e.root){i.root=ue(n,e.root)}if(e.threshold){i.threshold=parseFloat(e.threshold)}var a=new IntersectionObserver(function(e){for(var t=0;t0){t.polling=true;ot(n,r,e)}else{ht(n,r,t,e)}}function At(e){if(!e.htmxExecuted&&Q.config.allowScriptTags&&(e.type==="text/javascript"||e.type==="module"||e.type==="")){var t=re().createElement("script");oe(e.attributes,function(e){t.setAttribute(e.name,e.value)});t.textContent=e.textContent;t.async=false;if(Q.config.inlineScriptNonce){t.nonce=Q.config.inlineScriptNonce}var r=e.parentElement;try{r.insertBefore(t,e)}catch(e){b(e)}finally{if(e.parentElement){e.parentElement.removeChild(e)}}}}function Nt(e){if(h(e,"script")){At(e)}oe(f(e,"script"),function(e){At(e)})}function It(e){var t=e.attributes;if(!t){return false}for(var r=0;r0){var o=n.shift();var s=o.match(/^\s*([a-zA-Z:\-\.]+:)(.*)/);if(a===0&&s){o.split(":");i=s[1].slice(0,-1);r[i]=s[2]}else{r[i]+=o}a+=Bt(o)}for(var l in r){Ft(e,l,r[l])}}}function jt(e){Ae(e);for(var t=0;tQ.config.historyCacheSize){i.shift()}while(i.length>0){try{localStorage.setItem("htmx-history-cache",JSON.stringify(i));break}catch(e){fe(re().body,"htmx:historyCacheError",{cause:e,cache:i});i.shift()}}}function Yt(e){if(!U()){return null}e=B(e);var t=E(localStorage.getItem("htmx-history-cache"))||[];for(var r=0;r=200&&this.status<400){ce(re().body,"htmx:historyCacheMissLoad",o);var e=l(this.response);e=e.querySelector("[hx-history-elt],[data-hx-history-elt]")||e;var t=Zt();var r=T(t);var n=Ve(this.response);if(n){var i=C("title");if(i){i.innerHTML=n}else{window.document.title=n}}Ue(t,e,r);nr(r.tasks);Jt=a;ce(re().body,"htmx:historyRestore",{path:a,cacheMiss:true,serverResponse:this.response})}else{fe(re().body,"htmx:historyCacheMissLoadError",o)}};e.send()}function ar(e){er();e=e||location.pathname+location.search;var t=Yt(e);if(t){var r=l(t.content);var n=Zt();var i=T(n);Ue(n,r,i);nr(i.tasks);document.title=t.title;setTimeout(function(){window.scrollTo(0,t.scroll)},0);Jt=e;ce(re().body,"htmx:historyRestore",{path:e,item:t})}else{if(Q.config.refreshOnHistoryMiss){window.location.reload(true)}else{ir(e)}}}function or(e){var t=me(e,"hx-indicator");if(t==null){t=[e]}oe(t,function(e){var t=ae(e);t.requestCount=(t.requestCount||0)+1;e.classList["add"].call(e.classList,Q.config.requestClass)});return t}function sr(e){var t=me(e,"hx-disabled-elt");if(t==null){t=[]}oe(t,function(e){var t=ae(e);t.requestCount=(t.requestCount||0)+1;e.setAttribute("disabled","")});return t}function lr(e,t){oe(e,function(e){var t=ae(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.classList["remove"].call(e.classList,Q.config.requestClass)}});oe(t,function(e){var t=ae(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.removeAttribute("disabled")}})}function ur(e,t){for(var r=0;r=0}function wr(e,t){var r=t?t:ne(e,"hx-swap");var n={swapStyle:ae(e).boosted?"innerHTML":Q.config.defaultSwapStyle,swapDelay:Q.config.defaultSwapDelay,settleDelay:Q.config.defaultSettleDelay};if(Q.config.scrollIntoViewOnBoost&&ae(e).boosted&&!br(e)){n["show"]="top"}if(r){var i=D(r);if(i.length>0){for(var a=0;a0?l.join(":"):null;n["scroll"]=u;n["scrollTarget"]=f}else if(o.indexOf("show:")===0){var c=o.substr(5);var l=c.split(":");var h=l.pop();var f=l.length>0?l.join(":"):null;n["show"]=h;n["showTarget"]=f}else if(o.indexOf("focus-scroll:")===0){var v=o.substr("focus-scroll:".length);n["focusScroll"]=v=="true"}else if(a==0){n["swapStyle"]=o}else{b("Unknown modifier in hx-swap: "+o)}}}}return n}function Sr(e){return ne(e,"hx-encoding")==="multipart/form-data"||h(e,"form")&&ee(e,"enctype")==="multipart/form-data"}function Er(t,r,n){var i=null;R(r,function(e){if(i==null){i=e.encodeParameters(t,n,r)}});if(i!=null){return i}else{if(Sr(r)){return mr(n)}else{return pr(n)}}}function T(e){return{tasks:[],elts:[e]}}function Cr(e,t){var r=e[0];var n=e[e.length-1];if(t.scroll){var i=null;if(t.scrollTarget){i=ue(r,t.scrollTarget)}if(t.scroll==="top"&&(r||i)){i=i||r;i.scrollTop=0}if(t.scroll==="bottom"&&(n||i)){i=i||n;i.scrollTop=i.scrollHeight}}if(t.show){var i=null;if(t.showTarget){var a=t.showTarget;if(t.showTarget==="window"){a="body"}i=ue(r,a)}if(t.show==="top"&&(r||i)){i=i||r;i.scrollIntoView({block:"start",behavior:Q.config.scrollBehavior})}if(t.show==="bottom"&&(n||i)){i=i||n;i.scrollIntoView({block:"end",behavior:Q.config.scrollBehavior})}}}function Rr(e,t,r,n){if(n==null){n={}}if(e==null){return n}var i=te(e,t);if(i){var a=i.trim();var o=r;if(a==="unset"){return null}if(a.indexOf("javascript:")===0){a=a.substr(11);o=true}else if(a.indexOf("js:")===0){a=a.substr(3);o=true}if(a.indexOf("{")!==0){a="{"+a+"}"}var s;if(o){s=Tr(e,function(){return Function("return ("+a+")")()},{})}else{s=E(a)}for(var l in s){if(s.hasOwnProperty(l)){if(n[l]==null){n[l]=s[l]}}}}return Rr(u(e),t,r,n)}function Tr(e,t,r){if(Q.config.allowEval){return t()}else{fe(e,"htmx:evalDisallowedError");return r}}function Or(e,t){return Rr(e,"hx-vars",true,t)}function qr(e,t){return Rr(e,"hx-vals",false,t)}function Hr(e){return le(Or(e),qr(e))}function Lr(t,r,n){if(n!==null){try{t.setRequestHeader(r,n)}catch(e){t.setRequestHeader(r,encodeURIComponent(n));t.setRequestHeader(r+"-URI-AutoEncoded","true")}}}function Ar(t){if(t.responseURL&&typeof URL!=="undefined"){try{var e=new URL(t.responseURL);return e.pathname+e.search}catch(e){fe(re().body,"htmx:badResponseUrl",{url:t.responseURL})}}}function O(e,t){return t.test(e.getAllResponseHeaders())}function Nr(e,t,r){e=e.toLowerCase();if(r){if(r instanceof Element||I(r,"String")){return he(e,t,null,null,{targetOverride:p(r),returnPromise:true})}else{return he(e,t,p(r.source),r.event,{handler:r.handler,headers:r.headers,values:r.values,targetOverride:p(r.target),swapOverride:r.swap,select:r.select,returnPromise:true})}}else{return he(e,t,null,null,{returnPromise:true})}}function Ir(e){var t=[];while(e){t.push(e);e=e.parentElement}return t}function kr(e,t,r){var n;var i;if(typeof URL==="function"){i=new URL(t,document.location.href);var a=document.location.origin;n=a===i.origin}else{i=t;n=g(t,document.location.origin)}if(Q.config.selfRequestsOnly){if(!n){return false}}return ce(e,"htmx:validateUrl",le({url:i,sameHost:n},r))}function he(t,r,n,i,a,e){var o=null;var s=null;a=a!=null?a:{};if(a.returnPromise&&typeof Promise!=="undefined"){var l=new Promise(function(e,t){o=e;s=t})}if(n==null){n=re().body}var M=a.handler||Mr;var X=a.select||null;if(!se(n)){ie(o);return l}var u=a.targetOverride||ye(n);if(u==null||u==pe){fe(n,"htmx:targetError",{target:te(n,"hx-target")});ie(s);return l}var f=ae(n);var c=f.lastButtonClicked;if(c){var h=ee(c,"formaction");if(h!=null){r=h}var v=ee(c,"formmethod");if(v!=null){if(v.toLowerCase()!=="dialog"){t=v}}}var d=ne(n,"hx-confirm");if(e===undefined){var D=function(e){return he(t,r,n,i,a,!!e)};var U={target:u,elt:n,path:r,verb:t,triggeringEvent:i,etc:a,issueRequest:D,question:d};if(ce(n,"htmx:confirm",U)===false){ie(o);return l}}var g=n;var p=ne(n,"hx-sync");var m=null;var x=false;if(p){var B=p.split(":");var F=B[0].trim();if(F==="this"){g=xe(n,"hx-sync")}else{g=ue(n,F)}p=(B[1]||"drop").trim();f=ae(g);if(p==="drop"&&f.xhr&&f.abortable!==true){ie(o);return l}else if(p==="abort"){if(f.xhr){ie(o);return l}else{x=true}}else if(p==="replace"){ce(g,"htmx:abort")}else if(p.indexOf("queue")===0){var V=p.split(" ");m=(V[1]||"last").trim()}}if(f.xhr){if(f.abortable){ce(g,"htmx:abort")}else{if(m==null){if(i){var y=ae(i);if(y&&y.triggerSpec&&y.triggerSpec.queue){m=y.triggerSpec.queue}}if(m==null){m="last"}}if(f.queuedRequests==null){f.queuedRequests=[]}if(m==="first"&&f.queuedRequests.length===0){f.queuedRequests.push(function(){he(t,r,n,i,a)})}else if(m==="all"){f.queuedRequests.push(function(){he(t,r,n,i,a)})}else if(m==="last"){f.queuedRequests=[];f.queuedRequests.push(function(){he(t,r,n,i,a)})}ie(o);return l}}var b=new XMLHttpRequest;f.xhr=b;f.abortable=x;var w=function(){f.xhr=null;f.abortable=false;if(f.queuedRequests!=null&&f.queuedRequests.length>0){var e=f.queuedRequests.shift();e()}};var j=ne(n,"hx-prompt");if(j){var S=prompt(j);if(S===null||!ce(n,"htmx:prompt",{prompt:S,target:u})){ie(o);w();return l}}if(d&&!e){if(!confirm(d)){ie(o);w();return l}}var E=xr(n,u,S);if(t!=="get"&&!Sr(n)){E["Content-Type"]="application/x-www-form-urlencoded"}if(a.headers){E=le(E,a.headers)}var _=dr(n,t);var C=_.errors;var R=_.values;if(a.values){R=le(R,a.values)}var z=Hr(n);var $=le(R,z);var T=yr($,n);if(Q.config.getCacheBusterParam&&t==="get"){T["org.htmx.cache-buster"]=ee(u,"id")||"true"}if(r==null||r===""){r=re().location.href}var O=Rr(n,"hx-request");var W=ae(n).boosted;var q=Q.config.methodsThatUseUrlParams.indexOf(t)>=0;var H={boosted:W,useUrlParams:q,parameters:T,unfilteredParameters:$,headers:E,target:u,verb:t,errors:C,withCredentials:a.credentials||O.credentials||Q.config.withCredentials,timeout:a.timeout||O.timeout||Q.config.timeout,path:r,triggeringEvent:i};if(!ce(n,"htmx:configRequest",H)){ie(o);w();return l}r=H.path;t=H.verb;E=H.headers;T=H.parameters;C=H.errors;q=H.useUrlParams;if(C&&C.length>0){ce(n,"htmx:validation:halted",H);ie(o);w();return l}var G=r.split("#");var J=G[0];var L=G[1];var A=r;if(q){A=J;var Z=Object.keys(T).length!==0;if(Z){if(A.indexOf("?")<0){A+="?"}else{A+="&"}A+=pr(T);if(L){A+="#"+L}}}if(!kr(n,A,H)){fe(n,"htmx:invalidPath",H);ie(s);return l}b.open(t.toUpperCase(),A,true);b.overrideMimeType("text/html");b.withCredentials=H.withCredentials;b.timeout=H.timeout;if(O.noHeaders){}else{for(var N in E){if(E.hasOwnProperty(N)){var K=E[N];Lr(b,N,K)}}}var I={xhr:b,target:u,requestConfig:H,etc:a,boosted:W,select:X,pathInfo:{requestPath:r,finalRequestPath:A,anchor:L}};b.onload=function(){try{var e=Ir(n);I.pathInfo.responsePath=Ar(b);M(n,I);lr(k,P);ce(n,"htmx:afterRequest",I);ce(n,"htmx:afterOnLoad",I);if(!se(n)){var t=null;while(e.length>0&&t==null){var r=e.shift();if(se(r)){t=r}}if(t){ce(t,"htmx:afterRequest",I);ce(t,"htmx:afterOnLoad",I)}}ie(o);w()}catch(e){fe(n,"htmx:onLoadError",le({error:e},I));throw e}};b.onerror=function(){lr(k,P);fe(n,"htmx:afterRequest",I);fe(n,"htmx:sendError",I);ie(s);w()};b.onabort=function(){lr(k,P);fe(n,"htmx:afterRequest",I);fe(n,"htmx:sendAbort",I);ie(s);w()};b.ontimeout=function(){lr(k,P);fe(n,"htmx:afterRequest",I);fe(n,"htmx:timeout",I);ie(s);w()};if(!ce(n,"htmx:beforeRequest",I)){ie(o);w();return l}var k=or(n);var P=sr(n);oe(["loadstart","loadend","progress","abort"],function(t){oe([b,b.upload],function(e){e.addEventListener(t,function(e){ce(n,"htmx:xhr:"+t,{lengthComputable:e.lengthComputable,loaded:e.loaded,total:e.total})})})});ce(n,"htmx:beforeSend",I);var Y=q?null:Er(b,n,T);b.send(Y);return l}function Pr(e,t){var r=t.xhr;var n=null;var i=null;if(O(r,/HX-Push:/i)){n=r.getResponseHeader("HX-Push");i="push"}else if(O(r,/HX-Push-Url:/i)){n=r.getResponseHeader("HX-Push-Url");i="push"}else if(O(r,/HX-Replace-Url:/i)){n=r.getResponseHeader("HX-Replace-Url");i="replace"}if(n){if(n==="false"){return{}}else{return{type:i,path:n}}}var a=t.pathInfo.finalRequestPath;var o=t.pathInfo.responsePath;var s=ne(e,"hx-push-url");var l=ne(e,"hx-replace-url");var u=ae(e).boosted;var f=null;var c=null;if(s){f="push";c=s}else if(l){f="replace";c=l}else if(u){f="push";c=o||a}if(c){if(c==="false"){return{}}if(c==="true"){c=o||a}if(t.pathInfo.anchor&&c.indexOf("#")===-1){c=c+"#"+t.pathInfo.anchor}return{type:f,path:c}}else{return{}}}function Mr(l,u){var f=u.xhr;var c=u.target;var e=u.etc;var t=u.requestConfig;var h=u.select;if(!ce(l,"htmx:beforeOnLoad",u))return;if(O(f,/HX-Trigger:/i)){_e(f,"HX-Trigger",l)}if(O(f,/HX-Location:/i)){er();var r=f.getResponseHeader("HX-Location");var v;if(r.indexOf("{")===0){v=E(r);r=v["path"];delete v["path"]}Nr("GET",r,v).then(function(){tr(r)});return}var n=O(f,/HX-Refresh:/i)&&"true"===f.getResponseHeader("HX-Refresh");if(O(f,/HX-Redirect:/i)){location.href=f.getResponseHeader("HX-Redirect");n&&location.reload();return}if(n){location.reload();return}if(O(f,/HX-Retarget:/i)){if(f.getResponseHeader("HX-Retarget")==="this"){u.target=l}else{u.target=ue(l,f.getResponseHeader("HX-Retarget"))}}var d=Pr(l,u);var i=f.status>=200&&f.status<400&&f.status!==204;var g=f.response;var a=f.status>=400;var p=Q.config.ignoreTitle;var o=le({shouldSwap:i,serverResponse:g,isError:a,ignoreTitle:p},u);if(!ce(c,"htmx:beforeSwap",o))return;c=o.target;g=o.serverResponse;a=o.isError;p=o.ignoreTitle;u.target=c;u.failed=a;u.successful=!a;if(o.shouldSwap){if(f.status===286){at(l)}R(l,function(e){g=e.transformResponse(g,f,l)});if(d.type){er()}var s=e.swapOverride;if(O(f,/HX-Reswap:/i)){s=f.getResponseHeader("HX-Reswap")}var v=wr(l,s);if(v.hasOwnProperty("ignoreTitle")){p=v.ignoreTitle}c.classList.add(Q.config.swappingClass);var m=null;var x=null;var y=function(){try{var e=document.activeElement;var t={};try{t={elt:e,start:e?e.selectionStart:null,end:e?e.selectionEnd:null}}catch(e){}var r;if(h){r=h}if(O(f,/HX-Reselect:/i)){r=f.getResponseHeader("HX-Reselect")}if(d.type){ce(re().body,"htmx:beforeHistoryUpdate",le({history:d},u));if(d.type==="push"){tr(d.path);ce(re().body,"htmx:pushedIntoHistory",{path:d.path})}else{rr(d.path);ce(re().body,"htmx:replacedInHistory",{path:d.path})}}var n=T(c);je(v.swapStyle,c,l,g,n,r);if(t.elt&&!se(t.elt)&&ee(t.elt,"id")){var i=document.getElementById(ee(t.elt,"id"));var a={preventScroll:v.focusScroll!==undefined?!v.focusScroll:!Q.config.defaultFocusScroll};if(i){if(t.start&&i.setSelectionRange){try{i.setSelectionRange(t.start,t.end)}catch(e){}}i.focus(a)}}c.classList.remove(Q.config.swappingClass);oe(n.elts,function(e){if(e.classList){e.classList.add(Q.config.settlingClass)}ce(e,"htmx:afterSwap",u)});if(O(f,/HX-Trigger-After-Swap:/i)){var o=l;if(!se(l)){o=re().body}_e(f,"HX-Trigger-After-Swap",o)}var s=function(){oe(n.tasks,function(e){e.call()});oe(n.elts,function(e){if(e.classList){e.classList.remove(Q.config.settlingClass)}ce(e,"htmx:afterSettle",u)});if(u.pathInfo.anchor){var e=re().getElementById(u.pathInfo.anchor);if(e){e.scrollIntoView({block:"start",behavior:"auto"})}}if(n.title&&!p){var t=C("title");if(t){t.innerHTML=n.title}else{window.document.title=n.title}}Cr(n.elts,v);if(O(f,/HX-Trigger-After-Settle:/i)){var r=l;if(!se(l)){r=re().body}_e(f,"HX-Trigger-After-Settle",r)}ie(m)};if(v.settleDelay>0){setTimeout(s,v.settleDelay)}else{s()}}catch(e){fe(l,"htmx:swapError",u);ie(x);throw e}};var b=Q.config.globalViewTransitions;if(v.hasOwnProperty("transition")){b=v.transition}if(b&&ce(l,"htmx:beforeTransition",u)&&typeof Promise!=="undefined"&&document.startViewTransition){var w=new Promise(function(e,t){m=e;x=t});var S=y;y=function(){document.startViewTransition(function(){S();return w})}}if(v.swapDelay>0){setTimeout(y,v.swapDelay)}else{y()}}if(a){fe(l,"htmx:responseError",le({error:"Response Status Error Code "+f.status+" from "+u.pathInfo.requestPath},u))}}var Xr={};function Dr(){return{init:function(e){return null},onEvent:function(e,t){return true},transformResponse:function(e,t,r){return e},isInlineSwap:function(e){return false},handleSwap:function(e,t,r,n){return false},encodeParameters:function(e,t,r){return null}}}function Ur(e,t){if(t.init){t.init(r)}Xr[e]=le(Dr(),t)}function Br(e){delete Xr[e]}function Fr(e,r,n){if(e==undefined){return r}if(r==undefined){r=[]}if(n==undefined){n=[]}var t=te(e,"hx-ext");if(t){oe(t.split(","),function(e){e=e.replace(/ /g,"");if(e.slice(0,7)=="ignore:"){n.push(e.slice(7));return}if(n.indexOf(e)<0){var t=Xr[e];if(t&&r.indexOf(t)<0){r.push(t)}}})}return Fr(u(e),r,n)}var Vr=false;re().addEventListener("DOMContentLoaded",function(){Vr=true});function jr(e){if(Vr||re().readyState==="complete"){e()}else{re().addEventListener("DOMContentLoaded",e)}}function _r(){if(Q.config.includeIndicatorStyles!==false){re().head.insertAdjacentHTML("beforeend","")}}function zr(){var e=re().querySelector('meta[name="htmx-config"]');if(e){return E(e.content)}else{return null}}function $r(){var e=zr();if(e){Q.config=le(Q.config,e)}}jr(function(){$r();_r();var e=re().body;zt(e);var t=re().querySelectorAll("[hx-trigger='restored'],[data-hx-trigger='restored']");e.addEventListener("htmx:abort",function(e){var t=e.target;var r=ae(t);if(r&&r.xhr){r.xhr.abort()}});const r=window.onpopstate?window.onpopstate.bind(window):null;window.onpopstate=function(e){if(e.state&&e.state.htmx){ar();oe(t,function(e){ce(e,"htmx:restored",{document:re(),triggerEvent:ce})})}else{if(r){r(e)}}};setTimeout(function(){ce(e,"htmx:load",{});e=null},0)});return Q}()});
\ No newline at end of file
diff --git a/public/images/logo.svg b/public/images/logo.svg
new file mode 100644
index 0000000..116715f
--- /dev/null
+++ b/public/images/logo.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/base.rs b/src/base.rs
new file mode 100644
index 0000000..e54d7d4
--- /dev/null
+++ b/src/base.rs
@@ -0,0 +1,32 @@
+use maud::{html, Markup, DOCTYPE};
+
+pub fn header() -> Markup {
+ html! {
+ (DOCTYPE)
+ head {
+ meta charset="utf-8";
+ title class="title" { "Clego" }
+ script src="/public/htmx.min.js" {};
+ link rel="stylesheet" href="/public/styles/main.css";
+ link rel="icon" href="/public/favicon.ico";
+ }
+ section class="hero is-primary is-small"{
+ div class="hero-head" {
+ nav class="navbar" role="navigation" aria-label="main navigation" {
+ div class="container" {
+ div class="navbar-brand" {
+ img src="/public/images/logo.svg" alt="logo";
+ h1 class="title" { "Clego" }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+pub fn error_tmpl() -> Markup {
+ html! {
+ h1 { "Something went terribly wrong :(" }
+ }
+}
diff --git a/src/main.rs b/src/main.rs
index e7a11a9..7b87c32 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -1,3 +1,41 @@
-fn main() {
- println!("Hello, world!");
+use axum::{routing::get, Router};
+use maud::{html, Markup};
+use tower_http::services::ServeDir;
+use tracing::info;
+use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
+
+mod base;
+// mod tasks;
+
+#[tokio::main]
+async fn main() {
+ tracing_subscriber::registry()
+ .with(
+ tracing_subscriber::EnvFilter::try_from_default_env()
+ .unwrap_or_else(|_| "clego_app=debug".into()),
+ )
+ .with(tracing_subscriber::fmt::layer())
+ .init();
+
+ info!("initializing router...");
+
+ let router = Router::new()
+ .route("/", get(hello))
+ .nest_service("/public", ServeDir::new("public"));
+ let port = 3000_u16;
+ let listener = tokio::net::TcpListener::bind(format!("0.0.0.0:{}", port))
+ .await
+ .unwrap();
+
+ info!("router initialized, now listening on port {}", port);
+ axum::serve(listener, router).await.unwrap();
+}
+
+async fn hello() -> Markup {
+ html! {
+ (base::header())
+ main class="content" {
+ h1 { "Howdy!" }
+ }
+ }
}
diff --git a/src/tasks/mod.rs b/src/tasks/mod.rs
new file mode 100644
index 0000000..948beb8
--- /dev/null
+++ b/src/tasks/mod.rs
@@ -0,0 +1,2 @@
+pub mod tasks;
+pub mod tasks_controller;
diff --git a/src/tasks/tasks.rs b/src/tasks/tasks.rs
new file mode 100644
index 0000000..f68aeae
--- /dev/null
+++ b/src/tasks/tasks.rs
@@ -0,0 +1,61 @@
+#[derive(Clone)]
+pub struct Task {
+ pub id: i32,
+ pub label: TaskLabel,
+ pub title: String,
+ pub status: TaskStatus,
+}
+
+#[derive(Clone)]
+enum TaskLabel {
+ Bug,
+ Feature,
+ Documentation,
+}
+
+#[derive(Clone)]
+enum TaskStatus {
+ Backlog {},
+}
+
+impl TaskStatus {
+ fn new(status: &str) -> Option {
+ match status {
+ "pending" => Some(TaskStatus::Backlog {
+ icon: "🕒",
+ title: "Backlog",
+ }),
+ "in_progress" => Some(TaskStatus::InProgress {
+ icon: "⚙️",
+ title: "In Progress",
+ }),
+ "completed" => Some(TaskStatus::Completed {
+ icon: "✔️",
+ title: "Completed",
+ }),
+ "failed" => Some(TaskStatus::Failed {
+ icon: "❌",
+ title: "Failed",
+ }),
+ _ => None,
+ }
+ }
+
+ fn icon(&self) -> &'static str {
+ match self {
+ TaskStatus::Pending { icon, .. } => icon,
+ TaskStatus::InProgress { icon, .. } => icon,
+ TaskStatus::Completed { icon, .. } => icon,
+ TaskStatus::Failed { icon, .. } => icon,
+ }
+ }
+
+ fn title(&self) -> &'static str {
+ match self {
+ TaskStatus::Pending { title, .. } => title,
+ TaskStatus::InProgress { title, .. } => title,
+ TaskStatus::Completed { title, .. } => title,
+ TaskStatus::Failed { title, .. } => title,
+ }
+ }
+}
diff --git a/src/tasks/tasks_controler.rs b/src/tasks/tasks_controler.rs
new file mode 100644
index 0000000..e69de29
diff --git a/style/bootstrap-icons.scss b/style/bootstrap-icons.scss
new file mode 100644
index 0000000..9fafa26
--- /dev/null
+++ b/style/bootstrap-icons.scss
@@ -0,0 +1,2090 @@
+/*!
+ * Bootstrap Icons v1.11.3 (https://icons.getbootstrap.com/)
+ * Copyright 2019-2024 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
+ */
+
+$bootstrap-icons-font: "bootstrap-icons" !default;
+$bootstrap-icons-font-dir: "/public/fonts" !default;
+$bootstrap-icons-font-file: "#{$bootstrap-icons-font-dir}/#{$bootstrap-icons-font}" !default;
+$bootstrap-icons-font-hash: "24e3eb84d0bcaf83d77f904c78ac1f47" !default;
+$bootstrap-icons-font-src: url("#{$bootstrap-icons-font-file}.woff2?#{$bootstrap-icons-font-hash}") format("woff2"),
+ url("#{$bootstrap-icons-font-file}.woff?#{$bootstrap-icons-font-hash}") format("woff") !default;
+
+@font-face {
+ font-display: block;
+ font-family: $bootstrap-icons-font;
+ src: $bootstrap-icons-font-src;
+}
+
+.bi::before,
+[class^="bi-"]::before,
+[class*=" bi-"]::before {
+ display: inline-block;
+ font-family: $bootstrap-icons-font !important;
+ font-style: normal;
+ font-weight: normal !important;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+ vertical-align: -.125em;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+$bootstrap-icons-map: (
+ "123": "\f67f",
+ "alarm-fill": "\f101",
+ "alarm": "\f102",
+ "align-bottom": "\f103",
+ "align-center": "\f104",
+ "align-end": "\f105",
+ "align-middle": "\f106",
+ "align-start": "\f107",
+ "align-top": "\f108",
+ "alt": "\f109",
+ "app-indicator": "\f10a",
+ "app": "\f10b",
+ "archive-fill": "\f10c",
+ "archive": "\f10d",
+ "arrow-90deg-down": "\f10e",
+ "arrow-90deg-left": "\f10f",
+ "arrow-90deg-right": "\f110",
+ "arrow-90deg-up": "\f111",
+ "arrow-bar-down": "\f112",
+ "arrow-bar-left": "\f113",
+ "arrow-bar-right": "\f114",
+ "arrow-bar-up": "\f115",
+ "arrow-clockwise": "\f116",
+ "arrow-counterclockwise": "\f117",
+ "arrow-down-circle-fill": "\f118",
+ "arrow-down-circle": "\f119",
+ "arrow-down-left-circle-fill": "\f11a",
+ "arrow-down-left-circle": "\f11b",
+ "arrow-down-left-square-fill": "\f11c",
+ "arrow-down-left-square": "\f11d",
+ "arrow-down-left": "\f11e",
+ "arrow-down-right-circle-fill": "\f11f",
+ "arrow-down-right-circle": "\f120",
+ "arrow-down-right-square-fill": "\f121",
+ "arrow-down-right-square": "\f122",
+ "arrow-down-right": "\f123",
+ "arrow-down-short": "\f124",
+ "arrow-down-square-fill": "\f125",
+ "arrow-down-square": "\f126",
+ "arrow-down-up": "\f127",
+ "arrow-down": "\f128",
+ "arrow-left-circle-fill": "\f129",
+ "arrow-left-circle": "\f12a",
+ "arrow-left-right": "\f12b",
+ "arrow-left-short": "\f12c",
+ "arrow-left-square-fill": "\f12d",
+ "arrow-left-square": "\f12e",
+ "arrow-left": "\f12f",
+ "arrow-repeat": "\f130",
+ "arrow-return-left": "\f131",
+ "arrow-return-right": "\f132",
+ "arrow-right-circle-fill": "\f133",
+ "arrow-right-circle": "\f134",
+ "arrow-right-short": "\f135",
+ "arrow-right-square-fill": "\f136",
+ "arrow-right-square": "\f137",
+ "arrow-right": "\f138",
+ "arrow-up-circle-fill": "\f139",
+ "arrow-up-circle": "\f13a",
+ "arrow-up-left-circle-fill": "\f13b",
+ "arrow-up-left-circle": "\f13c",
+ "arrow-up-left-square-fill": "\f13d",
+ "arrow-up-left-square": "\f13e",
+ "arrow-up-left": "\f13f",
+ "arrow-up-right-circle-fill": "\f140",
+ "arrow-up-right-circle": "\f141",
+ "arrow-up-right-square-fill": "\f142",
+ "arrow-up-right-square": "\f143",
+ "arrow-up-right": "\f144",
+ "arrow-up-short": "\f145",
+ "arrow-up-square-fill": "\f146",
+ "arrow-up-square": "\f147",
+ "arrow-up": "\f148",
+ "arrows-angle-contract": "\f149",
+ "arrows-angle-expand": "\f14a",
+ "arrows-collapse": "\f14b",
+ "arrows-expand": "\f14c",
+ "arrows-fullscreen": "\f14d",
+ "arrows-move": "\f14e",
+ "aspect-ratio-fill": "\f14f",
+ "aspect-ratio": "\f150",
+ "asterisk": "\f151",
+ "at": "\f152",
+ "award-fill": "\f153",
+ "award": "\f154",
+ "back": "\f155",
+ "backspace-fill": "\f156",
+ "backspace-reverse-fill": "\f157",
+ "backspace-reverse": "\f158",
+ "backspace": "\f159",
+ "badge-3d-fill": "\f15a",
+ "badge-3d": "\f15b",
+ "badge-4k-fill": "\f15c",
+ "badge-4k": "\f15d",
+ "badge-8k-fill": "\f15e",
+ "badge-8k": "\f15f",
+ "badge-ad-fill": "\f160",
+ "badge-ad": "\f161",
+ "badge-ar-fill": "\f162",
+ "badge-ar": "\f163",
+ "badge-cc-fill": "\f164",
+ "badge-cc": "\f165",
+ "badge-hd-fill": "\f166",
+ "badge-hd": "\f167",
+ "badge-tm-fill": "\f168",
+ "badge-tm": "\f169",
+ "badge-vo-fill": "\f16a",
+ "badge-vo": "\f16b",
+ "badge-vr-fill": "\f16c",
+ "badge-vr": "\f16d",
+ "badge-wc-fill": "\f16e",
+ "badge-wc": "\f16f",
+ "bag-check-fill": "\f170",
+ "bag-check": "\f171",
+ "bag-dash-fill": "\f172",
+ "bag-dash": "\f173",
+ "bag-fill": "\f174",
+ "bag-plus-fill": "\f175",
+ "bag-plus": "\f176",
+ "bag-x-fill": "\f177",
+ "bag-x": "\f178",
+ "bag": "\f179",
+ "bar-chart-fill": "\f17a",
+ "bar-chart-line-fill": "\f17b",
+ "bar-chart-line": "\f17c",
+ "bar-chart-steps": "\f17d",
+ "bar-chart": "\f17e",
+ "basket-fill": "\f17f",
+ "basket": "\f180",
+ "basket2-fill": "\f181",
+ "basket2": "\f182",
+ "basket3-fill": "\f183",
+ "basket3": "\f184",
+ "battery-charging": "\f185",
+ "battery-full": "\f186",
+ "battery-half": "\f187",
+ "battery": "\f188",
+ "bell-fill": "\f189",
+ "bell": "\f18a",
+ "bezier": "\f18b",
+ "bezier2": "\f18c",
+ "bicycle": "\f18d",
+ "binoculars-fill": "\f18e",
+ "binoculars": "\f18f",
+ "blockquote-left": "\f190",
+ "blockquote-right": "\f191",
+ "book-fill": "\f192",
+ "book-half": "\f193",
+ "book": "\f194",
+ "bookmark-check-fill": "\f195",
+ "bookmark-check": "\f196",
+ "bookmark-dash-fill": "\f197",
+ "bookmark-dash": "\f198",
+ "bookmark-fill": "\f199",
+ "bookmark-heart-fill": "\f19a",
+ "bookmark-heart": "\f19b",
+ "bookmark-plus-fill": "\f19c",
+ "bookmark-plus": "\f19d",
+ "bookmark-star-fill": "\f19e",
+ "bookmark-star": "\f19f",
+ "bookmark-x-fill": "\f1a0",
+ "bookmark-x": "\f1a1",
+ "bookmark": "\f1a2",
+ "bookmarks-fill": "\f1a3",
+ "bookmarks": "\f1a4",
+ "bookshelf": "\f1a5",
+ "bootstrap-fill": "\f1a6",
+ "bootstrap-reboot": "\f1a7",
+ "bootstrap": "\f1a8",
+ "border-all": "\f1a9",
+ "border-bottom": "\f1aa",
+ "border-center": "\f1ab",
+ "border-inner": "\f1ac",
+ "border-left": "\f1ad",
+ "border-middle": "\f1ae",
+ "border-outer": "\f1af",
+ "border-right": "\f1b0",
+ "border-style": "\f1b1",
+ "border-top": "\f1b2",
+ "border-width": "\f1b3",
+ "border": "\f1b4",
+ "bounding-box-circles": "\f1b5",
+ "bounding-box": "\f1b6",
+ "box-arrow-down-left": "\f1b7",
+ "box-arrow-down-right": "\f1b8",
+ "box-arrow-down": "\f1b9",
+ "box-arrow-in-down-left": "\f1ba",
+ "box-arrow-in-down-right": "\f1bb",
+ "box-arrow-in-down": "\f1bc",
+ "box-arrow-in-left": "\f1bd",
+ "box-arrow-in-right": "\f1be",
+ "box-arrow-in-up-left": "\f1bf",
+ "box-arrow-in-up-right": "\f1c0",
+ "box-arrow-in-up": "\f1c1",
+ "box-arrow-left": "\f1c2",
+ "box-arrow-right": "\f1c3",
+ "box-arrow-up-left": "\f1c4",
+ "box-arrow-up-right": "\f1c5",
+ "box-arrow-up": "\f1c6",
+ "box-seam": "\f1c7",
+ "box": "\f1c8",
+ "braces": "\f1c9",
+ "bricks": "\f1ca",
+ "briefcase-fill": "\f1cb",
+ "briefcase": "\f1cc",
+ "brightness-alt-high-fill": "\f1cd",
+ "brightness-alt-high": "\f1ce",
+ "brightness-alt-low-fill": "\f1cf",
+ "brightness-alt-low": "\f1d0",
+ "brightness-high-fill": "\f1d1",
+ "brightness-high": "\f1d2",
+ "brightness-low-fill": "\f1d3",
+ "brightness-low": "\f1d4",
+ "broadcast-pin": "\f1d5",
+ "broadcast": "\f1d6",
+ "brush-fill": "\f1d7",
+ "brush": "\f1d8",
+ "bucket-fill": "\f1d9",
+ "bucket": "\f1da",
+ "bug-fill": "\f1db",
+ "bug": "\f1dc",
+ "building": "\f1dd",
+ "bullseye": "\f1de",
+ "calculator-fill": "\f1df",
+ "calculator": "\f1e0",
+ "calendar-check-fill": "\f1e1",
+ "calendar-check": "\f1e2",
+ "calendar-date-fill": "\f1e3",
+ "calendar-date": "\f1e4",
+ "calendar-day-fill": "\f1e5",
+ "calendar-day": "\f1e6",
+ "calendar-event-fill": "\f1e7",
+ "calendar-event": "\f1e8",
+ "calendar-fill": "\f1e9",
+ "calendar-minus-fill": "\f1ea",
+ "calendar-minus": "\f1eb",
+ "calendar-month-fill": "\f1ec",
+ "calendar-month": "\f1ed",
+ "calendar-plus-fill": "\f1ee",
+ "calendar-plus": "\f1ef",
+ "calendar-range-fill": "\f1f0",
+ "calendar-range": "\f1f1",
+ "calendar-week-fill": "\f1f2",
+ "calendar-week": "\f1f3",
+ "calendar-x-fill": "\f1f4",
+ "calendar-x": "\f1f5",
+ "calendar": "\f1f6",
+ "calendar2-check-fill": "\f1f7",
+ "calendar2-check": "\f1f8",
+ "calendar2-date-fill": "\f1f9",
+ "calendar2-date": "\f1fa",
+ "calendar2-day-fill": "\f1fb",
+ "calendar2-day": "\f1fc",
+ "calendar2-event-fill": "\f1fd",
+ "calendar2-event": "\f1fe",
+ "calendar2-fill": "\f1ff",
+ "calendar2-minus-fill": "\f200",
+ "calendar2-minus": "\f201",
+ "calendar2-month-fill": "\f202",
+ "calendar2-month": "\f203",
+ "calendar2-plus-fill": "\f204",
+ "calendar2-plus": "\f205",
+ "calendar2-range-fill": "\f206",
+ "calendar2-range": "\f207",
+ "calendar2-week-fill": "\f208",
+ "calendar2-week": "\f209",
+ "calendar2-x-fill": "\f20a",
+ "calendar2-x": "\f20b",
+ "calendar2": "\f20c",
+ "calendar3-event-fill": "\f20d",
+ "calendar3-event": "\f20e",
+ "calendar3-fill": "\f20f",
+ "calendar3-range-fill": "\f210",
+ "calendar3-range": "\f211",
+ "calendar3-week-fill": "\f212",
+ "calendar3-week": "\f213",
+ "calendar3": "\f214",
+ "calendar4-event": "\f215",
+ "calendar4-range": "\f216",
+ "calendar4-week": "\f217",
+ "calendar4": "\f218",
+ "camera-fill": "\f219",
+ "camera-reels-fill": "\f21a",
+ "camera-reels": "\f21b",
+ "camera-video-fill": "\f21c",
+ "camera-video-off-fill": "\f21d",
+ "camera-video-off": "\f21e",
+ "camera-video": "\f21f",
+ "camera": "\f220",
+ "camera2": "\f221",
+ "capslock-fill": "\f222",
+ "capslock": "\f223",
+ "card-checklist": "\f224",
+ "card-heading": "\f225",
+ "card-image": "\f226",
+ "card-list": "\f227",
+ "card-text": "\f228",
+ "caret-down-fill": "\f229",
+ "caret-down-square-fill": "\f22a",
+ "caret-down-square": "\f22b",
+ "caret-down": "\f22c",
+ "caret-left-fill": "\f22d",
+ "caret-left-square-fill": "\f22e",
+ "caret-left-square": "\f22f",
+ "caret-left": "\f230",
+ "caret-right-fill": "\f231",
+ "caret-right-square-fill": "\f232",
+ "caret-right-square": "\f233",
+ "caret-right": "\f234",
+ "caret-up-fill": "\f235",
+ "caret-up-square-fill": "\f236",
+ "caret-up-square": "\f237",
+ "caret-up": "\f238",
+ "cart-check-fill": "\f239",
+ "cart-check": "\f23a",
+ "cart-dash-fill": "\f23b",
+ "cart-dash": "\f23c",
+ "cart-fill": "\f23d",
+ "cart-plus-fill": "\f23e",
+ "cart-plus": "\f23f",
+ "cart-x-fill": "\f240",
+ "cart-x": "\f241",
+ "cart": "\f242",
+ "cart2": "\f243",
+ "cart3": "\f244",
+ "cart4": "\f245",
+ "cash-stack": "\f246",
+ "cash": "\f247",
+ "cast": "\f248",
+ "chat-dots-fill": "\f249",
+ "chat-dots": "\f24a",
+ "chat-fill": "\f24b",
+ "chat-left-dots-fill": "\f24c",
+ "chat-left-dots": "\f24d",
+ "chat-left-fill": "\f24e",
+ "chat-left-quote-fill": "\f24f",
+ "chat-left-quote": "\f250",
+ "chat-left-text-fill": "\f251",
+ "chat-left-text": "\f252",
+ "chat-left": "\f253",
+ "chat-quote-fill": "\f254",
+ "chat-quote": "\f255",
+ "chat-right-dots-fill": "\f256",
+ "chat-right-dots": "\f257",
+ "chat-right-fill": "\f258",
+ "chat-right-quote-fill": "\f259",
+ "chat-right-quote": "\f25a",
+ "chat-right-text-fill": "\f25b",
+ "chat-right-text": "\f25c",
+ "chat-right": "\f25d",
+ "chat-square-dots-fill": "\f25e",
+ "chat-square-dots": "\f25f",
+ "chat-square-fill": "\f260",
+ "chat-square-quote-fill": "\f261",
+ "chat-square-quote": "\f262",
+ "chat-square-text-fill": "\f263",
+ "chat-square-text": "\f264",
+ "chat-square": "\f265",
+ "chat-text-fill": "\f266",
+ "chat-text": "\f267",
+ "chat": "\f268",
+ "check-all": "\f269",
+ "check-circle-fill": "\f26a",
+ "check-circle": "\f26b",
+ "check-square-fill": "\f26c",
+ "check-square": "\f26d",
+ "check": "\f26e",
+ "check2-all": "\f26f",
+ "check2-circle": "\f270",
+ "check2-square": "\f271",
+ "check2": "\f272",
+ "chevron-bar-contract": "\f273",
+ "chevron-bar-down": "\f274",
+ "chevron-bar-expand": "\f275",
+ "chevron-bar-left": "\f276",
+ "chevron-bar-right": "\f277",
+ "chevron-bar-up": "\f278",
+ "chevron-compact-down": "\f279",
+ "chevron-compact-left": "\f27a",
+ "chevron-compact-right": "\f27b",
+ "chevron-compact-up": "\f27c",
+ "chevron-contract": "\f27d",
+ "chevron-double-down": "\f27e",
+ "chevron-double-left": "\f27f",
+ "chevron-double-right": "\f280",
+ "chevron-double-up": "\f281",
+ "chevron-down": "\f282",
+ "chevron-expand": "\f283",
+ "chevron-left": "\f284",
+ "chevron-right": "\f285",
+ "chevron-up": "\f286",
+ "circle-fill": "\f287",
+ "circle-half": "\f288",
+ "circle-square": "\f289",
+ "circle": "\f28a",
+ "clipboard-check": "\f28b",
+ "clipboard-data": "\f28c",
+ "clipboard-minus": "\f28d",
+ "clipboard-plus": "\f28e",
+ "clipboard-x": "\f28f",
+ "clipboard": "\f290",
+ "clock-fill": "\f291",
+ "clock-history": "\f292",
+ "clock": "\f293",
+ "cloud-arrow-down-fill": "\f294",
+ "cloud-arrow-down": "\f295",
+ "cloud-arrow-up-fill": "\f296",
+ "cloud-arrow-up": "\f297",
+ "cloud-check-fill": "\f298",
+ "cloud-check": "\f299",
+ "cloud-download-fill": "\f29a",
+ "cloud-download": "\f29b",
+ "cloud-drizzle-fill": "\f29c",
+ "cloud-drizzle": "\f29d",
+ "cloud-fill": "\f29e",
+ "cloud-fog-fill": "\f29f",
+ "cloud-fog": "\f2a0",
+ "cloud-fog2-fill": "\f2a1",
+ "cloud-fog2": "\f2a2",
+ "cloud-hail-fill": "\f2a3",
+ "cloud-hail": "\f2a4",
+ "cloud-haze-fill": "\f2a6",
+ "cloud-haze": "\f2a7",
+ "cloud-haze2-fill": "\f2a8",
+ "cloud-lightning-fill": "\f2a9",
+ "cloud-lightning-rain-fill": "\f2aa",
+ "cloud-lightning-rain": "\f2ab",
+ "cloud-lightning": "\f2ac",
+ "cloud-minus-fill": "\f2ad",
+ "cloud-minus": "\f2ae",
+ "cloud-moon-fill": "\f2af",
+ "cloud-moon": "\f2b0",
+ "cloud-plus-fill": "\f2b1",
+ "cloud-plus": "\f2b2",
+ "cloud-rain-fill": "\f2b3",
+ "cloud-rain-heavy-fill": "\f2b4",
+ "cloud-rain-heavy": "\f2b5",
+ "cloud-rain": "\f2b6",
+ "cloud-slash-fill": "\f2b7",
+ "cloud-slash": "\f2b8",
+ "cloud-sleet-fill": "\f2b9",
+ "cloud-sleet": "\f2ba",
+ "cloud-snow-fill": "\f2bb",
+ "cloud-snow": "\f2bc",
+ "cloud-sun-fill": "\f2bd",
+ "cloud-sun": "\f2be",
+ "cloud-upload-fill": "\f2bf",
+ "cloud-upload": "\f2c0",
+ "cloud": "\f2c1",
+ "clouds-fill": "\f2c2",
+ "clouds": "\f2c3",
+ "cloudy-fill": "\f2c4",
+ "cloudy": "\f2c5",
+ "code-slash": "\f2c6",
+ "code-square": "\f2c7",
+ "code": "\f2c8",
+ "collection-fill": "\f2c9",
+ "collection-play-fill": "\f2ca",
+ "collection-play": "\f2cb",
+ "collection": "\f2cc",
+ "columns-gap": "\f2cd",
+ "columns": "\f2ce",
+ "command": "\f2cf",
+ "compass-fill": "\f2d0",
+ "compass": "\f2d1",
+ "cone-striped": "\f2d2",
+ "cone": "\f2d3",
+ "controller": "\f2d4",
+ "cpu-fill": "\f2d5",
+ "cpu": "\f2d6",
+ "credit-card-2-back-fill": "\f2d7",
+ "credit-card-2-back": "\f2d8",
+ "credit-card-2-front-fill": "\f2d9",
+ "credit-card-2-front": "\f2da",
+ "credit-card-fill": "\f2db",
+ "credit-card": "\f2dc",
+ "crop": "\f2dd",
+ "cup-fill": "\f2de",
+ "cup-straw": "\f2df",
+ "cup": "\f2e0",
+ "cursor-fill": "\f2e1",
+ "cursor-text": "\f2e2",
+ "cursor": "\f2e3",
+ "dash-circle-dotted": "\f2e4",
+ "dash-circle-fill": "\f2e5",
+ "dash-circle": "\f2e6",
+ "dash-square-dotted": "\f2e7",
+ "dash-square-fill": "\f2e8",
+ "dash-square": "\f2e9",
+ "dash": "\f2ea",
+ "diagram-2-fill": "\f2eb",
+ "diagram-2": "\f2ec",
+ "diagram-3-fill": "\f2ed",
+ "diagram-3": "\f2ee",
+ "diamond-fill": "\f2ef",
+ "diamond-half": "\f2f0",
+ "diamond": "\f2f1",
+ "dice-1-fill": "\f2f2",
+ "dice-1": "\f2f3",
+ "dice-2-fill": "\f2f4",
+ "dice-2": "\f2f5",
+ "dice-3-fill": "\f2f6",
+ "dice-3": "\f2f7",
+ "dice-4-fill": "\f2f8",
+ "dice-4": "\f2f9",
+ "dice-5-fill": "\f2fa",
+ "dice-5": "\f2fb",
+ "dice-6-fill": "\f2fc",
+ "dice-6": "\f2fd",
+ "disc-fill": "\f2fe",
+ "disc": "\f2ff",
+ "discord": "\f300",
+ "display-fill": "\f301",
+ "display": "\f302",
+ "distribute-horizontal": "\f303",
+ "distribute-vertical": "\f304",
+ "door-closed-fill": "\f305",
+ "door-closed": "\f306",
+ "door-open-fill": "\f307",
+ "door-open": "\f308",
+ "dot": "\f309",
+ "download": "\f30a",
+ "droplet-fill": "\f30b",
+ "droplet-half": "\f30c",
+ "droplet": "\f30d",
+ "earbuds": "\f30e",
+ "easel-fill": "\f30f",
+ "easel": "\f310",
+ "egg-fill": "\f311",
+ "egg-fried": "\f312",
+ "egg": "\f313",
+ "eject-fill": "\f314",
+ "eject": "\f315",
+ "emoji-angry-fill": "\f316",
+ "emoji-angry": "\f317",
+ "emoji-dizzy-fill": "\f318",
+ "emoji-dizzy": "\f319",
+ "emoji-expressionless-fill": "\f31a",
+ "emoji-expressionless": "\f31b",
+ "emoji-frown-fill": "\f31c",
+ "emoji-frown": "\f31d",
+ "emoji-heart-eyes-fill": "\f31e",
+ "emoji-heart-eyes": "\f31f",
+ "emoji-laughing-fill": "\f320",
+ "emoji-laughing": "\f321",
+ "emoji-neutral-fill": "\f322",
+ "emoji-neutral": "\f323",
+ "emoji-smile-fill": "\f324",
+ "emoji-smile-upside-down-fill": "\f325",
+ "emoji-smile-upside-down": "\f326",
+ "emoji-smile": "\f327",
+ "emoji-sunglasses-fill": "\f328",
+ "emoji-sunglasses": "\f329",
+ "emoji-wink-fill": "\f32a",
+ "emoji-wink": "\f32b",
+ "envelope-fill": "\f32c",
+ "envelope-open-fill": "\f32d",
+ "envelope-open": "\f32e",
+ "envelope": "\f32f",
+ "eraser-fill": "\f330",
+ "eraser": "\f331",
+ "exclamation-circle-fill": "\f332",
+ "exclamation-circle": "\f333",
+ "exclamation-diamond-fill": "\f334",
+ "exclamation-diamond": "\f335",
+ "exclamation-octagon-fill": "\f336",
+ "exclamation-octagon": "\f337",
+ "exclamation-square-fill": "\f338",
+ "exclamation-square": "\f339",
+ "exclamation-triangle-fill": "\f33a",
+ "exclamation-triangle": "\f33b",
+ "exclamation": "\f33c",
+ "exclude": "\f33d",
+ "eye-fill": "\f33e",
+ "eye-slash-fill": "\f33f",
+ "eye-slash": "\f340",
+ "eye": "\f341",
+ "eyedropper": "\f342",
+ "eyeglasses": "\f343",
+ "facebook": "\f344",
+ "file-arrow-down-fill": "\f345",
+ "file-arrow-down": "\f346",
+ "file-arrow-up-fill": "\f347",
+ "file-arrow-up": "\f348",
+ "file-bar-graph-fill": "\f349",
+ "file-bar-graph": "\f34a",
+ "file-binary-fill": "\f34b",
+ "file-binary": "\f34c",
+ "file-break-fill": "\f34d",
+ "file-break": "\f34e",
+ "file-check-fill": "\f34f",
+ "file-check": "\f350",
+ "file-code-fill": "\f351",
+ "file-code": "\f352",
+ "file-diff-fill": "\f353",
+ "file-diff": "\f354",
+ "file-earmark-arrow-down-fill": "\f355",
+ "file-earmark-arrow-down": "\f356",
+ "file-earmark-arrow-up-fill": "\f357",
+ "file-earmark-arrow-up": "\f358",
+ "file-earmark-bar-graph-fill": "\f359",
+ "file-earmark-bar-graph": "\f35a",
+ "file-earmark-binary-fill": "\f35b",
+ "file-earmark-binary": "\f35c",
+ "file-earmark-break-fill": "\f35d",
+ "file-earmark-break": "\f35e",
+ "file-earmark-check-fill": "\f35f",
+ "file-earmark-check": "\f360",
+ "file-earmark-code-fill": "\f361",
+ "file-earmark-code": "\f362",
+ "file-earmark-diff-fill": "\f363",
+ "file-earmark-diff": "\f364",
+ "file-earmark-easel-fill": "\f365",
+ "file-earmark-easel": "\f366",
+ "file-earmark-excel-fill": "\f367",
+ "file-earmark-excel": "\f368",
+ "file-earmark-fill": "\f369",
+ "file-earmark-font-fill": "\f36a",
+ "file-earmark-font": "\f36b",
+ "file-earmark-image-fill": "\f36c",
+ "file-earmark-image": "\f36d",
+ "file-earmark-lock-fill": "\f36e",
+ "file-earmark-lock": "\f36f",
+ "file-earmark-lock2-fill": "\f370",
+ "file-earmark-lock2": "\f371",
+ "file-earmark-medical-fill": "\f372",
+ "file-earmark-medical": "\f373",
+ "file-earmark-minus-fill": "\f374",
+ "file-earmark-minus": "\f375",
+ "file-earmark-music-fill": "\f376",
+ "file-earmark-music": "\f377",
+ "file-earmark-person-fill": "\f378",
+ "file-earmark-person": "\f379",
+ "file-earmark-play-fill": "\f37a",
+ "file-earmark-play": "\f37b",
+ "file-earmark-plus-fill": "\f37c",
+ "file-earmark-plus": "\f37d",
+ "file-earmark-post-fill": "\f37e",
+ "file-earmark-post": "\f37f",
+ "file-earmark-ppt-fill": "\f380",
+ "file-earmark-ppt": "\f381",
+ "file-earmark-richtext-fill": "\f382",
+ "file-earmark-richtext": "\f383",
+ "file-earmark-ruled-fill": "\f384",
+ "file-earmark-ruled": "\f385",
+ "file-earmark-slides-fill": "\f386",
+ "file-earmark-slides": "\f387",
+ "file-earmark-spreadsheet-fill": "\f388",
+ "file-earmark-spreadsheet": "\f389",
+ "file-earmark-text-fill": "\f38a",
+ "file-earmark-text": "\f38b",
+ "file-earmark-word-fill": "\f38c",
+ "file-earmark-word": "\f38d",
+ "file-earmark-x-fill": "\f38e",
+ "file-earmark-x": "\f38f",
+ "file-earmark-zip-fill": "\f390",
+ "file-earmark-zip": "\f391",
+ "file-earmark": "\f392",
+ "file-easel-fill": "\f393",
+ "file-easel": "\f394",
+ "file-excel-fill": "\f395",
+ "file-excel": "\f396",
+ "file-fill": "\f397",
+ "file-font-fill": "\f398",
+ "file-font": "\f399",
+ "file-image-fill": "\f39a",
+ "file-image": "\f39b",
+ "file-lock-fill": "\f39c",
+ "file-lock": "\f39d",
+ "file-lock2-fill": "\f39e",
+ "file-lock2": "\f39f",
+ "file-medical-fill": "\f3a0",
+ "file-medical": "\f3a1",
+ "file-minus-fill": "\f3a2",
+ "file-minus": "\f3a3",
+ "file-music-fill": "\f3a4",
+ "file-music": "\f3a5",
+ "file-person-fill": "\f3a6",
+ "file-person": "\f3a7",
+ "file-play-fill": "\f3a8",
+ "file-play": "\f3a9",
+ "file-plus-fill": "\f3aa",
+ "file-plus": "\f3ab",
+ "file-post-fill": "\f3ac",
+ "file-post": "\f3ad",
+ "file-ppt-fill": "\f3ae",
+ "file-ppt": "\f3af",
+ "file-richtext-fill": "\f3b0",
+ "file-richtext": "\f3b1",
+ "file-ruled-fill": "\f3b2",
+ "file-ruled": "\f3b3",
+ "file-slides-fill": "\f3b4",
+ "file-slides": "\f3b5",
+ "file-spreadsheet-fill": "\f3b6",
+ "file-spreadsheet": "\f3b7",
+ "file-text-fill": "\f3b8",
+ "file-text": "\f3b9",
+ "file-word-fill": "\f3ba",
+ "file-word": "\f3bb",
+ "file-x-fill": "\f3bc",
+ "file-x": "\f3bd",
+ "file-zip-fill": "\f3be",
+ "file-zip": "\f3bf",
+ "file": "\f3c0",
+ "files-alt": "\f3c1",
+ "files": "\f3c2",
+ "film": "\f3c3",
+ "filter-circle-fill": "\f3c4",
+ "filter-circle": "\f3c5",
+ "filter-left": "\f3c6",
+ "filter-right": "\f3c7",
+ "filter-square-fill": "\f3c8",
+ "filter-square": "\f3c9",
+ "filter": "\f3ca",
+ "flag-fill": "\f3cb",
+ "flag": "\f3cc",
+ "flower1": "\f3cd",
+ "flower2": "\f3ce",
+ "flower3": "\f3cf",
+ "folder-check": "\f3d0",
+ "folder-fill": "\f3d1",
+ "folder-minus": "\f3d2",
+ "folder-plus": "\f3d3",
+ "folder-symlink-fill": "\f3d4",
+ "folder-symlink": "\f3d5",
+ "folder-x": "\f3d6",
+ "folder": "\f3d7",
+ "folder2-open": "\f3d8",
+ "folder2": "\f3d9",
+ "fonts": "\f3da",
+ "forward-fill": "\f3db",
+ "forward": "\f3dc",
+ "front": "\f3dd",
+ "fullscreen-exit": "\f3de",
+ "fullscreen": "\f3df",
+ "funnel-fill": "\f3e0",
+ "funnel": "\f3e1",
+ "gear-fill": "\f3e2",
+ "gear-wide-connected": "\f3e3",
+ "gear-wide": "\f3e4",
+ "gear": "\f3e5",
+ "gem": "\f3e6",
+ "geo-alt-fill": "\f3e7",
+ "geo-alt": "\f3e8",
+ "geo-fill": "\f3e9",
+ "geo": "\f3ea",
+ "gift-fill": "\f3eb",
+ "gift": "\f3ec",
+ "github": "\f3ed",
+ "globe": "\f3ee",
+ "globe2": "\f3ef",
+ "google": "\f3f0",
+ "graph-down": "\f3f1",
+ "graph-up": "\f3f2",
+ "grid-1x2-fill": "\f3f3",
+ "grid-1x2": "\f3f4",
+ "grid-3x2-gap-fill": "\f3f5",
+ "grid-3x2-gap": "\f3f6",
+ "grid-3x2": "\f3f7",
+ "grid-3x3-gap-fill": "\f3f8",
+ "grid-3x3-gap": "\f3f9",
+ "grid-3x3": "\f3fa",
+ "grid-fill": "\f3fb",
+ "grid": "\f3fc",
+ "grip-horizontal": "\f3fd",
+ "grip-vertical": "\f3fe",
+ "hammer": "\f3ff",
+ "hand-index-fill": "\f400",
+ "hand-index-thumb-fill": "\f401",
+ "hand-index-thumb": "\f402",
+ "hand-index": "\f403",
+ "hand-thumbs-down-fill": "\f404",
+ "hand-thumbs-down": "\f405",
+ "hand-thumbs-up-fill": "\f406",
+ "hand-thumbs-up": "\f407",
+ "handbag-fill": "\f408",
+ "handbag": "\f409",
+ "hash": "\f40a",
+ "hdd-fill": "\f40b",
+ "hdd-network-fill": "\f40c",
+ "hdd-network": "\f40d",
+ "hdd-rack-fill": "\f40e",
+ "hdd-rack": "\f40f",
+ "hdd-stack-fill": "\f410",
+ "hdd-stack": "\f411",
+ "hdd": "\f412",
+ "headphones": "\f413",
+ "headset": "\f414",
+ "heart-fill": "\f415",
+ "heart-half": "\f416",
+ "heart": "\f417",
+ "heptagon-fill": "\f418",
+ "heptagon-half": "\f419",
+ "heptagon": "\f41a",
+ "hexagon-fill": "\f41b",
+ "hexagon-half": "\f41c",
+ "hexagon": "\f41d",
+ "hourglass-bottom": "\f41e",
+ "hourglass-split": "\f41f",
+ "hourglass-top": "\f420",
+ "hourglass": "\f421",
+ "house-door-fill": "\f422",
+ "house-door": "\f423",
+ "house-fill": "\f424",
+ "house": "\f425",
+ "hr": "\f426",
+ "hurricane": "\f427",
+ "image-alt": "\f428",
+ "image-fill": "\f429",
+ "image": "\f42a",
+ "images": "\f42b",
+ "inbox-fill": "\f42c",
+ "inbox": "\f42d",
+ "inboxes-fill": "\f42e",
+ "inboxes": "\f42f",
+ "info-circle-fill": "\f430",
+ "info-circle": "\f431",
+ "info-square-fill": "\f432",
+ "info-square": "\f433",
+ "info": "\f434",
+ "input-cursor-text": "\f435",
+ "input-cursor": "\f436",
+ "instagram": "\f437",
+ "intersect": "\f438",
+ "journal-album": "\f439",
+ "journal-arrow-down": "\f43a",
+ "journal-arrow-up": "\f43b",
+ "journal-bookmark-fill": "\f43c",
+ "journal-bookmark": "\f43d",
+ "journal-check": "\f43e",
+ "journal-code": "\f43f",
+ "journal-medical": "\f440",
+ "journal-minus": "\f441",
+ "journal-plus": "\f442",
+ "journal-richtext": "\f443",
+ "journal-text": "\f444",
+ "journal-x": "\f445",
+ "journal": "\f446",
+ "journals": "\f447",
+ "joystick": "\f448",
+ "justify-left": "\f449",
+ "justify-right": "\f44a",
+ "justify": "\f44b",
+ "kanban-fill": "\f44c",
+ "kanban": "\f44d",
+ "key-fill": "\f44e",
+ "key": "\f44f",
+ "keyboard-fill": "\f450",
+ "keyboard": "\f451",
+ "ladder": "\f452",
+ "lamp-fill": "\f453",
+ "lamp": "\f454",
+ "laptop-fill": "\f455",
+ "laptop": "\f456",
+ "layer-backward": "\f457",
+ "layer-forward": "\f458",
+ "layers-fill": "\f459",
+ "layers-half": "\f45a",
+ "layers": "\f45b",
+ "layout-sidebar-inset-reverse": "\f45c",
+ "layout-sidebar-inset": "\f45d",
+ "layout-sidebar-reverse": "\f45e",
+ "layout-sidebar": "\f45f",
+ "layout-split": "\f460",
+ "layout-text-sidebar-reverse": "\f461",
+ "layout-text-sidebar": "\f462",
+ "layout-text-window-reverse": "\f463",
+ "layout-text-window": "\f464",
+ "layout-three-columns": "\f465",
+ "layout-wtf": "\f466",
+ "life-preserver": "\f467",
+ "lightbulb-fill": "\f468",
+ "lightbulb-off-fill": "\f469",
+ "lightbulb-off": "\f46a",
+ "lightbulb": "\f46b",
+ "lightning-charge-fill": "\f46c",
+ "lightning-charge": "\f46d",
+ "lightning-fill": "\f46e",
+ "lightning": "\f46f",
+ "link-45deg": "\f470",
+ "link": "\f471",
+ "linkedin": "\f472",
+ "list-check": "\f473",
+ "list-nested": "\f474",
+ "list-ol": "\f475",
+ "list-stars": "\f476",
+ "list-task": "\f477",
+ "list-ul": "\f478",
+ "list": "\f479",
+ "lock-fill": "\f47a",
+ "lock": "\f47b",
+ "mailbox": "\f47c",
+ "mailbox2": "\f47d",
+ "map-fill": "\f47e",
+ "map": "\f47f",
+ "markdown-fill": "\f480",
+ "markdown": "\f481",
+ "mask": "\f482",
+ "megaphone-fill": "\f483",
+ "megaphone": "\f484",
+ "menu-app-fill": "\f485",
+ "menu-app": "\f486",
+ "menu-button-fill": "\f487",
+ "menu-button-wide-fill": "\f488",
+ "menu-button-wide": "\f489",
+ "menu-button": "\f48a",
+ "menu-down": "\f48b",
+ "menu-up": "\f48c",
+ "mic-fill": "\f48d",
+ "mic-mute-fill": "\f48e",
+ "mic-mute": "\f48f",
+ "mic": "\f490",
+ "minecart-loaded": "\f491",
+ "minecart": "\f492",
+ "moisture": "\f493",
+ "moon-fill": "\f494",
+ "moon-stars-fill": "\f495",
+ "moon-stars": "\f496",
+ "moon": "\f497",
+ "mouse-fill": "\f498",
+ "mouse": "\f499",
+ "mouse2-fill": "\f49a",
+ "mouse2": "\f49b",
+ "mouse3-fill": "\f49c",
+ "mouse3": "\f49d",
+ "music-note-beamed": "\f49e",
+ "music-note-list": "\f49f",
+ "music-note": "\f4a0",
+ "music-player-fill": "\f4a1",
+ "music-player": "\f4a2",
+ "newspaper": "\f4a3",
+ "node-minus-fill": "\f4a4",
+ "node-minus": "\f4a5",
+ "node-plus-fill": "\f4a6",
+ "node-plus": "\f4a7",
+ "nut-fill": "\f4a8",
+ "nut": "\f4a9",
+ "octagon-fill": "\f4aa",
+ "octagon-half": "\f4ab",
+ "octagon": "\f4ac",
+ "option": "\f4ad",
+ "outlet": "\f4ae",
+ "paint-bucket": "\f4af",
+ "palette-fill": "\f4b0",
+ "palette": "\f4b1",
+ "palette2": "\f4b2",
+ "paperclip": "\f4b3",
+ "paragraph": "\f4b4",
+ "patch-check-fill": "\f4b5",
+ "patch-check": "\f4b6",
+ "patch-exclamation-fill": "\f4b7",
+ "patch-exclamation": "\f4b8",
+ "patch-minus-fill": "\f4b9",
+ "patch-minus": "\f4ba",
+ "patch-plus-fill": "\f4bb",
+ "patch-plus": "\f4bc",
+ "patch-question-fill": "\f4bd",
+ "patch-question": "\f4be",
+ "pause-btn-fill": "\f4bf",
+ "pause-btn": "\f4c0",
+ "pause-circle-fill": "\f4c1",
+ "pause-circle": "\f4c2",
+ "pause-fill": "\f4c3",
+ "pause": "\f4c4",
+ "peace-fill": "\f4c5",
+ "peace": "\f4c6",
+ "pen-fill": "\f4c7",
+ "pen": "\f4c8",
+ "pencil-fill": "\f4c9",
+ "pencil-square": "\f4ca",
+ "pencil": "\f4cb",
+ "pentagon-fill": "\f4cc",
+ "pentagon-half": "\f4cd",
+ "pentagon": "\f4ce",
+ "people-fill": "\f4cf",
+ "people": "\f4d0",
+ "percent": "\f4d1",
+ "person-badge-fill": "\f4d2",
+ "person-badge": "\f4d3",
+ "person-bounding-box": "\f4d4",
+ "person-check-fill": "\f4d5",
+ "person-check": "\f4d6",
+ "person-circle": "\f4d7",
+ "person-dash-fill": "\f4d8",
+ "person-dash": "\f4d9",
+ "person-fill": "\f4da",
+ "person-lines-fill": "\f4db",
+ "person-plus-fill": "\f4dc",
+ "person-plus": "\f4dd",
+ "person-square": "\f4de",
+ "person-x-fill": "\f4df",
+ "person-x": "\f4e0",
+ "person": "\f4e1",
+ "phone-fill": "\f4e2",
+ "phone-landscape-fill": "\f4e3",
+ "phone-landscape": "\f4e4",
+ "phone-vibrate-fill": "\f4e5",
+ "phone-vibrate": "\f4e6",
+ "phone": "\f4e7",
+ "pie-chart-fill": "\f4e8",
+ "pie-chart": "\f4e9",
+ "pin-angle-fill": "\f4ea",
+ "pin-angle": "\f4eb",
+ "pin-fill": "\f4ec",
+ "pin": "\f4ed",
+ "pip-fill": "\f4ee",
+ "pip": "\f4ef",
+ "play-btn-fill": "\f4f0",
+ "play-btn": "\f4f1",
+ "play-circle-fill": "\f4f2",
+ "play-circle": "\f4f3",
+ "play-fill": "\f4f4",
+ "play": "\f4f5",
+ "plug-fill": "\f4f6",
+ "plug": "\f4f7",
+ "plus-circle-dotted": "\f4f8",
+ "plus-circle-fill": "\f4f9",
+ "plus-circle": "\f4fa",
+ "plus-square-dotted": "\f4fb",
+ "plus-square-fill": "\f4fc",
+ "plus-square": "\f4fd",
+ "plus": "\f4fe",
+ "power": "\f4ff",
+ "printer-fill": "\f500",
+ "printer": "\f501",
+ "puzzle-fill": "\f502",
+ "puzzle": "\f503",
+ "question-circle-fill": "\f504",
+ "question-circle": "\f505",
+ "question-diamond-fill": "\f506",
+ "question-diamond": "\f507",
+ "question-octagon-fill": "\f508",
+ "question-octagon": "\f509",
+ "question-square-fill": "\f50a",
+ "question-square": "\f50b",
+ "question": "\f50c",
+ "rainbow": "\f50d",
+ "receipt-cutoff": "\f50e",
+ "receipt": "\f50f",
+ "reception-0": "\f510",
+ "reception-1": "\f511",
+ "reception-2": "\f512",
+ "reception-3": "\f513",
+ "reception-4": "\f514",
+ "record-btn-fill": "\f515",
+ "record-btn": "\f516",
+ "record-circle-fill": "\f517",
+ "record-circle": "\f518",
+ "record-fill": "\f519",
+ "record": "\f51a",
+ "record2-fill": "\f51b",
+ "record2": "\f51c",
+ "reply-all-fill": "\f51d",
+ "reply-all": "\f51e",
+ "reply-fill": "\f51f",
+ "reply": "\f520",
+ "rss-fill": "\f521",
+ "rss": "\f522",
+ "rulers": "\f523",
+ "save-fill": "\f524",
+ "save": "\f525",
+ "save2-fill": "\f526",
+ "save2": "\f527",
+ "scissors": "\f528",
+ "screwdriver": "\f529",
+ "search": "\f52a",
+ "segmented-nav": "\f52b",
+ "server": "\f52c",
+ "share-fill": "\f52d",
+ "share": "\f52e",
+ "shield-check": "\f52f",
+ "shield-exclamation": "\f530",
+ "shield-fill-check": "\f531",
+ "shield-fill-exclamation": "\f532",
+ "shield-fill-minus": "\f533",
+ "shield-fill-plus": "\f534",
+ "shield-fill-x": "\f535",
+ "shield-fill": "\f536",
+ "shield-lock-fill": "\f537",
+ "shield-lock": "\f538",
+ "shield-minus": "\f539",
+ "shield-plus": "\f53a",
+ "shield-shaded": "\f53b",
+ "shield-slash-fill": "\f53c",
+ "shield-slash": "\f53d",
+ "shield-x": "\f53e",
+ "shield": "\f53f",
+ "shift-fill": "\f540",
+ "shift": "\f541",
+ "shop-window": "\f542",
+ "shop": "\f543",
+ "shuffle": "\f544",
+ "signpost-2-fill": "\f545",
+ "signpost-2": "\f546",
+ "signpost-fill": "\f547",
+ "signpost-split-fill": "\f548",
+ "signpost-split": "\f549",
+ "signpost": "\f54a",
+ "sim-fill": "\f54b",
+ "sim": "\f54c",
+ "skip-backward-btn-fill": "\f54d",
+ "skip-backward-btn": "\f54e",
+ "skip-backward-circle-fill": "\f54f",
+ "skip-backward-circle": "\f550",
+ "skip-backward-fill": "\f551",
+ "skip-backward": "\f552",
+ "skip-end-btn-fill": "\f553",
+ "skip-end-btn": "\f554",
+ "skip-end-circle-fill": "\f555",
+ "skip-end-circle": "\f556",
+ "skip-end-fill": "\f557",
+ "skip-end": "\f558",
+ "skip-forward-btn-fill": "\f559",
+ "skip-forward-btn": "\f55a",
+ "skip-forward-circle-fill": "\f55b",
+ "skip-forward-circle": "\f55c",
+ "skip-forward-fill": "\f55d",
+ "skip-forward": "\f55e",
+ "skip-start-btn-fill": "\f55f",
+ "skip-start-btn": "\f560",
+ "skip-start-circle-fill": "\f561",
+ "skip-start-circle": "\f562",
+ "skip-start-fill": "\f563",
+ "skip-start": "\f564",
+ "slack": "\f565",
+ "slash-circle-fill": "\f566",
+ "slash-circle": "\f567",
+ "slash-square-fill": "\f568",
+ "slash-square": "\f569",
+ "slash": "\f56a",
+ "sliders": "\f56b",
+ "smartwatch": "\f56c",
+ "snow": "\f56d",
+ "snow2": "\f56e",
+ "snow3": "\f56f",
+ "sort-alpha-down-alt": "\f570",
+ "sort-alpha-down": "\f571",
+ "sort-alpha-up-alt": "\f572",
+ "sort-alpha-up": "\f573",
+ "sort-down-alt": "\f574",
+ "sort-down": "\f575",
+ "sort-numeric-down-alt": "\f576",
+ "sort-numeric-down": "\f577",
+ "sort-numeric-up-alt": "\f578",
+ "sort-numeric-up": "\f579",
+ "sort-up-alt": "\f57a",
+ "sort-up": "\f57b",
+ "soundwave": "\f57c",
+ "speaker-fill": "\f57d",
+ "speaker": "\f57e",
+ "speedometer": "\f57f",
+ "speedometer2": "\f580",
+ "spellcheck": "\f581",
+ "square-fill": "\f582",
+ "square-half": "\f583",
+ "square": "\f584",
+ "stack": "\f585",
+ "star-fill": "\f586",
+ "star-half": "\f587",
+ "star": "\f588",
+ "stars": "\f589",
+ "stickies-fill": "\f58a",
+ "stickies": "\f58b",
+ "sticky-fill": "\f58c",
+ "sticky": "\f58d",
+ "stop-btn-fill": "\f58e",
+ "stop-btn": "\f58f",
+ "stop-circle-fill": "\f590",
+ "stop-circle": "\f591",
+ "stop-fill": "\f592",
+ "stop": "\f593",
+ "stoplights-fill": "\f594",
+ "stoplights": "\f595",
+ "stopwatch-fill": "\f596",
+ "stopwatch": "\f597",
+ "subtract": "\f598",
+ "suit-club-fill": "\f599",
+ "suit-club": "\f59a",
+ "suit-diamond-fill": "\f59b",
+ "suit-diamond": "\f59c",
+ "suit-heart-fill": "\f59d",
+ "suit-heart": "\f59e",
+ "suit-spade-fill": "\f59f",
+ "suit-spade": "\f5a0",
+ "sun-fill": "\f5a1",
+ "sun": "\f5a2",
+ "sunglasses": "\f5a3",
+ "sunrise-fill": "\f5a4",
+ "sunrise": "\f5a5",
+ "sunset-fill": "\f5a6",
+ "sunset": "\f5a7",
+ "symmetry-horizontal": "\f5a8",
+ "symmetry-vertical": "\f5a9",
+ "table": "\f5aa",
+ "tablet-fill": "\f5ab",
+ "tablet-landscape-fill": "\f5ac",
+ "tablet-landscape": "\f5ad",
+ "tablet": "\f5ae",
+ "tag-fill": "\f5af",
+ "tag": "\f5b0",
+ "tags-fill": "\f5b1",
+ "tags": "\f5b2",
+ "telegram": "\f5b3",
+ "telephone-fill": "\f5b4",
+ "telephone-forward-fill": "\f5b5",
+ "telephone-forward": "\f5b6",
+ "telephone-inbound-fill": "\f5b7",
+ "telephone-inbound": "\f5b8",
+ "telephone-minus-fill": "\f5b9",
+ "telephone-minus": "\f5ba",
+ "telephone-outbound-fill": "\f5bb",
+ "telephone-outbound": "\f5bc",
+ "telephone-plus-fill": "\f5bd",
+ "telephone-plus": "\f5be",
+ "telephone-x-fill": "\f5bf",
+ "telephone-x": "\f5c0",
+ "telephone": "\f5c1",
+ "terminal-fill": "\f5c2",
+ "terminal": "\f5c3",
+ "text-center": "\f5c4",
+ "text-indent-left": "\f5c5",
+ "text-indent-right": "\f5c6",
+ "text-left": "\f5c7",
+ "text-paragraph": "\f5c8",
+ "text-right": "\f5c9",
+ "textarea-resize": "\f5ca",
+ "textarea-t": "\f5cb",
+ "textarea": "\f5cc",
+ "thermometer-half": "\f5cd",
+ "thermometer-high": "\f5ce",
+ "thermometer-low": "\f5cf",
+ "thermometer-snow": "\f5d0",
+ "thermometer-sun": "\f5d1",
+ "thermometer": "\f5d2",
+ "three-dots-vertical": "\f5d3",
+ "three-dots": "\f5d4",
+ "toggle-off": "\f5d5",
+ "toggle-on": "\f5d6",
+ "toggle2-off": "\f5d7",
+ "toggle2-on": "\f5d8",
+ "toggles": "\f5d9",
+ "toggles2": "\f5da",
+ "tools": "\f5db",
+ "tornado": "\f5dc",
+ "trash-fill": "\f5dd",
+ "trash": "\f5de",
+ "trash2-fill": "\f5df",
+ "trash2": "\f5e0",
+ "tree-fill": "\f5e1",
+ "tree": "\f5e2",
+ "triangle-fill": "\f5e3",
+ "triangle-half": "\f5e4",
+ "triangle": "\f5e5",
+ "trophy-fill": "\f5e6",
+ "trophy": "\f5e7",
+ "tropical-storm": "\f5e8",
+ "truck-flatbed": "\f5e9",
+ "truck": "\f5ea",
+ "tsunami": "\f5eb",
+ "tv-fill": "\f5ec",
+ "tv": "\f5ed",
+ "twitch": "\f5ee",
+ "twitter": "\f5ef",
+ "type-bold": "\f5f0",
+ "type-h1": "\f5f1",
+ "type-h2": "\f5f2",
+ "type-h3": "\f5f3",
+ "type-italic": "\f5f4",
+ "type-strikethrough": "\f5f5",
+ "type-underline": "\f5f6",
+ "type": "\f5f7",
+ "ui-checks-grid": "\f5f8",
+ "ui-checks": "\f5f9",
+ "ui-radios-grid": "\f5fa",
+ "ui-radios": "\f5fb",
+ "umbrella-fill": "\f5fc",
+ "umbrella": "\f5fd",
+ "union": "\f5fe",
+ "unlock-fill": "\f5ff",
+ "unlock": "\f600",
+ "upc-scan": "\f601",
+ "upc": "\f602",
+ "upload": "\f603",
+ "vector-pen": "\f604",
+ "view-list": "\f605",
+ "view-stacked": "\f606",
+ "vinyl-fill": "\f607",
+ "vinyl": "\f608",
+ "voicemail": "\f609",
+ "volume-down-fill": "\f60a",
+ "volume-down": "\f60b",
+ "volume-mute-fill": "\f60c",
+ "volume-mute": "\f60d",
+ "volume-off-fill": "\f60e",
+ "volume-off": "\f60f",
+ "volume-up-fill": "\f610",
+ "volume-up": "\f611",
+ "vr": "\f612",
+ "wallet-fill": "\f613",
+ "wallet": "\f614",
+ "wallet2": "\f615",
+ "watch": "\f616",
+ "water": "\f617",
+ "whatsapp": "\f618",
+ "wifi-1": "\f619",
+ "wifi-2": "\f61a",
+ "wifi-off": "\f61b",
+ "wifi": "\f61c",
+ "wind": "\f61d",
+ "window-dock": "\f61e",
+ "window-sidebar": "\f61f",
+ "window": "\f620",
+ "wrench": "\f621",
+ "x-circle-fill": "\f622",
+ "x-circle": "\f623",
+ "x-diamond-fill": "\f624",
+ "x-diamond": "\f625",
+ "x-octagon-fill": "\f626",
+ "x-octagon": "\f627",
+ "x-square-fill": "\f628",
+ "x-square": "\f629",
+ "x": "\f62a",
+ "youtube": "\f62b",
+ "zoom-in": "\f62c",
+ "zoom-out": "\f62d",
+ "bank": "\f62e",
+ "bank2": "\f62f",
+ "bell-slash-fill": "\f630",
+ "bell-slash": "\f631",
+ "cash-coin": "\f632",
+ "check-lg": "\f633",
+ "coin": "\f634",
+ "currency-bitcoin": "\f635",
+ "currency-dollar": "\f636",
+ "currency-euro": "\f637",
+ "currency-exchange": "\f638",
+ "currency-pound": "\f639",
+ "currency-yen": "\f63a",
+ "dash-lg": "\f63b",
+ "exclamation-lg": "\f63c",
+ "file-earmark-pdf-fill": "\f63d",
+ "file-earmark-pdf": "\f63e",
+ "file-pdf-fill": "\f63f",
+ "file-pdf": "\f640",
+ "gender-ambiguous": "\f641",
+ "gender-female": "\f642",
+ "gender-male": "\f643",
+ "gender-trans": "\f644",
+ "headset-vr": "\f645",
+ "info-lg": "\f646",
+ "mastodon": "\f647",
+ "messenger": "\f648",
+ "piggy-bank-fill": "\f649",
+ "piggy-bank": "\f64a",
+ "pin-map-fill": "\f64b",
+ "pin-map": "\f64c",
+ "plus-lg": "\f64d",
+ "question-lg": "\f64e",
+ "recycle": "\f64f",
+ "reddit": "\f650",
+ "safe-fill": "\f651",
+ "safe2-fill": "\f652",
+ "safe2": "\f653",
+ "sd-card-fill": "\f654",
+ "sd-card": "\f655",
+ "skype": "\f656",
+ "slash-lg": "\f657",
+ "translate": "\f658",
+ "x-lg": "\f659",
+ "safe": "\f65a",
+ "apple": "\f65b",
+ "microsoft": "\f65d",
+ "windows": "\f65e",
+ "behance": "\f65c",
+ "dribbble": "\f65f",
+ "line": "\f660",
+ "medium": "\f661",
+ "paypal": "\f662",
+ "pinterest": "\f663",
+ "signal": "\f664",
+ "snapchat": "\f665",
+ "spotify": "\f666",
+ "stack-overflow": "\f667",
+ "strava": "\f668",
+ "wordpress": "\f669",
+ "vimeo": "\f66a",
+ "activity": "\f66b",
+ "easel2-fill": "\f66c",
+ "easel2": "\f66d",
+ "easel3-fill": "\f66e",
+ "easel3": "\f66f",
+ "fan": "\f670",
+ "fingerprint": "\f671",
+ "graph-down-arrow": "\f672",
+ "graph-up-arrow": "\f673",
+ "hypnotize": "\f674",
+ "magic": "\f675",
+ "person-rolodex": "\f676",
+ "person-video": "\f677",
+ "person-video2": "\f678",
+ "person-video3": "\f679",
+ "person-workspace": "\f67a",
+ "radioactive": "\f67b",
+ "webcam-fill": "\f67c",
+ "webcam": "\f67d",
+ "yin-yang": "\f67e",
+ "bandaid-fill": "\f680",
+ "bandaid": "\f681",
+ "bluetooth": "\f682",
+ "body-text": "\f683",
+ "boombox": "\f684",
+ "boxes": "\f685",
+ "dpad-fill": "\f686",
+ "dpad": "\f687",
+ "ear-fill": "\f688",
+ "ear": "\f689",
+ "envelope-check-fill": "\f68b",
+ "envelope-check": "\f68c",
+ "envelope-dash-fill": "\f68e",
+ "envelope-dash": "\f68f",
+ "envelope-exclamation-fill": "\f691",
+ "envelope-exclamation": "\f692",
+ "envelope-plus-fill": "\f693",
+ "envelope-plus": "\f694",
+ "envelope-slash-fill": "\f696",
+ "envelope-slash": "\f697",
+ "envelope-x-fill": "\f699",
+ "envelope-x": "\f69a",
+ "explicit-fill": "\f69b",
+ "explicit": "\f69c",
+ "git": "\f69d",
+ "infinity": "\f69e",
+ "list-columns-reverse": "\f69f",
+ "list-columns": "\f6a0",
+ "meta": "\f6a1",
+ "nintendo-switch": "\f6a4",
+ "pc-display-horizontal": "\f6a5",
+ "pc-display": "\f6a6",
+ "pc-horizontal": "\f6a7",
+ "pc": "\f6a8",
+ "playstation": "\f6a9",
+ "plus-slash-minus": "\f6aa",
+ "projector-fill": "\f6ab",
+ "projector": "\f6ac",
+ "qr-code-scan": "\f6ad",
+ "qr-code": "\f6ae",
+ "quora": "\f6af",
+ "quote": "\f6b0",
+ "robot": "\f6b1",
+ "send-check-fill": "\f6b2",
+ "send-check": "\f6b3",
+ "send-dash-fill": "\f6b4",
+ "send-dash": "\f6b5",
+ "send-exclamation-fill": "\f6b7",
+ "send-exclamation": "\f6b8",
+ "send-fill": "\f6b9",
+ "send-plus-fill": "\f6ba",
+ "send-plus": "\f6bb",
+ "send-slash-fill": "\f6bc",
+ "send-slash": "\f6bd",
+ "send-x-fill": "\f6be",
+ "send-x": "\f6bf",
+ "send": "\f6c0",
+ "steam": "\f6c1",
+ "terminal-dash": "\f6c3",
+ "terminal-plus": "\f6c4",
+ "terminal-split": "\f6c5",
+ "ticket-detailed-fill": "\f6c6",
+ "ticket-detailed": "\f6c7",
+ "ticket-fill": "\f6c8",
+ "ticket-perforated-fill": "\f6c9",
+ "ticket-perforated": "\f6ca",
+ "ticket": "\f6cb",
+ "tiktok": "\f6cc",
+ "window-dash": "\f6cd",
+ "window-desktop": "\f6ce",
+ "window-fullscreen": "\f6cf",
+ "window-plus": "\f6d0",
+ "window-split": "\f6d1",
+ "window-stack": "\f6d2",
+ "window-x": "\f6d3",
+ "xbox": "\f6d4",
+ "ethernet": "\f6d5",
+ "hdmi-fill": "\f6d6",
+ "hdmi": "\f6d7",
+ "usb-c-fill": "\f6d8",
+ "usb-c": "\f6d9",
+ "usb-fill": "\f6da",
+ "usb-plug-fill": "\f6db",
+ "usb-plug": "\f6dc",
+ "usb-symbol": "\f6dd",
+ "usb": "\f6de",
+ "boombox-fill": "\f6df",
+ "displayport": "\f6e1",
+ "gpu-card": "\f6e2",
+ "memory": "\f6e3",
+ "modem-fill": "\f6e4",
+ "modem": "\f6e5",
+ "motherboard-fill": "\f6e6",
+ "motherboard": "\f6e7",
+ "optical-audio-fill": "\f6e8",
+ "optical-audio": "\f6e9",
+ "pci-card": "\f6ea",
+ "router-fill": "\f6eb",
+ "router": "\f6ec",
+ "thunderbolt-fill": "\f6ef",
+ "thunderbolt": "\f6f0",
+ "usb-drive-fill": "\f6f1",
+ "usb-drive": "\f6f2",
+ "usb-micro-fill": "\f6f3",
+ "usb-micro": "\f6f4",
+ "usb-mini-fill": "\f6f5",
+ "usb-mini": "\f6f6",
+ "cloud-haze2": "\f6f7",
+ "device-hdd-fill": "\f6f8",
+ "device-hdd": "\f6f9",
+ "device-ssd-fill": "\f6fa",
+ "device-ssd": "\f6fb",
+ "displayport-fill": "\f6fc",
+ "mortarboard-fill": "\f6fd",
+ "mortarboard": "\f6fe",
+ "terminal-x": "\f6ff",
+ "arrow-through-heart-fill": "\f700",
+ "arrow-through-heart": "\f701",
+ "badge-sd-fill": "\f702",
+ "badge-sd": "\f703",
+ "bag-heart-fill": "\f704",
+ "bag-heart": "\f705",
+ "balloon-fill": "\f706",
+ "balloon-heart-fill": "\f707",
+ "balloon-heart": "\f708",
+ "balloon": "\f709",
+ "box2-fill": "\f70a",
+ "box2-heart-fill": "\f70b",
+ "box2-heart": "\f70c",
+ "box2": "\f70d",
+ "braces-asterisk": "\f70e",
+ "calendar-heart-fill": "\f70f",
+ "calendar-heart": "\f710",
+ "calendar2-heart-fill": "\f711",
+ "calendar2-heart": "\f712",
+ "chat-heart-fill": "\f713",
+ "chat-heart": "\f714",
+ "chat-left-heart-fill": "\f715",
+ "chat-left-heart": "\f716",
+ "chat-right-heart-fill": "\f717",
+ "chat-right-heart": "\f718",
+ "chat-square-heart-fill": "\f719",
+ "chat-square-heart": "\f71a",
+ "clipboard-check-fill": "\f71b",
+ "clipboard-data-fill": "\f71c",
+ "clipboard-fill": "\f71d",
+ "clipboard-heart-fill": "\f71e",
+ "clipboard-heart": "\f71f",
+ "clipboard-minus-fill": "\f720",
+ "clipboard-plus-fill": "\f721",
+ "clipboard-pulse": "\f722",
+ "clipboard-x-fill": "\f723",
+ "clipboard2-check-fill": "\f724",
+ "clipboard2-check": "\f725",
+ "clipboard2-data-fill": "\f726",
+ "clipboard2-data": "\f727",
+ "clipboard2-fill": "\f728",
+ "clipboard2-heart-fill": "\f729",
+ "clipboard2-heart": "\f72a",
+ "clipboard2-minus-fill": "\f72b",
+ "clipboard2-minus": "\f72c",
+ "clipboard2-plus-fill": "\f72d",
+ "clipboard2-plus": "\f72e",
+ "clipboard2-pulse-fill": "\f72f",
+ "clipboard2-pulse": "\f730",
+ "clipboard2-x-fill": "\f731",
+ "clipboard2-x": "\f732",
+ "clipboard2": "\f733",
+ "emoji-kiss-fill": "\f734",
+ "emoji-kiss": "\f735",
+ "envelope-heart-fill": "\f736",
+ "envelope-heart": "\f737",
+ "envelope-open-heart-fill": "\f738",
+ "envelope-open-heart": "\f739",
+ "envelope-paper-fill": "\f73a",
+ "envelope-paper-heart-fill": "\f73b",
+ "envelope-paper-heart": "\f73c",
+ "envelope-paper": "\f73d",
+ "filetype-aac": "\f73e",
+ "filetype-ai": "\f73f",
+ "filetype-bmp": "\f740",
+ "filetype-cs": "\f741",
+ "filetype-css": "\f742",
+ "filetype-csv": "\f743",
+ "filetype-doc": "\f744",
+ "filetype-docx": "\f745",
+ "filetype-exe": "\f746",
+ "filetype-gif": "\f747",
+ "filetype-heic": "\f748",
+ "filetype-html": "\f749",
+ "filetype-java": "\f74a",
+ "filetype-jpg": "\f74b",
+ "filetype-js": "\f74c",
+ "filetype-jsx": "\f74d",
+ "filetype-key": "\f74e",
+ "filetype-m4p": "\f74f",
+ "filetype-md": "\f750",
+ "filetype-mdx": "\f751",
+ "filetype-mov": "\f752",
+ "filetype-mp3": "\f753",
+ "filetype-mp4": "\f754",
+ "filetype-otf": "\f755",
+ "filetype-pdf": "\f756",
+ "filetype-php": "\f757",
+ "filetype-png": "\f758",
+ "filetype-ppt": "\f75a",
+ "filetype-psd": "\f75b",
+ "filetype-py": "\f75c",
+ "filetype-raw": "\f75d",
+ "filetype-rb": "\f75e",
+ "filetype-sass": "\f75f",
+ "filetype-scss": "\f760",
+ "filetype-sh": "\f761",
+ "filetype-svg": "\f762",
+ "filetype-tiff": "\f763",
+ "filetype-tsx": "\f764",
+ "filetype-ttf": "\f765",
+ "filetype-txt": "\f766",
+ "filetype-wav": "\f767",
+ "filetype-woff": "\f768",
+ "filetype-xls": "\f76a",
+ "filetype-xml": "\f76b",
+ "filetype-yml": "\f76c",
+ "heart-arrow": "\f76d",
+ "heart-pulse-fill": "\f76e",
+ "heart-pulse": "\f76f",
+ "heartbreak-fill": "\f770",
+ "heartbreak": "\f771",
+ "hearts": "\f772",
+ "hospital-fill": "\f773",
+ "hospital": "\f774",
+ "house-heart-fill": "\f775",
+ "house-heart": "\f776",
+ "incognito": "\f777",
+ "magnet-fill": "\f778",
+ "magnet": "\f779",
+ "person-heart": "\f77a",
+ "person-hearts": "\f77b",
+ "phone-flip": "\f77c",
+ "plugin": "\f77d",
+ "postage-fill": "\f77e",
+ "postage-heart-fill": "\f77f",
+ "postage-heart": "\f780",
+ "postage": "\f781",
+ "postcard-fill": "\f782",
+ "postcard-heart-fill": "\f783",
+ "postcard-heart": "\f784",
+ "postcard": "\f785",
+ "search-heart-fill": "\f786",
+ "search-heart": "\f787",
+ "sliders2-vertical": "\f788",
+ "sliders2": "\f789",
+ "trash3-fill": "\f78a",
+ "trash3": "\f78b",
+ "valentine": "\f78c",
+ "valentine2": "\f78d",
+ "wrench-adjustable-circle-fill": "\f78e",
+ "wrench-adjustable-circle": "\f78f",
+ "wrench-adjustable": "\f790",
+ "filetype-json": "\f791",
+ "filetype-pptx": "\f792",
+ "filetype-xlsx": "\f793",
+ "1-circle-fill": "\f796",
+ "1-circle": "\f797",
+ "1-square-fill": "\f798",
+ "1-square": "\f799",
+ "2-circle-fill": "\f79c",
+ "2-circle": "\f79d",
+ "2-square-fill": "\f79e",
+ "2-square": "\f79f",
+ "3-circle-fill": "\f7a2",
+ "3-circle": "\f7a3",
+ "3-square-fill": "\f7a4",
+ "3-square": "\f7a5",
+ "4-circle-fill": "\f7a8",
+ "4-circle": "\f7a9",
+ "4-square-fill": "\f7aa",
+ "4-square": "\f7ab",
+ "5-circle-fill": "\f7ae",
+ "5-circle": "\f7af",
+ "5-square-fill": "\f7b0",
+ "5-square": "\f7b1",
+ "6-circle-fill": "\f7b4",
+ "6-circle": "\f7b5",
+ "6-square-fill": "\f7b6",
+ "6-square": "\f7b7",
+ "7-circle-fill": "\f7ba",
+ "7-circle": "\f7bb",
+ "7-square-fill": "\f7bc",
+ "7-square": "\f7bd",
+ "8-circle-fill": "\f7c0",
+ "8-circle": "\f7c1",
+ "8-square-fill": "\f7c2",
+ "8-square": "\f7c3",
+ "9-circle-fill": "\f7c6",
+ "9-circle": "\f7c7",
+ "9-square-fill": "\f7c8",
+ "9-square": "\f7c9",
+ "airplane-engines-fill": "\f7ca",
+ "airplane-engines": "\f7cb",
+ "airplane-fill": "\f7cc",
+ "airplane": "\f7cd",
+ "alexa": "\f7ce",
+ "alipay": "\f7cf",
+ "android": "\f7d0",
+ "android2": "\f7d1",
+ "box-fill": "\f7d2",
+ "box-seam-fill": "\f7d3",
+ "browser-chrome": "\f7d4",
+ "browser-edge": "\f7d5",
+ "browser-firefox": "\f7d6",
+ "browser-safari": "\f7d7",
+ "c-circle-fill": "\f7da",
+ "c-circle": "\f7db",
+ "c-square-fill": "\f7dc",
+ "c-square": "\f7dd",
+ "capsule-pill": "\f7de",
+ "capsule": "\f7df",
+ "car-front-fill": "\f7e0",
+ "car-front": "\f7e1",
+ "cassette-fill": "\f7e2",
+ "cassette": "\f7e3",
+ "cc-circle-fill": "\f7e6",
+ "cc-circle": "\f7e7",
+ "cc-square-fill": "\f7e8",
+ "cc-square": "\f7e9",
+ "cup-hot-fill": "\f7ea",
+ "cup-hot": "\f7eb",
+ "currency-rupee": "\f7ec",
+ "dropbox": "\f7ed",
+ "escape": "\f7ee",
+ "fast-forward-btn-fill": "\f7ef",
+ "fast-forward-btn": "\f7f0",
+ "fast-forward-circle-fill": "\f7f1",
+ "fast-forward-circle": "\f7f2",
+ "fast-forward-fill": "\f7f3",
+ "fast-forward": "\f7f4",
+ "filetype-sql": "\f7f5",
+ "fire": "\f7f6",
+ "google-play": "\f7f7",
+ "h-circle-fill": "\f7fa",
+ "h-circle": "\f7fb",
+ "h-square-fill": "\f7fc",
+ "h-square": "\f7fd",
+ "indent": "\f7fe",
+ "lungs-fill": "\f7ff",
+ "lungs": "\f800",
+ "microsoft-teams": "\f801",
+ "p-circle-fill": "\f804",
+ "p-circle": "\f805",
+ "p-square-fill": "\f806",
+ "p-square": "\f807",
+ "pass-fill": "\f808",
+ "pass": "\f809",
+ "prescription": "\f80a",
+ "prescription2": "\f80b",
+ "r-circle-fill": "\f80e",
+ "r-circle": "\f80f",
+ "r-square-fill": "\f810",
+ "r-square": "\f811",
+ "repeat-1": "\f812",
+ "repeat": "\f813",
+ "rewind-btn-fill": "\f814",
+ "rewind-btn": "\f815",
+ "rewind-circle-fill": "\f816",
+ "rewind-circle": "\f817",
+ "rewind-fill": "\f818",
+ "rewind": "\f819",
+ "train-freight-front-fill": "\f81a",
+ "train-freight-front": "\f81b",
+ "train-front-fill": "\f81c",
+ "train-front": "\f81d",
+ "train-lightrail-front-fill": "\f81e",
+ "train-lightrail-front": "\f81f",
+ "truck-front-fill": "\f820",
+ "truck-front": "\f821",
+ "ubuntu": "\f822",
+ "unindent": "\f823",
+ "unity": "\f824",
+ "universal-access-circle": "\f825",
+ "universal-access": "\f826",
+ "virus": "\f827",
+ "virus2": "\f828",
+ "wechat": "\f829",
+ "yelp": "\f82a",
+ "sign-stop-fill": "\f82b",
+ "sign-stop-lights-fill": "\f82c",
+ "sign-stop-lights": "\f82d",
+ "sign-stop": "\f82e",
+ "sign-turn-left-fill": "\f82f",
+ "sign-turn-left": "\f830",
+ "sign-turn-right-fill": "\f831",
+ "sign-turn-right": "\f832",
+ "sign-turn-slight-left-fill": "\f833",
+ "sign-turn-slight-left": "\f834",
+ "sign-turn-slight-right-fill": "\f835",
+ "sign-turn-slight-right": "\f836",
+ "sign-yield-fill": "\f837",
+ "sign-yield": "\f838",
+ "ev-station-fill": "\f839",
+ "ev-station": "\f83a",
+ "fuel-pump-diesel-fill": "\f83b",
+ "fuel-pump-diesel": "\f83c",
+ "fuel-pump-fill": "\f83d",
+ "fuel-pump": "\f83e",
+ "0-circle-fill": "\f83f",
+ "0-circle": "\f840",
+ "0-square-fill": "\f841",
+ "0-square": "\f842",
+ "rocket-fill": "\f843",
+ "rocket-takeoff-fill": "\f844",
+ "rocket-takeoff": "\f845",
+ "rocket": "\f846",
+ "stripe": "\f847",
+ "subscript": "\f848",
+ "superscript": "\f849",
+ "trello": "\f84a",
+ "envelope-at-fill": "\f84b",
+ "envelope-at": "\f84c",
+ "regex": "\f84d",
+ "text-wrap": "\f84e",
+ "sign-dead-end-fill": "\f84f",
+ "sign-dead-end": "\f850",
+ "sign-do-not-enter-fill": "\f851",
+ "sign-do-not-enter": "\f852",
+ "sign-intersection-fill": "\f853",
+ "sign-intersection-side-fill": "\f854",
+ "sign-intersection-side": "\f855",
+ "sign-intersection-t-fill": "\f856",
+ "sign-intersection-t": "\f857",
+ "sign-intersection-y-fill": "\f858",
+ "sign-intersection-y": "\f859",
+ "sign-intersection": "\f85a",
+ "sign-merge-left-fill": "\f85b",
+ "sign-merge-left": "\f85c",
+ "sign-merge-right-fill": "\f85d",
+ "sign-merge-right": "\f85e",
+ "sign-no-left-turn-fill": "\f85f",
+ "sign-no-left-turn": "\f860",
+ "sign-no-parking-fill": "\f861",
+ "sign-no-parking": "\f862",
+ "sign-no-right-turn-fill": "\f863",
+ "sign-no-right-turn": "\f864",
+ "sign-railroad-fill": "\f865",
+ "sign-railroad": "\f866",
+ "building-add": "\f867",
+ "building-check": "\f868",
+ "building-dash": "\f869",
+ "building-down": "\f86a",
+ "building-exclamation": "\f86b",
+ "building-fill-add": "\f86c",
+ "building-fill-check": "\f86d",
+ "building-fill-dash": "\f86e",
+ "building-fill-down": "\f86f",
+ "building-fill-exclamation": "\f870",
+ "building-fill-gear": "\f871",
+ "building-fill-lock": "\f872",
+ "building-fill-slash": "\f873",
+ "building-fill-up": "\f874",
+ "building-fill-x": "\f875",
+ "building-fill": "\f876",
+ "building-gear": "\f877",
+ "building-lock": "\f878",
+ "building-slash": "\f879",
+ "building-up": "\f87a",
+ "building-x": "\f87b",
+ "buildings-fill": "\f87c",
+ "buildings": "\f87d",
+ "bus-front-fill": "\f87e",
+ "bus-front": "\f87f",
+ "ev-front-fill": "\f880",
+ "ev-front": "\f881",
+ "globe-americas": "\f882",
+ "globe-asia-australia": "\f883",
+ "globe-central-south-asia": "\f884",
+ "globe-europe-africa": "\f885",
+ "house-add-fill": "\f886",
+ "house-add": "\f887",
+ "house-check-fill": "\f888",
+ "house-check": "\f889",
+ "house-dash-fill": "\f88a",
+ "house-dash": "\f88b",
+ "house-down-fill": "\f88c",
+ "house-down": "\f88d",
+ "house-exclamation-fill": "\f88e",
+ "house-exclamation": "\f88f",
+ "house-gear-fill": "\f890",
+ "house-gear": "\f891",
+ "house-lock-fill": "\f892",
+ "house-lock": "\f893",
+ "house-slash-fill": "\f894",
+ "house-slash": "\f895",
+ "house-up-fill": "\f896",
+ "house-up": "\f897",
+ "house-x-fill": "\f898",
+ "house-x": "\f899",
+ "person-add": "\f89a",
+ "person-down": "\f89b",
+ "person-exclamation": "\f89c",
+ "person-fill-add": "\f89d",
+ "person-fill-check": "\f89e",
+ "person-fill-dash": "\f89f",
+ "person-fill-down": "\f8a0",
+ "person-fill-exclamation": "\f8a1",
+ "person-fill-gear": "\f8a2",
+ "person-fill-lock": "\f8a3",
+ "person-fill-slash": "\f8a4",
+ "person-fill-up": "\f8a5",
+ "person-fill-x": "\f8a6",
+ "person-gear": "\f8a7",
+ "person-lock": "\f8a8",
+ "person-slash": "\f8a9",
+ "person-up": "\f8aa",
+ "scooter": "\f8ab",
+ "taxi-front-fill": "\f8ac",
+ "taxi-front": "\f8ad",
+ "amd": "\f8ae",
+ "database-add": "\f8af",
+ "database-check": "\f8b0",
+ "database-dash": "\f8b1",
+ "database-down": "\f8b2",
+ "database-exclamation": "\f8b3",
+ "database-fill-add": "\f8b4",
+ "database-fill-check": "\f8b5",
+ "database-fill-dash": "\f8b6",
+ "database-fill-down": "\f8b7",
+ "database-fill-exclamation": "\f8b8",
+ "database-fill-gear": "\f8b9",
+ "database-fill-lock": "\f8ba",
+ "database-fill-slash": "\f8bb",
+ "database-fill-up": "\f8bc",
+ "database-fill-x": "\f8bd",
+ "database-fill": "\f8be",
+ "database-gear": "\f8bf",
+ "database-lock": "\f8c0",
+ "database-slash": "\f8c1",
+ "database-up": "\f8c2",
+ "database-x": "\f8c3",
+ "database": "\f8c4",
+ "houses-fill": "\f8c5",
+ "houses": "\f8c6",
+ "nvidia": "\f8c7",
+ "person-vcard-fill": "\f8c8",
+ "person-vcard": "\f8c9",
+ "sina-weibo": "\f8ca",
+ "tencent-qq": "\f8cb",
+ "wikipedia": "\f8cc",
+ "alphabet-uppercase": "\f2a5",
+ "alphabet": "\f68a",
+ "amazon": "\f68d",
+ "arrows-collapse-vertical": "\f690",
+ "arrows-expand-vertical": "\f695",
+ "arrows-vertical": "\f698",
+ "arrows": "\f6a2",
+ "ban-fill": "\f6a3",
+ "ban": "\f6b6",
+ "bing": "\f6c2",
+ "cake": "\f6e0",
+ "cake2": "\f6ed",
+ "cookie": "\f6ee",
+ "copy": "\f759",
+ "crosshair": "\f769",
+ "crosshair2": "\f794",
+ "emoji-astonished-fill": "\f795",
+ "emoji-astonished": "\f79a",
+ "emoji-grimace-fill": "\f79b",
+ "emoji-grimace": "\f7a0",
+ "emoji-grin-fill": "\f7a1",
+ "emoji-grin": "\f7a6",
+ "emoji-surprise-fill": "\f7a7",
+ "emoji-surprise": "\f7ac",
+ "emoji-tear-fill": "\f7ad",
+ "emoji-tear": "\f7b2",
+ "envelope-arrow-down-fill": "\f7b3",
+ "envelope-arrow-down": "\f7b8",
+ "envelope-arrow-up-fill": "\f7b9",
+ "envelope-arrow-up": "\f7be",
+ "feather": "\f7bf",
+ "feather2": "\f7c4",
+ "floppy-fill": "\f7c5",
+ "floppy": "\f7d8",
+ "floppy2-fill": "\f7d9",
+ "floppy2": "\f7e4",
+ "gitlab": "\f7e5",
+ "highlighter": "\f7f8",
+ "marker-tip": "\f802",
+ "nvme-fill": "\f803",
+ "nvme": "\f80c",
+ "opencollective": "\f80d",
+ "pci-card-network": "\f8cd",
+ "pci-card-sound": "\f8ce",
+ "radar": "\f8cf",
+ "send-arrow-down-fill": "\f8d0",
+ "send-arrow-down": "\f8d1",
+ "send-arrow-up-fill": "\f8d2",
+ "send-arrow-up": "\f8d3",
+ "sim-slash-fill": "\f8d4",
+ "sim-slash": "\f8d5",
+ "sourceforge": "\f8d6",
+ "substack": "\f8d7",
+ "threads-fill": "\f8d8",
+ "threads": "\f8d9",
+ "transparency": "\f8da",
+ "twitter-x": "\f8db",
+ "type-h4": "\f8dc",
+ "type-h5": "\f8dd",
+ "type-h6": "\f8de",
+ "backpack-fill": "\f8df",
+ "backpack": "\f8e0",
+ "backpack2-fill": "\f8e1",
+ "backpack2": "\f8e2",
+ "backpack3-fill": "\f8e3",
+ "backpack3": "\f8e4",
+ "backpack4-fill": "\f8e5",
+ "backpack4": "\f8e6",
+ "brilliance": "\f8e7",
+ "cake-fill": "\f8e8",
+ "cake2-fill": "\f8e9",
+ "duffle-fill": "\f8ea",
+ "duffle": "\f8eb",
+ "exposure": "\f8ec",
+ "gender-neuter": "\f8ed",
+ "highlights": "\f8ee",
+ "luggage-fill": "\f8ef",
+ "luggage": "\f8f0",
+ "mailbox-flag": "\f8f1",
+ "mailbox2-flag": "\f8f2",
+ "noise-reduction": "\f8f3",
+ "passport-fill": "\f8f4",
+ "passport": "\f8f5",
+ "person-arms-up": "\f8f6",
+ "person-raised-hand": "\f8f7",
+ "person-standing-dress": "\f8f8",
+ "person-standing": "\f8f9",
+ "person-walking": "\f8fa",
+ "person-wheelchair": "\f8fb",
+ "shadows": "\f8fc",
+ "suitcase-fill": "\f8fd",
+ "suitcase-lg-fill": "\f8fe",
+ "suitcase-lg": "\f8ff",
+ "suitcase": "\f900",
+ "suitcase2-fill": "\f901",
+ "suitcase2": "\f902",
+ "vignette": "\f903",
+);
+
+@each $icon, $codepoint in $bootstrap-icons-map {
+ .bi-#{$icon}::before { content: $codepoint; }
+}
diff --git a/style/bulma/_index.scss b/style/bulma/_index.scss
new file mode 100644
index 0000000..83b4c0e
--- /dev/null
+++ b/style/bulma/_index.scss
@@ -0,0 +1,4 @@
+@charset "utf-8";
+
+/*! bulma.io v1.0.0 | MIT License | github.com/jgthms/bulma */
+@use "sass";
diff --git a/style/bulma/sass/_index.scss b/style/bulma/sass/_index.scss
new file mode 100644
index 0000000..82310cb
--- /dev/null
+++ b/style/bulma/sass/_index.scss
@@ -0,0 +1,10 @@
+@forward "utilities";
+@forward "themes";
+@forward "base";
+@forward "elements";
+@forward "form";
+@forward "components";
+@forward "grid";
+@forward "layout";
+@forward "base/skeleton";
+@forward "helpers";
diff --git a/style/bulma/sass/base/_index.scss b/style/bulma/sass/base/_index.scss
new file mode 100644
index 0000000..4416b1f
--- /dev/null
+++ b/style/bulma/sass/base/_index.scss
@@ -0,0 +1,6 @@
+/* Bulma Base */
+@charset "utf-8";
+
+@forward "minireset";
+@forward "generic";
+@forward "animations";
diff --git a/style/bulma/sass/base/animations.scss b/style/bulma/sass/base/animations.scss
new file mode 100644
index 0000000..667124c
--- /dev/null
+++ b/style/bulma/sass/base/animations.scss
@@ -0,0 +1,15 @@
+@keyframes spinAround {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(359deg);
+ }
+}
+
+@keyframes pulsate {
+ 50% {
+ opacity: 0.5;
+ }
+}
diff --git a/style/bulma/sass/base/generic.scss b/style/bulma/sass/base/generic.scss
new file mode 100644
index 0000000..b7ee0cc
--- /dev/null
+++ b/style/bulma/sass/base/generic.scss
@@ -0,0 +1,239 @@
+@use "../utilities/css-variables.scss" as cv;
+@use "../utilities/mixins" as mx;
+
+$body-background-color: cv.getVar("scheme-main") !default;
+$body-size: 1em !default;
+$body-min-width: 300px !default;
+$body-rendering: optimizeLegibility !default;
+$body-family: cv.getVar("family-primary") !default;
+$body-overflow-x: hidden !default;
+$body-overflow-y: scroll !default;
+
+$body-color: cv.getVar("text") !default;
+$body-font-size: 1em !default;
+$body-weight: cv.getVar("weight-normal") !default;
+$body-line-height: 1.5 !default;
+
+$code-family: cv.getVar("family-code") !default;
+$code-padding: 0.25em 0.5em 0.25em !default;
+$code-weight: normal !default;
+$code-size: 0.875em !default;
+
+$small-font-size: 0.875em !default;
+
+$hr-background-color: cv.getVar("background") !default;
+$hr-height: 2px !default;
+$hr-margin: 1.5rem 0 !default;
+
+$strong-color: cv.getVar("text-strong") !default;
+$strong-weight: cv.getVar("weight-semibold") !default;
+
+$pre-font-size: 0.875em !default;
+$pre-padding: 1.25rem 1.5rem !default;
+$pre-code-font-size: 1em !default;
+
+:root {
+ @include cv.register-vars(
+ (
+ "body-background-color": #{$body-background-color},
+ "body-size": #{$body-size},
+ "body-min-width": #{$body-min-width},
+ "body-rendering": #{$body-rendering},
+ "body-family": #{$body-family},
+ "body-overflow-x": #{$body-overflow-x},
+ "body-overflow-y": #{$body-overflow-y},
+ "body-color": #{$body-color},
+ "body-font-size": #{$body-font-size},
+ "body-weight": #{$body-weight},
+ "body-line-height": #{$body-line-height},
+ "code-family": #{$code-family},
+ "code-padding": #{$code-padding},
+ "code-weight": #{$code-weight},
+ "code-size": #{$code-size},
+ "small-font-size": #{$small-font-size},
+ "hr-background-color": #{$hr-background-color},
+ "hr-height": #{$hr-height},
+ "hr-margin": #{$hr-margin},
+ "strong-color": #{$strong-color},
+ "strong-weight": #{$strong-weight},
+ "pre-font-size": #{$pre-font-size},
+ "pre-padding": #{$pre-padding},
+ "pre-code-font-size": #{$pre-code-font-size},
+ )
+ );
+}
+
+html {
+ background-color: cv.getVar("body-background-color");
+ font-size: cv.getVar("body-size");
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ min-width: cv.getVar("body-min-width");
+ overflow-x: cv.getVar("body-overflow-x");
+ overflow-y: cv.getVar("body-overflow-y");
+ text-rendering: cv.getVar("body-rendering");
+ text-size-adjust: 100%;
+}
+
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+section {
+ display: block;
+}
+
+body,
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: cv.getVar("body-family");
+}
+
+code,
+pre {
+ -moz-osx-font-smoothing: auto;
+ -webkit-font-smoothing: auto;
+ font-family: cv.getVar("code-family");
+}
+
+body {
+ color: cv.getVar("body-color");
+ font-size: cv.getVar("body-font-size");
+ font-weight: cv.getVar("body-weight");
+ line-height: cv.getVar("body-line-height");
+}
+
+// Inline
+
+a,
+button {
+ cursor: pointer;
+
+ &:focus-visible {
+ outline-color: hsl(
+ cv.getVar("focus-h"),
+ cv.getVar("focus-s"),
+ cv.getVar("focus-l")
+ );
+ outline-offset: cv.getVar("focus-offset");
+ outline-style: cv.getVar("focus-style");
+ outline-width: cv.getVar("focus-width");
+
+ &:active {
+ outline-width: 1px;
+ }
+ }
+
+ &:active {
+ outline-width: 1px;
+ }
+}
+
+a {
+ color: cv.getVar("link-text");
+ cursor: pointer;
+ text-decoration: none;
+ transition-duration: cv.getVar("duration");
+ transition-property: background-color, border-color, color;
+
+ strong {
+ color: currentColor;
+ }
+}
+
+button {
+ @include mx.reset;
+ transition-duration: cv.getVar("duration");
+ transition-property: background-color, border-color, color;
+}
+
+code {
+ background-color: cv.getVar("code-background");
+ border-radius: 0.5em;
+ color: cv.getVar("code");
+ font-size: cv.getVar("code-size");
+ font-weight: cv.getVar("code-weight");
+ padding: cv.getVar("code-padding");
+}
+
+hr {
+ background-color: cv.getVar("hr-background-color");
+ border: none;
+ display: block;
+ height: cv.getVar("hr-height");
+ margin: cv.getVar("hr-margin");
+}
+
+img {
+ height: auto;
+ max-width: 100%;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+ vertical-align: baseline;
+}
+
+small {
+ font-size: cv.getVar("small-font-size");
+}
+
+span {
+ font-style: inherit;
+ font-weight: inherit;
+}
+
+strong {
+ color: cv.getVar("strong-color");
+ font-weight: cv.getVar("strong-weight");
+}
+
+svg {
+ height: auto;
+ width: auto;
+}
+
+// Block
+
+fieldset {
+ border: none;
+}
+
+pre {
+ @include mx.overflow-touch;
+
+ background-color: cv.getVar("pre-background");
+ color: cv.getVar("pre");
+ font-size: cv.getVar("pre-font-size");
+ overflow-x: auto;
+ padding: cv.getVar("pre-padding");
+ white-space: pre;
+ word-wrap: normal;
+
+ code {
+ background-color: transparent;
+ color: currentColor;
+ font-size: cv.getVar("pre-code-font-size");
+ padding: 0;
+ }
+}
+
+table {
+ td,
+ th {
+ vertical-align: top;
+
+ &:not([align]) {
+ text-align: inherit;
+ }
+ }
+
+ th {
+ color: cv.getVar("text-strong");
+ }
+}
diff --git a/style/bulma/sass/base/minireset.scss b/style/bulma/sass/base/minireset.scss
new file mode 100644
index 0000000..5b09693
--- /dev/null
+++ b/style/bulma/sass/base/minireset.scss
@@ -0,0 +1,92 @@
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
+// Blocks
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ padding: 0;
+}
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: 100%;
+ font-weight: normal;
+}
+
+// List
+ul {
+ list-style: none;
+}
+
+// Form
+button,
+input,
+select,
+textarea {
+ margin: 0;
+}
+
+// Box sizing
+html {
+ box-sizing: border-box;
+}
+
+* {
+ &,
+ &::before,
+ &::after {
+ box-sizing: inherit;
+ }
+}
+
+// Media
+img,
+video {
+ height: auto;
+ max-width: 100%;
+}
+
+// Iframe
+iframe {
+ border: 0;
+}
+
+// Table
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+td,
+th {
+ padding: 0;
+
+ &:not([align]) {
+ text-align: inherit;
+ }
+}
diff --git a/style/bulma/sass/base/skeleton.scss b/style/bulma/sass/base/skeleton.scss
new file mode 100644
index 0000000..792e2ce
--- /dev/null
+++ b/style/bulma/sass/base/skeleton.scss
@@ -0,0 +1,126 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+@use "../utilities/extends";
+
+$skeleton-background: cv.getVar("border") !default;
+$skeleton-radius: cv.getVar("radius-small") !default;
+$skeleton-block-min-height: 4.5em !default;
+$skeleton-lines-gap: 0.75em !default;
+$skeleton-line-height: 0.75em !default;
+
+:root {
+ @include cv.register-vars(
+ (
+ "skeleton-background": #{$skeleton-background},
+ "skeleton-radius": #{$skeleton-radius},
+ "skeleton-block-min-height": #{$skeleton-block-min-height},
+ "skeleton-lines-gap": #{$skeleton-lines-gap},
+ "skeleton-line-height": #{$skeleton-line-height},
+ )
+ );
+}
+
+%skeleton-pulsation {
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ animation-name: pulsate;
+ animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+ background-color: cv.getVar("skeleton-background");
+ border-radius: cv.getVar("skeleton-radius");
+ box-shadow: none;
+ pointer-events: none;
+}
+
+.#{iv.$class-prefix}is-skeleton {
+ @extend %skeleton-pulsation;
+ color: transparent !important;
+
+ em,
+ strong {
+ color: inherit;
+ }
+
+ img {
+ visibility: hidden;
+ }
+
+ &.#{iv.$class-prefix}checkbox {
+ input {
+ opacity: 0;
+ }
+ }
+
+ &.#{iv.$class-prefix}delete {
+ border-radius: cv.getVar("radius-rounded");
+
+ &::before,
+ &::after {
+ display: none;
+ }
+ }
+}
+
+input.#{iv.$class-prefix}is-skeleton,
+textarea.#{iv.$class-prefix}is-skeleton {
+ resize: none;
+
+ @include mx.placeholder {
+ color: transparent !important;
+ }
+}
+
+.#{iv.$class-prefix}has-skeleton {
+ color: transparent !important;
+ position: relative;
+
+ &::after {
+ @extend %skeleton-pulsation;
+ content: "";
+ display: block;
+ height: 100%;
+ left: 0;
+ max-width: 100%;
+ min-width: 10%;
+ position: absolute;
+ top: 0;
+ width: 7em;
+ }
+}
+
+.#{iv.$class-prefix}skeleton-block {
+ @extend %block;
+ @extend %skeleton-pulsation;
+ color: transparent !important;
+ min-height: cv.getVar("skeleton-block-min-height");
+}
+
+.#{iv.$class-prefix}skeleton-lines {
+ color: transparent !important;
+ display: flex;
+ flex-direction: column;
+ gap: cv.getVar("skeleton-lines-gap");
+ position: relative;
+
+ > div {
+ @extend %skeleton-pulsation;
+ height: cv.getVar("skeleton-line-height");
+
+ &:last-child {
+ min-width: 4em;
+ width: 30%;
+ }
+ }
+}
+
+.#{iv.$class-prefix}skeleton {
+ background-image: linear-gradient(
+ 0deg,
+ transparent 0%,
+ transparent 50%,
+ #f60 50%,
+ #f60 100%
+ );
+ background-position: top left;
+ background-size: 1.5em;
+}
diff --git a/style/bulma/sass/components/_index.scss b/style/bulma/sass/components/_index.scss
new file mode 100644
index 0000000..2decd67
--- /dev/null
+++ b/style/bulma/sass/components/_index.scss
@@ -0,0 +1,13 @@
+/* Bulma Components */
+@charset "utf-8";
+
+@forward "breadcrumb";
+@forward "card";
+@forward "dropdown";
+@forward "menu";
+@forward "message";
+@forward "modal";
+@forward "navbar";
+@forward "pagination";
+@forward "panel";
+@forward "tabs";
diff --git a/style/bulma/sass/components/breadcrumb.scss b/style/bulma/sass/components/breadcrumb.scss
new file mode 100644
index 0000000..bd261fb
--- /dev/null
+++ b/style/bulma/sass/components/breadcrumb.scss
@@ -0,0 +1,139 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins";
+
+$breadcrumb-item-color: cv.getVar("link-text") !default;
+$breadcrumb-item-hover-color: cv.getVar("link-text-hover") !default;
+$breadcrumb-item-active-color: cv.getVar("link-text-active") !default;
+
+$breadcrumb-item-padding-vertical: 0 !default;
+$breadcrumb-item-padding-horizontal: 0.75em !default;
+
+$breadcrumb-item-separator-color: cv.getVar("border") !default;
+
+.#{iv.$class-prefix}breadcrumb {
+ @include cv.register-vars(
+ (
+ "breadcrumb-item-color": #{$breadcrumb-item-color},
+ "breadcrumb-item-hover-color": #{$breadcrumb-item-hover-color},
+ "breadcrumb-item-active-color": #{$breadcrumb-item-active-color},
+ "breadcrumb-item-padding-vertical": #{$breadcrumb-item-padding-vertical},
+ "breadcrumb-item-padding-horizontal": #{$breadcrumb-item-padding-horizontal},
+ "breadcrumb-item-separator-color": #{$breadcrumb-item-separator-color},
+ )
+ );
+}
+
+.#{iv.$class-prefix}breadcrumb {
+ @extend %block;
+ @extend %unselectable;
+ font-size: cv.getVar("size-normal");
+ white-space: nowrap;
+
+ a {
+ align-items: center;
+ color: cv.getVar("breadcrumb-item-color");
+ display: flex;
+ justify-content: center;
+ padding: cv.getVar("breadcrumb-item-padding-vertical")
+ cv.getVar("breadcrumb-item-padding-horizontal");
+
+ &:hover {
+ color: cv.getVar("breadcrumb-item-hover-color");
+ }
+ }
+
+ li {
+ align-items: center;
+ display: flex;
+
+ &:first-child a {
+ padding-inline-start: 0;
+ }
+
+ &.#{iv.$class-prefix}is-active {
+ a {
+ color: cv.getVar("breadcrumb-item-active-color");
+ cursor: default;
+ pointer-events: none;
+ }
+ }
+
+ & + li::before {
+ color: cv.getVar("breadcrumb-item-separator-color");
+ content: "/";
+ }
+ }
+
+ ul,
+ ol {
+ align-items: flex-start;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ }
+
+ .#{iv.$class-prefix}icon {
+ &:first-child {
+ margin-inline-end: 0.5em;
+ }
+
+ &:last-child {
+ margin-inline-start: 0.5em;
+ }
+ }
+
+ // Alignment
+ &.#{iv.$class-prefix}is-centered {
+ ol,
+ ul {
+ justify-content: center;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-right {
+ ol,
+ ul {
+ justify-content: flex-end;
+ }
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ font-size: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ font-size: cv.getVar("size-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ font-size: cv.getVar("size-large");
+ }
+
+ // Styles
+ &.#{iv.$class-prefix}has-arrow-separator {
+ li + li::before {
+ content: "→";
+ }
+ }
+
+ &.#{iv.$class-prefix}has-bullet-separator {
+ li + li::before {
+ content: "•";
+ }
+ }
+
+ &.#{iv.$class-prefix}has-dot-separator {
+ li + li::before {
+ content: "·";
+ }
+ }
+
+ &.#{iv.$class-prefix}has-succeeds-separator {
+ li + li::before {
+ content: "≻";
+ }
+ }
+}
diff --git a/style/bulma/sass/components/card.scss b/style/bulma/sass/components/card.scss
new file mode 100644
index 0000000..0b3b2c5
--- /dev/null
+++ b/style/bulma/sass/components/card.scss
@@ -0,0 +1,162 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$card-color: cv.getVar("text") !default;
+$card-background-color: cv.getVar("scheme-main") !default;
+$card-shadow: cv.getVar("shadow") !default;
+$card-radius: 0.75rem !default;
+
+$card-header-background-color: transparent !default;
+$card-header-color: cv.getVar("text-strong") !default;
+$card-header-padding: 0.75rem 1rem !default;
+$card-header-shadow: 0 0.125em 0.25em
+ hsla(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-invert-l")},
+ 0.1
+ ) !default;
+$card-header-weight: cv.getVar("weight-bold") !default;
+
+$card-content-background-color: transparent !default;
+$card-content-padding: 1.5rem !default;
+
+$card-footer-background-color: transparent !default;
+$card-footer-border-top: 1px solid cv.getVar("border-weak") !default;
+$card-footer-padding: 0.75rem !default;
+
+$card-media-margin: cv.getVar("block-spacing") !default;
+
+.#{iv.$class-prefix}card {
+ @include cv.register-vars(
+ (
+ "card-color": #{$card-color},
+ "card-background-color": #{$card-background-color},
+ "card-shadow": #{$card-shadow},
+ "card-radius": #{$card-radius},
+ "card-header-background-color": #{$card-header-background-color},
+ "card-header-color": #{$card-header-color},
+ "card-header-padding": #{$card-header-padding},
+ "card-header-shadow": #{$card-header-shadow},
+ "card-header-weight": #{$card-header-weight},
+ "card-content-background-color": #{$card-content-background-color},
+ "card-content-padding": #{$card-content-padding},
+ "card-footer-background-color": #{$card-footer-background-color},
+ "card-footer-border-top": #{$card-footer-border-top},
+ "card-footer-padding": #{$card-footer-padding},
+ "card-media-margin": #{$card-media-margin},
+ )
+ );
+}
+
+.#{iv.$class-prefix}card {
+ @extend %block;
+ background-color: cv.getVar("card-background-color");
+ border-radius: cv.getVar("card-radius");
+ box-shadow: cv.getVar("card-shadow");
+ color: cv.getVar("card-color");
+ max-width: 100%;
+ position: relative;
+}
+
+%card-item {
+ &:first-child {
+ border-start-start-radius: cv.getVar("card-radius");
+ border-start-end-radius: cv.getVar("card-radius");
+ }
+
+ &:last-child {
+ border-end-start-radius: cv.getVar("card-radius");
+ border-end-end-radius: cv.getVar("card-radius");
+ }
+}
+
+.#{iv.$class-prefix}card-header {
+ @extend %card-item;
+ background-color: cv.getVar("card-header-background-color");
+ align-items: stretch;
+ box-shadow: cv.getVar("card-header-shadow");
+ display: flex;
+}
+
+.#{iv.$class-prefix}card-header-title {
+ align-items: center;
+ color: cv.getVar("card-header-color");
+ display: flex;
+ flex-grow: 1;
+ font-weight: cv.getVar("card-header-weight");
+ padding: cv.getVar("card-header-padding");
+
+ &.#{iv.$class-prefix}is-centered {
+ justify-content: center;
+ }
+}
+
+.#{iv.$class-prefix}card-header-icon {
+ @include mx.reset;
+
+ align-items: center;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ padding: cv.getVar("card-header-padding");
+}
+
+.#{iv.$class-prefix}card-image {
+ display: block;
+ position: relative;
+
+ &:first-child {
+ img {
+ border-start-start-radius: cv.getVar("card-radius");
+ border-start-end-radius: cv.getVar("card-radius");
+ }
+ }
+
+ &:last-child {
+ img {
+ border-end-start-radius: cv.getVar("card-radius");
+ border-end-end-radius: cv.getVar("card-radius");
+ }
+ }
+}
+
+.#{iv.$class-prefix}card-content {
+ @extend %card-item;
+
+ background-color: cv.getVar("card-content-background-color");
+ padding: cv.getVar("card-content-padding");
+}
+
+.#{iv.$class-prefix}card-footer {
+ @extend %card-item;
+
+ background-color: cv.getVar("card-footer-background-color");
+ border-top: cv.getVar("card-footer-border-top");
+ align-items: stretch;
+ display: flex;
+}
+
+.#{iv.$class-prefix}card-footer-item {
+ align-items: center;
+ display: flex;
+ flex-basis: 0;
+ flex-grow: 1;
+ flex-shrink: 0;
+ justify-content: center;
+ padding: cv.getVar("card-footer-padding");
+
+ &:not(:last-child) {
+ border-inline-end: cv.getVar("card-footer-border-top");
+ }
+}
+
+// Combinations
+
+.#{iv.$class-prefix}card {
+ .#{iv.$class-prefix}media:not(:last-child) {
+ margin-bottom: cv.getVar("card-media-margin");
+ }
+}
diff --git a/style/bulma/sass/components/dropdown.scss b/style/bulma/sass/components/dropdown.scss
new file mode 100644
index 0000000..415728b
--- /dev/null
+++ b/style/bulma/sass/components/dropdown.scss
@@ -0,0 +1,188 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$dropdown-menu-min-width: 12rem !default;
+
+$dropdown-content-background-color: cv.getVar("scheme-main") !default;
+$dropdown-content-offset: 0.25rem !default;
+$dropdown-content-padding-bottom: 0.5rem !default;
+$dropdown-content-padding-top: 0.5rem !default;
+$dropdown-content-radius: cv.getVar("radius") !default;
+$dropdown-content-shadow: cv.getVar("shadow") !default;
+$dropdown-content-z: 20 !default;
+
+$dropdown-item-h: cv.getVar("scheme-h");
+$dropdown-item-s: cv.getVar("scheme-s");
+$dropdown-item-l: cv.getVar("scheme-main-l");
+$dropdown-item-background-l: cv.getVar("scheme-main-l");
+$dropdown-item-background-l-delta: 0%;
+$dropdown-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
+$dropdown-item-active-background-l-delta: cv.getVar(
+ "active-background-l-delta"
+);
+$dropdown-item-color-l: cv.getVar("text-strong-l");
+$dropdown-item-selected-h: cv.getVar("link-h");
+$dropdown-item-selected-s: cv.getVar("link-s");
+$dropdown-item-selected-l: cv.getVar("link-l");
+$dropdown-item-selected-background-l: cv.getVar("link-l");
+$dropdown-item-selected-color-l: cv.getVar("link-invert-l");
+
+$dropdown-divider-background-color: cv.getVar("border-weak") !default;
+
+.#{iv.$class-prefix}dropdown {
+ // prettier-ignore-start
+ @include cv.register-vars(
+ (
+ "dropdown-menu-min-width": #{$dropdown-menu-min-width},
+ "dropdown-content-background-color": #{$dropdown-content-background-color},
+ "dropdown-content-offset": #{$dropdown-content-offset},
+ "dropdown-content-padding-bottom": #{$dropdown-content-padding-bottom},
+ "dropdown-content-padding-top": #{$dropdown-content-padding-top},
+ "dropdown-content-radius": #{$dropdown-content-radius},
+ "dropdown-content-shadow": #{$dropdown-content-shadow},
+ "dropdown-content-z": #{$dropdown-content-z},
+ "dropdown-item-h": #{$dropdown-item-h},
+ "dropdown-item-s": #{$dropdown-item-s},
+ "dropdown-item-l": #{$dropdown-item-l},
+ "dropdown-item-background-l": #{$dropdown-item-background-l},
+ "dropdown-item-background-l-delta": #{$dropdown-item-background-l-delta},
+ "dropdown-item-hover-background-l-delta": #{$dropdown-item-hover-background-l-delta},
+ "dropdown-item-active-background-l-delta": #{$dropdown-item-active-background-l-delta},
+ "dropdown-item-color-l": #{$dropdown-item-color-l},
+ "dropdown-item-selected-h": #{$dropdown-item-selected-h},
+ "dropdown-item-selected-s": #{$dropdown-item-selected-s},
+ "dropdown-item-selected-l": #{$dropdown-item-selected-l},
+ "dropdown-item-selected-background-l": #{$dropdown-item-selected-background-l},
+ "dropdown-item-selected-color-l": #{$dropdown-item-selected-color-l},
+ "dropdown-divider-background-color": #{$dropdown-divider-background-color},
+ )
+ );
+ // prettier-ignore-end
+}
+
+.#{iv.$class-prefix}dropdown {
+ display: inline-flex;
+ position: relative;
+ vertical-align: top;
+
+ &.#{iv.$class-prefix}is-active,
+ &.#{iv.$class-prefix}is-hoverable:hover {
+ .#{iv.$class-prefix}dropdown-menu {
+ display: block;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-right {
+ .#{iv.$class-prefix}dropdown-menu {
+ left: auto;
+ right: 0;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-up {
+ .#{iv.$class-prefix}dropdown-menu {
+ bottom: 100%;
+ padding-bottom: cv.getVar("dropdown-content-offset");
+ padding-top: initial;
+ top: auto;
+ }
+ }
+}
+
+.#{iv.$class-prefix}dropdown-menu {
+ display: none;
+ @include mx.ltr-position(0, false);
+ min-width: cv.getVar("dropdown-menu-min-width");
+ padding-top: cv.getVar("dropdown-content-offset");
+ position: absolute;
+ top: 100%;
+ z-index: cv.getVar("dropdown-content-z");
+}
+
+.#{iv.$class-prefix}dropdown-content {
+ background-color: cv.getVar("dropdown-content-background-color");
+ border-radius: cv.getVar("dropdown-content-radius");
+ box-shadow: cv.getVar("dropdown-content-shadow");
+ padding-bottom: cv.getVar("dropdown-content-padding-bottom");
+ padding-top: cv.getVar("dropdown-content-padding-top");
+}
+
+.#{iv.$class-prefix}dropdown-item {
+ color: hsl(
+ #{cv.getVar("dropdown-item-h")},
+ #{cv.getVar("dropdown-item-s")},
+ #{cv.getVar("dropdown-item-color-l")}
+ );
+ display: block;
+ font-size: 0.875rem;
+ line-height: 1.5;
+ padding: 0.375rem 1rem;
+}
+
+a.#{iv.$class-prefix}dropdown-item,
+button.#{iv.$class-prefix}dropdown-item {
+ background-color: hsl(
+ #{cv.getVar("dropdown-item-h")},
+ #{cv.getVar("dropdown-item-s")},
+ calc(
+ #{cv.getVar("dropdown-item-background-l")} + #{cv.getVar(
+ "dropdown-item-background-l-delta"
+ )}
+ )
+ );
+ padding-inline-end: 3rem;
+ text-align: inherit;
+ white-space: nowrap;
+ width: 100%;
+
+ &:hover {
+ @include cv.register-vars(
+ (
+ "dropdown-item-background-l-delta": #{cv.getVar(
+ "dropdown-item-hover-background-l-delta"
+ )},
+ "dropdown-item-border-l-delta": #{cv.getVar(
+ "dropdown-item-hover-border-l-delta"
+ )},
+ )
+ );
+ }
+
+ &:active {
+ @include cv.register-vars(
+ (
+ "dropdown-item-background-l-delta": #{cv.getVar(
+ "dropdown-item-active-background-l-delta"
+ )},
+ "dropdown-item-border-l-delta": #{cv.getVar(
+ "dropdown-item-active-border-l-delta"
+ )},
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-active,
+ &.#{iv.$class-prefix}is-selected {
+ @include cv.register-vars(
+ (
+ "dropdown-item-h": #{cv.getVar("dropdown-item-selected-h")},
+ "dropdown-item-s": #{cv.getVar("dropdown-item-selected-s")},
+ "dropdown-item-l": #{cv.getVar("dropdown-item-selected-l")},
+ "dropdown-item-background-l": #{cv.getVar(
+ "dropdown-item-selected-background-l"
+ )},
+ "dropdown-item-color-l": #{cv.getVar("dropdown-item-selected-color-l")},
+ )
+ );
+ }
+}
+
+.#{iv.$class-prefix}dropdown-divider {
+ background-color: cv.getVar("dropdown-divider-background-color");
+ border: none;
+ display: block;
+ height: 1px;
+ margin: 0.5rem 0;
+}
diff --git a/style/bulma/sass/components/menu.scss b/style/bulma/sass/components/menu.scss
new file mode 100644
index 0000000..2bee7d5
--- /dev/null
+++ b/style/bulma/sass/components/menu.scss
@@ -0,0 +1,165 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$menu-item-h: cv.getVar("scheme-h");
+$menu-item-s: cv.getVar("scheme-s");
+$menu-item-l: cv.getVar("scheme-main-l");
+$menu-item-background-l: cv.getVar("scheme-main-l");
+$menu-item-background-l-delta: 0%;
+$menu-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
+$menu-item-active-background-l-delta: cv.getVar("active-background-l-delta");
+$menu-item-color-l: cv.getVar("text-l");
+$menu-item-radius: cv.getVar("radius-small") !default;
+$menu-item-selected-h: cv.getVar("link-h");
+$menu-item-selected-s: cv.getVar("link-s");
+$menu-item-selected-l: cv.getVar("link-l");
+$menu-item-selected-background-l: cv.getVar("link-l");
+$menu-item-selected-color-l: cv.getVar("link-invert-l");
+
+$menu-list-border-left: 1px solid cv.getVar("border") !default;
+$menu-list-line-height: 1.25 !default;
+$menu-list-link-padding: 0.5em 0.75em !default;
+$menu-nested-list-margin: 0.75em !default;
+$menu-nested-list-padding-left: 0.75em !default;
+
+$menu-label-color: cv.getVar("text-weak") !default;
+$menu-label-font-size: 0.75em !default;
+$menu-label-letter-spacing: 0.1em !default;
+$menu-label-spacing: 1em !default;
+
+.#{iv.$class-prefix}menu {
+ @include cv.register-vars(
+ (
+ "menu-item-h": #{$menu-item-h},
+ "menu-item-s": #{$menu-item-s},
+ "menu-item-l": #{$menu-item-l},
+ "menu-item-background-l": #{$menu-item-background-l},
+ "menu-item-background-l-delta": #{$menu-item-background-l-delta},
+ "menu-item-hover-background-l-delta": #{$menu-item-hover-background-l-delta},
+ "menu-item-active-background-l-delta": #{$menu-item-active-background-l-delta},
+ "menu-item-color-l": #{$menu-item-color-l},
+ "menu-item-radius": #{$menu-item-radius},
+ "menu-item-selected-h": #{$menu-item-selected-h},
+ "menu-item-selected-s": #{$menu-item-selected-s},
+ "menu-item-selected-l": #{$menu-item-selected-l},
+ "menu-item-selected-background-l": #{$menu-item-selected-background-l},
+ "menu-item-selected-color-l": #{$menu-item-selected-color-l},
+ "menu-list-border-left": #{$menu-list-border-left},
+ "menu-list-line-height": #{$menu-list-line-height},
+ "menu-list-link-padding": #{$menu-list-link-padding},
+ "menu-nested-list-margin": #{$menu-nested-list-margin},
+ "menu-nested-list-padding-left": #{$menu-nested-list-padding-left},
+ "menu-label-color": #{$menu-label-color},
+ "menu-label-font-size": #{$menu-label-font-size},
+ "menu-label-letter-spacing": #{$menu-label-letter-spacing},
+ "menu-label-spacing": #{$menu-label-spacing},
+ )
+ );
+}
+
+.#{iv.$class-prefix}menu {
+ font-size: cv.getVar("size-normal");
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ font-size: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ font-size: cv.getVar("size-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ font-size: cv.getVar("size-large");
+ }
+}
+
+.#{iv.$class-prefix}menu-list {
+ line-height: cv.getVar("menu-list-line-height");
+
+ a,
+ button,
+ .#{iv.$class-prefix}menu-item {
+ @extend %reset;
+ background-color: hsl(
+ #{cv.getVar("menu-item-h")},
+ #{cv.getVar("menu-item-s")},
+ calc(
+ #{cv.getVar("menu-item-background-l")} + #{cv.getVar(
+ "menu-item-background-l-delta"
+ )}
+ )
+ );
+ border-radius: cv.getVar("menu-item-radius");
+ color: hsl(
+ #{cv.getVar("menu-item-h")},
+ #{cv.getVar("menu-item-s")},
+ #{cv.getVar("menu-item-color-l")}
+ );
+ display: block;
+ padding: cv.getVar("menu-list-link-padding");
+ text-align: left;
+ width: 100%;
+
+ &:hover {
+ @include cv.register-vars(
+ (
+ "menu-item-background-l-delta": #{cv.getVar(
+ "menu-item-hover-background-l-delta"
+ )},
+ )
+ );
+ }
+
+ &:active {
+ @include cv.register-vars(
+ (
+ "menu-item-background-l-delta": #{cv.getVar(
+ "menu-item-active-background-l-delta"
+ )},
+ )
+ );
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-active,
+ &.#{iv.$class-prefix}is-selected {
+ @include cv.register-vars(
+ (
+ "menu-item-h": #{cv.getVar("menu-item-selected-h")},
+ "menu-item-s": #{cv.getVar("menu-item-selected-s")},
+ "menu-item-l": #{cv.getVar("menu-item-selected-l")},
+ "menu-item-background-l": #{cv.getVar(
+ "menu-item-selected-background-l"
+ )},
+ "menu-item-color-l": #{cv.getVar("menu-item-selected-color-l")},
+ )
+ );
+ }
+ }
+
+ li {
+ ul {
+ border-inline-start: cv.getVar("menu-list-border-left");
+ margin: cv.getVar("menu-nested-list-margin");
+ padding-inline-start: cv.getVar("menu-nested-list-padding-left");
+ }
+ }
+}
+
+.#{iv.$class-prefix}menu-label {
+ color: cv.getVar("menu-label-color");
+ font-size: cv.getVar("menu-label-font-size");
+ letter-spacing: cv.getVar("menu-label-letter-spacing");
+ text-transform: uppercase;
+
+ &:not(:first-child) {
+ margin-top: cv.getVar("menu-label-spacing");
+ }
+
+ &:not(:last-child) {
+ margin-bottom: cv.getVar("menu-label-spacing");
+ }
+}
diff --git a/style/bulma/sass/components/message.scss b/style/bulma/sass/components/message.scss
new file mode 100644
index 0000000..03196fe
--- /dev/null
+++ b/style/bulma/sass/components/message.scss
@@ -0,0 +1,183 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$message-h: cv.getVar("scheme-h");
+$message-s: cv.getVar("scheme-s");
+$message-background-l: cv.getVar("background-l");
+$message-border-l: cv.getVar("border-l");
+$message-border-l-delta: -20% !default;
+$message-border-style: solid;
+$message-border-width: 0.25em;
+$message-color-l: cv.getVar("text-l");
+$message-header-background-l: cv.getVar("dark-l");
+$message-header-color-l: cv.getVar("text-dark-invert-l");
+$message-radius: cv.getVar("radius") !default;
+
+$message-header-weight: cv.getVar("weight-semibold") !default;
+$message-header-padding: 1em 1.25em !default;
+$message-header-radius: cv.getVar("radius") !default;
+
+$message-body-border-width: 0 0 0 4px !default;
+$message-body-color: cv.getVar("text") !default;
+$message-body-padding: 1.25em 1.5em !default;
+$message-body-radius: cv.getVar("radius-small") !default;
+
+$message-body-pre-code-background-color: transparent !default;
+
+$message-header-body-border-width: 0 !default;
+$message-colors: dv.$colors !default;
+
+.#{iv.$class-prefix}message {
+ @include cv.register-vars(
+ (
+ "message-border-l-delta": #{$message-border-l-delta},
+ "message-radius": #{$message-radius},
+ "message-header-weight": #{$message-header-weight},
+ "message-header-padding": #{$message-header-padding},
+ "message-header-radius": #{$message-header-radius},
+ "message-body-border-width": #{$message-body-border-width},
+ "message-body-color": #{$message-body-color},
+ "message-body-padding": #{$message-body-padding},
+ "message-body-radius": #{$message-body-radius},
+ "message-body-pre-code-background-color": #{$message-body-pre-code-background-color},
+ "message-header-body-border-width": #{$message-header-body-border-width},
+ "message-h": #{$message-h},
+ "message-s": #{$message-s},
+ "message-background-l": #{$message-background-l},
+ "message-border-l": #{$message-border-l},
+ "message-border-style": #{$message-border-style},
+ "message-border-width": #{$message-border-width},
+ "message-color-l": #{$message-color-l},
+ "message-header-background-l": #{$message-header-background-l},
+ "message-header-color-l": #{$message-header-color-l},
+ )
+ );
+}
+
+.#{iv.$class-prefix}message {
+ @extend %block;
+ border-radius: cv.getVar("message-radius");
+ color: hsl(
+ #{cv.getVar("message-h")},
+ #{cv.getVar("message-s")},
+ #{cv.getVar("message-color-l")}
+ );
+ font-size: cv.getVar("size-normal");
+
+ strong {
+ color: currentColor;
+ }
+
+ a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}tag):not(
+ .#{iv.$class-prefix}dropdown-item
+ ) {
+ color: currentColor;
+ text-decoration: underline;
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ font-size: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ font-size: cv.getVar("size-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ font-size: cv.getVar("size-large");
+ }
+
+ // Colors
+ @each $name, $components in $message-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-vars(
+ (
+ "message-h": #{cv.getVar($name, "", "-h")},
+ "message-s": #{cv.getVar($name, "", "-s")},
+ "message-border-l":
+ calc(
+ #{cv.getVar($name, "", "-l")} + #{cv.getVar(
+ "message-border-l-delta"
+ )}
+ ),
+ "message-color-l": #{cv.getVar($name, "", "-on-scheme-l")},
+ "message-header-background-l": #{cv.getVar($name, "", "-l")},
+ "message-header-color-l": #{cv.getVar($name, "", "-invert-l")},
+ )
+ );
+ }
+ }
+}
+
+.#{iv.$class-prefix}message-header {
+ align-items: center;
+ background-color: hsl(
+ #{cv.getVar("message-h")},
+ #{cv.getVar("message-s")},
+ #{cv.getVar("message-header-background-l")}
+ );
+ border-start-start-radius: cv.getVar("message-header-radius");
+ border-start-end-radius: cv.getVar("message-header-radius");
+ color: hsl(
+ #{cv.getVar("message-h")},
+ #{cv.getVar("message-s")},
+ #{cv.getVar("message-header-color-l")}
+ );
+ display: flex;
+ font-weight: cv.getVar("message-header-weight");
+ justify-content: space-between;
+ line-height: 1.25;
+ padding: cv.getVar("message-header-padding");
+ position: relative;
+
+ .#{iv.$class-prefix}delete {
+ flex-grow: 0;
+ flex-shrink: 0;
+ margin-inline-start: 0.75em;
+ }
+
+ & + .#{iv.$class-prefix}message-body {
+ border-width: cv.getVar("message-header-body-border-width");
+ border-start-start-radius: 0;
+ border-start-end-radius: 0;
+ }
+}
+
+.#{iv.$class-prefix}message-body {
+ background-color: hsl(
+ #{cv.getVar("message-h")},
+ #{cv.getVar("message-s")},
+ #{cv.getVar("message-background-l")}
+ );
+ border-inline-start-color: hsl(
+ #{cv.getVar("message-h")},
+ #{cv.getVar("message-s")},
+ #{cv.getVar("message-border-l")}
+ );
+ border-inline-start-style: #{cv.getVar("message-border-style")};
+ border-inline-start-width: #{cv.getVar("message-border-width")};
+ border-radius: cv.getVar("message-body-radius");
+ padding: cv.getVar("message-body-padding");
+
+ code,
+ pre {
+ background-color: hsl(
+ #{cv.getVar("message-h")},
+ #{cv.getVar("message-s")},
+ #{cv.getVar("message-header-color-l")}
+ );
+ color: hsl(
+ #{cv.getVar("message-h")},
+ #{cv.getVar("message-s")},
+ #{cv.getVar("message-header-background-l")}
+ );
+ }
+
+ pre code {
+ background-color: cv.getVar("message-body-pre-code-background-color");
+ }
+}
diff --git a/style/bulma/sass/components/modal.scss b/style/bulma/sass/components/modal.scss
new file mode 100644
index 0000000..0a0aa59
--- /dev/null
+++ b/style/bulma/sass/components/modal.scss
@@ -0,0 +1,164 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$modal-z: 40 !default;
+
+$modal-background-background-color: hsla(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-invert-l")},
+ 0.86
+) !default;
+
+$modal-content-width: 40rem !default;
+$modal-content-margin-mobile: 1.25rem !default;
+$modal-content-spacing-mobile: 10rem !default;
+$modal-content-spacing-tablet: 2.5rem !default;
+
+$modal-close-dimensions: 2.5rem !default;
+$modal-close-right: 1.25rem !default;
+$modal-close-top: 1.25rem !default;
+
+$modal-card-spacing: 2.5rem !default;
+
+$modal-card-head-background-color: cv.getVar("scheme-main") !default;
+$modal-card-head-padding: 2rem !default;
+$modal-card-head-radius: cv.getVar("radius-large") !default;
+
+$modal-card-title-color: cv.getVar("text-strong") !default;
+$modal-card-title-line-height: 1 !default;
+$modal-card-title-size: cv.getVar("size-4") !default;
+
+$modal-card-foot-background-color: cv.getVar("scheme-main-bis") !default;
+$modal-card-foot-radius: cv.getVar("radius-large") !default;
+
+$modal-card-body-background-color: cv.getVar("scheme-main") !default;
+$modal-card-body-padding: 2rem !default;
+
+$modal-breakpoint: iv.$tablet !default;
+
+.#{iv.$class-prefix}modal {
+ @include cv.register-vars(
+ (
+ "modal-z": #{$modal-z},
+ "modal-background-background-color": #{$modal-background-background-color},
+ "modal-content-width": #{$modal-content-width},
+ "modal-content-margin-mobile": #{$modal-content-margin-mobile},
+ "modal-content-spacing-mobile": #{$modal-content-spacing-mobile},
+ "modal-content-spacing-tablet": #{$modal-content-spacing-tablet},
+ "modal-close-dimensions": #{$modal-close-dimensions},
+ "modal-close-right": #{$modal-close-right},
+ "modal-close-top": #{$modal-close-top},
+ "modal-card-spacing": #{$modal-card-spacing},
+ "modal-card-head-background-color": #{$modal-card-head-background-color},
+ "modal-card-head-padding": #{$modal-card-head-padding},
+ "modal-card-head-radius": #{$modal-card-head-radius},
+ "modal-card-title-color": #{$modal-card-title-color},
+ "modal-card-title-line-height": #{$modal-card-title-line-height},
+ "modal-card-title-size": #{$modal-card-title-size},
+ "modal-card-foot-background-color": #{$modal-card-foot-background-color},
+ "modal-card-foot-radius": #{$modal-card-foot-radius},
+ "modal-card-body-background-color": #{$modal-card-body-background-color},
+ "modal-card-body-padding": #{$modal-card-body-padding},
+ )
+ );
+}
+
+.#{iv.$class-prefix}modal {
+ @extend %overlay;
+
+ align-items: center;
+ display: none;
+ flex-direction: column;
+ justify-content: center;
+ overflow: hidden;
+ position: fixed;
+ z-index: cv.getVar("modal-z");
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-active {
+ display: flex;
+ }
+}
+
+.#{iv.$class-prefix}modal-background {
+ @extend %overlay;
+ background-color: cv.getVar("modal-background-background-color");
+}
+
+.#{iv.$class-prefix}modal-content,
+.#{iv.$class-prefix}modal-card {
+ margin: 0 cv.getVar("modal-content-margin-mobile");
+ max-height: calc(100vh - #{cv.getVar("modal-content-spacing-mobile")});
+ overflow: auto;
+ position: relative;
+ width: 100%;
+
+ // Responsiveness
+ @include mx.from($modal-breakpoint) {
+ margin: 0 auto;
+ max-height: calc(100vh - #{cv.getVar("modal-content-spacing-tablet")});
+ width: cv.getVar("modal-content-width");
+ }
+}
+
+.#{iv.$class-prefix}modal-close {
+ @extend %delete;
+ background: none;
+ height: cv.getVar("modal-close-dimensions");
+ inset-inline-end: cv.getVar("modal-close-right");
+ position: fixed;
+ top: cv.getVar("modal-close-top");
+ width: cv.getVar("modal-close-dimensions");
+}
+
+.#{iv.$class-prefix}modal-card {
+ display: flex;
+ flex-direction: column;
+ max-height: calc(100vh - #{cv.getVar("modal-card-spacing")});
+ overflow: hidden;
+ overflow-y: visible;
+}
+
+.#{iv.$class-prefix}modal-card-head,
+.#{iv.$class-prefix}modal-card-foot {
+ align-items: center;
+ display: flex;
+ flex-shrink: 0;
+ justify-content: flex-start;
+ padding: cv.getVar("modal-card-head-padding");
+ position: relative;
+}
+
+.#{iv.$class-prefix}modal-card-head {
+ background-color: cv.getVar("modal-card-head-background-color");
+ border-start-start-radius: cv.getVar("modal-card-head-radius");
+ border-start-end-radius: cv.getVar("modal-card-head-radius");
+ box-shadow: cv.getVar("shadow");
+}
+
+.#{iv.$class-prefix}modal-card-title {
+ color: cv.getVar("modal-card-title-color");
+ flex-grow: 1;
+ flex-shrink: 0;
+ font-size: cv.getVar("modal-card-title-size");
+ line-height: cv.getVar("modal-card-title-line-height");
+}
+
+.#{iv.$class-prefix}modal-card-foot {
+ background-color: cv.getVar("modal-card-foot-background-color");
+ border-end-start-radius: cv.getVar("modal-card-foot-radius");
+ border-end-end-radius: cv.getVar("modal-card-foot-radius");
+}
+
+.#{iv.$class-prefix}modal-card-body {
+ @include mx.overflow-touch;
+ background-color: cv.getVar("modal-card-body-background-color");
+ flex-grow: 1;
+ flex-shrink: 1;
+ overflow: auto;
+ padding: cv.getVar("modal-card-body-padding");
+}
diff --git a/style/bulma/sass/components/navbar.scss b/style/bulma/sass/components/navbar.scss
new file mode 100644
index 0000000..c755aff
--- /dev/null
+++ b/style/bulma/sass/components/navbar.scss
@@ -0,0 +1,788 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$navbar-h: cv.getVar("scheme-h");
+$navbar-s: cv.getVar("scheme-s");
+$navbar-l: cv.getVar("scheme-main-l");
+$navbar-background-color: cv.getVar("scheme-main") !default;
+$navbar-box-shadow-size: 0 0.125em 0 0 !default;
+$navbar-box-shadow-color: cv.getVar("background") !default;
+$navbar-height: 3.25rem !default;
+$navbar-padding-vertical: 1rem !default;
+$navbar-padding-horizontal: 2rem !default;
+$navbar-z: 30 !default;
+$navbar-fixed-z: 30 !default;
+
+$navbar-item-background-a: 0;
+$navbar-item-background-l: cv.getVar("scheme-main-l");
+$navbar-item-background-l-delta: 0%;
+$navbar-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
+$navbar-item-active-background-l-delta: cv.getVar("active-background-l-delta");
+$navbar-item-color-l: cv.getVar("text-l");
+$navbar-item-selected-h: cv.getVar("link-h");
+$navbar-item-selected-s: cv.getVar("link-s");
+$navbar-item-selected-l: cv.getVar("link-l");
+$navbar-item-selected-background-l: cv.getVar("link-l");
+$navbar-item-selected-color-l: cv.getVar("link-invert-l");
+$navbar-item-img-max-height: 1.75rem !default;
+
+$navbar-dropdown-item-h: cv.getVar("scheme-h");
+$navbar-dropdown-item-s: cv.getVar("scheme-s");
+$navbar-dropdown-item-l: cv.getVar("scheme-main-l");
+$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l");
+$navbar-dropdown-item-color-l: cv.getVar("text-l");
+
+$navbar-burger-color: cv.getVar("navbar-item-color") !default;
+
+$navbar-tab-hover-background-color: transparent !default;
+$navbar-tab-hover-border-bottom-color: cv.getVar("link") !default;
+$navbar-tab-active-color: cv.getVar("link") !default;
+$navbar-tab-active-background-color: transparent !default;
+$navbar-tab-active-border-bottom-color: cv.getVar("link") !default;
+$navbar-tab-active-border-bottom-style: solid !default;
+$navbar-tab-active-border-bottom-width: 0.1875em !default;
+
+$navbar-dropdown-background-color: cv.getVar("scheme-main") !default;
+$navbar-dropdown-border-l: cv.getVar("border-l") !default;
+$navbar-dropdown-border-color: hsl(
+ cv.getVar("navbar-h"),
+ cv.getVar("navbar-s"),
+ cv.getVar("navbar-dropdown-border-l")
+) !default;
+$navbar-dropdown-border-style: solid !default;
+$navbar-dropdown-border-width: 0.125em !default;
+$navbar-dropdown-offset: -0.25em !default;
+$navbar-dropdown-arrow: cv.getVar("link") !default;
+$navbar-dropdown-radius: cv.getVar("radius-large") !default;
+$navbar-dropdown-z: 20 !default;
+
+$navbar-dropdown-boxed-radius: cv.getVar("radius-large") !default;
+$navbar-dropdown-boxed-shadow:
+ 0 0.5em 0.5em
+ hsla(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-invert-l")},
+ 0.1
+ ),
+ 0 0 0 1px
+ hsla(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-invert-l")},
+ 0.1
+ ) !default;
+
+$navbar-divider-background-l: cv.getVar("background-l") !default;
+$navbar-divider-height: 0.125em !default;
+
+$navbar-bottom-box-shadow-size: 0 -0.125em 0 0 !default;
+
+$navbar-breakpoint: iv.$desktop !default;
+
+$navbar-colors: dv.$colors !default;
+
+@mixin navbar-fixed {
+ left: 0;
+ position: fixed;
+ right: 0;
+ z-index: cv.getVar("navbar-fixed-z");
+}
+
+:root {
+ @include cv.register-vars(
+ (
+ "navbar-height": #{$navbar-height},
+ )
+ );
+}
+
+.#{iv.$class-prefix}navbar {
+ @include cv.register-vars(
+ (
+ "navbar-h": #{$navbar-h},
+ "navbar-s": #{$navbar-s},
+ "navbar-l": #{$navbar-l},
+ "navbar-background-color": #{$navbar-background-color},
+ "navbar-box-shadow-size": #{$navbar-box-shadow-size},
+ "navbar-box-shadow-color": #{$navbar-box-shadow-color},
+ "navbar-padding-vertical": #{$navbar-padding-vertical},
+ "navbar-padding-horizontal": #{$navbar-padding-horizontal},
+ "navbar-z": #{$navbar-z},
+ "navbar-fixed-z": #{$navbar-fixed-z},
+ "navbar-item-background-a": #{$navbar-item-background-a},
+ "navbar-item-background-l": #{$navbar-item-background-l},
+ "navbar-item-background-l-delta": #{$navbar-item-background-l-delta},
+ "navbar-item-hover-background-l-delta": #{$navbar-item-hover-background-l-delta},
+ "navbar-item-active-background-l-delta": #{$navbar-item-active-background-l-delta},
+ "navbar-item-color-l": #{$navbar-item-color-l},
+ "navbar-item-selected-h": #{$navbar-item-selected-h},
+ "navbar-item-selected-s": #{$navbar-item-selected-s},
+ "navbar-item-selected-l": #{$navbar-item-selected-l},
+ "navbar-item-selected-background-l": #{$navbar-item-selected-background-l},
+ "navbar-item-selected-color-l": #{$navbar-item-selected-color-l},
+ "navbar-item-img-max-height": #{$navbar-item-img-max-height},
+ "navbar-burger-color": #{$navbar-burger-color},
+ "navbar-tab-hover-background-color": #{$navbar-tab-hover-background-color},
+ "navbar-tab-hover-border-bottom-color": #{$navbar-tab-hover-border-bottom-color},
+ "navbar-tab-active-color": #{$navbar-tab-active-color},
+ "navbar-tab-active-background-color": #{$navbar-tab-active-background-color},
+ "navbar-tab-active-border-bottom-color": #{$navbar-tab-active-border-bottom-color},
+ "navbar-tab-active-border-bottom-style": #{$navbar-tab-active-border-bottom-style},
+ "navbar-tab-active-border-bottom-width": #{$navbar-tab-active-border-bottom-width},
+ "navbar-dropdown-background-color": #{$navbar-dropdown-background-color},
+ "navbar-dropdown-border-l": #{$navbar-dropdown-border-l},
+ "navbar-dropdown-border-color": #{$navbar-dropdown-border-color},
+ "navbar-dropdown-border-style": #{$navbar-dropdown-border-style},
+ "navbar-dropdown-border-width": #{$navbar-dropdown-border-width},
+ "navbar-dropdown-offset": #{$navbar-dropdown-offset},
+ "navbar-dropdown-arrow": #{$navbar-dropdown-arrow},
+ "navbar-dropdown-radius": #{$navbar-dropdown-radius},
+ "navbar-dropdown-z": #{$navbar-dropdown-z},
+ "navbar-dropdown-boxed-radius": #{$navbar-dropdown-boxed-radius},
+ "navbar-dropdown-boxed-shadow": #{$navbar-dropdown-boxed-shadow},
+ "navbar-dropdown-item-h": #{$navbar-dropdown-item-h},
+ "navbar-dropdown-item-s": #{$navbar-dropdown-item-s},
+ "navbar-dropdown-item-l": #{$navbar-dropdown-item-l},
+ "navbar-dropdown-item-background-l": #{$navbar-dropdown-item-background-l},
+ "navbar-dropdown-item-color-l": #{$navbar-dropdown-item-color-l},
+ "navbar-divider-background-l": #{$navbar-divider-background-l},
+ "navbar-divider-height": #{$navbar-divider-height},
+ "navbar-bottom-box-shadow-size": #{$navbar-bottom-box-shadow-size},
+ )
+ );
+}
+
+.#{iv.$class-prefix}navbar {
+ background-color: cv.getVar("navbar-background-color");
+ min-height: cv.getVar("navbar-height");
+ position: relative;
+ z-index: cv.getVar("navbar-z");
+
+ @each $name, $pair in $navbar-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-vars(
+ (
+ "navbar-h": #{cv.getVar($name, "", "-h")},
+ "navbar-s": #{cv.getVar($name, "", "-s")},
+ "navbar-l": #{cv.getVar($name, "", "-l")},
+ "burger-h": #{cv.getVar($name, "", "-h")},
+ "burger-s": #{cv.getVar($name, "", "-s")},
+ "burger-l": #{cv.getVar($name, "", "-invert-l")},
+ "navbar-background-color": #{cv.getVar($name)},
+ "navbar-item-background-l": #{cv.getVar($name, "", "-l")},
+ "navbar-item-color-l": #{cv.getVar($name, "", "-invert-l")},
+ "navbar-item-selected-h": #{cv.getVar($name, "", "-h")},
+ "navbar-item-selected-s": #{cv.getVar($name, "", "-s")},
+ "navbar-item-selected-l": #{cv.getVar($name, "", "-l")},
+ "navbar-item-selected-background-l": #{cv.getVar($name, "", "-l")},
+ "navbar-item-selected-color-l": #{cv.getVar($name, "", "-invert-l")},
+ "navbar-dropdown-arrow": #{cv.getVar($name, "", "-invert-l")},
+ "navbar-dropdown-background-color":
+ hsl(
+ #{cv.getVar($name, "", "-h")},
+ #{cv.getVar($name, "", "-s")},
+ #{cv.getVar("navbar-dropdown-item-background-l")}
+ ),
+ "navbar-dropdown-item-h": #{cv.getVar($name, "", "-h")},
+ "navbar-dropdown-item-s": #{cv.getVar($name, "", "-s")},
+ )
+ );
+ }
+ }
+
+ & > .#{iv.$class-prefix}container {
+ align-items: stretch;
+ display: flex;
+ min-height: cv.getVar("navbar-height");
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}has-shadow {
+ box-shadow: cv.getVar("navbar-box-shadow-size")
+ cv.getVar("navbar-box-shadow-color");
+ }
+
+ &.#{iv.$class-prefix}is-fixed-bottom,
+ &.#{iv.$class-prefix}is-fixed-top {
+ @include navbar-fixed;
+ }
+
+ &.#{iv.$class-prefix}is-fixed-bottom {
+ bottom: 0;
+
+ &.#{iv.$class-prefix}has-shadow {
+ box-shadow: cv.getVar("navbar-bottom-box-shadow-size")
+ cv.getVar("navbar-box-shadow-color");
+ }
+ }
+
+ &.#{iv.$class-prefix}is-fixed-top {
+ top: 0;
+ }
+}
+
+html,
+body {
+ &.#{iv.$class-prefix}has-navbar-fixed-top {
+ padding-top: cv.getVar("navbar-height");
+ }
+
+ &.#{iv.$class-prefix}has-navbar-fixed-bottom {
+ padding-bottom: cv.getVar("navbar-height");
+ }
+}
+
+.#{iv.$class-prefix}navbar-brand,
+.#{iv.$class-prefix}navbar-tabs {
+ align-items: stretch;
+ display: flex;
+ flex-shrink: 0;
+ min-height: cv.getVar("navbar-height");
+}
+
+.#{iv.$class-prefix}navbar-tabs {
+ @include mx.overflow-touch;
+ max-width: 100vw;
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+.#{iv.$class-prefix}navbar-burger {
+ @extend %reset;
+ @include mx.burger(2.5rem);
+ align-self: center;
+ margin-inline-start: auto;
+ margin-inline-end: 0.375rem;
+}
+
+.#{iv.$class-prefix}navbar-menu {
+ display: none;
+}
+
+.#{iv.$class-prefix}navbar-item,
+.#{iv.$class-prefix}navbar-link {
+ color: hsl(
+ #{cv.getVar("navbar-h")},
+ #{cv.getVar("navbar-s")},
+ #{cv.getVar("navbar-item-color-l")}
+ );
+ display: block;
+ line-height: 1.5;
+ padding: 0.5rem 0.75rem;
+ position: relative;
+
+ .#{iv.$class-prefix}icon {
+ &:only-child {
+ margin-left: -0.25rem;
+ margin-right: -0.25rem;
+ }
+ }
+}
+
+a.#{iv.$class-prefix}navbar-item,
+.#{iv.$class-prefix}navbar-link {
+ background-color: hsla(
+ #{cv.getVar("navbar-h")},
+ #{cv.getVar("navbar-s")},
+ calc(
+ #{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
+ "navbar-item-background-l-delta"
+ )}
+ ),
+ #{cv.getVar("navbar-item-background-a")}
+ );
+ cursor: pointer;
+
+ &:focus,
+ &:focus-within,
+ &:hover {
+ @include cv.register-vars(
+ (
+ "navbar-item-background-l-delta": #{cv.getVar(
+ "navbar-item-hover-background-l-delta"
+ )},
+ "navbar-item-background-a": 1,
+ )
+ );
+ }
+
+ &:active {
+ @include cv.register-vars(
+ (
+ "navbar-item-background-l-delta": #{cv.getVar(
+ "navbar-item-active-background-l-delta"
+ )},
+ "navbar-item-background-a": 1,
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-active,
+ &.#{iv.$class-prefix}is-selected {
+ @include cv.register-vars(
+ (
+ "navbar-h": #{cv.getVar("navbar-item-selected-h")},
+ "navbar-s": #{cv.getVar("navbar-item-selected-s")},
+ "navbar-l": #{cv.getVar("navbar-item-selected-l")},
+ "navbar-item-background-l": #{cv.getVar(
+ "navbar-item-selected-background-l"
+ )},
+ "navbar-item-background-a": 1,
+ "navbar-item-color-l": #{cv.getVar("navbar-item-selected-color-l")},
+ )
+ );
+ }
+}
+
+.#{iv.$class-prefix}navbar-item {
+ flex-grow: 0;
+ flex-shrink: 0;
+
+ img,
+ svg {
+ max-height: cv.getVar("navbar-item-img-max-height");
+ }
+
+ &.#{iv.$class-prefix}has-dropdown {
+ padding: 0;
+ }
+
+ &.#{iv.$class-prefix}is-expanded {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+
+ &.#{iv.$class-prefix}is-tab {
+ border-bottom: 1px solid transparent;
+ min-height: cv.getVar("navbar-height");
+ padding-bottom: calc(0.5rem - 1px);
+
+ &:focus,
+ &:hover {
+ background-color: cv.getVar("navbar-tab-hover-background-color");
+ border-bottom-color: cv.getVar("navbar-tab-hover-border-bottom-color");
+ }
+
+ &.#{iv.$class-prefix}is-active {
+ background-color: cv.getVar("navbar-tab-active-background-color");
+ border-bottom-color: cv.getVar("navbar-tab-active-border-bottom-color");
+ border-bottom-style: cv.getVar("navbar-tab-active-border-bottom-style");
+ border-bottom-width: cv.getVar("navbar-tab-active-border-bottom-width");
+ color: cv.getVar("navbar-tab-active-color");
+ padding-bottom: calc(
+ 0.5rem - #{cv.getVar("navbar-tab-active-border-bottom-width")}
+ );
+ }
+ }
+}
+
+.#{iv.$class-prefix}navbar-content {
+ flex-grow: 1;
+ flex-shrink: 1;
+}
+
+.#{iv.$class-prefix}navbar-link:not(.#{iv.$class-prefix}is-arrowless) {
+ padding-inline-end: 2.5em;
+
+ &::after {
+ @extend %arrow;
+ border-color: cv.getVar("navbar-dropdown-arrow");
+ margin-top: -0.375em;
+ inset-inline-end: 1.125em;
+ }
+}
+
+.#{iv.$class-prefix}navbar-dropdown {
+ font-size: 0.875rem;
+ padding-bottom: 0.75rem;
+ padding-top: 0.5rem;
+
+ .#{iv.$class-prefix}navbar-item {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+
+ &:not(.is-active, .is-selected) {
+ background-color: hsl(
+ #{cv.getVar("navbar-dropdown-item-h")},
+ #{cv.getVar("navbar-dropdown-item-s")},
+ calc(
+ #{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar(
+ "navbar-item-background-l-delta"
+ )}
+ )
+ );
+ color: hsl(
+ #{cv.getVar("navbar-dropdown-item-h")},
+ #{cv.getVar("navbar-dropdown-item-s")},
+ #{cv.getVar("navbar-dropdown-item-color-l")}
+ );
+ }
+ }
+}
+
+.#{iv.$class-prefix}navbar-divider {
+ background-color: hsl(
+ #{cv.getVar("navbar-h")},
+ #{cv.getVar("navbar-s")},
+ #{cv.getVar("navbar-divider-background-l")}
+ );
+ border: none;
+ display: none;
+ height: cv.getVar("navbar-divider-height");
+ margin: 0.5rem 0;
+}
+
+@include mx.until($navbar-breakpoint) {
+ .#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container {
+ display: block;
+ }
+
+ .#{iv.$class-prefix}navbar-brand,
+ .#{iv.$class-prefix}navbar-tabs {
+ .#{iv.$class-prefix}navbar-item {
+ align-items: center;
+ display: flex;
+ }
+ }
+
+ .#{iv.$class-prefix}navbar-link {
+ &::after {
+ display: none;
+ }
+ }
+
+ .#{iv.$class-prefix}navbar-menu {
+ background-color: cv.getVar("navbar-background-color");
+ box-shadow: 0 0.5em 1em
+ hsla(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-invert-l")},
+ 0.1
+ );
+ padding: 0.5rem 0;
+
+ &.#{iv.$class-prefix}is-active {
+ display: block;
+ }
+ }
+
+ // Fixed navbar
+ .#{iv.$class-prefix}navbar {
+ &.#{iv.$class-prefix}is-fixed-bottom-touch,
+ &.#{iv.$class-prefix}is-fixed-top-touch {
+ @include navbar-fixed;
+ }
+
+ &.#{iv.$class-prefix}is-fixed-bottom-touch {
+ bottom: 0;
+
+ &.#{iv.$class-prefix}has-shadow {
+ box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
+ "scheme-s"
+ )}, #{cv.getVar("scheme-invert-l")}, 0.1);
+ }
+ }
+
+ &.#{iv.$class-prefix}is-fixed-top-touch {
+ top: 0;
+ }
+
+ &.#{iv.$class-prefix}is-fixed-top,
+ &.#{iv.$class-prefix}is-fixed-top-touch {
+ .#{iv.$class-prefix}navbar-menu {
+ @include mx.overflow-touch;
+ max-height: calc(100vh - #{cv.getVar("navbar-height")});
+ overflow: auto;
+ }
+ }
+ }
+
+ html,
+ body {
+ &.#{iv.$class-prefix}has-navbar-fixed-top-touch {
+ padding-top: cv.getVar("navbar-height");
+ }
+
+ &.#{iv.$class-prefix}has-navbar-fixed-bottom-touch {
+ padding-bottom: cv.getVar("navbar-height");
+ }
+ }
+}
+
+@include mx.from($navbar-breakpoint) {
+ .#{iv.$class-prefix}navbar,
+ .#{iv.$class-prefix}navbar-menu,
+ .#{iv.$class-prefix}navbar-start,
+ .#{iv.$class-prefix}navbar-end {
+ align-items: stretch;
+ display: flex;
+ }
+
+ .#{iv.$class-prefix}navbar {
+ min-height: cv.getVar("navbar-height");
+
+ &.#{iv.$class-prefix}is-spaced {
+ padding: cv.getVar("navbar-padding-vertical")
+ cv.getVar("navbar-padding-horizontal");
+
+ .#{iv.$class-prefix}navbar-start,
+ .#{iv.$class-prefix}navbar-end {
+ align-items: center;
+ }
+
+ a.#{iv.$class-prefix}navbar-item,
+ .#{iv.$class-prefix}navbar-link {
+ border-radius: cv.getVar("radius");
+ }
+ }
+
+ &.#{iv.$class-prefix}is-transparent {
+ @include cv.register-vars(
+ (
+ "navbar-item-background-a": 0,
+ )
+ );
+
+ .#{iv.$class-prefix}navbar-dropdown {
+ a.#{iv.$class-prefix}navbar-item {
+ background-color: hsl(
+ #{cv.getVar("navbar-h")},
+ #{cv.getVar("navbar-s")},
+ calc(
+ #{cv.getVar("navbar-item-background-l")} + #{cv.getVar(
+ "navbar-item-background-l-delta"
+ )}
+ )
+ );
+
+ &.#{iv.$class-prefix}is-active,
+ &.#{iv.$class-prefix}is-selected {
+ @include cv.register-vars(
+ (
+ "navbar-h": #{cv.getVar("navbar-item-selected-h")},
+ "navbar-s": #{cv.getVar("navbar-item-selected-s")},
+ "navbar-l": #{cv.getVar("navbar-item-selected-l")},
+ "navbar-item-background-l": #{cv.getVar(
+ "navbar-item-selected-background-l"
+ )},
+ "navbar-item-color-l": #{cv.getVar(
+ "navbar-item-selected-color-l"
+ )},
+ )
+ );
+ }
+ }
+ }
+ }
+ }
+
+ .#{iv.$class-prefix}navbar-burger {
+ display: none;
+ }
+
+ .#{iv.$class-prefix}navbar-item,
+ .#{iv.$class-prefix}navbar-link {
+ align-items: center;
+ display: flex;
+ }
+
+ .#{iv.$class-prefix}navbar-item {
+ &.#{iv.$class-prefix}has-dropdown {
+ align-items: stretch;
+ }
+
+ &.#{iv.$class-prefix}has-dropdown-up {
+ .#{iv.$class-prefix}navbar-link::after {
+ transform: rotate(135deg) translate(0.25em, -0.25em);
+ }
+
+ .#{iv.$class-prefix}navbar-dropdown {
+ border-bottom-color: cv.getVar("navbar-dropdown-border-color");
+ border-bottom-style: cv.getVar("navbar-dropdown-border-style");
+ border-bottom-width: cv.getVar("navbar-dropdown-border-width");
+ border-radius: cv.getVar("navbar-dropdown-radius")
+ cv.getVar("navbar-dropdown-radius") 0 0;
+ border-top: none;
+ bottom: 100%;
+ box-shadow: 0 -0.5em 0.5em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
+ "scheme-s"
+ )}, #{cv.getVar("scheme-invert-l")}, 0.1);
+ top: auto;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-active,
+ &.#{iv.$class-prefix}is-hoverable:focus,
+ &.#{iv.$class-prefix}is-hoverable:focus-within,
+ &.#{iv.$class-prefix}is-hoverable:hover {
+ .#{iv.$class-prefix}navbar-dropdown {
+ display: block;
+
+ .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &,
+ &.#{iv.$class-prefix}is-boxed {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(0);
+ }
+ }
+ }
+ }
+
+ .#{iv.$class-prefix}navbar-menu {
+ flex-grow: 1;
+ flex-shrink: 0;
+ }
+
+ .#{iv.$class-prefix}navbar-start {
+ justify-content: flex-start;
+ margin-inline-end: auto;
+ }
+
+ .#{iv.$class-prefix}navbar-end {
+ justify-content: flex-end;
+ margin-inline-start: auto;
+ }
+
+ .#{iv.$class-prefix}navbar-dropdown {
+ background-color: cv.getVar("navbar-dropdown-background-color");
+ border-bottom-left-radius: cv.getVar("navbar-dropdown-radius");
+ border-bottom-right-radius: cv.getVar("navbar-dropdown-radius");
+ border-top-color: cv.getVar("navbar-dropdown-border-color");
+ border-top-style: cv.getVar("navbar-dropdown-border-style");
+ border-top-width: cv.getVar("navbar-dropdown-border-width");
+ box-shadow: 0 0.5em 0.5em
+ hsla(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-invert-l")},
+ 0.1
+ );
+ display: none;
+ font-size: 0.875rem;
+ inset-inline-start: 0;
+ min-width: 100%;
+ position: absolute;
+ top: 100%;
+ z-index: cv.getVar("navbar-dropdown-z");
+
+ .#{iv.$class-prefix}navbar-item {
+ padding: 0.375rem 1rem;
+ white-space: nowrap;
+ }
+
+ a.#{iv.$class-prefix}navbar-item {
+ padding-inline-end: 3rem;
+
+ &:not(.is-active, .is-selected) {
+ background-color: hsl(
+ #{cv.getVar("navbar-dropdown-item-h")},
+ #{cv.getVar("navbar-dropdown-item-s")},
+ calc(
+ #{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar(
+ "navbar-item-background-l-delta"
+ )}
+ )
+ );
+ color: hsl(
+ #{cv.getVar("navbar-dropdown-item-h")},
+ #{cv.getVar("navbar-dropdown-item-s")},
+ #{cv.getVar("navbar-dropdown-item-color-l")}
+ );
+ }
+ }
+
+ .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &,
+ &.#{iv.$class-prefix}is-boxed {
+ border-radius: cv.getVar("navbar-dropdown-boxed-radius");
+ border-top: none;
+ box-shadow: cv.getVar("navbar-dropdown-boxed-shadow");
+ display: block;
+ opacity: 0;
+ pointer-events: none;
+ top: calc(100% + (#{cv.getVar("navbar-dropdown-offset")}));
+ transform: translateY(-5px);
+ transition-duration: cv.getVar("duration");
+ transition-property: opacity, transform;
+ }
+
+ &.#{iv.$class-prefix}is-right {
+ left: auto;
+ right: 0;
+ }
+ }
+
+ .#{iv.$class-prefix}navbar-divider {
+ display: block;
+ }
+
+ .#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container,
+ .#{iv.$class-prefix}container > .#{iv.$class-prefix}navbar {
+ .#{iv.$class-prefix}navbar-brand {
+ margin-inline-start: -0.75rem;
+ }
+
+ .#{iv.$class-prefix}navbar-menu {
+ margin-inline-end: -0.75rem;
+ }
+ }
+
+ // Fixed navbar
+ .#{iv.$class-prefix}navbar {
+ &.#{iv.$class-prefix}is-fixed-bottom-desktop,
+ &.#{iv.$class-prefix}is-fixed-top-desktop {
+ @include navbar-fixed;
+ }
+
+ &.#{iv.$class-prefix}is-fixed-bottom-desktop {
+ bottom: 0;
+
+ &.#{iv.$class-prefix}has-shadow {
+ box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar(
+ "scheme-s"
+ )}, #{cv.getVar("scheme-invert-l")}, 0.1);
+ }
+ }
+
+ &.#{iv.$class-prefix}is-fixed-top-desktop {
+ top: 0;
+ }
+ }
+
+ html,
+ body {
+ &.#{iv.$class-prefix}has-navbar-fixed-top-desktop {
+ padding-top: cv.getVar("navbar-height");
+ }
+
+ &.#{iv.$class-prefix}has-navbar-fixed-bottom-desktop {
+ padding-bottom: cv.getVar("navbar-height");
+ }
+
+ &.#{iv.$class-prefix}has-spaced-navbar-fixed-top {
+ padding-top: calc(
+ #{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} *
+ 2
+ );
+ }
+
+ &.#{iv.$class-prefix}has-spaced-navbar-fixed-bottom {
+ padding-bottom: calc(
+ #{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} *
+ 2
+ );
+ }
+ }
+}
+
+// Combination
+
+.#{iv.$class-prefix}hero {
+ &.#{iv.$class-prefix}is-fullheight-with-navbar {
+ min-height: calc(100vh - #{cv.getVar("navbar-height")});
+ }
+}
diff --git a/style/bulma/sass/components/pagination.scss b/style/bulma/sass/components/pagination.scss
new file mode 100644
index 0000000..0634653
--- /dev/null
+++ b/style/bulma/sass/components/pagination.scss
@@ -0,0 +1,379 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$pagination-margin: -0.25rem !default;
+$pagination-min-width: cv.getVar("control-height") !default;
+
+$pagination-item-h: cv.getVar("scheme-h");
+$pagination-item-s: cv.getVar("scheme-s");
+$pagination-item-l: cv.getVar("scheme-main-l");
+$pagination-item-background-l-delta: 0%;
+$pagination-item-hover-background-l-delta: cv.getVar(
+ "hover-background-l-delta"
+);
+$pagination-item-active-background-l-delta: cv.getVar(
+ "active-background-l-delta"
+);
+$pagination-item-border-l: cv.getVar("border-l");
+$pagination-item-border-l-delta: 0%;
+$pagination-item-border-style: solid !default;
+$pagination-item-border-width: cv.getVar("control-border-width") !default;
+$pagination-item-hover-border-l-delta: cv.getVar("hover-border-l-delta");
+$pagination-item-active-border-l-delta: cv.getVar("active-border-l-delta");
+$pagination-item-focus-border-l-delta: cv.getVar("focus-border-l-delta");
+$pagination-item-color-l: cv.getVar("text-strong-l");
+$pagination-item-font-size: 1em !default;
+$pagination-item-margin: 0.25rem !default;
+$pagination-item-padding-left: 0.5em !default;
+$pagination-item-padding-right: 0.5em !default;
+$pagination-item-outer-shadow-h: 0;
+$pagination-item-outer-shadow-s: 0%;
+$pagination-item-outer-shadow-l: 20%;
+$pagination-item-outer-shadow-a: 0.05;
+
+$pagination-selected-item-h: cv.getVar("link-h");
+$pagination-selected-item-s: cv.getVar("link-s");
+$pagination-selected-item-l: cv.getVar("link-l");
+$pagination-selected-item-background-l: cv.getVar("link-l");
+$pagination-selected-item-border-l: cv.getVar("link-l");
+$pagination-selected-item-color-l: cv.getVar("link-invert-l");
+
+$pagination-nav-padding-left: 0.75em !default;
+$pagination-nav-padding-right: 0.75em !default;
+
+$pagination-disabled-color: cv.getVar("text-weak") !default;
+$pagination-disabled-background-color: cv.getVar("border") !default;
+$pagination-disabled-border-color: cv.getVar("border") !default;
+
+$pagination-current-color: cv.getVar("link-invert") !default;
+$pagination-current-background-color: cv.getVar("link") !default;
+$pagination-current-border-color: cv.getVar("link") !default;
+
+$pagination-ellipsis-color: cv.getVar("text-weak") !default;
+
+$pagination-shadow-inset: inset 0 0.0625em 0.125em
+ hsla(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-invert-l")},
+ 0.2
+ ) !default;
+
+.#{iv.$class-prefix}pagination {
+ @include cv.register-vars(
+ (
+ "pagination-margin": #{$pagination-margin},
+ "pagination-min-width": #{$pagination-min-width},
+ "pagination-item-h": #{$pagination-item-h},
+ "pagination-item-s": #{$pagination-item-s},
+ "pagination-item-l": #{$pagination-item-l},
+ "pagination-item-background-l-delta": #{$pagination-item-background-l-delta},
+ "pagination-item-hover-background-l-delta": #{$pagination-item-hover-background-l-delta},
+ "pagination-item-active-background-l-delta": #{$pagination-item-active-background-l-delta},
+ "pagination-item-border-style": #{$pagination-item-border-style},
+ "pagination-item-border-width": #{$pagination-item-border-width},
+ "pagination-item-border-l": #{$pagination-item-border-l},
+ "pagination-item-border-l-delta": #{$pagination-item-border-l-delta},
+ "pagination-item-hover-border-l-delta": #{$pagination-item-hover-border-l-delta},
+ "pagination-item-active-border-l-delta": #{$pagination-item-active-border-l-delta},
+ "pagination-item-focus-border-l-delta": #{$pagination-item-focus-border-l-delta},
+ "pagination-item-color-l": #{$pagination-item-color-l},
+ "pagination-item-font-size": #{$pagination-item-font-size},
+ "pagination-item-margin": #{$pagination-item-margin},
+ "pagination-item-padding-left": #{$pagination-item-padding-left},
+ "pagination-item-padding-right": #{$pagination-item-padding-right},
+ "pagination-item-outer-shadow-h": #{$pagination-item-outer-shadow-h},
+ "pagination-item-outer-shadow-s": #{$pagination-item-outer-shadow-s},
+ "pagination-item-outer-shadow-l": #{$pagination-item-outer-shadow-l},
+ "pagination-item-outer-shadow-a": #{$pagination-item-outer-shadow-a},
+ "pagination-nav-padding-left": #{$pagination-nav-padding-left},
+ "pagination-nav-padding-right": #{$pagination-nav-padding-right},
+ "pagination-disabled-color": #{$pagination-disabled-color},
+ "pagination-disabled-background-color": #{$pagination-disabled-background-color},
+ "pagination-disabled-border-color": #{$pagination-disabled-border-color},
+ "pagination-current-color": #{$pagination-current-color},
+ "pagination-current-background-color": #{$pagination-current-background-color},
+ "pagination-current-border-color": #{$pagination-current-border-color},
+ "pagination-ellipsis-color": #{$pagination-ellipsis-color},
+ "pagination-shadow-inset": #{$pagination-shadow-inset},
+ "pagination-selected-item-h": #{$pagination-selected-item-h},
+ "pagination-selected-item-s": #{$pagination-selected-item-s},
+ "pagination-selected-item-l": #{$pagination-selected-item-l},
+ "pagination-selected-item-background-l": #{$pagination-selected-item-background-l},
+ "pagination-selected-item-border-l": #{$pagination-selected-item-border-l},
+ "pagination-selected-item-color-l": #{$pagination-selected-item-color-l},
+ )
+ );
+}
+
+.#{iv.$class-prefix}pagination {
+ @extend %block;
+
+ font-size: cv.getVar("size-normal");
+ margin: cv.getVar("pagination-margin");
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ font-size: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ font-size: cv.getVar("size-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ font-size: cv.getVar("size-large");
+ }
+
+ &.#{iv.$class-prefix}is-rounded {
+ .#{iv.$class-prefix}pagination-previous,
+ .#{iv.$class-prefix}pagination-next {
+ padding-left: 1em;
+ padding-right: 1em;
+ border-radius: cv.getVar("radius-rounded");
+ }
+
+ .#{iv.$class-prefix}pagination-link {
+ border-radius: cv.getVar("radius-rounded");
+ }
+ }
+}
+
+.#{iv.$class-prefix}pagination,
+.#{iv.$class-prefix}pagination-list {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ text-align: center;
+}
+
+.#{iv.$class-prefix}pagination-previous,
+.#{iv.$class-prefix}pagination-next,
+.#{iv.$class-prefix}pagination-link,
+.#{iv.$class-prefix}pagination-ellipsis {
+ @extend %control;
+ @extend %unselectable;
+ color: hsl(
+ #{cv.getVar("pagination-item-h")},
+ #{cv.getVar("pagination-item-s")},
+ #{cv.getVar("pagination-item-color-l")}
+ );
+ font-size: cv.getVar("pagination-item-font-size");
+ justify-content: center;
+ margin: cv.getVar("pagination-item-margin");
+ padding-left: cv.getVar("pagination-item-padding-left");
+ padding-right: cv.getVar("pagination-item-padding-right");
+ text-align: center;
+}
+
+.#{iv.$class-prefix}pagination-previous,
+.#{iv.$class-prefix}pagination-next,
+.#{iv.$class-prefix}pagination-link {
+ background-color: hsl(
+ #{cv.getVar("pagination-item-h")},
+ #{cv.getVar("pagination-item-s")},
+ calc(
+ #{cv.getVar("pagination-item-background-l")} + #{cv.getVar(
+ "pagination-item-background-l-delta"
+ )}
+ )
+ );
+ border-color: hsl(
+ #{cv.getVar("pagination-item-h")},
+ #{cv.getVar("pagination-item-s")},
+ calc(
+ #{cv.getVar("pagination-item-border-l")} + #{cv.getVar(
+ "pagination-item-border-l-delta"
+ )}
+ )
+ );
+ border-style: cv.getVar("pagination-item-border-style");
+ border-width: cv.getVar("pagination-item-border-width");
+ box-shadow:
+ 0px 0.0625em 0.125em
+ hsla(
+ cv.getVar("pagination-item-outer-shadow-h"),
+ cv.getVar("pagination-item-outer-shadow-s"),
+ cv.getVar("pagination-item-outer-shadow-l"),
+ cv.getVar("pagination-item-outer-shadow-a")
+ ),
+ 0px 0.125em 0.25em
+ hsla(
+ cv.getVar("pagination-item-outer-shadow-h"),
+ cv.getVar("pagination-item-outer-shadow-s"),
+ cv.getVar("pagination-item-outer-shadow-l"),
+ cv.getVar("pagination-item-outer-shadow-a")
+ );
+ color: hsl(
+ #{cv.getVar("pagination-item-h")},
+ #{cv.getVar("pagination-item-s")},
+ #{cv.getVar("pagination-item-color-l")}
+ );
+ min-width: cv.getVar("pagination-min-width");
+ transition-duration: cv.getVar("duration");
+ transition-property: background-color, border-color, box-shadow, color;
+
+ &:hover {
+ @include cv.register-vars(
+ (
+ "pagination-item-background-l-delta": #{cv.getVar(
+ "pagination-item-hover-background-l-delta"
+ )},
+ "pagination-item-border-l-delta": #{cv.getVar(
+ "pagination-item-hover-border-l-delta"
+ )},
+ )
+ );
+ }
+
+ &:focus {
+ @include cv.register-vars(
+ (
+ "pagination-item-background-l-delta": #{cv.getVar(
+ "pagination-item-hover-background-l-delta"
+ )},
+ "pagination-item-border-l-delta": #{cv.getVar(
+ "pagination-item-hover-border-l-delta"
+ )},
+ )
+ );
+ }
+
+ &:active {
+ box-shadow: cv.getVar("pagination-shadow-inset");
+ }
+
+ &[disabled],
+ &.#{iv.$class-prefix}is-disabled {
+ background-color: cv.getVar("pagination-disabled-background-color");
+ border-color: cv.getVar("pagination-disabled-border-color");
+ box-shadow: none;
+ color: cv.getVar("pagination-disabled-color");
+ opacity: 0.5;
+ }
+}
+
+.#{iv.$class-prefix}pagination-previous,
+.#{iv.$class-prefix}pagination-next {
+ padding-left: cv.getVar("pagination-nav-padding-left");
+ padding-right: cv.getVar("pagination-nav-padding-right");
+ white-space: nowrap;
+}
+
+.#{iv.$class-prefix}pagination-link {
+ &.#{iv.$class-prefix}is-current,
+ &.#{iv.$class-prefix}is-selected {
+ @include cv.register-vars(
+ (
+ "pagination-item-h": #{cv.getVar("pagination-selected-item-h")},
+ "pagination-item-s": #{cv.getVar("pagination-selected-item-s")},
+ "pagination-item-l": #{cv.getVar("pagination-selected-item-l")},
+ "pagination-item-background-l": #{cv.getVar(
+ "pagination-selected-item-background-l"
+ )},
+ "pagination-item-border-l": #{cv.getVar(
+ "pagination-selected-item-border-l"
+ )},
+ "pagination-item-color-l": #{cv.getVar(
+ "pagination-selected-item-color-l"
+ )},
+ )
+ );
+ }
+}
+
+.#{iv.$class-prefix}pagination-ellipsis {
+ color: cv.getVar("pagination-ellipsis-color");
+ pointer-events: none;
+}
+
+.#{iv.$class-prefix}pagination-list {
+ flex-wrap: wrap;
+
+ li {
+ list-style: none;
+ }
+}
+
+@include mx.mobile {
+ .#{iv.$class-prefix}pagination {
+ flex-wrap: wrap;
+ }
+
+ .#{iv.$class-prefix}pagination-previous,
+ .#{iv.$class-prefix}pagination-next {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+
+ .#{iv.$class-prefix}pagination-list {
+ li {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+ }
+}
+
+@include mx.tablet {
+ .#{iv.$class-prefix}pagination-list {
+ flex-grow: 1;
+ flex-shrink: 1;
+ justify-content: flex-start;
+ order: 1;
+ }
+
+ .#{iv.$class-prefix}pagination-previous,
+ .#{iv.$class-prefix}pagination-next,
+ .#{iv.$class-prefix}pagination-link,
+ .#{iv.$class-prefix}pagination-ellipsis {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+
+ .#{iv.$class-prefix}pagination-previous {
+ order: 2;
+ }
+
+ .#{iv.$class-prefix}pagination-next {
+ order: 3;
+ }
+
+ .#{iv.$class-prefix}pagination {
+ justify-content: space-between;
+ margin-bottom: 0;
+ margin-top: 0;
+
+ &.#{iv.$class-prefix}is-centered {
+ .#{iv.$class-prefix}pagination-previous {
+ order: 1;
+ }
+
+ .#{iv.$class-prefix}pagination-list {
+ justify-content: center;
+ order: 2;
+ }
+
+ .#{iv.$class-prefix}pagination-next {
+ order: 3;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-right {
+ .#{iv.$class-prefix}pagination-previous {
+ order: 1;
+ }
+
+ .#{iv.$class-prefix}pagination-next {
+ order: 2;
+ }
+
+ .#{iv.$class-prefix}pagination-list {
+ justify-content: flex-end;
+ order: 3;
+ }
+ }
+ }
+}
diff --git a/style/bulma/sass/components/panel.scss b/style/bulma/sass/components/panel.scss
new file mode 100644
index 0000000..7d7d010
--- /dev/null
+++ b/style/bulma/sass/components/panel.scss
@@ -0,0 +1,218 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$panel-margin: cv.getVar("block-spacing") !default;
+$panel-item-border: 1px solid cv.getVar("border-weak") !default;
+$panel-radius: cv.getVar("radius-large") !default;
+$panel-shadow: cv.getVar("shadow") !default;
+
+$panel-heading-line-height: 1.25 !default;
+$panel-heading-padding: 1em 1.25em !default;
+$panel-heading-radius: cv.getVar("radius") !default;
+$panel-heading-size: 1.25em !default;
+$panel-heading-weight: cv.getVar("weight-bold") !default;
+
+$panel-tabs-font-size: 1em !default;
+$panel-tab-border-bottom-color: cv.getVar("border") !default;
+$panel-tab-border-bottom-style: solid !default;
+$panel-tab-border-bottom-width: 1px !default;
+$panel-tab-active-color: cv.getVar("link-active") !default;
+
+$panel-list-item-color: cv.getVar("text") !default;
+$panel-list-item-hover-color: cv.getVar("link") !default;
+
+$panel-block-color: cv.getVar("text-strong") !default;
+$panel-block-hover-background-color: cv.getVar("background") !default;
+$panel-block-active-border-left-color: cv.getVar("link") !default;
+$panel-block-active-color: cv.getVar("link-active") !default;
+$panel-block-active-icon-color: cv.getVar("link") !default;
+
+$panel-icon-color: cv.getVar("text-weak") !default;
+$panel-colors: dv.$colors !default;
+
+.#{iv.$class-prefix}panel {
+ @include cv.register-vars(
+ (
+ "panel-margin": #{$panel-margin},
+ "panel-item-border": #{$panel-item-border},
+ "panel-radius": #{$panel-radius},
+ "panel-shadow": #{$panel-shadow},
+ "panel-heading-line-height": #{$panel-heading-line-height},
+ "panel-heading-padding": #{$panel-heading-padding},
+ "panel-heading-radius": #{$panel-heading-radius},
+ "panel-heading-size": #{$panel-heading-size},
+ "panel-heading-weight": #{$panel-heading-weight},
+ "panel-tabs-font-size": #{$panel-tabs-font-size},
+ "panel-tab-border-bottom-color": #{$panel-tab-border-bottom-color},
+ "panel-tab-border-bottom-style": #{$panel-tab-border-bottom-style},
+ "panel-tab-border-bottom-width": #{$panel-tab-border-bottom-width},
+ "panel-tab-active-color": #{$panel-tab-active-color},
+ "panel-list-item-color": #{$panel-list-item-color},
+ "panel-list-item-hover-color": #{$panel-list-item-hover-color},
+ "panel-block-color": #{$panel-block-color},
+ "panel-block-hover-background-color": #{$panel-block-hover-background-color},
+ "panel-block-active-border-left-color": #{$panel-block-active-border-left-color},
+ "panel-block-active-color": #{$panel-block-active-color},
+ "panel-block-active-icon-color": #{$panel-block-active-icon-color},
+ "panel-icon-color": #{$panel-icon-color},
+ )
+ );
+}
+
+.#{iv.$class-prefix}panel {
+ @include cv.register-vars(
+ (
+ "panel-h": #{cv.getVar("scheme-h")},
+ "panel-s": #{cv.getVar("scheme-s")},
+ "panel-color-l": #{cv.getVar("text-l")},
+ "panel-heading-background-l": #{cv.getVar("text-l")},
+ "panel-heading-color-l": #{cv.getVar("text-invert-l")},
+ )
+ );
+
+ border-radius: cv.getVar("panel-radius");
+ box-shadow: cv.getVar("panel-shadow");
+ font-size: cv.getVar("size-normal");
+
+ &:not(:last-child) {
+ margin-bottom: cv.getVar("panel-margin");
+ }
+
+ // Colors
+ @each $name, $components in $panel-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-vars(
+ (
+ "panel-h": #{cv.getVar($name, "", "-h")},
+ "panel-s": #{cv.getVar($name, "", "-s")},
+ "panel-color-l": #{cv.getVar($name, "", "-l")},
+ "panel-heading-background-l": #{cv.getVar($name, "", "-l")},
+ "panel-heading-color-l": #{cv.getVar($name, "", "-invert-l")},
+ )
+ );
+ }
+ }
+}
+
+.#{iv.$class-prefix}panel-tabs,
+.#{iv.$class-prefix}panel-block {
+ &:not(:last-child) {
+ border-bottom: cv.getVar("panel-item-border");
+ }
+}
+
+.#{iv.$class-prefix}panel-heading {
+ background-color: hsl(
+ cv.getVar("panel-h"),
+ cv.getVar("panel-s"),
+ cv.getVar("panel-heading-background-l")
+ );
+ border-radius: cv.getVar("panel-radius") cv.getVar("panel-radius") 0 0;
+ color: hsl(
+ cv.getVar("panel-h"),
+ cv.getVar("panel-s"),
+ cv.getVar("panel-heading-color-l")
+ );
+ font-size: cv.getVar("panel-heading-size");
+ font-weight: cv.getVar("panel-heading-weight");
+ line-height: cv.getVar("panel-heading-line-height");
+ padding: cv.getVar("panel-heading-padding");
+}
+
+.#{iv.$class-prefix}panel-tabs {
+ align-items: flex-end;
+ display: flex;
+ font-size: cv.getVar("panel-tabs-font-size");
+ justify-content: center;
+
+ a {
+ border-bottom-color: cv.getVar("panel-tab-border-bottom-color");
+ border-bottom-style: cv.getVar("panel-tab-border-bottom-style");
+ border-bottom-width: cv.getVar("panel-tab-border-bottom-width");
+ margin-bottom: calc(-1 * #{$panel-tab-border-bottom-width});
+ padding: 0.75em;
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-active {
+ border-bottom-color: hsl(
+ cv.getVar("panel-h"),
+ cv.getVar("panel-s"),
+ cv.getVar("panel-color-l")
+ );
+ color: cv.getVar("panel-tab-active-color");
+ }
+ }
+}
+
+.#{iv.$class-prefix}panel-list {
+ a {
+ color: cv.getVar("panel-list-item-color");
+
+ &:hover {
+ color: cv.getVar("panel-list-item-hover-color");
+ }
+ }
+}
+
+.#{iv.$class-prefix}panel-block {
+ align-items: center;
+ color: cv.getVar("panel-block-color");
+ display: flex;
+ justify-content: flex-start;
+ padding: 0.75em 1em;
+
+ input[type="checkbox"] {
+ margin-inline-end: 0.75em;
+ }
+
+ & > .#{iv.$class-prefix}control {
+ flex-grow: 1;
+ flex-shrink: 1;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-wrapped {
+ flex-wrap: wrap;
+ }
+
+ &.#{iv.$class-prefix}is-active {
+ border-left-color: cv.getVar("panel-block-active-border-left-color");
+ color: cv.getVar("panel-block-active-color");
+
+ .#{iv.$class-prefix}panel-icon {
+ color: hsl(
+ cv.getVar("panel-h"),
+ cv.getVar("panel-s"),
+ cv.getVar("panel-color-l")
+ );
+ }
+ }
+
+ &:last-child {
+ border-bottom-left-radius: cv.getVar("panel-radius");
+ border-bottom-right-radius: cv.getVar("panel-radius");
+ }
+}
+
+a.#{iv.$class-prefix}panel-block,
+label.#{iv.$class-prefix}panel-block {
+ cursor: pointer;
+
+ &:hover {
+ background-color: cv.getVar("panel-block-hover-background-color");
+ }
+}
+
+.#{iv.$class-prefix}panel-icon {
+ @include mx.fa(1em, 1em);
+ color: cv.getVar("panel-icon-color");
+ margin-inline-end: 0.75em;
+
+ .#{iv.$class-prefix}fa {
+ font-size: inherit;
+ line-height: inherit;
+ }
+}
diff --git a/style/bulma/sass/components/tabs.scss b/style/bulma/sass/components/tabs.scss
new file mode 100644
index 0000000..072282c
--- /dev/null
+++ b/style/bulma/sass/components/tabs.scss
@@ -0,0 +1,273 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$tabs-border-bottom-color: cv.getVar("border") !default;
+$tabs-border-bottom-style: solid !default;
+$tabs-border-bottom-width: 1px !default;
+$tabs-link-color: cv.getVar("text") !default;
+$tabs-link-hover-border-bottom-color: cv.getVar("text-strong") !default;
+$tabs-link-hover-color: cv.getVar("text-strong") !default;
+$tabs-link-active-border-bottom-color: cv.getVar("link-text") !default;
+$tabs-link-active-color: cv.getVar("link-text") !default;
+$tabs-link-padding: 0.5em 1em !default;
+
+$tabs-boxed-link-radius: cv.getVar("radius") !default;
+$tabs-boxed-link-hover-background-color: cv.getVar("background") !default;
+$tabs-boxed-link-hover-border-bottom-color: cv.getVar("border") !default;
+
+$tabs-boxed-link-active-background-color: cv.getVar("scheme-main") !default;
+$tabs-boxed-link-active-border-color: cv.getVar("border") !default;
+$tabs-boxed-link-active-border-bottom-color: transparent !default;
+
+$tabs-toggle-link-border-color: cv.getVar("border") !default;
+$tabs-toggle-link-border-style: solid !default;
+$tabs-toggle-link-border-width: 1px !default;
+$tabs-toggle-link-hover-background-color: cv.getVar("background") !default;
+$tabs-toggle-link-hover-border-color: cv.getVar("border-hover") !default;
+$tabs-toggle-link-radius: cv.getVar("radius") !default;
+$tabs-toggle-link-active-background-color: cv.getVar("link") !default;
+$tabs-toggle-link-active-border-color: cv.getVar("link") !default;
+$tabs-toggle-link-active-color: cv.getVar("link-invert") !default;
+
+.#{iv.$class-prefix}tabs {
+ @include cv.register-vars(
+ (
+ "tabs-border-bottom-color": #{$tabs-border-bottom-color},
+ "tabs-border-bottom-style": #{$tabs-border-bottom-style},
+ "tabs-border-bottom-width": #{$tabs-border-bottom-width},
+ "tabs-link-color": #{$tabs-link-color},
+ "tabs-link-hover-border-bottom-color": #{$tabs-link-hover-border-bottom-color},
+ "tabs-link-hover-color": #{$tabs-link-hover-color},
+ "tabs-link-active-border-bottom-color": #{$tabs-link-active-border-bottom-color},
+ "tabs-link-active-color": #{$tabs-link-active-color},
+ "tabs-link-padding": #{$tabs-link-padding},
+ "tabs-boxed-link-radius": #{$tabs-boxed-link-radius},
+ "tabs-boxed-link-hover-background-color": #{$tabs-boxed-link-hover-background-color},
+ "tabs-boxed-link-hover-border-bottom-color": #{$tabs-boxed-link-hover-border-bottom-color},
+ "tabs-boxed-link-active-background-color": #{$tabs-boxed-link-active-background-color},
+ "tabs-boxed-link-active-border-color": #{$tabs-boxed-link-active-border-color},
+ "tabs-boxed-link-active-border-bottom-color": #{$tabs-boxed-link-active-border-bottom-color},
+ "tabs-toggle-link-border-color": #{$tabs-toggle-link-border-color},
+ "tabs-toggle-link-border-style": #{$tabs-toggle-link-border-style},
+ "tabs-toggle-link-border-width": #{$tabs-toggle-link-border-width},
+ "tabs-toggle-link-hover-background-color": #{$tabs-toggle-link-hover-background-color},
+ "tabs-toggle-link-hover-border-color": #{$tabs-toggle-link-hover-border-color},
+ "tabs-toggle-link-radius": #{$tabs-toggle-link-radius},
+ "tabs-toggle-link-active-background-color": #{$tabs-toggle-link-active-background-color},
+ "tabs-toggle-link-active-border-color": #{$tabs-toggle-link-active-border-color},
+ "tabs-toggle-link-active-color": #{$tabs-toggle-link-active-color},
+ )
+ );
+}
+
+.#{iv.$class-prefix}tabs {
+ @extend %block;
+ @extend %unselectable;
+ @include mx.overflow-touch;
+ align-items: stretch;
+ display: flex;
+ font-size: cv.getVar("size-normal");
+ justify-content: space-between;
+ overflow: hidden;
+ overflow-x: auto;
+ white-space: nowrap;
+
+ a {
+ align-items: center;
+ border-bottom-color: cv.getVar("tabs-border-bottom-color");
+ border-bottom-style: cv.getVar("tabs-border-bottom-style");
+ border-bottom-width: cv.getVar("tabs-border-bottom-width");
+ color: cv.getVar("tabs-link-color");
+ display: flex;
+ justify-content: center;
+ margin-bottom: calc(-1 * #{cv.getVar("tabs-border-bottom-width")});
+ padding: cv.getVar("tabs-link-padding");
+ transition-duration: cv.getVar("duration");
+ transition-property: background-color, border-color, color;
+ vertical-align: top;
+
+ &:hover {
+ border-bottom-color: cv.getVar("tabs-link-hover-border-bottom-color");
+ color: cv.getVar("tabs-link-hover-color");
+ }
+ }
+
+ li {
+ display: block;
+
+ &.#{iv.$class-prefix}is-active {
+ a {
+ border-bottom-color: cv.getVar("tabs-link-active-border-bottom-color");
+ color: cv.getVar("tabs-link-active-color");
+ }
+ }
+ }
+
+ ul {
+ align-items: center;
+ border-bottom-color: cv.getVar("tabs-border-bottom-color");
+ border-bottom-style: cv.getVar("tabs-border-bottom-style");
+ border-bottom-width: cv.getVar("tabs-border-bottom-width");
+ display: flex;
+ flex-grow: 1;
+ flex-shrink: 0;
+ justify-content: flex-start;
+
+ &.#{iv.$class-prefix}is-left {
+ padding-right: 0.75em;
+ }
+
+ &.#{iv.$class-prefix}is-center {
+ flex: none;
+ justify-content: center;
+ padding-left: 0.75em;
+ padding-right: 0.75em;
+ }
+
+ &.#{iv.$class-prefix}is-right {
+ justify-content: flex-end;
+ padding-left: 0.75em;
+ }
+ }
+
+ .#{iv.$class-prefix}icon {
+ &:first-child {
+ margin-inline-end: 0.5em;
+ }
+
+ &:last-child {
+ margin-inline-start: 0.5em;
+ }
+ }
+
+ // Alignment
+ &.#{iv.$class-prefix}is-centered {
+ ul {
+ justify-content: center;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-right {
+ ul {
+ justify-content: flex-end;
+ }
+ }
+
+ // Styles
+ &.#{iv.$class-prefix}is-boxed {
+ a {
+ border: 1px solid transparent;
+ border-start-start-radius: cv.getVar("tabs-boxed-link-radius");
+ border-start-end-radius: cv.getVar("tabs-boxed-link-radius");
+
+ &:hover {
+ background-color: cv.getVar("tabs-boxed-link-hover-background-color");
+ border-bottom-color: cv.getVar(
+ "tabs-boxed-link-hover-border-bottom-color"
+ );
+ }
+ }
+
+ li {
+ &.#{iv.$class-prefix}is-active {
+ a {
+ background-color: cv.getVar(
+ "tabs-boxed-link-active-background-color"
+ );
+ border-color: cv.getVar("tabs-boxed-link-active-border-color");
+ border-bottom-color: cv.getVar(
+ "tabs-boxed-link-active-border-bottom-color"
+ ) !important;
+ }
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-fullwidth {
+ li {
+ flex-grow: 1;
+ flex-shrink: 0;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-toggle {
+ a {
+ border-color: cv.getVar("tabs-toggle-link-border-color");
+ border-style: cv.getVar("tabs-toggle-link-border-style");
+ border-width: cv.getVar("tabs-toggle-link-border-width");
+ margin-bottom: 0;
+ position: relative;
+
+ &:hover {
+ background-color: cv.getVar("tabs-toggle-link-hover-background-color");
+ border-color: cv.getVar("tabs-toggle-link-hover-border-color");
+ z-index: 2;
+ }
+ }
+
+ li {
+ & + li {
+ margin-inline-start: calc(
+ -1 * #{cv.getVar("tabs-toggle-link-border-width")}
+ );
+ }
+
+ &:first-child a {
+ border-start-start-radius: cv.getVar("tabs-toggle-link-radius");
+ border-end-start-radius: cv.getVar("tabs-toggle-link-radius");
+ }
+
+ &:last-child a {
+ border-start-end-radius: cv.getVar("tabs-toggle-link-radius");
+ border-end-end-radius: cv.getVar("tabs-toggle-link-radius");
+ }
+
+ &.#{iv.$class-prefix}is-active {
+ a {
+ background-color: cv.getVar(
+ "tabs-toggle-link-active-background-color"
+ );
+ border-color: cv.getVar("tabs-toggle-link-active-border-color");
+ color: cv.getVar("tabs-toggle-link-active-color");
+ z-index: 1;
+ }
+ }
+ }
+
+ ul {
+ border-bottom: none;
+ }
+
+ &.#{iv.$class-prefix}is-toggle-rounded {
+ li {
+ &:first-child a {
+ border-start-start-radius: cv.getVar("radius-rounded");
+ border-end-start-radius: cv.getVar("radius-rounded");
+ padding-inline-start: 1.25em;
+ }
+
+ &:last-child a {
+ border-start-end-radius: cv.getVar("radius-rounded");
+ border-end-end-radius: cv.getVar("radius-rounded");
+ padding-inline-end: 1.25em;
+ }
+ }
+ }
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ font-size: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ font-size: cv.getVar("size-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ font-size: cv.getVar("size-large");
+ }
+}
diff --git a/style/bulma/sass/elements/_index.scss b/style/bulma/sass/elements/_index.scss
new file mode 100644
index 0000000..68034bf
--- /dev/null
+++ b/style/bulma/sass/elements/_index.scss
@@ -0,0 +1,16 @@
+/* Bulma Elements */
+@charset "utf-8";
+
+@forward "block";
+@forward "box";
+@forward "button";
+@forward "content";
+@forward "delete";
+@forward "icon";
+@forward "image";
+@forward "loader";
+@forward "notification";
+@forward "progress";
+@forward "table";
+@forward "tag";
+@forward "title";
diff --git a/style/bulma/sass/elements/block.scss b/style/bulma/sass/elements/block.scss
new file mode 100644
index 0000000..34fee01
--- /dev/null
+++ b/style/bulma/sass/elements/block.scss
@@ -0,0 +1,6 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+
+.#{iv.$class-prefix}block {
+ @extend %block;
+}
diff --git a/style/bulma/sass/elements/box.scss b/style/bulma/sass/elements/box.scss
new file mode 100644
index 0000000..060f53a
--- /dev/null
+++ b/style/bulma/sass/elements/box.scss
@@ -0,0 +1,59 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+
+$box-background-color: cv.getVar("scheme-main") !default;
+$box-color: cv.getVar("text") !default;
+$box-radius: cv.getVar("radius-large") !default;
+$box-shadow: cv.getVar("shadow") !default;
+$box-padding: 1.25rem !default;
+
+$box-link-hover-shadow:
+ 0 0.5em 1em -0.125em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar("scheme-s")}, #{cv.getVar(
+ "scheme-invert-l"
+ )}, 0.1),
+ 0 0 0 1px cv.getVar("link") !default;
+$box-link-active-shadow:
+ inset 0 1px 2px
+ hsla(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-invert-l")},
+ 0.2
+ ),
+ 0 0 0 1px cv.getVar("link") !default;
+
+.#{iv.$class-prefix}box {
+ @include cv.register-vars(
+ (
+ "box-background-color": #{$box-background-color},
+ "box-color": #{$box-color},
+ "box-radius": #{$box-radius},
+ "box-shadow": #{$box-shadow},
+ "box-padding": #{$box-padding},
+ "box-link-hover-shadow": #{$box-link-hover-shadow},
+ "box-link-active-shadow": #{$box-link-active-shadow},
+ )
+ );
+}
+
+.#{iv.$class-prefix}box {
+ @extend %block;
+ background-color: cv.getVar("box-background-color");
+ border-radius: cv.getVar("box-radius");
+ box-shadow: cv.getVar("box-shadow");
+ color: cv.getVar("box-color");
+ display: block;
+ padding: cv.getVar("box-padding");
+}
+
+a.#{iv.$class-prefix}box {
+ &:hover,
+ &:focus {
+ box-shadow: cv.getVar("box-link-hover-shadow");
+ }
+
+ &:active {
+ box-shadow: cv.getVar("box-link-active-shadow");
+ }
+}
diff --git a/style/bulma/sass/elements/button.scss b/style/bulma/sass/elements/button.scss
new file mode 100644
index 0000000..f8d3ba8
--- /dev/null
+++ b/style/bulma/sass/elements/button.scss
@@ -0,0 +1,640 @@
+@use "sass:list";
+
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$button-h: #{cv.getVar("scheme-h")};
+$button-s: #{cv.getVar("scheme-s")};
+$button-l: #{cv.getVar("scheme-main-l")};
+$button-background-l: #{cv.getVar("scheme-main-l")};
+$button-background-l-delta: 0%;
+$button-hover-background-l-delta: #{cv.getVar("hover-background-l-delta")};
+$button-active-background-l-delta: #{cv.getVar("active-background-l-delta")};
+$button-color-l: #{cv.getVar("text-strong-l")};
+$button-border-l: #{cv.getVar("border-l")};
+$button-border-l-delta: 0%;
+$button-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")};
+$button-active-border-l-delta: #{cv.getVar("active-border-l-delta")};
+$button-focus-border-l-delta: #{cv.getVar("focus-border-l-delta")};
+$button-outer-shadow-h: 0;
+$button-outer-shadow-s: 0%;
+$button-outer-shadow-l: 20%;
+$button-outer-shadow-a: 0.05;
+
+$button-weight: cv.getVar("weight-medium") !default;
+$button-family: false !default;
+
+$button-border-color: cv.getVar("border") !default;
+$button-border-style: solid !default;
+$button-border-width: cv.getVar("control-border-width") !default;
+
+$button-padding-vertical: 0.5em !default;
+$button-padding-horizontal: 1em !default;
+
+$button-focus-border-color: cv.getVar("link-focus-border") !default;
+$button-focus-box-shadow-size: 0 0 0 0.125em !default;
+$button-focus-box-shadow-color: hsla(
+ #{cv.getVar("link-h")},
+ #{cv.getVar("link-s")},
+ #{cv.getVar("link-on-scheme-l")},
+ 0.25
+) !default;
+
+$button-active-color: cv.getVar("link-active") !default;
+$button-active-border-color: cv.getVar("link-active-border") !default;
+
+$button-text-color: cv.getVar("text") !default;
+$button-text-decoration: underline !default;
+$button-text-hover-background-color: cv.getVar("background") !default;
+$button-text-hover-color: cv.getVar("text-strong") !default;
+
+$button-ghost-background: none !default;
+$button-ghost-border-color: transparent !default;
+$button-ghost-color: cv.getVar("link-text") !default;
+$button-ghost-decoration: none !default;
+$button-ghost-hover-color: cv.getVar("link") !default;
+$button-ghost-hover-decoration: underline !default;
+
+$button-disabled-background-color: cv.getVar("scheme-main") !default;
+$button-disabled-border-color: cv.getVar("border") !default;
+$button-disabled-shadow: none !default;
+$button-disabled-opacity: 0.5 !default;
+
+$button-static-color: cv.getVar("text-weak") !default;
+$button-static-background-color: cv.getVar("scheme-main-ter") !default;
+$button-static-border-color: cv.getVar("border") !default;
+
+$button-colors: dv.$colors !default;
+$button-responsive-sizes: (
+ "mobile": (
+ "small": calc(#{cv.getVar("size-small")} * 0.75),
+ "normal": calc(#{cv.getVar("size-small")} * 0.875),
+ "medium": cv.getVar("size-small"),
+ "large": cv.getVar("size-normal"),
+ ),
+ "tablet-only": (
+ "small": calc(#{cv.getVar("size-small")} * 0.875),
+ "normal": cv.getVar("size-small"),
+ "medium": cv.getVar("size-normal"),
+ "large": cv.getVar("size-medium"),
+ ),
+) !default;
+
+$no-palette: ("white", "black", "light", "dark");
+
+.#{iv.$class-prefix}button {
+ @include cv.register-vars(
+ (
+ "button-family": #{$button-family},
+ "button-weight": #{$button-weight},
+ "button-border-color": #{$button-border-color},
+ "button-border-style": #{$button-border-style},
+ "button-border-width": #{$button-border-width},
+ "button-padding-vertical": #{$button-padding-vertical},
+ "button-padding-horizontal": #{$button-padding-horizontal},
+ "button-focus-border-color": #{$button-focus-border-color},
+ "button-focus-box-shadow-size": #{$button-focus-box-shadow-size},
+ "button-focus-box-shadow-color": #{$button-focus-box-shadow-color},
+ "button-active-color": #{$button-active-color},
+ "button-active-border-color": #{$button-active-border-color},
+ "button-text-color": #{$button-text-color},
+ "button-text-decoration": #{$button-text-decoration},
+ "button-text-hover-background-color": #{$button-text-hover-background-color},
+ "button-text-hover-color": #{$button-text-hover-color},
+ "button-ghost-background": #{$button-ghost-background},
+ "button-ghost-border-color": #{$button-ghost-border-color},
+ "button-ghost-color": #{$button-ghost-color},
+ "button-ghost-decoration": #{$button-ghost-decoration},
+ "button-ghost-hover-color": #{$button-ghost-hover-color},
+ "button-ghost-hover-decoration": #{$button-ghost-hover-decoration},
+ "button-disabled-background-color": #{$button-disabled-background-color},
+ "button-disabled-border-color": #{$button-disabled-border-color},
+ "button-disabled-shadow": #{$button-disabled-shadow},
+ "button-disabled-opacity": #{$button-disabled-opacity},
+ "button-static-color": #{$button-static-color},
+ "button-static-background-color": #{$button-static-background-color},
+ "button-static-border-color": #{$button-static-border-color},
+ )
+ );
+}
+
+.#{iv.$class-prefix}button {
+ @include cv.register-vars(
+ (
+ "button-h": #{$button-h},
+ "button-s": #{$button-s},
+ "button-l": #{$button-l},
+ "button-background-l": #{$button-background-l},
+ "button-background-l-delta": #{$button-background-l-delta},
+ "button-hover-background-l-delta": #{$button-hover-background-l-delta},
+ "button-active-background-l-delta": #{$button-active-background-l-delta},
+ "button-color-l": #{$button-color-l},
+ "button-border-l": #{$button-border-l},
+ "button-border-l-delta": #{$button-border-l-delta},
+ "button-hover-border-l-delta": #{$button-hover-border-l-delta},
+ "button-active-border-l-delta": #{$button-active-border-l-delta},
+ "button-focus-border-l-delta": #{$button-focus-border-l-delta},
+ "button-outer-shadow-h": #{$button-outer-shadow-h},
+ "button-outer-shadow-s": #{$button-outer-shadow-s},
+ "button-outer-shadow-l": #{$button-outer-shadow-l},
+ "button-outer-shadow-a": #{$button-outer-shadow-a},
+ "loading-color":
+ hsl(
+ #{cv.getVar("button-h")},
+ #{cv.getVar("button-s")},
+ #{cv.getVar("button-color-l")}
+ ),
+ )
+ );
+
+ @extend %control;
+ @extend %unselectable;
+
+ background-color: hsl(
+ #{cv.getVar("button-h")},
+ #{cv.getVar("button-s")},
+ calc(
+ #{cv.getVar("button-background-l")} + #{cv.getVar(
+ "button-background-l-delta"
+ )}
+ )
+ );
+ border-color: hsl(
+ #{cv.getVar("button-h")},
+ #{cv.getVar("button-s")},
+ calc(
+ #{cv.getVar("button-border-l")} + #{cv.getVar("button-border-l-delta")}
+ )
+ );
+ border-style: cv.getVar("button-border-style");
+ border-width: cv.getVar("button-border-width");
+ box-shadow:
+ 0px 0.0625em 0.125em
+ hsla(
+ cv.getVar("button-outer-shadow-h"),
+ cv.getVar("button-outer-shadow-s"),
+ cv.getVar("button-outer-shadow-l"),
+ cv.getVar("button-outer-shadow-a")
+ ),
+ 0px 0.125em 0.25em
+ hsla(
+ cv.getVar("button-outer-shadow-h"),
+ cv.getVar("button-outer-shadow-s"),
+ cv.getVar("button-outer-shadow-l"),
+ cv.getVar("button-outer-shadow-a")
+ );
+ color: hsl(
+ #{cv.getVar("button-h")},
+ #{cv.getVar("button-s")},
+ #{cv.getVar("button-color-l")}
+ );
+ cursor: pointer;
+ font-weight: cv.getVar("button-weight");
+ height: auto;
+ justify-content: center;
+ padding-bottom: calc(
+ #{cv.getVar("button-padding-vertical")} - #{cv.getVar(
+ "button-border-width"
+ )}
+ );
+ padding-left: calc(
+ #{cv.getVar("button-padding-horizontal")} - #{cv.getVar(
+ "button-border-width"
+ )}
+ );
+ padding-right: calc(
+ #{cv.getVar("button-padding-horizontal")} - #{cv.getVar(
+ "button-border-width"
+ )}
+ );
+ padding-top: calc(
+ #{cv.getVar("button-padding-vertical")} - #{cv.getVar(
+ "button-border-width"
+ )}
+ );
+ text-align: center;
+ white-space: nowrap;
+
+ @if $button-family {
+ font-family: cv.getVar("button-family");
+ }
+
+ strong {
+ color: inherit;
+ }
+
+ .#{iv.$class-prefix}icon {
+ &,
+ &.#{iv.$class-prefix}is-small,
+ &.#{iv.$class-prefix}is-medium,
+ &.#{iv.$class-prefix}is-large {
+ height: 1.5em;
+ width: 1.5em;
+ }
+
+ &:first-child:not(:last-child) {
+ margin-inline-start: calc(
+ -0.5 * #{cv.getVar("button-padding-horizontal")}
+ );
+ margin-inline-end: calc(#{cv.getVar("button-padding-horizontal")} * 0.25);
+ }
+
+ &:last-child:not(:first-child) {
+ margin-inline-start: calc(
+ #{cv.getVar("button-padding-horizontal")} * 0.25
+ );
+ margin-inline-end: calc(-0.5 * #{cv.getVar("button-padding-horizontal")});
+ }
+
+ &:first-child:last-child {
+ margin-inline-start: calc(
+ -0.5 * #{cv.getVar("button-padding-horizontal")}
+ );
+ margin-inline-end: calc(-0.5 * #{cv.getVar("button-padding-horizontal")});
+ }
+ }
+
+ // States
+ &:hover,
+ &.#{iv.$class-prefix}is-hovered {
+ @include cv.register-vars(
+ (
+ "button-background-l-delta": #{cv.getVar(
+ "button-hover-background-l-delta"
+ )},
+ "button-border-l-delta": #{cv.getVar("button-hover-border-l-delta")},
+ )
+ );
+ }
+
+ &:focus-visible,
+ &.#{iv.$class-prefix}is-focused {
+ @include cv.register-var("button-border-width", 1px);
+
+ border-color: hsl(
+ #{cv.getVar("focus-h")},
+ #{cv.getVar("focus-s")},
+ #{cv.getVar("focus-l")}
+ );
+ box-shadow: cv.getVar("focus-shadow-size")
+ hsla(
+ cv.getVar("focus-h"),
+ cv.getVar("focus-s"),
+ cv.getVar("focus-l"),
+ cv.getVar("focus-shadow-alpha")
+ );
+ }
+
+ &:active,
+ &.#{iv.$class-prefix}is-active {
+ @include cv.register-vars(
+ (
+ "button-background-l-delta": #{cv.getVar(
+ "button-active-background-l-delta"
+ )},
+ "button-border-l-delta": #{cv.getVar("button-active-border-l-delta")},
+ "button-outer-shadow-a": 0,
+ )
+ );
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ background-color: cv.getVar("button-disabled-background-color");
+ border-color: cv.getVar("button-disabled-border-color");
+ box-shadow: cv.getVar("button-disabled-shadow");
+ opacity: cv.getVar("button-disabled-opacity");
+ }
+
+ // Colors
+ @each $name, $pair in $button-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-vars(
+ (
+ "button-h": #{cv.getVar($name, "", "-h")},
+ "button-s": #{cv.getVar($name, "", "-s")},
+ "button-l": #{cv.getVar($name, "", "-l")},
+ "button-background-l": #{cv.getVar($name, "", "-l")},
+ "button-border-l": #{cv.getVar($name, "", "-l")},
+ "button-border-width": 0px,
+ "button-color-l": #{cv.getVar($name, "", "-invert-l")},
+ "button-outer-shadow-a": 0,
+ )
+ );
+
+ &:focus-visible,
+ &.#{iv.$class-prefix}is-focused {
+ @include cv.register-var("button-border-width", 1px);
+ }
+
+ @if not list.index($no-palette, $name) {
+ &.#{iv.$class-prefix}is-light {
+ @include cv.register-vars(
+ (
+ "button-background-l": #{cv.getVar("light-l")},
+ "button-color-l": #{cv.getVar($name, "", "-light-invert-l")},
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-dark {
+ @include cv.register-vars(
+ (
+ "button-background-l": #{cv.getVar("dark-l")},
+ "button-color-l": #{cv.getVar($name, "", "-dark-invert-l")},
+ )
+ );
+ }
+ }
+
+ &.#{iv.$class-prefix}is-soft {
+ @include cv.register-vars(
+ (
+ "button-background-l": #{cv.getVar("soft-l")},
+ "button-color-l": #{cv.getVar("soft-invert-l")},
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-bold {
+ @include cv.register-vars(
+ (
+ "button-background-l": #{cv.getVar("bold-l")},
+ "button-color-l": #{cv.getVar("bold-invert-l")},
+ )
+ );
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ background-color: cv.getVar($name);
+ border-color: cv.getVar($name);
+ box-shadow: none;
+ }
+ }
+ }
+
+ // Styles
+ &.#{iv.$class-prefix}is-outlined {
+ @include cv.register-vars(
+ (
+ "button-border-width": max(1px, 0.0625em),
+ )
+ );
+
+ background-color: transparent;
+ border-color: hsl(
+ #{cv.getVar("button-h")},
+ #{cv.getVar("button-s")},
+ #{cv.getVar("button-l")}
+ );
+ color: hsl(
+ #{cv.getVar("button-h")},
+ #{cv.getVar("button-s")},
+ #{cv.getVar("button-l")}
+ );
+
+ &:hover {
+ @include cv.register-vars(
+ (
+ "button-border-width": max(2px, 0.125em),
+ "button-outer-shadow-alpha": 1,
+ )
+ );
+ }
+
+ &:active {
+ @include cv.register-vars(());
+ }
+ }
+
+ &.#{iv.$class-prefix}is-inverted {
+ background-color: hsl(
+ #{cv.getVar("button-h")},
+ #{cv.getVar("button-s")},
+ calc(
+ #{cv.getVar("button-color-l")} + #{cv.getVar(
+ "button-background-l-delta"
+ )}
+ )
+ );
+ color: hsl(
+ #{cv.getVar("button-h")},
+ #{cv.getVar("button-s")},
+ #{cv.getVar("button-background-l")}
+ );
+ }
+
+ &.#{iv.$class-prefix}is-text {
+ background-color: transparent;
+ border-color: transparent;
+ color: cv.getVar("button-text-color");
+ text-decoration: cv.getVar("button-text-decoration");
+
+ &:hover,
+ &.#{iv.$class-prefix}is-hovered {
+ background-color: cv.getVar("button-text-hover-background-color");
+ color: cv.getVar("button-text-hover-color");
+ }
+
+ &:active,
+ &.#{iv.$class-prefix}is-active {
+ // background-color: bulmaDarken($button-text-hover-background-color, 5%);
+ color: cv.getVar("button-text-hover-color");
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ background-color: transparent;
+ border-color: transparent;
+ box-shadow: none;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-ghost {
+ background: cv.getVar("button-ghost-background");
+ border-color: cv.getVar("button-ghost-border-color");
+ box-shadow: none;
+ color: cv.getVar("button-ghost-color");
+ text-decoration: cv.getVar("button-ghost-decoration");
+
+ &:hover,
+ &.#{iv.$class-prefix}is-hovered {
+ color: cv.getVar("button-ghost-hover-color");
+ text-decoration: cv.getVar("button-ghost-hover-decoration");
+ }
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ @include cv.register-vars(
+ (
+ "control-size": #{cv.getVar("size-small")},
+ "control-radius": #{cv.getVar("radius-small")},
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-normal {
+ @include cv.register-vars(
+ (
+ "control-size": #{cv.getVar("size-normal")},
+ "control-radius": #{cv.getVar("radius")},
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ @include cv.register-vars(
+ (
+ "control-size": #{cv.getVar("size-medium")},
+ "control-radius": #{cv.getVar("radius-medium")},
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ @include cv.register-vars(
+ (
+ "control-size": #{cv.getVar("size-large")},
+ "control-radius": #{cv.getVar("radius-medium")},
+ )
+ );
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-fullwidth {
+ display: flex;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-loading {
+ box-shadow: none;
+ color: transparent !important;
+ pointer-events: none;
+
+ &::after {
+ @extend %loader;
+ @include mx.center(1em);
+ position: absolute !important;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-static {
+ background-color: cv.getVar("button-static-background-color");
+ border-color: cv.getVar("button-static-border-color");
+ color: cv.getVar("button-static-color");
+ box-shadow: none;
+ pointer-events: none;
+ }
+
+ &.#{iv.$class-prefix}is-rounded {
+ border-radius: cv.getVar("radius-rounded");
+ padding-left: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em);
+ padding-right: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em);
+ }
+}
+
+.#{iv.$class-prefix}buttons {
+ @extend %block;
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ justify-content: flex-start;
+
+ // Sizes
+ &.#{iv.$class-prefix}are-small {
+ @include cv.register-vars(
+ (
+ "control-size": #{cv.getVar("size-small")},
+ "control-radius": #{cv.getVar("radius-small")},
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}are-medium {
+ @include cv.register-vars(
+ (
+ "control-size": #{cv.getVar("size-medium")},
+ "control-radius": #{cv.getVar("radius-medium")},
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}are-large {
+ @include cv.register-vars(
+ (
+ "control-size": #{cv.getVar("size-large")},
+ "control-radius": #{cv.getVar("radius-large")},
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}has-addons {
+ gap: 0;
+
+ .#{iv.$class-prefix}button {
+ &:not(:first-child) {
+ border-end-start-radius: 0;
+ border-start-start-radius: 0;
+ }
+
+ &:not(:last-child) {
+ border-end-end-radius: 0;
+ border-start-end-radius: 0;
+ margin-inline-end: -1px;
+ }
+
+ &:hover,
+ &.#{iv.$class-prefix}is-hovered {
+ z-index: 2;
+ }
+
+ &:focus,
+ &.#{iv.$class-prefix}is-focused,
+ &:active,
+ &.#{iv.$class-prefix}is-active,
+ &.#{iv.$class-prefix}is-selected {
+ z-index: 3;
+
+ &:hover {
+ z-index: 4;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-expanded {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-centered {
+ justify-content: center;
+ }
+
+ &.#{iv.$class-prefix}is-right {
+ justify-content: flex-end;
+ }
+}
+
+@each $bp-name, $bp-sizes in $button-responsive-sizes {
+ @include mx.breakpoint($bp-name) {
+ @each $size, $value in $bp-sizes {
+ @if $size != "normal" {
+ .#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive.#{iv.$class-prefix}is-#{$size} {
+ font-size: $value;
+ }
+ } @else {
+ .#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive,
+ .#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive.#{iv.$class-prefix}is-normal {
+ font-size: $value;
+ }
+ }
+ }
+ }
+}
diff --git a/style/bulma/sass/elements/content.scss b/style/bulma/sass/elements/content.scss
new file mode 100644
index 0000000..4acfa08
--- /dev/null
+++ b/style/bulma/sass/elements/content.scss
@@ -0,0 +1,283 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$content-heading-color: #{cv.getVar("text-strong")} !default;
+$content-heading-weight: #{cv.getVar("weight-extrabold")} !default;
+$content-heading-line-height: 1.125 !default;
+
+$content-block-margin-bottom: 1em !default;
+
+$content-blockquote-background-color: #{cv.getVar("background")} !default;
+$content-blockquote-border-left: 5px solid #{cv.getVar("border")} !default;
+$content-blockquote-padding: 1.25em 1.5em !default;
+
+$content-pre-padding: 1.25em 1.5em !default;
+
+$content-table-cell-border: 1px solid #{cv.getVar("border")} !default;
+$content-table-cell-border-width: 0 0 1px !default;
+$content-table-cell-padding: 0.5em 0.75em !default;
+$content-table-cell-heading-color: #{cv.getVar("text-strong")} !default;
+$content-table-head-cell-border-width: 0 0 2px !default;
+$content-table-head-cell-color: #{cv.getVar("text-strong")} !default;
+$content-table-body-last-row-cell-border-bottom-width: 0 !default;
+$content-table-foot-cell-border-width: 2px 0 0 !default;
+$content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
+
+.#{iv.$class-prefix}content {
+ @include cv.register-vars(
+ (
+ "content-heading-color": #{$content-heading-color},
+ "content-heading-weight": #{$content-heading-weight},
+ "content-heading-line-height": #{$content-heading-line-height},
+ "content-block-margin-bottom": #{$content-block-margin-bottom},
+ "content-blockquote-background-color": #{$content-blockquote-background-color},
+ "content-blockquote-border-left": #{$content-blockquote-border-left},
+ "content-blockquote-padding": #{$content-blockquote-padding},
+ "content-pre-padding": #{$content-pre-padding},
+ "content-table-cell-border": #{$content-table-cell-border},
+ "content-table-cell-border-width": #{$content-table-cell-border-width},
+ "content-table-cell-padding": #{$content-table-cell-padding},
+ "content-table-cell-heading-color": #{$content-table-cell-heading-color},
+ "content-table-head-cell-border-width": #{$content-table-head-cell-border-width},
+ "content-table-head-cell-color": #{$content-table-head-cell-color},
+ "content-table-body-last-row-cell-border-bottom-width": #{$content-table-body-last-row-cell-border-bottom-width},
+ "content-table-foot-cell-border-width": #{$content-table-foot-cell-border-width},
+ "content-table-foot-cell-color": #{$content-table-foot-cell-color},
+ )
+ );
+}
+
+.#{iv.$class-prefix}content {
+ @extend %block;
+
+ // Inline
+ li + li {
+ margin-top: 0.25em;
+ }
+
+ // Block
+ p,
+ dl,
+ ol,
+ ul,
+ blockquote,
+ pre,
+ table {
+ &:not(:last-child) {
+ margin-bottom: cv.getVar("content-block-margin-bottom");
+ }
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: cv.getVar("content-heading-color");
+ font-weight: cv.getVar("content-heading-weight");
+ line-height: cv.getVar("content-heading-line-height");
+ }
+
+ h1 {
+ font-size: 2em;
+ margin-bottom: 0.5em;
+
+ &:not(:first-child) {
+ margin-top: 1em;
+ }
+ }
+
+ h2 {
+ font-size: 1.75em;
+ margin-bottom: 0.5714em;
+
+ &:not(:first-child) {
+ margin-top: 1.1428em;
+ }
+ }
+
+ h3 {
+ font-size: 1.5em;
+ margin-bottom: 0.6666em;
+
+ &:not(:first-child) {
+ margin-top: 1.3333em;
+ }
+ }
+
+ h4 {
+ font-size: 1.25em;
+ margin-bottom: 0.8em;
+ }
+
+ h5 {
+ font-size: 1.125em;
+ margin-bottom: 0.8888em;
+ }
+
+ h6 {
+ font-size: 1em;
+ margin-bottom: 1em;
+ }
+
+ blockquote {
+ background-color: cv.getVar("content-blockquote-background-color");
+ border-inline-start: cv.getVar("content-blockquote-border-left");
+ padding: cv.getVar("content-blockquote-padding");
+ }
+
+ ol {
+ list-style-position: outside;
+ margin-inline-start: 2em;
+ margin-top: 1em;
+
+ &:not([type]) {
+ list-style-type: decimal;
+
+ &.#{iv.$class-prefix}is-lower-alpha {
+ list-style-type: lower-alpha;
+ }
+
+ &.#{iv.$class-prefix}is-lower-roman {
+ list-style-type: lower-roman;
+ }
+
+ &.#{iv.$class-prefix}is-upper-alpha {
+ list-style-type: upper-alpha;
+ }
+
+ &.#{iv.$class-prefix}is-upper-roman {
+ list-style-type: upper-roman;
+ }
+ }
+ }
+
+ ul {
+ list-style: disc outside;
+ margin-inline-start: 2em;
+ margin-top: 1em;
+
+ ul {
+ list-style-type: circle;
+ margin-bottom: 0.25em;
+ margin-top: 0.25em;
+
+ ul {
+ list-style-type: square;
+ }
+ }
+ }
+
+ dd {
+ margin-inline-start: 2em;
+ }
+
+ figure:not([class]) {
+ margin-left: 2em;
+ margin-right: 2em;
+ text-align: center;
+
+ &:not(:first-child) {
+ margin-top: 2em;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: 2em;
+ }
+
+ img {
+ display: inline-block;
+ }
+
+ figcaption {
+ font-style: italic;
+ }
+ }
+
+ pre {
+ @include mx.overflow-touch;
+ overflow-x: auto;
+ padding: cv.getVar("content-pre-padding");
+ white-space: pre;
+ word-wrap: normal;
+ }
+
+ sup,
+ sub {
+ font-size: 75%;
+ }
+
+ table {
+ td,
+ th {
+ border: cv.getVar("content-table-cell-border");
+ border-width: cv.getVar("content-table-cell-border-width");
+ padding: cv.getVar("content-table-cell-padding");
+ vertical-align: top;
+ }
+
+ th {
+ color: cv.getVar("content-table-cell-heading-color");
+
+ &:not([align]) {
+ text-align: inherit;
+ }
+ }
+
+ thead {
+ td,
+ th {
+ border-width: cv.getVar("content-table-head-cell-border-width");
+ color: cv.getVar("content-table-head-cell-color");
+ }
+ }
+
+ tfoot {
+ td,
+ th {
+ border-width: cv.getVar("content-table-foot-cell-border-width");
+ color: cv.getVar("content-table-foot-cell-color");
+ }
+ }
+
+ tbody {
+ tr {
+ &:last-child {
+ td,
+ th {
+ border-bottom-width: cv.getVar(
+ "content-table-body-last-row-cell-border-bottom-width"
+ );
+ }
+ }
+ }
+ }
+ }
+
+ .#{iv.$class-prefix}tabs {
+ li + li {
+ margin-top: 0;
+ }
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ font-size: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-normal {
+ font-size: cv.getVar("size-normal");
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ font-size: cv.getVar("size-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ font-size: cv.getVar("size-large");
+ }
+}
diff --git a/style/bulma/sass/elements/delete.scss b/style/bulma/sass/elements/delete.scss
new file mode 100644
index 0000000..fb9cb43
--- /dev/null
+++ b/style/bulma/sass/elements/delete.scss
@@ -0,0 +1,6 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+.#{iv.$class-prefix}delete {
+ @include mx.delete;
+}
diff --git a/style/bulma/sass/elements/icon.scss b/style/bulma/sass/elements/icon.scss
new file mode 100644
index 0000000..2df2638
--- /dev/null
+++ b/style/bulma/sass/elements/icon.scss
@@ -0,0 +1,67 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+
+$icon-dimensions: 1.5rem !default;
+$icon-dimensions-small: 1rem !default;
+$icon-dimensions-medium: 2rem !default;
+$icon-dimensions-large: 3rem !default;
+$icon-text-spacing: 0.25em !default;
+
+.#{iv.$class-prefix}icon,
+.#{iv.$class-prefix}icon-text {
+ @include cv.register-vars(
+ (
+ "icon-dimensions": #{$icon-dimensions},
+ "icon-dimensions-small": #{$icon-dimensions-small},
+ "icon-dimensions-medium": #{$icon-dimensions-medium},
+ "icon-dimensions-large": #{$icon-dimensions-large},
+ "icon-text-spacing": #{$icon-text-spacing},
+ )
+ );
+}
+
+.#{iv.$class-prefix}icon {
+ align-items: center;
+ display: inline-flex;
+ flex-shrink: 0;
+ justify-content: center;
+ height: cv.getVar("icon-dimensions");
+ transition-duration: cv.getVar("duration");
+ transition-property: color;
+ width: cv.getVar("icon-dimensions");
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ height: cv.getVar("icon-dimensions-small");
+ width: cv.getVar("icon-dimensions-small");
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ height: cv.getVar("icon-dimensions-medium");
+ width: cv.getVar("icon-dimensions-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ height: cv.getVar("icon-dimensions-large");
+ width: cv.getVar("icon-dimensions-large");
+ }
+}
+
+.#{iv.$class-prefix}icon-text {
+ align-items: flex-start;
+ color: inherit;
+ display: inline-flex;
+ flex-wrap: wrap;
+ gap: cv.getVar("icon-text-spacing");
+ line-height: cv.getVar("icon-dimensions");
+ vertical-align: top;
+
+ .#{iv.$class-prefix}icon {
+ flex-grow: 0;
+ flex-shrink: 0;
+ }
+}
+
+div.#{iv.$class-prefix}icon-text {
+ display: flex;
+}
diff --git a/style/bulma/sass/elements/image.scss b/style/bulma/sass/elements/image.scss
new file mode 100644
index 0000000..8e5106e
--- /dev/null
+++ b/style/bulma/sass/elements/image.scss
@@ -0,0 +1,62 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/css-variables" as cv;
+@use "../utilities/mixins" as mx;
+
+$dimensions: 16 24 32 48 64 96 128 !default;
+
+.#{iv.$class-prefix}image {
+ display: block;
+ position: relative;
+
+ img {
+ display: block;
+ height: auto;
+ width: 100%;
+
+ &.#{iv.$class-prefix}is-rounded {
+ border-radius: cv.getVar("radius-rounded");
+ }
+ }
+
+ &.#{iv.$class-prefix}is-fullwidth {
+ width: 100%;
+ }
+
+ // Ratio
+ &.#{iv.$class-prefix}is-square {
+ img,
+ .#{iv.$class-prefix}has-ratio {
+ @include mx.overlay;
+ height: 100%;
+ width: 100%;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-square {
+ aspect-ratio: 1;
+ }
+
+ @each $pair in iv.$aspect-ratios {
+ $w: nth($pair, 1);
+ $h: nth($pair, 2);
+
+ &.#{iv.$class-prefix}is-#{$w}by#{$h} {
+ aspect-ratio: #{$w} / #{$h};
+
+ img,
+ .#{iv.$class-prefix}has-ratio {
+ @include mx.overlay;
+ height: 100%;
+ width: 100%;
+ }
+ }
+ }
+
+ // Sizes
+ @each $dimension in $dimensions {
+ &.#{iv.$class-prefix}is-#{$dimension}x#{$dimension} {
+ height: $dimension * 1px;
+ width: $dimension * 1px;
+ }
+ }
+}
diff --git a/style/bulma/sass/elements/loader.scss b/style/bulma/sass/elements/loader.scss
new file mode 100644
index 0000000..3cd1a26
--- /dev/null
+++ b/style/bulma/sass/elements/loader.scss
@@ -0,0 +1,15 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$class-prefix}loader {
+ animation: spinAround 500ms infinite linear;
+ border: 2px solid cv.getVar("border");
+ border-radius: cv.getVar("radius-rounded");
+ border-right-color: transparent;
+ border-top-color: transparent;
+ content: "";
+ display: block;
+ height: 1em;
+ position: relative;
+ width: 1em;
+}
diff --git a/style/bulma/sass/elements/notification.scss b/style/bulma/sass/elements/notification.scss
new file mode 100644
index 0000000..0e0df7e
--- /dev/null
+++ b/style/bulma/sass/elements/notification.scss
@@ -0,0 +1,105 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$notification-code-background-color: cv.getVar("scheme-main") !default;
+$notification-radius: cv.getVar("radius") !default;
+$notification-padding: 1.375em 1.5em !default;
+
+$notification-colors: dv.$colors !default;
+
+.#{iv.$class-prefix}notification {
+ @include cv.register-vars(
+ (
+ "notification-h": #{cv.getVar("scheme-h")},
+ "notification-s": #{cv.getVar("scheme-s")},
+ "notification-background-l": #{cv.getVar("background-l")},
+ "notification-color-l": #{cv.getVar("text-strong-l")},
+ "notification-code-background-color": #{$notification-code-background-color},
+ "notification-radius": #{$notification-radius},
+ "notification-padding": #{$notification-padding},
+ )
+ );
+}
+
+.#{iv.$class-prefix}notification {
+ @extend %block;
+
+ background-color: hsl(
+ cv.getVar("notification-h"),
+ cv.getVar("notification-s"),
+ cv.getVar("notification-background-l")
+ );
+ border-radius: cv.getVar("notification-radius");
+ color: hsl(
+ cv.getVar("notification-h"),
+ cv.getVar("notification-s"),
+ cv.getVar("notification-color-l")
+ );
+ padding: cv.getVar("notification-padding");
+ position: relative;
+
+ a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}dropdown-item) {
+ color: currentColor;
+ text-decoration: underline;
+ }
+
+ strong {
+ color: currentColor;
+ }
+
+ code,
+ pre {
+ background: cv.getVar("notification-code-background-color");
+ }
+
+ pre code {
+ background: transparent;
+ }
+
+ & > .#{iv.$class-prefix}delete {
+ position: absolute;
+ inset-inline-end: 1rem;
+ top: 1rem;
+ }
+
+ .#{iv.$class-prefix}title,
+ .#{iv.$class-prefix}subtitle,
+ .#{iv.$class-prefix}content {
+ color: currentColor;
+ }
+
+ // Colors
+ @each $name, $pair in $notification-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-vars(
+ (
+ "notification-h": #{cv.getVar($name, "", "-h")},
+ "notification-s": #{cv.getVar($name, "", "-s")},
+ "notification-background-l": #{cv.getVar($name, "", "-l")},
+ "notification-color-l": #{cv.getVar($name, "", "-invert-l")},
+ )
+ );
+
+ &.#{iv.$class-prefix}is-light {
+ @include cv.register-vars(
+ (
+ "notification-background-l": 90%,
+ "notification-color-l": #{cv.getVar($name, "", "-light-invert-l")},
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-dark {
+ @include cv.register-vars(
+ (
+ "notification-background-l": 20%,
+ "notification-color-l": #{cv.getVar($name, "", "-dark-invert-l")},
+ )
+ );
+ }
+ }
+ }
+}
diff --git a/style/bulma/sass/elements/progress.scss b/style/bulma/sass/elements/progress.scss
new file mode 100644
index 0000000..2c38af4
--- /dev/null
+++ b/style/bulma/sass/elements/progress.scss
@@ -0,0 +1,115 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$progress-bar-background-color: cv.getVar("border-weak") !default;
+$progress-value-background-color: cv.getVar("text") !default;
+$progress-border-radius: cv.getVar("radius-rounded") !default;
+
+$progress-indeterminate-duration: 1.5s !default;
+
+$progress-colors: dv.$colors !default;
+
+.#{iv.$class-prefix}progress {
+ @include cv.register-vars(
+ (
+ "progress-border-radius": #{$progress-border-radius},
+ "progress-bar-background-color": #{$progress-bar-background-color},
+ "progress-value-background-color": #{$progress-value-background-color},
+ "progress-indeterminate-duration": #{$progress-indeterminate-duration},
+ )
+ );
+}
+
+.#{iv.$class-prefix}progress {
+ @extend %block;
+
+ appearance: none;
+ border: none;
+ border-radius: cv.getVar("progress-border-radius");
+ display: block;
+ height: cv.getVar("size-normal");
+ overflow: hidden;
+ padding: 0;
+ width: 100%;
+
+ &::-webkit-progress-bar {
+ background-color: cv.getVar("progress-bar-background-color");
+ }
+
+ &::-webkit-progress-value {
+ background-color: cv.getVar("progress-value-background-color");
+ }
+
+ &::-moz-progress-bar {
+ background-color: cv.getVar("progress-value-background-color");
+ }
+
+ &::-ms-fill {
+ background-color: cv.getVar("progress-value-background-color");
+ border: none;
+ }
+
+ // Colors
+ @each $name, $pair in $progress-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-var(
+ "progress-value-background-color",
+ #{cv.getVar($name)}
+ );
+ }
+ }
+
+ &:indeterminate {
+ animation-duration: cv.getVar("progress-indeterminate-duration");
+ animation-iteration-count: infinite;
+ animation-name: moveIndeterminate;
+ animation-timing-function: linear;
+ background-color: cv.getVar("progress-bar-background-color");
+ background-image: linear-gradient(
+ to right,
+ cv.getVar("progress-value-background-color") 30%,
+ cv.getVar("progress-bar-background-color") 30%
+ );
+ background-position: top left;
+ background-repeat: no-repeat;
+ background-size: 150% 150%;
+
+ &::-webkit-progress-bar {
+ background-color: transparent;
+ }
+
+ &::-moz-progress-bar {
+ background-color: transparent;
+ }
+
+ &::-ms-fill {
+ animation-name: none;
+ }
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ height: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ height: cv.getVar("size-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ height: cv.getVar("size-large");
+ }
+}
+
+@keyframes moveIndeterminate {
+ from {
+ background-position: 200% 0;
+ }
+
+ to {
+ background-position: (-200%) 0;
+ }
+}
diff --git a/style/bulma/sass/elements/table.scss b/style/bulma/sass/elements/table.scss
new file mode 100644
index 0000000..97b6e92
--- /dev/null
+++ b/style/bulma/sass/elements/table.scss
@@ -0,0 +1,261 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$table-color: cv.getVar("text-strong") !default;
+$table-background-color: cv.getVar("scheme-main") !default;
+
+$table-cell-border-color: cv.getVar("border") !default;
+$table-cell-border-style: solid !default;
+$table-cell-border-width: 0 0 1px !default;
+$table-cell-padding: 0.5em 0.75em !default;
+$table-cell-heading-color: cv.getVar("text-strong") !default;
+$table-cell-text-align: left !default;
+
+$table-head-cell-border-width: 0 0 2px !default;
+$table-head-cell-color: cv.getVar("text-strong") !default;
+$table-foot-cell-border-width: 2px 0 0 !default;
+$table-foot-cell-color: cv.getVar("text-strong") !default;
+
+$table-head-background-color: transparent !default;
+$table-body-background-color: transparent !default;
+$table-foot-background-color: transparent !default;
+
+$table-row-hover-background-color: cv.getVar("scheme-main-bis") !default;
+
+$table-row-active-background-color: cv.getVar("primary") !default;
+$table-row-active-color: cv.getVar("primary-invert") !default;
+
+$table-striped-row-even-background-color: cv.getVar("scheme-main-bis") !default;
+$table-striped-row-even-hover-background-color: cv.getVar(
+ "scheme-main-ter"
+) !default;
+
+$table-colors: dv.$colors !default;
+
+.#{iv.$class-prefix}table {
+ @include cv.register-vars(
+ (
+ "table-color": #{$table-color},
+ "table-background-color": #{$table-background-color},
+ "table-cell-border-color": #{$table-cell-border-color},
+ "table-cell-border-style": #{$table-cell-border-style},
+ "table-cell-border-width": #{$table-cell-border-width},
+ "table-cell-padding": #{$table-cell-padding},
+ "table-cell-heading-color": #{$table-cell-heading-color},
+ "table-cell-text-align": #{$table-cell-text-align},
+ "table-head-cell-border-width": #{$table-head-cell-border-width},
+ "table-head-cell-color": #{$table-head-cell-color},
+ "table-foot-cell-border-width": #{$table-foot-cell-border-width},
+ "table-foot-cell-color": #{$table-foot-cell-color},
+ "table-head-background-color": #{$table-head-background-color},
+ "table-body-background-color": #{$table-body-background-color},
+ "table-foot-background-color": #{$table-foot-background-color},
+ "table-row-hover-background-color": #{$table-row-hover-background-color},
+ "table-row-active-background-color": #{$table-row-active-background-color},
+ "table-row-active-color": #{$table-row-active-color},
+ "table-striped-row-even-background-color": #{$table-striped-row-even-background-color},
+ "table-striped-row-even-hover-background-color": #{$table-striped-row-even-hover-background-color},
+ )
+ );
+}
+
+.#{iv.$class-prefix}table {
+ @extend %block;
+
+ background-color: cv.getVar("table-background-color");
+ color: cv.getVar("table-color");
+
+ td,
+ th {
+ background-color: cv.getVar("table-cell-background-color");
+ border-color: cv.getVar("table-cell-border-color");
+ border-style: cv.getVar("table-cell-border-style");
+ border-width: cv.getVar("table-cell-border-width");
+ color: cv.getVar("table-color");
+ padding: cv.getVar("table-cell-padding");
+ vertical-align: top;
+
+ // Colors
+ @each $name, $pair in $table-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-vars(
+ (
+ "table-color": #{cv.getVar($name, "", "-invert")},
+ "table-cell-heading-color": #{cv.getVar($name, "", "-invert")},
+ "table-cell-background-color": #{cv.getVar($name)},
+ "table-cell-border-color": #{cv.getVar($name)},
+ )
+ );
+ }
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-narrow {
+ white-space: nowrap;
+ width: 1%;
+ }
+
+ &.#{iv.$class-prefix}is-selected {
+ background-color: cv.getVar("table-row-active-background-color");
+ color: cv.getVar("table-row-active-color");
+
+ a,
+ strong {
+ color: currentColor;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-vcentered {
+ vertical-align: middle;
+ }
+ }
+
+ th {
+ color: cv.getVar("table-cell-heading-color");
+
+ &:not([align]) {
+ text-align: cv.getVar("table-cell-text-align");
+ }
+ }
+
+ tr {
+ &.#{iv.$class-prefix}is-selected {
+ background-color: cv.getVar("table-row-active-background-color");
+ color: cv.getVar("table-row-active-color");
+
+ a,
+ strong {
+ color: currentColor;
+ }
+
+ td,
+ th {
+ border-color: cv.getVar("table-row-active-color");
+ color: currentColor;
+ }
+ }
+
+ @each $name, $pair in $table-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-vars(
+ (
+ "table-color": #{cv.getVar($name, "", "-invert")},
+ "table-cell-heading-color": #{cv.getVar($name, "", "-invert")},
+ "table-cell-background-color": #{cv.getVar($name)},
+ "table-cell-border-color": #{cv.getVar($name)},
+ )
+ );
+ }
+ }
+ }
+
+ thead {
+ background-color: cv.getVar("table-head-background-color");
+
+ td,
+ th {
+ border-width: cv.getVar("table-head-cell-border-width");
+ color: cv.getVar("table-head-cell-color");
+ }
+ }
+
+ tfoot {
+ background-color: cv.getVar("table-foot-background-color");
+
+ td,
+ th {
+ border-width: cv.getVar("table-foot-cell-border-width");
+ color: cv.getVar("table-foot-cell-color");
+ }
+ }
+
+ tbody {
+ background-color: cv.getVar("table-body-background-color");
+
+ tr {
+ &:last-child {
+ td,
+ th {
+ border-bottom-width: 0;
+ }
+ }
+ }
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-bordered {
+ td,
+ th {
+ border-width: 1px;
+ }
+
+ tr {
+ &:last-child {
+ td,
+ th {
+ border-bottom-width: 1px;
+ }
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-fullwidth {
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-hoverable {
+ tbody {
+ tr:not(.#{iv.$class-prefix}is-selected) {
+ &:hover {
+ background-color: cv.getVar("table-row-hover-background-color");
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-striped {
+ tbody {
+ tr:not(.#{iv.$class-prefix}is-selected) {
+ &:hover {
+ background-color: cv.getVar("table-row-hover-background-color");
+
+ &:nth-child(even) {
+ background-color: cv.getVar(
+ "table-striped-row-even-hover-background-color"
+ );
+ }
+ }
+ }
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-narrow {
+ td,
+ th {
+ padding: 0.25em 0.5em;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-striped {
+ tbody {
+ tr:not(.#{iv.$class-prefix}is-selected) {
+ &:nth-child(even) {
+ background-color: cv.getVar(
+ "table-striped-row-even-background-color"
+ );
+ }
+ }
+ }
+ }
+}
+
+.#{iv.$class-prefix}table-container {
+ @extend %block;
+ @include mx.overflow-touch;
+ overflow: auto;
+ overflow-y: hidden;
+ max-width: 100%;
+}
diff --git a/style/bulma/sass/elements/tag.scss b/style/bulma/sass/elements/tag.scss
new file mode 100644
index 0000000..336fa97
--- /dev/null
+++ b/style/bulma/sass/elements/tag.scss
@@ -0,0 +1,219 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$tag-h: cv.getVar("scheme-h");
+$tag-s: cv.getVar("scheme-s");
+$tag-background-l: cv.getVar("background-l");
+$tag-background-l-delta: 0%;
+$tag-hover-background-l-delta: cv.getVar("hover-background-l-delta");
+$tag-active-background-l-delta: cv.getVar("active-background-l-delta");
+$tag-color-l: cv.getVar("text-l");
+$tag-radius: cv.getVar("radius") !default;
+$tag-delete-margin: 1px !default;
+
+$tag-colors: dv.$colors !default;
+
+.#{iv.$class-prefix}tags {
+ @extend %block;
+
+ align-items: center;
+ color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ justify-content: flex-start;
+
+ // Sizes
+ &.#{iv.$class-prefix}are-medium {
+ .#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not(
+ .#{iv.$class-prefix}is-large
+ ) {
+ font-size: cv.getVar("size-normal");
+ }
+ }
+
+ &.#{iv.$class-prefix}are-large {
+ .#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not(
+ .#{iv.$class-prefix}is-medium
+ ) {
+ font-size: cv.getVar("size-medium");
+ }
+ }
+
+ &.#{iv.$class-prefix}is-centered {
+ gap: 0.25rem;
+ justify-content: center;
+ }
+
+ &.#{iv.$class-prefix}is-right {
+ justify-content: flex-end;
+ }
+
+ &.#{iv.$class-prefix}has-addons {
+ gap: 0;
+
+ .#{iv.$class-prefix}tag {
+ &:not(:first-child) {
+ border-start-start-radius: 0; // Top left
+ border-end-start-radius: 0; // Top right
+ }
+
+ &:not(:last-child) {
+ border-start-end-radius: 0; // Bottom left
+ border-end-end-radius: 0; // Bottom right
+ }
+ }
+ }
+}
+
+.#{iv.$class-prefix}tag {
+ @include cv.register-vars(
+ (
+ "tag-h": #{$tag-h},
+ "tag-s": #{$tag-s},
+ "tag-background-l": #{$tag-background-l},
+ "tag-background-l-delta": #{$tag-background-l-delta},
+ "tag-hover-background-l-delta": #{$tag-hover-background-l-delta},
+ "tag-active-background-l-delta": #{$tag-active-background-l-delta},
+ "tag-color-l": #{$tag-color-l},
+ "tag-radius": #{$tag-radius},
+ "tag-delete-margin": #{$tag-delete-margin},
+ )
+ );
+
+ align-items: center;
+ background-color: hsl(
+ cv.getVar("tag-h"),
+ cv.getVar("tag-s"),
+ calc(
+ #{cv.getVar("tag-background-l")} + #{cv.getVar("tag-background-l-delta")}
+ )
+ );
+ border-radius: $tag-radius;
+ color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
+ display: inline-flex;
+ font-size: cv.getVar("size-small");
+ height: 2em;
+ justify-content: center;
+ line-height: 1.5;
+ padding-left: 0.75em;
+ padding-right: 0.75em;
+ white-space: nowrap;
+
+ .#{iv.$class-prefix}delete {
+ margin-inline-start: 0.25rem;
+ margin-inline-end: -0.375rem;
+ }
+
+ // Colors
+ @each $name, $pair in $tag-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-vars(
+ (
+ "tag-h": #{cv.getVar($name, "", "-h")},
+ "tag-s": #{cv.getVar($name, "", "-s")},
+ "tag-background-l": #{cv.getVar($name, "", "-l")},
+ "tag-color-l": #{cv.getVar($name, "", "-invert-l")},
+ )
+ );
+
+ &.#{iv.$class-prefix}is-light {
+ @include cv.register-vars(
+ (
+ "tag-background-l": #{cv.getVar("light-l")},
+ "tag-color-l": #{cv.getVar($name, "", "-light-invert-l")},
+ )
+ );
+ }
+ }
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-normal {
+ font-size: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ font-size: cv.getVar("size-normal");
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ font-size: cv.getVar("size-medium");
+ }
+
+ .#{iv.$class-prefix}icon {
+ &:first-child:not(:last-child) {
+ margin-inline-start: -0.375em;
+ margin-inline-end: 0.1875em;
+ }
+
+ &:last-child:not(:first-child) {
+ margin-inline-start: 0.1875em;
+ margin-inline-end: -0.375em;
+ }
+
+ &:first-child:last-child {
+ margin-inline-start: -0.375em;
+ margin-inline-end: -0.375em;
+ }
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-delete {
+ margin-inline-start: cv.getVar("tag-delete-margin");
+ padding: 0;
+ position: relative;
+ width: 2em;
+
+ &::before,
+ &::after {
+ background-color: currentColor;
+ content: "";
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ transform-origin: center center;
+ }
+
+ &::before {
+ height: 1px;
+ width: 50%;
+ }
+
+ &::after {
+ height: 50%;
+ width: 1px;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-rounded {
+ border-radius: cv.getVar("radius-rounded");
+ }
+}
+
+a.#{iv.$class-prefix}tag,
+button.#{iv.$class-prefix}tag,
+.#{iv.$class-prefix}tag.is-hoverable {
+ cursor: pointer;
+
+ &:hover {
+ @include cv.register-vars(
+ (
+ "tag-background-l-delta": #{cv.getVar("tag-hover-background-l-delta")},
+ )
+ );
+ }
+
+ &:active {
+ @include cv.register-vars(
+ (
+ "tag-background-l-delta": #{cv.getVar("tag-active-background-l-delta")},
+ )
+ );
+ }
+}
diff --git a/style/bulma/sass/elements/title.scss b/style/bulma/sass/elements/title.scss
new file mode 100644
index 0000000..b416689
--- /dev/null
+++ b/style/bulma/sass/elements/title.scss
@@ -0,0 +1,128 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$title-color: cv.getVar("text-strong") !default;
+$title-family: false !default;
+$title-size: cv.getVar("size-3") !default;
+$title-weight: cv.getVar("weight-extrabold") !default;
+$title-line-height: 1.125 !default;
+$title-strong-color: inherit !default;
+$title-strong-weight: inherit !default;
+$title-sub-size: 0.75em !default;
+$title-sup-size: 0.75em !default;
+
+$subtitle-color: cv.getVar("text") !default;
+$subtitle-family: false !default;
+$subtitle-size: cv.getVar("size-5") !default;
+$subtitle-weight: cv.getVar("weight-normal") !default;
+$subtitle-line-height: 1.25 !default;
+$subtitle-strong-color: cv.getVar("text-strong") !default;
+$subtitle-strong-weight: cv.getVar("weight-semibold") !default;
+
+.#{iv.$class-prefix}title,
+.#{iv.$class-prefix}subtitle {
+ @include cv.register-vars(
+ (
+ "title-color": #{$title-color},
+ "title-family": #{$title-family},
+ "title-size": #{$title-size},
+ "title-weight": #{$title-weight},
+ "title-line-height": #{$title-line-height},
+ "title-strong-color": #{$title-strong-color},
+ "title-strong-weight": #{$title-strong-weight},
+ "title-sub-size": #{$title-sub-size},
+ "title-sup-size": #{$title-sup-size},
+ "subtitle-color": #{$subtitle-color},
+ "subtitle-family": #{$subtitle-family},
+ "subtitle-size": #{$subtitle-size},
+ "subtitle-weight": #{$subtitle-weight},
+ "subtitle-line-height": #{$subtitle-line-height},
+ "subtitle-strong-color": #{$subtitle-strong-color},
+ "subtitle-strong-weight": #{$subtitle-strong-weight},
+ )
+ );
+}
+
+.#{iv.$class-prefix}title,
+.#{iv.$class-prefix}subtitle {
+ @extend %block;
+ word-break: break-word;
+
+ em,
+ span {
+ font-weight: inherit;
+ }
+
+ sub {
+ font-size: cv.getVar("title-sub-size");
+ }
+
+ sup {
+ font-size: cv.getVar("title-sup-size");
+ }
+
+ .#{iv.$class-prefix}tag {
+ vertical-align: middle;
+ }
+}
+
+.#{iv.$class-prefix}title {
+ color: cv.getVar("title-color");
+ font-size: cv.getVar("title-size");
+ font-weight: cv.getVar("title-weight");
+ line-height: cv.getVar("title-line-height");
+
+ @if $title-family {
+ font-family: cv.getVar("title-family");
+ }
+
+ strong {
+ color: cv.getVar("title-strong-color");
+ font-weight: cv.getVar("title-strong-weight");
+ }
+
+ &:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}subtitle) {
+ margin-bottom: 0;
+ }
+
+ // Sizes
+ @each $size in dv.$sizes {
+ $i: index(dv.$sizes, $size);
+
+ &.#{iv.$class-prefix}is-#{$i} {
+ font-size: $size;
+ }
+ }
+}
+
+.#{iv.$class-prefix}subtitle {
+ color: cv.getVar("subtitle-color");
+ font-size: cv.getVar("subtitle-size");
+ font-weight: cv.getVar("subtitle-weight");
+ line-height: cv.getVar("subtitle-line-height");
+
+ @if $subtitle-family {
+ font-family: cv.getVar("subtitle-family");
+ }
+
+ strong {
+ color: cv.getVar("subtitle-strong-color");
+ font-weight: cv.getVar("subtitle-strong-weight");
+ }
+
+ &:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}title) {
+ margin-bottom: 0;
+ }
+
+ // Sizes
+ @each $size in dv.$sizes {
+ $i: index(dv.$sizes, $size);
+
+ &.#{iv.$class-prefix}is-#{$i} {
+ font-size: $size;
+ }
+ }
+}
diff --git a/style/bulma/sass/form/_index.scss b/style/bulma/sass/form/_index.scss
new file mode 100644
index 0000000..7c1214d
--- /dev/null
+++ b/style/bulma/sass/form/_index.scss
@@ -0,0 +1,9 @@
+/* Bulma Form */
+@charset "utf-8";
+
+@forward "shared";
+@forward "input-textarea";
+@forward "checkbox-radio";
+@forward "select";
+@forward "file";
+@forward "tools";
diff --git a/style/bulma/sass/form/checkbox-radio.scss b/style/bulma/sass/form/checkbox-radio.scss
new file mode 100644
index 0000000..39dc530
--- /dev/null
+++ b/style/bulma/sass/form/checkbox-radio.scss
@@ -0,0 +1,32 @@
+@use "shared";
+@use "../utilities/initial-variables" as iv;
+
+%checkbox-radio {
+ cursor: pointer;
+ display: inline-block;
+ line-height: 1.25;
+ position: relative;
+
+ input {
+ cursor: pointer;
+ }
+
+ &[disabled],
+ fieldset[disabled] &,
+ input[disabled] {
+ color: shared.$input-disabled-color;
+ cursor: not-allowed;
+ }
+}
+
+.#{iv.$class-prefix}checkbox {
+ @extend %checkbox-radio;
+}
+
+.#{iv.$class-prefix}radio {
+ @extend %checkbox-radio;
+
+ & + .#{iv.$class-prefix}radio {
+ margin-inline-start: 0.5em;
+ }
+}
diff --git a/style/bulma/sass/form/file.scss b/style/bulma/sass/form/file.scss
new file mode 100644
index 0000000..c75d4a1
--- /dev/null
+++ b/style/bulma/sass/form/file.scss
@@ -0,0 +1,330 @@
+@use "shared";
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/controls";
+@use "../utilities/extends";
+
+$file-radius: cv.getVar("radius") !default;
+
+$file-h: cv.getVar("scheme-h");
+$file-s: cv.getVar("scheme-s");
+$file-background-l: cv.getVar("scheme-main-ter-l");
+$file-background-l-delta: 0%;
+$file-hover-background-l-delta: -5%;
+$file-active-background-l-delta: -10%;
+$file-border-l: cv.getVar("border-l");
+$file-border-l-delta: 0%;
+$file-hover-border-l-delta: -10%;
+$file-active-border-l-delta: -20%;
+$file-cta-color-l: cv.getVar("text-strong-l");
+$file-name-color-l: cv.getVar("text-strong-l");
+$file-color-l-delta: 0%;
+$file-hover-color-l-delta: -5%;
+$file-active-color-l-delta: -10%;
+
+$file-cta-color: cv.getVar("text") !default;
+$file-cta-hover-color: cv.getVar("text-strong") !default;
+$file-cta-active-color: cv.getVar("text-strong") !default;
+
+$file-name-border-color: cv.getVar("border") !default;
+$file-name-border-style: solid !default;
+$file-name-border-width: 1px 1px 1px 0 !default;
+$file-name-max-width: 16em !default;
+
+$file-colors: shared.$form-colors !default;
+
+.#{iv.$class-prefix}file {
+ @extend %block;
+ @extend %unselectable;
+
+ @include cv.register-vars(
+ (
+ "file-radius": #{$file-radius},
+ "file-name-border-color": #{$file-name-border-color},
+ "file-name-border-style": #{$file-name-border-style},
+ "file-name-border-width": #{$file-name-border-width},
+ "file-name-max-width": #{$file-name-max-width},
+ "file-h": #{$file-h},
+ "file-s": #{$file-s},
+ "file-background-l": #{$file-background-l},
+ "file-background-l-delta": #{$file-background-l-delta},
+ "file-hover-background-l-delta": #{$file-hover-background-l-delta},
+ "file-active-background-l-delta": #{$file-active-background-l-delta},
+ "file-border-l": #{$file-border-l},
+ "file-border-l-delta": #{$file-border-l-delta},
+ "file-hover-border-l-delta": #{$file-hover-border-l-delta},
+ "file-active-border-l-delta": #{$file-active-border-l-delta},
+ "file-cta-color-l": #{$file-cta-color-l},
+ "file-name-color-l": #{$file-name-color-l},
+ "file-color-l-delta": #{$file-color-l-delta},
+ "file-hover-color-l-delta": #{$file-hover-color-l-delta},
+ "file-active-color-l-delta": #{$file-active-color-l-delta},
+ )
+ );
+
+ align-items: stretch;
+ display: flex;
+ justify-content: flex-start;
+ position: relative;
+
+ // Colors
+ @each $name, $pair in $file-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-vars(
+ (
+ "file-h": #{cv.getVar($name, "", "-h")},
+ "file-s": #{cv.getVar($name, "", "-s")},
+ "file-background-l": #{cv.getVar($name, "", "-l")},
+ "file-border-l": #{cv.getVar($name, "", "-l")},
+ "file-cta-color-l": #{cv.getVar($name, "", "-invert-l")},
+ "file-name-color-l": #{cv.getVar($name, "", "-on-scheme-l")},
+ )
+ );
+ }
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ font-size: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-normal {
+ font-size: cv.getVar("size-normal");
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ font-size: cv.getVar("size-medium");
+
+ .#{iv.$class-prefix}file-icon {
+ .#{iv.$class-prefix}fa {
+ font-size: 1.5rem;
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ font-size: cv.getVar("size-large");
+
+ .#{iv.$class-prefix}file-icon {
+ .#{iv.$class-prefix}fa {
+ font-size: 2rem;
+ }
+ }
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}has-name {
+ .#{iv.$class-prefix}file-cta {
+ border-end-end-radius: 0;
+ border-start-end-radius: 0;
+ }
+
+ .#{iv.$class-prefix}file-name {
+ border-end-start-radius: 0;
+ border-start-start-radius: 0;
+ }
+
+ &.#{iv.$class-prefix}is-empty {
+ .#{iv.$class-prefix}file-cta {
+ border-radius: cv.getVar("file-radius");
+ }
+
+ .#{iv.$class-prefix}file-name {
+ display: none;
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-boxed {
+ .#{iv.$class-prefix}file-label {
+ flex-direction: column;
+ }
+
+ .#{iv.$class-prefix}file-cta {
+ flex-direction: column;
+ height: auto;
+ padding: 1em 3em;
+ }
+
+ .#{iv.$class-prefix}file-name {
+ border-width: 0 1px 1px;
+ }
+
+ .#{iv.$class-prefix}file-icon {
+ height: 1.5em;
+ width: 1.5em;
+
+ .#{iv.$class-prefix}fa {
+ font-size: 1.5rem;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-small {
+ .#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
+ font-size: 1rem;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ .#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
+ font-size: 2rem;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ .#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa {
+ font-size: 2.5rem;
+ }
+ }
+
+ &.#{iv.$class-prefix}has-name {
+ .#{iv.$class-prefix}file-cta {
+ border-end-end-radius: 0;
+ border-end-start-radius: 0;
+ border-start-end-radius: cv.getVar("file-radius");
+ border-start-start-radius: cv.getVar("file-radius");
+ }
+
+ .#{iv.$class-prefix}file-name {
+ border-end-end-radius: cv.getVar("file-radius");
+ border-end-start-radius: cv.getVar("file-radius");
+ border-start-end-radius: 0;
+ border-start-start-radius: 0;
+ border-width: 0 1px 1px;
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-centered {
+ justify-content: center;
+ }
+
+ &.#{iv.$class-prefix}is-fullwidth {
+ .#{iv.$class-prefix}file-label {
+ width: 100%;
+ }
+
+ .#{iv.$class-prefix}file-name {
+ flex-grow: 1;
+ max-width: none;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-right {
+ justify-content: flex-end;
+
+ .#{iv.$class-prefix}file-cta {
+ border-radius: 0 cv.getVar("file-radius") cv.getVar("file-radius") 0;
+ }
+
+ .#{iv.$class-prefix}file-name {
+ border-radius: cv.getVar("file-radius") 0 0 cv.getVar("file-radius");
+ border-width: 1px 0 1px 1px;
+ order: -1;
+ }
+ }
+}
+
+.#{iv.$class-prefix}file-label {
+ align-items: stretch;
+ display: flex;
+ cursor: pointer;
+ justify-content: flex-start;
+ overflow: hidden;
+ position: relative;
+
+ &:hover {
+ @include cv.register-vars(
+ (
+ "file-background-l-delta": #{cv.getVar("file-hover-background-l-delta")},
+ "file-border-l-delta": #{cv.getVar("file-hover-border-l-delta")},
+ "file-color-l-delta": #{cv.getVar("file-hover-color-l-delta")},
+ )
+ );
+ }
+
+ &:active {
+ @include cv.register-vars(
+ (
+ "file-background-l-delta": #{cv.getVar("file-active-background-l-delta")},
+ "file-border-l-delta": #{cv.getVar("file-active-border-l-delta")},
+ "file-color-l-delta": #{cv.getVar("file-active-color-l-delta")},
+ )
+ );
+ }
+}
+
+.#{iv.$class-prefix}file-input {
+ height: 100%;
+ left: 0;
+ opacity: 0;
+ outline: none;
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
+
+.#{iv.$class-prefix}file-cta,
+.#{iv.$class-prefix}file-name {
+ @extend %control;
+ border-color: hsl(
+ cv.getVar("file-h"),
+ cv.getVar("file-s"),
+ calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-border-l-delta")})
+ );
+ border-radius: cv.getVar("file-radius");
+ font-size: 1em;
+ padding-left: 1em;
+ padding-right: 1em;
+ white-space: nowrap;
+}
+
+.#{iv.$class-prefix}file-cta {
+ background-color: hsl(
+ cv.getVar("file-h"),
+ cv.getVar("file-s"),
+ calc(
+ #{cv.getVar("file-background-l")} + #{cv.getVar(
+ "file-background-l-delta"
+ )}
+ )
+ );
+ color: hsl(
+ cv.getVar("file-h"),
+ cv.getVar("file-s"),
+ calc(#{cv.getVar("file-cta-color-l")} + #{cv.getVar("file-color-l-delta")})
+ );
+}
+
+.#{iv.$class-prefix}file-name {
+ border-color: hsl(
+ cv.getVar("file-h"),
+ cv.getVar("file-s"),
+ calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-color-l-delta")})
+ );
+ border-style: cv.getVar("file-name-border-style");
+ border-width: cv.getVar("file-name-border-width");
+ color: hsl(
+ cv.getVar("file-h"),
+ cv.getVar("file-s"),
+ calc(#{cv.getVar("file-name-color-l")} + #{cv.getVar("file-color-l-delta")})
+ );
+ display: block;
+ max-width: cv.getVar("file-name-max-width");
+ overflow: hidden;
+ text-align: inherit;
+ text-overflow: ellipsis;
+}
+
+.#{iv.$class-prefix}file-icon {
+ align-items: center;
+ display: flex;
+ height: 1em;
+ justify-content: center;
+ margin-inline-end: 0.5em;
+ width: 1em;
+
+ .#{iv.$class-prefix}fa {
+ font-size: 1rem;
+ }
+}
diff --git a/style/bulma/sass/form/input-textarea.scss b/style/bulma/sass/form/input-textarea.scss
new file mode 100644
index 0000000..98adbe3
--- /dev/null
+++ b/style/bulma/sass/form/input-textarea.scss
@@ -0,0 +1,123 @@
+@use "shared";
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/controls";
+
+$textarea-padding: cv.getVar("control-padding-horizontal") !default;
+$textarea-max-height: 40em !default;
+$textarea-min-height: 8em !default;
+
+$textarea-colors: shared.$form-colors !default;
+
+%input-textarea {
+ @extend %input;
+
+ @include cv.register-vars(
+ (
+ "input-h": #{cv.getVar("scheme-h")},
+ "input-s": #{cv.getVar("scheme-s")},
+ "input-border-style": solid,
+ "input-border-width": 1px,
+ "input-border-l": #{cv.getVar("border-l")},
+ )
+ );
+
+ box-shadow: shared.$input-shadow;
+ max-width: 100%;
+ width: 100%;
+
+ &[readonly] {
+ box-shadow: none;
+ }
+
+ // Colors
+ @each $name, $pair in $textarea-colors {
+ $color: nth($pair, 1);
+
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-vars(
+ (
+ "input-h": #{cv.getVar($name, "", "-h")},
+ "input-s": #{cv.getVar($name, "", "-s")},
+ "input-l": #{cv.getVar($name, "", "-l")},
+ "input-focus-h": #{cv.getVar($name, "", "-h")},
+ "input-focus-s": #{cv.getVar($name, "", "-s")},
+ "input-focus-l": #{cv.getVar($name, "", "-l")},
+ "input-border-l": #{cv.getVar($name, "", "-l")},
+ )
+ );
+ }
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ @include controls.control-small;
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ @include controls.control-medium;
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ @include controls.control-large;
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-fullwidth {
+ display: block;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-inline {
+ display: inline;
+ width: auto;
+ }
+}
+
+.#{iv.$class-prefix}input {
+ @extend %input-textarea;
+
+ &.#{iv.$class-prefix}is-rounded {
+ border-radius: cv.getVar("radius-rounded");
+ padding-left: calc(#{controls.$control-padding-horizontal} + 0.375em);
+ padding-right: calc(#{controls.$control-padding-horizontal} + 0.375em);
+ }
+
+ &.#{iv.$class-prefix}is-static {
+ background-color: transparent;
+ border-color: transparent;
+ box-shadow: none;
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
+.#{iv.$class-prefix}textarea {
+ @extend %input-textarea;
+ @include cv.register-vars(
+ (
+ "textarea-padding": #{$textarea-padding},
+ "textarea-max-height": #{$textarea-max-height},
+ "textarea-min-height": #{$textarea-min-height},
+ )
+ );
+ display: block;
+ max-width: 100%;
+ min-width: 100%;
+ padding: cv.getVar("textarea-padding");
+ resize: vertical;
+
+ &:not([rows]) {
+ max-height: cv.getVar("textarea-max-height");
+ min-height: cv.getVar("textarea-min-height");
+ }
+
+ &[rows] {
+ height: initial;
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}has-fixed-size {
+ resize: none;
+ }
+}
diff --git a/style/bulma/sass/form/select.scss b/style/bulma/sass/form/select.scss
new file mode 100644
index 0000000..b68861b
--- /dev/null
+++ b/style/bulma/sass/form/select.scss
@@ -0,0 +1,143 @@
+@use "shared";
+@use "../utilities/controls";
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+
+$select-colors: shared.$form-colors !default;
+
+.#{iv.$class-prefix}select {
+ @include cv.register-vars(
+ (
+ "input-h": #{cv.getVar("scheme-h")},
+ "input-s": #{cv.getVar("scheme-s")},
+ "input-border-style": solid,
+ "input-border-width": 1px,
+ "input-border-l": #{cv.getVar("border-l")},
+ )
+ );
+
+ display: inline-block;
+ max-width: 100%;
+ position: relative;
+ vertical-align: top;
+
+ &:not(.#{iv.$class-prefix}is-multiple) {
+ height: shared.$input-height;
+ }
+
+ &:not(.#{iv.$class-prefix}is-multiple):not(.#{iv.$class-prefix}is-loading) {
+ &::after {
+ @extend %arrow;
+ inset-inline-end: 1.125em;
+ z-index: 4;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-rounded {
+ select {
+ border-radius: cv.getVar("radius-rounded");
+ padding-inline-start: 1em;
+ }
+ }
+
+ select {
+ @extend %input;
+ cursor: pointer;
+ display: block;
+ font-size: 1em;
+ max-width: 100%;
+ outline: none;
+
+ &::-ms-expand {
+ display: none;
+ }
+
+ &[disabled]:hover,
+ fieldset[disabled] &:hover {
+ border-color: shared.$input-disabled-border-color;
+ }
+
+ &:not([multiple]) {
+ padding-inline-end: 2.5em;
+ }
+
+ &[multiple] {
+ height: auto;
+ padding: 0;
+
+ option {
+ padding: 0.5em 1em;
+ }
+ }
+ }
+
+ // Colors
+ @each $name, $pair in $select-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-vars(
+ (
+ "input-h": #{cv.getVar($name, "", "-h")},
+ "input-s": #{cv.getVar($name, "", "-s")},
+ "input-l": #{cv.getVar($name, "", "-l")},
+ "input-focus-h": #{cv.getVar($name, "", "-h")},
+ "input-focus-s": #{cv.getVar($name, "", "-s")},
+ "input-focus-l": #{cv.getVar($name, "", "-l")},
+ "input-border-l": #{cv.getVar($name, "", "-l")},
+ )
+ );
+ }
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ @include controls.control-small;
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ @include controls.control-medium;
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ @include controls.control-large;
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-disabled {
+ &::after {
+ border-color: shared.$input-disabled-color !important;
+ opacity: 0.5;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-fullwidth {
+ width: 100%;
+
+ select {
+ width: 100%;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-loading {
+ &::after {
+ @extend %loader;
+ inset-inline-end: 0.625em;
+ margin-top: 0;
+ position: absolute;
+ top: 0.625em;
+ transform: none;
+ }
+
+ &.#{iv.$class-prefix}is-small:after {
+ font-size: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-medium:after {
+ font-size: cv.getVar("size-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large:after {
+ font-size: cv.getVar("size-large");
+ }
+ }
+}
diff --git a/style/bulma/sass/form/shared.scss b/style/bulma/sass/form/shared.scss
new file mode 100644
index 0000000..14325eb
--- /dev/null
+++ b/style/bulma/sass/form/shared.scss
@@ -0,0 +1,172 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$form-colors: dv.$colors !default;
+
+$input-h: #{cv.getVar("scheme-h")} !default;
+$input-s: #{cv.getVar("scheme-s")} !default;
+$input-l: #{cv.getVar("scheme-main-l")} !default;
+$input-border-l: cv.getVar("border-l") !default;
+$input-border-l-delta: 0% !default;
+$input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
+$input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
+$input-color-l: cv.getVar("text-strong-l") !default;
+$input-background-l: cv.getVar("scheme-main-l") !default;
+$input-background-l-delta: 0% !default;
+$input-height: cv.getVar("control-height") !default;
+$input-shadow: inset 0 0.0625em 0.125em
+ hsla(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-invert-l")},
+ 0.05
+ ) !default;
+$input-placeholder-color: hsla(
+ #{cv.getVar("text-h")},
+ #{cv.getVar("text-s")},
+ #{cv.getVar("text-strong-l")},
+ 0.3
+) !default;
+
+$input-focus-h: cv.getVar("focus-h") !default;
+$input-focus-s: cv.getVar("focus-s") !default;
+$input-focus-l: cv.getVar("focus-l") !default;
+$input-focus-shadow-size: cv.getVar("focus-shadow-size") !default;
+$input-focus-shadow-alpha: cv.getVar("focus-shadow-alpha") !default;
+
+$input-disabled-color: cv.getVar("text-weak") !default;
+$input-disabled-background-color: cv.getVar("background") !default;
+$input-disabled-border-color: cv.getVar("background") !default;
+$input-disabled-placeholder-color: hsla(
+ #{cv.getVar("text-h")},
+ #{cv.getVar("text-s")},
+ #{cv.getVar("text-weak-l")},
+ 0.3
+) !default;
+
+$input-arrow: cv.getVar("link") !default;
+
+$input-icon-color: cv.getVar("text-light") !default;
+$input-icon-hover-color: cv.getVar("text-weak") !default;
+$input-icon-focus-color: cv.getVar("link") !default;
+
+$input-radius: cv.getVar("radius") !default;
+
+.#{iv.$class-prefix}control,
+.#{iv.$class-prefix}input,
+.#{iv.$class-prefix}textarea,
+.#{iv.$class-prefix}select select {
+ @include cv.register-vars(
+ (
+ "input-h": #{$input-h},
+ "input-s": #{$input-s},
+ "input-l": #{$input-l},
+ "input-border-l": #{$input-border-l},
+ "input-border-l-delta": #{$input-border-l-delta},
+ "input-hover-border-l-delta": #{$input-hover-border-l-delta},
+ "input-active-border-l-delta": #{$input-active-border-l-delta},
+ "input-focus-h": #{$input-focus-h},
+ "input-focus-s": #{$input-focus-s},
+ "input-focus-l": #{$input-focus-l},
+ "input-focus-shadow-size": #{$input-focus-shadow-size},
+ "input-focus-shadow-alpha": #{$input-focus-shadow-alpha},
+ "input-color-l": #{$input-color-l},
+ "input-background-l": #{$input-background-l},
+ "input-background-l-delta": #{$input-background-l-delta},
+ "input-height": #{$input-height},
+ "input-shadow": #{$input-shadow},
+ "input-placeholder-color": #{$input-placeholder-color},
+ "input-disabled-color": #{$input-disabled-color},
+ "input-disabled-background-color": #{$input-disabled-background-color},
+ "input-disabled-border-color": #{$input-disabled-border-color},
+ "input-disabled-placeholder-color": #{$input-disabled-placeholder-color},
+ "input-arrow": #{$input-arrow},
+ "input-icon-color": #{$input-icon-color},
+ "input-icon-hover-color": #{$input-icon-hover-color},
+ "input-icon-focus-color": #{$input-icon-focus-color},
+ "input-radius": #{$input-radius},
+ )
+ );
+}
+
+@mixin input {
+ @extend %control;
+ background-color: hsl(
+ #{cv.getVar("input-h")},
+ #{cv.getVar("input-s")},
+ calc(
+ #{cv.getVar("input-background-l")} + #{cv.getVar(
+ "input-background-l-delta"
+ )}
+ )
+ );
+ border-color: hsl(
+ cv.getVar("input-h"),
+ cv.getVar("input-s"),
+ calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
+ );
+ border-radius: cv.getVar("input-radius");
+ color: hsl(
+ #{cv.getVar("input-h")},
+ #{cv.getVar("input-s")},
+ #{cv.getVar("input-color-l")}
+ );
+
+ @include mx.placeholder {
+ color: cv.getVar("input-placeholder-color");
+ }
+
+ &:hover,
+ &.#{iv.$class-prefix}is-hovered {
+ @include cv.register-vars(
+ (
+ "input-border-l-delta": #{cv.getVar("input-hover-border-l-delta")},
+ )
+ );
+ }
+
+ &:active,
+ &.#{iv.$class-prefix}is-active {
+ @include cv.register-vars(
+ (
+ "input-border-l-delta": #{cv.getVar("input-active-border-l-delta")},
+ )
+ );
+ }
+
+ &:focus,
+ &:focus-within,
+ &.#{iv.$class-prefix}is-focused {
+ border-color: hsl(
+ cv.getVar("input-focus-h"),
+ cv.getVar("input-focus-s"),
+ cv.getVar("input-focus-l")
+ );
+ box-shadow: cv.getVar("input-focus-shadow-size")
+ hsla(
+ cv.getVar("input-focus-h"),
+ cv.getVar("input-focus-s"),
+ cv.getVar("input-focus-l"),
+ cv.getVar("input-focus-shadow-alpha")
+ );
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ background-color: cv.getVar("input-disabled-background-color");
+ border-color: cv.getVar("input-disabled-border-color");
+ box-shadow: none;
+ color: cv.getVar("input-disabled-color");
+
+ @include mx.placeholder {
+ color: cv.getVar("input-disabled-placeholder-color");
+ }
+ }
+}
+
+%input {
+ @include input;
+}
diff --git a/style/bulma/sass/form/tools.scss b/style/bulma/sass/form/tools.scss
new file mode 100644
index 0000000..a4f20bb
--- /dev/null
+++ b/style/bulma/sass/form/tools.scss
@@ -0,0 +1,341 @@
+@use "shared";
+@use "../utilities/controls";
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$label-color: cv.getVar("text-strong") !default;
+$label-weight: cv.getVar("weight-semibold") !default;
+
+$help-size: cv.getVar("size-small") !default;
+
+$label-colors: shared.$form-colors !default;
+
+.#{iv.$class-prefix}label {
+ color: $label-color;
+ display: block;
+ font-size: cv.getVar("size-normal");
+ font-weight: $label-weight;
+
+ &:not(:last-child) {
+ margin-bottom: 0.5em;
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ font-size: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ font-size: cv.getVar("size-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ font-size: cv.getVar("size-large");
+ }
+}
+
+.#{iv.$class-prefix}help {
+ display: block;
+ font-size: $help-size;
+ margin-top: 0.25rem;
+
+ @each $name, $pair in $label-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ color: hsl(
+ #{cv.getVar($name, "", "-h")},
+ #{cv.getVar($name, "", "-s")},
+ #{cv.getVar($name, "", "-on-scheme-l")}
+ );
+ }
+ }
+}
+
+// Containers
+
+.#{iv.$class-prefix}field {
+ @include cv.register-vars(
+ (
+ "block-spacing": 0.75rem,
+ )
+ );
+
+ @extend %block;
+
+ // Modifiers
+ &.#{iv.$class-prefix}has-addons {
+ display: flex;
+ justify-content: flex-start;
+
+ .#{iv.$class-prefix}control {
+ &:not(:last-child) {
+ margin-inline-end: -1px;
+ }
+
+ &:not(:first-child):not(:last-child) {
+ .#{iv.$class-prefix}button,
+ .#{iv.$class-prefix}input,
+ .#{iv.$class-prefix}select select {
+ border-radius: 0;
+ }
+ }
+
+ &:first-child:not(:only-child) {
+ .#{iv.$class-prefix}button,
+ .#{iv.$class-prefix}input,
+ .#{iv.$class-prefix}select select {
+ // @include ltr {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ // }
+ }
+ }
+
+ &:last-child:not(:only-child) {
+ .#{iv.$class-prefix}button,
+ .#{iv.$class-prefix}input,
+ .#{iv.$class-prefix}select select {
+ // @include ltr {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+ // }
+ }
+ }
+
+ .#{iv.$class-prefix}button,
+ .#{iv.$class-prefix}input,
+ .#{iv.$class-prefix}select select {
+ &:not([disabled]) {
+ &:hover,
+ &.#{iv.$class-prefix}is-hovered {
+ z-index: 2;
+ }
+
+ &:focus,
+ &.#{iv.$class-prefix}is-focused,
+ &:active,
+ &.#{iv.$class-prefix}is-active {
+ z-index: 3;
+
+ &:hover {
+ z-index: 4;
+ }
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-expanded {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+ }
+
+ &.#{iv.$class-prefix}has-addons-centered {
+ justify-content: center;
+ }
+
+ &.#{iv.$class-prefix}has-addons-right {
+ justify-content: flex-end;
+ }
+
+ &.#{iv.$class-prefix}has-addons-fullwidth {
+ .#{iv.$class-prefix}control {
+ flex-grow: 1;
+ flex-shrink: 0;
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-grouped {
+ display: flex;
+ gap: 0.75rem;
+ justify-content: flex-start;
+
+ & > .#{iv.$class-prefix}control {
+ flex-shrink: 0;
+
+ &.#{iv.$class-prefix}is-expanded {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-grouped-centered {
+ justify-content: center;
+ }
+
+ &.#{iv.$class-prefix}is-grouped-right {
+ justify-content: flex-end;
+ }
+
+ &.#{iv.$class-prefix}is-grouped-multiline {
+ flex-wrap: wrap;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-horizontal {
+ @include mx.tablet {
+ display: flex;
+ }
+ }
+}
+
+.#{iv.$class-prefix}field-label {
+ .#{iv.$class-prefix}label {
+ font-size: inherit;
+ }
+
+ @include mx.mobile {
+ margin-bottom: 0.5rem;
+ }
+
+ @include mx.tablet {
+ flex-basis: 0;
+ flex-grow: 1;
+ flex-shrink: 0;
+ margin-inline-end: 1.5rem;
+ text-align: right;
+
+ &.#{iv.$class-prefix}is-small {
+ font-size: cv.getVar("size-small");
+ padding-top: 0.375em;
+ }
+
+ &.#{iv.$class-prefix}is-normal {
+ padding-top: 0.375em;
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ font-size: cv.getVar("size-medium");
+ padding-top: 0.375em;
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ font-size: cv.getVar("size-large");
+ padding-top: 0.375em;
+ }
+ }
+}
+
+.#{iv.$class-prefix}field-body {
+ .#{iv.$class-prefix}field .#{iv.$class-prefix}field {
+ margin-bottom: 0;
+ }
+
+ @include mx.tablet {
+ display: flex;
+ flex-basis: 0;
+ flex-grow: 5;
+ flex-shrink: 1;
+
+ .#{iv.$class-prefix}field {
+ margin-bottom: 0;
+ }
+
+ & > .#{iv.$class-prefix}field {
+ flex-shrink: 1;
+
+ &:not(.#{iv.$class-prefix}is-narrow) {
+ flex-grow: 1;
+ }
+
+ &:not(:last-child) {
+ margin-inline-end: 0.75rem;
+ }
+ }
+ }
+}
+
+.#{iv.$class-prefix}control {
+ box-sizing: border-box;
+ clear: both;
+ font-size: cv.getVar("size-normal");
+ position: relative;
+ text-align: inherit;
+
+ // Modifiers
+ &.#{iv.$class-prefix}has-icons-left,
+ &.#{iv.$class-prefix}has-icons-right {
+ .#{iv.$class-prefix}input,
+ .#{iv.$class-prefix}select {
+ &:hover {
+ & ~ .#{iv.$class-prefix}icon {
+ color: cv.getVar("input-icon-hover-color");
+ }
+ }
+
+ &:focus {
+ & ~ .#{iv.$class-prefix}icon {
+ color: cv.getVar("input-icon-focus-color");
+ }
+ }
+
+ &.#{iv.$class-prefix}is-small ~ .#{iv.$class-prefix}icon {
+ font-size: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-medium ~ .#{iv.$class-prefix}icon {
+ font-size: cv.getVar("size-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large ~ .#{iv.$class-prefix}icon {
+ font-size: cv.getVar("size-large");
+ }
+ }
+
+ .#{iv.$class-prefix}icon {
+ color: cv.getVar("input-icon-color");
+ height: cv.getVar("input-height");
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ width: cv.getVar("input-height");
+ z-index: 4;
+ }
+ }
+
+ &.#{iv.$class-prefix}has-icons-left {
+ .#{iv.$class-prefix}input,
+ .#{iv.$class-prefix}select select {
+ padding-left: cv.getVar("input-height");
+ }
+
+ .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-left {
+ left: 0;
+ }
+ }
+
+ &.#{iv.$class-prefix}has-icons-right {
+ .#{iv.$class-prefix}input,
+ .#{iv.$class-prefix}select select {
+ padding-right: cv.getVar("input-height");
+ }
+
+ .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-right {
+ right: 0;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-loading {
+ &::after {
+ @extend %loader;
+ inset-inline-end: 0.75em;
+ position: absolute !important;
+ top: 0.75em;
+ z-index: 4;
+ }
+
+ &.#{iv.$class-prefix}is-small:after {
+ font-size: cv.getVar("size-small");
+ }
+
+ &.#{iv.$class-prefix}is-medium:after {
+ font-size: cv.getVar("size-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large:after {
+ font-size: cv.getVar("size-large");
+ }
+ }
+}
diff --git a/style/bulma/sass/grid/_index.scss b/style/bulma/sass/grid/_index.scss
new file mode 100644
index 0000000..70d64ca
--- /dev/null
+++ b/style/bulma/sass/grid/_index.scss
@@ -0,0 +1,5 @@
+/* Bulma Grid */
+@charset "utf-8";
+
+@forward "columns";
+@forward "grid";
diff --git a/style/bulma/sass/grid/columns-v2.scss b/style/bulma/sass/grid/columns-v2.scss
new file mode 100644
index 0000000..bfb3aa0
--- /dev/null
+++ b/style/bulma/sass/grid/columns-v2.scss
@@ -0,0 +1,957 @@
+@use "sass:math";
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$column-gap: 1.5rem !default;
+
+:root {
+ @include cv.register-vars(
+ (
+ "column-gap": #{$column-gap},
+ )
+ );
+}
+
+.#{iv.$class-prefix}column {
+ display: block;
+ flex-basis: 0;
+ flex-grow: 1;
+ flex-shrink: 1;
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-narrow {
+ flex: none;
+ width: unset;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-full {
+ flex: none;
+ width: 100%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-three-quarters {
+ flex: none;
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-two-thirds {
+ flex: none;
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-half {
+ flex: none;
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-one-third {
+ flex: none;
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-one-quarter {
+ flex: none;
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-one-fifth {
+ flex: none;
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-two-fifths {
+ flex: none;
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-three-fifths {
+ flex: none;
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-four-fifths {
+ flex: none;
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-three-quarters {
+ margin-inline-start: 75%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-two-thirds {
+ margin-inline-start: 66.6666%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-half {
+ margin-inline-start: 50%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-one-third {
+ margin-inline-start: 33.3333%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-one-quarter {
+ margin-inline-start: 25%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-one-fifth {
+ margin-inline-start: 20%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-two-fifths {
+ margin-inline-start: 40%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-three-fifths {
+ margin-inline-start: 60%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-four-fifths {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-#{$i} {
+ flex: none;
+ width: calc(
+ math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2)
+ );
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-#{$i} {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+
+ @include mx.mobile {
+ &.#{iv.$class-prefix}is-narrow-mobile {
+ flex: none;
+ width: unset;
+ }
+
+ &.#{iv.$class-prefix}is-full-mobile {
+ flex: none;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-three-quarters-mobile {
+ flex: none;
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-two-thirds-mobile {
+ flex: none;
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-half-mobile {
+ flex: none;
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-third-mobile {
+ flex: none;
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-quarter-mobile {
+ flex: none;
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-fifth-mobile {
+ flex: none;
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-two-fifths-mobile {
+ flex: none;
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-three-fifths-mobile {
+ flex: none;
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-four-fifths-mobile {
+ flex: none;
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-quarters-mobile {
+ margin-inline-start: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-thirds-mobile {
+ margin-inline-start: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-half-mobile {
+ margin-inline-start: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-third-mobile {
+ margin-inline-start: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-quarter-mobile {
+ margin-inline-start: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-fifth-mobile {
+ margin-inline-start: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-fifths-mobile {
+ margin-inline-start: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-fifths-mobile {
+ margin-inline-start: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-four-fifths-mobile {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ &.#{iv.$class-prefix}is-#{$i}-mobile {
+ flex: none;
+ width: calc(
+ math.percentage(math.div($i, 12)) - calc(
+ #{cv.getVar("column-gap")} / 2
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-offset-#{$i}-mobile {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+ }
+
+ @include mx.tablet {
+ &.#{iv.$class-prefix}is-narrow,
+ &.#{iv.$class-prefix}is-narrow-tablet {
+ flex: none;
+ width: unset;
+ }
+
+ &.#{iv.$class-prefix}is-full,
+ &.#{iv.$class-prefix}is-full-tablet {
+ flex: none;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-three-quarters,
+ &.#{iv.$class-prefix}is-three-quarters-tablet {
+ flex: none;
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-two-thirds,
+ &.#{iv.$class-prefix}is-two-thirds-tablet {
+ flex: none;
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-half,
+ &.#{iv.$class-prefix}is-half-tablet {
+ flex: none;
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-third,
+ &.#{iv.$class-prefix}is-one-third-tablet {
+ flex: none;
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-quarter,
+ &.#{iv.$class-prefix}is-one-quarter-tablet {
+ flex: none;
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-fifth,
+ &.#{iv.$class-prefix}is-one-fifth-tablet {
+ flex: none;
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-two-fifths,
+ &.#{iv.$class-prefix}is-two-fifths-tablet {
+ flex: none;
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-three-fifths,
+ &.#{iv.$class-prefix}is-three-fifths-tablet {
+ flex: none;
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-four-fifths,
+ &.#{iv.$class-prefix}is-four-fifths-tablet {
+ flex: none;
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-quarters,
+ &.#{iv.$class-prefix}is-offset-three-quarters-tablet {
+ margin-inline-start: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-thirds,
+ &.#{iv.$class-prefix}is-offset-two-thirds-tablet {
+ margin-inline-start: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-half,
+ &.#{iv.$class-prefix}is-offset-half-tablet {
+ margin-inline-start: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-third,
+ &.#{iv.$class-prefix}is-offset-one-third-tablet {
+ margin-inline-start: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-quarter,
+ &.#{iv.$class-prefix}is-offset-one-quarter-tablet {
+ margin-inline-start: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-fifth,
+ &.#{iv.$class-prefix}is-offset-one-fifth-tablet {
+ margin-inline-start: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-fifths,
+ &.#{iv.$class-prefix}is-offset-two-fifths-tablet {
+ margin-inline-start: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-fifths,
+ &.#{iv.$class-prefix}is-offset-three-fifths-tablet {
+ margin-inline-start: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-four-fifths,
+ &.#{iv.$class-prefix}is-offset-four-fifths-tablet {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ &.#{iv.$class-prefix}is-#{$i},
+ &.#{iv.$class-prefix}is-#{$i}-tablet {
+ flex: none;
+ width: calc(
+ math.percentage(math.div($i, 12)) - calc(
+ #{cv.getVar("column-gap")} / 2
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-offset-#{$i},
+ &.#{iv.$class-prefix}is-offset-#{$i}-tablet {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+ }
+
+ @include mx.touch {
+ &.#{iv.$class-prefix}is-narrow-touch {
+ flex: none;
+ width: unset;
+ }
+
+ &.#{iv.$class-prefix}is-full-touch {
+ flex: none;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-three-quarters-touch {
+ flex: none;
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-two-thirds-touch {
+ flex: none;
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-half-touch {
+ flex: none;
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-third-touch {
+ flex: none;
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-quarter-touch {
+ flex: none;
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-fifth-touch {
+ flex: none;
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-two-fifths-touch {
+ flex: none;
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-three-fifths-touch {
+ flex: none;
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-four-fifths-touch {
+ flex: none;
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-quarters-touch {
+ margin-inline-start: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-thirds-touch {
+ margin-inline-start: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-half-touch {
+ margin-inline-start: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-third-touch {
+ margin-inline-start: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-quarter-touch {
+ margin-inline-start: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-fifth-touch {
+ margin-inline-start: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-fifths-touch {
+ margin-inline-start: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-fifths-touch {
+ margin-inline-start: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-four-fifths-touch {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ &.#{iv.$class-prefix}is-#{$i}-touch {
+ flex: none;
+ width: math.percentage(math.div($i, 12));
+ }
+
+ &.#{iv.$class-prefix}is-offset-#{$i}-touch {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+ }
+
+ @include mx.desktop {
+ &.#{iv.$class-prefix}is-narrow-desktop {
+ flex: none;
+ width: unset;
+ }
+
+ &.#{iv.$class-prefix}is-full-desktop {
+ flex: none;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-three-quarters-desktop {
+ flex: none;
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-two-thirds-desktop {
+ flex: none;
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-half-desktop {
+ flex: none;
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-third-desktop {
+ flex: none;
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-quarter-desktop {
+ flex: none;
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-fifth-desktop {
+ flex: none;
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-two-fifths-desktop {
+ flex: none;
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-three-fifths-desktop {
+ flex: none;
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-four-fifths-desktop {
+ flex: none;
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-quarters-desktop {
+ margin-inline-start: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-thirds-desktop {
+ margin-inline-start: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-half-desktop {
+ margin-inline-start: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-third-desktop {
+ margin-inline-start: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-quarter-desktop {
+ margin-inline-start: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-fifth-desktop {
+ margin-inline-start: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-fifths-desktop {
+ margin-inline-start: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-fifths-desktop {
+ margin-inline-start: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-four-fifths-desktop {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ &.#{iv.$class-prefix}is-#{$i}-desktop {
+ flex: none;
+ width: calc(
+ math.percentage(math.div($i, 12)) - calc(
+ #{cv.getVar("column-gap")} / 2
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-offset-#{$i}-desktop {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+ }
+
+ @include mx.widescreen {
+ &.#{iv.$class-prefix}is-narrow-widescreen {
+ flex: none;
+ width: unset;
+ }
+
+ &.#{iv.$class-prefix}is-full-widescreen {
+ flex: none;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-three-quarters-widescreen {
+ flex: none;
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-two-thirds-widescreen {
+ flex: none;
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-half-widescreen {
+ flex: none;
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-third-widescreen {
+ flex: none;
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-quarter-widescreen {
+ flex: none;
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-fifth-widescreen {
+ flex: none;
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-two-fifths-widescreen {
+ flex: none;
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-three-fifths-widescreen {
+ flex: none;
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-four-fifths-widescreen {
+ flex: none;
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-quarters-widescreen {
+ margin-inline-start: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-thirds-widescreen {
+ margin-inline-start: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-half-widescreen {
+ margin-inline-start: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-third-widescreen {
+ margin-inline-start: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-quarter-widescreen {
+ margin-inline-start: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-fifth-widescreen {
+ margin-inline-start: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-fifths-widescreen {
+ margin-inline-start: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-fifths-widescreen {
+ margin-inline-start: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-four-fifths-widescreen {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ &.#{iv.$class-prefix}is-#{$i}-widescreen {
+ flex: none;
+ width: calc(
+ math.percentage(math.div($i, 12)) - calc(
+ #{cv.getVar("column-gap")} / 2
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-offset-#{$i}-widescreen {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+ }
+
+ @include mx.fullhd {
+ &.#{iv.$class-prefix}is-narrow-fullhd {
+ flex: none;
+ width: unset;
+ }
+
+ &.#{iv.$class-prefix}is-full-fullhd {
+ flex: none;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-three-quarters-fullhd {
+ flex: none;
+ width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-two-thirds-fullhd {
+ flex: none;
+ width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-half-fullhd {
+ flex: none;
+ width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-third-fullhd {
+ flex: none;
+ width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-quarter-fullhd {
+ flex: none;
+ width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-one-fifth-fullhd {
+ flex: none;
+ width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-two-fifths-fullhd {
+ flex: none;
+ width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-three-fifths-fullhd {
+ flex: none;
+ width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-four-fifths-fullhd {
+ flex: none;
+ width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-quarters-fullhd {
+ margin-inline-start: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-thirds-fullhd {
+ margin-inline-start: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-half-fullhd {
+ margin-inline-start: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-third-fullhd {
+ margin-inline-start: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-quarter-fullhd {
+ margin-inline-start: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-fifth-fullhd {
+ margin-inline-start: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-fifths-fullhd {
+ margin-inline-start: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-fifths-fullhd {
+ margin-inline-start: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-four-fifths-fullhd {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ &.#{iv.$class-prefix}is-#{$i}-fullhd {
+ flex: none;
+ width: calc(
+ math.percentage(math.div($i, 12)) - calc(
+ #{cv.getVar("column-gap")} / 2
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-offset-#{$i}-fullhd {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+ }
+}
+
+.#{iv.$class-prefix}columns {
+ @extend %block;
+ gap: cv.getVar("column-gap");
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-centered {
+ justify-content: center;
+ }
+
+ &.#{iv.$class-prefix}is-gapless {
+ gap: 0;
+ }
+
+ &.#{iv.$class-prefix}is-mobile {
+ display: flex;
+ }
+
+ &.#{iv.$class-prefix}is-multiline {
+ flex-wrap: wrap;
+ }
+
+ &.#{iv.$class-prefix}is-vcentered {
+ align-items: center;
+ }
+
+ // Responsiveness
+ @include mx.tablet {
+ &:not(.#{iv.$class-prefix}is-desktop) {
+ display: flex;
+ }
+ }
+
+ @include mx.desktop {
+ // Modifiers
+ &.#{iv.$class-prefix}is-desktop {
+ display: flex;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-variable {
+ @for $i from 0 through 8 {
+ &.#{iv.$class-prefix}is-#{$i} {
+ @include cv.register-vars(
+ (
+ "column-gap": #{$i * 0.25rem},
+ )
+ );
+ }
+
+ @include mx.mobile {
+ &.#{iv.$class-prefix}is-#{$i}-mobile {
+ @include cv.register-vars(
+ (
+ "column-gap": #{$i * 0.25rem},
+ )
+ );
+ }
+ }
+
+ @include mx.tablet {
+ &.#{iv.$class-prefix}is-#{$i}-tablet {
+ @include cv.register-vars(
+ (
+ "column-gap": #{$i * 0.25rem},
+ )
+ );
+ }
+ }
+
+ @include mx.tablet-only {
+ &.#{iv.$class-prefix}is-#{$i}-tablet-only {
+ @include cv.register-vars(
+ (
+ "column-gap": #{$i * 0.25rem},
+ )
+ );
+ }
+ }
+
+ @include mx.touch {
+ &.#{iv.$class-prefix}is-#{$i}-touch {
+ @include cv.register-vars(
+ (
+ "column-gap": #{$i * 0.25rem},
+ )
+ );
+ }
+ }
+
+ @include mx.desktop {
+ &.#{iv.$class-prefix}is-#{$i}-desktop {
+ @include cv.register-vars(
+ (
+ "column-gap": #{$i * 0.25rem},
+ )
+ );
+ }
+ }
+
+ @include mx.desktop-only {
+ &.#{iv.$class-prefix}is-#{$i}-desktop-only {
+ @include cv.register-vars(
+ (
+ "column-gap": #{$i * 0.25rem},
+ )
+ );
+ }
+ }
+
+ @include mx.widescreen {
+ &.#{iv.$class-prefix}is-#{$i}-widescreen {
+ @include cv.register-vars(
+ (
+ "column-gap": #{$i * 0.25rem},
+ )
+ );
+ }
+ }
+
+ @include mx.widescreen-only {
+ &.#{iv.$class-prefix}is-#{$i}-widescreen-only {
+ @include cv.register-vars(
+ (
+ "column-gap": #{$i * 0.25rem},
+ )
+ );
+ }
+ }
+
+ @include mx.fullhd {
+ &.#{iv.$class-prefix}is-#{$i}-fullhd {
+ @include cv.register-vars(
+ (
+ "column-gap": #{$i * 0.25rem},
+ )
+ );
+ }
+ }
+ }
+ }
+}
diff --git a/style/bulma/sass/grid/columns.scss b/style/bulma/sass/grid/columns.scss
new file mode 100644
index 0000000..5f5f126
--- /dev/null
+++ b/style/bulma/sass/grid/columns.scss
@@ -0,0 +1,877 @@
+@use "sass:math";
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$column-gap: 0.75rem !default;
+
+:root {
+ @include cv.register-vars(
+ (
+ "column-gap": #{$column-gap},
+ )
+ );
+}
+
+.#{iv.$class-prefix}column {
+ display: block;
+ flex-basis: 0;
+ flex-grow: 1;
+ flex-shrink: 1;
+ padding: $column-gap;
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-narrow {
+ flex: none;
+ width: unset;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-full {
+ flex: none;
+ width: 100%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-three-quarters {
+ flex: none;
+ width: 75%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-two-thirds {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-half {
+ flex: none;
+ width: 50%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-one-third {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-one-quarter {
+ flex: none;
+ width: 25%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-one-fifth {
+ flex: none;
+ width: 20%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-two-fifths {
+ flex: none;
+ width: 40%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-three-fifths {
+ flex: none;
+ width: 60%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-four-fifths {
+ flex: none;
+ width: 80%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-three-quarters {
+ margin-inline-start: 75%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-two-thirds {
+ margin-inline-start: 66.6666%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-half {
+ margin-inline-start: 50%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-one-third {
+ margin-inline-start: 0.3333%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-one-quarter {
+ margin-inline-start: 25%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-one-fifth {
+ margin-inline-start: 20%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-two-fifths {
+ margin-inline-start: 40%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-three-fifths {
+ margin-inline-start: 60%;
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-four-fifths {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-#{$i} {
+ flex: none;
+ width: calc(
+ math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2)
+ );
+ }
+
+ .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
+ > &.#{iv.$class-prefix}is-offset-#{$i} {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+
+ @include mx.mobile {
+ &.#{iv.$class-prefix}is-narrow-mobile {
+ flex: none;
+ width: unset;
+ }
+
+ &.#{iv.$class-prefix}is-full-mobile {
+ flex: none;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-three-quarters-mobile {
+ flex: none;
+ width: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-two-thirds-mobile {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-half-mobile {
+ flex: none;
+ width: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-one-third-mobile {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-one-quarter-mobile {
+ flex: none;
+ width: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-one-fifth-mobile {
+ flex: none;
+ width: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-two-fifths-mobile {
+ flex: none;
+ width: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-three-fifths-mobile {
+ flex: none;
+ width: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-four-fifths-mobile {
+ flex: none;
+ width: 80%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-quarters-mobile {
+ margin-inline-start: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-thirds-mobile {
+ margin-inline-start: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-half-mobile {
+ margin-inline-start: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-third-mobile {
+ margin-inline-start: 0.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-quarter-mobile {
+ margin-inline-start: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-fifth-mobile {
+ margin-inline-start: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-fifths-mobile {
+ margin-inline-start: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-fifths-mobile {
+ margin-inline-start: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-four-fifths-mobile {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ &.#{iv.$class-prefix}is-#{$i}-mobile {
+ flex: none;
+ width: calc(
+ math.percentage(math.div($i, 12)) - calc(
+ #{cv.getVar("column-gap")} / 2
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-offset-#{$i}-mobile {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+ }
+
+ @include mx.tablet {
+ &.#{iv.$class-prefix}is-narrow,
+ &.#{iv.$class-prefix}is-narrow-tablet {
+ flex: none;
+ width: unset;
+ }
+
+ &.#{iv.$class-prefix}is-full,
+ &.#{iv.$class-prefix}is-full-tablet {
+ flex: none;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-three-quarters,
+ &.#{iv.$class-prefix}is-three-quarters-tablet {
+ flex: none;
+ width: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-two-thirds,
+ &.#{iv.$class-prefix}is-two-thirds-tablet {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-half,
+ &.#{iv.$class-prefix}is-half-tablet {
+ flex: none;
+ width: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-one-third,
+ &.#{iv.$class-prefix}is-one-third-tablet {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-one-quarter,
+ &.#{iv.$class-prefix}is-one-quarter-tablet {
+ flex: none;
+ width: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-one-fifth,
+ &.#{iv.$class-prefix}is-one-fifth-tablet {
+ flex: none;
+ width: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-two-fifths,
+ &.#{iv.$class-prefix}is-two-fifths-tablet {
+ flex: none;
+ width: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-three-fifths,
+ &.#{iv.$class-prefix}is-three-fifths-tablet {
+ flex: none;
+ width: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-four-fifths,
+ &.#{iv.$class-prefix}is-four-fifths-tablet {
+ flex: none;
+ width: 80%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-quarters,
+ &.#{iv.$class-prefix}is-offset-three-quarters-tablet {
+ margin-inline-start: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-thirds,
+ &.#{iv.$class-prefix}is-offset-two-thirds-tablet {
+ margin-inline-start: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-half,
+ &.#{iv.$class-prefix}is-offset-half-tablet {
+ margin-inline-start: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-third,
+ &.#{iv.$class-prefix}is-offset-one-third-tablet {
+ margin-inline-start: 0.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-quarter,
+ &.#{iv.$class-prefix}is-offset-one-quarter-tablet {
+ margin-inline-start: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-fifth,
+ &.#{iv.$class-prefix}is-offset-one-fifth-tablet {
+ margin-inline-start: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-fifths,
+ &.#{iv.$class-prefix}is-offset-two-fifths-tablet {
+ margin-inline-start: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-fifths,
+ &.#{iv.$class-prefix}is-offset-three-fifths-tablet {
+ margin-inline-start: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-four-fifths,
+ &.#{iv.$class-prefix}is-offset-four-fifths-tablet {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ &.#{iv.$class-prefix}is-#{$i},
+ &.#{iv.$class-prefix}is-#{$i}-tablet {
+ flex: none;
+ width: calc(
+ math.percentage(math.div($i, 12)) - calc(
+ #{cv.getVar("column-gap")} / 2
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-offset-#{$i},
+ &.#{iv.$class-prefix}is-offset-#{$i}-tablet {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+ }
+
+ @include mx.touch {
+ &.#{iv.$class-prefix}is-narrow-touch {
+ flex: none;
+ width: unset;
+ }
+
+ &.#{iv.$class-prefix}is-full-touch {
+ flex: none;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-three-quarters-touch {
+ flex: none;
+ width: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-two-thirds-touch {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-half-touch {
+ flex: none;
+ width: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-one-third-touch {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-one-quarter-touch {
+ flex: none;
+ width: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-one-fifth-touch {
+ flex: none;
+ width: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-two-fifths-touch {
+ flex: none;
+ width: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-three-fifths-touch {
+ flex: none;
+ width: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-four-fifths-touch {
+ flex: none;
+ width: 80%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-quarters-touch {
+ margin-inline-start: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-thirds-touch {
+ margin-inline-start: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-half-touch {
+ margin-inline-start: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-third-touch {
+ margin-inline-start: 0.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-quarter-touch {
+ margin-inline-start: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-fifth-touch {
+ margin-inline-start: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-fifths-touch {
+ margin-inline-start: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-fifths-touch {
+ margin-inline-start: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-four-fifths-touch {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ &.#{iv.$class-prefix}is-#{$i}-touch {
+ flex: none;
+ width: math.percentage(math.div($i, 12));
+ }
+
+ &.#{iv.$class-prefix}is-offset-#{$i}-touch {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+ }
+
+ @include mx.desktop {
+ &.#{iv.$class-prefix}is-narrow-desktop {
+ flex: none;
+ width: unset;
+ }
+
+ &.#{iv.$class-prefix}is-full-desktop {
+ flex: none;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-three-quarters-desktop {
+ flex: none;
+ width: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-two-thirds-desktop {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-half-desktop {
+ flex: none;
+ width: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-one-third-desktop {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-one-quarter-desktop {
+ flex: none;
+ width: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-one-fifth-desktop {
+ flex: none;
+ width: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-two-fifths-desktop {
+ flex: none;
+ width: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-three-fifths-desktop {
+ flex: none;
+ width: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-four-fifths-desktop {
+ flex: none;
+ width: 80%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-quarters-desktop {
+ margin-inline-start: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-thirds-desktop {
+ margin-inline-start: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-half-desktop {
+ margin-inline-start: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-third-desktop {
+ margin-inline-start: 0.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-quarter-desktop {
+ margin-inline-start: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-fifth-desktop {
+ margin-inline-start: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-fifths-desktop {
+ margin-inline-start: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-fifths-desktop {
+ margin-inline-start: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-four-fifths-desktop {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ &.#{iv.$class-prefix}is-#{$i}-desktop {
+ flex: none;
+ width: calc(
+ math.percentage(math.div($i, 12)) - calc(
+ #{cv.getVar("column-gap")} / 2
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-offset-#{$i}-desktop {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+ }
+
+ @include mx.widescreen {
+ &.#{iv.$class-prefix}is-narrow-widescreen {
+ flex: none;
+ width: unset;
+ }
+
+ &.#{iv.$class-prefix}is-full-widescreen {
+ flex: none;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-three-quarters-widescreen {
+ flex: none;
+ width: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-two-thirds-widescreen {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-half-widescreen {
+ flex: none;
+ width: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-one-third-widescreen {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-one-quarter-widescreen {
+ flex: none;
+ width: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-one-fifth-widescreen {
+ flex: none;
+ width: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-two-fifths-widescreen {
+ flex: none;
+ width: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-three-fifths-widescreen {
+ flex: none;
+ width: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-four-fifths-widescreen {
+ flex: none;
+ width: 80%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-quarters-widescreen {
+ margin-inline-start: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-thirds-widescreen {
+ margin-inline-start: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-half-widescreen {
+ margin-inline-start: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-third-widescreen {
+ margin-inline-start: 0.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-quarter-widescreen {
+ margin-inline-start: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-fifth-widescreen {
+ margin-inline-start: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-fifths-widescreen {
+ margin-inline-start: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-fifths-widescreen {
+ margin-inline-start: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-four-fifths-widescreen {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ &.#{iv.$class-prefix}is-#{$i}-widescreen {
+ flex: none;
+ width: calc(
+ math.percentage(math.div($i, 12)) - calc(
+ #{cv.getVar("column-gap")} / 2
+ )
+ );
+ }
+
+ &.#{iv.$class-prefix}is-offset-#{$i}-widescreen {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+ }
+
+ @include mx.fullhd {
+ &.#{iv.$class-prefix}is-narrow-fullhd {
+ flex: none;
+ width: unset;
+ }
+
+ &.#{iv.$class-prefix}is-full-fullhd {
+ flex: none;
+ width: 100%;
+ }
+
+ &.#{iv.$class-prefix}is-three-quarters-fullhd {
+ flex: none;
+ width: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-two-thirds-fullhd {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-half-fullhd {
+ flex: none;
+ width: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-one-third-fullhd {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-one-quarter-fullhd {
+ flex: none;
+ width: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-one-fifth-fullhd {
+ flex: none;
+ width: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-two-fifths-fullhd {
+ flex: none;
+ width: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-three-fifths-fullhd {
+ flex: none;
+ width: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-four-fifths-fullhd {
+ flex: none;
+ width: 80%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-quarters-fullhd {
+ margin-inline-start: 75%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-thirds-fullhd {
+ margin-inline-start: 66.6666%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-half-fullhd {
+ margin-inline-start: 50%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-third-fullhd {
+ margin-inline-start: 33.3333%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-quarter-fullhd {
+ margin-inline-start: 25%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-one-fifth-fullhd {
+ margin-inline-start: 20%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-two-fifths-fullhd {
+ margin-inline-start: 40%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-three-fifths-fullhd {
+ margin-inline-start: 60%;
+ }
+
+ &.#{iv.$class-prefix}is-offset-four-fifths-fullhd {
+ margin-inline-start: 80%;
+ }
+
+ @for $i from 0 through 12 {
+ &.#{iv.$class-prefix}is-#{$i}-fullhd {
+ flex: none;
+ width: math.percentage(math.div($i, 12));
+ }
+
+ &.#{iv.$class-prefix}is-offset-#{$i}-fullhd {
+ margin-inline-start: math.percentage(math.div($i, 12));
+ }
+ }
+ }
+}
+
+.#{iv.$class-prefix}columns {
+ margin-inline-start: calc(-1 * #{cv.getVar("column-gap")});
+ margin-inline-end: calc(-1 * #{cv.getVar("column-gap")});
+ margin-top: calc(-1 * #{cv.getVar("column-gap")});
+
+ &:last-child {
+ margin-bottom: calc(-1 * #{cv.getVar("column-gap")});
+ }
+
+ &:not(:last-child) {
+ margin-bottom: calc(1.5rem - #{$column-gap});
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-centered {
+ justify-content: center;
+ }
+
+ &.#{iv.$class-prefix}is-gapless {
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+
+ margin-top: 0;
+
+ & > .#{iv.$class-prefix}column {
+ margin: 0;
+ padding: 0 !important;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: 1.5rem;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ &.#{iv.$class-prefix}is-mobile {
+ display: flex;
+ }
+
+ &.#{iv.$class-prefix}is-multiline {
+ flex-wrap: wrap;
+ }
+
+ &.#{iv.$class-prefix}is-vcentered {
+ align-items: center;
+ }
+
+ // Responsiveness
+ @include mx.tablet {
+ &:not(.#{iv.$class-prefix}is-desktop) {
+ display: flex;
+ }
+ }
+
+ @include mx.desktop {
+ // Modifiers
+ &.#{iv.$class-prefix}is-desktop {
+ display: flex;
+ }
+ }
+}
diff --git a/style/bulma/sass/grid/grid.scss b/style/bulma/sass/grid/grid.scss
new file mode 100644
index 0000000..9c4191d
--- /dev/null
+++ b/style/bulma/sass/grid/grid.scss
@@ -0,0 +1,209 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$max-column-count: 12;
+$grip-gap: 0.75rem;
+$column-min-base: 1.5rem;
+
+@mixin fixed-grid-properties($suffix: "") {
+ @for $i from 1 through $max-column-count {
+ &.#{iv.$class-prefix}has-#{$i}-cols#{$suffix} {
+ .#{iv.$class-prefix}grid {
+ @include cv.register-var("grid-column-count", #{$i});
+ }
+ }
+ }
+}
+
+$grid-container-name: bulma-fixed-grid;
+
+.#{iv.$class-prefix}fixed-grid {
+ @extend %block;
+ container-name: $grid-container-name;
+ container-type: inline-size;
+
+ .#{iv.$class-prefix}grid {
+ @include cv.register-vars(
+ (
+ "grid-gap-count": calc(#{cv.getVar("grid-column-count")} - 1),
+ "grid-column-count": 2,
+ )
+ );
+
+ grid-template-columns: repeat(cv.getVar("grid-column-count"), 1fr);
+ }
+
+ @include fixed-grid-properties;
+
+ @include mx.container-until($grid-container-name, iv.$tablet) {
+ @include fixed-grid-properties("-mobile");
+ }
+
+ @include mx.container-from($grid-container-name, iv.$tablet) {
+ @include fixed-grid-properties("-tablet");
+ }
+
+ @include mx.container-from($grid-container-name, iv.$desktop) {
+ @include fixed-grid-properties("-desktop");
+ }
+
+ @include mx.container-from($grid-container-name, iv.$widescreen) {
+ @include fixed-grid-properties("-widescreen");
+ }
+
+ @include mx.container-from($grid-container-name, iv.$fullhd) {
+ @include fixed-grid-properties("-fullhd");
+ }
+
+ &.#{iv.$class-prefix}has-auto-count {
+ .#{iv.$class-prefix}grid {
+ @include mx.container-until($grid-container-name, iv.$tablet) {
+ @include cv.register-var("grid-column-count", 2);
+ }
+
+ @include mx.container-from($grid-container-name, iv.$tablet) {
+ @include cv.register-var("grid-column-count", 4);
+ }
+
+ @include mx.container-from($grid-container-name, iv.$desktop) {
+ @include cv.register-var("grid-column-count", 8);
+ }
+
+ @include mx.container-from($grid-container-name, iv.$widescreen) {
+ @include cv.register-var("grid-column-count", 12);
+ }
+
+ @include mx.container-from($grid-container-name, iv.$fullhd) {
+ @include cv.register-var("grid-column-count", 16);
+ }
+ }
+ }
+}
+
+.#{iv.$class-prefix}grid {
+ @include cv.register-vars(
+ (
+ "grid-gap": $grip-gap,
+ "grid-column-min": 9rem,
+ "grid-cell-column-span": 1,
+ "grid-cell-row-span": 1,
+ )
+ );
+
+ @extend %block;
+ display: grid;
+ gap: cv.getVar("grid-gap");
+ column-gap: #{cv.getVarWithBackup("grid-column-gap", "grid-gap")};
+ row-gap: #{cv.getVarWithBackup("grid-row-gap", "grid-gap")};
+ grid-template-columns: repeat(
+ auto-fit,
+ minmax(#{cv.getVar("grid-column-min")}, 1fr)
+ );
+ grid-template-rows: auto;
+
+ &.is-auto-fill {
+ grid-template-columns: repeat(
+ auto-fill,
+ minmax(#{cv.getVar("grid-column-min")}, 1fr)
+ );
+ }
+
+ @for $i from 1 through 12 {
+ &.#{iv.$class-prefix}is-col-min-#{$i} {
+ @include cv.register-vars(
+ (
+ "grid-column-min": #{$column-min-base * $i},
+ )
+ );
+ }
+ }
+}
+
+@mixin cell-properties($suffix: "") {
+ @for $i from 1 through $max-column-count {
+ $name: $i + $suffix;
+
+ &.#{iv.$class-prefix}is-col-start-#{$name} {
+ @include cv.register-var("grid-cell-column-start", #{$i});
+ }
+
+ &.#{iv.$class-prefix}is-col-end-#{$name} {
+ @include cv.register-var("grid-cell-column-end", #{$i});
+ }
+
+ &.#{iv.$class-prefix}is-col-from-end-#{$name} {
+ @include cv.register-var("grid-cell-column-start", #{$i * -1});
+ }
+
+ &.#{iv.$class-prefix}is-col-span-#{$name} {
+ @include cv.register-var("grid-cell-column-span", #{$i});
+ }
+
+ &.#{iv.$class-prefix}is-row-start-#{$name} {
+ @include cv.register-var("grid-cell-row-start", #{$i});
+ }
+
+ &.#{iv.$class-prefix}is-row-end-#{$name} {
+ @include cv.register-var("grid-cell-row-end", #{$i});
+ }
+
+ &.#{iv.$class-prefix}is-row-from-end-#{$name} {
+ @include cv.register-var("grid-cell-row-start", #{$i * -1});
+ }
+
+ &.#{iv.$class-prefix}is-row-span-#{$name} {
+ @include cv.register-var("grid-cell-row-span", #{$i});
+ }
+ }
+}
+
+.#{iv.$class-prefix}cell {
+ grid-column-end: span cv.getVar("grid-cell-column-span");
+ grid-column-start: cv.getVar("grid-cell-column-start");
+ grid-row-end: span cv.getVar("grid-cell-row-span");
+ grid-row-start: cv.getVar("grid-cell-row-start");
+
+ // Sizes
+ &.#{iv.$class-prefix}is-col-start-end {
+ @include cv.register-var("grid-cell-column-start", -1);
+ }
+
+ &.#{iv.$class-prefix}is-row-start-end {
+ @include cv.register-var("grid-cell-row-start", -1);
+ }
+
+ @include cell-properties;
+ @include mx.mobile {
+ @include cell-properties("-mobile");
+ }
+
+ @include mx.tablet {
+ @include cell-properties("-tablet");
+ }
+
+ @include mx.tablet-only {
+ @include cell-properties("-tablet-only");
+ }
+
+ @include mx.desktop {
+ @include cell-properties("-desktop");
+ }
+
+ @include mx.desktop-only {
+ @include cell-properties("-desktop-only");
+ }
+
+ @include mx.widescreen {
+ @include cell-properties("-widescreen");
+ }
+
+ @include mx.widescreen-only {
+ @include cell-properties("-widescreen-only");
+ }
+
+ @include mx.fullhd {
+ @include cell-properties("-fullhd");
+ }
+}
diff --git a/style/bulma/sass/helpers/_index.scss b/style/bulma/sass/helpers/_index.scss
new file mode 100644
index 0000000..4388647
--- /dev/null
+++ b/style/bulma/sass/helpers/_index.scss
@@ -0,0 +1,15 @@
+/* Bulma Helpers */
+@charset "utf-8";
+
+@forward "aspect-ratio";
+@forward "border";
+@forward "color";
+@forward "flexbox";
+@forward "float";
+@forward "gap";
+@forward "overflow";
+@forward "position";
+@forward "spacing";
+@forward "typography";
+@forward "visibility";
+@forward "other";
diff --git a/style/bulma/sass/helpers/aspect-ratio.scss b/style/bulma/sass/helpers/aspect-ratio.scss
new file mode 100644
index 0000000..91e8c4c
--- /dev/null
+++ b/style/bulma/sass/helpers/aspect-ratio.scss
@@ -0,0 +1,10 @@
+@use "../utilities/initial-variables" as iv;
+
+@each $pair in iv.$aspect-ratios {
+ $w: nth($pair, 1);
+ $h: nth($pair, 2);
+
+ .#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
+ aspect-ratio: #{$w} / #{$h};
+ }
+}
diff --git a/style/bulma/sass/helpers/border.scss b/style/bulma/sass/helpers/border.scss
new file mode 100644
index 0000000..500ea00
--- /dev/null
+++ b/style/bulma/sass/helpers/border.scss
@@ -0,0 +1,15 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+
+$radii: (
+ "small": "radius-small",
+ "normal": "radius",
+ "large": "radius-large",
+ "rounded": "radius-rounded",
+);
+
+@each $name, $var in $radii {
+ .#{iv.$helpers-has-prefix}radius-#{$name} {
+ border-radius: cv.getVar($var);
+ }
+}
diff --git a/style/bulma/sass/helpers/color.scss b/style/bulma/sass/helpers/color.scss
new file mode 100644
index 0000000..22feaad
--- /dev/null
+++ b/style/bulma/sass/helpers/color.scss
@@ -0,0 +1,364 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+
+$digits: (
+ "00",
+ "05",
+ "10",
+ "15",
+ "20",
+ "25",
+ "30",
+ "35",
+ "40",
+ "45",
+ "50",
+ "55",
+ "60",
+ "65",
+ "70",
+ "75",
+ "80",
+ "85",
+ "90",
+ "95",
+ "100"
+);
+
+.#{iv.$helpers-has-prefix}background {
+ background-color: cv.getVar("background");
+}
+
+@each $name, $color in dv.$colors {
+ $background: hsl(
+ #{cv.getVar($name, "", "-h")},
+ #{cv.getVar($name, "", "-s")},
+ calc(#{cv.getVar("background-l")} + #{cv.getVar("background-l-delta")})
+ );
+
+ $color: hsl(
+ #{cv.getVar($name, "", "-h")},
+ #{cv.getVar($name, "", "-s")},
+ calc(#{cv.getVar("color-l")} + #{cv.getVar("color-l-delta")})
+ );
+
+ [class*="#{iv.$helpers-prefix}color-#{$name}"],
+ [class*="#{iv.$helpers-has-prefix}text-#{$name}"] {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar($name, "", "-l")},
+ "color-l-delta": 0%,
+ )
+ );
+ color: $color !important;
+ }
+
+ [class*="#{iv.$helpers-prefix}background-#{$name}"],
+ [class*="#{iv.$helpers-has-prefix}background-#{$name}"] {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar($name, "", "-l")},
+ "background-l-delta": 0%,
+ )
+ );
+ background-color: $background !important;
+ }
+
+ // Invert
+ .#{iv.$helpers-prefix}color-#{$name}-invert,
+ .#{iv.$helpers-has-prefix}text-#{$name}-invert {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar($name, "", "-invert-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name}-invert,
+ .#{iv.$helpers-has-prefix}background-#{$name}-invert {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar($name, "", "-invert-l")},
+ )
+ );
+ }
+
+ // On Scheme
+ .#{iv.$helpers-prefix}color-#{$name}-on-scheme,
+ .#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar($name, "", "-on-scheme-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name}-on-scheme,
+ .#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar($name, "", "-on-scheme-l")},
+ )
+ );
+ }
+
+ // Light
+ .#{iv.$helpers-prefix}color-#{$name}-light,
+ .#{iv.$helpers-has-prefix}text-#{$name}-light {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar($name, "", "-light-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name}-light,
+ .#{iv.$helpers-has-prefix}background-#{$name}-light {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar($name, "", "-light-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}color-#{$name}-light-invert,
+ .#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar($name, "", "-light-invert-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name}-light-invert,
+ .#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar($name, "", "-light-invert-l")},
+ )
+ );
+ }
+
+ // Dark
+ .#{iv.$helpers-prefix}color-#{$name}-dark,
+ .#{iv.$helpers-has-prefix}text-#{$name}-dark {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar($name, "", "-dark-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name}-dark,
+ .#{iv.$helpers-has-prefix}background-#{$name}-dark {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar($name, "", "-dark-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}color-#{$name}-dark-invert,
+ .#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar($name, "", "-dark-invert-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name}-dark-invert,
+ .#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar($name, "", "-dark-invert-l")},
+ )
+ );
+ }
+
+ // Soft/Bold
+ .#{iv.$helpers-prefix}color-#{$name}-soft,
+ .#{iv.$helpers-has-prefix}text-#{$name}-soft {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar("soft-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name}-soft,
+ .#{iv.$helpers-has-prefix}background-#{$name}-soft {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar("soft-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}color-#{$name}-bold,
+ .#{iv.$helpers-has-prefix}text-#{$name}-bold {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar("bold-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name}-bold,
+ .#{iv.$helpers-has-prefix}background-#{$name}-bold {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar("bold-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}color-#{$name}-soft-invert,
+ .#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar("soft-invert-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name}-soft-invert,
+ .#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar("soft-invert-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}color-#{$name}-bold-invert,
+ .#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar("bold-invert-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name}-bold-invert,
+ .#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar("bold-invert-l")},
+ )
+ );
+ }
+
+ @each $digit in $digits {
+ .#{iv.$helpers-prefix}color-#{$name}-#{$digit},
+ .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar($name, "", "-#{$digit}-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name}-#{$digit},
+ .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar($name, "", "-#{$digit}-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}color-#{$name}-#{$digit}-invert,
+ .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
+ @include cv.register-vars(
+ (
+ "color-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
+ )
+ );
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name}-#{$digit}-invert,
+ .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
+ @include cv.register-vars(
+ (
+ "background-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
+ )
+ );
+ }
+ }
+
+ // Hover
+ a.#{iv.$helpers-prefix}color-#{$name},
+ button.#{iv.$helpers-prefix}color-#{$name},
+ #{iv.$helpers-prefix}color-#{$name}.is-hoverable,
+ a.#{iv.$helpers-has-prefix}text-#{$name},
+ button.#{iv.$helpers-has-prefix}text-#{$name},
+ #{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
+ &:hover,
+ &:focus-visible {
+ @include cv.register-vars(
+ (
+ "color-l-delta": #{cv.getVar("hover-color-l-delta")},
+ )
+ );
+ }
+
+ &:active {
+ @include cv.register-vars(
+ (
+ "color-l-delta": #{cv.getVar("active-color-l-delta")},
+ )
+ );
+ }
+ }
+
+ a.#{iv.$helpers-prefix}background-#{$name},
+ button.#{iv.$helpers-prefix}background-#{$name},
+ #{iv.$helpers-prefix}background-#{$name}.is-hoverable,
+ a.#{iv.$helpers-has-prefix}background-#{$name},
+ button.#{iv.$helpers-has-prefix}background-#{$name},
+ #{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
+ &:hover,
+ &:focus-visible {
+ @include cv.register-vars(
+ (
+ "background-l-delta": #{cv.getVar("hover-background-l-delta")},
+ )
+ );
+ }
+
+ &:active {
+ @include cv.register-vars(
+ (
+ "background-l-delta": #{cv.getVar("active-background-l-delta")},
+ )
+ );
+ }
+ }
+
+ // Palettes
+ .#{iv.$helpers-prefix}palette-#{$name} {
+ --h: #{cv.getVar($name, "", "-h")};
+ --s: #{cv.getVar($name, "", "-s")};
+ --l: #{cv.getVar($name, "", "-l")};
+ --color: hsl(var(--h), var(--s), var(--l));
+
+ @each $digit in $digits {
+ --#{$digit}-l: #{cv.getVar($name, "", "-#{$digit}-l")};
+ --color-#{$digit}: hsl(var(--h), var(--s), var(--#{$digit}-l));
+ }
+ }
+}
+
+@each $name, $shade in dv.$shades {
+ .#{iv.$helpers-prefix}color-#{$name},
+ .#{iv.$helpers-has-prefix}text-#{$name} {
+ color: $shade !important;
+ }
+
+ .#{iv.$helpers-prefix}background-#{$name},
+ .#{iv.$helpers-has-prefix}background-#{$name} {
+ background-color: $shade !important;
+ }
+}
diff --git a/style/bulma/sass/helpers/flexbox.scss b/style/bulma/sass/helpers/flexbox.scss
new file mode 100644
index 0000000..1265e99
--- /dev/null
+++ b/style/bulma/sass/helpers/flexbox.scss
@@ -0,0 +1,62 @@
+@use "../utilities/initial-variables" as iv;
+
+$flex-direction-values: row, row-reverse, column, column-reverse;
+
+@each $value in $flex-direction-values {
+ .#{iv.$helpers-prefix}flex-direction-#{$value} {
+ flex-direction: $value !important;
+ }
+}
+
+$flex-wrap-values: nowrap, wrap, wrap-reverse;
+
+@each $value in $flex-wrap-values {
+ .#{iv.$helpers-prefix}flex-wrap-#{$value} {
+ flex-wrap: $value !important;
+ }
+}
+
+$justify-content-values: flex-start, flex-end, center, space-between,
+ space-around, space-evenly, start, end, left, right;
+
+@each $value in $justify-content-values {
+ .#{iv.$helpers-prefix}justify-content-#{$value} {
+ justify-content: $value !important;
+ }
+}
+
+$align-content-values: flex-start, flex-end, center, space-between, space-around,
+ space-evenly, stretch, start, end, baseline;
+
+@each $value in $align-content-values {
+ .#{iv.$helpers-prefix}align-content-#{$value} {
+ align-content: $value !important;
+ }
+}
+
+$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end,
+ self-start, self-end;
+
+@each $value in $align-items-values {
+ .#{iv.$helpers-prefix}align-items-#{$value} {
+ align-items: $value !important;
+ }
+}
+
+$align-self-values: auto, flex-start, flex-end, center, baseline, stretch;
+
+@each $value in $align-self-values {
+ .#{iv.$helpers-prefix}align-self-#{$value} {
+ align-self: $value !important;
+ }
+}
+
+$flex-operators: grow, shrink;
+
+@each $operator in $flex-operators {
+ @for $i from 0 through 5 {
+ .#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
+ flex-#{$operator}: $i !important;
+ }
+ }
+}
diff --git a/style/bulma/sass/helpers/float.scss b/style/bulma/sass/helpers/float.scss
new file mode 100644
index 0000000..6eecebe
--- /dev/null
+++ b/style/bulma/sass/helpers/float.scss
@@ -0,0 +1,28 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+.#{iv.$helpers-prefix}clearfix {
+ @include mx.clearfix;
+}
+
+.#{iv.$helpers-prefix}float-left,
+.#{iv.$helpers-prefix}pulled-left {
+ float: left !important;
+}
+
+.#{iv.$helpers-prefix}float-right,
+.#{iv.$helpers-prefix}pulled-right {
+ float: right !important;
+}
+
+.#{iv.$helpers-prefix}float-none {
+ float: none !important;
+}
+
+$clears: both left none right;
+
+@each $clear in $clears {
+ .#{iv.$helpers-prefix}clear-#{$clear} {
+ clear: $clear !important;
+ }
+}
diff --git a/style/bulma/sass/helpers/gap.scss b/style/bulma/sass/helpers/gap.scss
new file mode 100644
index 0000000..cbff6c3
--- /dev/null
+++ b/style/bulma/sass/helpers/gap.scss
@@ -0,0 +1,24 @@
+@use "sass:math";
+@use "sass:string";
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$helpers-prefix}gapless {
+ gap: 0 !important;
+}
+
+$gaps: "gap", "column-gap", "row-gap";
+$gap-base: 0.5rem;
+
+@each $gap in $gaps {
+ @for $i from 0 through 8 {
+ .#{iv.$helpers-prefix}#{$gap}-#{$i} {
+ #{$gap}: ($gap-base * $i) !important;
+ }
+
+ @if $i < 8 {
+ .#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 {
+ #{$gap}: ($gap-base * $i + math.div($gap-base, 2)) !important;
+ }
+ }
+ }
+}
diff --git a/style/bulma/sass/helpers/other.scss b/style/bulma/sass/helpers/other.scss
new file mode 100644
index 0000000..90e0edd
--- /dev/null
+++ b/style/bulma/sass/helpers/other.scss
@@ -0,0 +1,19 @@
+@use "../utilities/extends";
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$helpers-prefix}radiusless {
+ border-radius: 0 !important;
+}
+
+.#{iv.$helpers-prefix}shadowless {
+ box-shadow: none !important;
+}
+
+.#{iv.$helpers-prefix}clickable {
+ cursor: pointer !important;
+ pointer-events: all !important;
+}
+
+.#{iv.$helpers-prefix}unselectable {
+ @extend %unselectable;
+}
diff --git a/style/bulma/sass/helpers/overflow.scss b/style/bulma/sass/helpers/overflow.scss
new file mode 100644
index 0000000..f618600
--- /dev/null
+++ b/style/bulma/sass/helpers/overflow.scss
@@ -0,0 +1,21 @@
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$helpers-prefix}clipped {
+ overflow: hidden !important;
+}
+
+$overflows: auto clip hidden scroll visible;
+
+@each $overflow in $overflows {
+ .#{iv.$helpers-prefix}overflow-#{$overflow} {
+ overflow: $overflow !important;
+ }
+
+ .#{iv.$helpers-prefix}overflow-x-#{$overflow} {
+ overflow-x: $overflow !important;
+ }
+
+ .#{iv.$helpers-prefix}overflow-y-#{$overflow} {
+ overflow-y: $overflow !important;
+ }
+}
diff --git a/style/bulma/sass/helpers/position.scss b/style/bulma/sass/helpers/position.scss
new file mode 100644
index 0000000..794b3d3
--- /dev/null
+++ b/style/bulma/sass/helpers/position.scss
@@ -0,0 +1,19 @@
+@use "../utilities/extends";
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$helpers-prefix}overlay,
+.#{iv.$helpers-prefix}overlay {
+ @extend %overlay;
+}
+
+.#{iv.$helpers-prefix}relative {
+ position: relative !important;
+}
+
+$positions: absolute fixed relative static sticky;
+
+@each $position in $positions {
+ .#{iv.$helpers-prefix}position-#{$position} {
+ position: $position !important;
+ }
+}
diff --git a/style/bulma/sass/helpers/spacing.scss b/style/bulma/sass/helpers/spacing.scss
new file mode 100644
index 0000000..e825c6c
--- /dev/null
+++ b/style/bulma/sass/helpers/spacing.scss
@@ -0,0 +1,64 @@
+@use "../utilities/initial-variables" as iv;
+
+.marginless {
+ margin: 0 !important;
+}
+
+.paddingless {
+ padding: 0 !important;
+}
+
+$spacing-shortcuts: (
+ "margin": "m",
+ "padding": "p",
+) !default;
+$spacing-directions: (
+ "top": "t",
+ "right": "r",
+ "bottom": "b",
+ "left": "l",
+) !default;
+$spacing-horizontal: "x" !default;
+$spacing-vertical: "y" !default;
+$spacing-values: (
+ "0": 0,
+ "1": 0.25rem,
+ "2": 0.5rem,
+ "3": 0.75rem,
+ "4": 1rem,
+ "5": 1.5rem,
+ "6": 3rem,
+ "auto": auto,
+) !default;
+
+@each $property, $shortcut in $spacing-shortcuts {
+ @each $name, $value in $spacing-values {
+ // All directions
+ .#{$shortcut}-#{$name} {
+ #{$property}: $value !important;
+ }
+
+ // Cardinal directions
+ @each $direction, $suffix in $spacing-directions {
+ .#{$shortcut}#{$suffix}-#{$name} {
+ #{$property}-#{$direction}: $value !important;
+ }
+ }
+
+ // Horizontal axis
+ @if $spacing-horizontal != null {
+ .#{$shortcut}#{$spacing-horizontal}-#{$name} {
+ #{$property}-left: $value !important;
+ #{$property}-right: $value !important;
+ }
+ }
+
+ // Vertical axis
+ @if $spacing-vertical != null {
+ .#{$shortcut}#{$spacing-vertical}-#{$name} {
+ #{$property}-top: $value !important;
+ #{$property}-bottom: $value !important;
+ }
+ }
+ }
+}
diff --git a/style/bulma/sass/helpers/typography.scss b/style/bulma/sass/helpers/typography.scss
new file mode 100644
index 0000000..2f9d029
--- /dev/null
+++ b/style/bulma/sass/helpers/typography.scss
@@ -0,0 +1,168 @@
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+@mixin typography-size($target: "") {
+ @each $size in dv.$sizes {
+ $i: index(dv.$sizes, $size);
+
+ .#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} {
+ font-size: $size !important;
+ }
+ }
+}
+
+@include typography-size;
+
+@include mx.mobile {
+ @include typography-size("mobile");
+}
+
+@include mx.tablet {
+ @include typography-size("tablet");
+}
+
+@include mx.touch {
+ @include typography-size("touch");
+}
+
+@include mx.desktop {
+ @include typography-size("desktop");
+}
+
+@include mx.widescreen {
+ @include typography-size("widescreen");
+}
+
+@include mx.fullhd {
+ @include typography-size("fullhd");
+}
+
+$alignments: (
+ "centered": "center",
+ "justified": "justify",
+ "left": "left",
+ "right": "right",
+);
+
+@each $alignment, $text-align in $alignments {
+ .#{iv.$helpers-has-prefix}text-#{$alignment} {
+ text-align: #{$text-align} !important;
+ }
+}
+
+@each $alignment, $text-align in $alignments {
+ @include mx.mobile {
+ .#{iv.$helpers-has-prefix}text-#{$alignment}-mobile {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+ @include mx.tablet {
+ .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+ @include mx.tablet-only {
+ .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+ @include mx.touch {
+ .#{iv.$helpers-has-prefix}text-#{$alignment}-touch {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+ @include mx.desktop {
+ .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+ @include mx.desktop-only {
+ .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+ @include mx.widescreen {
+ .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+ @include mx.widescreen-only {
+ .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+ @include mx.fullhd {
+ .#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd {
+ text-align: #{$text-align} !important;
+ }
+ }
+}
+
+.#{iv.$helpers-prefix}capitalized {
+ text-transform: capitalize !important;
+}
+
+.#{iv.$helpers-prefix}lowercase {
+ text-transform: lowercase !important;
+}
+
+.#{iv.$helpers-prefix}uppercase {
+ text-transform: uppercase !important;
+}
+
+.#{iv.$helpers-prefix}italic {
+ font-style: italic !important;
+}
+
+.#{iv.$helpers-prefix}underlined {
+ text-decoration: underline !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-light {
+ font-weight: iv.$weight-light !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-normal {
+ font-weight: iv.$weight-normal !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-medium {
+ font-weight: iv.$weight-medium !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-semibold {
+ font-weight: iv.$weight-semibold !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-bold {
+ font-weight: iv.$weight-bold !important;
+}
+
+.#{iv.$helpers-prefix}family-primary {
+ font-family: dv.$family-primary !important;
+}
+
+.#{iv.$helpers-prefix}family-secondary {
+ font-family: dv.$family-secondary !important;
+}
+
+.#{iv.$helpers-prefix}family-sans-serif {
+ font-family: iv.$family-sans-serif !important;
+}
+
+.#{iv.$helpers-prefix}family-monospace {
+ font-family: iv.$family-monospace !important;
+}
+
+.#{iv.$helpers-prefix}family-code {
+ font-family: dv.$family-code !important;
+}
diff --git a/style/bulma/sass/helpers/visibility.scss b/style/bulma/sass/helpers/visibility.scss
new file mode 100644
index 0000000..85124af
--- /dev/null
+++ b/style/bulma/sass/helpers/visibility.scss
@@ -0,0 +1,221 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+.#{iv.$helpers-prefix}display-none,
+.#{iv.$helpers-prefix}hidden {
+ display: none !important;
+}
+
+$displays: block flex inline inline-block inline-flex grid;
+
+@each $display in $displays {
+ .#{iv.$helpers-prefix}display-#{$display},
+ .#{iv.$helpers-prefix}#{$display} {
+ display: $display !important;
+ }
+
+ @include mx.mobile {
+ .#{iv.$helpers-prefix}display-#{$display}-mobile,
+ .#{iv.$helpers-prefix}#{$display}-mobile {
+ display: $display !important;
+ }
+ }
+
+ @include mx.tablet {
+ .#{iv.$helpers-prefix}display-#{$display}-tablet,
+ .#{iv.$helpers-prefix}#{$display}-tablet {
+ display: $display !important;
+ }
+ }
+
+ @include mx.tablet-only {
+ .#{iv.$helpers-prefix}display-#{$display}-tablet-only,
+ .#{iv.$helpers-prefix}#{$display}-tablet-only {
+ display: $display !important;
+ }
+ }
+
+ @include mx.touch {
+ .#{iv.$helpers-prefix}display-#{$display}-touch,
+ .#{iv.$helpers-prefix}#{$display}-touch {
+ display: $display !important;
+ }
+ }
+
+ @include mx.desktop {
+ .#{iv.$helpers-prefix}display-#{$display}-desktop,
+ .#{iv.$helpers-prefix}#{$display}-desktop {
+ display: $display !important;
+ }
+ }
+
+ @include mx.desktop-only {
+ .#{iv.$helpers-prefix}display-#{$display}-desktop-only,
+ .#{iv.$helpers-prefix}#{$display}-desktop-only {
+ display: $display !important;
+ }
+ }
+
+ @include mx.widescreen {
+ .#{iv.$helpers-prefix}display-#{$display}-widescreen,
+ .#{iv.$helpers-prefix}#{$display}-widescreen {
+ display: $display !important;
+ }
+ }
+
+ @include mx.widescreen-only {
+ .#{iv.$helpers-prefix}display-#{$display}-widescreen-only,
+ .#{iv.$helpers-prefix}#{$display}-widescreen-only {
+ display: $display !important;
+ }
+ }
+
+ @include mx.fullhd {
+ .#{iv.$helpers-prefix}display-#{$display}-fullhd,
+ .#{iv.$helpers-prefix}#{$display}-fullhd {
+ display: $display !important;
+ }
+ }
+}
+
+.#{iv.$helpers-prefix}sr-only {
+ border: none !important;
+ clip: rect(0, 0, 0, 0) !important;
+ height: 0.01em !important;
+ overflow: hidden !important;
+ padding: 0 !important;
+ position: absolute !important;
+ white-space: nowrap !important;
+ width: 0.01em !important;
+}
+
+@include mx.mobile {
+ .#{iv.$helpers-prefix}display-none-mobile,
+ .#{iv.$helpers-prefix}hidden-mobile {
+ display: none !important;
+ }
+}
+
+@include mx.tablet {
+ .#{iv.$helpers-prefix}display-none-tablet,
+ .#{iv.$helpers-prefix}hidden-tablet {
+ display: none !important;
+ }
+}
+
+@include mx.tablet-only {
+ .#{iv.$helpers-prefix}display-none-tablet-only,
+ .#{iv.$helpers-prefix}hidden-tablet-only {
+ display: none !important;
+ }
+}
+
+@include mx.touch {
+ .#{iv.$helpers-prefix}display-none-touch,
+ .#{iv.$helpers-prefix}hidden-touch {
+ display: none !important;
+ }
+}
+
+@include mx.desktop {
+ .#{iv.$helpers-prefix}display-none-desktop,
+ .#{iv.$helpers-prefix}hidden-desktop {
+ display: none !important;
+ }
+}
+
+@include mx.desktop-only {
+ .#{iv.$helpers-prefix}display-none-desktop-only,
+ .#{iv.$helpers-prefix}hidden-desktop-only {
+ display: none !important;
+ }
+}
+
+@include mx.widescreen {
+ .#{iv.$helpers-prefix}display-none-widescreen,
+ .#{iv.$helpers-prefix}hidden-widescreen {
+ display: none !important;
+ }
+}
+
+@include mx.widescreen-only {
+ .#{iv.$helpers-prefix}display-none-widescreen-only,
+ .#{iv.$helpers-prefix}hidden-widescreen-only {
+ display: none !important;
+ }
+}
+
+@include mx.fullhd {
+ .#{iv.$helpers-prefix}display-none-fullhd,
+ .#{iv.$helpers-prefix}hidden-fullhd {
+ display: none !important;
+ }
+}
+
+.#{iv.$helpers-prefix}visibility-hidden,
+.#{iv.$helpers-prefix}invisible {
+ visibility: hidden !important;
+}
+
+@include mx.mobile {
+ .#{iv.$helpers-prefix}visibility-hidden-mobile,
+ .#{iv.$helpers-prefix}invisible-mobile {
+ visibility: hidden !important;
+ }
+}
+
+@include mx.tablet {
+ .#{iv.$helpers-prefix}visibility-hidden-tablet,
+ .#{iv.$helpers-prefix}invisible-tablet {
+ visibility: hidden !important;
+ }
+}
+
+@include mx.tablet-only {
+ .#{iv.$helpers-prefix}visibility-hidden-tablet-only,
+ .#{iv.$helpers-prefix}invisible-tablet-only {
+ visibility: hidden !important;
+ }
+}
+
+@include mx.touch {
+ .#{iv.$helpers-prefix}visibility-hidden-touch,
+ .#{iv.$helpers-prefix}invisible-touch {
+ visibility: hidden !important;
+ }
+}
+
+@include mx.desktop {
+ .#{iv.$helpers-prefix}visibility-hidden-desktop,
+ .#{iv.$helpers-prefix}invisible-desktop {
+ visibility: hidden !important;
+ }
+}
+
+@include mx.desktop-only {
+ .#{iv.$helpers-prefix}visibility-hidden-desktop-only,
+ .#{iv.$helpers-prefix}invisible-desktop-only {
+ visibility: hidden !important;
+ }
+}
+
+@include mx.widescreen {
+ .#{iv.$helpers-prefix}visibility-hidden-widescreen,
+ .#{iv.$helpers-prefix}invisible-widescreen {
+ visibility: hidden !important;
+ }
+}
+
+@include mx.widescreen-only {
+ .#{iv.$helpers-prefix}visibility-hidden-widescreen-only,
+ .#{iv.$helpers-prefix}invisible-widescreen-only {
+ visibility: hidden !important;
+ }
+}
+
+@include mx.fullhd {
+ .#{iv.$helpers-prefix}visibility-hidden-fullhd,
+ .#{iv.$helpers-prefix}invisible-fullhd {
+ visibility: hidden !important;
+ }
+}
diff --git a/style/bulma/sass/layout/_index.scss b/style/bulma/sass/layout/_index.scss
new file mode 100644
index 0000000..c28494d
--- /dev/null
+++ b/style/bulma/sass/layout/_index.scss
@@ -0,0 +1,9 @@
+/* Bulma Components */
+@charset "utf-8";
+
+@forward "container";
+@forward "footer";
+@forward "hero";
+@forward "level";
+@forward "media";
+@forward "section";
diff --git a/style/bulma/sass/layout/container.scss b/style/bulma/sass/layout/container.scss
new file mode 100644
index 0000000..a04a1b8
--- /dev/null
+++ b/style/bulma/sass/layout/container.scss
@@ -0,0 +1,51 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+$container-offset: 2 * iv.$gap !default;
+$container-max-width: iv.$fullhd !default;
+
+.#{iv.$class-prefix}container {
+ flex-grow: 1;
+ margin: 0 auto;
+ position: relative;
+ width: 100%;
+
+ &.#{iv.$class-prefix}is-fluid {
+ max-width: none !important;
+ padding-left: iv.$gap;
+ padding-right: iv.$gap;
+ width: 100%;
+ }
+
+ @include mx.desktop {
+ max-width: iv.$desktop - $container-offset;
+ }
+
+ @include mx.until-widescreen {
+ &.#{iv.$class-prefix}is-widescreen:not(.#{iv.$class-prefix}is-max-desktop) {
+ max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
+ }
+ }
+
+ @include mx.until-fullhd {
+ &.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-desktop):not(
+ .#{iv.$class-prefix}is-max-widescreen
+ ) {
+ max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
+ }
+ }
+
+ @include mx.widescreen {
+ &:not(.#{iv.$class-prefix}is-max-desktop) {
+ max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
+ }
+ }
+
+ @include mx.fullhd {
+ &:not(.#{iv.$class-prefix}is-max-desktop):not(
+ .#{iv.$class-prefix}is-max-widescreen
+ ) {
+ max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
+ }
+ }
+}
diff --git a/style/bulma/sass/layout/footer.scss b/style/bulma/sass/layout/footer.scss
new file mode 100644
index 0000000..bc9b6c8
--- /dev/null
+++ b/style/bulma/sass/layout/footer.scss
@@ -0,0 +1,23 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+
+$footer-background-color: cv.getVar("scheme-main-bis") !default;
+$footer-color: false !default;
+$footer-padding: 3rem 1.5rem 6rem !default;
+
+.#{iv.$class-prefix}footer {
+ @include cv.register-vars(
+ (
+ "footer-background-color": #{$footer-background-color},
+ "footer-color": #{$footer-color},
+ "footer-padding": #{$footer-padding},
+ )
+ );
+
+ background-color: cv.getVar("footer-background-color");
+ padding: cv.getVar("footer-padding");
+
+ @if $footer-color {
+ color: cv.getVar("footer-color");
+ }
+}
diff --git a/style/bulma/sass/layout/hero.scss b/style/bulma/sass/layout/hero.scss
new file mode 100644
index 0000000..3cd1cfd
--- /dev/null
+++ b/style/bulma/sass/layout/hero.scss
@@ -0,0 +1,270 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/extends";
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+$hero-body-padding: 3rem 1.5rem !default;
+$hero-body-padding-tablet: 3rem 3rem !default;
+$hero-body-padding-small: 1.5rem !default;
+$hero-body-padding-medium: 9rem 4.5rem !default;
+$hero-body-padding-large: 18rem 6rem !default;
+
+$hero-gradient-h-offset: 5deg;
+$hero-gradient-s-offset: 10%;
+$hero-gradient-l-offset: 5%;
+
+$hero-colors: dv.$colors !default;
+
+// Main container
+.#{iv.$class-prefix}hero {
+ @include cv.register-vars(
+ (
+ "hero-body-padding": #{$hero-body-padding},
+ "hero-body-padding-tablet": #{$hero-body-padding-tablet},
+ "hero-body-padding-small": #{$hero-body-padding-small},
+ "hero-body-padding-medium": #{$hero-body-padding-medium},
+ "hero-body-padding-large": #{$hero-body-padding-large},
+ )
+ );
+}
+
+.#{iv.$class-prefix}hero {
+ align-items: stretch;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .#{iv.$class-prefix}navbar {
+ background: none;
+ }
+
+ .#{iv.$class-prefix}tabs {
+ ul {
+ border-bottom: none;
+ }
+ }
+
+ // Colors
+ @each $name, $pair in $hero-colors {
+ &.#{iv.$class-prefix}is-#{$name} {
+ @include cv.register-vars(
+ (
+ "hero-h": #{cv.getVar($name, "", "-h")},
+ "hero-s": #{cv.getVar($name, "", "-s")},
+ "hero-background-l": #{cv.getVar($name, "", "-l")},
+ "hero-color-l": #{cv.getVar($name, "", "-invert-l")},
+ )
+ );
+
+ $background-color: hsl(
+ #{cv.getVar("hero-h")},
+ #{cv.getVar("hero-s")},
+ #{cv.getVar("hero-background-l")}
+ );
+ $color: hsl(
+ #{cv.getVar("hero-h")},
+ #{cv.getVar("hero-s")},
+ #{cv.getVar("hero-color-l")}
+ );
+
+ background-color: hsl(
+ #{cv.getVar("hero-h")},
+ #{cv.getVar("hero-s")},
+ #{cv.getVar("hero-background-l")}
+ );
+ color: $color;
+
+ .#{iv.$class-prefix}navbar {
+ @include cv.register-vars(
+ (
+ "navbar-item-color": $color,
+ "navbar-item-hover-background-color": $color,
+ "navbar-item-hover-color": $background-color,
+ "navbar-item-active-background-color": $color,
+ "navbar-item-active-color": $background-color,
+ )
+ );
+ }
+
+ .#{iv.$class-prefix}tabs {
+ @include cv.register-vars(
+ (
+ "tabs-link-color": $color,
+ "tabs-boxed-link-active-background-color": $color,
+ "tabs-boxed-link-active-border-color": $background-color,
+ "tabs-link-active-color": $background-color,
+ )
+ );
+ }
+
+ .#{iv.$class-prefix}subtitle {
+ @include cv.register-vars(
+ (
+ "subtitle-color": $color,
+ "subtitle-strong-color": $color,
+ )
+ );
+ }
+
+ .#{iv.$class-prefix}title {
+ @include cv.register-vars(
+ (
+ "title-color": $color,
+ "title-strong-color": $color,
+ )
+ );
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-bold {
+ $gradient-top-left: hsl(
+ calc(#{cv.getVar("hero-h")} - $hero-gradient-h-offset),
+ calc(#{cv.getVar("hero-s")} + $hero-gradient-s-offset),
+ calc(#{cv.getVar("hero-background-l")} + $hero-gradient-l-offset)
+ );
+ $gradient-middle: hsl(
+ #{cv.getVar("hero-h")},
+ #{cv.getVar("hero-s")},
+ #{cv.getVar("hero-background-l")}
+ );
+ $gradient-bottom-right: hsl(
+ calc(#{cv.getVar("hero-h")} + $hero-gradient-h-offset),
+ calc(#{cv.getVar("hero-s")} - $hero-gradient-s-offset),
+ calc(#{cv.getVar("hero-background-l")} - $hero-gradient-l-offset)
+ );
+
+ background-image: linear-gradient(
+ 141deg,
+ $gradient-top-left 0%,
+ $gradient-middle 71%,
+ $gradient-bottom-right 100%
+ );
+
+ @include mx.mobile {
+ .#{iv.$class-prefix}navbar-menu {
+ background-image: linear-gradient(
+ 141deg,
+ $gradient-top-left 0%,
+ $color 71%,
+ $gradient-bottom-right 100%
+ );
+ }
+ }
+ }
+ }
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ .#{iv.$class-prefix}hero-body {
+ padding: cv.getVar("hero-body-padding-small");
+ }
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ @include mx.tablet {
+ .#{iv.$class-prefix}hero-body {
+ padding: cv.getVar("hero-body-padding-medium");
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ @include mx.tablet {
+ .#{iv.$class-prefix}hero-body {
+ padding: cv.getVar("hero-body-padding-large");
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-halfheight,
+ &.#{iv.$class-prefix}is-fullheight,
+ &.#{iv.$class-prefix}is-fullheight-with-navbar {
+ .#{iv.$class-prefix}hero-body {
+ align-items: center;
+ display: flex;
+
+ & > .#{iv.$class-prefix}container {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+ }
+ }
+
+ &.#{iv.$class-prefix}is-halfheight {
+ min-height: 50vh;
+ }
+
+ &.#{iv.$class-prefix}is-fullheight {
+ min-height: 100vh;
+ }
+}
+
+// Components
+
+.#{iv.$class-prefix}hero-video {
+ @extend %overlay;
+ overflow: hidden;
+
+ video {
+ left: 50%;
+ min-height: 100%;
+ min-width: 100%;
+ position: absolute;
+ top: 50%;
+ transform: translate3d(-50%, -50%, 0);
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-transparent {
+ opacity: 0.3;
+ }
+
+ // Responsiveness
+ @include mx.mobile {
+ display: none;
+ }
+}
+
+.#{iv.$class-prefix}hero-buttons {
+ margin-top: 1.5rem;
+
+ // Responsiveness
+ @include mx.mobile {
+ .#{iv.$class-prefix}button {
+ display: flex;
+
+ &:not(:last-child) {
+ margin-bottom: 0.75rem;
+ }
+ }
+ }
+
+ @include mx.tablet {
+ display: flex;
+ justify-content: center;
+
+ .#{iv.$class-prefix}button:not(:last-child) {
+ margin-inline-end: 1.5rem;
+ }
+ }
+}
+
+// Containers
+
+.#{iv.$class-prefix}hero-head,
+.#{iv.$class-prefix}hero-foot {
+ flex-grow: 0;
+ flex-shrink: 0;
+}
+
+.#{iv.$class-prefix}hero-body {
+ flex-grow: 1;
+ flex-shrink: 0;
+ padding: cv.getVar("hero-body-padding");
+
+ @include mx.tablet {
+ padding: cv.getVar("hero-body-padding-tablet");
+ }
+}
diff --git a/style/bulma/sass/layout/level.scss b/style/bulma/sass/layout/level.scss
new file mode 100644
index 0000000..dbb5a47
--- /dev/null
+++ b/style/bulma/sass/layout/level.scss
@@ -0,0 +1,107 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$level-item-spacing: calc(#{cv.getVar("block-spacing")} * 0.5) !default;
+
+.#{iv.$class-prefix}level {
+ @extend %block;
+ @include cv.register-var("level-item-spacing", #{$level-item-spacing});
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: cv.getVar("level-item-spacing");
+
+ code {
+ border-radius: cv.getVar("radius");
+ }
+
+ img {
+ display: inline-block;
+ vertical-align: top;
+ }
+
+ // Modifiers
+ &.#{iv.$class-prefix}is-mobile {
+ display: flex;
+ flex-direction: row;
+
+ .#{iv.$class-prefix}level-left,
+ .#{iv.$class-prefix}level-right {
+ display: flex;
+ }
+
+ .#{iv.$class-prefix}level-item {
+ &:not(.#{iv.$class-prefix}is-narrow) {
+ flex-grow: 1;
+ }
+ }
+ }
+
+ // Responsiveness
+ @include mx.tablet {
+ display: flex;
+ flex-direction: row;
+
+ & > .#{iv.$class-prefix}level-item {
+ &:not(.#{iv.$class-prefix}is-narrow) {
+ flex-grow: 1;
+ }
+ }
+ }
+}
+
+.#{iv.$class-prefix}level-item {
+ align-items: center;
+ display: flex;
+ flex-basis: auto;
+ flex-grow: 0;
+ flex-shrink: 0;
+ justify-content: center;
+
+ .#{iv.$class-prefix}title,
+ .#{iv.$class-prefix}subtitle {
+ margin-bottom: 0;
+ }
+}
+
+.#{iv.$class-prefix}level-left,
+.#{iv.$class-prefix}level-right {
+ flex-basis: auto;
+ flex-grow: 0;
+ flex-shrink: 0;
+ gap: $level-item-spacing;
+
+ .#{iv.$class-prefix}level-item {
+ // Modifiers
+ &.#{iv.$class-prefix}is-flexible {
+ flex-grow: 1;
+ }
+ }
+}
+
+.#{iv.$class-prefix}level-left {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+
+ // Responsiveness
+ @include mx.tablet {
+ flex-direction: row;
+ }
+}
+
+.#{iv.$class-prefix}level-right {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+
+ // Responsiveness
+ @include mx.tablet {
+ flex-direction: row;
+ }
+}
diff --git a/style/bulma/sass/layout/media.scss b/style/bulma/sass/layout/media.scss
new file mode 100644
index 0000000..e65ced8
--- /dev/null
+++ b/style/bulma/sass/layout/media.scss
@@ -0,0 +1,106 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$media-border-color: hsla(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("border-l")},
+ 0.5
+) !default;
+$media-border-size: 1px !default;
+$media-spacing: 1rem !default;
+$media-spacing-large: 1.5rem !default;
+$media-content-spacing: 0.75rem !default;
+$media-level-1-spacing: 0.75rem !default;
+$media-level-1-content-spacing: 0.5rem !default;
+$media-level-2-spacing: 0.5rem !default;
+
+.#{iv.$class-prefix}media {
+ @extend %block;
+ @include cv.register-vars(
+ (
+ "media-border-color": #{$media-border-color},
+ "media-border-size": #{$media-border-size},
+ "media-spacing": #{$media-spacing},
+ "media-spacing-large": #{$media-spacing-large},
+ "media-content-spacing": #{$media-content-spacing},
+ "media-level-1-spacing": #{$media-level-1-spacing},
+ "media-level-1-content-spacing": #{$media-level-1-content-spacing},
+ "media-level-2-spacing": #{$media-level-2-spacing},
+ )
+ );
+ align-items: flex-start;
+ display: flex;
+ text-align: inherit;
+
+ .#{iv.$class-prefix}content:not(:last-child) {
+ margin-bottom: cv.getVar("media-content-spacing");
+ }
+
+ .#{iv.$class-prefix}media {
+ border-top-color: cv.getVar("media-border-color");
+ border-top-style: solid;
+ border-top-width: cv.getVar("media-border-size");
+ display: flex;
+ padding-top: cv.getVar("media-level-1-spacing");
+
+ .#{iv.$class-prefix}content:not(:last-child),
+ .#{iv.$class-prefix}control:not(:last-child) {
+ margin-bottom: cv.getVar("media-level-1-content-spacing");
+ }
+
+ .#{iv.$class-prefix}media {
+ padding-top: cv.getVar("media-level-2-spacing");
+
+ & + .#{iv.$class-prefix}media {
+ margin-top: cv.getVar("media-level-2-spacing");
+ }
+ }
+ }
+
+ & + .#{iv.$class-prefix}media {
+ border-top-color: cv.getVar("media-border-color");
+ border-top-style: solid;
+ border-top-width: cv.getVar("media-border-size");
+ margin-top: cv.getVar("media-spacing");
+ padding-top: cv.getVar("media-spacing");
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-large {
+ & + .#{iv.$class-prefix}media {
+ margin-top: cv.getVar("media-spacing-large");
+ padding-top: cv.getVar("media-spacing-large");
+ }
+ }
+}
+
+.#{iv.$class-prefix}media-left,
+.#{iv.$class-prefix}media-right {
+ flex-basis: auto;
+ flex-grow: 0;
+ flex-shrink: 0;
+}
+
+.#{iv.$class-prefix}media-left {
+ margin-inline-end: cv.getVar("media-spacing");
+}
+
+.#{iv.$class-prefix}media-right {
+ margin-inline-start: cv.getVar("media-spacing");
+}
+
+.#{iv.$class-prefix}media-content {
+ flex-basis: auto;
+ flex-grow: 1;
+ flex-shrink: 1;
+ text-align: inherit;
+}
+
+@include mx.mobile {
+ .#{iv.$class-prefix}media-content {
+ overflow-x: auto;
+ }
+}
diff --git a/style/bulma/sass/layout/section.scss b/style/bulma/sass/layout/section.scss
new file mode 100644
index 0000000..9d9bd5a
--- /dev/null
+++ b/style/bulma/sass/layout/section.scss
@@ -0,0 +1,34 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+$section-padding: 3rem 1.5rem !default;
+$section-padding-desktop: 3rem 3rem !default;
+$section-padding-medium: 9rem 4.5rem !default;
+$section-padding-large: 18rem 6rem !default;
+
+.#{iv.$class-prefix}section {
+ @include cv.register-vars(
+ (
+ "section-padding": #{$section-padding},
+ "section-padding-desktop": #{$section-padding-desktop},
+ "section-padding-medium": #{$section-padding-medium},
+ "section-padding-large": #{$section-padding-large},
+ )
+ );
+ padding: cv.getVar("section-padding");
+
+ // Responsiveness
+ @include mx.desktop {
+ padding: cv.getVar("section-padding-desktop");
+
+ // Sizes
+ &.#{iv.$class-prefix}is-medium {
+ padding: cv.getVar("section-padding-medium");
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ padding: cv.getVar("section-padding-large");
+ }
+ }
+}
diff --git a/style/bulma/sass/themes/_index.scss b/style/bulma/sass/themes/_index.scss
new file mode 100644
index 0000000..d4168f5
--- /dev/null
+++ b/style/bulma/sass/themes/_index.scss
@@ -0,0 +1,35 @@
+/* Bulma Themes */
+@charset "utf-8";
+
+@use "../utilities/css-variables" as cv;
+
+@use "light";
+@use "dark";
+@use "setup";
+
+:root {
+ @include light.light-theme;
+ @include setup.setup-theme;
+}
+
+// prefers-color-scheme: light
+@include cv.system-theme($name: "light") {
+ @include light.light-theme;
+}
+
+// prefers-color-scheme: dark
+@include cv.system-theme($name: "dark") {
+ @include dark.dark-theme;
+}
+
+// :root, [data-theme=light], .theme-light
+@include cv.bulma-theme($name: "light") {
+ @include light.light-theme;
+ @include setup.setup-theme;
+}
+
+// [data-theme=dark], .theme-dark
+@include cv.bulma-theme($name: "dark") {
+ @include dark.dark-theme;
+ @include setup.setup-theme;
+}
diff --git a/style/bulma/sass/themes/dark.scss b/style/bulma/sass/themes/dark.scss
new file mode 100644
index 0000000..65cf947
--- /dev/null
+++ b/style/bulma/sass/themes/dark.scss
@@ -0,0 +1,56 @@
+@use "sass:list";
+
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "setup";
+
+// The main lightness of this theme
+$scheme-main-l: 9%;
+$background-l: 14%;
+$text-l: 71%;
+
+// The main scheme color, used to make calculations
+$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
+$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
+$text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
+
+@mixin dark-theme {
+ @each $name, $color in dv.$colors {
+ $base: $color;
+
+ @if type-of($color == "list") {
+ $base: list.nth($color, 1);
+ }
+
+ @include cv.generate-on-scheme-colors($name, $base, $scheme-main);
+ }
+
+ @include cv.register-vars(
+ (
+ "scheme-brightness": "dark",
+ "scheme-main-l": $scheme-main-l,
+ "scheme-main-bis-l": $scheme-main-l + 2%,
+ "scheme-main-ter-l": $scheme-main-l + 4%,
+ "soft-l": iv.$dark-l,
+ "bold-l": iv.$light-l,
+ "soft-invert-l": iv.$light-l,
+ "bold-invert-l": iv.$dark-l,
+ "background-l": $background-l,
+ "border-weak-l": 21%,
+ "border-l": 24%,
+ "text-weak-l": 53%,
+ "text-l": $text-l,
+ "text-strong-l": 93%,
+ "text-title-l": 100%,
+ "hover-background-l-delta": 5%,
+ "active-background-l-delta": 10%,
+ "hover-border-l-delta": 10%,
+ "active-border-l-delta": 20%,
+ "hover-color-l-delta": 5%,
+ "active-color-l-delta": 10%,
+ )
+ );
+
+ @include cv.register-hsl("shadow", white);
+}
diff --git a/style/bulma/sass/themes/light.scss b/style/bulma/sass/themes/light.scss
new file mode 100644
index 0000000..67f94c7
--- /dev/null
+++ b/style/bulma/sass/themes/light.scss
@@ -0,0 +1,145 @@
+@use "sass:list";
+
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/functions" as fn;
+@use "setup";
+
+// The main lightness of this theme
+$scheme-main-l: 100%;
+
+// The main scheme color, used to make calculations
+$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
+
+@mixin light-theme {
+ @include cv.register-vars(
+ (
+ "scheme-h": iv.$scheme-h,
+ "scheme-s": iv.$scheme-s,
+ "light-l": iv.$light-l,
+ "light-invert-l": iv.$dark-l,
+ "dark-l": iv.$dark-l,
+ "dark-invert-l": iv.$light-l,
+ "soft-l": iv.$light-l,
+ "bold-l": iv.$dark-l,
+ "soft-invert-l": iv.$dark-l,
+ "bold-invert-l": iv.$light-l,
+
+ // Deltas
+ "hover-background-l-delta": -5%,
+ "active-background-l-delta": -10%,
+
+ "hover-border-l-delta": -10%,
+ "active-border-l-delta": -20%,
+
+ "hover-color-l-delta": -5%,
+ "active-color-l-delta": -10%,
+
+ "hover-shadow-a-delta": -0.05,
+ "active-shadow-a-delta": -0.1,
+
+ // Light only
+ "scheme-brightness": "light",
+ "scheme-main-l": $scheme-main-l,
+ "scheme-main-bis-l": 98%,
+ "scheme-main-ter-l": 96%,
+ "background-l": 96%,
+ "border-weak-l": 93%,
+ "border-l": 86%,
+ "text-weak-l": 48%,
+ "text-l": 29%,
+ "text-strong-l": 21%,
+ "text-title-l": 14%,
+ "scheme-invert-ter-l": 14%,
+ "scheme-invert-bis-l": 7%,
+ "scheme-invert-l": 4%,
+
+ // Typography
+ "family-primary": dv.$family-primary,
+ "family-secondary": dv.$family-secondary,
+ "family-code": dv.$family-code,
+ "size-small": dv.$size-small,
+ "size-normal": dv.$size-normal,
+ "size-medium": dv.$size-medium,
+ "size-large": dv.$size-large,
+ "weight-light": iv.$weight-light,
+ "weight-normal": iv.$weight-normal,
+ "weight-medium": iv.$weight-medium,
+ "weight-semibold": iv.$weight-semibold,
+ "weight-bold": iv.$weight-bold,
+ "weight-extrabold": iv.$weight-extrabold,
+
+ // Other
+ "block-spacing": iv.$block-spacing,
+ "duration": 294ms,
+ "easing": ease-out,
+ "radius-small": iv.$radius-small,
+ "radius": iv.$radius,
+ "radius-medium": iv.$radius-medium,
+ "radius-large": iv.$radius-large,
+ "radius-rounded": 9999px,
+ "speed": 86ms,
+
+ "loading-color": #{cv.getVar("border")},
+ "burger-h": #{cv.getVar("link-h")},
+ "burger-s": #{cv.getVar("link-s")},
+ "burger-l": #{cv.getVar("link-l")},
+ "burger-border-radius": 0.5em,
+ // Using px values to prevent half pixel issues
+ "burger-gap": 5px,
+ "burger-item-height": 2px,
+ "burger-item-width": 20px,
+ )
+ );
+
+ // Colors
+ $no-palette: ("white", "black", "light", "dark");
+
+ @each $name, $color in dv.$colors {
+ $base: $color;
+ $invert: null;
+ $light: null;
+ $dark: null;
+
+ @if type-of($color == "list") {
+ $base: list.nth($color, 1);
+
+ @if list.length($color) > 3 {
+ $invert: list.nth($color, 2);
+ $light: list.nth($color, 3);
+ $dark: list.nth($color, 4);
+ } @else if list.length($color) > 1 {
+ $invert: list.nth($color, 2);
+ }
+ }
+
+ @if list.index($no-palette, $name) {
+ @include cv.generate-basic-palette($name, $base, $invert);
+ } @else {
+ @include cv.generate-color-palette(
+ $name,
+ $base,
+ $scheme-main-l,
+ $invert,
+ $light,
+ $dark
+ );
+ }
+
+ @include cv.generate-on-scheme-colors($name, $base, $scheme-main);
+ }
+
+ // Shades
+ @each $name, $shade in dv.$shades {
+ @include cv.register-var($name, $shade);
+ }
+
+ @include cv.register-hsl("shadow", dv.$shadow-color);
+
+ @each $size in dv.$sizes {
+ $i: index(dv.$sizes, $size);
+ $name: "size-#{$i}";
+ @include cv.register-var($name, $size);
+ }
+}
diff --git a/style/bulma/sass/themes/setup.scss b/style/bulma/sass/themes/setup.scss
new file mode 100644
index 0000000..6caddf7
--- /dev/null
+++ b/style/bulma/sass/themes/setup.scss
@@ -0,0 +1,174 @@
+@use "../utilities/css-variables" as cv;
+
+@mixin setup-theme() {
+ @include cv.register-vars(
+ (
+ // Computed
+ "scheme-main":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-main-l")}
+ ),
+ "scheme-main-bis":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-main-bis-l")}
+ ),
+ "scheme-main-ter":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-main-ter-l")}
+ ),
+ "background":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("background-l")}
+ ),
+ "background-hover":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ calc(
+ #{cv.getVar("background-l")} + #{cv.getVar(
+ "hover-background-l-delta"
+ )}
+ )
+ ),
+ "background-active":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ calc(
+ #{cv.getVar("background-l")} + #{cv.getVar(
+ "active-background-l-delta"
+ )}
+ )
+ ),
+ "border-weak":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("border-weak-l")}
+ ),
+ "border":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("border-l")}
+ ),
+ "border-hover":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ calc(#{cv.getVar("border-l")} + #{cv.getVar("hover-border-l-delta")})
+ ),
+ "border-active":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ calc(#{cv.getVar("border-l")} + #{cv.getVar("active-border-l-delta")})
+ ),
+ "text-weak":
+ hsl(
+ #{cv.getVar("text-h")},
+ #{cv.getVar("text-s")},
+ #{cv.getVar("text-weak-l")}
+ ),
+ "text":
+ hsl(
+ #{cv.getVar("text-h")},
+ #{cv.getVar("text-s")},
+ #{cv.getVar("text-l")}
+ ),
+ "text-strong":
+ hsl(
+ #{cv.getVar("text-h")},
+ #{cv.getVar("text-s")},
+ #{cv.getVar("text-strong-l")}
+ ),
+ "scheme-invert-ter":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-invert-ter-l")}
+ ),
+ "scheme-invert-bis":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-invert-bis-l")}
+ ),
+ "scheme-invert":
+ hsl(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("scheme-invert-l")}
+ ),
+ "link":
+ hsl(
+ #{cv.getVar("link-h")},
+ #{cv.getVar("link-s")},
+ #{cv.getVar("link-l")}
+ ),
+ "link-text":
+ hsl(
+ #{cv.getVar("link-h")},
+ #{cv.getVar("link-s")},
+ #{cv.getVar("link-on-scheme-l")}
+ ),
+ "link-text-hover":
+ hsl(
+ #{cv.getVar("link-h")},
+ #{cv.getVar("link-s")},
+ calc(
+ #{cv.getVar("link-on-scheme-l")} + #{cv.getVar(
+ "hover-color-l-delta"
+ )}
+ )
+ ),
+ "link-text-active":
+ hsl(
+ #{cv.getVar("link-h")},
+ #{cv.getVar("link-s")},
+ calc(
+ #{cv.getVar("link-on-scheme-l")} + #{cv.getVar(
+ "active-color-l-delta"
+ )}
+ )
+ ),
+ "focus-h": #{cv.getVar("link-h")},
+ "focus-s": #{cv.getVar("link-s")},
+ "focus-l": #{cv.getVar("link-l")},
+ "focus-offset": 1px,
+ "focus-style": solid,
+ "focus-width": 2px,
+ "focus-shadow-size": 0 0 0 0.1875em,
+ "focus-shadow-alpha": 0.25,
+ "code":
+ hsl(
+ #{cv.getVar("danger-h")},
+ #{cv.getVar("danger-s")},
+ #{cv.getVar("danger-on-scheme-l")}
+ ),
+ "code-background": #{cv.getVar("background")},
+ "pre": #{cv.getVar("text")},
+ "pre-background": #{cv.getVar("background")},
+ "shadow": (
+ 0 0.5em 1em -0.125em hsla(#{cv.getVar("shadow-h")}, #{cv.getVar(
+ "shadow-s"
+ )}, #{cv.getVar("shadow-l")}, 0.1),
+ 0 0px 0 1px
+ hsla(
+ #{cv.getVar("shadow-h")},
+ #{cv.getVar("shadow-s")},
+ #{cv.getVar("shadow-l")},
+ 0.02
+ )
+ )
+ )
+ );
+}
diff --git a/style/bulma/sass/utilities/_index.scss b/style/bulma/sass/utilities/_index.scss
new file mode 100644
index 0000000..12e06bc
--- /dev/null
+++ b/style/bulma/sass/utilities/_index.scss
@@ -0,0 +1,7 @@
+/* Bulma Utilities */
+@charset "utf-8";
+
+@forward "initial-variables";
+@forward "functions";
+@forward "derived-variables";
+@forward "controls";
diff --git a/style/bulma/sass/utilities/controls.scss b/style/bulma/sass/utilities/controls.scss
new file mode 100644
index 0000000..5ad16dd
--- /dev/null
+++ b/style/bulma/sass/utilities/controls.scss
@@ -0,0 +1,85 @@
+@use "css-variables" as cv;
+@use "derived-variables" as dv;
+@use "initial-variables" as iv;
+
+$control-radius: cv.getVar("radius") !default;
+$control-radius-small: cv.getVar("radius-small") !default;
+
+$control-border-width: 1px !default;
+$control-size: cv.getVar("size-normal") !default;
+
+$control-height: 2.5em !default;
+$control-line-height: 1.5 !default;
+
+$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default;
+$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
+
+$control-focus-shadow-l: 50% !default;
+
+:root {
+ @include cv.register-vars(
+ (
+ "control-radius": #{$control-radius},
+ "control-radius-small": #{$control-radius-small},
+ "control-border-width": #{$control-border-width},
+ "control-height": #{$control-height},
+ "control-line-height": #{$control-line-height},
+ "control-padding-vertical": #{$control-padding-vertical},
+ "control-padding-horizontal": #{$control-padding-horizontal},
+ "control-size": #{$control-size},
+ "control-focus-shadow-l": #{$control-focus-shadow-l},
+ )
+ );
+}
+
+@mixin control {
+ align-items: center;
+ appearance: none;
+ border-color: transparent;
+ border-style: solid;
+ border-width: cv.getVar("control-border-width");
+ border-radius: cv.getVar("control-radius");
+ box-shadow: none;
+ display: inline-flex;
+ font-size: cv.getVar("control-size");
+ height: cv.getVar("control-height");
+ justify-content: flex-start;
+ line-height: cv.getVar("control-line-height");
+ padding-bottom: cv.getVar("control-padding-vertical");
+ padding-left: cv.getVar("control-padding-horizontal");
+ padding-right: cv.getVar("control-padding-horizontal");
+ padding-top: cv.getVar("control-padding-vertical");
+ position: relative;
+ transition-duration: cv.getVar("duration");
+ transition-property: background-color, border-color, box-shadow, color;
+ vertical-align: top;
+
+ // States
+ &:focus,
+ &:focus-visible,
+ &:focus-within,
+ &.#{iv.$class-prefix}is-focused,
+ &:active,
+ &.#{iv.$class-prefix}is-active {
+ outline: none;
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ cursor: not-allowed;
+ }
+}
+
+// The controls sizes use mixins so they can be used at different breakpoints
+@mixin control-small {
+ border-radius: $control-radius-small;
+ font-size: cv.getVar("size-small");
+}
+
+@mixin control-medium {
+ font-size: cv.getVar("size-medium");
+}
+
+@mixin control-large {
+ font-size: cv.getVar("size-large");
+}
diff --git a/style/bulma/sass/utilities/css-variables.scss b/style/bulma/sass/utilities/css-variables.scss
new file mode 100644
index 0000000..31feb61
--- /dev/null
+++ b/style/bulma/sass/utilities/css-variables.scss
@@ -0,0 +1,425 @@
+@use "sass:color";
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+
+@use "initial-variables" as iv;
+@use "functions" as fn;
+
+@function buildVarName($name, $prefix: "", $suffix: "") {
+ @return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
+}
+
+@function buildHslaString($name, $l, $a: 1) {
+ $lightness: getVar($name, "", "-l");
+ @if ($l) {
+ $lightness: $l;
+ }
+ @return "hsla(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$lightness}, #{$a})";
+}
+
+@function getVar($name, $prefix: "", $suffix: "") {
+ $varName: buildVarName($name, $prefix, $suffix);
+ @return var(#{$varName});
+}
+
+@function getVarWithBackup($name, $backup, $prefix: "", $suffix: "") {
+ $varName: buildVarName($name, $prefix, $suffix);
+ $backupName: buildVarName($backup, $prefix, $suffix);
+ @return var(#{$varName}, var(#{$backupName}));
+}
+
+@function getRgbaVar($name, $alpha, $prefix: "", $suffix: "") {
+ $varName: buildVarName($name, $prefix, $suffix);
+ @return unquote("rgba(var(#{$varName}), #{$alpha})");
+}
+
+@mixin register-var($name, $value, $prefix: "", $suffix: "") {
+ $varName: buildVarName($name, $prefix, $suffix);
+ #{$varName}: #{$value};
+}
+
+@mixin register-vars($vars, $prefix: "", $suffix: "") {
+ @each $name, $value in $vars {
+ @include register-var($name, $value, $prefix, $suffix);
+ }
+}
+
+@mixin register-rgb($name, $value) {
+ @include register-var(
+ $name,
+ (red($value), green($value), blue($value)),
+ "",
+ "-rgb"
+ );
+}
+
+@mixin register-hsl($name, $value) {
+ @include register-var($name, round(hue($value)), "", "-h");
+ @include register-var($name, round(saturation($value)), "", "-s");
+ @include register-var($name, round(lightness($value)), "", "-l");
+}
+
+@mixin generate-on-scheme-colors($name, $base, $scheme-main) {
+ // Accessibility Contrast System
+ $scheme-main-brightness: fn.bulmaColorBrightness($scheme-main);
+ $on-scheme-color: $base;
+ $fg-lum: fn.bulmaColorLuminance($on-scheme-color);
+ $bg-lum: fn.bulmaColorLuminance($scheme-main);
+ $ratio: 0;
+ $found-decent-color: false;
+
+ @if ($fg-lum > $bg-lum) {
+ @for $i from 0 through 20 {
+ $ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05));
+
+ @if $ratio > 5 {
+ $found-decent-color: true;
+ } @else {
+ $on-scheme-color: lighten($on-scheme-color, 5%);
+ $fg-lum: fn.bulmaColorLuminance($on-scheme-color);
+ }
+ }
+ } @else {
+ @for $i from 0 through 20 {
+ $ratio: math.div(($bg-lum + 0.05), ($fg-lum + 0.05));
+
+ @if $ratio > 5 {
+ $found-decent-color: true;
+ } @else {
+ $on-scheme-color: darken($on-scheme-color, 5%);
+ $fg-lum: fn.bulmaColorLuminance($on-scheme-color);
+ }
+ }
+ }
+
+ $on-scheme-lightness: lightness($on-scheme-color);
+ @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
+ $on-scheme-l: getVar($name, "", "-on-scheme-l");
+ @include register-var(
+ "#{$name}-on-scheme",
+ buildHslaString($name, $on-scheme-l)
+ );
+}
+
+@mixin v1-generate-on-scheme-colors($name, $base, $scheme-main) {
+ // Accessibility Contrast System
+ $scheme-main-brightness: fn.bulmaColorBrightness($scheme-main);
+ $on-scheme-color: $base;
+
+ @if ($scheme-main-brightness == "bright") {
+ @while (fn.bulmaEnoughContrast($on-scheme-color, #fff) == false) {
+ // We're on a light background, so we'll darken the test color step by step.
+ $on-scheme-color: darken($on-scheme-color, 5%);
+ }
+ } @else {
+ @while (fn.bulmaEnoughContrast($on-scheme-color, #000) == false) {
+ // We're on a dark background, so we'll lighten the test color step by step.
+ $on-scheme-color: lighten($on-scheme-color, 5%);
+ }
+ }
+
+ $on-scheme-lightness: lightness($on-scheme-color);
+ @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
+}
+
+@mixin register-base-color($name, $base) {
+ $hsla: buildHslaString($name, getVar($name, "", "-l"));
+ @include register-var($name, $hsla);
+ @include register-var($name, $hsla, "", "-base"); // Just for reference
+ @include register-rgb($name, $base);
+ @include register-hsl($name, $base);
+}
+
+@mixin generate-basic-palette($name, $base, $invert: null) {
+ @include register-base-color($name, $base);
+
+ @if $invert {
+ @include register-var($name, lightness($invert), "", "-invert-l");
+ @include register-var("#{$name}-invert", $invert);
+ }
+}
+
+@mixin generate-color-palette(
+ $name,
+ $base,
+ $scheme-main-l: 100%,
+ $invert: null,
+ $light: null,
+ $dark: null
+) {
+ $h: round(hue($base)); // Hue
+ $s: round(saturation($base)); // Saturation
+ $l: round(lightness($base)); // Lightness
+ $base-lum: fn.bulmaColorLuminance($base);
+ $l-base: round($l % 10); // Get lightness second digit: 53% -> 3%
+ $l-0: 0%; // 5% or less
+ $l-5: 5%; // More than 5%
+ $a: 1; // Alpha
+ $base-digits: "00";
+
+ // Calculate digits like "40" for the scheme-main
+ $scheme-l-0: 0%;
+ $scheme-l-base: round($scheme-main-l % 10);
+ $closest-5: math.round(math.div($scheme-main-l, 5)) * 5;
+ $pct-to-int: math.div($closest-5, 100%) * 100;
+ $scheme-main-digits: #{$pct-to-int};
+
+ // === STEP 1 ===
+ // Register the base colors
+ @include register-base-color($name, $base);
+
+ // === STEP 2 ===
+ // Generating 20 shades of the color
+
+ // 00: 0%, 1%, 2%
+ // 05: 3%, 4%, 5%, 6%, 7%
+ // 10: 8%, 9%
+
+ @if ($l-base < 3%) {
+ $l-0: $l-base;
+ $l-5: $l-base + 5%;
+ } @else if ($l-base < 8%) {
+ // $l-0: math.max($l-base - 5%, 0%);
+ $l-0: $l-base - 5%;
+ $l-5: $l-base;
+ } @else {
+ // $l-0: math.max($l-base - 10%, 0%);
+ $l-0: $l-base - 10%;
+ $l-5: $l-base - 5%;
+ }
+
+ $shades: ();
+
+ @for $i from 0 through 9 {
+ // if $l-base = 3%, then we get 3%, 13%, 23%, 33% etc.
+ $color-l-0: math.max($l-0 + $i * 10, 0%);
+
+ // if $l-base = 3%, then we get 8%, 18%, 28%, 38% etc.
+ $color-l-5: $l-5 + $i * 10;
+
+ $shades: map.set($shades, "#{$i}0", $color-l-0);
+ $shades: map.set($shades, "#{$i}5", $color-l-5);
+
+ @include register-var($name, $color-l-0, "", "-#{$i}0-l");
+ @include register-var($name, $color-l-5, "", "-#{$i}5-l");
+
+ @if $color-l-0 == $l {
+ $base-digits: "#{$i}0";
+ } @else if $color-l-5 == $l {
+ $base-digits: "#{$i}5";
+ }
+ }
+
+ $shades: map.set($shades, "100", 100%);
+ @include register-var($name, 100%, "", "-100-l");
+
+ // === STEP 3 ===
+ // Find accessible color combinations
+
+ $combos: ();
+
+ @each $digits-bg, $bg-l in $shades {
+ $background: hsl($h, $s, $bg-l);
+ $bg-lum: fn.bulmaColorLuminance($background);
+ $bg-is-light: $bg-lum > 0.55;
+ $candidates: ();
+ $found: false;
+
+ // If the background color is the base color
+ @if $bg-l == $l {
+ $base-digits: $digits-bg;
+
+ // Even if the base color as a background
+ // doesn't have an appropriate foreground,
+ // we still add to the list of "valid" contrast combos for now.
+ @if $bg-is-light {
+ $combos: map.set($combos, $base-digits, "10");
+ } @else {
+ $combos: map.set($combos, $base-digits, "100");
+ }
+ }
+
+ // We capture all contrast ratios for any given background
+ // using all foreground options
+ $current-best-digits: "00";
+ $current-best-ratio: 0;
+
+ @each $digits-fg, $fg-l in $shades {
+ $foreground: hsl($h, $s, $fg-l);
+ $ratio: 0;
+ $is-light-fg: false;
+
+ // Source: https://www.w3.org/TR/WCAG20-TECHS/G17.html
+ $fg-lum: fn.bulmaColorLuminance($foreground);
+
+ @if (lightness($foreground) > lightness($background)) {
+ $is-light-fg: true;
+ $ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05));
+ } @else {
+ $ratio: math.div(($bg-lum + 0.05), ($fg-lum + 0.05));
+ }
+
+ @if $ratio > 7 {
+ $candidates: list.append(
+ $candidates,
+ fn.bulmaStringToNumber($digits-fg)
+ );
+
+ @if ($is-light-fg) {
+ @if (not $found) {
+ // Store the background/foreground combination
+ $combos: map.set($combos, $digits-bg, $digits-fg);
+ $current-best-digits: $digits-fg;
+ $current-best-ratio: $ratio;
+ $found: true;
+ }
+ } @else {
+ $combos: map.set($combos, $digits-bg, $digits-fg);
+ $current-best-digits: $digits-fg;
+ $current-best-ratio: $ratio;
+ }
+ }
+ }
+
+ // We haven't found a decent ratio
+ @each $digits-fg, $fg-l in $shades {
+ @if (map.has-key($combos, $digits-bg) == false) {
+ @if ($bg-is-light) {
+ // Light background so we set a dark foreground
+ $combos: map.set($combos, $digits-bg, "00");
+ } @else {
+ // Dark background so we set a light foreground
+ $combos: map.set($combos, $digits-bg, "100");
+ }
+ }
+ }
+ }
+
+ // The output needs to be:
+ // --bulma-primary-invert-l: var(--bulma-primary-100-l);
+
+ @each $bg, $fg in $combos {
+ // Just using this loop to register all 20 digits
+ $bg-l: getVar($name, "", "-#{$bg}-l");
+ @include register-var("#{$name}-#{$bg}", buildHslaString($name, $bg-l));
+
+ // Register the lightness
+ @include register-var(
+ $name,
+ getVar($name, "", "-#{$fg}-l"),
+ "",
+ "-#{$bg}-invert-l"
+ );
+
+ // Resiter the color using that lightness
+ $bg-invert-l: getVar($name, "", "-#{$bg}-invert-l");
+ @include register-var(
+ "#{$name}-#{$bg}-invert",
+ buildHslaString($name, $bg-invert-l)
+ );
+ }
+
+ // If an invert color is provided by the user
+ @if $invert {
+ @include register-var($name, lightness($invert), "", "-invert-l");
+ @include register-var("#{$name}-invert", $invert);
+ } @else {
+ $base-invert-l-digits: map.get($combos, $base-digits);
+ @include register-var(
+ $name,
+ getVar($name, "", "-#{$base-invert-l-digits}-l"),
+ "",
+ "-invert-l"
+ );
+
+ $base-invert-l: getVar($name, "", "-invert-l");
+ @include register-var(
+ "#{$name}-invert",
+ buildHslaString($name, $base-invert-l)
+ );
+ }
+
+ // Good color on light background (90% lightness)
+ @if $light and $dark {
+ @include register-var($name, lightness($light), "", "-light-l");
+ @include register-var($name, lightness($light), "", "-dark-invert-l");
+ @include register-var("#{$name}-light", $light);
+ @include register-var("#{$name}-dark-invert", $light);
+
+ @include register-var($name, lightness($dark), "", "-dark-l");
+ @include register-var($name, lightness($dark), "", "-light-invert-l");
+ @include register-var("#{$name}-dark", $dark);
+ @include register-var("#{$name}-light-invert", $dark);
+ } @else {
+ @include register-var($name, getVar($name, "", "-90-l"), "", "-light-l");
+
+ $light-l: getVar($name, "", "-light-l");
+ @include register-var("#{$name}-light", buildHslaString($name, $light-l));
+
+ $light-invert-l-digits: map.get($combos, "90");
+ @include register-var(
+ $name,
+ getVar($name, "", "-#{$light-invert-l-digits}-l"),
+ "",
+ "-light-invert-l"
+ );
+
+ $light-invert-l: getVar($name, "", "-light-invert-l");
+ @include register-var(
+ "#{$name}-light-invert",
+ buildHslaString($name, $light-invert-l)
+ );
+
+ // Good color on dark background (10% lightness)
+ @include register-var($name, getVar($name, "", "-10-l"), "", "-dark-l");
+
+ $dark-l: getVar($name, "", "-dark-l");
+ @include register-var("#{$name}-dark", buildHslaString($name, $dark-l));
+
+ $dark-invert-l-digits: map.get($combos, "10");
+ @include register-var(
+ $name,
+ getVar($name, "", "-#{$dark-invert-l-digits}-l"),
+ "",
+ "-dark-invert-l"
+ );
+
+ $dark-invert-l: getVar($name, "", "-dark-invert-l");
+ @include register-var(
+ "#{$name}-dark-invert",
+ buildHslaString($name, $dark-invert-l)
+ );
+
+ // Soft and Bold colors
+ $soft-l: getVar("soft-l");
+ $soft-invert-l: getVar("soft-invert-l");
+ $bold-l: getVar("bold-l");
+ $bold-invert-l: getVar("bold-invert-l");
+ @include register-var("#{$name}-soft", buildHslaString($name, $soft-l));
+ @include register-var("#{$name}-bold", buildHslaString($name, $bold-l));
+ @include register-var(
+ "#{$name}-soft-invert",
+ buildHslaString($name, $soft-invert-l)
+ );
+ @include register-var(
+ "#{$name}-bold-invert",
+ buildHslaString($name, $bold-invert-l)
+ );
+ }
+}
+
+@mixin bulma-theme($name) {
+ [data-#{iv.$class-prefix}theme="#{$name}"],
+ .#{iv.$class-prefix}theme-#{$name} {
+ @content;
+ }
+}
+
+@mixin system-theme($name) {
+ @media (prefers-color-scheme: #{$name}) {
+ :root {
+ @content;
+ }
+ }
+}
diff --git a/style/bulma/sass/utilities/derived-variables.scss b/style/bulma/sass/utilities/derived-variables.scss
new file mode 100644
index 0000000..6f1440d
--- /dev/null
+++ b/style/bulma/sass/utilities/derived-variables.scss
@@ -0,0 +1,112 @@
+@use "initial-variables" as iv;
+@use "functions" as fn;
+
+// Scheme colors
+
+$scheme-main: iv.$white !default;
+$scheme-main-bis: iv.$white-bis !default;
+$scheme-main-ter: iv.$white-ter !default;
+$scheme-invert: iv.$black !default;
+$scheme-invert-bis: iv.$black-bis !default;
+$scheme-invert-ter: iv.$black-ter !default;
+
+// Text colors
+
+$text: iv.$grey-dark !default;
+$text-invert: fn.bulmaFindColorInvert($text) !default;
+$text-weak: iv.$grey !default;
+$text-strong: iv.$grey-darker !default;
+
+// Status colors
+
+$primary: iv.$turquoise !default;
+$info: iv.$cyan !default;
+$success: iv.$green !default;
+$warning: iv.$yellow !default;
+$danger: iv.$red !default;
+$light: iv.$white-ter !default;
+$dark: iv.$grey-darker !default;
+
+// Link colors
+
+$link: iv.$blue !default;
+
+// Decorative colors
+
+$background: iv.$white-ter !default;
+$border: iv.$grey-lighter !default;
+$border-weak: iv.$grey-lightest !default;
+
+// Code colors
+
+$code: iv.$red !default;
+$code-background: $background !default;
+
+$pre: $text !default;
+$pre-background: $background !default;
+
+// Typography
+
+$family-primary: iv.$family-sans-serif !default;
+$family-secondary: iv.$family-sans-serif !default;
+$family-code: iv.$family-monospace !default;
+
+$size-small: iv.$size-7 !default;
+$size-normal: iv.$size-6 !default;
+$size-medium: iv.$size-5 !default;
+$size-large: iv.$size-4 !default;
+
+// Effects
+
+$shadow-color: iv.$black !default;
+
+// Lists and maps
+$custom-colors: null !default;
+$custom-shades: null !default;
+
+$colors: fn.mergeColorMaps(
+ (
+ "white": (
+ iv.$white,
+ iv.$black,
+ ),
+ "black": (
+ iv.$black,
+ iv.$white,
+ ),
+ "light": (
+ $light,
+ $dark,
+ ),
+ "dark": (
+ $dark,
+ $light,
+ ),
+ "text": $text,
+ "primary": $primary,
+ "link": $link,
+ "info": $info,
+ "success": $success,
+ "warning": $warning,
+ "danger": $danger,
+ ),
+ $custom-colors
+) !default;
+
+$shades: fn.mergeColorMaps(
+ (
+ "black-bis": iv.$black-bis,
+ "black-ter": iv.$black-ter,
+ "grey-darker": iv.$grey-darker,
+ "grey-dark": iv.$grey-dark,
+ "grey": iv.$grey,
+ "grey-light": iv.$grey-light,
+ "grey-lighter": iv.$grey-lighter,
+ "white-ter": iv.$white-ter,
+ "white-bis": iv.$white-bis,
+ ),
+ $custom-shades
+) !default;
+
+$sizes: iv.$size-1 iv.$size-2 iv.$size-3 iv.$size-4 iv.$size-5 iv.$size-6
+ iv.$size-7 !default;
diff --git a/style/bulma/sass/utilities/extends.scss b/style/bulma/sass/utilities/extends.scss
new file mode 100644
index 0000000..42d05fe
--- /dev/null
+++ b/style/bulma/sass/utilities/extends.scss
@@ -0,0 +1,34 @@
+@use "controls";
+@use "mixins";
+
+%arrow {
+ @include mixins.arrow;
+}
+
+%block {
+ @include mixins.block;
+}
+
+%control {
+ @include controls.control;
+}
+
+%delete {
+ @include mixins.delete;
+}
+
+%loader {
+ @include mixins.loader;
+}
+
+%overlay {
+ @include mixins.overlay;
+}
+
+%reset {
+ @include mixins.reset;
+}
+
+%unselectable {
+ @include mixins.unselectable;
+}
diff --git a/style/bulma/sass/utilities/functions.scss b/style/bulma/sass/utilities/functions.scss
new file mode 100644
index 0000000..f19dae0
--- /dev/null
+++ b/style/bulma/sass/utilities/functions.scss
@@ -0,0 +1,258 @@
+@use "sass:list";
+@use "sass:math";
+
+@function mergeColorMaps($bulma-colors, $custom-colors) {
+ // We return at least Bulma's hard-coded colors
+ $merged-colors: $bulma-colors;
+
+ // We want a map as input
+ @if type-of($custom-colors) == "map" {
+ @each $name, $components in $custom-colors {
+ // The color name should be a string
+ // and the components either a single color
+ // or a colors list with at least one element
+ @if type-of($name) ==
+ "string" and
+ (type-of($components) == "list" or type-of($components) == "color") and
+ length($components) >=
+ 1
+ {
+ $color-base: null;
+ $color-invert: null;
+ $color-light: null;
+ $color-dark: null;
+ $value: null;
+
+ // The param can either be a single color
+ // or a list of 2 colors
+ @if type-of($components) == "color" {
+ $color-base: $components;
+ $color-invert: bulmaFindColorInvert($color-base);
+ $color-light: bulmaFindLightColor($color-base);
+ $color-dark: bulmaFindDarkColor($color-base);
+ } @else if type-of($components) == "list" {
+ $color-base: list.nth($components, 1);
+
+ // If Invert, Light and Dark are provided
+ @if length($components) > 3 {
+ $color-invert: list.nth($components, 2);
+ $color-light: list.nth($components, 3);
+ $color-dark: list.nth($components, 4);
+
+ // If only Invert and Light are provided
+ } @else if length($components) > 2 {
+ $color-invert: list.nth($components, 2);
+ $color-light: list.nth($components, 3);
+ $color-dark: bulmaFindDarkColor($color-base);
+
+ // If only Invert is provided
+ } @else {
+ $color-invert: list.nth($components, 2);
+ $color-light: bulmaFindLightColor($color-base);
+ $color-dark: bulmaFindDarkColor($color-base);
+ }
+ }
+
+ $value: $color-base, $color-invert, $color-light, $color-dark;
+
+ // We only want to merge the map if the color base is an actual color
+ @if type-of($color-base) == "color" {
+ // We merge this colors elements as map with Bulma's colors map
+ // (we can override them this way, no multiple definition for the same name)
+ // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
+ $merged-colors: map_merge(
+ $merged-colors,
+ (
+ $name: $value,
+ )
+ );
+ }
+ }
+ }
+ }
+
+ @return $merged-colors;
+}
+
+@function powerNumber($number, $exp) {
+ $value: 1;
+
+ @if $exp > 0 {
+ @for $i from 1 through $exp {
+ $value: $value * $number;
+ }
+ } @else if $exp < 0 {
+ @for $i from 1 through -$exp {
+ $value: math.div($value, $number);
+ }
+ }
+
+ @return $value;
+}
+
+@function bulmaColorLuminance($color) {
+ @if type-of($color) != "color" {
+ @return 0.55;
+ }
+
+ $color-rgb: (
+ "red": red($color),
+ "green": green($color),
+ "blue": blue($color),
+ );
+
+ @each $name, $value in $color-rgb {
+ $adjusted: 0;
+ $value: math.div($value, 255);
+
+ @if $value < 0.03928 {
+ $value: math.div($value, 12.92);
+ } @else {
+ $value: math.div($value + 0.055, 1.055);
+ $value: powerNumber($value, 2);
+ }
+
+ $color-rgb: map-merge(
+ $color-rgb,
+ (
+ $name: $value,
+ )
+ );
+ }
+
+ @return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") *
+ 0.7152 + map-get($color-rgb, "blue") * 0.0722;
+}
+
+@function bulmaFindColorInvert($color) {
+ @if bulmaColorLuminance($color) > 0.55 {
+ @return rgba(#000, 0.7);
+ } @else {
+ @return #fff;
+ }
+}
+
+@function bulmaFindLightColor($color, $l: 96%) {
+ @if type-of($color) == "color" {
+ $l: 96%;
+
+ @if lightness($color) > 96% {
+ $l: lightness($color);
+ }
+
+ @return change-color($color, $lightness: $l);
+ }
+
+ @return $background;
+}
+
+@function bulmaFindDarkColor($color, $base-l: 29%) {
+ @if type-of($color) == "color" {
+ $luminance: bulmaColorLuminance($color);
+ $luminance-delta: 0.53 - $luminance;
+ $target-l: round($base-l + $luminance-delta * 53);
+
+ @return change-color($color, $lightness: max($base-l, $target-l));
+ }
+
+ @return $text-strong;
+}
+
+@function bulmaRgba($color, $alpha) {
+ @if type-of($color) != "color" {
+ @return $color;
+ }
+
+ @return rgba($color, $alpha);
+}
+
+@function bulmaDarken($color, $amount) {
+ @if type-of($color) != "color" {
+ @return $color;
+ }
+
+ @return darken($color, $amount);
+}
+
+@function bulmaLighten($color, $amount) {
+ @if type-of($color) != "color" {
+ @return $color;
+ }
+
+ @return lighten($color, $amount);
+}
+
+@function bulmaColorBrightness($n) {
+ $color-brightness: round(
+ (red($n) * 299) + (green($n) * 587) + (blue($n) * 114) / 1000
+ );
+ $light-color: round(
+ (red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000
+ );
+
+ @if abs($color-brightness) < math.div($light-color, 2) {
+ @return "dark";
+ }
+
+ @return "bright";
+}
+
+@function bulmaEnoughContrast($foreground, $background) {
+ $r: (max(red($foreground), red($background))) -
+ (min(red($foreground), red($background)));
+ $g: (max(green($foreground), green($background))) -
+ (min(green($foreground), green($background)));
+ $b: (max(blue($foreground), blue($background))) -
+ (min(blue($foreground), blue($background)));
+ $sum-rgb: $r + $g + $b;
+
+ @if $sum-rgb < 500 {
+ @return false;
+ }
+
+ @return true;
+}
+
+// By Cory Simmons https://corysimmons.com/
+@function bulmaStringToNumber($value) {
+ @if type-of($value) == "number" {
+ @return $value;
+ } @else if type-of($value) != "string" {
+ $_: log("Value for `to-number` should be a number or a string.");
+ }
+
+ $result: 0;
+ $digits: 0;
+ $minus: str-slice($value, 1, 1) == "-";
+ $numbers: (
+ "0": 0,
+ "1": 1,
+ "2": 2,
+ "3": 3,
+ "4": 4,
+ "5": 5,
+ "6": 6,
+ "7": 7,
+ "8": 8,
+ "9": 9,
+ );
+
+ @for $i from if($minus, 2, 1) through str-length($value) {
+ $character: str-slice($value, $i, $i);
+
+ @if not(index(map-keys($numbers), $character) or $character == ".") {
+ @return to-length(if($minus, -$result, $result), str-slice($value, $i));
+ }
+
+ @if $character == "." {
+ $digits: 1;
+ } @else if $digits == 0 {
+ $result: $result * 10 + map-get($numbers, $character);
+ } @else {
+ $digits: $digits * 10;
+ $result: $result + map-get($numbers, $character) / $digits;
+ }
+ }
+
+ @return if($minus, -$result, $result);
+}
diff --git a/style/bulma/sass/utilities/initial-variables.scss b/style/bulma/sass/utilities/initial-variables.scss
new file mode 100644
index 0000000..7bd4b53
--- /dev/null
+++ b/style/bulma/sass/utilities/initial-variables.scss
@@ -0,0 +1,155 @@
+// Scheme Hue and Saturation
+
+$scheme-h: 221;
+$scheme-s: 14%;
+$dark-l: 20%;
+$light-l: 90%;
+
+// Colors
+
+$black: hsl(221, 14%, 4%) !default;
+$black-bis: hsl(221, 14%, 9%) !default;
+$black-ter: hsl(221, 14%, 14%) !default;
+
+$grey-darker: hsl(221, 14%, 21%) !default;
+$grey-dark: hsl(221, 14%, 29%) !default;
+$grey: hsl(221, 14%, 48%) !default;
+$grey-light: hsl(221, 14%, 71%) !default;
+$grey-lighter: hsl(221, 14%, 86%) !default;
+$grey-lightest: hsl(221, 14%, 93%) !default;
+
+$white-ter: hsl(221, 14%, 96%) !default;
+$white-bis: hsl(221, 14%, 98%) !default;
+$white: hsl(221, 14%, 100%) !default;
+
+$orange: hsl(14, 100%, 53%) !default;
+$yellow: hsl(42, 100%, 53%) !default;
+$green: hsl(153, 53%, 53%) !default;
+$turquoise: hsl(171, 100%, 41%) !default;
+$cyan: hsl(198, 100%, 70%) !default;
+$blue: hsl(233, 100%, 63%) !default;
+$purple: hsl(271, 100%, 71%) !default;
+$red: hsl(348, 100%, 70%) !default;
+
+// Typography
+
+$family-sans-serif: "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+ "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
+$family-monospace: "Inconsolata", "Hack", "SF Mono", "Roboto Mono",
+ "Source Code Pro", "Ubuntu Mono", monospace !default;
+$render-mode: optimizeLegibility !default;
+
+$size-1: 3rem !default;
+$size-2: 2.5rem !default;
+$size-3: 2rem !default;
+$size-4: 1.5rem !default;
+$size-5: 1.25rem !default;
+$size-6: 1rem !default;
+$size-7: 0.75rem !default;
+
+$weight-light: 300 !default;
+$weight-normal: 400 !default;
+$weight-medium: 500 !default;
+$weight-semibold: 600 !default;
+$weight-bold: 700 !default;
+$weight-extrabold: 800 !default;
+
+// Spacing
+
+$block-spacing: 1.5rem !default;
+$aspect-ratios: (
+ (1, 1),
+ (5, 4),
+ (4, 3),
+ (3, 2),
+ (5, 3),
+ (16, 9),
+ (2, 1),
+ (3, 1),
+ (4, 5),
+ (3, 4),
+ (2, 3),
+ (3, 5),
+ (9, 16),
+ (1, 2),
+ (1, 3)
+) !default;
+
+// Responsiveness
+
+// The container horizontal gap, which acts as the offset for breakpoints
+$gap: 32px !default;
+
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+$tablet: 769px !default;
+
+// 960px container + 4rem
+$desktop: 960px + 2 * $gap !default;
+
+// 1152px container + 4rem
+$widescreen: 1152px + 2 * $gap !default;
+$widescreen-enabled: true !default;
+
+// 1344px container + 4rem
+$fullhd: 1344px + 2 * $gap !default;
+$fullhd-enabled: true !default;
+$breakpoints: (
+ "mobile": (
+ "until": $tablet,
+ ),
+ "tablet": (
+ "from": $tablet,
+ ),
+ "tablet-only": (
+ "from": $tablet,
+ "until": $desktop,
+ ),
+ "touch": (
+ "from": $desktop,
+ ),
+ "desktop": (
+ "from": $desktop,
+ ),
+ "desktop-only": (
+ "from": $desktop,
+ "until": $widescreen,
+ ),
+ "until-widescreen": (
+ "until": $widescreen,
+ ),
+ "widescreen": (
+ "from": $widescreen,
+ ),
+ "widescreen-only": (
+ "from": $widescreen,
+ "until": $fullhd,
+ ),
+ "until-fullhd": (
+ "until": $fullhd,
+ ),
+ "fullhd": (
+ "from": $fullhd,
+ ),
+) !default;
+
+// Miscellaneous
+
+$easing: ease-out !default;
+$radius-small: 0.25rem !default;
+$radius: 0.375rem !default;
+$radius-medium: 0.5em !default;
+$radius-large: 0.75rem !default;
+$radius-rounded: 9999px !default;
+$speed: 86ms !default;
+
+// Flags
+
+$variable-columns: true !default;
+$rtl: false !default;
+
+// Prefixes
+
+$class-prefix: "" !default;
+$cssvars-prefix: "bulma-" !default;
+$helpers-prefix: "is-" !default;
+$helpers-has-prefix: "has-" !default;
diff --git a/style/bulma/sass/utilities/mixins.scss b/style/bulma/sass/utilities/mixins.scss
new file mode 100644
index 0000000..20d87b6
--- /dev/null
+++ b/style/bulma/sass/utilities/mixins.scss
@@ -0,0 +1,460 @@
+@use "initial-variables" as iv;
+@use "css-variables" as cv;
+
+@mixin arrow($color: #{cv.getVar("link")}) {
+ border: 0.125em solid $color;
+ border-right: 0;
+ border-top: 0;
+ content: " ";
+ display: block;
+ height: 0.625em;
+ margin-top: -0.4375em;
+ pointer-events: none;
+ position: absolute;
+ top: 50%;
+ transform: rotate(-45deg);
+ transform-origin: center;
+ transition-duration: cv.getVar("duration");
+ transition-property: border-color;
+ width: 0.625em;
+}
+
+@mixin block($spacing: cv.getVar("block-spacing")) {
+ &:not(:last-child) {
+ margin-bottom: $spacing;
+ }
+}
+
+@mixin center($width, $height: 0) {
+ position: absolute;
+ @if $height != 0 {
+ left: calc(50% - (#{$width} * 0.5));
+ top: calc(50% - (#{$height} * 0.5));
+ } @else {
+ left: calc(50% - (#{$width} * 0.5));
+ top: calc(50% - (#{$width} * 0.5));
+ }
+}
+
+@mixin clearfix {
+ &::after {
+ clear: both;
+ content: " ";
+ display: table;
+ }
+}
+
+@mixin delete {
+ @include cv.register-vars(
+ (
+ "delete-dimensions": 1.25rem,
+ "delete-background-l": 0%,
+ "delete-background-alpha": 0.5,
+ "delete-color": #{cv.getVar("white")},
+ )
+ );
+
+ appearance: none;
+ background-color: hsla(
+ #{cv.getVar("scheme-h")},
+ #{cv.getVar("scheme-s")},
+ #{cv.getVar("delete-background-l")},
+ #{cv.getVar("delete-background-alpha")}
+ );
+ border: none;
+ border-radius: cv.getVar("radius-rounded");
+ cursor: pointer;
+ pointer-events: auto;
+ display: inline-flex;
+ flex-grow: 0;
+ flex-shrink: 0;
+ font-size: 1em;
+ height: cv.getVar("delete-dimensions");
+ max-height: cv.getVar("delete-dimensions");
+ max-width: cv.getVar("delete-dimensions");
+ min-height: cv.getVar("delete-dimensions");
+ min-width: cv.getVar("delete-dimensions");
+ outline: none;
+ position: relative;
+ vertical-align: top;
+ width: cv.getVar("delete-dimensions");
+
+ &::before,
+ &::after {
+ background-color: cv.getVar("delete-color");
+ content: "";
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ transform-origin: center center;
+ }
+
+ &::before {
+ height: 2px;
+ width: 50%;
+ }
+
+ &::after {
+ height: 50%;
+ width: 2px;
+ }
+
+ &:hover,
+ &:focus {
+ @include cv.register-var("delete-background-alpha", 0.4);
+ }
+
+ &:active {
+ @include cv.register-var("delete-background-alpha", 0.5);
+ }
+
+ // Sizes
+ &.#{iv.$class-prefix}is-small {
+ @include cv.register-var("delete-dimensions", 1rem);
+ }
+
+ &.#{iv.$class-prefix}is-medium {
+ @include cv.register-var("delete-dimensions", 1.5rem);
+ }
+
+ &.#{iv.$class-prefix}is-large {
+ @include cv.register-var("delete-dimensions", 2rem);
+ }
+}
+
+@mixin fa($size, $dimensions) {
+ display: inline-block;
+ font-size: $size;
+ height: $dimensions;
+ line-height: $dimensions;
+ text-align: center;
+ vertical-align: top;
+ width: $dimensions;
+}
+
+@mixin burger($dimensions) {
+ align-items: center;
+ appearance: none;
+ background: none;
+ border: none;
+ border-radius: cv.getVar("burger-border-radius");
+ color: hsl(
+ cv.getVar("burger-h"),
+ cv.getVar("burger-s"),
+ cv.getVar("burger-l")
+ );
+ cursor: pointer;
+ display: inline-flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ height: $dimensions;
+ justify-content: center;
+ position: relative;
+ vertical-align: top;
+ width: $dimensions;
+
+ span {
+ background-color: currentColor;
+ display: block;
+ height: cv.getVar("burger-item-height");
+ left: calc(50% - calc(#{cv.getVar("burger-item-width")}) / 2);
+ position: absolute;
+ transform-origin: center;
+ transition-duration: cv.getVar("duration");
+ transition-property: background-color, color, opacity, transform;
+ transition-timing-function: cv.getVar("easing");
+ width: cv.getVar("burger-item-width");
+
+ &:nth-child(1),
+ &:nth-child(2) {
+ top: calc(50% - calc(#{cv.getVar("burger-item-height")}) / 2);
+ }
+
+ &:nth-child(3) {
+ bottom: calc(50% + #{cv.getVar("burger-gap")});
+ }
+
+ &:nth-child(4) {
+ top: calc(50% + #{cv.getVar("burger-gap")});
+ }
+ }
+
+ &:hover {
+ background-color: hsla(
+ cv.getVar("burger-h"),
+ cv.getVar("burger-s"),
+ cv.getVar("burger-l"),
+ 0.1
+ );
+ }
+
+ &:active {
+ background-color: hsla(
+ cv.getVar("burger-h"),
+ cv.getVar("burger-s"),
+ cv.getVar("burger-l"),
+ 0.2
+ );
+ }
+
+ // Modifers
+ &.#{iv.$class-prefix}is-active {
+ span {
+ &:nth-child(1) {
+ transform: rotate(-45deg);
+ }
+
+ &:nth-child(2) {
+ transform: rotate(45deg);
+ }
+
+ &:nth-child(3),
+ &:nth-child(4) {
+ opacity: 0;
+ }
+ }
+ }
+}
+
+@mixin overflow-touch {
+ -webkit-overflow-scrolling: touch;
+}
+
+@mixin placeholder {
+ $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input";
+
+ @each $placeholder in $placeholders {
+ &:#{$placeholder}-placeholder {
+ @content;
+ }
+ }
+}
+
+@mixin reset {
+ appearance: none;
+ background: none;
+ border: none;
+ color: inherit;
+ font-family: inherit;
+ font-size: 1em;
+ margin: 0;
+ padding: 0;
+}
+
+@mixin selection($current-selector: false) {
+ @if $current-selector {
+ &::-moz-selection {
+ @content;
+ }
+ &::selection {
+ @content;
+ }
+ } @else {
+ ::-moz-selection {
+ @content;
+ }
+ ::selection {
+ @content;
+ }
+ }
+}
+
+// Responsiveness
+
+@mixin from($device) {
+ @media screen and (min-width: $device) {
+ @content;
+ }
+}
+
+@mixin until($device) {
+ @media screen and (max-width: ($device - 1px)) {
+ @content;
+ }
+}
+
+@mixin between($from, $until) {
+ @media screen and (min-width: $from) and (max-width: ($until - 1px)) {
+ @content;
+ }
+}
+
+@mixin mobile {
+ @media screen and (max-width: (iv.$tablet - 1px)) {
+ @content;
+ }
+}
+
+@mixin tablet {
+ @media screen and (min-width: iv.$tablet), print {
+ @content;
+ }
+}
+
+@mixin tablet-only {
+ @media screen and (min-width: iv.$tablet) and (max-width: (iv.$desktop - 1px)) {
+ @content;
+ }
+}
+
+@mixin touch {
+ @media screen and (max-width: (iv.$desktop - 1px)) {
+ @content;
+ }
+}
+
+@mixin desktop {
+ @media screen and (min-width: iv.$desktop) {
+ @content;
+ }
+}
+
+@mixin desktop-only {
+ @if iv.$widescreen-enabled {
+ @media screen and (min-width: iv.$desktop) and (max-width: (iv.$widescreen - 1px)) {
+ @content;
+ }
+ }
+}
+
+@mixin until-widescreen {
+ @if iv.$widescreen-enabled {
+ @media screen and (max-width: (iv.$widescreen - 1px)) {
+ @content;
+ }
+ }
+}
+
+@mixin widescreen {
+ @if iv.$widescreen-enabled {
+ @media screen and (min-width: iv.$widescreen) {
+ @content;
+ }
+ }
+}
+
+@mixin widescreen-only {
+ @if iv.$widescreen-enabled and iv.$fullhd-enabled {
+ @media screen and (min-width: iv.$widescreen) and (max-width: (iv.$fullhd - 1px)) {
+ @content;
+ }
+ }
+}
+
+@mixin until-fullhd {
+ @if iv.$fullhd-enabled {
+ @media screen and (max-width: (iv.$fullhd - 1px)) {
+ @content;
+ }
+ }
+}
+
+@mixin fullhd {
+ @if iv.$fullhd-enabled {
+ @media screen and (min-width: iv.$fullhd) {
+ @content;
+ }
+ }
+}
+
+@mixin breakpoint($name) {
+ $breakpoint: map-get(iv.$breakpoints, $name);
+
+ @if $breakpoint {
+ $from: map-get($breakpoint, "from");
+ $until: map-get($breakpoint, "until");
+
+ @if $from and $until {
+ @include between($from, $until) {
+ @content;
+ }
+ } @else if $from {
+ @include from($from) {
+ @content;
+ }
+ } @else if $until {
+ @include until($until) {
+ @content;
+ }
+ }
+ }
+}
+
+@mixin container-from($name, $width) {
+ @container #{$name} (min-width: #{$width}) {
+ @content;
+ }
+}
+
+@mixin container-until($name, $width) {
+ @container #{$name} (max-width: #{$width - 1px}) {
+ @content;
+ }
+}
+
+@mixin ltr {
+ @if not iv.$rtl {
+ @content;
+ }
+}
+
+@mixin rtl {
+ @if iv.$rtl {
+ @content;
+ }
+}
+
+@mixin ltr-property($property, $spacing, $right: true) {
+ $normal: if($right, "right", "left");
+ $opposite: if($right, "left", "right");
+
+ @if iv.$rtl {
+ #{$property}-#{$opposite}: $spacing;
+ } @else {
+ #{$property}-#{$normal}: $spacing;
+ }
+}
+
+@mixin ltr-position($spacing, $right: true) {
+ $normal: if($right, "right", "left");
+ $opposite: if($right, "left", "right");
+
+ @if iv.$rtl {
+ #{$opposite}: $spacing;
+ } @else {
+ #{$normal}: $spacing;
+ }
+}
+
+// Placeholders
+
+@mixin unselectable {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+@mixin loader {
+ animation: spinAround 500ms infinite linear;
+ border: 2px solid cv.getVar("loading-color");
+ border-radius: cv.getVar("radius-rounded");
+ border-right-color: transparent;
+ border-top-color: transparent;
+ content: "";
+ display: block;
+ height: 1em;
+ position: relative;
+ width: 1em;
+}
+
+@mixin overlay($offset: 0) {
+ bottom: $offset;
+ left: $offset;
+ position: absolute;
+ right: $offset;
+ top: $offset;
+}
diff --git a/style/main.scss b/style/main.scss
new file mode 100644
index 0000000..f3770f6
--- /dev/null
+++ b/style/main.scss
@@ -0,0 +1,6 @@
+@use "bulma";
+@use "bootstrap-icons";
+
+body {
+ font-family: system-ui, sans-serif;
+}