RootZanli & NinjaCr3

: / home / o5t6x7pgljbm / public_html / admin_new2 / public / src / sass / pages /
Filename : widget-timeline.scss
back
@import 'variables.scss';
/* Timeline  */
  /* -------- */
  .widget-timeline {
    padding-left: 40px !important;

    li {
      padding: 1.1rem 0;
      list-style: none;
      position: relative;

      &.timeline-items {

        // timeline icon positioning
        &:before {
          position: absolute;
          content: "";
          left: -37px;
          top: 22px;
          border: 3px solid #fff;
          box-shadow: 1px 2px 6px 0 rgba(25, 42, 70, 0.3);
          border-radius: 50%;
          background: color("indigo", "base");
          height: 13px;
          width: 13px;
          z-index: 2;
        }

        &.active:not(:last-child) {

          // timeline line positioning
          &:after {
            position: absolute;
            content: "";
            width: 1px;
            background: color("grey", "lighten-2");
            left: -31px;
            top: 22px;
            height: 100%;
            z-index: 1;
          }
        }

        // timeline content visual
        .timeline-content {
          padding: 0.5rem 1rem;
          background-color: color("grey", "lighten-5");
          border-radius: 0.267rem;
          display: flex;
          align-items: center;
          font-weight: 700;
          font-size: 13px;
          color: color("grey", "base");
        }
      }

      // timeline time typograpgy
      .timeline-time {
        float: right;
        font-size: 0.75rem;
      }

      // timeline title typograpgy
      .timeline-title {
        margin-top: 0;
        margin-bottom: 0.25rem;
        color: $body-font-color;
      }

      // timeline text typograpgy
      .timeline-text {
        margin-bottom: 0.5rem;
        font-size: 0.75rem;
        color: color("grey", "base");
      }
    }
  }