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

anthoula · anthoula · commit e58ae673e40d · 2018-10-10T15:15:14.000-05:00
- fix styles to specify content type
- remove redundant padding styles
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-center.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-center.less
@@ -12,10 +12,6 @@
         .pagebuilder-overlay {
             margin-left: auto;
             margin-right: auto;
-
-            .pagebuilder-collage-content {
-                padding: 30px;
-            }
         }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-left.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-left.less
@@ -7,8 +7,8 @@
 //  Collage left appearance styles
 //  _____________________________________________
 
-.pagebuilder-banner-wrapper {
-    .pagebuilder-collage-content {
-        padding: 30px;
+.pagebuilder-slide.pagebuilder-collage-left {
+    .pagebuilder-overlay {
+        margin-right: auto;
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-right.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-right.less
@@ -11,10 +11,6 @@
     .pagebuilder-banner-wrapper {
         .pagebuilder-overlay {
             margin-left: auto;
-
-            .pagebuilder-collage-content {
-                padding: 30px;
-            }
         }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_default.less
@@ -96,8 +96,18 @@
 }
 
 //
-//  Default appearance styles rendered through Block
-//  ________________________________________________
+//  Default appearance styles rendered through stage and Block
+//  __________________________________________________________
+
+.pagebuilder-banner-wrapper {
+    .pagebuilder-overlay {
+        padding: 30px;
+    }
+}
+
+//
+//  Default appearance styles rendered through Block only
+//  _____________________________________________________
 
 [data-role='banner'] {
     .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-center.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-center.less
@@ -14,7 +14,6 @@
         -webkit-transition: background-color 500ms ease;
         margin-left: auto;
         margin-right: auto;
-        padding: 30px;
         transition: background-color 500ms ease;
     }
 }
@@ -24,15 +23,11 @@
 //  _______________________________________________________
 
 
-[data-appearance='collage-centered'] {
+[data-role='slide'][data-appearance='collage-centered'] {
     .pagebuilder-slide-wrapper {
         .pagebuilder-overlay {
             margin-left: auto;
             margin-right: auto;
-
-            .pagebuilder-collage-content {
-                padding: 30px;
-            }
         }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-left.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-left.less
@@ -12,13 +12,6 @@
         -moz-transition: background-color 500ms ease;
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
-        padding: 30px;
         transition: background-color 500ms ease;
     }
 }
-
-[data-appearance='collage-left'] {
-    .pagebuilder-collage-content {
-        padding: 30px;
-    }
-}
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-right.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-right.less
@@ -13,7 +13,6 @@
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
         margin-left: auto;
-        padding: 30px;
         transition: background-color 500ms ease;
 
         .wysiwyg-container {
@@ -29,12 +28,8 @@
 //  ______________________________________________________
 
 
-[data-appearance='collage-right'] {
+[data-role='slide'][data-appearance='collage-right'] {
     .pagebuilder-overlay {
         margin-left: auto;
-
-        .pagebuilder-collage-content {
-            padding: 30px;
-        }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less
@@ -91,8 +91,18 @@
 }
 
 //
-//  Default appearance styles rendered through Block
-//  ________________________________________________
+//  Default appearance styles rendered through stage and Block
+//  __________________________________________________________
+
+.pagebuilder-slide-wrapper {
+    .pagebuilder-overlay {
+        padding: 30px;
+    }
+}
+
+//
+//  Default appearance styles rendered through Block only
+//  _____________________________________________________
 
 [data-role='slide'] {
     .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_poster.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_poster.less
@@ -29,8 +29,7 @@
 //  Poster appearance styles rendered through Block
 //  _______________________________________________
 
-
-[data-appearance='poster'] {
+[data-role='slide'][data-appearance='poster'] {
     .pagebuilder-overlay {
         align-items: center;
         display: flex;
@@ -39,9 +38,5 @@
         .pagebuilder-poster-content {
             text-align: center;
         }
-
-        .pagebuilder-collage-content {
-            padding: 30px;
-        }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_collage-center.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_collage-center.less
@@ -12,10 +12,6 @@
         .pagebuilder-overlay {
             margin-left: auto;
             margin-right: auto;
-
-            .pagebuilder-collage-content {
-                padding: 30px;
-            }
         }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_collage-left.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_collage-left.less
@@ -7,8 +7,10 @@
 //  Collage left appearance styles
 //  _____________________________________________
 
-.pagebuilder-banner-wrapper {
-    .pagebuilder-collage-content {
-        padding: 30px;
+[data-appearance='collage-left'] {
+    .pagebuilder-banner-wrapper {
+        .pagebuilder-overlay {
+            margin-right: auto;
+        }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_collage-right.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_collage-right.less
@@ -11,10 +11,6 @@
     .pagebuilder-banner-wrapper {
         .pagebuilder-overlay {
             margin-left: auto;
-
-            .pagebuilder-collage-content {
-                padding: 30px;
-            }
         }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_default.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_default.less
@@ -34,6 +34,7 @@
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
         box-sizing: border-box;
+        padding: 30px;
         transition: background-color 500ms ease;
 
         &.pagebuilder-poster-overlay {
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_collage-center.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_collage-center.less
@@ -12,10 +12,6 @@
         .pagebuilder-overlay {
             margin-left: auto;
             margin-right: auto;
-
-            .pagebuilder-collage-content {
-                padding: 30px;
-            }
         }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_collage-left.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_collage-left.less
@@ -7,8 +7,10 @@
 //  Collage left appearance styles
 //  _____________________________________________
 
-.pagebuilder-slide-wrapper {
-    .pagebuilder-collage-content {
-        padding: 30px;
+[data-appearance='collage-left'] {
+    .pagebuilder-slide-wrapper {
+        .pagebuilder-overlay {
+            margin-right: auto;
+        }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_collage-right.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_collage-right.less
@@ -11,10 +11,6 @@
     .pagebuilder-slide-wrapper {
         .pagebuilder-overlay {
             margin-left: auto;
-
-            .pagebuilder-collage-content {
-                padding: 30px;
-            }
         }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_default.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/slide/_default.less
@@ -39,6 +39,7 @@
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
         box-sizing: border-box;
+        padding: 30px;
         transition: background-color 500ms ease;
 
         &.pagebuilder-poster-overlay {

Original file line number	Diff line number	Diff line change
`@@ -12,10 +12,6 @@`
`12`	`12`	`.pagebuilder-overlay {`
`13`	`13`	`margin-left: auto;`
`14`	`14`	`margin-right: auto;`
`15`		`-`
`16`		`- .pagebuilder-collage-content {`
`17`		`- padding: 30px;`
`18`		`- }`
`19`	`15`	`}`
`20`	`16`	`}`
`21`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,8 +7,8 @@`
`7`	`7`	`// Collage left appearance styles`
`8`	`8`	`// _____________________________________________`
`9`	`9`
`10`		`-.pagebuilder-banner-wrapper {`
`11`		`- .pagebuilder-collage-content {`
`12`		`- padding: 30px;`
	`10`	`+.pagebuilder-slide.pagebuilder-collage-left {`
	`11`	`+ .pagebuilder-overlay {`
	`12`	`+ margin-right: auto;`
`13`	`13`	`}`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,10 +11,6 @@`
`11`	`11`	`.pagebuilder-banner-wrapper {`
`12`	`12`	`.pagebuilder-overlay {`
`13`	`13`	`margin-left: auto;`
`14`		`-`
`15`		`- .pagebuilder-collage-content {`
`16`		`- padding: 30px;`
`17`		`- }`
`18`	`14`	`}`
`19`	`15`	`}`
`20`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,6 @@`
`14`	`14`	`-webkit-transition: background-color 500ms ease;`
`15`	`15`	`margin-left: auto;`
`16`	`16`	`margin-right: auto;`
`17`		`- padding: 30px;`
`18`	`17`	`transition: background-color 500ms ease;`
`19`	`18`	`}`
`20`	`19`	`}`
`@@ -24,15 +23,11 @@`
`24`	`23`	`// _______________________________________________________`
`25`	`24`
`26`	`25`
`27`		`-[data-appearance='collage-centered'] {`
	`26`	`+[data-role='slide'][data-appearance='collage-centered'] {`
`28`	`27`	`.pagebuilder-slide-wrapper {`
`29`	`28`	`.pagebuilder-overlay {`
`30`	`29`	`margin-left: auto;`
`31`	`30`	`margin-right: auto;`
`32`		`-`
`33`		`- .pagebuilder-collage-content {`
`34`		`- padding: 30px;`
`35`		`- }`
`36`	`31`	`}`
`37`	`32`	`}`
`38`	`33`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,13 +12,6 @@`
`12`	`12`	`-moz-transition: background-color 500ms ease;`
`13`	`13`	`-o-transition: background-color 500ms ease;`
`14`	`14`	`-webkit-transition: background-color 500ms ease;`
`15`		`- padding: 30px;`
`16`	`15`	`transition: background-color 500ms ease;`
`17`	`16`	`}`
`18`	`17`	`}`
`19`		`-`
`20`		`-[data-appearance='collage-left'] {`
`21`		`- .pagebuilder-collage-content {`
`22`		`- padding: 30px;`
`23`		`- }`
`24`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -29,8 +29,7 @@`
`29`	`29`	`// Poster appearance styles rendered through Block`
`30`	`30`	`// _______________________________________________`
`31`	`31`
`32`		`-`
`33`		`-[data-appearance='poster'] {`
	`32`	`+[data-role='slide'][data-appearance='poster'] {`
`34`	`33`	`.pagebuilder-overlay {`
`35`	`34`	`align-items: center;`
`36`	`35`	`display: flex;`
`@@ -39,9 +38,5 @@`
`39`	`38`	`.pagebuilder-poster-content {`
`40`	`39`	`text-align: center;`
`41`	`40`	`}`
`42`		`-`
`43`		`- .pagebuilder-collage-content {`
`44`		`- padding: 30px;`
`45`		`- }`
`46`	`41`	`}`
`47`	`42`	`}`