[gnome-shell-sass] keyboard: Add Emoji keyboard

[Florian Müllner <fmuellner src gnome org>]

commit de3928f2a57dd60c9def2606ba6a573e970786c8
Author: Carlos Garnacho <carlosg gnome org>
Date:   Fri Dec 22 16:02:51 2017 +0100

    keyboard: Add Emoji keyboard
    
    This keyboard works similar to GTK+'s emoji chooser (actually, both pull
    from the same JSON file). Emojis are categorized in sections and variants
    and kept in a "model".
    
    The EmojiPager actor then uses this model to generate pages on-the-fly as
    the user swipes around. This is an important optimization since the amount
    of actors would rival with the rest of the shell otherwise.
    
    The EmojiSelection object puts the EmojiPager, the page indicators and
    a KeyContainer with the bottom row of emoji section shortcuts together to
    implement the emoji panel as a whole.
    
    The Keyboard object hooked this to an "emoji" key, which is just visible
    on the Clutter.InputContentPurpose where showing an emoji would be
    meaningful. Otherwise the surrounding buttons are made a bit wider to
    cover up for it (i.e. as it was before).

 _common.scss | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
---
diff --git a/_common.scss b/_common.scss
index dc72a49..cba7914 100644
--- a/_common.scss
+++ b/_common.scss
@@ -1635,6 +1635,15 @@ StScrollBar {
 
 #keyboard {
     background-color: transparentize($osd_bg_color, 0.3);
+
+    .page-indicator {
+        padding: 4px 4px;
+
+        .page-indicator-icon {
+            width: 6px;
+            height: 6px
+        }
+    }
 }
 
   .key-container {
@@ -1696,6 +1705,20 @@ StScrollBar {
     -boxpointer-gap: 5px;
   }
 
+.emoji-page {
+  .keyboard-key {
+    background-color: transparent;
+    border: none;
+  }
+}
+
+.emoji-panel {
+  .keyboard-key:latched {
+    border-color: #005684;
+    background-color: #006098;
+  }
+}
+
 // IBus Candidate Popup
 
 .candidate-popup-content {