@redocly/portal-legacy-ui/lib/Jumbotron.js

Library of legacy portal UI components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Jumbotron = void 0;
const styled_system_1 = require("styled-system");
const styled_components_1 = __importDefault(require("styled-components"));
const Background_1 = require("./Background");
const Typography_1 = require("./Typography");
exports.Jumbotron = (0, styled_components_1.default)(Background_1.Background).attrs(() => ({
    'data-component-name': 'ui/Jumbotron',
})) `
  flex-direction: column;
  padding-top: ${({ pt }) => pt || '0'};
  padding-bottom: ${({ pb }) => pb || '8em'};
  padding-left: ${({ pl }) => pl || '1rem'};
  padding-right: ${({ pr }) => pr || '1rem'};
  ${({ bgColor }) => bgColor && `background: ${bgColor}`};
  ${({ bgImage, bgColor }) => bgImage &&
    `
      background: ${bgColor || 'var(--text-color-primary)'} url(${bgImage});
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
  `};
  ${({ parallaxEffect }) => parallaxEffect &&
    `
      background-attachment: scroll, fixed;
  `};
  ${styled_system_1.space}
  ${Typography_1.H1}, ${Typography_1.H2} {
    color: ${({ textColor }) => textColor || 'var(--navbar-text-color)'};
    padding: 0;
  }
  h1 {
    font-size: 3.5em;
    line-height: 1.2;
    font-weight: var(--font-weight-bold);
    margin: 1.75em 0 0.5em 0;
    text-align: center;
  }
  h2 {
    font-size: 1.875em;
    line-height: 1;
    font-weight: var(--font-weight-regular);
    margin: 0;
    margin-bottom: 2em;
    text-align: center;
  }
`;
//# sourceMappingURL=Jumbotron.js.map