CSS conflicts

[thgh]

First of all: thanks for this component!

This library introduces visual changes in other parts of our webapp. I would suggest to prefix all classes with notify- to avoid this. Especially the .close and .alert classes.

[cristijora]

Thanks for posting the issue. I think it's a good idea. I will try to wrap everything in a class and place the css under that class

[thgh]

In case you're going full BEM the resulting css would look like:

.notifyjs {
  position: fixed; ...
}
.notifyjs-notification {
  display: inline-block; ...
}
.notifyjs-close {
  float: right;
}

// Variants for position
.notifyjs--top {
  top: 0
}
.notifyjs--right {
  right: 0
}
...

// Variants for themes
.notifyjs--material {
  .notifyjs-notification {
    color:; box-shadow:; border-radius:;
  }
}

I consider making a PR if I find the time.

[cristijora]

As much as I would like to go with BEM, I don't think I will do that. I mainly created this component in order to use it in some of my projects which override the css for notifications. I think making a wrapper should be sufficient so it doesn't interfere with other items.

.notifyjs{
 .close{....}
.alert{...}
}

There can be a chance that these elements can be affected by other styles though. If that happens, I will have to use BEM in the end.

PS: Any PR is welcome

[cristijora]

0.2.0 will have all css wrapped in a .vue-notifyjs class for now. This will avoid elements being affected by vue-notifyjs. Will add BEM support later on so other css libraries don't affect the plugin as well.