Open aliqasemzadeh opened 6 years ago
@AGhasemzadeh No yet. Do you know any framework or library has RTL support?
yes, Qusar,Bootstrap,Zurb f6
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;
}
}
}
`
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
How much support does it have on RTL now? Are there any milestones?
Hello, I want to is there any RTL support?