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

irenelagno · irenelagno · commit b1dc71add353 · 2018-05-24T10:38:42.000-05:00
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_typography.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_typography.less
@@ -51,7 +51,7 @@ body {
         margin: 0 0 40px;
 
         .lib-typography(
-            @_color: #333,
+            @_color: @color-gray20,
             @_font-family: false,
             @_font-size: 40px,
             @_font-style: false,
@@ -64,7 +64,7 @@ body {
         margin: 25px 0 20px;
 
         .lib-typography(
-            @_color: #333,
+            @_color: @color-gray20,
             @_font-family: false,
             @_font-size: 26px,
             @_font-style: false,
@@ -74,10 +74,10 @@ body {
     }
 
     h3 {
-        margin: @margin 0 10px;
+        margin: 20px 0 10px;
 
         .lib-typography(
-            @_color: #333,
+            @_color: @color-gray20,
             @_font-family: false,
             @_font-size: 18px,
             @_font-style: false,
@@ -87,10 +87,10 @@ body {
     }
 
     h4 {
-        margin: @margin 0;
+        margin: 20px 0;
 
         .lib-typography(
-            @_color: #333,
+            @_color: @color-gray20,
             @_font-family: false,
             @_font-size: 14px,
             @_font-style: false,
@@ -100,10 +100,10 @@ body {
     }
 
     h5 {
-        margin: @margin 0;
+        margin: 20px 0;
 
         .lib-typography(
-            @_color: #333,
+            @_color: @color-gray20,
             @_font-family: false,
             @_font-size: 12px,
             @_font-style: false,
@@ -113,10 +113,10 @@ body {
     }
 
     h6 {
-        margin: @margin 0;
+        margin: 20px 0;
 
         .lib-typography(
-            @_color: #333,
+            @_color: @color-gray20,
             @_font-family: false,
             @_font-size: 10px,
             @_font-style: false,
@@ -129,7 +129,7 @@ body {
     //  Text
     //
     p {
-        color: #333;
+        color: @color-gray20;
         font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
         font-size: 14px;
         font-style: normal;
@@ -139,9 +139,9 @@ body {
     }
 
     pre {
-        background-color: #f6f6f6;
+        background-color: @color-white-smoke;
         border: @pre__border-width solid #ccc;
-        color: #111;
+        color: @color-black;
         font-family: @font-family__monospace;
         font-size: @code__font-size;
         font-style: normal;
@@ -152,8 +152,8 @@ body {
     }
 
     .cms-content-important {
-        background-color: @light_grey;
-        color: #333;
+        background-color: @color-white-smoke;
+        color: @color-gray20;
         font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
         font-size: 22px;
         font-style: normal;
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/_preview.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/_preview.less
@@ -4,6 +4,9 @@
 //  */
 
 .pagebuilder-content-type {
+    display: inline-block;
+    font-size: 14px;
+    width: 100%;
     [contenteditable=true] {
         -webkit-user-select: text;
         user-select: text;
@@ -84,78 +87,73 @@
         }
     }
 
-    &.pagebuilder-content-type {
-        display: inline-block;
-        font-size: 14px;
-        width: 100%;
+    &.pagebuilder-abstract {
+        background: @entity-color;
+        color: @color-white;
+        text-align: center;
+
+        i {
+            font-size: 24px;
+        }
+
+        h3 {
+            margin: 6px 0 0;
+            padding: 0;
+        }
 
-        &.pagebuilder-abstract {
-            background: @entity-color;
+        * {
             color: @color-white;
+        }
+    }
+
+    .pagebuilder-loading {
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    &.pagebuilder-image {
+        .pagebuilder-image-placeholder {
+            background: @color-white-fog;
+            cursor: pointer;
+            font-size: 12px;
+            padding: 30px 0 16px;
             text-align: center;
 
             i {
-                font-size: 24px;
+                font-size: 34px;
+                margin-bottom: 8px;
             }
 
-            h3 {
-                margin: 6px 0 0;
-                padding: 0;
+            p {
+                padding: 0 20px;
             }
+        }
+
+        &.loading {
 
-            * {
-                color: @color-white;
+            img {
+                opacity: .5;
             }
         }
 
-        .pagebuilder-loading {
-            left: 50%;
-            position: absolute;
-            top: 50%;
-            transform: translate(-50%, -50%);
+        .dz-message,
+        .dz-preview {
+            display: none;
         }
 
-        &.pagebuilder-image {
+        &.dz-drag-hover {
+            img,
             .pagebuilder-image-placeholder {
-                background: @color-white-fog;
-                cursor: pointer;
-                font-size: 12px;
-                padding: 30px 0 16px;
-                text-align: center;
-
-                i {
-                    font-size: 34px;
-                    margin-bottom: 8px;
-                }
-
-                p {
-                    padding: 0 20px;
-                }
-            }
-
-            &.loading {
-
-                img {
-                    opacity: .5;
-                }
-            }
-
-            .dz-message,
-            .dz-preview {
-                display: none;
-            }
-
-            &.dz-drag-hover {
-                img,
-                .pagebuilder-image-placeholder {
-                    -moz-filter: blur(5px);
-                    -webkit-filter: blur(5px);
-                    filter: blur(5px);
-                    opacity: .6;
-                }
+                -moz-filter: blur(5px);
+                -webkit-filter: blur(5px);
+                filter: blur(5px);
+                opacity: .6;
             }
         }
     }
+
 }
 
 .no-user-select {
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/button-item/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/button-item/_default.less
@@ -9,8 +9,8 @@
 
 .pagebuilder-content-type {
     .pagebuilder-button-item {
-        width: auto;
         font-size: 0;
+        width: auto;
         [contenteditable=true] {
             display: inline-block;
             min-height: 18px;
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/text/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/text/_default.less
@@ -20,12 +20,5 @@
         p {
             margin-bottom: @margin;
         }
-        ul {
-            list-style: disc;
-            padding-left: @margin;
-            li {
-                margin: 0 0 @margin 0;
-            }
-        }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/form/element/uploader/preview/_image.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/form/element/uploader/preview/_image.less
@@ -7,6 +7,11 @@
 //  Image Uploader PageBuilder Stage UI Component
 //  _____________________________________________
 
+@color-light-blue: #e6f0f4;
+@color-light-rose: #ffe6dd;
+@color-medium-blue: #529cdb;
+@color-red: #f00;
+
 .pagebuilder-image-uploader-container {
     align-items: center;
     display: flex;
@@ -79,15 +84,15 @@
     }
 
     &.dragging-outside .pagebuilder-image-uploader-container-dropzone-overlay {
-        background-color: #e6f0f4;
-        border-color: #529cdb;
-        color: #529cdb;
+        background-color: @color-light-blue;
+        border-color: @color-medium-blue;
+        color: @color-medium-blue;
     }
 
     &.dragging-inside .pagebuilder-image-uploader-container-dropzone-overlay {
-        background-color: #ffe6dd;
-        border-color: #f00;
-        color: #f00;
+        background-color: @color-light-rose;
+        border-color: @color-red;
+        color: @color-red;
     }
 
     .preview-image-container-loading-overlay {
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/_module.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/_module.less
@@ -16,8 +16,8 @@
 @import 'content-type/_import.less';
 
 .cms-content-important {
-    background-color: #f5f5f5;
-    color: #333;
+    background-color: @color-white-smoke;
+    color: @color-gray20;
     font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 22px;
     font-style: normal;
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/_import.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/_import.less
@@ -8,26 +8,14 @@
 //  _____________________________________________
 
 @import 'accordion/_import.less';
-@import 'anchor/_import.less';
 @import 'banner/_import.less';
-@import 'block/_import.less';
 @import 'button-item/_import.less';
-@import 'buttons/_import.less';
-@import 'buttons/_import.less';
-@import 'children/_import.less';
 @import 'column/_import.less';
 @import 'column-group/_import.less';
-@import 'divider/_import.less';
-@import 'heading/_import.less';
-@import 'html/_import.less';
 @import 'image/_import.less';
 @import 'map/_import.less';
-@import 'newsletter/_import.less';
 @import 'products/_import.less';
-@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';
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/map/_default.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/map/_default.less
@@ -0,0 +1,12 @@
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+//
+//  Default appearance styles
+//  _____________________________________________
+
+[data-role='map'] {
+    width: 100%;
+}
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/map/_import.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/map/_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';

Original file line number	Diff line number	Diff line change
`@@ -20,12 +20,5 @@`
`20`	`20`	`p {`
`21`	`21`	`margin-bottom: @margin;`
`22`	`22`	`}`
`23`		`- ul {`
`24`		`- list-style: disc;`
`25`		`- padding-left: @margin;`
`26`		`- li {`
`27`		`- margin: 0 0 @margin 0;`
`28`		`- }`
`29`		`- }`
`30`	`23`	`}`
`31`	`24`	`}`