Spectre: RTL Support

[alighasemzadeh]

Hello,
I want to is there any RTL support?

[picturepan2]

@AGhasemzadeh No yet. Do you know any framework or library has RTL support?

[alighasemzadeh]

yes,
Qusar,Bootstrap,Zurb f6

[alighasemzadeh]

Hello
I want to have RTL off-canvas but I after I fix all CSSs I can not see sidebar.
This is my SASSS code.

````
// Off canvas menus
$off-canvas-breakpoint: 960px !default;

.off-canvas {
display: flex;
flex-flow: nowrap;
height: 100%;
position: relative;
width: 100%;

.off-canvas-sidebar {
background: $bg-color;
bottom: 0;
right: 0;
min-width: 10rem;
overflow-y: auto;
position: fixed;
top: 0;
transform: translateX(100%);
transition: transform .25s ease;
z-index: $zindex-3;
}

.off-canvas-content {
flex: 1 1 auto;
height: 100%;
padding: $layout-spacing 4rem $layout-spacing $layout-spacing;
}

.off-canvas-overlay {
background: rgba($dark-color, .1);
border-color: transparent;
border-radius: 0;
bottom: 0;
display: none;
height: 100%;
right: 0;
position: fixed;
left: 0;
top: 0;
width: 100%;
}

.off-canvas-sidebar {
&:target,
&.active {
transform: translateX(0);
}

&:target ~ .off-canvas-overlay,
&.active ~ .off-canvas-overlay {
  display: block;
  z-index: $zindex-2;
}

}

.off-canvas-toggle {
display: block;
right: $layout-spacing;
position: absolute;
top: $layout-spacing;
transition: none;
z-index: $zindex-0;
}
}

// Responsive layout
@media (min-width: $off-canvas-breakpoint) {
.off-canvas {
.off-canvas-sidebar {
flex: 0 0 auto;
position: relative;
transform: none;
}

.off-canvas-content {
  padding-right: $layout-spacing-lg;
}

.off-canvas-toggle {
  display: none;
}

}
}
``

[Abisar]

Material UI supports RTL. They use jss-rtl to flip every rule related to x-axis and that's almost everything you need to support RTL unless there are javascript animations. For example:

float: right
right: 0.5rem
padding: 1rem 0.5rem 1rem 0

becomes:

float: left
left: 0.5rem
padding: 1rem 0 1rem 0.5rem

[pmpr-ir]

How much support does it have on RTL now? Are there any milestones?