smart-webcomponents/source/styles/default/smart.timeline.css

Web Components & Custom Elements for Professional Web Applications

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: 0px;
  padding-bottom: 20px;
  display: flex;
  align-items: flex-end;
}
smart-timeline.smart-timeline[horizontal] .smart-timeline-far-items {
  padding-left: 0px;
  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: 0px;
}
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-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%;
  right: 0px;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
  width: 16px;
  height: 16px;
  background: var(--smart-background);
  border: 1px solid var(--smart-border);
  display: block;
  right: 0px;
  position: absolute;
  margin-right: -16px;
  z-index: 9;
}
smart-timeline .smart-timeline-item-pointer::after {
  width: 16px;
  content: "";
  background: var(--smart-background);
  height: 16px;
  position: absolute;
  z-index: 9;
  right: 14px;
}
smart-timeline .smart-timeline-item-pointer::before {
  content: "";
  background: var(--smart-background);
  width: 16px;
  height: 16px;
  position: absolute;
  z-index: 9;
  top: 14px;
  right: inherit;
}
smart-timeline .smart-timeline-far-items .smart-timeline-item-pointer {
  right: inherit;
  left: 0px;
}
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: 0px;
}
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: 0px;
}
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 {
  border-width: 1px;
  border-style: solid;
  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;
}