Fix order of buttons in .modal-footer to match html markup

Created by: nikku

Currently buttons in the modal dialog appear in the reverse order than the one specified in the html markup:

<div class="modal-footer">
    <a href="#" class="btn">Button 1</a>
    <a href="#" class="btn">Button2</a>
</div>

Would yield Button2 Button 1 in a modal dialog. This results in the buttons being selected from right to left when tabbing through the document focusable elements.

This can be fixed by giving the .modal-footer a text-align: right CSS property and removing the float: right property from the buttons child elements.

.modal-footer {
    .btn {
        float: right;
    }
}

to

.modal-footer {
    text-align: right;
    .btn {

    }
}