Fix incorrect system notifications with details styling (#18340)

Change-Id: Ia0d36147eb4ed9f170123771ac2674df584e6a4b

2 files changed, 7 insertions, 5 deletions

diff --git a/WebContent/VAADIN/themes/base/notification/notification.scss b/WebContent/VAADIN/themes/base/notification/notification.scss
index 9ccc29fd0e..5deb7e0e84 100644
--- a/WebContent/VAADIN/themes/base/notification/notification.scss
+++ b/WebContent/VAADIN/themes/base/notification/notification.scss
@@ -11,7 +11,8 @@
 	filter: alpha(opacity=90);
 }
 .#{$primaryStyleName}-caption,
-.#{$primaryStyleName}-description {
+.#{$primaryStyleName}-description,
+.#{$primaryStyleName}-details {
 	display: inline;
 	margin: 0 0.5em 0 0;
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss
index 1b10e85d32..9538ebdc29 100644
--- a/WebContent/VAADIN/themes/valo/components/_notification.scss
+++ b/WebContent/VAADIN/themes/valo/components/_notification.scss
@@ -92,7 +92,7 @@ $v-notification-title-color: $v-focus-color !default;
     letter-spacing: 0;
   }
 
-  .#{$primary-stylename}-description {
+  .#{$primary-stylename}-description, .#{$primary-stylename}-details {
     margin: 0;
     display: inline-block;
     vertical-align: middle;
@@ -102,7 +102,8 @@ $v-notification-title-color: $v-focus-color !default;
     overflow: auto;
   }
 
-  .#{$primary-stylename}-caption ~ .#{$primary-stylename}-description {
+  .#{$primary-stylename}-caption ~ .#{$primary-stylename}-description,
+  .#{$primary-stylename}-caption ~ .#{$primary-stylename}-details {
     margin-left: round($v-font-size * 1.5);
   }
 
@@ -298,7 +299,7 @@ $v-notification-title-color: $v-focus-color !default;
   @include box-shadow(0 0 20px 0 rgba(0,0,0,0.25));
   padding: round($v-unit-size/3) round($v-unit-size/2.5);
 
-  .#{$primary-style}-description {
+  .#{$primary-style}-description, .#{$primary-style}-details {
     max-width: 50em;
   }
 
@@ -348,7 +349,7 @@ $v-notification-title-color: $v-focus-color !default;
     vertical-align: middle;
   }
 
-  .#{$primary-style}-description {
+  .#{$primary-style}-description, .#{$primary-style}-details {
     color: #e6e6e6;
   }
 }