@helpscout/hsds-react/components/Timeline/Timeline.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.TimelineItemUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _color = require("../../styles/utilities/color");

var itemPadding = 6;
var borderOffset = 4;
var borderWidth = 2;
var dotTotalSize = 10;
var dotBorderWidth = borderWidth;
var dotOffset = itemPadding + dotTotalSize / 2;
var timestampSize = 60;

var TimelineItemUI = _styledComponents.default.div.withConfig({
  displayName: "Timelinecss__TimelineItemUI",
  componentId: "sc-1auhcdz-0"
})(["display:block;line-height:1.5;margin-left:", "px;padding:", "px 0 ", "px 20px;position:relative;.c-TimelineItem__block{max-width:calc(100% - ", "px);}.c-TimelineItem__timestamp{min-width:", "px;opacity:0;transition:opacity 200ms linear;will-change:opacity;}&:hover{.c-TimelineItem__timestamp{opacity:1;}}&::before{background-color:", ";bottom:0;content:'';left:", "px;position:absolute;top:0;width:", "px;z-index:0;}&::after{background-color:white;border-radius:50%;border:", "px solid ", ";content:'';display:block;height:", "px;left:0;position:absolute;top:", "px;width:", "px;z-index:1;}&:first-child{&::before{bottom:0;top:", "px;}}&:last-child{&::before{bottom:calc(100% - ", "px);top:0;}}&:only-child{&::before{display:none;}}"], borderOffset, itemPadding, itemPadding, timestampSize, timestampSize, (0, _color.getColor)('grey.400'), borderOffset, borderWidth, dotBorderWidth, (0, _color.getColor)('grey.800'), dotTotalSize, dotOffset, dotTotalSize, dotOffset, dotOffset + dotTotalSize / 2);

exports.TimelineItemUI = TimelineItemUI;