search

Godofbrowser / vuejs-dialog

A lightweight, promise based alert, prompt and confirm dialog
351 stars 109 forks source link

Custom styles #3

Closed ojczeo closed 6 years ago

ojczeo commented 7 years ago

@Godofbrowser is there any possibility to disable default styles? Package is awesome 🥇 (especially directive way of defining dialogs!!! 🔥 ), but it's little bit hard to customize styles (default styles conflicts with custom ones). What's easiest way to achieve customization?

Godofbrowser commented 7 years ago

Thanks @ojczeo.

The styles can be customized without conflicts just that you may need to nest some css selectors. During the cause of developing this plugin i wanted a something that anyone can take full ownership of. I thought of creating themes for the plugin but this has it's limitation. Then i was wondering, what exactly will developers want to customize? The colors, the layout itself or both... customizing the layout to some extent might break the plugin, but it's fine for the colors. So i was thinking of providing a detailed documentation of the layout and how they can be customized.

What do you think/suggest?

ojczeo commented 7 years ago

@Godofbrowser nice solutions are provided here: https://github.com/ElemeFE/vue-msgbox#install or here https://github.com/Deveodk/vue-toastr#usage- styles are builded to css file, you can import them if you want, but also you can define your own

Godofbrowser commented 7 years ago

@ojczeo Exporting the css into a separate file is a nice idea and it's also very easy to implement but i'll need to think through how this affects the initial setup process. Especially when installation is done through npm. Thanks for the tip.

ImpossivelPT commented 7 years ago

A nice option to start would be a prop for a custom CSS class for the main wrapper, with that we could create some custom CSS overrides based on the wrapper class.

btw great job and thanks @Godofbrowser

Godofbrowser commented 7 years ago

@ImpossivelPT Thanks. I think that would be a better option as it would be backward compatible. I have been as regards exporting the css file separately, it'll be a breaking change which i was planning to implement in a major release. This should be a quick fix for now.

Godofbrowser commented 6 years ago

Please use basic css, ex:

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