Skip to content

Commit 70c6802

Browse files
hannahnidahannahnida
committed
#514: User sees content snapshot on Category Page in Admin Panel - Added CR fixes
1 parent af2dc90 commit 70c6802

File tree

2 files changed

+96
-65
lines changed

2 files changed

+96
-65
lines changed

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,10 @@
5353
// Animations
5454
// _____________________________________________
5555

56-
.keyframes (@name; @arguments) {
56+
.keyframes(
57+
@name;
58+
@arguments
59+
) {
5760
@-moz-keyframes @name {
5861
@arguments();
5962
}

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

Lines changed: 92 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -311,29 +311,37 @@
311311
transition: none;
312312

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

325329
&.transition-out {
326-
.keyframes(fade-out;{
327-
0% {
328-
background-color: @color-white;
329-
}
330-
50% {
331-
background-color: @color-white;
332-
}
333-
100% {
334-
background-color: transparent;
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+
}
335342
}
336-
});
343+
);
344+
337345
.animation(fade-out @pagebuilder-animation);
338346
}
339347

@@ -347,84 +355,104 @@
347355
}
348356

349357
.pagebuilder-header {
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);
359-
transform: translateX(0);
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);
369+
transform: translateX(0);
370+
}
360371
}
361-
});
372+
);
373+
362374
.animation(slide-in-top @pagebuilder-animation);
375+
363376
opacity: 1;
364377
transition: none;
365378
visibility: visible;
366379

367380
&.transition-out {
368381
.pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-header;
369-
.keyframes(slide-out-top;{
370-
0% {
371-
-moz-transform: translateX(0);
372-
-webkit-transform: translateX(0);
373-
transform: translateX(0);
374-
}
375-
100% {
376-
-moz-transform: translateX(-41px);
377-
-webkit-transform: translateY(-41px);
378-
transform: translateY(-41px);
379-
}
380-
});
381-
.animation(slide-out-top @pagebuilder-animation);
382382
-moz-transition: none;
383383
-webkit-transition: none;
384384
transition: none;
385385
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);
386404
}
387405
}
388406

389407
.pagebuilder-panel-wrapper {
390-
.keyframes(slide-in-left;{
391-
0% {
392-
-moz-transform: translateX(-150px);
393-
-webkit-transform: translateX(-150px);
394-
transform: translateX(-150px);
395-
}
396-
100% {
397-
-moz-transform: translateX(0);
398-
-webkit-transform: translateX(0);
399-
transform: translateX(0);
400-
}
401-
});
402-
.animation(slide-in-left @pagebuilder-animation);
403408
-moz-transition: none;
404409
-webkit-transition: none;
405410
opacity: 1;
406411
transition: none;
407412
visibility: visible;
408413

409-
&.transition-out {
410-
.pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-panel-wrapper;
411-
.keyframes(slide-out-left;{
414+
.keyframes(
415+
slide-in-left;
416+
{
412417
0% {
413-
-moz-transform: translateX(0);
414-
-webkit-transform: translateX(0);
415-
transform: translateX(0);
416-
}
417-
100% {
418418
-moz-transform: translateX(-150px);
419419
-webkit-transform: translateX(-150px);
420420
transform: translateX(-150px);
421421
}
422-
});
423-
.animation(slide-out-left @pagebuilder-animation);
422+
100% {
423+
-moz-transform: translateX(0);
424+
-webkit-transform: translateX(0);
425+
transform: translateX(0);
426+
}
427+
}
428+
);
429+
430+
.animation(slide-in-left @pagebuilder-animation);
431+
432+
&.transition-out {
433+
.pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-panel-wrapper;
424434
-moz-transition: none;
425435
-webkit-transition: none;
426436
transition: none;
427437
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);
428456
}
429457
}
430458
}

0 commit comments

Comments
 (0)