Make flash css not transparent

[rusikf]

Hi, thanks for your plugin
How to make flash not transparent ?
1)

import FlashMessage from '@smartweb/vue-flash-message';
Vue.use(FlashMessage, { time: 1000, wrapperClass: 'flash-wrapper', blockClass: 'blockClass' });

wrapperClass, blockClass doesnt work ( time works )
2) Transparency defined through background-color, So I cannot override it, that's why I hardcoded it in my app

._vue-flash-msg-body {
    z-index: 9
  }

  ._vue-flash-msg-body_success {
    background-color: rgba(1,148,122,100) !important
  }

  ._vue-flash-msg-body_error {
    background-color: rgba(241,34,34,100) !important
  }

[smwbtech]

Hi, @rusikf

Yep, you suggest the right way to set transparency. I put it in my todo list and fix things with next patch.

[smwbtech]

@rusikf Hi there,

I know that 5 month is not timely answer, but had a lot of other problems and stuff besides my open source libs. But I hope this will help for other users, if they faced the same issue.

You don't need to use !important operator to override background color of you message block.

The code below is correct and will work:

 this.flashMessage.error({
        title: "Error Message Title",
        message: "Oh, you broke my heart! Shame on you!",
        time: 0,
        blockClass: "my-custom-class",
        contentClass: "my-content-class"
  });

._vue-flash-msg-body.my-custom-class {
  border: 1px solid green;
  background-color: #1ab394;
}

._vue-flash-msg-body.my-custom-class:hover {
  background-color: #1ab394;
}

._vue-flash-msg-body.my-custom-class .my-content-class {
  border-left: 3px solid green;
}

Codesandbox exemple