RTL Direction

• About
• Mixins
• Example

About

Breeze uses swissup/module-rtl module to support RTL languages. This module automatically generates appropriate CSS depending on active store view language settings. All you need is to use one of RTL mixins when adding property that behaves differently on RTL and LTR directions.

Mixins

Example

The code below will be automatically compiled into RTL/LTR-based language depending on your store language settings.

.selector {
    .left(0);
    .modrtl(transform, translateX(-100%), translateX(100%));

    &.shown {
        transform: translateX(0);
    }

    .close {
        .right(0);
    }
}

Here is the output for LTR language:

.selector {
    left: 0;
    transform: translateX(-100%);
}
.selector.shown {
    transform: translateX(0);
}
.selector .close {
    right: 0;
}

And here is the output for RTL language:

.selector {
    right: 0;
    transform: translateX(100%);
}
.selector.shown {
    transform: translateX(0);
}
.selector .close {
    left: 0;
}