Skip to content

Commit 92bed78

Browse files
andrepat0andrepat0
committed
feat: improve CSS styling for Blob component
1 parent 7b4cf2e commit 92bed78

File tree

7 files changed

+30
-20
lines changed

7 files changed

+30
-20
lines changed

‎src/components/Blob/Blob.css‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,22 @@
1212
justify-content: center;
1313
border-radius: 90% 95% 85% 105%;
1414
animation: wobble calc(150ms * var(--memori-blob-t)) linear infinite;
15+
backface-visibility: hidden;
1516
background: #f0f;
1617
box-shadow: 0 0 0.5em 0.2em #000 inset, 0 0 0.15em 0 #fff;
1718
filter: hue-rotate(0deg);
1819
font-size: 20vmin;
1920
mix-blend-mode: screen;
20-
transform: translate(var(--memori-blob-x, -50%), var(--memori-blob-y, -50%)) rotate(0deg);
21+
transform: translate(var(--memori-blob-x, -50%), var(--memori-blob-y, -50%)) rotate(0deg) translateZ(0);
2122
transform-origin: 50% 50%;
23+
will-change: transform;
2224
}
2325

2426
.memori-blob.memori-blob--speaking {
2527
animation: blobspeaking 2s ease-in-out infinite;
28+
backface-visibility: hidden;
29+
transform: translateZ(0);
30+
will-change: transform;
2631
}
2732

