@primer/view-components/app/components/primer/beta/timeline_item.css

ViewComponents for the Primer Design System

.TimelineItem{position:relative;display:flex;padding:var(--stack-padding-normal) 0;margin-left:var(--stack-gap-normal)}.TimelineItem:before{position:absolute;top:0;bottom:0;left:0;display:block;width:var(--borderWidth-thick);content:"";background-color:var(--borderColor-muted)}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis);box-shadow:0 0 .2em var(--borderColor-accent-muted)}.TimelineItem-badge{position:relative;z-index:1;display:flex;width:var(--control-medium-size);height:var(--control-medium-size);margin-right:var(--controlStack-medium-gap-condensed);margin-left:calc(var(--control-medium-size)/-2 + 1px);color:var(--fgColor-muted);align-items:center;background-color:var(--timelineBadge-bgColor);border:var(--borderWidth-thick) solid var(--bgColor-default);border-radius:50%;justify-content:center;flex-shrink:0}.TimelineItem-badge--success{color:var(--fgColor-onEmphasis);background-color:var(--bgColor-success-emphasis);border:var(--borderWidth-thin) solid #0000}.TimelineItem-body{min-width:0;max-width:100%;margin-top:calc(var(--base-size-4) + 1px);color:var(--fgColor-muted);flex:auto}.TimelineItem-avatar{position:absolute;left:-72px;z-index:1}.TimelineItem-break{position:relative;z-index:1;height:var(--stack-gap-spacious);margin:0;margin-bottom:calc(var(--stack-gap-normal)*-1);margin-left:-56px;background-color:var(--bgColor-default);border:0;border-top:var(--borderWidth-thicker) solid var(--borderColor-default)}.TimelineItem--condensed{padding-top:var(--base-size-4);padding-bottom:0}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal)}.TimelineItem--condensed .TimelineItem-badge{height:var(--base-size-16);margin-top:var(--base-size-8);margin-bottom:var(--base-size-8);color:var(--fgColor-muted);background-color:var(--bgColor-default);border:0}