@atlaskit/page-layout
Version:
A collection of components which let you compose an application's page layout.
31 lines • 1.04 kB
JavaScript
import React from 'react';
import { UNSAFE_media } from '@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(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.createElement("style", null, style)
);
};
export default SlotDimensions;