Dwinzo-Beta/Dwinzo_beta
6
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tools updated

Browse Source
This commit is contained in:
Vishnu
2025-03-19 18:15:52 +05:30
parent 95ed64fc6f
commit 299b3ed381
3 changed files with 460 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
app/src/components/icons/ExportToolsIcons.tsx
View File

@@ -10,11 +10,15 @@ export function ZoneIcon({ isActive }: { isActive: boolean }) {
<g clipPath="url(#clip0_111_378)">
<path
d="M1.66665 16.6667H2.49998V17.5H0.833313V15.8333H1.66665V16.6667ZM18.3333 16.6667H17.5V17.5H19.1666V15.8333H18.3333V16.6667ZM0.833313 4.16667H1.66665V3.33333H2.49998V2.5H0.833313V4.16667ZM1.66665 5.83333H0.833313V7.5H1.66665V5.83333ZM1.66665 9.16667H0.833313V10.8333H1.66665V9.16667ZM18.3333 7.5H19.1666V5.83333H18.3333V7.5ZM18.3333 10.8333H19.1666V9.16667H18.3333V10.8333ZM1.66665 12.5H0.833313V14.1667H1.66665V12.5ZM18.3333 14.1667H19.1666V12.5H18.3333V14.1667ZM4.16665 3.33333H5.83331V2.5H4.16665V3.33333ZM9.16665 3.33333V2.5H7.49998V3.33333H9.16665ZM10.8333 3.33333H12.5V2.5H10.8333V3.33333ZM15.8333 2.5H14.1666V3.33333H15.8333V2.5ZM4.16665 17.5H5.83331V16.6667H4.16665V17.5ZM7.49998 17.5H9.16665V16.6667H7.49998V17.5ZM10.8333 17.5H12.5V16.6667H10.8333V17.5ZM14.1666 17.5H15.8333V16.6667H14.1666V17.5ZM17.5 3.33333H18.3333V4.16667H19.1666V2.5H17.5V3.33333ZM10.4166 6.66667V8.33333C10.4164 8.55428 10.3286 8.76611 10.1723 8.92235C10.0161 9.07858 9.80426 9.16645 9.58331 9.16667H4.16665C3.9457 9.16645 3.73387 9.07858 3.57763 8.92235C3.4214 8.76611 3.33353 8.55428 3.33331 8.33333V6.66667C3.33353 6.44572 3.4214 6.23389 3.57763 6.07765C3.73387 5.92142 3.9457 5.83355 4.16665 5.83333H9.58331C9.80426 5.83355 10.0161 5.92142 10.1723 6.07765C10.3286 6.23389 10.4164 6.44572 10.4166 6.66667ZM9.58415 8.33333L9.58331 6.66667H4.16665V8.33333H9.58415ZM16.6666 11.6667V13.3333C16.6664 13.5543 16.5786 13.7661 16.4223 13.9223C16.2661 14.0786 16.0543 14.1664 15.8333 14.1667H11.25C11.029 14.1664 10.8172 14.0786 10.661 13.9223C10.5047 13.7661 10.4169 13.5543 10.4166 13.3333V11.6667C10.4169 11.4457 10.5047 11.2339 10.661 11.0777C10.8172 10.9214 11.029 10.8336 11.25 10.8333H15.8333C16.0543 10.8336 16.2661 10.9214 16.4223 11.0777C16.5786 11.2339 16.6664 11.4457 16.6666 11.6667ZM15.8341 13.3333L15.8333 11.6667H11.25V13.3333H15.8341Z"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
}
/>
<path
d="M7.7443 13.5777V11.911C7.74408 11.69 7.65621 11.4782 7.49998 11.322C7.34375 11.1657 7.13191 11.0779 6.91097 11.0777H4.16665C3.9457 11.0779 3.73387 11.1657 3.57764 11.322C3.4214 11.4782 3.33353 11.69 3.33331 11.911V13.5777C3.33353 13.7986 3.4214 14.0104 3.57764 14.1667C3.73387 14.3229 3.9457 14.4108 4.16665 14.411H6.91097C7.13191 14.4108 7.34375 14.3229 7.49998 14.1667C7.65621 14.0104 7.74408 13.7986 7.7443 13.5777Z"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
}
/>
</g>
<defs>
@@ -37,27 +41,27 @@ export function AsileIcon({ isActive }: { isActive: boolean }) {
>
<path
d="M3.25821 9.16667H1.13638L1.13638 13.4832L3.25821 9.16667Z"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
/>
<path
d="M4.57633 16.6667H1.53737L5.22405 9.16667L8.26301 9.16667L4.57633 16.6667Z"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
/>
<path
d="M9.82919 16.6667H6.79023L10.4769 9.16667L13.5159 9.16667L9.82919 16.6667Z"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
/>
<path
d="M15.1917 16.6667H12.1528L15.8395 9.16667L18.8637 9.16667V9.1967L15.1917 16.6667Z"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
/>
<path
d="M18.8637 14.3162V16.6667H17.7083L18.8637 14.3162Z"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
/>
<path
d="M7.75002 0.833332L10 3.08333L4.75002 8.33333H2.50002V6.08333L7.75002 0.833332Z"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
/>
</svg>
);
@@ -82,35 +86,37 @@ export function FloorIcon({ isActive }: { isActive: boolean }) {
/>
<path
d="M15.8333 15.8333V3.33333H3.33333V15.8333"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
stroke={
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
}
/>
<path
d="M11.0833 6.66667L13.3333 8.91667L8.08333 14.1667H5.83333V11.9167L11.0833 6.66667Z"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
/>
<circle
cx="3.30001"
cy="3.3"
r="1.2"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
/>
<circle
cx="15.8"
cy="3.3"
r="1.2"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
/>
<circle
cx="15.8"
cy="15.8"
r="1.2"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
/>
<circle
cx="3.30001"
cy="15.8"
r="1.2"
fill={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
/>
</svg>
);
@@ -366,7 +372,10 @@ export function PillerIcon({ isActive }: { isActive: boolean }) {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M7 5L5.5 6V18.5H14.5V6.5L13.5 5H7Z" fill="var(--highlight-accent-color)" />
<path
d="M7 5L5.5 6V18.5H14.5V6.5L13.5 5H7Z"
fill="var(--highlight-accent-color)"
/>
<path
d="M14.7545 1.94309H5.22935C4.9007 1.94074 4.57782 2.04074 4.29614 2.23213C4.01447 2.42352 3.78489 2.69889 3.63259 3.02804C3.4803 3.35718 3.41117 3.72738 3.4328 4.098C3.45444 4.46862 3.56599 4.82535 3.75522 5.12904C3.94445 5.43272 4.20405 5.67163 4.50553 5.81955C4.807 5.96747 5.13871 6.01868 5.46425 5.96756C5.78978 5.91644 6.09657 5.76497 6.35094 5.52976C6.60531 5.29456 6.79744 4.98471 6.90624 4.63423H13.1088C13.2185 4.98209 13.4107 5.2892 13.6644 5.522C13.918 5.75479 14.2234 5.90432 14.5472 5.95425C14.871 6.00417 15.2007 5.95258 15.5003 5.80509C15.7999 5.65761 16.0578 5.41991 16.246 5.11797C16.4341 4.81603 16.5452 4.46146 16.5671 4.093C16.589 3.72454 16.5209 3.35636 16.3702 3.02869C16.2195 2.70102 15.992 2.42646 15.7125 2.235C15.4331 2.04355 15.1125 1.94257 14.7857 1.94309H14.7545Z"
fill="var(--highlight-accent-color)"
@@ -475,7 +484,7 @@ export function FreeMoveIcon({ isActive }: { isActive: boolean }) {
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.21757 16.8828L6.21566 16.8809C4.68158 15.3449 4.04131 13.1249 3.70825 11.97C3.65833 11.7969 3.61531 11.6477 3.57721 11.5284C3.50044 11.2891 3.40551 11.0392 3.30564 10.7763C3.24797 10.6245 3.18866 10.4684 3.13024 10.3074C2.98703 9.9129 2.83332 9.45028 2.83332 9.08537C2.83332 8.6844 3.10122 8.39598 3.31123 8.24069C3.53078 8.07835 3.82912 7.95218 4.1196 7.95218C4.55725 7.95218 4.93181 8.04977 5.25662 8.33367C5.54723 8.58768 5.75625 8.95913 5.96553 9.37774L5.96584 9.37836C6.08939 9.62636 6.21705 9.92271 6.34124 10.2145C6.35686 10.2512 6.37243 10.2879 6.38797 10.3244C6.4984 10.5843 6.60695 10.8398 6.7149 11.0731C6.75596 11.1619 6.79562 11.2445 6.8338 11.3204C6.83726 11.2299 6.8391 11.1288 6.8391 11.0163V3.4725C6.8391 3.16159 6.93896 2.83429 7.17719 2.58029C7.42159 2.31972 7.76795 2.18294 8.16676 2.18294C8.56324 2.18294 8.90801 2.32082 9.15193 2.57892C9.2602 2.69348 9.3408 2.82347 9.39652 2.96076V2.44843C9.39652 2.13309 9.50121 1.80699 9.74134 1.55631C9.98647 1.30041 10.331 1.16668 10.7242 1.16668C11.1174 1.16668 11.4619 1.30041 11.707 1.55632C11.9471 1.80701 12.0518 2.13311 12.0518 2.44843V2.54199C12.1086 2.40242 12.1909 2.27083 12.3008 2.15544C12.5442 1.89979 12.8875 1.76081 13.2816 1.76081C13.6757 1.76081 14.019 1.89979 14.2624 2.15545C14.5005 2.40556 14.6092 2.73172 14.6092 3.05037V4.9622C14.6621 4.83073 14.738 4.70531 14.8404 4.59356C15.0814 4.33067 15.4252 4.19203 15.8225 4.19203C16.2229 4.19203 16.5718 4.32703 16.8195 4.58529C17.0621 4.83817 17.1667 5.16647 17.1667 5.48156V12.7517C17.1667 14.7775 16.5703 16.3184 15.4877 17.3498C14.4096 18.3768 12.9178 18.8333 11.2539 18.8333C9.13033 18.8333 7.51063 18.1635 6.21757 16.8828ZM7.1414 11.8084C7.14138 11.8084 7.14074 11.8079 7.1395 11.807C7.14078 11.808 7.14141 11.8085 7.1414 11.8084Z"
d="M16.6667 12.7517C16.6667 16.6057 14.4072 18.3333 11.2539 18.3333C9.25097 18.3333 7.76123 17.708 6.56942 16.5275C4.91414 14.8702 4.36788 12.3609 4.05339 11.3759C3.80507 10.602 3.33332 9.60916 3.33332 9.08537C3.33332 8.74923 3.80507 8.45218 4.1196 8.45218C4.83136 8.45218 5.09621 8.75703 5.5183 9.60133C5.98178 10.5316 6.54456 12.2671 6.99152 12.2671C7.24806 12.2671 7.3391 11.8371 7.3391 11.0163V3.4725C7.3391 3.05818 7.60395 2.68294 8.16676 2.68294C8.72128 2.68294 8.99442 3.05818 8.99442 3.4725V9.64822C9.25927 9.57788 9.56547 9.52314 9.89652 9.47625V2.44843C9.89652 2.0341 10.1697 1.66668 10.7242 1.66668C11.2787 1.66668 11.5518 2.0341 11.5518 2.44843V9.42151C11.858 9.43716 12.156 9.46844 12.4539 9.51534V3.05037C12.4539 2.63605 12.7354 2.26081 13.2816 2.26081C13.8279 2.26081 14.1092 2.63605 14.1092 3.05037V9.95311C14.432 10.0782 14.7383 10.2267 15.0114 10.3909V5.48156C15.0114 5.06723 15.268 4.69203 15.8225 4.69203C16.3935 4.69203 16.6667 5.06723 16.6667 5.48156V12.7517Z"
stroke="var(--text-color)"
/>
</svg>
@@ -563,3 +572,67 @@ export function CursorIcon({ isActive }: { isActive: boolean }) {
</svg>
);
}
export function PlayIcon({ isActive }: { isActive: boolean }) {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.9111 8.51444C17.363 9.37988 17.363 11.6201 15.9111 12.4856L7.14505 17.7109C5.73403 18.552 4 17.4572 4 15.7253V5.27468C4 3.54276 5.73403 2.44801 7.14505 3.28911L15.9111 8.51444Z"
stroke={isActive ? "none" : "var(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "none"}
/>
</svg>
);
}
export function PenIcon({ isActive }: { isActive: boolean }) {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5 15.5L12.7929 16.7929C13.1834 17.1834 13.8166 17.1834 14.2071 16.7929L16.2929 14.7071C16.6834 14.3166 16.6834 13.6834 16.2929 13.2929L15 12M11.5 15.5L5.58952 13.6474C5.22732 13.5568 4.94573 13.2721 4.85925 12.9089L2.5 3M11.5 15.5L15 12M2.5 3L12.4089 5.35925C12.7721 5.44573 13.0568 5.72732 13.1474 6.08952L15 12M2.5 3L7.29941 7.78644M9 8.5C9 9.05228 8.55228 9.5 8 9.5C7.44772 9.5 7 9.05228 7 8.5C7 7.94772 7.44772 7.5 8 7.5C8.55228 7.5 9 7.94772 9 8.5Z"
stroke={
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
}
stroke-linecap="round"
/>
</svg>
);
}
export function SaveTemplateIcon({ isActive }: { isActive: boolean }) {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.5 13.4104V9.24922C17.5 5.67539 17.5 3.88847 16.4017 2.77822C15.3033 1.66797 13.5355 1.66797 10 1.66797C6.46447 1.66797 4.6967 1.66797 3.59835 2.77822C2.5 3.88847 2.5 5.67539 2.5 9.24922V13.4104C2.5 15.9909 2.5 17.2811 3.11176 17.8449C3.40351 18.1138 3.77179 18.2827 4.1641 18.3276C4.98668 18.4217 5.94727 17.5721 7.86847 15.8728C8.71767 15.1217 9.14233 14.7461 9.63358 14.6472C9.8755 14.5985 10.1245 14.5985 10.3664 14.6472C10.8577 14.7461 11.2823 15.1217 12.1315 15.8728C14.0527 17.5721 15.0133 18.4217 15.8359 18.3276C16.2282 18.2827 16.5965 18.1138 16.8882 17.8449C17.5 17.2811 17.5 15.9909 17.5 13.4104Z"
stroke={
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
}
/>
<path
d="M12.5 5H7.5"
stroke={
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
}
stroke-linecap="round"
/>
</svg>
);
}

