RED-3780 - updated z-index

This commit is contained in:
Valentin Mihai 2022-04-06 22:19:37 +03:00
parent 70b6128230
commit 97757e7e39
7 changed files with 22 additions and 26 deletions

View File

@ -1,5 +1,5 @@
.help-mode {
z-index: 3000;
z-index: 1100;
position: absolute;
transition: all 0.25s;
}

View File

@ -1,7 +0,0 @@
.help-button {
transition: 0.2s;
&:hover {
background-color: var(--iqser-helpmode-primary);
}
}

View File

@ -1,16 +1,16 @@
section {
background: #ecedf0;
display: flex;
justify-content: center;
background: #ecedf0;
display: flex;
justify-content: center;
.content {
width: 440px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 20px;
padding-bottom: 30px;
line-height: 18px;
}
.content {
width: 440px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 20px;
padding-bottom: 30px;
line-height: 18px;
}
}

View File

@ -1,5 +1,8 @@
import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
const HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX = '1200';
const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800';
@Component({
templateUrl: './help-mode-dialog.component.html',
styleUrls: ['./help-mode-dialog.component.scss'],
@ -8,11 +11,11 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/
export class HelpModeDialogComponent implements OnInit, OnDestroy {
ngOnInit(): void {
this._setCdkOverlayContainerZindex('5000');
this._setCdkOverlayContainerZindex(HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX);
}
ngOnDestroy(): void {
this._setCdkOverlayContainerZindex('800');
this._setCdkOverlayContainerZindex(DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX);
}
private _setCdkOverlayContainerZindex(zIndex: string): void {

View File

@ -16,7 +16,7 @@ export const ScrollableParentViews = {
export type ScrollableParentView = keyof typeof ScrollableParentViews;
export interface Helper {
interface Helper {
readonly element: HTMLElement;
readonly helperElement: HTMLElement;
readonly scrollableParentView: ScrollableParentView;

View File

@ -6,7 +6,7 @@
</a>
<div class="close">
(esc)
<iqser-circle-button icon="iqser:close" (click)="helpModeService.deactivateHelpMode()"></iqser-circle-button>
<iqser-circle-button icon="iqser:close" type="help" (click)="helpModeService.deactivateHelpMode()"></iqser-circle-button>
</div>
</div>
</div>

View File

@ -42,7 +42,7 @@
border-right: 8px solid var(--iqser-helpmode-primary);
border-top: 8px solid var(--iqser-helpmode-primary);
border-bottom: 60px solid var(--iqser-helpmode-primary);
z-index: 2000;
z-index: 1000;
position: absolute;
display: flex;
justify-content: center;