diff options
| author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-10-16 08:13:53 -0700 |
|---|---|---|
| committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-10-22 09:45:35 -0700 |
| commit | 5e930c0aeb5b66df2c357be4d5c33d4828c2783f (patch) | |
| tree | 56fe47b702eab9ab6cbd9c6b6acc8d9c56fc2e86 /app/common/styles/elements | |
| parent | d11b9277aea0baeafa4488084d27cfef0e607480 (diff) | |
| download | phosphor-webui-5e930c0aeb5b66df2c357be4d5c33d4828c2783f.tar.gz phosphor-webui-5e930c0aeb5b66df2c357be4d5c33d4828c2783f.zip | |
Update toast notification
Added new toast notification types, warn and info,
and updated visual styling. All toasts will need
to be manually closed by clicking the 'X' close icon,
except a success toast which will be dismissed
automatically after 10 secs.
- Small updates to critical and success/on icon
- Added new colors for toast status background colors
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9077109042621b2d3346b4121d6344da502b6b26
Diffstat (limited to 'app/common/styles/elements')
| -rw-r--r-- | app/common/styles/elements/toast.scss | 55 |
1 files changed, 46 insertions, 9 deletions
diff --git a/app/common/styles/elements/toast.scss b/app/common/styles/elements/toast.scss index e9b1980..a46ce66 100644 --- a/app/common/styles/elements/toast.scss +++ b/app/common/styles/elements/toast.scss @@ -1,18 +1,55 @@ // Overrides style for ngToast notifications .ng-toast { - margin-top: 9em; + margin-top: 9rem; .close { - margin: .3em; - } - .title { - font-weight: bold; - } - .ng-toast__message { - max-width: 400px; + color: $text-01; + opacity: 1; + font-size: 1.2rem; + font-weight: 400; } .alert { - color: $text-01; + border: none; //override inherited border styles border-radius: 0; + border-left-width: 3px; + border-left-style: solid; text-align: left; + color: $text-01; + padding-left: 1rem; + width: 350px; + } + .alert-content-container { + display: flex; + flex-direction: row; + } + .alert-content__header { + font-size: 1rem; + font-weight: bold; + margin-bottom: 0; + line-height:1.5; + } + .alert-content__body { + margin:0; + line-height: 1.2; + } + .alert-danger { + background-color: $notification-error--light; + border-left-color: $notification-error--dark; + } + .alert-success { + background-color: $notification-success--light; + border-left-color: $notification-success--dark; + } + .alert-warning { + background-color: $notification-warn--light; + border-left-color: $notification-warn--dark; + } + .alert-info { + background-color: $notification-info--light; + border-left-color: $notification-info--dark; + } + .status-icon { + display: inline-block; + vertical-align: top; + margin-right: 0.8rem; } } |
