diff --git a/web/src/ui/util/Toggle.css b/web/src/ui/util/Toggle.css new file mode 100644 index 0000000..abbb28b --- /dev/null +++ b/web/src/ui/util/Toggle.css @@ -0,0 +1,36 @@ +input.toggle { + --transition-duration: .3s; + --disabled-color: var(--secondary-text-color); + --enabled-color: var(--primary-color-dark); + + cursor: var(--clickable-cursor); + appearance: none; + display: block; + background-color: var(--background-color); + border: 1px solid var(--disabled-color); + border-radius: 1.5em; + width: 3.5em; + height: 2em; + padding: calc(.25em - 1px); + transition: background-color var(--transition-duration), border-color var(--transition-duration); + + &::after { + content: ""; + display: block; + height: 1.5em; + width: 1.5em; + border-radius: 50%; + background-color: var(--disabled-color); + transition: margin-left var(--transition-duration), background-color var(--transition-duration); + } + + &:checked { + border-color: var(--enabled-color); + background-color: var(--enabled-color); + + &::after { + margin-left: 1.5em; + background-color: var(--background-color); + } + } +} diff --git a/web/src/ui/util/Toggle.tsx b/web/src/ui/util/Toggle.tsx new file mode 100644 index 0000000..770e3b6 --- /dev/null +++ b/web/src/ui/util/Toggle.tsx @@ -0,0 +1,37 @@ +// gomuks - A Matrix client written in Go. +// Copyright (C) 2024 Tulir Asokan +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . +import { InputHTMLAttributes } from "react" +import "./Toggle.css" + +export interface ToggleProps extends Omit, "type"> { + disabledColor?: string + enabledColor?: string +} + +const Toggle = (props: ToggleProps) => { + const extraStyle = { + "--disabled-color": props.disabledColor, + "--enabled-color": props.enabledColor, + } + return +} + +export default Toggle