Notification position should be controllable with CSS (#13990)

Change-Id: Ic04f97d00745c2b7d1b4c143b2a458ab47188fd2

3 files changed, 48 insertions, 21 deletions

diff --git a/WebContent/VAADIN/themes/base/notification/notification.scss b/WebContent/VAADIN/themes/base/notification/notification.scss
index aa70a167dc..6eafcda6bc 100644
--- a/WebContent/VAADIN/themes/base/notification/notification.scss
+++ b/WebContent/VAADIN/themes/base/notification/notification.scss
@@ -44,6 +44,25 @@
 	@include animation(animate-out 400ms 1s);
 }
 
+.#{$primaryStyleName} {
+  &.v-position-top {
+    top: 0;
+  }
+  &.v-position-right {
+    right: 0;
+  }
+  &.v-position-bottom {
+    bottom: 0;
+  }
+  &.v-position-left {
+    left: 0;
+  }
+  &.v-position-assistive {
+    top: -9999px;
+    left: -9999px;
+  }
+}
+
 }
 
 @include keyframes(animate-out) {
diff --git a/WebContent/VAADIN/themes/tests-valo/styles.css b/WebContent/VAADIN/themes/tests-valo/styles.css
index 2e0c1b6143..3fb0b502e8 100644
--- a/WebContent/VAADIN/themes/tests-valo/styles.css
+++ b/WebContent/VAADIN/themes/tests-valo/styles.css
@@ -4428,14 +4428,17 @@ h4,
   text-align: left;
   white-space: normal;
   line-height: 1.55; }
-.tests-valo .v-Notification[style*=" top: 0"] {
-  margin-top: 12px !important; }
-.tests-valo .v-Notification[style*="right: 0"] {
-  margin-right: 12px; }
-.tests-valo .v-Notification[style*="bottom: 0"] {
-  margin-bottom: 12px; }
-.tests-valo .v-Notification[style*=" left: 0"] {
-  margin-left: 12px !important; }
+.tests-valo .v-Notification.v-position-top {
+  top: 12px; }
+.tests-valo .v-Notification.v-position-right {
+  right: 12px; }
+.tests-valo .v-Notification.v-position-bottom {
+  bottom: 12px; }
+.tests-valo .v-Notification.v-position-left {
+  left: 12px; }
+.tests-valo .v-Notification.v-position-assistive {
+  top: -9999px;
+  top: -9999px; }
 .tests-valo .v-Notification[style*=" top: 0"] {
   -webkit-animation: valo-anim-slide-down 600ms;
   -moz-animation: valo-anim-slide-down 600ms;
diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/shared/_notification.scss
index ff470b8144..e4e863d1c8 100644
--- a/WebContent/VAADIN/themes/valo/shared/_notification.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_notification.scss
@@ -8,22 +8,27 @@ $v-notification-title-color: $v-focus-color !default;
 
   // Positional offsets
 
-  // Can't match to "top: 0", since that would target "margin-top: 0" also, which all GWT PopupPanels have always
-  .v-Notification[style*=" top: 0"] {
-    margin-top: $v-layout-spacing-vertical !important;
-  }
+  .v-Notification {
+    &.v-position-top {
+      top: $v-layout-spacing-vertical;
+    }
 
-  .v-Notification[style*="right: 0"] {
-    margin-right: $v-layout-spacing-horizontal;
-  }
+    &.v-position-right {
+      right: $v-layout-spacing-horizontal;
+    }
 
-  .v-Notification[style*="bottom: 0"] {
-    margin-bottom: $v-layout-spacing-vertical;
-  }
+    &.v-position-bottom {
+      bottom: $v-layout-spacing-vertical;
+    }
 
-  // Can't match to "left: 0", since that would target "margin-left: 0" also, which all GWT PopupPanels have always
-  .v-Notification[style*=" left: 0"] {
-    margin-left: $v-layout-spacing-horizontal !important;
+    &.v-position-left {
+      left: $v-layout-spacing-horizontal;
+    }
+
+    &.v-position-assistive {
+      top: -9999px;
+      left: -9999px;
+    }
   }