From 40aa1a37a2ca94500c96e78b5ee646aca18d6d30 Mon Sep 17 00:00:00 2001
From: Jure Grabnar <jgrabnar@biosistemika.com>
Date: Tue, 17 Sep 2019 15:45:27 +0200
Subject: [PATCH] Change colors of active buttons TinyMCE

Close SCI-3784
---
 app/assets/stylesheets/hooks/tinymce.scss | 35 ++++++++++++++++-------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/hooks/tinymce.scss b/app/assets/stylesheets/hooks/tinymce.scss
index 1ebe183c1..f63722f4e 100644
--- a/app/assets/stylesheets/hooks/tinymce.scss
+++ b/app/assets/stylesheets/hooks/tinymce.scss
@@ -44,21 +44,36 @@
   z-index: 5;
 }
 
-.mce-widget.mce-btn[aria-label="Restore last draft"] {
-  background: $brand-primary;
-  border-radius: 4px;
-  transition: $md-transaction;
+.mce-widget.mce-btn {
+  border-color: $color-white !important;
 
-  i {
-    color: $color-white;
-    transition: $md-transaction;
+  &:not(.mce-active):hover,
+  &:not(.mce-active):active {
+    span,
+    i {
+      color: $brand-primary;
+    }
   }
 
-  &.mce-disabled {
-    background: transparent;
+  &.mce-active,
+  &.mce-active:hover,
+  &.mce-active:active,
+  &.mce-active:focus {
+    background-color: $brand-primary;
 
+    span,
     i {
-      color: inherit;
+      color: $color-white;
     }
   }
 }
+
+// Caret symbol has unneeded border-left
+.mce-splitbtn:hover .mce-open {
+  border-left: $color-white !important;
+}
+
+// Selected item list should be $brand-primary
+.mce-menu-item.mce-active.mce-menu-item-normal {
+  background-color: $brand-primary !important;
+}