Merge branch 'bernesto-patch-3' into dev. Fixes #5746

GrapesJS · Mar 14, 2024 · 33dbd5a · 33dbd5a
2 parents 1101af3 + dc0f7eb
commit 33dbd5a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 deletions.
diff --git a/dist/css/grapes.min.css b/dist/css/grapes.min.css
diff --git a/src/domain_abstract/ui/InputColor.ts b/src/domain_abstract/ui/InputColor.ts
@@ -101,10 +101,9 @@ export default class InputColor extends Input {
       const ppfx = this.ppfx;
       const { onChange } = opts;
 
-      var colorEl = $(`<div class="${this.ppfx}field-color-picker"></div>`);
-      var cpStyle = colorEl.get(0)!.style;
-      var elToAppend = em && em.config ? em.config.el : '';
-      var colorPickerConfig = (em && em.getConfig && em.getConfig().colorPicker) || {};
+      const colorEl = $(`<div class="${this.ppfx}field-color-picker"></div>`);
+      const cpStyle = colorEl.get(0)!.style;
+      const colorPickerConfig = (em && em.getConfig && em.getConfig().colorPicker) || {};
 
       this.movedColor = '';
       let changed = false;
@@ -123,8 +122,7 @@ export default class InputColor extends Input {
       // @ts-ignore
       colorEl.spectrum({
         color: model.getValue() || false,
-        containerClassName: `${ppfx}one-bg ${ppfx}two-color`,
-        appendTo: elToAppend || 'body',
+        containerClassName: `${ppfx}one-bg ${ppfx}two-color ${ppfx}editor-sp`,
         maxSelectionSize: 8,
         showPalette: true,
         showAlpha: true,

diff --git a/src/styles/scss/main.scss b/src/styles/scss/main.scss
@@ -444,17 +444,18 @@ $colorsAll: (one, var(--gjs-primary-color)),
 
 /********* Spectrum **********/
 
-.#{$app-prefix}editor-cont {
+.#{$app-prefix}editor-sp {
+  border: 1px solid var(--gjs-main-dark-color);
+  box-shadow: 0 0 7px var(--gjs-main-dark-color);
+  border-radius: 3px;
+}
+
+.#{$app-prefix}editor-sp {
   .sp-hue, .sp-slider{ cursor: row-resize;}
   .sp-color, .sp-dragger{ cursor: crosshair;}
   .sp-alpha-inner, .sp-alpha-handle{cursor: col-resize;}
   .sp-hue{ left: 90%; }
   .sp-color{right: 15%;}
-  .sp-container {
-    border: 1px solid var(--gjs-main-dark-color);
-    box-shadow: 0 0 7px var(--gjs-main-dark-color);
-    border-radius: 3px;
-  }
   .sp-picker-container{border:none;}
   .colpick_dark .colpick_color {  outline: 1px solid var(--gjs-main-dark-color);}
   .sp-cancel, .sp-cancel:hover {
@@ -484,14 +485,17 @@ $colorsAll: (one, var(--gjs-primary-color)),
   	width: 100%;
   	position: relative;
   	text-align: right;
-  }
-  .sp-container button, .sp-container button:hover, .sp-container button:active{
-  	background: var(--gjs-main-dark-color);
-    border-color: var(--gjs-main-dark-color);
-    color: var(--gjs-font-color);
-    text-shadow: none;
-    box-shadow: none;
-    padding: 3px 5px;
+
+    .sp-choose,
+    .sp-choose:hover,
+    .sp-choose:active {
+      background: var(--gjs-main-dark-color);
+      border-color: var(--gjs-main-dark-color);
+      color: var(--gjs-font-color);
+      text-shadow: none;
+      box-shadow: none;
+      padding: 3px 5px;
+    }
   }
   .sp-palette-container{
     border: none;