[DTRA]/UPM-635/Ahmad/Arabic lang fix

sass/components/_barrier.scss

@@ -1,5 +1,6 @@
 @charset "UTF-8";
 
+/*! rtl:begin:ignore */
 .barrier-area {
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -9,7 +10,9 @@
     user-select: none;
     width: 100%;
 }
+
 /* Drag Lines and Prices */
+
 .chart-line {
     position: absolute;
     z-index: 35;
@@ -35,13 +38,15 @@
             width: 100%;
         }
         .drag-line {
+            /* rtl:begin:ignore */
             height: 1px;
             float: left;
             width: 100%;
             margin-left: -10px;
             position: relative;
             border-top-width: 1px;
             border-top-color: $color-blue;
+            /* rtl:end:ignore */
         }
         .title-wrapper {
             $title-height: 24px;
@@ -156,12 +161,14 @@
         }
     }
     &-overlay {
+        /* rtl:begin:ignore */
         background-color: $color-blue;
         height: 24px;
         opacity: 0.3;
         position: absolute;
         right: -10px;
         top: -12px;
+        /* rtl:end:ignore */
     }
 }
 
@@ -225,3 +232,5 @@
     background-image: linear-gradient(to bottom, var(--shade-color), transparent);
     /* stylelint-enable plugin/no-unsupported-browser-features */
 }
+
+/*! rtl:end:ignore */

sass/components/_categorical-display.scss

