picocss/scss/components/_timeline.scss

@use "sass:string";
@use "sass:map";
@use "sass:math";
@use "../settings" as *; // for spacing, breakpoints, and if columns are defined.

@if map.get($modules, "components/timeline") {
  // The actual timeline (the vertical ruler)
  #{$parent-selector} .timeline {
    position: relative;
    max-width: 100%;
    margin: 0 auto;

    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 6px;
      margin-left: -3px;
      background-color: var(#{$css-var-prefix}timeline-line-color);
      content: "";
    }

    // Point around content
    > .point {
      position: relative;
      width: 50%;
      padding: 10px 25px;
      background-color: inherit;

      // circle
      &::after {
        z-index: 1;
        position: absolute;
        top: 13px;
        right: -13px;
        width: 25px;
        height: 25px;
        border: 4px solid var(#{$css-var-prefix}timeline-dot-border-color);
        border-radius: 50%;
        background-color: var(#{$css-var-prefix}timeline-dot-background-color);
        content: "";
      }

      // Place the container to the left
      &.left {
        left: 0;

        &::before {
          z-index: 1;
          position: absolute;
          top: 15px;
          right: 15px;
          width: 0;
          height: 0;
          border: medium solid var(#{$css-var-prefix}timeline-arrow-color);
          border-width: 10px 0 10px 10px;
          border-color: transparent
            transparent
            transparent
            var(#{$css-var-prefix}timeline-arrow-color);
          content: " ";
        }
      }

      // Place the container to the right
      &.right {
        left: 50%;

        &::before {
          z-index: 1;
          position: absolute;
          top: 15px;
          left: 15px;
          width: 0;
          height: 0;
          border: medium solid var(#{$css-var-prefix}timeline-arrow-color);
          border-width: 10px 10px 10px 0;
          border-color: transparent
            var(#{$css-var-prefix}timeline-arrow-color)
            transparent
            transparent;
          content: " ";
        }

        &::after {
          left: -13px;
        }
      }
    }
  }
  // Media queries - Responsive timeline on screens less than 600px wide
  @media screen and (max-width: 600px) {
    // Place the timelime to the left
    #{$parent-selector} .timeline {
      // the line
      &::after {
        left: 13px;
      }

      // after = dot
      // before = arrow
      > .point {
        // Full-width containers
        width: 100%;
        padding-right: 25px;
        padding-left: 40px;

        // Make all right containers behave like the left ones
        &.right {
          left: 0;
        }

        // after = dot
        &::after,
        &.left::after,
        &.right::after {
          left: 0;
        }

        // before = arrow
        // Make sure that all arrows are pointing leftwards
        // &::before,
        &.left::before,
        &.right::before {
          //left: 60px;
          top: 16px;
          left: 30px;
          border-width: 10px 10px 10px 0;
          border-color: transparent var(#{$css-var-prefix}timeline-arrow-color) transparent
            transparent;
        }
      }
    }
  }
}