Godofbrowser/vuejs-dialog

style css not being applied

v-cagome opened this issue · 3 comments

Added styles below to css files, but being ignored.
Any ideas?

.dg-btn--ok {
border-color: green;
}

.dg-btn-loader .dg-circle {
background-color: green;
}

@v-cagome I think this is due to the fact that the styles are injected just before the close of the head tag.

This means that your custom style will probably be above the injected style and it will be overridden.

A quick fix will be to make the custom style important. ie:

.dg-btn--ok {
border-color: green !important;
}

.dg-btn-loader .dg-circle {
background-color: green !important;
}

The best solution will be to make the style injection optional. That way, users can just link the css file in the head tag.

aha :D I was just coming to report this very issue. IMO the best option is to allow us to just use our own dialog components with your directives, but simply making sure that we have a way to override your default styles is a great step in the right direction.

Now you can use custom components and style has been extracted into a separate file to be included manually