Less-specified css selectors for buttons?

[gregsabo]

I'd like to use the themes but roll my own markup, but right now the CSS selector for the primary button looks like this:

.vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary

It would be nice to not have to jump through so many hoops.

[adamschwartz]

You can add your own class names to buttons and style them with those selectors.

Check out this example (code) which adds a class to the submit button to make it red.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.dialog.js"></script>
<link href="http://github.hubspot.com/vex/css/vex.css" rel="stylesheet" />
<link href="http://github.hubspot.com/vex/css/vex-theme-os.css" rel="stylesheet" />
<style>
    .vex .my-button-class-name {
        color: red;
    }
</style>
<script>
    window.onload = function() {
        vex.dialog.alert({
            className: 'vex-theme-os',
            message: 'Like my red button?',
            buttons: [{
                type: 'submit',
                text: 'YES',
                className: 'my-button-class-name'
            }]
        });
    }
</script>

[gregsabo]

I guess what I mean is, the themes have lots of styling which is compatible with vex.dialog, but they can't be reused for more complex modals using vanilla vex. If I want a primary button on a modal, I need this markup:

<div class="vex-dialog-form">
    <div class='vex-dialog-buttons'>
        <div class="vex-dialog-button vex-dialog-button-primary">OK</div>
    </div>
</div>

I'd prefer only having to do this:

<div class="vex-button-primary">OK</div>

[adamschwartz]

Got it. Thanks for the clarification.