Sass restructure: base theme with renameable components

1 files changed, 14 insertions, 14 deletions

diff --git a/WebContent/VAADIN/themes/base/notification/notification.scss b/WebContent/VAADIN/themes/base/notification/notification.scss
index e67ac14050..350db1a75f 100644
--- a/WebContent/VAADIN/themes/base/notification/notification.scss
+++ b/WebContent/VAADIN/themes/base/notification/notification.scss
@@ -1,6 +1,6 @@
-@mixin base-notification {
+@mixin base-notification($name : v-Notification) {
 
-.v-Notification {
+.#{$name} {
 	background: #999;
 	color: #fff;
 	cursor: pointer;
@@ -9,33 +9,33 @@
 	max-width:85%;
 	
 }
-.v-Notification h1,
-.v-Notification p,
-.v-Notification-error h1,
-.v-Notification-error p,
-.v-Notification-warning h1,
-.v-Notification-warning p {
+.#{$name} h1,
+.#{$name} p,
+.#{$name}-error h1,
+.#{$name}-error p,
+.#{$name}-warning h1,
+.#{$name}-warning p {
 	display: inline;
 	margin: 0 0.5em 0 0;
 }
-.v-Notification-warning {
+.#{$name}-warning {
 	background: orange;
 }
-.v-Notification-error {
+.#{$name}-error {
 	background: red;
 }
-.v-Notification-tray h1 {
+.#{$name}-tray h1 {
 	display: block;
 }
-.v-Notification-tray p {
+.#{$name}-tray p {
 	display: block;
 }
-.v-Notification-system {
+.#{$name}-system {
 	background-color: red;
 	opacity: .7;
 	filter: alpha(opacity=70);
 }
-.v-Notification-system h1 {
+.#{$name}-system h1 {
 	display: block;
 	margin: 0;
 }