From f9fe9161eb41285bba07907d17a1dddc99da3bf2 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 31 Oct 2024 20:01:54 +0300
Subject: [PATCH] Refactor #6635

---
 apps/showcase/assets/styles/layout/_code.scss | 10 +++----
 apps/showcase/assets/styles/layout/_core.scss | 12 ++++----
 apps/showcase/assets/styles/layout/_doc.scss  | 30 +++++++++++--------
 3 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/apps/showcase/assets/styles/layout/_code.scss b/apps/showcase/assets/styles/layout/_code.scss
index c7d84a425..43b480716 100644
--- a/apps/showcase/assets/styles/layout/_code.scss
+++ b/apps/showcase/assets/styles/layout/_code.scss
@@ -2,7 +2,7 @@ code[class*="language-"],
 pre[class*="language-"] {
     background: none;
     font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,Liberation Mono,monospace;
-    text-align: left;
+    text-align: start;
     white-space: pre;
     word-spacing: normal;
     word-break: normal;
@@ -36,7 +36,7 @@ pre[class*="language-"] {
     }
 
     code {
-        border-left: 1rem solid transparent;
+        border-inline-start: 1rem solid transparent;
         box-shadow: none;
         margin: 0;
         font-size: 14px;
@@ -47,7 +47,7 @@ pre[class*="language-"] {
         padding: 0 1rem;
         display: block;
         overflow: auto;
-        
+
         .token.comment,
         .token.block-comment,
         .token.prolog,
@@ -126,8 +126,8 @@ pre[class*="language-"] {
     display: none;
 }
 
-pre[class*="language-"] {    
+pre[class*="language-"] {
     code {
         background: var(--code-background);
     }
-}
\ No newline at end of file
+}
diff --git a/apps/showcase/assets/styles/layout/_core.scss b/apps/showcase/assets/styles/layout/_core.scss
index de5fc910c..997e7682d 100644
--- a/apps/showcase/assets/styles/layout/_core.scss
+++ b/apps/showcase/assets/styles/layout/_core.scss
@@ -31,10 +31,11 @@ a {
 ::selection {
     background-color: var(--selection-background);
     color: var(--selection-text-color);
-} 
+}
 
 h1, h2, h3, h4, h5, h6 {
-    margin: 1.5rem 0 1rem 0;
+    margin-block: 1.5rem 1rem; /* Üst ve alt kenarlar */
+margin-inline: 0;
     font-family: inherit;
     font-weight: 600;
     line-height: 1.2;
@@ -71,7 +72,8 @@ h6 {
 
 p {
     line-height: 1.625;
-    margin: 0 0 1rem 0;
+    margin-block: 0 1rem;  /* Üst ve alt kenarlar */
+    margin-inline: 0;
 }
 
 .p-toast.p-toast-top-right,
@@ -92,5 +94,5 @@ button {
 }
 
 textarea {
-   resize: none;
-}
\ No newline at end of file
+    resize: none;
+}
diff --git a/apps/showcase/assets/styles/layout/_doc.scss b/apps/showcase/assets/styles/layout/_doc.scss
index 38ecd6a24..39fa88a40 100644
--- a/apps/showcase/assets/styles/layout/_doc.scss
+++ b/apps/showcase/assets/styles/layout/_doc.scss
@@ -38,7 +38,8 @@
             background-color: transparent;
             border: 0 none;
             display: block;
-            padding: 0 2rem 1rem 2rem;
+            padding-block: 0 1rem;  /* Üst ve alt kenarlar */
+            padding-inline: 2rem;
             text-align: center;
             color: var(--text-color);
             font-size: 1rem;
@@ -48,8 +49,8 @@
             transition: outline-color 0.2s, border-color 0.2s;
             outline-color: transparent;
             border-bottom: 1px solid transparent;
-            border-top-right-radius: 6px;
-            border-top-left-radius: 6px;
+            border-start-end-radius: 6px;
+            border-start-start-radius: 6px;
             white-space: nowrap;
             --p-focus-ring-offset: -1px;
             @include focus-visible();
@@ -114,7 +115,7 @@
     > a {
         color: var(--primary-text-color);
         opacity: 0.7;
-        margin-left: 1rem;
+        margin-inline-start: 1rem;
         display: none;
         transition: outline-color 0.2s, border-color 0.2s, opacity 0.2s;
         outline-color: transparent;
@@ -123,7 +124,7 @@
     }
 
     > .doc-section-label-badge {
-        margin-left: 0.5rem;
+        margin-inline-start: 0.5rem;
     }
 
     &:has(.doc-section-label-badge) {
@@ -177,8 +178,9 @@
     max-height: calc(100vh - 15rem);
     list-style: none;
     margin: 0;
-    padding: 0.25rem 0;
-    margin-left: 4rem;
+    padding-block: 0.25rem;
+    padding-inline: 0;
+    margin-inline-start: 4rem;
     overflow-y: auto;
     overflow-x: hidden;
     align-self: flex-start;
@@ -326,8 +328,9 @@
 
     th {
         border-bottom: 1px solid var(--border-color);
-        padding: .75rem 1rem;
-        text-align: left;
+        padding-block: .75rem;
+        padding-inline: 1rem;
+        text-align: start;
         text-transform: capitalize;
     }
 
@@ -337,7 +340,8 @@
         }
 
         td {
-            padding: .75rem 1rem;
+            padding-block: .75rem;
+            padding-inline: 1rem;
             border-bottom: 1px solid var(--border-color);
             white-space: pre-line;
             line-height: 1.5;
@@ -373,7 +377,8 @@
                 background-color: var(--mark-background);
                 color: var(--mark-text);
                 border-radius: 6px;
-                padding: 2px 6px;
+                padding-block: 2px;
+                padding-inline: 6px;
                 font-weight: 600;
                 font-style: normal;
                 white-space: nowrap;
@@ -410,7 +415,8 @@
                 border-width: 1px;
                 border-style: solid;
                 border-radius: 6px;
-                padding: 2px 6px;
+                padding-block: 2px;
+                padding-inline: 6px;
                 max-width: min-content;
                 border-color: var(--border-color);
                 background-color: var(--card-background);