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;

			}
		}
	}
}