From 3d19f3286a3126662a3a8d4f06636f39e1c32d95 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 11 Oct 2023 11:46:26 +0300
Subject: [PATCH] API Doc Cosmetics

---
 src/assets/showcase/styles/layout/_doc.scss | 113 +++++++++++++-------
 1 file changed, 75 insertions(+), 38 deletions(-)

diff --git a/src/assets/showcase/styles/layout/_doc.scss b/src/assets/showcase/styles/layout/_doc.scss
index e9d70aa91b8..594883d5f8a 100644
--- a/src/assets/showcase/styles/layout/_doc.scss
+++ b/src/assets/showcase/styles/layout/_doc.scss
@@ -180,11 +180,11 @@
                 overflow: hidden;
                 text-overflow: ellipsis;
                 transition: all .2s;
+            }
 
-                &:hover {
-                    .px-link {
-                        color: var(--surface-900);
-                    }
+            &:hover {
+                .px-link {
+                    color: var(--surface-900);
                 }
             }
         }
@@ -213,6 +213,17 @@
     }
 }
 
+.doc-section-code-buttons {
+    gap: .75rem;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+
+    .p-button-label {
+        font-weight: normal;
+        font-size: 0.875rem;
+    }
+}
+
 .doc-section-code-tooltip .p-tooltip-text {
     padding: 0.5rem;
     font-size: 11px;
@@ -225,24 +236,9 @@
         }
     }
 
-    .p-button-label {
-        font-weight: normal;
-        font-size: 0.875rem;
-    }
-
-    .doc-section-code-active {
-        .p-button-label {
-            font-weight: bold;
-        }
-    }
-
-    pre[class*=language-] {
+    pre {
         margin: 0;
     }
-}
-
-app-code {
-    display: block;
 
     &:not(:last-child) {
         margin-bottom: 1rem;
@@ -263,7 +259,7 @@ app-code {
 
     th {
         border-bottom: 1px solid var(--surface-border);
-        padding: .75rem;
+        padding: .75rem 1rem;
         text-align: left;
         text-transform: capitalize;
     }
@@ -274,37 +270,40 @@ app-code {
         }
 
         td {
-            padding: .75rem;
+            padding: .75rem 1rem;
             border-bottom: 1px solid var(--surface-border);
-            white-space: pre-wrap;
+            white-space: pre-line;
             line-height: 1.5;
+            scroll-margin-top: 6.5rem;
 
-            &.doc-option-type {
+            &:first-child {
+                color: var(--primary-color);
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+            }
+
+            .doc-option-type {
                 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
                 color: var(--primary-500);
+                font-weight: 500;
 
-                > a {
-                    color: var(--primary-500);
+                .doc-option-type-options-container {
+                    display: flex;
+                    align-items: center;
+                }
 
+                span.doc-option-type-options {
+                    color: var(--primary-700);
+                }
+
+                &.doc-option-link {
                     &:hover {
                         text-decoration: underline;
                     }
                 }
             }
 
-            &.doc-option-default {
-                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
-                color: var(--primary-color);
-            }
-
-            &:first-child {
-                color: var(--primary-color);
-                font-weight: 700;
-                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
-            }
-
             .doc-option-name,
-            > i {
+            > i:not(.pi) {
                 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
                 position: relative;
                 scroll-margin-top: 6.5rem;
@@ -314,6 +313,7 @@ app-code {
                 padding: 2px 6px;
                 font-weight: 600;
                 font-style: normal;
+                white-space: nowrap;
 
                 .doc-option-link {
                     position: absolute;
@@ -337,6 +337,43 @@ app-code {
                     }
                 }
             }
+
+            .doc-option-default,
+            .doc-option-returnType {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                font-weight: 400;
+                font-style: normal;
+                display: flex;
+                border-width: 1px;
+                border-style: solid;
+                border-radius: 6px;
+                padding: 2px 6px;
+                max-width: min-content;
+            }
+
+            .doc-option-parameter-name {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-700);
+            }
+
+            .doc-option-parameter-type {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-500);
+            }
+
+            .doc-option-params {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+            }
+
+            .doc-option-light {
+                background: var(--bluegray-50);
+                border-color: var(--bluegray-100);
+            }
+
+            .doc-option-dark {
+                background: var(--bluegray-800);
+                border-color: var(--bluegray-800);
+            }
         }
     }
 }