UNPKG

@zendesk/react-measure-timing-hooks

Version:

react hooks for measuring time to interactive and time to render of components

73 lines 3.32 kB
"use strict"; 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