@pi0/framework7/src/components/timeline/timeline-ios.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Timeline iOS === */
.ios {
  @import (multiple) '../../less/colors-ios.less';
  @import (multiple) '../../less/vars-ios.less';
  .timeline {
    margin: 35px 0;
    padding: 0 15px;
  }
  .block-strong .timeline {
    padding: 0;
    margin: 0;
  }
  .timeline-item {
    padding: 2px 0px 15px;
    &:last-child {
      padding-bottom: 2px;
    }
  }
  .timeline-item-content {
    .card, .list, .block {
      + .card, + .list, + .block {
        margin: 15px 0 0;
      }
    }
    .card, &.card, .list, &.list, .block, &.block {
      margin: 0;
      width: 100%;
    }
  }
  .timeline-item-inner {
    border-radius: 7px;
    padding: 8px 15px;
    + .timeline-item-inner {
      margin-top: 15px;
    }
  }
  .block-strong .timeline-item-inner {
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
  }
  .timeline-item-divider {
    margin-left: 15px;
    margin-right: 15px;
  }
  .timeline-item-time {
    margin-top: 15px;
    color: #6d6d72;
    &:first-child, &:last-child {
      margin-top: 0;
    }
  }
  .timeline-item-title {
    font-size: 17px;
    font-weight: 600;
  }
  .timeline-item-subtitle {
    font-size: 15px;
  }
  .timelineItemLeft() {
    flex-direction: row-reverse;
    .ltr({
      margin-right: ~"calc(50% - (30px + 10px) / 2 - 50px)";
      margin-left: 0;
      .timeline-item-date {
        text-align: left;
      }
    });
    .rtl({
      margin-left: ~"calc(50% - (30px + 10px) / 2 - 50px)";
      margin-right: 0;
      .timeline-item-date {
        text-align: right;
      }
    });
  }
  .timelineItemRight() {
    .ltr({
      margin-left: ~"calc(50% - (30px + 10px) / 2 - 50px)";
      margin-right: 0;
      .timeline-item-date {
        text-align: right;
      }
    });
    .rtl({
      margin-right: ~"calc(50% - (30px + 10px) / 2 - 50px)";
      margin-left: 0;
      .timeline-item-date {
        text-align: left;
      }
    });
  }
  .timeline-sides {
    .timeline-item {
      .timelineItemRight();
      &:not(.timeline-item-right):nth-child(2n) {
        .timelineItemLeft();
      }
    }
    .timeline-item-left {
      .timelineItemLeft()
    }
    .timeline-item-right {
      .timelineItemRight();
    }
  }
  @media (min-width:768px) {
    .tablet-sides {
      .timeline-sides;
    }
  }
  .timeline-horizontal {
    padding: 0;
    margin: 0;
    .timeline-item {
      padding-top: 34px !important;
      padding-bottom: 10px;
    }
    .timeline-month:last-child .timeline-item:last-child {
      .hairline-remove(right);
    }
    .timeline-item-date {
      background: @barsBg;
      padding: 0px 10px;
    }
    .timeline-item-content {
      padding: 10px;
      height: ~"calc(100% - 10px)";
    }
  }
  .hairline-root('.timeline-horizontal .timeline-item-date', bottom, @barsBorderColor);
  .hairline-root('.timeline-horizontal .timeline-month .timeline-item', top, @barsBorderColor);
  .hairline-root('.timeline-horizontal .timeline-item', right, @barsBorderColor);
  .hairline-root('.timeline-horizontal .timeline-year', right, @barsBorderColor);
  .timeline-year {
    &:last-child {
      .hairline-remove(right);
    }
  }
  .timeline-year-title, .timeline-month-title {
    padding: 0 10px;
    background: @barsBg;
    span {
      .ltr({
        left: 10px;
      });
      .rtl({
        right: 10px;
      });
    }
  }
  .timeline-year-title {
    span {
      margin-top: 3px;
    }
  }
}