Fixes unnecessary selector specificity for notifications (#14872)

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

Change-Id: I6c68706116f9a90598413ffe43ea429d08616f51

diff --git a/WebContent/VAADIN/themes/base/notification/notification.scss b/WebContent/VAADIN/themes/base/notification/notification.scss
index 7f7262b1b46caa305d717c9f42f01214a42a840a..9ccc29fd0e3dc7b5f6590ae5d99c99dcd0ff6af8 100644 (file)
--- 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 f3b850924e5da687217442b090d0fceb6c16202d..dde885846be03351a4b7b106fcfbee56f4cfc879 100644 (file)
--- 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 fead9900389c78bb131bece523328456f3940297..3ffaeff3c620339c136c9ea14f8395fe75a51bce 100644 (file)
--- 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;