Skip to content

Commit cb0ec8f

Browse files
hannahnidahannahnida
committed
#514: User sees content snapshot on Category Page in Admin Panel - Fixes after tests
1 parent 70c6802 commit cb0ec8f

File tree

2 files changed

+67
-94
lines changed

2 files changed

+67
-94
lines changed

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

Lines changed: 66 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -294,10 +294,10 @@
294294

295295
.pagebuilder-wysiwyg-snapshot {
296296
.pagebuilder-stage {
297-
-webkit-transition: @pagebuilder-transition;
298297
-moz-transition: @pagebuilder-transition;
299-
transition: @pagebuilder-transition;
298+
-webkit-transition: @pagebuilder-transition;
300299
margin-left: auto;
300+
transition: @pagebuilder-transition;
301301
}
302302

303303
.element-children.content-type-container.root-container-container {
@@ -311,148 +311,121 @@
311311
transition: none;
312312

313313
&.stage-full-screen {
314-
.keyframes(fade-in;
315-
{
316-
0% {
317-
background-color: transparent;
318-
}
319-
100% {
320-
background-color: @color-white;
321-
}
314+
.keyframes(fade-in; {
315+
0% {
316+
background-color: transparent;
322317
}
323-
);
324-
318+
100% {
319+
background-color: @color-white;
320+
}
321+
});
325322
.animation(fade-in @pagebuilder-animation);
326-
327323
background-color: @color-white;
328324

329325
&.transition-out {
330-
.keyframes(
331-
fade-out;
332-
{
333-
0% {
334-
background-color: @color-white;
335-
}
336-
50% {
337-
background-color: @color-white;
338-
}
339-
100% {
340-
background-color: transparent;
341-
}
326+
.keyframes(fade-out; {
327+
0% {
328+
background-color: @color-white;
342329
}
343-
);
344-
330+
50% {
331+
background-color: @color-white;
332+
}
333+
100% {
334+
background-color: transparent;
335+
}
336+
});
345337
.animation(fade-out @pagebuilder-animation);
346338
}
347339

348340
.pagebuilder-stage {
349-
width: calc(~'100% - 150px');
350-
top: 0;
351341
left: 0;
352342
position: relative;
343+
top: 0;
344+
width: calc(~'100% - 150px');
353345
}
354346
}
355347
}
356348

357349
.pagebuilder-header {
358-
.keyframes(
359-
slide-in-top;
360-
{
361-
0% {
362-
-moz-transform: translateX(-41px);
363-
-webkit-transform: translateY(-41px);
364-
transform: translateY(-41px);
365-
}
366-
100% {
367-
-moz-transform: translateX(0);
368-
-webkit-transform: translateX(0);
350+
.keyframes(slide-in-top; {
351+
0% {
352+
-moz-transform: translateX(-41px);
353+
-webkit-transform: translateY(-41px);
354+
transform: translateY(-41px);
355+
}
356+
100% {
357+
-moz-transform: translateX(0);
358+
-webkit-transform: translateX(0);
369359
transform: translateX(0);
370360
}
371361
}
372362
);
373-
374363
.animation(slide-in-top @pagebuilder-animation);
375-
376364
opacity: 1;
377365
transition: none;
378366
visibility: visible;
379367

380368
&.transition-out {
381369
.pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-header;
370+
.keyframes(slide-out-top; {
371+
0% {
372+
-moz-transform: translateX(0);
373+
-webkit-transform: translateX(0);
374+
transform: translateX(0);
375+
}
376+
100% {
377+
-moz-transform: translateX(-41px);
378+
-webkit-transform: translateY(-41px);
379+
transform: translateY(-41px);
380+
}
381+
});
382+
.animation(slide-out-top @pagebuilder-animation);
382383
-moz-transition: none;
383384
-webkit-transition: none;
384385
transition: none;
385386
z-index: 801;
386-
387-
.keyframes(
388-
slide-out-top;
389-
{
390-
0% {
391-
-moz-transform: translateX(0);
392-
-webkit-transform: translateX(0);
393-
transform: translateX(0);
394-
}
395-
100% {
396-
-moz-transform: translateX(-41px);
397-
-webkit-transform: translateY(-41px);
398-
transform: translateY(-41px);
399-
}
400-
}
401-
);
402-
403-
.animation(slide-out-top @pagebuilder-animation);
404387
}
405388
}
406389

407390
.pagebuilder-panel-wrapper {
391+
.keyframes(slide-in-left; {
392+
0% {
393+
-moz-transform: translateX(-150px);
394+
-webkit-transform: translateX(-150px);
395+
transform: translateX(-150px);
396+
}
397+
100% {
398+
-moz-transform: translateX(0);
399+
-webkit-transform: translateX(0);
400+
transform: translateX(0);
401+
}
402+
});
403+
.animation(slide-in-left @pagebuilder-animation);
408404
-moz-transition: none;
409405
-webkit-transition: none;
410406
opacity: 1;
411407
transition: none;
412408
visibility: visible;
413409

414-
.keyframes(
415-
slide-in-left;
416-
{
410+
&.transition-out {
411+
.pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-panel-wrapper;
412+
.keyframes(slide-out-left; {
417413
0% {
418-
-moz-transform: translateX(-150px);
419-
-webkit-transform: translateX(-150px);
420-
transform: translateX(-150px);
421-
}
422-
100% {
423414
-moz-transform: translateX(0);
424415
-webkit-transform: translateX(0);
425416
transform: translateX(0);
426417
}
427-
}
428-
);
429-
430-
.animation(slide-in-left @pagebuilder-animation);
431-
432-
&.transition-out {
433-
.pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-panel-wrapper;
418+
100% {
419+
-moz-transform: translateX(-150px);
420+
-webkit-transform: translateX(-150px);
421+
transform: translateX(-150px);
422+
}
423+
});
424+
.animation(slide-out-left @pagebuilder-animation);
434425
-moz-transition: none;
435426
-webkit-transition: none;
436427
transition: none;
437428
z-index: 801;
438-
439-
.keyframes(
440-
slide-out-left;
441-
{
442-
0% {
443-
-moz-transform: translateX(0);
444-
-webkit-transform: translateX(0);
445-
transform: translateX(0);
446-
}
447-
100% {
448-
-moz-transform: translateX(-150px);
449-
-webkit-transform: translateX(-150px);
450-
transform: translateX(-150px);
451-
}
452-
}
453-
);
454-
455-
.animation(slide-out-left @pagebuilder-animation);
456429
}
457430
}
458431
}

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_var.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
@color-pagebuilder-light-gray: #f8f3eb;
3535
@color-pagebuilder-darker-gray: #2b2625;
3636
@color-pagebuilder-darkest-gray: #1c1918;
37-
@color-pagebuilder-blue: #1473E6;
37+
@color-pagebuilder-blue: #1473e6;
3838
@color-pagebuilder-light-blue: #bfe2f0;
3939
@placeholder-background: #dff7ff;
4040
@placeholder-outline: #c0dffa;

0 commit comments

Comments
 (0)