flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix icons invisible on iOS

Browse Source 
It was ONLY because of flex-direction being row by default. Switched to column, does the trick… !?%@
This commit is contained in:
Félix Péault
2020-04-22 10:13:44 +02:00
parent 4ebd938012
commit 39031366d5
7 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/atoms/IconArrow.svelte
View File

@@ -4,10 +4,10 @@
export let hidden = undefined export let hidden = undefined
</script> </script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20" viewbox="0 0 20 20" fill={color} class={$$props.class} aria-hidden={hidden}> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 20 20" width="20" height="20" fill={color} class={$$props.class} aria-hidden={hidden}>
{#if direction === 'left'} {#if direction === 'left'}
<path fill={color} d="M.26 10.85l-.06-.11-.08-.15-.05-.16-.04-.13a1.5 1.5 0 010-.6c0-.05.03-.09.04-.13l.05-.16.08-.15.06-.1c.06-.1.13-.17.2-.25L9.2.45c.61-.6 1.61-.6 2.23 0 .62.6.62 1.57 0 2.17L5.4 8.47h13.02c.87 0 1.58.68 1.58 1.53s-.7 1.53-1.58 1.53H5.4l6.03 5.85c.62.6.62 1.57 0 2.17-.3.3-.71.45-1.12.45-.4 0-.8-.15-1.11-.45L.46 11.08a1.5 1.5 0 01-.2-.23"/> <path fill-rule="nonzero" d="M.26 10.85l-.06-.11-.08-.15-.05-.16-.04-.13a1.5 1.5 0 010-.6c0-.05.03-.09.04-.13l.05-.16.08-.15.06-.1c.06-.1.13-.17.2-.25L9.2.45c.61-.6 1.61-.6 2.23 0 .62.6.62 1.57 0 2.17L5.4 8.47h13.02c.87 0 1.58.68 1.58 1.53s-.7 1.53-1.58 1.53H5.4l6.03 5.85c.62.6.62 1.57 0 2.17-.3.3-.71.45-1.12.45-.4 0-.8-.15-1.11-.45L.46 11.08a1.5 1.5 0 01-.2-.23"/>
{:else if direction === 'right'} {:else if direction === 'right'}
<path fill={color} d="M19.74 10.85l.06-.11.08-.15.05-.16.04-.13c.04-.2.04-.4 0-.6 0-.05-.03-.09-.04-.13l-.05-.16-.08-.15-.06-.1a1.53 1.53 0 00-.2-.25L10.8.45c-.61-.6-1.61-.6-2.23 0a1.5 1.5 0 000 2.17l6.03 5.85H1.58C.71 8.47 0 9.15 0 10s.7 1.53 1.58 1.53H14.6l-6.03 5.85a1.5 1.5 0 000 2.17c.3.3.71.45 1.12.45.4 0 .8-.15 1.11-.45l8.74-8.47.2-.23"/> <path fill-rule="nonzero" d="M19.74 10.85l.06-.11.08-.15.05-.16.04-.13c.04-.2.04-.4 0-.6 0-.05-.03-.09-.04-.13l-.05-.16-.08-.15-.06-.1a1.53 1.53 0 00-.2-.25L10.8.45c-.61-.6-1.61-.6-2.23 0a1.5 1.5 0 000 2.17l6.03 5.85H1.58C.71 8.47 0 9.15 0 10s.7 1.53 1.58 1.53H14.6l-6.03 5.85a1.5 1.5 0 000 2.17c.3.3.71.45 1.12.45.4 0 .8-.15 1.11-.45l8.74-8.47.2-.23"/>
{/if} {/if}
</svg> </svg>

4
src/style/atoms/_button-control.scss
View File

@@ -2,6 +2,7 @@
.button-control { .button-control {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 40px; width: 40px;
@@ -9,7 +10,7 @@
overflow: hidden; overflow: hidden;
padding-top: 2px; padding-top: 2px;
pointer-events: auto; pointer-events: auto;
border-radius: 100%; border-radius: 50%;
border: none; border: none;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
@@ -23,6 +24,7 @@
// Icon // Icon
.icon { .icon {
position: relative;
overflow: hidden; overflow: hidden;
display: block; display: block;
width: 13px; width: 13px;

2
src/style/atoms/_link.scss
View File

@@ -44,7 +44,7 @@
height: 22px; height: 22px;
margin-left: 6px; margin-left: 6px;
background-color: #fff; background-color: #fff;
border-radius: 100%; border-radius: 50%;
svg { svg {
height: auto; height: auto;

2
src/style/molecules/_globe.scss
View File

@@ -67,7 +67,7 @@
width: 8px; width: 8px;
height: 8px; height: 8px;
padding: 4px; padding: 4px;
border-radius: 100%; border-radius: 50%;
opacity: 1; opacity: 1;
background: #ff6c89; background: #ff6c89;
will-change: transform; will-change: transform;

4
src/style/molecules/_location.scss
View File

@@ -22,7 +22,7 @@
width: 32px; width: 32px;
height: auto; height: auto;
margin: 0 auto; margin: 0 auto;
border-radius: 100%; border-radius: 50%;
} }
// City // City
@@ -75,7 +75,7 @@
width: 184px; width: 184px;
height: 184px; height: 184px;
background: rgba($color-lightpurple, 0.3); background: rgba($color-lightpurple, 0.3);
border-radius: 100%; border-radius: 50%;
transition: transform 0.3s $ease-quart, opacity 0.3s $ease-quart; transition: transform 0.3s $ease-quart, opacity 0.3s $ease-quart;
will-change: transform; will-change: transform;

2
src/style/organisms/_carousel.scss
View File

@@ -344,7 +344,7 @@
height: 8px; height: 8px;
padding: 0; padding: 0;
background-color: $color-lightpurple; background-color: $color-lightpurple;
border-radius: 100%; border-radius: 50%;
text-decoration: none; text-decoration: none;
} }
} }

2
src/style/organisms/_fullscreen.scss
View File

@@ -75,7 +75,7 @@
width: 80px; width: 80px;
height: 80px; height: 80px;
background-color: $color-primary; background-color: $color-primary;
border-radius: 100%; border-radius: 50%;
transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart; transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
// Hidden state // Hidden state