Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: when using a white background icon, a dark outline gets used instead

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-07-10 11:42:26 +02:00
parent 59a294a166
commit 26c06a2697
3 changed files with 14 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

5
public/css/index-tailwind-output.css
View file

@ -4891,6 +4891,11 @@ a.link-underline {
animation: glowing-drop-shadow 1s ease-in-out infinite alternate; animation: glowing-drop-shadow 1s ease-in-out infinite alternate;
} }
.selected .light-icon svg:not(.noselect *) path.selectable {
stroke: #4a4a4a !important;
stroke-width: 10px !important;
}
.selected svg { .selected svg {
/* A marker on the map gets the 'selected' class when it's properties are displayed /* A marker on the map gets the 'selected' class when it's properties are displayed
*/ */

4
src/UI/Map/DynamicIcon.svelte
View file

@ -24,6 +24,10 @@
{#if iconItem?.startsWith("<")} {#if iconItem?.startsWith("<")}
{@html iconItem} {@html iconItem}
{:else if color === "white"}
<span class="light-icon">
<Icon icon={iconItem} {color} {emojiHeight} />
</span>
{:else} {:else}
<Icon icon={iconItem} {color} {emojiHeight} /> <Icon icon={iconItem} {color} {emojiHeight} />
{/if} {/if}

5
src/index.css
View file

@ -531,6 +531,11 @@ a.link-underline {
animation: glowing-drop-shadow 1s ease-in-out infinite alternate; animation: glowing-drop-shadow 1s ease-in-out infinite alternate;
} }
.selected .light-icon svg:not(.noselect *) path.selectable {
stroke: #4a4a4a !important;
stroke-width: 10px !important;
}
.selected svg { .selected svg {
/* A marker on the map gets the 'selected' class when it's properties are displayed /* A marker on the map gets the 'selected' class when it's properties are displayed
*/ */