Design confirm dialog

This commit is contained in:
Chocobozzz 2017-12-07 10:33:16 +01:00
parent 0727cab0df
commit 59aa1e5e75
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 21 additions and 20 deletions

View File

@ -6,14 +6,14 @@
<button type="button" class="close" aria-label="Close" (click)="cancel()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">{{ title }}</h4>
<h4 class="title-page title-page-single">{{ title }}</h4>
</div>
<div class="modal-body" [innerHtml]="message"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" (click)="cancel()">Cancel</button>
<button type="button" class="btn btn-primary" (click)="confirm()">Confirm</button>
<button type="button" class="grey-button" data-dismiss="modal" (click)="cancel()">Cancel</button>
<button type="button" class="orange-button" (click)="confirm()">Confirm</button>
</div>
</div>
</div>

View File

@ -11,7 +11,8 @@ export interface ConfigChangedEvent {
@Component({
selector: 'my-confirm',
templateUrl: './confirm.component.html'
templateUrl: './confirm.component.html',
styles: [ '.button { padding: 0 13px; }' ]
})
export class ConfirmComponent implements OnInit {
@ViewChild('confirmModal') confirmModal: ModalDirective

View File

@ -42,22 +42,6 @@ label {
.main-col {
margin-left: $menu-width;
.title-page {
color: #000;
font-size: 16px;
display: inline-block;
margin-right: 55px;
font-weight: $font-semibold;
@include disable-default-a-behaviour;
&.active, &.title-page-single {
border-bottom: 2px solid $orange-color;
font-weight: $font-bold;
margin-top: 30px;
margin-bottom: 25px;
}
}
.margin-content {
margin-left: $not-expanded-horizontal-margins;
margin-right: $not-expanded-horizontal-margins;
@ -88,6 +72,22 @@ label {
}
}
.title-page {
color: #000;
font-size: 16px;
display: inline-block;
margin-right: 55px;
font-weight: $font-semibold;
@include disable-default-a-behaviour;
&.active, &.title-page-single {
border-bottom: 2px solid $orange-color;
font-weight: $font-bold;
margin-top: 30px;
margin-bottom: 25px;
}
}
// On small screen, menu is absolute and displayed over the page
@media screen and (max-width: 500px) {
.title-menu-left {