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

20
src/components/SettingsPopover.astro
View file

@ -8,10 +8,12 @@ const { toggle } = Astro.props;
--- ---
<form id="settings-form" hidden> <form id="settings-form" hidden>
<div id="toolbar">
<h2>Settings</h2> <h2>Settings</h2>
<label for={toggle}> <label for={toggle}>
<Icon name="mdi:close" /> <Icon name="mdi:close" />
</label> </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,26 +25,32 @@ 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;
h2,
svg {
flex: 1;
} }
svg { svg {
width: 24px; width: 24px;
height: 24px; height: 24px;
position: absolute;
top: 0.5em;
right: 0.5em;
cursor: pointer; cursor: pointer;
} }
} }
.field {
margin-left: 0.5em;
}
}
</style> </style>
<script> <script>