Skip to content

Generate polyfill for the transition property #25

@erickskrauch

Description

@erickskrauch

The case:

.toggleIcon {
    position: absolute;
    inset-inline-end: $dropdownPadding;
    top: 16px;
    transition: inset-inline-end 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint

    &:hover {
        inset-inline-end: $dropdownPadding - 5px;
    }
}

Output:

.toggleIcon {
    position: absolute;
    inset-inline-end: $dropdownPadding;
    top: 16px;
    font-size: 17px;
    transition: inset-inline-end 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint

    &:hover {
        inset-inline-end: $dropdownPadding - 5px;
    }

    // No polyfill for the transition field!

    html[dir="ltr"] &:hover {
        right: $dropdownPadding - 5px;
    }

    html[dir="rtl"] &:hover {
        right: $dropdownPadding - 5px;
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions