@storybook/design-system/dist/components/marketing/DisplayCard/DisplayCard.styles.js

Storybook design system

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Authors = exports.Stats = exports.Meta = exports.Spacer = exports.Info = exports.Description = exports.Title = exports.Image = exports.CardWrapper = void 0;

var _theming = require("@storybook/theming");

var _animation = require("../../shared/animation");

var _styles = require("../../shared/styles");

var _Cardinal = require("../../Cardinal");

var _AvatarList = require("../../AvatarList");

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var CardWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e8iao7s8"
} : {
  target: "e8iao7s8",
  label: "CardWrapper"
})(_styles.hoverEffect, " display:flex;flex-direction:column;padding:", _styles.spacing.padding.medium, "px ", _styles.spacing.padding.medium, "px 0;text-decoration:none;position:relative;@media (min-width: ", _styles.breakpoint * 1.5, "px){padding:", _styles.spacing.padding.medium, "px;", function (props) {
  return props.orientation === 'horizontal' && "\n        flex-direction: row;\n        align-items: center;\n      ";
}, ";}");
exports.CardWrapper = CardWrapper;
var Image = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e8iao7s7"
} : {
  target: "e8iao7s7",
  label: "Image"
})("display:block;flex:none;width:48px;height:48px;margin-right:", _styles.spacing.padding.medium, "px;", function (props) {
  return props.src && /*#__PURE__*/(0, _theming.css)("background-image:url(", props.src, ");background-size:contain;background-position:center;background-repeat:no-repeat;" + (process.env.NODE_ENV === "production" ? "" : ";label:Image;"));
}, " ", function (props) {
  return props.isLoading && /*#__PURE__*/(0, _theming.css)(_animation.inlineGlow, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Image;"));
}, "@media (min-width: ", _styles.breakpoint * 1.5, "px){width:64px;height:64px;", function (props) {
  return props.orientation === 'vertical' && "\n        margin-bottom: 16px;\n      ";
}, ";}");
exports.Image = Image;
var Title = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e8iao7s6"
} : {
  target: "e8iao7s6",
  label: "Title"
})("font-weight:", _styles.typography.weight.black, ";font-size:", _styles.typography.size.s3, "px;line-height:", _styles.typography.size.m2, "px;color:", _styles.color.darker, ";display:flex;align-items:center;position:relative;", function (props) {
  return props.isLoading && /*#__PURE__*/(0, _theming.css)("line-height:", _styles.typography.size.m1, "px;span{", _animation.inlineGlow, " margin-bottom:8px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:Title;"));
}, ";");
exports.Title = Title;
var Description = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e8iao7s5"
} : {
  target: "e8iao7s5",
  label: "Description"
})("font-size:", _styles.typography.size.s2, "px;line-height:", _styles.typography.size.m1, "px;color:", _styles.color.darkest, ";position:relative;", function (props) {
  return props.isLoading && /*#__PURE__*/(0, _theming.css)("line-height:", _styles.typography.size.s3, "px;span{", _animation.inlineGlow, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Description;"));
}, ";");
exports.Description = Description;
var Info = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e8iao7s4"
} : {
  target: "e8iao7s4",
  label: "Info"
})("display:flex;align-items:flex-start;@media (min-width: ", _styles.breakpoint * 1.5, "px){", function (props) {
  return props.orientation === 'horizontal' && "\n        align-items: center;\n        margin-right: ".concat(_styles.spacing.padding.large, "px;\n      ");
}, " ", function (props) {
  return props.orientation === 'vertical' && "\n        display: block;\n        margin-bottom: ".concat(_styles.spacing.padding.medium, "px;\n      ");
}, ";}");
exports.Info = Info;
var Spacer = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e8iao7s3"
} : {
  target: "e8iao7s3",
  label: "Spacer"
})("border-top:1px solid ", _styles.color.border, ";margin-top:", _styles.spacing.padding.large, "px;@media (min-width: ", _styles.breakpoint * 1.5, "px){flex:1 1 auto;min-width:0;margin:0;border:0;}");
exports.Spacer = Spacer;
var Meta = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e8iao7s2"
} : {
  target: "e8iao7s2",
  label: "Meta"
})("display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;@media (min-width: ", _styles.breakpoint * 1.5, "px){padding:0;}");
exports.Meta = Meta;
var Stats = ( /*#__PURE__*/0, _theming.styled)(_Cardinal.Cardinal, process.env.NODE_ENV === "production" ? {
  target: "e8iao7s1"
} : {
  target: "e8iao7s1",
  label: "Stats"
})("padding:0;margin-right:", _styles.spacing.padding.large, "px;");
exports.Stats = Stats;
var Authors = ( /*#__PURE__*/0, _theming.styled)(_AvatarList.AvatarList, process.env.NODE_ENV === "production" ? {
  target: "e8iao7s0"
} : {
  target: "e8iao7s0",
  label: "Authors"
})(process.env.NODE_ENV === "production" ? {
  name: "dolt8o",
  styles: "min-width:95.5px"
} : {
  name: "dolt8o",
  styles: "min-width:95.5px",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
exports.Authors = Authors;