@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
38 lines (37 loc) • 1.29 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _responsive = require("@atlaskit/primitives/responsive");
/**
* Hoists slot dimension styles to the root element.
*/
var SlotDimensions = function SlotDimensions(_ref) {
var variableName = _ref.variableName,
value = _ref.value,
mobileValue = _ref.mobileValue;
/**
* Note don't put multiple variables in multiple lines. eg
* <style>
* {css1}
* {css2}
* </style>
*
* React will insert an empty HTML comment in between the text in SSR.
* This is not a valid tag and will break the page.
* <style>foo<!-- -->bar</style>
*/
var style = ":root{--".concat(variableName, ":").concat(value, "px;}");
if (mobileValue) {
style += " ".concat(_responsive.UNSAFE_media.below.sm, " { :root{--").concat(variableName, ":").concat(mobileValue, "px;} }");
}
return (
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles -- Ignored via go/DSP-18766
_react.default.createElement("style", null, style)
);
};
var _default = exports.default = SlotDimensions;