228
app/src/components/ui/Tools.tsx
View File

@@ -1,8 +1,232 @@
import React from 'react';
import React, { useEffect, useRef, useState } from "react";
import {
AsileIcon,
CommentIcon,
CursorIcon,
FloorIcon,
FreeMoveIcon,
PenIcon,
PlayIcon,
SaveTemplateIcon,
WallIcon,
ZoneIcon,
} from "../icons/ExportToolsIcons";
import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons";
import useModuleStore from "../../store/useModuleStore";
const Tools: React.FC = () => {
const [activeTool, setActiveTool] = useState("cursor");
const [activeSubTool, setActiveSubTool] = useState("cursor");
const [toggleThreeD, setToggleThreeD] = useState(true);
const dropdownRef = useRef<HTMLDivElement>(null);
const [openDrop, setOpenDrop] = useState(false);
const { activeModule } = useModuleStore();
// Reset activeTool whenever activeModule changes
useEffect(() => {
setActiveTool(activeSubTool);
setActiveSubTool(activeSubTool);
}, [activeModule]);
useEffect(() => {
const handleOutsideClick = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setOpenDrop(false); // Close the dropdown
}
};
document.addEventListener("mousedown", handleOutsideClick);
return () => {
document.removeEventListener("mousedown", handleOutsideClick);
};
}, []);
return (
<div>Tools</div>
<div className="tools-container">
<div className="drop-down-icons">
<div className="activeDropicon">
{activeSubTool == "cursor" && (
<div
className={`tool-button ${
activeTool === "cursor" ? "active" : ""
}`}
onClick={() => {
setActiveTool("cursor");
}}
>
<CursorIcon isActive={activeTool === "cursor"} />
</div>
)}
{activeSubTool == "free-hand" && (
<div
className={`tool-button ${
activeTool === "free-hand" ? "active" : ""
}`}
onClick={() => {
setActiveTool("free-hand");
}}
>
<FreeMoveIcon isActive={activeTool === "free-hand"} />
</div>
)}
{activeModule !== "visualization" && (
<div
className="drop-down-option-button"
ref={dropdownRef}
onClick={() => {
setOpenDrop(!openDrop);
console.log(openDrop);
}}
>
<ArrowIcon />
{openDrop && (
<div className="drop-down-container">
<div
className="option-list"
onClick={() => {
setOpenDrop(false);
setActiveTool("cursor");
setActiveSubTool("cursor");
}}
>
<div className="active-option">
{activeSubTool === "cursor" && <TickIcon />}
</div>
<CursorIcon isActive={false} />
<div className="option">Cursor</div>
</div>
<div
className="option-list"
onClick={() => {
setOpenDrop(false);
setActiveTool("free-hand");
setActiveSubTool("free-hand");
}}
>
<div className="active-option">
{activeSubTool === "free-hand" && <TickIcon />}
</div>
<FreeMoveIcon isActive={false} />
<div className="option">Free Hand</div>
</div>
</div>
)}
</div>
)}
</div>
</div>
{!toggleThreeD && activeModule === "builder" && (
<>
<div className="split"></div>
<div className="draw-tools">
<div
className={`tool-button ${
activeTool === "draw-wall" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-wall");
}}
>
<WallIcon isActive={activeTool === "draw-wall"} />
</div>
<div
className={`tool-button ${
activeTool === "draw-zone" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-zone");
}}
>
<ZoneIcon isActive={activeTool === "draw-zone"} />
</div>
<div
className={`tool-button ${
activeTool === "draw-aisle" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-aisle");
}}
>
<AsileIcon isActive={activeTool === "draw-aisle"} />
</div>
<div
className={`tool-button ${
activeTool === "draw-floor" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-floor");
}}
>
<FloorIcon isActive={activeTool === "draw-floor"} />
</div>
</div>
</>
)}
{activeModule === "simulation" && (
<>
<div className="split"></div>
<div className="draw-tools">
<div
className={`tool-button ${activeTool === "pen" ? "active" : ""}`}
onClick={() => {
setActiveTool("pen");
}}
>
<PenIcon isActive={activeTool === "pen"} />
</div>
</div>
</>
)}
{activeModule === "visualization" && (
<>
<div className="split"></div>
<div className="draw-tools">
<div className={`tool-button`}>
<SaveTemplateIcon isActive={false} />
</div>
</div>
</>
)}
<div className="split"></div>
<div className="general-options">
<div
className={`tool-button ${activeTool === "comment" ? "active" : ""}`}
onClick={() => {
setActiveTool("comment");
}}
>
<CommentIcon isActive={activeTool === "comment"} />
</div>
<div
className={`tool-button ${activeTool === "play" ? "active" : ""}`}
onClick={() => {
setActiveTool("play");
}}
>
<PlayIcon isActive={activeTool === "play"} />
</div>
</div>
<div className="split"></div>
<div
className={`toggle-threed-button${toggleThreeD ? " toggled" : ""}`}
onClick={() => {
setToggleThreeD(!toggleThreeD);
}}
>
<div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
2d
</div>
<div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
3d
</div>
</div>
</div>
);
};

