diff --git a/projects/core/components/dialog/dialog.style.less b/projects/core/components/dialog/dialog.style.less index 74826bff6e41..d53009e8bdb8 100644 --- a/projects/core/components/dialog/dialog.style.less +++ b/projects/core/components/dialog/dialog.style.less @@ -74,12 +74,6 @@ } } - &[data-size='page'] { - .t-content { - padding: 0; - } - } - &._centered { text-align: center; } @@ -103,6 +97,13 @@ } } } + + &[data-size='page'], + :host-context(tui-root._mobile) &[data-size='page'] { + .t-content { + padding: 0; + } + } } .t-heading { @@ -157,7 +158,6 @@ top: 1.5rem; right: 1.5rem; display: none; - color: var(--tui-base-01); :host-context(.t-dialog:last-of-type) & { display: inline-flex; @@ -166,6 +166,7 @@ :host:not([data-size='fullscreen']):not([data-size='page']) & { animation: tuiFadeIn var(--tui-duration); background: rgba(104, 104, 104, 0.96); + color: var(--tui-base-01); &:hover { background: rgba(159, 159, 159, 0.86); @@ -177,12 +178,16 @@ } :host-context(tui-root._mobile) & { - position: absolute; - top: 0; - right: 0; - background: transparent !important; - color: var(--tui-text-01); - opacity: 0.5; + &[data-size] { + --tui-fade-end: 0.5; + + position: absolute; + top: 0; + right: 0; + background: transparent !important; + color: var(--tui-text-01); + opacity: 0.5; + } } } diff --git a/projects/demo-playwright/tests/core/dialogs/dialogs.spec.ts b/projects/demo-playwright/tests/core/dialogs/dialogs.spec.ts index d3312274ceca..7953403c6aee 100644 --- a/projects/demo-playwright/tests/core/dialogs/dialogs.spec.ts +++ b/projects/demo-playwright/tests/core/dialogs/dialogs.spec.ts @@ -182,5 +182,17 @@ test.describe('Dialogs', () => { await expect(page).toHaveScreenshot('09-dialog.png'); }); + + test('dismissible = true, fullscreen, desktop', async ({page}) => { + await page.setViewportSize({width: 1024, height: 900}); + await tuiGoto(page, 'components/dialog/API?size=fullscreen&dismissible=true'); + + await page.locator('tui-doc-page button[data-appearance="primary"]').click(); + await page.mouse.click(100, 100); + + await expect(page.locator('tui-dialog')).toHaveCount(1); + + await expect(page).toHaveScreenshot('10-dialog.png'); + }); }); }); diff --git a/projects/styles/basic/keyframes.less b/projects/styles/basic/keyframes.less index a2da10fcbd9c..08aacc1025e8 100644 --- a/projects/styles/basic/keyframes.less +++ b/projects/styles/basic/keyframes.less @@ -10,10 +10,10 @@ @keyframes tuiFadeIn { from { - opacity: 0; + opacity: var(--tui-fade-start, 0); } to { - opacity: 1; + opacity: var(--tui-fade-end, 1); } }