florian/Cerberus
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

test of toaster

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2021-08-08 00:47:01 +02:00
parent 6f7e435455
commit 46e356f10d
2 changed files with 87 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
cerberus/src/app/applications/status/status.component.html
View File

@@ -10,4 +10,20 @@
<app-add-application-button></app-add-application-button> <app-add-application-button></app-add-application-button>
</p> </p>
</div> </div>
</ng-template> </ng-template>
<div class="toast-area">
<div class="toast">
<mat-icon>check_circle</mat-icon>
<div class="content">
<div class="title">
Operation succedded.
</div>
<div class="message">
Application created.
</div>
</div>
<button>
Close
</button>
</div>
</div>

70
cerberus/src/app/applications/status/status.component.scss
View File

@@ -19,4 +19,74 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
}
.toast-area {
position: fixed;
top: 60px;
right: 30px;
z-index: 100000;
.toast {
display: flex;
flex-direction: row;
align-items: center;
background-color: #eef0ef;
border-radius: 7px;
width: 400px;
min-height: 70px;
border: 1px solid #dcdfdd;
box-shadow: 0 2px 15px 2px rgba(#383633, .2);
mat-icon {
color: green;
$icon-size: 35px;
width: $icon-size;
height: $icon-size;
font-size: $icon-size;
margin: 15px;
}
.content {
display: flex;
justify-content: left;
flex-direction: column;
flex: 1 0 auto;
margin: 0;
padding: 1rem 0;
line-height: 20px;
.title {
font-weight: 600;
color: #484e5a;
}
.message {
display: flex;
color: #524f4b;
flex-wrap: wrap;
overflow-x: hidden;
}
}
button {
position: absolute;
right: 0;
background-color: #eef0ef;
background-image: none;
color: #737271;
font-weight: 600;
border-radius: 0 7px 7px 0;
border-left: 1px solid #d7d9d8;
height: 100%;
padding: 2px 5px;
margin: 0;
border: 1px solid #dcdfdd;
&:active {
background-color: #e2e4e3;
border-left: 1px solid #c3c5c4;
}
}
}
} }