145
app/src/styles/components/tools.scss
View File

@@ -0,0 +1,145 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.tools-container {
@include flex-center;
position: fixed;
bottom: 32px;
left: 50%;
transform: translate(-50%, 0);
padding: 8px;
gap: 10px;
box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-large};
width: fit-content;
transition: width 0.2s;
.split {
height: 20px;
width: 2px;
border-radius: 2px;
background: var(--highlight-accent-color);
}
.draw-tools,
.general-options,
.activeDropicon {
@include flex-center;
gap: 8px;
interpolate-size: allow-keywords;
width: 0;
opacity: 0;
animation: expandWidth 0.2s ease-in-out forwards;
.tool-button {
@include flex-center;
height: 28px;
width: 28px;
cursor: pointer;
border-radius: #{$border-radius-small};
&:hover {
background: color-mix(
in srgb,
var(--highlight-accent-color) 60%,
transparent
);
}
}
.active {
background-color: var(--accent-color);
&:hover {
background-color: var(--accent-color);
}
}
}
.activeDropicon {
gap: 2px;
.drop-down-option-button {
@include flex-center;
height: 28px;
cursor: pointer;
border-radius: #{$border-radius-small};
position: relative;
&:hover {
background: color-mix(
in srgb,
var(--highlight-accent-color) 60%,
transparent
);
}
.drop-down-container {
position: absolute;
bottom: 40px;
left: 0;
box-shadow: #{$box-shadow-medium};
padding: 8px;
border-radius: #{$border-radius-large};
.option-list {
margin: 4px 0;
display: flex;
align-items: center;
white-space: nowrap;
border-radius: #{$border-radius-medium};
gap: 6px;
padding: 4px;
&:hover {
background-color: var(--highlight-accent-color);
color: var(--accent-color);
path {
stroke: var(--accent-color);
}
}
.active-option {
height: 12px;
width: 12px;
@include flex-center;
}
.option {
color: inherit;
}
}
}
}
}
.toggle-threed-button {
@include flex-center;
padding: 3px;
border-radius: #{$border-radius-small};
background-color: var(--highlight-accent-color);
gap: 2px;
position: relative;
.toggle-option {
font-size: var(--font-size-small);
padding: 2px;
z-index: 1;
transition: all 0.2s;
}
&::after {
content: "";
position: absolute;
background-color: var(--accent-color);
left: 3px;
top: 3px;
height: 18px;
width: 18px;
border-radius: #{$border-radius-small};
transition: all 0.2s;
}
.active {
color: var(--highlight-accent-color);
}
}
.toggled {
&::after {
left: 24px;
}
}
}
@keyframes expandWidth {
from {
width: 0;
opacity: 0;
}
to {
width: fit-content;
opacity: 1;
}
}