Skip to content

Commit 6b61cd4

Browse files
authored
Annex to #6138 (#6226)
* fix: wronge styles when applying RTL it was `top-0 left-0 ...` by wrong I made it `inset-x-0`. * fix wrong styles * fix wrong styles * style canary icon with RTL-friendly styles * chore: utilize mx-* instead of me-* & ms-* * utilize relative styles * chore: use mx-* instead of me-* & ms-* * style canary icon with RTL-frindly styles * Update OpenInTypeScriptPlayground.tsx
1 parent 819518c commit 6b61cd4

File tree

7 files changed

+9
-9
lines changed

7 files changed

+9
-9
lines changed

src/components/Layout/HomeContent.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -849,7 +849,7 @@ function ExampleLayout({
849849
{overlayStyles.map((styles, i) => (
850850
<div
851851
key={i}
852-
className="inset-x-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
852+
className="top-0 start-0 bg-blue-30/5 border-2 border-link dark:border-link-dark absolute rounded-lg"
853853
style={styles}
854854
/>
855855
))}

src/components/Layout/Sidebar/SidebarButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export function SidebarButton({
3131
})}>
3232
<button
3333
className={cn(
34-
'p-2 pe-2 ps-5 w-full rounded-s-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
34+
'p-2 pe-2 ps-5 w-full rounded-e-lg text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
3535
{
3636
'p-2 text-base': level > 1,
3737
'text-link bg-highlight dark:bg-highlight-dark text-base font-bold hover:bg-highlight dark:hover:bg-highlight-dark hover:text-link dark:hover:text-link-dark':

src/components/Layout/Sidebar/SidebarLink.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export function SidebarLink({
5858
passHref
5959
aria-current={selected ? 'page' : undefined}
6060
className={cn(
61-
'p-2 pe-2 w-full rounded-none lg:rounded-s-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
61+
'p-2 pe-2 w-full rounded-none lg:rounded-e-2xl text-start hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
6262
{
6363
'text-sm ps-6': level > 0,
6464
'ps-5': level < 2,
@@ -78,7 +78,7 @@ export function SidebarLink({
7878
{canary && (
7979
<IconCanary
8080
title="This feature is available in the latest Canary"
81-
className="ml-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
81+
className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
8282
/>
8383
)}
8484
</div>

src/components/MDX/Sandpack/OpenInCodeSandboxButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const OpenInCodeSandboxButton = () => {
1111
className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1 ms-2 md:ms-1"
1212
title="Open in CodeSandbox">
1313
<IconNewPage
14-
className="inline ms-1 me-1 relative top-[1px]"
14+
className="inline mx-1 relative top-[1px]"
1515
width="1em"
1616
height="1em"
1717
/>

src/components/MDX/Sandpack/OpenInTypeScriptPlayground.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const OpenInTypeScriptPlaygroundButton = (props: {content: string}) => {
1616
target="_blank"
1717
rel="noreferrer">
1818
<IconNewPage
19-
className="inline ml-1 mr-1 relative top-[1px]"
19+
className="inline mx-1 relative top-[1px]"
2020
width="1em"
2121
height="1em"
2222
/>

src/components/MDX/Sandpack/ResetButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function ResetButton({onReset}: ResetButtonProps) {
1515
onClick={onReset}
1616
title="Reset Sandbox"
1717
type="button">
18-
<IconRestart className="inline ms-1 me-1 relative" /> Reset
18+
<IconRestart className="inline mx-1 relative" /> Reset
1919
</button>
2020
);
2121
}

src/components/PageHeading.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,13 @@ function PageHeading({
3535
{canary && (
3636
<IconCanary
3737
title="This feature is available in the latest Canary"
38-
className="ml-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
38+
className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
3939
/>
4040
)}
4141
{status ? <em>{status}</em> : ''}
4242
</H1>
4343
{description && (
44-
<p className="mt-4 mb-6 dark:text-primary-dark text-xl text-gray-90 leading-large">
44+
<p className="mt-4 mb-6 dark:text-primary-dark text-xl text-primary leading-large">
4545
{description}
4646
</p>
4747
)}

0 commit comments

Comments
 (0)