From 4d064042e8a6ebf874fecbc23f13073f39fa1ebe Mon Sep 17 00:00:00 2001 From: Nathan Reiner Date: Thu, 30 Jul 2026 07:46:37 +0200 Subject: first version of js parser --- src/web/component/navigation/index.css | 66 ++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 src/web/component/navigation/index.css (limited to 'src/web/component/navigation/index.css') diff --git a/src/web/component/navigation/index.css b/src/web/component/navigation/index.css new file mode 100644 index 0000000..836e3b5 --- /dev/null +++ b/src/web/component/navigation/index.css @@ -0,0 +1,66 @@ +#toggle { + --radius-open: 200px; + + position: absolute; + right: 10px; + bottom: 10px; + width: 45px; + height: 45px; + border-radius: 100%; + background: red; + z-index: 500; + cursor: pointer; + text-align: center; + align-content: center; + transition: + border-radius 0.1s ease, + right 0.1s ease, + bottom 0.1s ease, + width 0.1s ease, + height 0.1s ease; + + .bi { + baseline-shift: -2px; + } + + .items { + position: relative; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + } + + .item { + display: none; + width: 45px; + height: 45px; + border-radius: 100%; + background: blue; + position: absolute; + right: calc(cos(18deg * var(--index)) * var(--radius-open)); + bottom: calc(sin(18deg * var(--index)) * var(--radius-open)); + font-size: calc(var(--index) * 1px); + } + + .item { + --index: sibling-index(); + } +} + +#toggle.open { + width: var(--radius-open); + height: var(--radius-open); + bottom: 0px; + right: 0px; + border-radius: 0px; + border-top-left-radius: 250px; + + .bi { + display: none; + } + + .item { + display: block; + } +} -- cgit v1.2.3-70-g09d2