docusaurus-theme-openapi-docs 0.0.0-beta.655 → 0.0.0-beta.657

package/src/theme/ParamsItem/_ParamsItem.scss

@@ -19,14 +19,12 @@
     content: "";
     display: inline-block;
   }
-}
-
-.openapi-params__list-item:hover {
-  background-color: var(--ifm-menu-color-background-active);
-}
 
-.openapi-params__list-item:focus {
-  background-color: var(--ifm-menu-color-background-active);
+  &:hover {
+    .openapi-schema__property {
+      color: var(--ifm-color-primary);
+    }
+  }
 }
 
 .openapi-schema__type {
@@ -35,10 +33,14 @@
 }
 
 .openapi-schema__required {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10.5px;
+  font-weight: bold;
   color: var(--openapi-required);
   margin-left: 1%;
   background-color: transparent;
-  font-size: 10.5px;
+  text-transform: uppercase;
 }
 
 .openapi-schema__divider {

package/src/theme/ParamsItem/index.js

@@ -37,9 +37,7 @@ function ParamsItem({
   ));
 
   const renderSchemaRequired = guard(required, () => (
-    <span className="badge badge--danger openapi-schema__required">
-      required
-    </span>
+    <span className="openapi-schema__required">required</span>
   ));
 
   const renderSchema = guard(getQualifierMessage(schema), (message) => (
@@ -121,7 +119,7 @@ function ParamsItem({
   return (
     <div className="openapi-params__list-item">
       <span className="openapi-schema__container">
-        <strong>{name}</strong>
+        <strong className="openapi-schema__property">{name}</strong>
         {renderSchemaName}
         {required && <span className="openapi-schema__divider"></span>}
         {renderSchemaRequired}

package/src/theme/SchemaItem/_SchemaItem.scss

@@ -1,3 +1,11 @@
+.openapi-schema__container {
+  &:hover {
+    .openapi-schema__property {
+      color: var(--ifm-color-primary);
+    }
+  }
+}
+
 .openapi-schema__list-item {
   list-style: none;
   position: relative;
@@ -21,44 +29,54 @@
   }
 }
 
-.openapi-schema__list-item:hover {
-  background-color: var(--ifm-menu-color-background-active);
-}
-
-.openapi-schema__list-item:focus {
-  background-color: var(--ifm-menu-color-background-active);
-}
-
 .openapi-schema__name {
   opacity: 0.6;
   padding-left: 0.3rem;
 }
 
 .openapi-schema__required {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10.5px;
+  font-weight: bold;
+  text-transform: uppercase;
   color: var(--openapi-required);
   margin-left: 1%;
   background-color: transparent;
-  font-size: 10.5px;
 }
 
 .openapi-schema__deprecated {
+  display: flex;
+  align-items: center;
+  font-size: 10.5px;
+  font-weight: bold;
+  text-transform: uppercase;
   color: var(--openapi-deprecated);
   margin-left: 1%;
   background-color: transparent;
-  font-size: 10.5px;
 }
 
 .openapi-schema__nullable {
+  display: flex;
+  align-items: center;
+  font-size: 10.5px;
+  font-weight: bold;
+  text-transform: uppercase;
   color: var(--openapi-nullable);
   margin-left: 1%;
   background-color: transparent;
-  font-size: 10.5px;
 }
 
 .openapi-schema__strikethrough {
   text-decoration: line-through;
 }
 
+.openapi-schema__property {
+  margin-top: 1.25px;
+  font-family: var(--ifm-font-family-monospace);
+  transition: 300ms;
+}
+
 .openapi-schema__divider {
   flex-grow: 1;
   border-bottom: thin solid var(--ifm-toc-border-color);

package/src/theme/SchemaItem/index.js

@@ -9,6 +9,7 @@ import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
 /* eslint-disable import/no-extraneous-dependencies*/
+import clsx from "clsx";
 import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
 import { guard } from "docusaurus-theme-openapi-docs/lib/markdown/utils";
@@ -37,21 +38,15 @@ function SchemaItem({
 
   const renderRequired = guard(
     Array.isArray(required) ? required.includes(name) : required,
-    () => (
-      <span className="badge badge--danger openapi-schema__required">
-        required
-      </span>
-    )
+    () => <span className="openapi-schema__required">required</span>
   );
 
   const renderDeprecated = guard(deprecated, () => (
-    <span className="badge badge--warning openapi-schema__deprecated">
-      deprecated
-    </span>
+    <span className="openapi-schema__deprecated">deprecated</span>
   ));
 
   const renderNullable = guard(nullable, () => (
-    <span className="badge badge--info openapi-schema__nullable">nullable</span>
+    <span className="openapi-schema__nullable">nullable</span>
   ));
 
   const renderSchemaDescription = guard(schemaDescription, (description) => (
@@ -96,7 +91,11 @@ function SchemaItem({
   const schemaContent = (
     <div>
       <span className="openapi-schema__container">
-        <strong className={deprecated && "openapi-schema__strikethrough"}>
+        <strong
+          className={clsx("openapi-schema__property", {
+            "openapi-schema__strikethrough": deprecated,
+          })}
+        >
           {name}
         </strong>
         <span className="openapi-schema__name"> {schemaName}</span>

package/src/theme/SchemaTabs/_SchemaTabs.scss

@@ -5,30 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.openapi-tabs__schema-container {
+  margin-top: 1rem;
+}
+
 .openapi-tabs__schema-item {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 1.8rem;
+  padding: 0.35rem 0.7rem;
+  border: 1px solid transparent;
   margin-top: 0 !important;
   margin-right: 0.5rem;
-  border: 1px solid var(--ifm-color-primary);
-  border-radius: var(--ifm-global-radius);
-  color: var(--ifm-color-primary);
-  font-size: 12px;
-}
+  font-weight: var(--ifm-font-weight-bold);
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 10px;
+  white-space: nowrap;
+  transition: 300ms;
 
-.openapi-tabs__schema-item:not(.active) {
-  opacity: 0.65;
-}
+  &:hover {
+    background-color: transparent;
+    border: 1px solid var(--ifm-toc-border-color);
+  }
 
-.openapi-tabs__schema-item:hover {
-  opacity: 1;
-  background-color: var(--ifm-color-emphasis-100);
-}
+  &.active {
+    border: 1px solid var(--ifm-color-primary);
+    color: var(--ifm-color-primary);
+  }
 
-.openapi-tabs__schema-item:last-child {
-  margin-right: 0 !important;
+  &:last-child {
+    margin-right: 0 !important;
+  }
 }
 
 .openapi-tabs__schema-list-container {
@@ -49,7 +56,7 @@
   white-space: nowrap;
 }
 
-.openapi-tabs__schema-container {
+.openapi-tabs__schema-tabs-container {
   width: 100%;
   display: flex;
   align-items: center;

package/src/theme/SchemaTabs/index.js

@@ -81,60 +81,56 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
   };
 
   return (
-    <div className="tabs__container">
-      <div className="openapi-tabs__schema-container">
-        {showTabArrows && (
-          <button
-            className="openapi-tabs__arrow left"
-            onClick={handleLeftClick}
-          />
-        )}
-        <ul
-          ref={tabItemListContainerRef}
-          role="tablist"
-          aria-orientation="horizontal"
-          className={clsx(
-            "openapi-tabs__schema-list-container",
-            "tabs",
-            {
-              "tabs--block": block,
-            },
-            className
-          )}
-        >
-          {tabValues.map(({ value, label, attributes }) => (
-            <li
-              // TODO extract TabListItem
-              role="tab"
-              tabIndex={selectedValue === value ? 0 : -1}
-              aria-selected={selectedValue === value}
-              key={value}
-              ref={(tabControl) => tabRefs.push(tabControl)}
-              onKeyDown={handleKeydown}
-              onClick={handleTabChange}
-              {...attributes}
-              className={clsx(
-                "tabs__item",
-                "openapi-tabs__schema-item",
-                attributes?.className,
-                {
-                  active: selectedValue === value,
-                }
-              )}
-            >
-              <span className="openapi-tabs__schema-label">
-                {label ?? value}
-              </span>
-            </li>
-          ))}
-        </ul>
-        {showTabArrows && (
-          <button
-            className="openapi-tabs__arrow right"
-            onClick={handleRightClick}
-          />
+    <div className="openapi-tabs__schema-tabs-container">
+      {showTabArrows && (
+        <button
+          className="openapi-tabs__arrow left"
+          onClick={handleLeftClick}
+        />
+      )}
+      <ul
+        ref={tabItemListContainerRef}
+        role="tablist"
+        aria-orientation="horizontal"
+        className={clsx(
+          "openapi-tabs__schema-list-container",
+          "tabs",
+          {
+            "tabs--block": block,
+          },
+          className
         )}
-      </div>
+      >
+        {tabValues.map(({ value, label, attributes }) => (
+          <li
+            // TODO extract TabListItem
+            role="tab"
+            tabIndex={selectedValue === value ? 0 : -1}
+            aria-selected={selectedValue === value}
+            key={value}
+            ref={(tabControl) => tabRefs.push(tabControl)}
+            onKeyDown={handleKeydown}
+            onClick={handleTabChange}
+            {...attributes}
+            className={clsx(
+              "tabs__item",
+              "openapi-tabs__schema-item",
+              attributes?.className,
+              {
+                active: selectedValue === value,
+              }
+            )}
+          >
+            <span className="openapi-tabs__schema-label">{label ?? value}</span>
+          </li>
+        ))}
+      </ul>
+      {showTabArrows && (
+        <button
+          className="openapi-tabs__arrow right"
+          onClick={handleRightClick}
+        />
+      )}
     </div>
   );
 }
@@ -167,7 +163,7 @@ function TabContent({ lazy, children, selectedValue }) {
 function TabsComponent(props) {
   const tabs = useTabs(props);
   return (
-    <div className="tabs-container">
+    <div className="openapi-tabs__schema-container">
       <TabList {...props} {...tabs} />
       <TabContent {...props} {...tabs} />
     </div>

package/src/theme/styles.scss

@@ -151,5 +151,10 @@
 }
 
 .openapi__heading {
-  font-size: var(--ifm-h1-font-size);
+  font-size: 2rem;
+  margin-bottom: 0.5rem !important;
+}
+
+.openapi-left-panel__container {
+  border-right: thin solid var(--ifm-toc-border-color);
 }