RTL Support

[EslamElmadny]

Hello , how can I enable RTL and flip the design so it starts from right to left .. as unfortunately when I applied it the design became weird .. how can I fix this please

[ObadaSaada]

its possible if you change the variables in SCSS File. its working perfectly.

this is my custom SCSS

.ng-wizard-theme-arrows {
    border-radius: 5px;
    border: 1px solid #ddd;
    >.ng-wizard-container {
        min-height: 200px;
    }
    .step-content {
        padding: 10px 0;
        border: 0 solid #d4d4d4;
        background-color: #fff;
        text-align: right;
    }
    .ng-wizard-toolbar {
        padding: 10px;
        margin-bottom: 0 !important;
    }
    >ul.step-anchor {
        border: 0;
        border-bottom: 1px solid #ddd;
        padding: 0;
        background: #f5f5f5;
        border-radius: 0;
        border-top-left-radius: 5px;
        list-style: none;
        overflow: hidden;
        li+li {
            &:before {
                padding: 0;
            }
        }
        >li {
            >a {
                color: #bbb;
                text-decoration: none;
                position: relative;
                display: block;
                border: 0 !important;
                border-radius: 0;
                outline-style: none;
                background: #f5f5f5;
        padding-right: 50px!important;
                &:hover {
                    color: #bbb;
                    text-decoration: none;
                    padding: 10px 0 10px 45px;
                    position: relative;
                    display: block;
                    border: 0 !important;
                    border-radius: 0;
                    outline-style: none;
                    background: #f5f5f5;
                    color: #bbb;
                    text-decoration: none;
                    outline-style: none;
                    background: #f5f5f5;
                    border-color: #f5f5f5;
                    &:after {
                        border-right-color: #f5f5f5;
                    }
                }
                &:after {
                    content: " ";
                    display: block;
                    width: 0;
                    height: 0;
                    border-top: 50px solid transparent;
                    border-bottom: 50px solid transparent;
                    border-right: 30px solid #f5f5f5;
                    position: absolute;
                    top: 50%;
                    margin-top: -50px;
                    right: 100%;
                    z-index: 2;
                }
                &:before {
                    content: " ";
                    display: block;
                    width: 0;
                    height: 0;
                    border-top: 50px solid transparent;
                    border-bottom: 50px solid transparent;
                    border-right: 30px solid #ddd;
                    position: absolute;
                    top: 50%;
                    margin-top: -50px;
                    margin-right: 1px;
                    right: 100%;
                    z-index: 1;
                }
            }
            &:first-child {
                >a {
                    padding-right: 15px;
                }
            }
        }
        >li.clickable {
            >a {
        padding-right: 50px!important;
                &:hover {
                    color: #4285f4 !important;
                    background: #46b8da !important;
                }
            }
        }
        >li.active {
            >a {
                border-color: #5cb85c !important;
                color: #fff !important;
        background: #5cb85c !important;
        padding-right: 50px!important;
                &:after {
                    border-right: 30px solid #5cb85c !important;
        }
            }
        }
        >li.done {
            >a {
                border-color: #b1dfbb !important;
                color: #fff !important;
                background: #b1dfbb !important;
        padding-right: 50px!important;
        &:after {
                    border-right: 30px solid #b1dfbb;
                }
            }
        }
        >li.danger {
            >a {
                border-color: #d9534f !important;
                color: #fff !important;
                background: #d9534f !important;
        padding-right: 50px!important;
                &:after {
                    border-right: 30px solid #d9534f !important;
                }
            }
        }
        >li.disabled {
            >a {
                color: #eee !important;
                &:hover {
                    color: #eee !important;
                }
            }
    }
  }
  > ul.step-anchor.nav-tabs {
    >li {
      background: #5cb85c !important;
      >a {
        padding-right: 35px!important;
      }
      &:first-child {
                >a {
                    padding-right: 15px;
                }
            }
    }
        >li.active {
            >a {
                border-color: #5cb85c !important;
                color: #fff !important;
        background: #5cb85c !important;
                &:after {
                    border-right: 30px solid #5cb85c !important;
                }
            }
        }
  }
    &::before {
        border: 10px solid #f3f3f3;
        border-top: 10px solid #5cb85c;
    }
}
@media screen and (max-width:768px) {
    .ng-wizard-theme-arrows {
        >ul.step-anchor {
            border: 0;
            background: #ddd !important;
            >li {
                >a {
                    padding-right: 15px;
                    margin-left: 0;
                    margin-bottom: 1px;
                    &:hover {
                        padding-right: 15px;
                        margin-left: 0;
                        margin-bottom: 1px;
                    }
                    &:after {
                        display: none;
                    }
                    &:before {
                        display: none;
                    }
                }
            }
        }
        >.nav-tabs {
            >li {
                float: none !important;
        margin-bottom: 0;

            }
        }
    }
}