@redocly/theme/lib/layouts/CodeWalkthroughLayout.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeWalkthroughLayout = CodeWalkthroughLayout;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const core_1 = require("../core");
function CodeWalkthroughLayout({ className, children, }) {
    return (react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/CodeWalkthroughLayout", className: className },
        react_1.default.createElement(ContentWrapper, null, children)));
}
const LayoutWrapper = styled_components_1.default.div.attrs(({ className }) => ({
    className,
})) `
  display: flex;
  flex: 1;
  width: 100%;
`;
const ContentWrapper = styled_components_1.default.section `
  width: 100%;
  --md-content-font-size: var(--font-size-lg);
  --md-content-line-height: var(--line-height-lg);
  --md-table-font-size: var(--md-content-font-size);
  --md-table-line-height: var(--md-content-line-height);
  --md-tabs-content-font-size: var(--md-content-font-size);
  --md-tabs-content-line-height: var(--md-content-line-height);

  article {
    padding: var(--spacing-xl) 0;

    /* Spacing for elements preceding a code walkthrough */
    > :not(.code-walkthrough):has(+ .code-walkthrough) {
      margin-bottom: var(--spacing-xl);
    }

    /* Spacing for code walkthroughs not at the end */
    > .code-walkthrough:not(:last-child) {
      margin-bottom: var(--spacing-xl);
    }

    /* Layout constraints for direct children except .code-walkthrough */
    > :not(.code-walkthrough) {
      max-width: var(--md-content-max-width);
      padding-left: 0;
      padding-right: 0;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* Adjust padding for edge cases with .code-walkthrough */
    &:has(.code-walkthrough:first-child) {
      padding-top: 0;
    }

    &:has(.code-walkthrough:last-child) {
      padding-bottom: 0;
    }

    /* Full-width styling for all .code-walkthroughs */
    .code-walkthrough {
      width: 100%;
      max-width: ${core_1.breakpoints.max};
      margin-left: auto;
      margin-right: auto;
    }

    &:first-child > h1:first-child {
      // disable margin top for h1 on the title heading
      margin-top: 0;
    }
  }
`;
//# sourceMappingURL=CodeWalkthroughLayout.js.map