Fix UI. CSS optimization. (#932)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
2022-02-04 11:02:56 +01:00
committed by GitHub
parent 9f9650f938
commit bf2e0aba30
15 changed files with 133 additions and 238 deletions
@@ -38,46 +38,27 @@
)
</script>
<div class="flex-col statuses-container">
<div class="antiPopup">
<div class="ap-space" />
{#each states as state}
<div
class="flex-row-center state"
<button
class="ap-menuItem ap-woScroll flex-row-center"
on:click={() => {
dispatch('close', state)
}}
>
<div class="color" style="background-color: {getPlatformColor(state.color)}" />
{state.title}
</div>
</button>
{/each}
<div class="ap-space" />
</div>
<style lang="scss">
.statuses-container {
padding: 0.5rem;
max-height: 100%;
min-width: 10rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-bg-focused);
border: 1px solid var(--theme-button-border-enabled);
border-radius: 0.75rem;
user-select: none;
filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, 0.35));
.state {
padding: 0.5rem;
border-radius: 0.5rem;
cursor: pointer;
&:hover {
background-color: var(--theme-button-bg-hovered);
}
.color {
margin-right: 0.75rem;
width: 1rem;
height: 1rem;
border-radius: 0.25rem;
}
}
.color {
margin-right: .75rem;
width: 1rem;
height: 1rem;
border-radius: .25rem;
}
</style>
@@ -23,16 +23,18 @@
const dispatch = createEventDispatcher()
</script>
<div class="flex-col popup">
<div class="flex-row-center red-color menu-item" on:click={() => { dispatch('close'); onDelete() }}>
<div class="antiPopup">
<div class="ap-space" />
<div class="ap-menuItem ap-woScroll flex-row-center redlight" on:click={() => { dispatch('close'); onDelete() }}>
<div class="mr-3">
<Delete size={'small'} />
</div>
<div class="flex-grow"><Label label={task.string.Delete} /></div>
<Label label={task.string.Delete} />
</div>
<div class="ap-space" />
</div>
<style lang="scss">
<!-- <style lang="scss">
.popup {
padding: .5rem;
min-width: 12rem;
@@ -51,4 +53,4 @@
&:hover { background-color: var(--theme-button-bg-hovered); }
}
</style>
</style> -->