fix(emoji): make emoji inherit font-size so they don't get cropped

Emojis did not respect the font size of their element they were in. That's because they are not a font. This PR - makes it possible to adjust the emojis according to the font-size of the element they are integrated - also respects paddings in buttons/labels now when they contain emojis - makes the usage of colon (`data-emoji=':smile:'`) and no-colon (`data-emoji='smile'`) based usage optional to be able to reduce the generated CSS even more
fomantic · Nov 15, 2019 · 66c45d8 · 66c45d8
1 parent 4c725a9
commit 66c45d8
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 34 deletions.
diff --git a/src/definitions/elements/emoji.less b/src/definitions/elements/emoji.less
@@ -25,16 +25,21 @@
 
 
 em[data-emoji] {
-  display: inline-block;
   opacity: @opacity;
 
   speak: none;
   backface-visibility: hidden;
+}
 
-  line-height: normal;
-  vertical-align: middle;
+em[data-emoji]:before {
+  content:'\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
+  display: inline-block;
+  line-height: @emojiLineHeight;
   background-repeat: no-repeat;
   background-position: center center;
+  & when not (@emojiFileType = 'svg') {
+    background-size: contain;
+  }
 }
 
 
@@ -51,7 +56,7 @@ em[data-emoji].disabled {
            Variations
 *******************************/
 
-em[data-emoji].loading {
+em[data-emoji].loading:before {
   animation: loader @loadingDuration linear infinite;
 }
 

diff --git a/src/themes/default/elements/emoji.overrides b/src/themes/default/elements/emoji.overrides
@@ -3076,16 +3076,19 @@
 
 each(@size-map, {
   em[data-emoji].@{key} {
-    width: @baseSize * @value;
-    height: @baseSize * @value;
-    background-size: 1.5em * @value 1.5em * @value;
+    font-size: 1.5em * @value;
+    vertical-align: middle;
   }
 });
 
-em[data-emoji]:extend(em[data-emoji].small) {}
-
 each(@emoji-map,{
-  em[data-emoji="@{value}"],em[data-emoji=":@{value}:"]  {
+  & when (@variationEmojiColons) {
+    em[data-emoji=":@{value}:"]:before {
+      background-image: url("@{emojiPath}@{key}.@{emojiFileType}");
+    }
+    em[data-emoji="@{value}"]:before:extend(em[data-emoji=":@{value}:"]:before) when (@variationEmojiNoColons) {}
+  }
+  em[data-emoji="@{value}"]:before when (@variationEmojiNoColons) and not (@variationEmojiColons) {
     background-image: url("@{emojiPath}@{key}.@{emojiFileType}");
   }
 });
diff --git a/src/themes/default/elements/emoji.variables b/src/themes/default/elements/emoji.variables
@@ -15,7 +15,4 @@
 /* Emoji Variables */
 @opacity: 1;
 @loadingDuration: 2s;
-
-/* Size */
-@baseSize: 24px;
-
+@emojiLineHeight: @headerLineHeight;
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -531,3 +531,7 @@
 /* Loading */
 @variationTransitionDisabled: true;
 @variationTransitionLoading: true;
+
+/* Emojis */
+@variationEmojiColons: true;
+@variationEmojiNoColons: true;
diff --git a/src/themes/joypixels/elements/emoji.overrides b/src/themes/joypixels/elements/emoji.overrides
@@ -3076,16 +3076,19 @@
 
 each(@size-map, {
   em[data-emoji].@{key} {
-    width: @baseSize * @value;
-    height: @baseSize * @value;
-    background-size: 1.5em * @value 1.5em * @value;
+    font-size: 1.5em * @value;
+    vertical-align: middle;
   }
 });
 
-em[data-emoji]:extend(em[data-emoji].small) {}
-
 each(@emoji-map,{
-  em[data-emoji="@{value}"],em[data-emoji=":@{value}:"]  {
+  & when (@variationEmojiColons) {
+    em[data-emoji=":@{value}:"]:before {
+      background-image: url("@{emojiPath}@{key}.@{emojiFileType}");
+    }
+    em[data-emoji="@{value}"]:before:extend(em[data-emoji=":@{value}:"]:before) when (@variationEmojiNoColons) {}
+  }
+  em[data-emoji="@{value}"]:before when (@variationEmojiNoColons) and not (@variationEmojiColons) {
     background-image: url("@{emojiPath}@{key}.@{emojiFileType}");
   }
 });
diff --git a/src/themes/joypixels/elements/emoji.variables b/src/themes/joypixels/elements/emoji.variables
@@ -18,7 +18,4 @@
 /* Emoji Variables */
 @opacity: 1;
 @loadingDuration: 2s;
-
-/* Size */
-@baseSize: 24px;
-
+@emojiLineHeight: @headerLineHeight;
diff --git a/src/themes/twitter/elements/emoji.overrides b/src/themes/twitter/elements/emoji.overrides
@@ -3076,16 +3076,19 @@
 
 each(@size-map, {
   em[data-emoji].@{key} {
-    width: @baseSize * @value;
-    height: @baseSize * @value;
-    background-size: 1.5em * @value 1.5em * @value;
+    font-size: 1.5em * @value;
+    vertical-align: middle;
   }
 });
 
-em[data-emoji]:extend(em[data-emoji].small) {}
-
 each(@emoji-map,{
-  em[data-emoji="@{value}"],em[data-emoji=":@{value}:"]  {
+  & when (@variationEmojiColons) {
+    em[data-emoji=":@{value}:"]:before {
+      background-image: url("@{emojiPath}@{key}.@{emojiFileType}");
+    }
+    em[data-emoji="@{value}"]:before:extend(em[data-emoji=":@{value}:"]:before) when (@variationEmojiNoColons) {}
+  }
+  em[data-emoji="@{value}"]:before when (@variationEmojiNoColons) and not (@variationEmojiColons) {
     background-image: url("@{emojiPath}@{key}.@{emojiFileType}");
   }
 });
diff --git a/src/themes/twitter/elements/emoji.variables b/src/themes/twitter/elements/emoji.variables
@@ -15,7 +15,4 @@
 /* Emoji Variables */
 @opacity: 1;
 @loadingDuration: 2s;
-
-/* Size */
-@baseSize: 24px;
-
+@emojiLineHeight: @headerLineHeight;