@zendesk/react-measure-timing-hooks
Version:
react hooks for measuring time to interactive and time to render of components
73 lines • 3.32 kB
JavaScript
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FooterContent = exports.Footer = exports.Title = exports.Header = exports.ScrollContainer = exports.Container = exports.TooltipContent = exports.TooltipTitle = exports.StyledTooltip = exports.StyledRect = void 0;
/* eslint-disable import/no-extraneous-dependencies */
const styled_components_1 = __importDefault(require("styled-components"));
const tooltip_1 = require("@visx/tooltip");
const react_theming_1 = require("@zendeskgarden/react-theming");
exports.StyledRect = styled_components_1.default.rect `
shape-rendering: geometricPrecision;
`;
exports.StyledTooltip = (0, styled_components_1.default)(tooltip_1.TooltipWithBounds) `
font-family: ${(props) => props.theme.fonts.system};
background-color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'background.raised' })};
color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'foreground.default' })};
border: ${(props) => props.theme.borders.sm};
border-color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'border.default' })};
border-radius: ${(props) => props.theme.borderRadii.md};
box-shadow: ${(props) => props.theme.shadows.lg('2px', '4px', (0, react_theming_1.getColor)({ theme: props.theme, variable: 'shadow.large' }))};
padding: ${(props) => props.theme.space.sm};
max-width: 400px;
max-height: 800px;
`;
exports.TooltipTitle = styled_components_1.default.strong `
font-weight: ${(props) => props.theme.fontWeights.semibold};
font-size: ${(props) => props.theme.fontSizes.md};
color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'foreground.primary' })};
`;
exports.TooltipContent = styled_components_1.default.div `
margin-top: ${(props) => props.theme.space.xs};
font-size: ${(props) => props.theme.fontSizes.sm};
opacity: 0.9;
`;
exports.Container = styled_components_1.default.div `
display: flex;
`;
exports.ScrollContainer = styled_components_1.default.div `
transition: all 0.2s ease-in-out;
height: 100%;
display: flex;
flex-direction: column;
`;
exports.Header = styled_components_1.default.header `
display: flex;
flex-direction: row;
padding: ${(props) => props.theme.space.xs};
z-index: 1;
`;
exports.Title = styled_components_1.default.h1 `
font-size: ${(props) => props.theme.fontSizes.xl};
color: ${(props) => props.theme.colors.neutralHue};
font-family: ${(props) => props.theme.fonts.system};
font-weight: ${(props) => props.theme.fontWeights.semibold};
`;
exports.Footer = styled_components_1.default.footer `
position: sticky;
bottom: 0;
align-self: flex-end;
background-color: ${(props) => (0, react_theming_1.getColor)({ theme: props.theme, variable: 'background.default' })};
height: ${(props) => props.height}px;
width: 100%;
`;
exports.FooterContent = styled_components_1.default.div `
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
gap: ${(props) => props.theme.space.md};
padding: 0 ${(props) => props.theme.space.md};
`;
//# sourceMappingURL=styled.js.map
;