[libadwaita/wip/exalm/stylesheet2: 86/97] stylesheet: Split emoji chooser styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit 507a816106905b3cea425d873fc62e2d4c252d5f
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 14:07:59 2021 +0500

    stylesheet: Split emoji chooser styles into a separate file

 src/stylesheet/_common.scss                | 67 ------------------------------
 src/stylesheet/_widgets.scss               |  1 +
 src/stylesheet/meson.build                 |  1 +
 src/stylesheet/widgets/_emoji-chooser.scss | 63 ++++++++++++++++++++++++++++
 4 files changed, 65 insertions(+), 67 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 0210d0a..881bfa6 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -451,73 +451,6 @@ cursor-handle {
       -1px 0 rgba(0,0,0,0.1);
 }
 
-/*********
- * Emoji *
- ********/
-
-popover.emoji-picker > contents,
-popover.entry-completion > contents {
-  padding: 0;
-}
-
-.emoji-searchbar {
-  padding: 6px;
-  border-spacing: 6px;
-  border-bottom: 1px solid $borders_color;
-}
-
-.emoji-toolbar {
-  padding: 6px;
-  border-spacing: 6px;
-  border-top: 1px solid $borders_color;
-}
-
-button.emoji-section {
-  border-color: transparent;
-  border-width: 3px;
-  border-style: none none solid;
-  border-radius: 0;
-
-  padding: 3px 0 0;
-  min-width: 32px;
-  min-height: 28px;
-
-  /* reset props inherited from the button style */
-  background: none;
-  box-shadow: none;
-
-  &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
-  &:checked { border-color: $selected_bg_color; }
-}
-
-popover.emoji-picker emoji {
-  font-size: x-large;
-  padding: 6px;
-  border-radius: 6px;
-
-  &:focus,
-  &:hover {
-    background: $selected_bg_color;
-  }
-}
-
-emoji-completion-row {
-   > box {
-    border-spacing: 10px;
-    padding: 2px 10px;
-  }
-
-  :focus,
-  :hover {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
-  }
-
-  emoji:focus,
-  emoji:hover {
-    background-color: $menu_selected_color;
-  }
-}
 
 statusbar {
   padding: 6px 10px 6px 10px;
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 6aeb41b..5683602 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -2,6 +2,7 @@
 @import 'widgets/checks';
 @import 'widgets/color-chooser';
 @import 'widgets/dropdowns';
+@import 'widgets/emoji-chooser';
 @import 'widgets/entries';
 @import 'widgets/file-chooser';
 @import 'widgets/header-bar';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index b057a61..9999b02 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -24,6 +24,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_checks.scss',
       'widgets/_color-chooser.scss',
       'widgets/_dropdowns.scss',
+      'widgets/_emoji-chooser.scss',
       'widgets/_entries.scss',
       'widgets/_file-chooser.scss',
       'widgets/_header-bar.scss',
diff --git a/src/stylesheet/widgets/_emoji-chooser.scss b/src/stylesheet/widgets/_emoji-chooser.scss
new file mode 100644
index 0000000..68801db
--- /dev/null
+++ b/src/stylesheet/widgets/_emoji-chooser.scss
@@ -0,0 +1,63 @@
+popover.emoji-picker > contents,
+popover.entry-completion > contents {
+  padding: 0;
+}
+
+.emoji-searchbar {
+  padding: 6px;
+  border-spacing: 6px;
+  border-bottom: 1px solid $borders_color;
+}
+
+.emoji-toolbar {
+  padding: 6px;
+  border-spacing: 6px;
+  border-top: 1px solid $borders_color;
+}
+
+button.emoji-section {
+  border-color: transparent;
+  border-width: 3px;
+  border-style: none none solid;
+  border-radius: 0;
+
+  padding: 3px 0 0;
+  min-width: 32px;
+  min-height: 28px;
+
+  /* reset props inherited from the button style */
+  background: none;
+  box-shadow: none;
+
+  &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
+  &:checked { border-color: $selected_bg_color; }
+}
+
+popover.emoji-picker emoji {
+  font-size: x-large;
+  padding: 6px;
+  border-radius: 6px;
+
+  &:focus,
+  &:hover {
+    background: $selected_bg_color;
+  }
+}
+
+emoji-completion-row {
+   > box {
+    border-spacing: 10px;
+    padding: 2px 10px;
+  }
+
+  :focus,
+  :hover {
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
+  }
+
+  emoji:focus,
+  emoji:hover {
+    background-color: $menu_selected_color;
+  }
+}