feat(theme): add rtlcss directive (#1512)

Co-authored-by: Divyansh Singh <[email protected]>
vuejs · Nov 7, 2022 · b4e1483 · b4e1483
1 parent 3f89591
commit b4e1483
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 0 deletions.
diff --git a/src/client/theme-default/components/VPBackdrop.vue b/src/client/theme-default/components/VPBackdrop.vue
@@ -14,8 +14,10 @@ defineProps<{
 .VPBackdrop {
   position: fixed;
   top: 0;
+  /*rtl:ignore*/
   right: 0;
   bottom: 0;
+  /*rtl:ignore*/
   left: 0;
   z-index: var(--vp-z-index-backdrop);
   background: rgba(0, 0, 0, .6);

diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
@@ -262,19 +262,22 @@ defineProps<{
     align-items: center;
     width: 100%;
     height: 100%;
+    /*rtl:ignore*/
     transform: translate(-32px, -32px);
   }
 }
 
 .image-bg {
   position: absolute;
   top: 50%;
+  /*rtl:ignore*/
   left: 50%;
   border-radius: 50%;
   width: 192px;
   height: 192px;
   background-image: var(--vp-home-hero-image-background-image);
   filter: var(--vp-home-hero-image-filter);
+  /*rtl:ignore*/
   transform: translate(-50%, -50%);
 }
 
@@ -295,8 +298,10 @@ defineProps<{
 :deep(.image-src) {
   position: absolute;
   top: 50%;
+  /*rtl:ignore*/
   left: 50%;
   max-width: 192px;
+  /*rtl:ignore*/
   transform: translate(-50%, -50%);
 }
 

diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
@@ -43,6 +43,7 @@ function scrollToTop() {
 .VPLocalNav {
   position: sticky;
   top: 0;
+  /*rtl:ignore*/
   left: 0;
   z-index: var(--vp-z-index-local-nav);
   display: flex;

diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
@@ -30,6 +30,7 @@ provide('close-screen', closeScreen)
 .VPNav {
   position: relative;
   top: var(--vp-layout-top-height, 0px);
+  /*rtl:ignore*/
   left: 0;
   z-index: var(--vp-z-index-nav);
   width: 100%;

diff --git a/src/client/theme-default/components/VPNavBarSearch.vue b/src/client/theme-default/components/VPNavBarSearch.vue
@@ -219,6 +219,8 @@ function load() {
 }
 
 .DocSearch-Button .DocSearch-Button-Keys {
+  /*rtl:ignore*/
+  direction: ltr;
   display: none;
   min-width: auto;
 }
@@ -234,9 +236,11 @@ function load() {
   display: block;
   margin: 2px 0 0 0;
   border: 1px solid var(--vp-c-divider);
+  /*rtl:begin:ignore*/
   border-right: none;
   border-radius: 4px 0 0 4px;
   padding-left: 6px;
+  /*rtl:end:ignore*/
   min-width: 0;
   width: auto;
   height: 22px;
@@ -248,11 +252,13 @@ function load() {
 }
 
 .DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
+  /*rtl:begin:ignore*/
   border-right: 1px solid var(--vp-c-divider);
   border-left: none;
   border-radius: 0 4px 4px 0;
   padding-left: 2px;
   padding-right: 6px;
+  /*rtl:end:ignore*/
 }
 
 .DocSearch-Button .DocSearch-Button-Key:first-child {

diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue
@@ -44,8 +44,10 @@ function unlockBodyScroll() {
 .VPNavScreen {
   position: fixed;
   top: calc(var(--vp-nav-height-mobile) + var(--vp-layout-top-height, 0px));
+  /*rtl:ignore*/
   right: 0;
   bottom: 0;
+  /*rtl:ignore*/
   left: 0;
   padding: 0 32px;
   width: 100%;

diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
@@ -79,6 +79,7 @@ function toggle() {
 }
 
 .VPNavScreenMenuGroup.open .button-icon {
+  /*rtl:ignore*/
   transform: rotate(45deg);
 }
 

diff --git a/src/client/theme-default/components/VPSwitch.vue b/src/client/theme-default/components/VPSwitch.vue
@@ -28,6 +28,7 @@
 .check {
   position: absolute;
   top: 1px;
+  /*rtl:ignore*/
   left: 1px;
   width: 18px;
   height: 18px;

diff --git a/src/client/theme-default/components/VPSwitchAppearance.vue b/src/client/theme-default/components/VPSwitchAppearance.vue
@@ -104,6 +104,7 @@ watch(checked, (newIsDark) => {
 }
 
 .dark .VPSwitchAppearance :deep(.check) {
+  /*rtl:ignore*/
   transform: translateX(18px);
 }
 </style>
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
@@ -286,6 +286,9 @@
 
 .vp-doc [class*='language-'] pre,
 .vp-doc [class*='language-'] code {
+  /*rtl:ignore*/
+  direction: ltr;
+  /*rtl:ignore*/
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -386,15 +389,18 @@
 }
 
 .vp-doc div[class*='language-'].line-numbers-mode {
+  /*rtl:ignore*/
   padding-left: 32px;
 }
 
 .vp-doc .line-numbers-wrapper {
   position: absolute;
   top: 0;
   bottom: 0;
+  /*rtl:ignore*/
   left: 0;
   z-index: 3;
+  /*rtl:ignore*/
   border-right: 1px solid var(--vp-c-divider-dark-2);
   padding-top: 16px;
   width: 32px;
@@ -407,8 +413,11 @@
 }
 
 .vp-doc [class*='language-'] > button.copy {
+  /*rtl:ignore*/
+  direction: ltr;
   position: absolute;
   top: 8px;
+  /*rtl:ignore*/
   right: 8px;
   z-index: 3;
   display: block;
@@ -438,6 +447,7 @@
 
 .vp-doc [class*='language-'] > button.copy.copied,
 .vp-doc [class*='language-'] > button.copy:hover.copied {
+  /*rtl:ignore*/
   border-radius: 0 4px 4px 0;
   background-color: var(--vp-code-copy-code-hover-bg);
   background-image: var(--vp-icon-copied);
@@ -446,8 +456,10 @@
 .vp-doc [class*='language-'] > button.copy.copied::before,
 .vp-doc [class*='language-'] > button.copy:hover.copied::before {
   position: relative;
+  /*rtl:ignore*/
   left: -65px;
   display: block;
+  /*rtl:ignore*/
   border-radius: 4px 0 0 4px;
   padding-top: 8px;
   width: 64px;
@@ -464,6 +476,7 @@
 .vp-doc [class*='language-'] > span.lang {
   position: absolute;
   top: 6px;
+  /*rtl:ignore*/
   right: 12px;
   z-index: 2;
   font-size: 12px;
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,6 +79,7 @@ function toggle() { @@
     }
     .VPNavScreenMenuGroup.open .button-icon {
+      /*rtl:ignore*/
       transform: rotate(45deg);
     }
@@ Expand Down @@