smart-webcomponents-angular/source/styles/components/smart.timeline.css

[](https://jqwidgets.com/license/)

smart-timeline{overflow:hidden;padding:10px;font-family:var(--smart-font-family);display:block}smart-timeline .smart-container{position:relative;overflow:hidden;display:flex}smart-timeline .smart-timeline-near-items{padding-right:20px;position:relative}smart-timeline .smart-timeline-far-items{padding-left:20px;position:relative}smart-timeline.smart-timeline[horizontal] .smart-container{flex-direction:column}smart-timeline.smart-timeline[horizontal] .smart-timeline-near-items{padding-right:0;padding-bottom:20px;display:flex;align-items:flex-end}smart-timeline.smart-timeline[horizontal] .smart-timeline-far-items{padding-left:0;padding-top:20px;display:flex}smart-timeline .smart-timeline-item{display:flex;align-items:center;justify-content:flex-end;padding-block:20px;padding-inline:0;position:relative}smart-timeline.smart-timeline[horizontal] .smart-timeline-item{display:block;padding-block:0}smart-timeline .smart-timeline-item[collapsible]{cursor:pointer}smart-timeline .smart-timeline-item-icon{width:20px;height:20px;margin-right:10px}smart-timeline .smart-timeline-item-pointer,smart-timeline .smart-timeline-item-pointer::after,smart-timeline .smart-timeline-item-pointer::before{content:"";background:var(--smart-background);width:16px;height:16px;z-index:9}smart-timeline .smart-timeline-item-content{background:var(--smart-background);border:1px solid var(--smart-border);padding:20px;border-radius:var(--smart-border-radius);position:relative}smart-timeline .smart-timeline-item-pointer{top:50%;transform:translate(-50%,-50%) rotate(45deg);border:1px solid var(--smart-border);display:block;right:0;position:absolute;margin-right:-16px}smart-timeline .smart-timeline-item-pointer::after{position:absolute;right:14px}smart-timeline .smart-timeline-item-pointer::before{position:absolute;top:14px;right:inherit}smart-timeline .smart-timeline-far-items .smart-timeline-item-pointer{right:inherit;left:0}smart-timeline .smart-timeline-far-items .smart-timeline-item-pointer::before{right:unset;left:14px;top:-2px}smart-timeline .smart-timeline-far-items .smart-timeline-item-pointer::after{top:-16px;right:-2px}smart-timeline.smart-timeline[horizontal] .smart-timeline-item-pointer{left:50%;top:0}smart-timeline.smart-timeline[horizontal] .smart-timeline-near-items .smart-timeline-item-pointer{left:50%;bottom:-16px;top:unset}smart-timeline .smart-timeline-far-items .smart-timeline-item{justify-content:flex-start}smart-timeline .smart-timeline-far-items .smart-timeline-item-content{padding-left:20px;padding-right:20px}smart-timeline.smart-timeline[horizontal] .smart-timeline-far-items .smart-timeline-item-pointer::after{top:unset}smart-timeline.smart-timeline[horizontal] .smart-timeline-far-items .smart-timeline-item-pointer::before{top:0}smart-timeline.smart-timeline[horizontal] .smart-timeline-near-items .smart-timeline-item-pointer::before{top:-16px}smart-timeline.smart-timeline[horizontal] .smart-timeline-near-items .smart-timeline-item-pointer::after{left:-16px;top:-2px}smart-timeline .smart-timeline-item-title{font-size:16px;font-weight:400}smart-timeline .smart-timeline-item .smart-timeline-item-description{display:none;margin-top:20px}smart-timeline .smart-timeline-item.expanded .smart-timeline-item-description{display:block}smart-timeline .smart-timeline-item[collapsible].expanded .smart-timeline-item-title::after{content:var(--smart-icon-arrow-down)}smart-timeline .smart-timeline-item[collapsible] .smart-timeline-item-title::after{content:var(--smart-icon-arrow-right);display:inline;width:100%;height:1px;font-family:var(--smart-font-family-icon);margin-top:10px;cursor:pointer}smart-timeline .smart-timeline-item-subtitle{font-size:12px;font-weight:400}smart-timeline .smart-timeline-track{width:6px;border-radius:6px;background:var(--smart-surface);border:1px solid var(--smart-border);display:flex;align-items:center;flex-direction:column}smart-timeline.smart-timeline[horizontal] .smart-timeline-track{width:100%;height:6px}smart-timeline .smart-timeline-near-items .smart-timeline-item-date{right:20px}smart-timeline .smart-timeline-far-items .smart-timeline-item-date{left:20px}smart-timeline.smart-timeline[horizontal] .smart-timeline-near-items .smart-timeline-item-date{right:unset;bottom:20px}smart-timeline.smart-timeline[horizontal] .smart-timeline-far-items .smart-timeline-item-date{left:unset;top:20px}smart-timeline .smart-timeline-item-date{position:absolute;margin-top:3px}smart-timeline .smart-timeline-dot{width:16px;height:16px;margin-top:4px;border-radius:50%;position:absolute;z-index:1;background:var(--smart-primary)}smart-timeline.smart-timeline[horizontal] .smart-timeline-dot{margin-top:-6px}