Fixes unnecessary selector specificity for notifications (#14872)

Removes nesting for .v-Notification-caption and -description when possible.

Change-Id: I6c68706116f9a90598413ffe43ea429d08616f51

3 files changed, 35 insertions, 43 deletions

diff --git a/WebContent/VAADIN/themes/base/notification/notification.scss b/WebContent/VAADIN/themes/base/notification/notification.scss
index 7f7262b1b4..9ccc29fd0e 100644
--- a/WebContent/VAADIN/themes/base/notification/notification.scss
+++ b/WebContent/VAADIN/themes/base/notification/notification.scss
@@ -10,12 +10,8 @@
 	opacity: .9;
 	filter: alpha(opacity=90);
 }
-.#{$primaryStyleName} .#{$primaryStyleName}-caption,
-.#{$primaryStyleName} .#{$primaryStyleName}-description,
-.#{$primaryStyleName}-error .#{$primaryStyleName}-caption,
-.#{$primaryStyleName}-error .#{$primaryStyleName}-description,
-.#{$primaryStyleName}-warning .#{$primaryStyleName}-caption,
-.#{$primaryStyleName}-warning .#{$primaryStyleName}-description {
+.#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-description {
 	display: inline;
 	margin: 0 0.5em 0 0;
 }
@@ -25,11 +21,11 @@
 .#{$primaryStyleName}-error {
 	background: red;
 }
-.#{$primaryStyleName}-tray .#{$primaryStyleName}-caption {
-	display: block;
-}
-.#{$primaryStyleName}-tray .#{$primaryStyleName}-description {
-	display: block;
+.#{$primaryStyleName}-tray {
+	.#{$primaryStyleName}-caption,
+	.#{$primaryStyleName}-description {
+		display: block;
+	}
 }
 .#{$primaryStyleName}-system {
 	background-color: red;
diff --git a/WebContent/VAADIN/themes/runo/notification/notification.scss b/WebContent/VAADIN/themes/runo/notification/notification.scss
index f3b850924e..dde885846b 100644
--- a/WebContent/VAADIN/themes/runo/notification/notification.scss
+++ b/WebContent/VAADIN/themes/runo/notification/notification.scss
@@ -15,12 +15,8 @@
 	-moz-box-shadow: 0 3px 10px rgba(0,0,0,.3);
 	margin: 10px;
 }
-.#{$primaryStyleName} .#{$primaryStyleName}-caption,
-.#{$primaryStyleName} .#{$primaryStyleName}-description,
-.#{$primaryStyleName}-error .#{$primaryStyleName}-caption,
-.#{$primaryStyleName}-error .#{$primaryStyleName}-description,
-.#{$primaryStyleName}-warning .#{$primaryStyleName}-caption,
-.#{$primaryStyleName}-warning .#{$primaryStyleName}-description  {
+.#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-description {
 	display: inline;
 	font-weight: normal;
 	line-height: normal;
diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss
index fead990038..3ffaeff3c6 100644
--- a/WebContent/VAADIN/themes/valo/components/_notification.scss
+++ b/WebContent/VAADIN/themes/valo/components/_notification.scss
@@ -78,38 +78,38 @@ $v-notification-title-color: $v-focus-color !default;
     -ms-backface-visibility: hidden;
     backface-visibility: hidden;
 
-    .#{$primary-stylename}-caption {
-      margin: 0;
-      display: inline-block;
-      text-align: left;
-      font-weight: inherit;
-      line-height: inherit;
-      white-space: nowrap;
-      letter-spacing: 0;
-    }
-
-    .#{$primary-stylename}-description {
-      margin: 0;
-      display: inline-block;
-      vertical-align: middle;
-      max-width: 30em;
-      text-align: left;
-      max-height: 20em;
-      overflow: auto;
-    }
+    @include valo-notification-style;
 
-    .#{$primary-stylename}-caption ~ .#{$primary-stylename}-description {
-      margin-left: round($v-font-size * 1.5);
-    }
+  }
 
-    .v-icon + .#{$primary-stylename}-caption {
-      margin-left: round($v-font-size);
-    }
+  .#{$primary-stylename}-caption {
+    margin: 0;
+    display: inline-block;
+    text-align: left;
+    font-weight: inherit;
+    line-height: inherit;
+    white-space: nowrap;
+    letter-spacing: 0;
+  }
 
-    @include valo-notification-style;
+  .#{$primary-stylename}-description {
+    margin: 0;
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 30em;
+    text-align: left;
+    max-height: 20em;
+    overflow: auto;
+  }
 
+  .#{$primary-stylename}-caption ~ .#{$primary-stylename}-description {
+    margin-left: round($v-font-size * 1.5);
   }
 
+  .v-icon + .#{$primary-stylename}-caption {
+    margin-left: round($v-font-size);
+  }
+  
   .#{$primary-stylename}-system {
     @include valo-notification-bar-style;
     @include valo-notification-system-style;