src/app/modules/shared/components/full-page-modal/full-page-modal.component.ts
OnInit
| selector | app-full-page-modal |
| styleUrls | ./full-page-modal.component.scss |
| templateUrl | ./full-page-modal.component.html |
Methods |
constructor()
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-full-page-modal',
templateUrl: './full-page-modal.component.html',
styleUrls: ['./full-page-modal.component.scss']
})
export class FullPageModalComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<app-modal-wrapper [config]="{disableClose: true, size: 'large', panelClass: ['overflow-visible', 'material-modal']}" #modal>
<ng-template sbModalContent>
<div class="sb-mat__modal sb-mat__modal--fullscreen">
<div class="signup-background">
<div class="fullpage-background-image">
<ng-content></ng-content>
</div>
</div>
</div>
</ng-template>
</app-modal-wrapper>
./full-page-modal.component.scss
@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use 'pages/sign_in_up' as *;
.ui.raised.shadow.container.segment {
margin: calculateRem(24px) auto !important;
padding: 0;
padding: calculateRem(10px);
width: calc(100% - 4%) !important;
min-height: calc(100vh - calculateRem(48px));
}
@media only screen and (min-width: 1024px) {
.ui.raised.shadow.container.segment {
width: calculateRem(944px) !important;
padding: calculateRem(24px);
box-shadow: 0 calculateRem(2px) calculateRem(16px) 0 rgba(var(--rc-rgba-black), 0.2);
}
}
@media only screen and (max-width: 767px) {
.ui.form .fields {
flex-wrap: nowrap;
}
.ui.raised.shadow.container.segment {
max-width: calculateRem(320px) !important;
margin: 0 auto !important;
box-shadow: none !important;
height: 100vh;
width: 100% !important;
background: var(--white);
}
.signup-background {
background: var(--white) !important;
}
}
.fullpage {
::ng-deep {
.ui.fullscreen.modal>.close {
opacity: 0;
pointer-events: none;
}
}
}