MC-4116: Update slider to use new background images logic

- fix inline wysiwyg menu position

Author: anthoula

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-center.less

@@ -7,14 +7,22 @@
 //  Collage center appearance styles
 //  _____________________________________________
 
-.pagebuilder-slide.pagebuilder-collage-centered {
+.pagebuilder-slide[data-appearance='collage-centered'] {
     .pagebuilder-overlay {
         -moz-transition: background-color 500ms ease;
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
         margin-left: auto;
         margin-right: auto;
         transition: background-color 500ms ease;
+
+        &.wysiwyg-container {
+            .mce-tinymce-inline {
+                left: 29px !important;
+                right: 29px;
+                top: 30px !important;
+            }
+        }
     }
 }
 

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-left.less

@@ -7,9 +7,19 @@
 //  Collage left appearance styles
 //  _____________________________________________
 
-.pagebuilder-slide .pagebuilder-overlay {
-    -moz-transition: background-color 500ms ease;
-    -o-transition: background-color 500ms ease;
-    -webkit-transition: background-color 500ms ease;
-    transition: background-color 500ms ease;
+.pagebuilder-slide[data-appearance='collage-left'] {
+    .pagebuilder-overlay {
+        -moz-transition: background-color 500ms ease;
+        -o-transition: background-color 500ms ease;
+        -webkit-transition: background-color 500ms ease;
+        transition: background-color 500ms ease;
+
+        &.wysiwyg-container {
+            .mce-tinymce-inline {
+                left: 29px !important;
+                right: 29px;
+                top: 30px !important;
+            }
+        }
+    }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-right.less

@@ -7,17 +7,19 @@
 //  Collage right appearance styles
 //  _____________________________________________
 
-.pagebuilder-slide.pagebuilder-collage-right {
+.pagebuilder-slide[data-appearance='collage-right'] {
     .pagebuilder-overlay {
         -moz-transition: background-color 500ms ease;
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
         margin-left: auto;
         transition: background-color 500ms ease;
 
-        .wysiwyg-container {
+        &.wysiwyg-container {
             .mce-tinymce-inline {
-                left: unset !important;
+                left: 29px !important;
+                right: 29px;
+                top: 30px !important;
             }
         }
     }

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less

@@ -54,10 +54,10 @@
             }
         }
         .mce-tinymce-inline {
-            left: -2px !important;
-            padding: 5px !important;
-            right: -2px;
-            top: -1px !important;
+            left: -1px !important;
+            padding: 5px;
+            right: -1px;
+            top: 0;
         }
         .pagebuilder-empty-slide {
             left: 0;

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html

@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="pagebuilder-content-type pagebuilder-slide pagebuilder-collage-centered"
+<div class="pagebuilder-content-type pagebuilder-slide"
      attr="data.main.attributes"
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html

@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="pagebuilder-content-type pagebuilder-slide pagebuilder-collage-right"
+<div class="pagebuilder-content-type pagebuilder-slide"
      attr="data.main.attributes"
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">