fix: Added RTL styling for immersive nav view

Enabled immersive nav view to handle RTL
BrightspaceUILabs · Jan 4, 2021 · db40d6f · db40d6f
2 parents accf74d + b4e44df
commit db40d6f
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/d2l-navigation-immersive.js b/d2l-navigation-immersive.js
@@ -7,14 +7,15 @@ import './d2l-navigation-link-back.js';
 import { navigationSharedStyle } from './d2l-navigation-shared-styles.js';
 import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
+import { DirMixin } from '@polymer/polymer/lib/mixins/dir-mixin.js';
 
 /**
 `d2l-navigation-immersive`
 Polymer-based web component for the immersive navigation component
 
 @demo demo/navigation-immersive.html
 */
-class D2LNavigationImmsersive extends PolymerElement {
+class D2LNavigationImmsersive extends DirMixin(PolymerElement) {
 
 	static get properties() {
 		return {
@@ -118,6 +119,11 @@ class D2LNavigationImmsersive extends PolymerElement {
 				border-right: none;
 			}
 
+			:host(:dir(rtl)) .d2l-navigation-immersive-middle.d2l-navigation-immersive-middle-no-right-border {
+				border-left: none;
+				border-right: 1px solid var(--d2l-color-gypsum);
+			}
+
 			div.d2l-navigation-immersive-middle-observer,
 			div.d2l-navigation-immersive-right-observer {
 				height: auto;