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/",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(""+n+"
",1);case"col":return s(""+n+"
",2);case"tr":return s(""+n+"
",2);case"td":case"th":return s(""+n+"
",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; +}