MAGETWO-86867: [Tech Debt] Revise LESS/CSS classes and icons

Author: irenelagno

app/code/Magento/PageBuilder/docs/how-to-add-new-content-type.md

@@ -56,7 +56,7 @@ Optional: For template knockout bindings, you can use the original data-bind syn
 Preview template `app/code/Vendor/ModuleName/view/adminhtml/web/template/content-type/simple/default/preview.html`.
 
 ``` HTML
-<div class="pagebuilder-content-type pagebuilder-entity-preview" event="{mouseover: onMouseOver, mouseout: onMouseOut}, mouseoverBubble: false">
+<div class="pagebuilder-content-type" event="{mouseover: onMouseOver, mouseout: onMouseOut}, mouseoverBubble: false">
     <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" html="data.main.html"></div>
     <render args="getOptions().template" />
 </div>

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

@@ -24,6 +24,7 @@
 @import 'row/_import.less';
 @import 'slide/_import.less';
 @import 'slider/_import.less';
+@import 'tab-item/_import.less';
 @import 'tabs/_import.less';
 @import 'text/_import.less';
 @import 'video/_import.less';

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

@@ -86,32 +86,9 @@
 
     &.pagebuilder-content-type {
         display: inline-block;
-        font-size: 0;
+        font-size: 14px;
         width: 100%;
 
-        &.pagebuilder-abstract {
-            background: @entityColor;
-            color: @color-white;
-            text-align: center;
-
-            i {
-                font-size: 24px;
-            }
-
-            h3 {
-                margin: 6px 0 0;
-                padding: 0;
-            }
-
-            * {
-                color: @color-white;
-            }
-        }
-
-        &.pagebuilder-entity-preview {
-            font-size: 14px;
-        }
-
         .pagebuilder-loading {
             left: 50%;
             position: absolute;
@@ -293,6 +270,7 @@
     &.dragging {
         .pagebuilder-content-type {
             .pagebuilder-column {
+                font-size: 0;
                 .pagebuilder-column-resize-handle {
                     display: none;
                 }

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

@@ -10,6 +10,7 @@
 .pagebuilder-content-type {
     .pagebuilder-button-item {
         width: auto;
+        font-size: 0;
         [contenteditable=true] {
             display: inline-block;
             min-height: 18px;

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/tab-item/_import.less

@@ -0,0 +1,10 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+//
+//  _import imports all appearance {less} files
+//  _____________________________________________
+
+@import './_default.less';

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/accordion/default/preview.html

@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="pagebuilder-content-type type-nested pagebuilder-entity-preview pagebuilder-accordion" data-bind="event: { mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
+<div class="pagebuilder-content-type type-nested pagebuilder-accordion" data-bind="event: { mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <!-- ko template: getOptions().template --><!-- /ko -->
     <!-- ko if: previewData.items().length == 0 -->
     <i class="icon-pagebuilder-accordian"></i> <span data-bind="text: $t('Accordion');"></span>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/anchor/default/preview.html

@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="pagebuilder-content-type pagebuilder-entity-preview pagebuilder-anchor" attr="data.main.attributes" css="data.main.css" ko-style="data.main.style" event="{mouseover: onMouseOver, mouseout: onMouseOut}, mouseoverBubble: false">
+<div class="pagebuilder-content-type pagebuilder-anchor" attr="data.main.attributes" css="data.main.css" ko-style="data.main.style" event="{mouseover: onMouseOver, mouseout: onMouseOut}, mouseoverBubble: false">
     <i class="icon-pagebuilder-anchor"></i>
     <span text="data.main.attributes().id ? '#' + data.main.attributes().id \: $t('Anchor')"></span>
     <render args="getOptions().template" />

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

@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="pagebuilder-content-type pagebuilder-entity-preview pagebuilder-banner" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
+<div class="pagebuilder-content-type pagebuilder-banner" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <render args="getOptions().template" />
     <div attr="data.main.attributes" ko-style="Object.assign({}, data.main.style(), data.overlay.style(), data.desktop_image.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})" css="data.main.css" event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
         <div class="pagebuilder-collage-overlay" ko-style="data.overlay.style()">

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

@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="pagebuilder-content-type pagebuilder-entity-preview pagebuilder-banner" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
+<div class="pagebuilder-content-type pagebuilder-banner" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <render args="getOptions().template" />
     <div css="data.main.css" attr="data.main.attributes" ko-style="Object.assign({}, data.main.style(), data.overlay.style(), data.desktop_image.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})" event="{ mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper }">
         <div class="pagebuilder-collage-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">

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

@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="pagebuilder-content-type pagebuilder-entity-preview pagebuilder-banner" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
+<div class="pagebuilder-content-type pagebuilder-banner" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <render args="getOptions().template" />
     <div attr="data.main.attributes" ko-style="Object.assign({}, data.main.style(), data.overlay.style(), data.desktop_image.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})" css="data.main.css" event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
         <div class="pagebuilder-collage-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">