@@ -78,6 +78,7 @@
             display: none;
 
             &-item {
+                direction: ltr;
                 width: 100%;
                 display: flex;
                 box-sizing: border-box;
@@ -115,6 +116,7 @@
             }
         }
         &__item {
+            direction: ltr;
             width: 100%;
             display: flex;
             box-sizing: border-box;
@@ -309,6 +311,7 @@
     }
     &__item {
         $item: &;
+        direction: ltr;
         padding-left: 20px;
         padding-right: 20px;
         display: flex;

sass/components/_chart-controls.scss

@@ -1,4 +1,6 @@
 
+/* rtl:begin:ignore */
+
 .cq-chart-controls {
     position: absolute;
     display: flex;
@@ -135,6 +137,7 @@
 }
 
 /* Menu dropdown open/close animation */
+
 .cq-chart-controls .ciq-menu .cq-menu-dropdown {
     .cq-chart-control-bottom & {
         transform: translateX(-50%) translateY(3em);
@@ -195,6 +198,7 @@
 }
 
 /* Mobile Style */
+
 .smartcharts-mobile {
     .cq-chart-controls {
         justify-content: space-around;
@@ -325,3 +329,5 @@
         }
     }
 }
+
+/* rtl:end:ignore */

sass/components/_chart-title.scss

@@ -1,3 +1,4 @@
+/*! rtl:begin:ignore */
 .cq-chart-title {
     display: inline-block;
     top: 1em;
@@ -18,6 +19,7 @@
 
                 svg {
                     width: 12px;
+
                     @include themify($themes) {
                         fill: themed('ChartTitleArrow');
                     }
@@ -49,6 +51,7 @@
     .cq-menu-btn {
         padding: 8px;
         border-radius: $border-radius;
+
         @include themify($themes) {
             background: themed('ChartTitleSubBg');
         }
@@ -60,6 +63,7 @@
         display: flex;
         align-items: center;
         border-radius: $border-radius;
+
         @include themify($themes) {
             color: themed('ChartTitleText');
         }
@@ -81,7 +85,10 @@
                 transition: transform 0.2s ease-in-out;
             }
         }
-        > .ic-icon, > .ic-frx, > .ic-wld, > .ic-otc {
+        > .ic-icon,
+        > .ic-frx,
+        > .ic-wld,
+        > .ic-otc {
             height: $large-icon-size;
             width: $large-icon-size;
             transform: scale(1.3);
@@ -94,6 +101,7 @@
             display: flex;
             flex-direction: column;
             margin: 0 0 0 20px;
+
             @media (min-width: 768px) {
                 min-width: 15rem;
                 min-height: 4.2rem;
@@ -126,6 +134,7 @@
             line-height: 24px;
             width: auto;
             padding-right: 1rem;
+
             @include themify($themes) {
                 color: themed('ChartTitleSymbolText');
             }
@@ -144,6 +153,7 @@
                 margin-right: 5px;
                 height: 12px;
                 margin-top: 3px;
+
                 @include themify($themes) {
                     fill: themed('TimeIconColor');
                 }
@@ -160,6 +170,7 @@
 
                 .cq-closed-opening-time {
                     font-weight: bold;
+
                     @include themify($themes) {
                         color: themed('ChartTitleText');
                     }
@@ -179,12 +190,15 @@
             border-radius: $border-radius;
             text-transform: uppercase;
         }
-        .cq-chart-price > *, .cq-chart-closed > * {
+        .cq-chart-price > *,
+        .cq-chart-closed > * {
             position: relative;
         }
-        .cq-chart-price, .cq-chart-closed {
+        .cq-chart-price,
+        .cq-chart-closed {
             display: flex;
             vertical-align: text-bottom;
+
             @include themify($themes) {
                 color: themed('ChartTitlePriceText');
             }
@@ -195,7 +209,8 @@
         bottom: auto;
         transform: translateX(0) translateY(-3em);
 
-        &.cq-menu-dropdown-enter-done, &.cq-menu-dropdown-enter-active {
+        &.cq-menu-dropdown-enter-done,
+        &.cq-menu-dropdown-enter-active {
             opacity: 1;
             transform: translateX(0) translateY(0em);
         }
@@ -229,3 +244,4 @@
         }
     }
 }
+/*! rtl:end:ignore */

sass/components/_crosshair.scss

@@ -1,3 +1,4 @@
+/*! rtl:begin:ignore */
 .cq-crosshair-toggle {
     &:hover {
         @include themify($themes) {
@@ -151,3 +152,4 @@
     position: absolute;
     bottom: 0px;
 }
+/*! rtl:end:ignore */

sass/components/_navigation-widget.scss

@@ -1,5 +1,6 @@
-
+/*! rtl:begin:ignore */
 .sc-navigation-widget {
+    direction: ltr;
     width: 32px;
     position: absolute;
     bottom: 80px;
@@ -42,7 +43,7 @@
         }
     }
 }
-
+/*! rtl:end:ignore */
 .smartcharts-mobile .sc-navigation-widget__item--indent {
     margin-bottom: calc(10% - 1rem);
-}
+}

sass/components/_toolbar-widget.scss

@@ -1,5 +1,7 @@
+/*! rtl:begin:ignore */
 .sc-toolbar-widget {
     position: absolute;
+    direction: ltr;
     border-radius: $border-radius;
     width: 40px;
     top: 102px;
@@ -67,3 +69,4 @@
         z-index: 5;
     }
 }
+/*! rtl:end:ignore */

sass/styles/chart.scss

@@ -11,6 +11,7 @@ body {
     margin: 0px; /*to deal with iFraming which sets 8px by default in some browsers*/
 }
 
+/*! rtl:ignore */
 .chartContainer {
     /* DIV that the canvas expands to. #chartContainer is only for backward compatibility with older libraries. */
     display: block;
@@ -32,6 +33,7 @@ body {
     }
 }
 
+/*! rtl:ignore */
 .cq-inchart-subholder {
     width: 100%;
     height: 100%;
@@ -40,6 +42,8 @@ body {
     pointer-events: none;
 }
 /* Chart Block */
+
+/*! rtl:ignore */
 .ciq-chart {
     height: auto;
     width: 100%;
@@ -67,13 +71,16 @@ body {
 }
 
 /* The Chart */
+
+/*! rtl:ignore */
 .cq-chart-control-left {
     .chartContainer {
         width: calc(100% - 100px);
         margin-left: 100px;
     }
 }
 
+/*! rtl:ignore */
 .sharing .ciq-no-share {
     display: none !important;
     left: -9999px !important;
@@ -161,6 +168,7 @@ body {
 /* Up/Down Arrow indicators */
 .cq-change {
     &:after {
+        /*! rtl:ignore */
         float: right;
         margin-top: 5px;
         margin-right: 5px;
@@ -192,12 +200,16 @@ body {
     z-index: 30;
 }
 
+/*! rtl:ignore */
+
 .scroll_to_recent:hover,
 .scroll_to_recent:active {
     /* Make buttons full opacity on hover or hit */
     opacity: 1;
 }
 
+/*! rtl:ignore */
+
 .scroll_to_recent {
     /* Button  jumping to today's data */
     color: #fff;

sass/styles/main.scss

@@ -147,6 +147,7 @@
     }
 }
 
+/*! rtl:ignore */
 .cq-modal__overlay {
     display: flex;
     width: 100%;
@@ -160,6 +161,7 @@
     overflow: hidden;
 }
 
+/*! rtl:ignore */
 .ciq-modal {
     .cq-modal__overlay {
         z-index: 9999;
@@ -173,7 +175,7 @@
 @import 'menu';
 
 /* -------------------------- custom styles -------------------------------------*/
-
+/*! rtl:ignore */
 .cq-chart-unavailable {
     position: absolute;
     text-align: center;
@@ -183,12 +185,14 @@
     font-size: 1.7em;
     color: #878787;
 }
-
+/*! rtl:begin:ignore */
 .sc-tooltip {
     &__inner {
         position: absolute;
         top: 0px;
+        /*! rtl:begin:ignore */
         left: 50%;
+        /*! rtl:end:ignore */
         border-radius: $border-radius;
         height: 34px;
         width: auto;
@@ -272,6 +276,7 @@
     }
 }
 /* -------------------------- buttons -------------------------------------*/
+
 .sc-btn {
     padding: 5px 16px;
     font-size: 14px;
@@ -412,6 +417,11 @@
     }
 }
 
+[dir='rtl'] .sc-input {
+    border-right: 1px solid $color-grey-5 !important;
+}
+
+/*! rtl:end:ignore */
 @keyframes blinking-network-status {
     40% {
         opacity: 1;