diff --git a/example/notifications/res/dialog-launch.html b/example/notifications/res/dialog-launch.html
index bc56e6b4f2..9eebd2e3e5 100644
--- a/example/notifications/res/dialog-launch.html
+++ b/example/notifications/res/dialog-launch.html
@@ -1,10 +1,9 @@
-
-
+
+
Known |
Unknown |
Error |
Info
-
- Dialogs
+ Dialogs
\ No newline at end of file
diff --git a/example/notifications/res/notification-launch.html b/example/notifications/res/notification-launch.html
index 1e077bf3be..e5f5cbac6b 100644
--- a/example/notifications/res/notification-launch.html
+++ b/example/notifications/res/notification-launch.html
@@ -1,10 +1,9 @@
-
-
+
+
Success |
Error |
Alert |
Progress
-
- Notifications
+ Notifications
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss
index f8869c18be..015b9db559 100644
--- a/platform/commonUI/general/res/sass/controls/_messages.scss
+++ b/platform/commonUI/general/res/sass/controls/_messages.scss
@@ -36,43 +36,49 @@
}
}
-mct-include.status-block-holder {
- // mct-include that wraps status.block
- // Must use display: inline-block to fix white space problems
- display: inline-block;
+// Status coloring
+.ok, .info {
+ .status-indicator {
+ color: $colorStatusInfo;
+ }
}
-.status.block {
+.alert, .caution, .warning {
+ .status-indicator, .count {
+ color: $colorStatusAlert;
+ }
+
+}
+
+.error, .err {
+ .status-indicator, .count {
+ color: $colorStatusError;
+ }
+}
+
+.available {
+ .status-indicator, .count {
+ color: $colorStatusAvailable;
+ }
+}
+
+.status-block-holder {
+ // Applied to mct-include element
+ // Contains status.block elements
$transDelay: 1.5s;
$transSpeed: .25s;
- color: $colorStatusDefault;
- display: inline-block;
- margin-right: $interiorMargin;
- .status-indicator,
- .label,
- .count {
- display: inline-block;
- vertical-align: top;
- }
-
+ display: inline-block;
&.clickable { cursor: pointer; }
&:not(.clickable) { cursor: default; }
-
- &.no-icon {
+ &.no-icon .status.block {
.status-indicator {
display: none;
}
}
-
&.float-right {
float: right;
}
-
- .status-indicator {
- margin-right: $interiorMarginSm;
- }
-
- &:not(.no-collapse) {
+ &:not(.no-collapse) .status.block {
.label {
// Max-width silliness is necessary for width transition
@include trans-prop-nice(max-width, $transSpeed, $transDelay);
@@ -92,21 +98,25 @@ mct-include.status-block-holder {
}
}
- &.ok .status-indicator,
- &.info .status-indicator {
- color: $colorStatusInfo;
+}
+
+.status.block {
+ $transDelay: 1.5s;
+ $transSpeed: .25s;
+ color: $colorStatusDefault;
+ display: inline-block;
+ margin-right: $interiorMargin;
+ .status-indicator,
+ .label,
+ .count {
+ display: inline-block;
+ vertical-align: top;
}
- &.alert .status-indicator,
- &.warning .status-indicator,
- &.caution .status-indicator {
- color: $colorStatusAlert;
+
+ .status-indicator {
+ margin-right: $interiorMarginSm;
}
- &.error .status-indicator {
- color: $colorStatusError;
- }
- &.available .status-indicator {
- color: $colorStatusAvailable;
- }
+
.count {
@include trans-prop-nice(opacity, $transSpeed, $transDelay);
font-weight: bold;
@@ -191,12 +201,6 @@ mct-include.status-block-holder {
z-index: 10;
}
-.s-message-banner {
- //@include transition-property(left, opacity);
- //@include transition-duration(0.35s);
- //@include transition-timing-function(ease-in-out);
-}
-
.s-message-banner {
border-radius: $controlCr;
@include statusBannerColors($colorStatusDefault, $colorStatusFg);
diff --git a/platform/commonUI/general/res/templates/bottombar.html b/platform/commonUI/general/res/templates/bottombar.html
index 1883d31dd5..5a5db7a357 100644
--- a/platform/commonUI/general/res/templates/bottombar.html
+++ b/platform/commonUI/general/res/templates/bottombar.html
@@ -24,7 +24,8 @@