RTL support for the steps component (#3332)

shuding · Oct 2, 2024 · 9d93caf · 9d93caf
1 parent fb2fc08
commit 9d93caf
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 7 deletions.
diff --git a/.changeset/plenty-boxes-buy.md b/.changeset/plenty-boxes-buy.md
@@ -0,0 +1,7 @@
+---
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+'nextra': patch
+---
+
+RTL support for the `<Steps>` component.
diff --git a/examples/swr-site/pages/es/docs/getting-started.mdx b/examples/swr-site/pages/es/docs/getting-started.mdx
@@ -1,4 +1,4 @@
-import { Callout } from 'nextra/components'
+import { Callout, Steps } from 'nextra/components'
 
 # Comienza
 
@@ -17,18 +17,22 @@ import { Callout } from 'nextra/components'
 
 ## Instalación
 
-Dentro del directorio de su proyecto React, ejecute lo siguiente:
+<Steps>
+
+### Dentro del directorio de su proyecto React, ejecute lo siguiente:
 
 ```bash
 yarn add swr
 ```
 
-O con npm
+### O con npm
 
 ```bash
 npm install swr
 ```
 
+</Steps>
+
 ## Inicio rápido
 
 Para APIs RESTFul normales con datos JSON, primero necesita crear una función

diff --git a/packages/nextra-theme-blog/postcss.config.js b/packages/nextra-theme-blog/postcss.config.js
@@ -5,7 +5,7 @@ module.exports = {
     'tailwindcss/nesting': {},
     tailwindcss: {},
     'postcss-lightningcss': {
-      browsers: '>= .25%'
+      browsers: '>= .25% and not dead'
     }
   }
 }
diff --git a/packages/nextra-theme-docs/postcss.config.js b/packages/nextra-theme-docs/postcss.config.js
@@ -5,7 +5,7 @@ module.exports = {
     'tailwindcss/nesting': {},
     tailwindcss: {},
     'postcss-lightningcss': {
-      browsers: '>= .25%'
+      browsers: '>= .25% and not dead'
     }
   }
 }
diff --git a/packages/nextra/src/client/components/steps.tsx b/packages/nextra/src/client/components/steps.tsx
@@ -12,7 +12,7 @@ export function Steps({
   return (
     <div
       className={cn(
-        'nextra-steps _ml-4 _mb-12 _border-l _border-gray-200 _pl-6',
+        'nextra-steps _ms-4 _mb-12 _border-s _border-gray-200 _ps-6',
         'dark:_border-neutral-800',
         className
       )}

diff --git a/packages/nextra/styles/steps.css b/packages/nextra/styles/steps.css
@@ -10,7 +10,7 @@
       @apply _absolute _size-[33px];
       @apply _border-4 _border-[rgb(var(--nextra-bg))] _bg-gray-100 dark:_bg-neutral-800;
       @apply _rounded-full _text-neutral-400 _text-base _font-normal _text-center _-indent-px;
-      @apply _mt-[3px] _ml-[-41px];
+      @apply _mt-[3px] _ms-[-41px];
       content: counter(var(--counter-id));
     }
   }