CSS transition collision with bootstrap 4

[Dani216]

Hi,

I am using this library with bootstrap v4.0.0-beta.2 and I notice collision in CSS transition style.

B4:

.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Ladda:

.ladda-button,
.ladda-button .ladda-spinner,
.ladda-button .ladda-label {
    -webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
    -moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
    -ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
    -o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
}

This collision cause very ugly behavior of background-color/color style on hover. Is it possible to remove !important or set transition only for width, height etc. styles for .ladda-button? Or something similar which solve this issue.

Thanks,
Dan

[theodorejb]

Thanks for reporting the issue. Currently the SCSS file has a comment saying "important to override bootstrap", so apparently this was originally done to make Ladda work with Bootstrap.

When I have time I'll see if I can test with Bootstrap 4 and figure out an approach that works better.

[theodorejb]

I dug into this today, and unfortunately I'm not sure there's a good solution. If the !important rule is removed, then the transition that is applied will depend on the order in which you load the Ladda or Bootstrap CSS file. Only setting transition for certain properties doesn't make a difference, since a given button can still only have one transition value.

[theodorejb]

@Dani216 Is this still an issue with the latest version of Bootstrap? I have a test with Ladda and Bootstrap 4.1.1 here and it seems to work fine: https://theodorejb.github.io/Ladda/test/bootstrap4.html.