ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

style: settings popover spacing

Browse source
This commit is contained in:
Ayo 2023-07-25 22:56:39 +02:00 committed by Ayo Ayco
parent 8bcff3268f
commit 54a91b51d6
1 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/SettingsPopover.astro
View file

@ -8,10 +8,12 @@ const { toggle } = Astro.props;
--- ---
<form id="settings-form" hidden> <form id="settings-form" hidden>
<h2>Settings</h2> <div id="toolbar">
<label for={toggle}> <h2>Settings</h2>
<Icon name="mdi:close" /> <label for={toggle}>
</label> <Icon name="mdi:close" />
</label>
</div>
<div class="field"> <div class="field">
<input type="checkbox" id="settings-1" name="settings-1" checked /> <input type="checkbox" id="settings-1" name="settings-1" checked />
<label for="settings-1">Option 1</label> <label for="settings-1">Option 1</label>
@ -23,24 +25,30 @@ const { toggle } = Astro.props;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 5px;
background-color: white; background-color: white;
padding: 1em; padding: 0.5em;
width: 300px; width: 300px;
position: absolute; position: absolute;
top: 0.5em; top: 0.5em;
right: 0.1em; right: 0.1em;
box-shadow: 0 1px 3px 1px #eee; box-shadow: 0 1px 3px 1px #eee;
h2 { #toolbar {
margin: 0.5em 0; display: flex;
} margin-bottom: 0.5em;
svg { h2,
width: 24px; svg {
height: 24px; flex: 1;
position: absolute; }
top: 0.5em;
right: 0.5em; svg {
cursor: pointer; width: 24px;
height: 24px;
cursor: pointer;
}
}
.field {
margin-left: 0.5em;
} }
} }
</style> </style>