File
Constructor
constructor(popOverCtrl: PopoverController)
|
|
Parameters :
Name |
Type |
Optional |
popOverCtrl |
PopoverController
|
No
|
|
import { Component, Input } from '@angular/core';
import { PopoverController } from '@ionic/angular';
@Component({
selector: 'app-start-improvement',
templateUrl: './start-improvement.component.html',
styleUrls: ['./start-improvement.component.scss'],
})
export class StartImprovementComponent {
@Input() header;
@Input() message;
@Input() message1;
constructor(
private popOverCtrl: PopoverController,
) { }
start() {
this.popOverCtrl.dismiss(true);
}
}
<ion-header class="sb-popover-header">
<ion-toolbar class="sb-popover-toolbar">
<ion-title class="sb-popover-title">{{header| translate}} ?
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="sb-popover-container ion-no-padding">
<div id="main-content" class="sb-popover-content-details">
<div class="consent-popover-info">
<div class="flex-container">
<div class="footer">
<div lines="none">
<p class="cr-terms-checkbox-label">
<b>{{message | translate }} </b>
</p>
<p class="cr-terms-checkbox-label">
{{message1 | translate }}
</p>
</div>
<div class="btn-info">
<button class="save-changes"
(click)="start()">{{'FRMELEMNTS_LBL_START_IMPROVEMENT' | translate}}</button>
</div>
</div>
</div>
</div>
</div>
</ion-content>
@import "../../../../../assets/styles/base/_variables.scss";
@import "../../../../../assets/styles/_variables.scss";
@import "../../../../../assets/styles/_custom-mixins.scss";
.cr-terms-checkbox-label{
padding-left: 5px;
}
.cr-terms-checkbox{
--background-checked: #{$blue};
--border-color: #{$blue};
--border-radius: 4px;
--border-width: 1px;
--border-color-checked:#{$blue};
}
.cr-input-primary {
display: inline-flex;
}
.btn-label {
float: right;
display: inline-flex;
}
#main-content {
overflow-y: scroll;
// background: map-get($colors, white);
}
.consent-popover-info {
overflow: hidden;
}
.flex-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
flex-grow: 0;
flex-shrink: 0;
color: #222222;
font-family: "Noto Sans", sans-serif;
font-size: 1.25rem;
letter-spacing: 0;
font-weight: bold;
margin-bottom: 16px;
@include ltr() {
text-align: right
}
@include rtl() {
text-align:left;
}
}
.body {
display: block;
flex-grow: 1;
flex-shrink: 1;
height: 38vh;
overflow-y: scroll;
}
.footer {
flex-grow: 0;
flex-shrink: 0;
padding: 0px 10px;
}
.save-changes{
color: white;
background-color: $blue;
font-size: 1rem;
padding: 8px 0;
margin-left: 18px;
border: 2px solid $blue;
width: 80%;
}
.btn-info{
padding: 12px;
text-align: center;
}
.profile-info{
color: map-get($colors, granite_gray);
font-family: "Noto Sans", sans-serif;
font-size: $font-size-base;
letter-spacing: 0;
}
.profile-info-section{
display: grid;
grid-template-columns: 100px 227px;
}
.share-disabled{
opacity: 0.5 !important;
cursor: default;
}
.terms-info{
color: $blue !important;
}
ion-icon {
@include ltr {
float: right !important;
}
@include rtl {
float: left !important;
}
}
.sb-popover-header {
border-radius: 4px 4px 0 0;
background-color: $info-color;
&::after {
background-image: none;
}
.sb-popover-toolbar {
min-height: 6rem !important;
max-height: 6rem !important;
background-color: $info-color;
border-radius: 4px 4px 0 0;
text-align: center;
// @include padding(($base-block-space * 0.5), ($base-block-space * 1));
.toolbar-background {
border-radius: 4px 4px 0 0;
background-color: $info-color;
}
.sb-popover-close-btn {
color: $white-color;
}
.sb-popover-title {
font-size: 22px !important;
font-weight: bold;
text-align: left !important;
margin: 10px 0px;
font-weight: 900;
}
}
}
Legend
Html element with directive