Navy.gif/webserver-framework-frontend
Template
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

- Fixing horizontal checkbox

Browse Source
This commit is contained in:
D3vision 2023-04-22 21:31:02 +02:00
parent d4858d809d
commit 33c0e362f5
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Selectors.tsx
View File

@ -58,9 +58,9 @@ export const DropdownMenu = (props: DropdownProps) => {
export const ToggleSwitch = ({ value, onChange, ref, children }: export const ToggleSwitch = ({ value, onChange, ref, children }:
{ value: boolean, ref?: React.RefObject<HTMLInputElement>, onChange?: React.ChangeEventHandler, children: string }) => { { value: boolean, ref?: React.RefObject<HTMLInputElement>, onChange?: React.ChangeEventHandler, children: string }) => {
return <p> return <p>
<span className="check-box"> <span className="check-box check-box-row">
<b>{children}</b> <b>{children}:</b>
<input ref={ref} className="check-box" defaultChecked={value} onChange={onChange} type='checkbox' /> <input ref={ref} defaultChecked={value} onChange={onChange} type='checkbox' />
</span> </span>
</p>; </p>;
}; };

7
src/css/App.css
View File

@ -113,6 +113,7 @@ header {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
cursor: pointer; cursor: pointer;
transition: 0.4s; transition: 0.4s;
margin-bottom: revert;
} }
.check-box input:checked[type="checkbox"] { .check-box input:checked[type="checkbox"] {
@ -136,3 +137,9 @@ header {
.check-box input:checked[type="checkbox"]::after { .check-box input:checked[type="checkbox"]::after {
left: 50%; left: 50%;
} }
.check-box-row{
display: flex;
gap: 2px;
align-items: center;
}