UI: fix icon alignment

This commit is contained in:
Pieter Vander Vennet 2024-07-29 14:39:56 +02:00
parent fd16e165c4
commit 953bdaeaa5
3 changed files with 6 additions and 5 deletions

View file

@ -40,6 +40,8 @@
.mapping-icon-small { .mapping-icon-small {
/* A mapping icon type */ /* A mapping icon type */
width: 1.5rem; width: 1.5rem;
height: fit-content;
max-height: 1.5rem; max-height: 1.5rem;
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@ -47,19 +49,19 @@
.mapping-icon-medium { .mapping-icon-medium {
/* A mapping icon type */ /* A mapping icon type */
width: 3rem; width: 3rem;
height: fit-content;
max-height: 3rem; max-height: 3rem;
margin-right: 1rem; margin-right: 1rem
margin-left: 0.5rem;
} }
.mapping-icon-large { .mapping-icon-large {
/* A mapping icon type */ /* A mapping icon type */
width: 6rem; width: 6rem;
height: fit-content;
max-height: 5rem; max-height: 5rem;
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
margin-right: 1.5rem; margin-right: 1.5rem;
margin-left: 0.5rem;
} }

View file

@ -40,7 +40,7 @@
{#if iconsParsed !== undefined && iconsParsed.length > 0} {#if iconsParsed !== undefined && iconsParsed.length > 0}
<div class={twMerge("relative", size)}> <div class={twMerge("relative", size)}>
{#each iconsParsed as icon} {#each iconsParsed as icon}
<div class="absolute top-0 left-0 h-full w-full"> <div class="absolute top-0 left-0 h-full w-full flex items-center">
<Icon icon={icon.icon} color={icon.color} {clss} /> <Icon icon={icon.icon} color={icon.color} {clss} />
</div> </div>
{/each} {/each}

View file

@ -6,7 +6,6 @@
import { UIEventSource } from "../../../Logic/UIEventSource" import { UIEventSource } from "../../../Logic/UIEventSource"
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig" import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
import { twJoin } from "tailwind-merge" import { twJoin } from "tailwind-merge"
import Icon from "../../Map/Icon.svelte"
import Marker from "../../Map/Marker.svelte" import Marker from "../../Map/Marker.svelte"
export let selectedElement: Feature export let selectedElement: Feature