Make scroll-spy mirrored on rtl

SAP · Feb 19, 2020 · 6389062 · 6389062
1 parent 2570590
commit 6389062
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 8 deletions.
diff --git a/...cs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html b/...cs/scroll-spy/examples/scroll-spy-custom-example/scroll-spy-custom-example.component.html
@@ -2,8 +2,7 @@
     <div class="header-item" *ngFor="let item of items" [ngClass]="{'selected': selectedSpy === item.id}">
         <span class="fd-scroll-spy-example-icon-class icon">
             <fd-icon [glyph]="'arrow-right'" [size]="'xs'"></fd-icon>
-        </span>
-        {{item.name}}
+        </span>{{item.name}}
     </div>
 </div>
 

diff --git a/...ocs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html b/...ocs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.html
@@ -2,8 +2,7 @@
     <div class="header-item" *ngFor="let item of items" [ngClass]="{'selected': selectedSpy === item.id}">
         <span class="fd-scroll-spy-example-icon-class icon">
             <fd-icon [glyph]="'arrow-right'" [size]="'xs'"></fd-icon>
-        </span>
-        {{item.name}}
+        </span>{{item.name}}
     </div>
 </div>
 

diff --git a/...ocs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss b/...ocs/scroll-spy/examples/scroll-spy-custom-offset/scroll-spy-offset-example.component.scss
@@ -33,7 +33,6 @@
 }
 
 .icon {
-    left: -4px;
     opacity: 0;
 }
 

diff --git a/...e/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html b/...e/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.html
@@ -2,8 +2,7 @@
     <div class="header-item" *ngFor="let item of items" [ngClass]="{'selected': selectedSpy === item.id}">
         <span class="fd-scroll-spy-example-icon-class icon">
             <fd-icon [glyph]="'arrow-right'" [size]="'xs'"></fd-icon>
-        </span>
-        {{item.name}}
+        </span>{{item.name}}
     </div>
 </div>
 

diff --git a/...e/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.scss b/...e/component-docs/scroll-spy/examples/scroll-spy-example/scroll-spy-example.component.scss
@@ -32,7 +32,6 @@
 }
 
 .icon {
-    left: -4px;
     opacity: 0;
 }
 

diff --git a/apps/docs/src/styles.scss b/apps/docs/src/styles.scss
@@ -81,9 +81,12 @@ fd-card {
 .fd-scroll-spy-example-icon-class {
     position: relative;
     display: inline-block;
+    margin-right: 4px;
     @at-root {
         [dir="rtl"] &,
         &[dir="rtl"] {
+            margin-right: 0;
+            margin-left: 4px;
             transform: rotate(180deg);
             bottom: 2px;
         }