Fix style on confirmation dialog button

This commit is contained in:
apapachristou 2020-11-24 19:04:37 +02:00
parent 0542c17aae
commit 4c94b48b2b
2 changed files with 28 additions and 18 deletions

View File

@ -24,7 +24,7 @@
<div class="row"> <div class="row">
<!-- <div class="col"></div> --> <!-- <div class="col"></div> -->
<div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button></div> <div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button></div>
<div *ngIf="data.isDeleteConfirmation" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="delete">{{ data.confirmButton }}</button></div> <div *ngIf="data.isDeleteConfirmation" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="delete-btn">{{ data.confirmButton }}</button></div>
<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="submit-btn">{{ data.confirmButton }}</button></div> <div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="submit-btn">{{ data.confirmButton }}</button></div>
<div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" class="submiit-btn">{{ data.confirmButton }}</button></div> <div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" class="submiit-btn">{{ data.confirmButton }}</button></div>
</div> </div>

View File

@ -1,25 +1,25 @@
.confirmation-dialog { .confirmation-dialog {
.confirmation { .confirmation {
padding-bottom: 20px; padding-bottom: 20px;
} }
.privacy-policy-names { .privacy-policy-names {
font-weight: 700; font-weight: 700;
padding: 1em; padding: 1em;
} }
.close-btn { .close-btn {
margin-left: auto; margin-left: auto;
cursor: pointer; cursor: pointer;
} }
.warn-text { .warn-text {
color: #f44336; color: #f44336;
} }
.cancel { .cancel {
background-color: #aaaaaa; background-color: #aaaaaa;
color: #ffffff; color: #ffffff;
} }
.cancel-btn { .cancel-btn {
@ -32,23 +32,23 @@
} }
.confirm { .confirm {
background-color: #2cba6c; background-color: #2cba6c;
color: #ffffff; color: #ffffff;
} }
.delete { .delete {
background-color: #ba2c2c; background-color: #ba2c2c;
color: #ffffff; color: #ffffff;
} }
.checkbox-privacy { .checkbox-privacy {
padding: 0em 1em; padding: 0em 1em;
} }
.required-policy { .required-policy {
padding: 0em 1.2em 1em; padding: 0em 1.2em 1em;
font-size: smaller; font-size: smaller;
color: #f44336; color: #f44336;
} }
.submit-btn { .submit-btn {
@ -69,4 +69,14 @@
background-color: #129d99; background-color: #129d99;
color: #ffffff; color: #ffffff;
} }
}
.delete-btn {
min-width: 101px;
height: 43px;
background: #ffffff;
color: #ba2c2c;
border: 1px solid #ba2c2c;
border-radius: 30px;
opacity: 1;
}
}