docusaurus-theme-openapi-docs 0.0.0-588 → 0.0.0-beta.617

package/lib/theme/ApiDemoPanel/FloatingButton/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
@@ -19,7 +18,7 @@ function FloatingButton({
   onClick,
   children
 }) {
-  return <div tabIndex={0} className={_stylesModule.default.floatingButton}>
+  return <div tabIndex={0} className="openapi-demo__floating-btn">
       {label && <button tabIndex={0} onClick={onClick}>
           {label}
         </button>}

package/lib/theme/ApiDemoPanel/FormFileUpload/{styles.module.css → _FormFileUpload.scss}

@@ -1,21 +1,31 @@
-.dropzone {
+.openapi-demo__dropzone {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border: 2px dashed var(--openapi-monaco-border-color);
-  /* border: 2px dashed var(--ifm-color-primary); */
   background-color: var(--openapi-input-background);
 
   width: 100%;
-  /* min-height: 120px; */
-  /* padding: 16px 11px; */
   border-radius: 4px;
   padding: var(--ifm-pre-padding);
   font-size: var(--ifm-code-font-size);
+
+  &:hover {
+    border: 2px dashed var(--ifm-color-primary);
+    background: linear-gradient(
+        var(--openapi-dropzone-hover-shim),
+        var(--openapi-dropzone-hover-shim)
+      ),
+      linear-gradient(var(--ifm-color-primary), var(--ifm-color-primary));
+
+    .openapi-demo__dropzone-content {
+      color: var(--ifm-pre-color);
+    }
+  }
 }
 
-.dropzoneHover {
+.openapi-demo__dropzone-hover {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -33,43 +43,30 @@
       var(--openapi-dropzone-hover-shim)
     ),
     linear-gradient(var(--ifm-color-primary), var(--ifm-color-primary));
-}
 
-.dropzone:hover {
-  border: 2px dashed var(--ifm-color-primary);
-  background: linear-gradient(
-      var(--openapi-dropzone-hover-shim),
-      var(--openapi-dropzone-hover-shim)
-    ),
-    linear-gradient(var(--ifm-color-primary), var(--ifm-color-primary));
-}
+  .openapi-demo__dropzone-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin: var(--ifm-pre-padding) 0;
+    color: var(--ifm-pre-color);
+  }
 
-.dropzoneContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin: var(--ifm-pre-padding) 0;
-  color: var(--openapi-dropzone-color);
+  .openapi-demo__file-name {
+    margin: 0 calc(var(--ifm-pre-padding) * 1.5);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
 }
 
-.dropzone:hover .dropzoneContent {
-  color: var(--ifm-pre-color);
-}
-
-.dropzoneHover .dropzoneContent {
+.openapi-demo__dropzone-content {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   margin: var(--ifm-pre-padding) 0;
-  color: var(--ifm-pre-color);
-}
-
-.filename {
-  margin: 0 calc(var(--ifm-pre-padding) * 1.5);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
+  color: var(--openapi-dropzone-color);
 }

package/lib/theme/ApiDemoPanel/FormFileUpload/index.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _FloatingButton = _interopRequireDefault(require("@theme/ApiDemoPanel/FloatingButton"));
 var _reactMagicDropzone = _interopRequireDefault(require("react-magic-dropzone"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -42,7 +41,7 @@ function RenderPreview({
             <path fillRule="evenodd" fill="#b3beca" d="M100.000,39.790 L100.000,105.000 C100.000,113.284 93.284,120.000 85.000,120.000 L15.000,120.000 C6.716,120.000 -0.000,113.284 -0.000,105.000 L-0.000,15.000 C-0.000,6.716 6.716,-0.000 15.000,-0.000 L60.210,-0.000 L100.000,39.790 Z" />
             <path fillRule="evenodd" fill="#90a1b1" transform="translate(60, 0)" d="M0.210,-0.000 L40.000,39.790 L40.000,40.000 L15.000,40.000 C6.716,40.000 0.000,33.284 0.000,25.000 L0.000,-0.000 L0.210,-0.000 Z" />
           </svg>
-          <div className={_stylesModule.default.filename}>{file.name}</div>
+          <div className="openapi-demo__file-name">{file.name}</div>
         </div>;
   }
 }
@@ -62,7 +61,7 @@ function FormFileUpload({
     setHover(false);
   }
   return <_FloatingButton.default>
-      <_reactMagicDropzone.default className={hover ? _stylesModule.default.dropzoneHover : _stylesModule.default.dropzone} onDrop={handleDrop} onDragEnter={() => setHover(true)} onDragLeave={() => setHover(false)} multiple={false} style={{
+      <_reactMagicDropzone.default className={hover ? "openapi-demo__dropzone-hover" : "openapi-demo__dropzone"} onDrop={handleDrop} onDragEnter={() => setHover(true)} onDragLeave={() => setHover(false)} multiple={false} style={{
       marginTop: "calc(var(--ifm-pre-padding) / 2)"
     }}>
         {file ? <>
@@ -75,7 +74,7 @@ function FormFileUpload({
               Clear
             </button>
             <RenderPreview file={file} />
-          </> : <div className={_stylesModule.default.dropzoneContent}>{placeholder}</div>}
+          </> : <div className="openapi-demo__dropzone-content">{placeholder}</div>}
       </_reactMagicDropzone.default>
     </_FloatingButton.default>;
 }

package/lib/theme/ApiDemoPanel/FormItem/_FormItem.scss

@@ -0,0 +1,12 @@
+.openapi-demo__form-item {
+  margin-top: var(--ifm-pre-padding);
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  .required {
+    font-size: var(--ifm-code-font-size);
+    color: var(--openapi-required);
+  }
+}

package/lib/theme/ApiDemoPanel/FormItem/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
@@ -20,7 +19,7 @@ function FormItem({
   required,
   children
 }) {
-  return <div className={_stylesModule.default.formItem}>
+  return <div className="openapi-demo__form-item">
       <code>{label}</code>
       {type && <span style={{
       opacity: 0.6
@@ -28,7 +27,7 @@ function FormItem({
       {required && <span>
           {" "}
           <small>
-            <strong className={_stylesModule.default.required}> required</strong>
+            <strong className="required"> required</strong>
           </small>
         </span>}
       <div>{children}</div>

package/lib/theme/ApiDemoPanel/FormMultiSelect/_FormMultiSelect.scss

@@ -0,0 +1,26 @@
+.openapi-demo__multi-select-input {
+  width: 100%;
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  padding: 12px var(--ifm-pre-padding);
+  border-radius: 4px;
+  border: 2px solid transparent;
+  background-color: var(--openapi-input-background);
+  outline: none;
+  font-size: var(--ifm-code-font-size);
+  color: var(--ifm-pre-color);
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &:focus {
+    border: 2px solid var(--openapi-input-border);
+  }
+
+  option {
+    border-radius: 0.25rem;
+    color: var(--ifm-menu-color);
+    margin: 0.25rem 0;
+    padding: var(--ifm-menu-link-padding-vertical)
+      var(--ifm-menu-link-padding-horizontal);
+  }
+}

package/lib/theme/ApiDemoPanel/FormMultiSelect/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
@@ -33,7 +32,7 @@ function FormMultiSelect({
   }
   return <select style={{
     height: height
-  }} className={_stylesModule.default.selectInput} value={value} onChange={onChange} size={Math.min(6, options.length + 1)} multiple>
+  }} className="openapi-demo__multi-select-input" value={value} onChange={onChange} size={Math.min(6, options.length + 1)} multiple>
       {options.map(option => {
       return <option key={option} value={option}>
             {option}

package/{lib-next/theme/ApiDemoPanel/FormSelect/styles.module.css → lib/theme/ApiDemoPanel/FormSelect/_FormSelect.scss}

@@ -1,27 +1,11 @@
-.inputBase {
+html[data-theme="dark"] .openapi-demo__select-input {
   margin-top: calc(var(--ifm-pre-padding) / 2);
-  /* height: 40px; */
   background-color: var(--openapi-input-background);
   border: none;
   outline: none;
   width: 100%;
   font-size: var(--ifm-code-font-size);
   color: var(--ifm-pre-color);
-  padding: 12px 48px 12px var(--ifm-pre-padding);
-
-  border-radius: 4px;
-}
-
-html[data-theme="dark"] .selectInput {
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  /* height: 40px; */
-  background-color: var(--openapi-input-background);
-  border: none;
-  outline: none;
-  width: 100%;
-  font-size: var(--ifm-code-font-size);
-  color: var(--ifm-pre-color);
-  /* padding: 12px var(--ifm-pre-padding); */
 
   border-radius: 4px;
   -moz-appearance: none;
@@ -34,8 +18,16 @@ html[data-theme="dark"] .selectInput {
   background-size: auto auto;
 }
 
-.selectInput {
-  composes: inputBase;
+.openapi-demo__select-input {
+  width: 100%;
+  margin-top: calc(var(--ifm-pre-padding) / 2);
+  padding: 12px 48px 12px var(--ifm-pre-padding);
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  background-color: var(--openapi-input-background);
+  font-size: var(--ifm-code-font-size);
+  color: var(--ifm-pre-color);
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
@@ -44,8 +36,8 @@ html[data-theme="dark"] .selectInput {
   background-repeat: no-repeat;
   background-position: right var(--ifm-pre-padding) top 50%;
   background-size: auto auto;
-}
 
-.selectInput:focus {
-  box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+  &:focus {
+    box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+  }
 }

package/lib/theme/ApiDemoPanel/FormSelect/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
@@ -22,7 +21,7 @@ function FormSelect({
   if (!Array.isArray(options) || options.length === 0) {
     return null;
   }
-  return <select className={_stylesModule.default.selectInput} value={value} onChange={onChange}>
+  return <select className="openapi-demo__select-input" value={value} onChange={onChange}>
       {options.map(option => {
       return <option key={option} value={option}>
             {option}

package/{lib-next/theme/ApiDemoPanel/FormTextInput/styles.module.css → lib/theme/ApiDemoPanel/FormTextInput/_FormTextInput.scss}

@@ -1,6 +1,5 @@
-.inputBase {
+.openapi-demo__input {
   margin-top: calc(var(--ifm-pre-padding) / 2);
-  /* height: 40px; */
   background-color: var(--openapi-input-background);
   border: none;
   outline: none;
@@ -8,14 +7,9 @@
   font-size: var(--ifm-code-font-size);
   color: var(--ifm-pre-color);
   padding: 12px var(--ifm-pre-padding);
-
   border-radius: 4px;
-}
-
-.input {
-  composes: inputBase;
-}
 
-.input:focus {
-  box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+  &:focus {
+    box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+  }
 }

package/lib/theme/ApiDemoPanel/FormTextInput/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
@@ -22,7 +21,7 @@ function FormTextInput({
 }) {
   var _placeholder;
   placeholder = (_placeholder = placeholder) === null || _placeholder === void 0 ? void 0 : _placeholder.split("\n")[0];
-  return <input className={_stylesModule.default.input} type={password ? "password" : "text"} placeholder={placeholder} title={placeholder} value={value} onChange={onChange} autoComplete="off" />;
+  return <input className="openapi-demo__input" type={password ? "password" : "text"} placeholder={placeholder} title={placeholder} value={value} onChange={onChange} autoComplete="off" />;
 }
 var _default = FormTextInput;
 exports.default = _default;

package/lib/theme/ApiDemoPanel/LiveEditor/_LiveEditor.scss

@@ -0,0 +1,15 @@
+.openapi-demo__playground-container {
+  margin-top: 1rem;
+  margin-bottom: var(--ifm-leading);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  overflow: auto;
+  max-height: 500px;
+}
+
+.openapi-demo__playground-editor {
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace) !important;
+  /* rtl:ignore */
+  direction: ltr;
+}

package/lib/theme/ApiDemoPanel/LiveEditor/index.js

@@ -9,7 +9,6 @@ var _themeCommon = require("@docusaurus/theme-common");
 var _useIsBrowser = _interopRequireDefault(require("@docusaurus/useIsBrowser"));
 var _slice = require("@theme/ApiDemoPanel/Body/slice");
 var _reactLive = require("react-live");
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -34,7 +33,7 @@ function Live({
     }
   };
   return <div onClick={() => setEditorDisabled(false)}>
-      <_reactLive.LiveEditor key={String(isBrowser)} className={_stylesModule.default.playgroundEditor} onChange={onEdit} disabled={editorDisabled} onKeyDown={handleKeydown} />
+      <_reactLive.LiveEditor key={String(isBrowser)} className="openapi-demo__playground-editor" onChange={onEdit} disabled={editorDisabled} onKeyDown={handleKeydown} />
     </div>;
 }
 const LiveComponent = (0, _reactLive.withLive)(Live);
@@ -51,7 +50,7 @@ function App({
   (0, _react.useEffect)(() => {
     action((0, _slice.setStringRawBody)(code));
   }, [action, code]);
-  return <div className={_stylesModule.default.playgroundContainer}>
+  return <div className="openapi-demo__playground-container">
       <_reactLive.LiveProvider code={children.replace(/\n$/, "")} transformCode={transformCode !== null && transformCode !== void 0 ? transformCode : code => `${code};`} theme={prismTheme} language={language} {...props}>
         <LiveComponent onEdit={setCode} />
       </_reactLive.LiveProvider>

package/lib/theme/ApiDemoPanel/MethodEndpoint/_MethodEndpoint.scss

@@ -0,0 +1,6 @@
+.openapi__method-endpoint {
+  max-width: 100%;
+  width: fit-content;
+  padding: 0.65rem;
+  border: 1px solid var(--ifm-toc-border-color);
+}

package/lib/theme/ApiDemoPanel/MethodEndpoint/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _BrowserOnly = _interopRequireDefault(require("@docusaurus/BrowserOnly"));
+var _hooks = require("../../ApiItem/hooks");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* ============================================================================
  * Copyright (c) Palo Alto Networks
@@ -13,9 +15,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-const methodStyle = {
-  borderRadius: "var(--ifm-global-radius)"
-};
 function colorForMethod(method) {
   switch (method.toLowerCase()) {
     case "get":
@@ -40,14 +39,34 @@ function MethodEndpoint({
   method,
   path
 }) {
-  return <pre style={{
-    background: "var(--openapi-card-background-color)",
-    borderRadius: "var(--openapi-card-border-radius)"
-  }}>
-      <span style={methodStyle} className={"badge badge--" + colorForMethod(method)}>
+  let serverValue = (0, _hooks.useTypedSelector)(state => state.server.value);
+  let serverUrlWithVariables = "";
+  const renderServerUrl = () => {
+    if (serverValue && serverValue.variables) {
+      serverUrlWithVariables = serverValue.url.replace(/\/$/, "");
+      Object.keys(serverValue.variables).forEach(variable => {
+        var _serverValue$variable, _serverValue$variable2;
+        serverUrlWithVariables = serverUrlWithVariables.replace(`{${variable}}`, (_serverValue$variable = (_serverValue$variable2 = serverValue.variables) === null || _serverValue$variable2 === void 0 ? void 0 : _serverValue$variable2[variable].default) !== null && _serverValue$variable !== void 0 ? _serverValue$variable : "");
+      });
+    }
+    return <_BrowserOnly.default>
+        {() => {
+        if (serverUrlWithVariables.length) {
+          return serverUrlWithVariables;
+        } else if (serverValue && serverValue.url) {
+          return serverValue.url;
+        }
+      }}
+      </_BrowserOnly.default>;
+  };
+  return <pre className="openapi__method-endpoint">
+      <span className={"badge badge--" + colorForMethod(method)}>
         {method.toUpperCase()}
       </span>{" "}
-      <span>{path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}</span>
+      <span>
+        {renderServerUrl()}
+        {`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
+      </span>
     </pre>;
 }
 var _default = MethodEndpoint;

package/{lib-next/theme/ApiDemoPanel/ParamOptions/styles.module.css → lib/theme/ApiDemoPanel/ParamOptions/_ParamOptions.scss}

@@ -1,25 +1,19 @@
-.plus {
+.openapi-demo__plus-btn--expanded {
   transition: transform 0.2s ease;
   display: inline-block;
   transform: rotate(0deg);
   transform-origin: center;
   margin-right: 6px;
-}
-
-.plusExpanded {
-  composes: plus;
   transform: rotate(45deg);
 }
 
-.showMoreButton {
+.openapi-demo__show-more-btn {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 
   cursor: pointer;
   font-size: var(--ifm-code-font-size);
-  /* font-weight: var(--ifm-button-font-weight); */
-  /* line-height: 1.5; */
 
   padding: 0;
 
@@ -38,24 +32,17 @@
   margin-top: var(--ifm-pre-padding);
   margin-bottom: 0;
   text-align: left;
-  display: block;
-}
 
-.showMoreButton:hover {
-  /* text-decoration: underline; */
-  /* background-color: red; */
-  color: var(--ifm-color-primary-hover);
-}
+  &:hover {
+    color: var(--ifm-color-primary-hover);
+  }
 
-.showMoreButton:first-child {
-  margin-top: 0;
+  &:first-child {
+    margin-top: 0;
+  }
 }
 
-/* .showMoreButton:last-child {
-  margin-bottom: 0;
-} */
-
-.buttonDelete {
+.openapi-demo__delete-btn {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -88,17 +75,17 @@
   color: var(--ifm-pre-color);
   border-radius: 4px;
   margin-left: 4px;
-}
 
-.buttonDelete:focus {
-  outline: 0;
-}
+  &:focus {
+    outline: 0;
+  }
 
-.buttonDelete:active {
-  box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+  &:active {
+    box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+  }
 }
 
-.buttonThin {
+.openapi-demo__thin-btn {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -127,50 +114,28 @@
   margin-bottom: var(--ifm-pre-padding);
 
   display: block;
-}
 
-.buttonThin:hover {
-  color: var(--openapi-inverse-color);
-  background-color: var(--openapi-input-border);
-}
+  &:hover {
+    color: var(--openapi-inverse-color);
+    background-color: var(--openapi-input-border);
+  }
 
-.buttonThin:focus {
-  outline: 0;
-}
-
-.buttonThin:active {
-  box-shadow: inset 0 0 0 1px var(--openapi-input-border),
-    inset 0 0 0 2px var(--openapi-inverse-color);
-}
-
-.inputBase {
-  margin-top: calc(var(--ifm-pre-padding) / 2);
-  /* height: 40px; */
-  background-color: var(--openapi-input-background);
-  border: none;
-  outline: none;
-  width: 100%;
-  font-size: var(--ifm-code-font-size);
-  color: var(--ifm-pre-color);
-  padding: 12px var(--ifm-pre-padding);
-
-  border-radius: 4px;
-}
-
-.input {
-  composes: inputBase;
-}
+  &:focus {
+    outline: 0;
+  }
 
-.input:focus {
-  box-shadow: inset 0px 0px 0px 2px var(--openapi-input-border);
+  &:active {
+    box-shadow: inset 0 0 0 1px var(--openapi-input-border),
+      inset 0 0 0 2px var(--openapi-inverse-color);
+  }
 }
 
-.showOptions {
+.openapi-demo__show-options {
   visibility: visible;
   margin-top: var(--ifm-pre-padding);
 }
 
-.hideOptions {
+.openapi-demo__hide-options {
   display: none;
   visibility: hidden;
 }