diff --git a/projects/core/components/dialog/dialog.component.ts b/projects/core/components/dialog/dialog.component.ts index 756caa2d5f39..35ef8bf7c57d 100644 --- a/projects/core/components/dialog/dialog.component.ts +++ b/projects/core/components/dialog/dialog.component.ts @@ -104,6 +104,10 @@ export class TuiDialogComponent { : this.animation; } + get mobile(): boolean { + return this.isMobile; + } + get fullscreen(): boolean { return !this.isMobile && (this.size === 'fullscreen' || this.size === 'page'); } diff --git a/projects/core/components/dialog/dialog.style.less b/projects/core/components/dialog/dialog.style.less index f3c6f558a8c7..c4770de54cbd 100644 --- a/projects/core/components/dialog/dialog.style.less +++ b/projects/core/components/dialog/dialog.style.less @@ -106,6 +106,7 @@ .t-heading { margin: 0; + padding-inline-end: 2rem; word-wrap: break-word; font: var(--tui-font-heading-3); @@ -151,26 +152,27 @@ .t-close { .transition(background); - position: fixed; - top: 1.5rem; - right: 1.5rem; + position: absolute; + top: 1rem; + right: 1rem; + display: none; - color: var(--tui-base-01); + color: var(--tui-neutral-fill); :host-context(.t-dialog:last-of-type) & { display: block; } - :host:not([data-size='fullscreen']):not([data-size='page']) & { + :host:not([data-size='page']) & { animation: tuiFadeIn var(--tui-duration); - background: rgba(104, 104, 104, 0.96); + background: var(--tui-neutral-bg); &:hover { - background: rgba(159, 159, 159, 0.86); + background: var(--tui-neutral-bg-hover); } } - :host:not([data-size='fullscreen']).ng-animating & { + :host.ng-animating & { display: none; } diff --git a/projects/core/components/dialog/dialog.template.html b/projects/core/components/dialog/dialog.template.html index 059192a2c5be..01e07257cb63 100644 --- a/projects/core/components/dialog/dialog.template.html +++ b/projects/core/components/dialog/dialog.template.html @@ -33,21 +33,50 @@
-
+ + + + diff --git a/projects/demo/src/modules/components/dialog/examples/8/index.ts b/projects/demo/src/modules/components/dialog/examples/8/index.ts index ff1366f55c6d..7d97848d982f 100644 --- a/projects/demo/src/modules/components/dialog/examples/8/index.ts +++ b/projects/demo/src/modules/components/dialog/examples/8/index.ts @@ -33,11 +33,13 @@ export class TuiDialogExampleComponent8 { }, }); - this.dialogs.open(content, {closeable, dismissible: closeable}).subscribe({ - complete: () => { - this.value = ''; - this.dialogForm.markAsPristine(); - }, - }); + this.dialogs + .open(content, {label: 'Form', closeable, dismissible: closeable}) + .subscribe({ + complete: () => { + this.value = ''; + this.dialogForm.markAsPristine(); + }, + }); } }