2833
@media screen and (max-height: 1280px) {
@@ -84,37 +89,34 @@
8489
@keyframes wobble {
8590
to {
8691
filter: hue-rotate(360deg);
87-
transform: translate(var(--memori-blob-x), var(--memori-blob-y)) rotate(360deg);
92+
transform: translate(var(--memori-blob-x), var(--memori-blob-y)) rotate(360deg) translateZ(0);
8893
}
8994
}
9095

9196
@keyframes blobspeaking {
92-
0% {
97+
0%, 100% {
9398
filter: brightness(1);
94-
transform: scale(1);
99+
transform: scale(1) translateZ(0);
95100
}
96101

97102
15% {
98103
filter: brightness(1.1);
104+
transform: scale(1) translateZ(0);
99105
}
100106

101107
30% {
102108
filter: brightness(1);
103-
transform: scale(0.99);
109+
transform: scale(0.99) translateZ(0);
104110
}
105111

106112
50% {
107113
filter: brightness(1.05);
108-
transform: scale(1.01);
114+
transform: scale(1.01) translateZ(0);
109115
}
110116

111117
75% {
112118
filter: brightness(1.15);
113-
}
114-
115-
100% {
116-
filter: brightness(1.1);
117-
transform: scale(0.99);
119+
transform: scale(1) translateZ(0);
118120
}
119121
}
120122

‎src/components/ShareButton/ShareButton.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,22 @@
1919
.memori-share-button--dropdown-item-content{
2020
display: inline-flex;
2121
align-items: center;
22-
margin-top: var(--memori-spacing-sm);
2322
cursor: pointer;
2423
}
2524

2625
.memori-share-button--dropdown-menu > .memori-dropdown__item{
2726
flex-flow: row;
2827
align-items: flex-start;
2928
align-items: center;
29+
padding: var(--memori-spacing-sm);
30+
border-radius: var(--memori-radius-box);
31+
margin-bottom: var(--memori-spacing-sm);
32+
background-color: var(--memori-surface-contrast);
33+
color: var(--memori-text-color);
34+
cursor: pointer;
35+
font-size: var(--memori-text-size-small);
36+
font-weight: var(--memori-text-weight-medium);
37+
text-align: left;
3038
}
3139

3240
.memori-share-button--overlay {

‎src/icons/FacebookIcon.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ const FacebookIcon = (props: React.SVGProps<SVGSVGElement>) => (
99
{...props}
1010
>
1111
<path
12-
fill="#0F0F0F"
12+
fill="currentColor"
1313
d="M17.3 9.6a1 1 0 1 0-1.6-1.2l-2.308 3.078-2.185-2.185A1 1 0 0 0 9.7 9.4l-3 4a1 1 0 0 0 1.6 1.2l2.308-3.078 2.185 2.185A1 1 0 0 0 14.3 13.6l3-4Z"
1414
/>
1515
<path
16-
fill="#0F0F0F"
16+
fill="currentColor"
1717
fillRule="evenodd"
1818
d="M12 23c-1.224 0-1.9-.131-3-.5l-2.106 1.053A2 2 0 0 1 4 21.763V19.5c-2.153-2.008-3-4.323-3-7.5C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11Zm-6-4.37-.636-.593C3.691 16.477 3 14.733 3 12a9 9 0 1 1 9 9c-.986 0-1.448-.089-2.364-.396l-.788-.264L6 21.764V18.63Z"
1919
clipRule="evenodd"

‎src/icons/LinkedinIcon.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ const LinkedinIcon = (props: React.SVGProps<SVGSVGElement>) => (
99
{...props}
1010
>
1111
<path
12-
fill="#0F0F0F"
12+
fill="currentColor"
1313
d="M6.5 8a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM5 10a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-8ZM11 19h1a1 1 0 0 0 1-1v-4.5c0-1.5 3-2.5 3-.5v5a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-6c0-2-1.5-3-3.5-3S13 10.5 13 10.5V10a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1Z"
1414
/>
1515
<path
16-
fill="#0F0F0F"
16+
fill="currentColor"
1717
fillRule="evenodd"
1818
d="M20 1a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h16Zm0 2a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h16Z"
1919
clipRule="evenodd"

‎src/icons/TelegramIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const TelegramIcon = (props: React.SVGProps<SVGSVGElement>) => (
99
{...props}
1010
>
1111
<path
12-
fill="#0F0F0F"
12+
fill="currentColor"
1313
fillRule="evenodd"
1414
d="M23.112 4.494c.318-1.55-1.205-2.837-2.68-2.267L2.342 9.216c-1.647.637-1.72 2.941-.117 3.682l3.94 1.818 1.873 6.559a1 1 0 0 0 1.67.432l2.886-2.887 4.043 3.033a2 2 0 0 0 3.16-1.198l3.315-16.16ZM3.063 11.082l18.09-6.99-3.316 16.161L13.1 16.7a1 1 0 0 0-1.307.093l-1.236 1.236.371-2.043 7.28-7.279a1 1 0 0 0-1.204-1.575L6.95 12.876l-3.888-1.794Zm5.114 3.397.606 2.123.233-1.281a1 1 0 0 1 .277-.528l2.22-2.22-3.336 1.906Z"
1515
clipRule="evenodd"

‎src/icons/TwitterIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from "react"
22
const TwitterIcon = (props: React.SVGProps<SVGSVGElement>) => (
33
<svg xmlns="http://www.w3.org/2000/svg" width={800} height={800} fill="currentColor" viewBox="0 0 100 100" {...props}>
4-
<path d="M69.7 8.7H30.4C18.7 8.7 9.1 18.2 9.1 30v41.2c0 11.7 9.5 21.3 21.3 21.3h39.4c11.7 0 21.3-9.5 21.3-21.3V29.9C91 18.2 81.5 8.7 69.7 8.7zm7.1 69.6H61.4c-.1 0-.2 0-.2-.1L46.8 57.3h-.1C40.9 64 35.2 70.6 29.6 77.1c-.3.4-.7.7-1 1-.1.1-.2.1-.3.1h-4.2c-.1 0-.2 0-.1-.1l20.5-23.8c.1-.1.1-.2 0-.3L24.1 24.3v-.1h15.5c.1 0 .1 0 .2.1L53.4 44h.1l16.9-19.7c.1-.1.2-.1.3-.1h4.2c.2 0 .2.1.1.2L55.6 46.9c-.1.1-.1.2 0 .3l21.3 31s0 .1-.1.1z" />
4+
<path fill="currentColor" d="M69.7 8.7H30.4C18.7 8.7 9.1 18.2 9.1 30v41.2c0 11.7 9.5 21.3 21.3 21.3h39.4c11.7 0 21.3-9.5 21.3-21.3V29.9C91 18.2 81.5 8.7 69.7 8.7zm7.1 69.6H61.4c-.1 0-.2 0-.2-.1L46.8 57.3h-.1C40.9 64 35.2 70.6 29.6 77.1c-.3.4-.7.7-1 1-.1.1-.2.1-.3.1h-4.2c-.1 0-.2 0-.1-.1l20.5-23.8c.1-.1.1-.2 0-.3L24.1 24.3v-.1h15.5c.1 0 .1 0 .2.1L53.4 44h.1l16.9-19.7c.1-.1.2-.1.3-.1h4.2c.2 0 .2.1.1.2L55.6 46.9c-.1.1-.1.2 0 .3l21.3 31s0 .1-.1.1z" />
55
<path d="M37.8 27.8h-6.7c-.1 0-.1.1-.1.2l32.2 46.7H69.9c.1 0 .1-.1.1-.2L37.8 27.8z" />
66
</svg>
77
)

‎src/icons/WhatsappIcon.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ const WhatsappIcon = (props: React.SVGProps<SVGSVGElement>) => (
99
{...props}
1010
>
1111
<path
12-
fill="#0F0F0F"
12+
fill="currentColor"
1313
d="M6.014 8.006c.114-.904 1.289-2.132 2.22-1.996V6.01c.907.172 1.625 1.734 2.03 2.436.286.509.1 1.025-.167 1.243-.361.29-.926.692-.808 1.095C9.5 11.5 12 14 13.23 14.711c.466.269.804-.44 1.092-.804.21-.28.726-.447 1.234-.171.759.442 1.474.956 2.135 1.534.33.276.408.684.179 1.115-.403.76-1.569 1.76-2.415 1.557C13.976 17.587 8 15.27 6.08 8.558c-.108-.318-.08-.438-.066-.552Z"
1414
/>
1515
<path
16-
fill="#0F0F0F"
16+
fill="currentColor"
1717
fillRule="evenodd"
1818
d="M12 23c-1.224 0-1.9-.131-3-.5l-2.106 1.053A2 2 0 0 1 4 21.763V19.5c-2.153-2.008-3-4.323-3-7.5C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11Zm-6-4.37-.636-.593C3.691 16.477 3 14.733 3 12a9 9 0 1 1 9 9c-.986 0-1.448-.089-2.364-.396l-.788-.264L6 21.764V18.63Z"
1919
clipRule="evenodd"

0 commit comments

Comments
 (0)