@storybook/design-system
Version:
Storybook design system
183 lines (174 loc) • 8.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.FooterWrapper = exports.Lower = exports.Services = exports.Service = exports.HrWrapper = exports.Subscribe = exports.Column = exports.Colophon = exports.Text = exports.Upper = exports.UpperColumn = exports.Resource = exports.Meta = exports.ResourceAction = exports.ResourceDesc = exports.ResourceTitle = exports.Title = void 0;
var _theming = require("@storybook/theming");
var _Link = require("../../Link");
var _Subheading = require("../../Subheading");
var _styles = require("../../shared/styles");
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 Title = ( /*#__PURE__*/0, _theming.styled)(_Subheading.Subheading, process.env.NODE_ENV === "production" ? {
target: "e1nnss6w16"
} : {
target: "e1nnss6w16",
label: "Title"
})("display:block;font-size:", _styles.typography.size.s1, "px;margin-bottom:1rem;color:", _styles.color.mediumdark, ";");
exports.Title = Title;
var ResourceTitle = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w15"
} : {
target: "e1nnss6w15",
label: "ResourceTitle"
})("font-weight:", _styles.typography.weight.extrabold, ";margin-bottom:0.25rem;");
exports.ResourceTitle = ResourceTitle;
var ResourceDesc = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w14"
} : {
target: "e1nnss6w14",
label: "ResourceDesc"
})(process.env.NODE_ENV === "production" ? {
name: "6l27w5",
styles: "margin-bottom:0.25rem"
} : {
name: "6l27w5",
styles: "margin-bottom:0.25rem",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
exports.ResourceDesc = ResourceDesc;
var ResourceAction = ( /*#__PURE__*/0, _theming.styled)(_Link.Link, process.env.NODE_ENV === "production" ? {
target: "e1nnss6w13"
} : {
target: "e1nnss6w13",
label: "ResourceAction"
})(process.env.NODE_ENV === "production" ? {
name: "1rbuo2a",
styles: "margin-right:15px;text-transform:capitalize"
} : {
name: "1rbuo2a",
styles: "margin-right:15px;text-transform:capitalize",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
exports.ResourceAction = ResourceAction;
var Meta = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w12"
} : {
target: "e1nnss6w12",
label: "Meta"
})(process.env.NODE_ENV === "production" ? {
name: "d3v9zr",
styles: "overflow:hidden"
} : {
name: "d3v9zr",
styles: "overflow:hidden",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
exports.Meta = Meta;
var Resource = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w11"
} : {
target: "e1nnss6w11",
label: "Resource"
})("display:flex;align-items:start;&:not(:last-child){margin-bottom:2rem;}>svg{flex:0 0 auto;margin-right:20px;display:block;width:40px;height:auto;}@media (min-width: ", _styles.breakpoint * 1, "px){>svg{width:48px;}}");
exports.Resource = Resource;
var UpperColumn = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w10"
} : {
target: "e1nnss6w10",
label: "UpperColumn"
})("flex:1;padding-left:", _styles.spacing.padding.medium, "px;padding-right:", _styles.spacing.padding.medium, "px;padding-top:3rem;padding-bottom:3rem;&:last-child{border-top:1px solid ", _styles.color.border, ";}@media (min-width: ", _styles.breakpoint * 1, "px){&:first-child{margin-left:", _styles.pageMargin * 1, "%;padding-right:60px;}&:last-child{margin-right:", _styles.pageMargin * 1, "%;padding-left:60px;border-top:none;border-left:1px solid ", _styles.color.border, ";}}@media (min-width: ", _styles.breakpoint * 2, "px){&:first-child{margin-left:", _styles.pageMargin * 2, "%;}&:last-child{margin-right:", _styles.pageMargin * 2, "%;}}@media (min-width: ", _styles.breakpoint * 3, "px){&:first-child{margin-left:", _styles.pageMargin * 3, "%;}&:last-child{margin-right:", _styles.pageMargin * 3, "%;}}@media (min-width: ", _styles.breakpoint * 4, "px){&:first-child{margin-left:", _styles.pageMargin * 4, "%;}&:last-child{margin-right:", _styles.pageMargin * 4, "%;}}");
exports.UpperColumn = UpperColumn;
var Upper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w9"
} : {
target: "e1nnss6w9",
label: "Upper"
})("display:flex;flex-wrap:wrap;flex-direction:column;border-bottom:1px solid ", _styles.color.border, ";@media (min-width: ", _styles.breakpoint, "px){flex-direction:row;}");
exports.Upper = Upper;
var Text = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w8"
} : {
target: "e1nnss6w8",
label: "Text"
})("color:", _styles.color.darker, ";");
exports.Text = Text;
var Colophon = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w7"
} : {
target: "e1nnss6w7",
label: "Colophon"
})(process.env.NODE_ENV === "production" ? {
name: "wpehd8",
styles: "a{display:inline-block;vertical-align:top;}"
} : {
name: "wpehd8",
styles: "a{display:inline-block;vertical-align:top;}",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
exports.Colophon = Colophon;
var Column = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w6"
} : {
target: "e1nnss6w6",
label: "Column"
})(process.env.NODE_ENV === "production" ? {
name: "1y6wgcf",
styles: ">a{display:block;margin-bottom:0.75rem;}"
} : {
name: "1y6wgcf",
styles: ">a{display:block;margin-bottom:0.75rem;}",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
exports.Column = Column;
var Subscribe = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w5"
} : {
target: "e1nnss6w5",
label: "Subscribe"
})(Text, "{margin-bottom:1rem;}");
exports.Subscribe = Subscribe;
var HrWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w4"
} : {
target: "e1nnss6w4",
label: "HrWrapper"
})(_styles.pageMargins, ";hr{margin:0;}");
exports.HrWrapper = HrWrapper;
var _ref = process.env.NODE_ENV === "production" ? {
name: "gkbmnc",
styles: "svg{opacity:0.75;}"
} : {
name: "16qyi64-Service",
styles: "svg{opacity:0.75;};label:Service;",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
var Service = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w3"
} : {
target: "e1nnss6w3",
label: "Service"
})("&:not(:last-child){margin-bottom:1rem;}svg{height:22px;width:auto;display:inline-block;transition:all 150ms ease-out;}", function (props) {
return props.muteLogo && _ref;
}, " ", Text, "{margin-bottom:0.5rem;color:", _styles.color.mediumdark, ";}");
exports.Service = Service;
var Services = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w2"
} : {
target: "e1nnss6w2",
label: "Services"
})(_styles.pageMargins, ";padding-top:2rem;padding-bottom:1rem;display:flex;flex-wrap:wrap;@media (min-width: ", _styles.breakpoint, "px){justify-content:space-around;text-align:center;}", Service, "{flex:0 0 50%;@media (min-width: ", _styles.breakpoint, "px){", Service, "{}flex:1;}}a{display:inline-block;transition:all 150ms ease-out;transform:translate3d(0, 0, 0);&:hover{transform:translate3d(0, -2px, 0);}&:active{transform:translate3d(0, 0, 0);}}");
exports.Services = Services;
var Lower = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w1"
} : {
target: "e1nnss6w1",
label: "Lower"
})(_styles.pageMargins, ";padding-top:3rem;display:flex;flex-wrap:wrap;justify-content:space-between;", Colophon, "{width:100%;margin-bottom:3rem;display:block;@media (min-width: ", _styles.breakpoint * 1, "px){", Colophon, "{}margin-bottom:3rem;width:auto;max-width:200px;}}", Column, "{width:50%;margin-bottom:2.25rem;@media (min-width: ", _styles.breakpoint, "px){", Column, "{}padding-right:20px;width:auto;margin-bottom:2.25rem;}}", Subscribe, "{width:100%;margin-bottom:3rem;@media (min-width: ", _styles.breakpoint, "px){", Subscribe, "{}width:auto;margin-bottom:3rem;}}");
exports.Lower = Lower;
var FooterWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
target: "e1nnss6w0"
} : {
target: "e1nnss6w0",
label: "FooterWrapper"
})("background-color:", _styles.background.app, ";border-top:1px solid ", _styles.color.border, ";font-size:", _styles.typography.size.s2, "px;line-height:20px;");
exports.FooterWrapper = FooterWrapper;