From 419ecc9e80b20da40fcf2056b7855f002ac903ca Mon Sep 17 00:00:00 2001
From: Daniel Boles <dboles@src.gnome.org>
Date: Sat, 2 Sep 2017 16:56:14 +0100
Subject: [PATCH] Adwaita: Make use of SASS syntax for emoji stuff

This makes the theme easier to maintain.

https://bugzilla.gnome.org/show_bug.cgi?id=786956
---
 gtk/theme/Adwaita/_common.scss           | 43 ++++++++++++------------
 gtk/theme/Adwaita/gtk-contained-dark.css | 11 +++---
 gtk/theme/Adwaita/gtk-contained.css      | 11 +++---
 3 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 041a60bcce..f8a203adcc 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4422,6 +4422,11 @@ stackswitcher button.text-button.circular { // FIXME aggregate with buttons
   padding: 0;
 }
 
+
+/*********
+ * Emoji *
+ ********/
+
 popover.emoji-picker { padding-left: 0; padding-right: 0; }
 
 button.emoji-section {
@@ -4441,32 +4446,28 @@ button.emoji-section {
   text-shadow: none;
 
   outline-offset: -5px;
+
+  &:backdrop:not(:checked) { border-color: transparent; }
+  &:hover { border-color: $borders_color; }
+  &:checked { border-color: $selected_bg_color; }
+
+  color: $borders_color;
+  &:hover { color: mix($fg_color, $borders_color, 50%); }
+  &:checked { color: $fg_color; }
+  &:backdrop { color: $backdrop_borders_color; }
+  &:backdrop:checked { color: $backdrop_fg_color; }
+
+  label {
+    padding: 0;
+  }
 }
 
-button.emoji-section label { padding: 0; }
-
-button.emoji-section:hover { border-color: $borders_color; }
-
-button.emoji-section:checked { border-color: $selected_bg_color; }
-
-button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
-
-button.emoji-section { color: $borders_color; }
-
-button.emoji-section:hover { color: mix($fg_color, $borders_color, 50%); }
-
-button.emoji-section:checked { color: $fg_color; }
-
-button.emoji-section:backdrop { color: $backdrop_borders_color; }
-
-button.emoji-section:backdrop:checked { color: $backdrop_fg_color; }
-
 .emoji {
   font-size: x-large;
   padding: 6px;
   border-radius: 6px;
-}
 
-.emoji :hover {
-  background: $selected_bg_color;
+  :hover {
+    background: $selected_bg_color;
+  }
 }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 4776c8b29e..011f41bbd2 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1897,20 +1897,17 @@ stackswitcher button.text-button { min-width: 100px; }
 
 stackswitcher button.circular, stackswitcher button.text-button.circular { min-width: 32px; min-height: 32px; padding: 0; }
 
+/********* Emoji * */
 popover.emoji-picker { padding-left: 0; padding-right: 0; }
 
-button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; }
+button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; color: #1b1f20; }
 
-button.emoji-section label { padding: 0; }
+button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
 
 button.emoji-section:hover { border-color: #1b1f20; }
 
 button.emoji-section:checked { border-color: #215d9c; }
 
-button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
-
-button.emoji-section { color: #1b1f20; }
-
 button.emoji-section:hover { color: #858686; }
 
 button.emoji-section:checked { color: #eeeeec; }
@@ -1919,6 +1916,8 @@ button.emoji-section:backdrop { color: #202425; }
 
 button.emoji-section:backdrop:checked { color: #919494; }
 
+button.emoji-section label { padding: 0; }
+
 .emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
 
 .emoji :hover { background: #215d9c; }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index df03679afd..73068fc81e 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1917,20 +1917,17 @@ stackswitcher button.text-button { min-width: 100px; }
 
 stackswitcher button.circular, stackswitcher button.text-button.circular { min-width: 32px; min-height: 32px; padding: 0; }
 
+/********* Emoji * */
 popover.emoji-picker { padding-left: 0; padding-right: 0; }
 
-button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; }
+button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; color: #b6b6b3; }
 
-button.emoji-section label { padding: 0; }
+button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
 
 button.emoji-section:hover { border-color: #b6b6b3; }
 
 button.emoji-section:checked { border-color: #4a90d9; }
 
-button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
-
-button.emoji-section { color: #b6b6b3; }
-
 button.emoji-section:hover { color: #727574; }
 
 button.emoji-section:checked { color: #2e3436; }
@@ -1939,6 +1936,8 @@ button.emoji-section:backdrop { color: #c0c0bd; }
 
 button.emoji-section:backdrop:checked { color: #8b8e8f; }
 
+button.emoji-section label { padding: 0; }
+
 .emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
 
 .emoji :hover { background: #4a90d9; }