From 80ea415287a9b9967fd45c7ace68381fa7ebd9d3 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 11 Aug 2018 12:12:48 +0300
Subject: [PATCH] use only one ::pseudo for color swatches

---
 vendor-overwrites/colorpicker/colorpicker.css | 14 +++-----------
 vendor-overwrites/colorpicker/colorview.js    |  4 ++--
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/vendor-overwrites/colorpicker/colorpicker.css b/vendor-overwrites/colorpicker/colorpicker.css
index f9eecd60..45bdb9f0 100644
--- a/vendor-overwrites/colorpicker/colorpicker.css
+++ b/vendor-overwrites/colorpicker/colorpicker.css
@@ -6,8 +6,7 @@
   display: inline-block;
 }
 
-.colorview-swatch::before,
-.colorview-swatch::after {
+.colorview-swatch::before {
   content: "";
   position: absolute;
   display: inline-block;
@@ -18,21 +17,14 @@
   width: 10px;
   height: 10px;
   box-sizing: border-box;
-}
-
-.colorview-swatch::before {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC");
+  background: linear-gradient(var(--colorview-swatch), var(--colorview-swatch)), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC");
   background-repeat: repeat;
   background-position: center;
-}
-
-.colorview-swatch::after {
   border: 1px solid #8e8e8e;
   cursor: pointer;
-  background-color: var(--colorview-swatch);
 }
 
-.colorview-swatch:hover::after {
+.colorview-swatch:hover::before {
   border-color: #494949;
 }
 
diff --git a/vendor-overwrites/colorpicker/colorview.js b/vendor-overwrites/colorpicker/colorview.js
index bd16a2f1..63bdffba 100644
--- a/vendor-overwrites/colorpicker/colorview.js
+++ b/vendor-overwrites/colorpicker/colorview.js
@@ -100,7 +100,7 @@
       if (!this.popup) {
         delete CM_EVENTS.mousedown;
         document.head.appendChild(document.createElement('style')).textContent = `
-          .colorview-swatch::after {
+          .colorview-swatch::before {
             cursor: auto;
           }
         `;
@@ -691,7 +691,7 @@
     if (button) return;
     const swatch = target.closest('.' + COLORVIEW_CLASS);
     if (!swatch) return;
-    const {left, width, height} = getComputedStyle(swatch, '::after');
+    const {left, width, height} = getComputedStyle(swatch, '::before');
     const bounds = swatch.getBoundingClientRect();
     const swatchClicked =
       offsetX >= parseFloat(left) - 1 &&