diff --git a/cerberus/src/app/applications/status/status.component.html b/cerberus/src/app/applications/status/status.component.html index 1fe7cd1..7a85046 100644 --- a/cerberus/src/app/applications/status/status.component.html +++ b/cerberus/src/app/applications/status/status.component.html @@ -10,4 +10,20 @@

- \ No newline at end of file + +
+
+ check_circle +
+
+ Operation succedded. +
+
+ Application created. +
+
+ +
+
diff --git a/cerberus/src/app/applications/status/status.component.scss b/cerberus/src/app/applications/status/status.component.scss index 6b8e9ad..ddb8be8 100644 --- a/cerberus/src/app/applications/status/status.component.scss +++ b/cerberus/src/app/applications/status/status.component.scss @@ -19,4 +19,74 @@ flex-direction: row; 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; + } + } + } } \ No newline at end of file