framework7/components/timeline/timeline-md.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Timeline MD === */
.md {
  @import (multiple) '../../less/colors-md.less';
  @import (multiple) '../../less/vars-md.less';
  .timeline {
    margin: 32px 0;
    padding: 0 16px;
  }
  .block-strong .timeline {
    padding: 0;
    margin: 0;
  }
  .timeline-item {
    padding: 2px 0px 16px;
    &:last-child {
      padding-bottom: 2px;
    }
  }
  .timeline-item-content {
    .card, &.card, .list, &.list, .block, &.block {
      margin: 0;
      width: 100%;
    }
    .card, .list, .block {
      + .card, + .list, + .block {
        margin: 16px 0 0;
      }
    }
  }
  .timeline-item-inner {
    border-radius: 2px;
    padding: 8px 16px;
    .md-depth(1);
    + .timeline-item-inner {
      margin-top: 16px;
    }
  }
  .timeline-item-divider {
    margin-left: 16px;
    margin-right: 16px;
  }
  .timeline-item-time {
    margin-top: 16px;
    color: rgba(0, 0, 0, 0.54);
    &:first-child {
      margin-top: 0;
    }
  }
  .timeline-item-title {
    font-size: 16px;
  }
  .timelineItemLeft() {
    flex-direction: row-reverse;
    .ltr({
      margin-right: ~"calc(50% - (32px + 10px) / 2 - 50px)";
      margin-left: 0;
      .timeline-item-date {
        text-align: left;
      }
    });
    .rtl({
      margin-left: ~"calc(50% - (32px + 10px) / 2 - 50px)";
      margin-right: 0;
      .timeline-item-date {
        text-align: right;
      }
    });
  }
  .timelineItemRight() {
    .ltr({
      margin-left: ~"calc(50% - (32px + 10px) / 2 - 50px)";
      margin-right: 0;
      .timeline-item-date {
        text-align: right;
      }
    });
    .rtl({
      margin-right: ~"calc(50% - (32px + 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;
    position: relative;
    .timeline-item {
      padding-top: 34px !important;
      padding-bottom: 12px;
    }
    .timeline-item-date {
      background: @themeColor;
      padding: 0px 12px;
      color: #fff;
      .md-bar-shadow-to-bottom();
    }
    .timeline-item-content {
      padding: 12px;
      height: ~"calc(100% - 12px)";
    }
    &.no-shadow {
      .timeline-item-date {
        .md-bar-no-shadow();
      }
    }
  }
  .hairline-root('.timeline-horizontal .timeline-item', right, rgba(0,0,0,.12));
  .hairline-root('.timeline-horizontal .timeline-item', top, rgba(0,0,0,.12));
  .timeline-year-title, .timeline-month-title {
    padding: 0 12px;
    color: #fff;
    background: @themeColor;

    span {
      .ltr({
        left: 12px;
      });
      .rtl({
        right: 12px;
      });
    }
  }
  .timeline-year-title {
    span {
      margin-top: 2px;
    }
  }

  .safe-areas-landscape({
    .safe-area-left({
      .timeline-horizontal:not(.no-ios-edges):not(.no-ios-left-edge) {
        padding-left: constant(safe-area-inset-left);
        padding-left: env(safe-area-inset-left);
        .timeline-year-title,
        .timeline-month-title {
          span {
            left: ~"calc(12px + constant(safe-area-inset-left))";;
            left: ~"calc(12px + env(safe-area-inset-left))";;
          }
        }

        .timeline-year:first-child .timeline-year-title,
        .timeline-year:first-child .timeline-month:first-child .timeline-month-title,
        .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
          left: -44px;
          right: 0;
          width: auto;
        }
        > .timeline-item:first-child,
        .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
        .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
        .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item {
          overflow: visible;
          .timeline-item-date {
            width: auto;
            padding-left: ~"calc(12px + constant(safe-area-inset-left))";
            padding-left: ~"calc(12px + env(safe-area-inset-left))";
            left: ~"calc(0px - constant(safe-area-inset-left))";
            left: ~"calc(0px - env(safe-area-inset-left))";
            right: 0;
          }
        }
      }
      .timeline:not(.no-ios-edges):not(.no-ios-left-edge):not(.timeline-horizontal) {
        padding-left: ~"calc(16px + constant(safe-area-inset-left))";
        padding-left: ~"calc(16px + env(safe-area-inset-left))";
      }
    });
    .safe-area-right({
      .timeline-horizontal:not(.no-ios-edges):not(.no-ios-right-edge) {
        .timeline-year:last-child .timeline-year-title,
        .timeline-year:last-child .timeline-month:last-child .timeline-month-title {
          width: auto;
          right: ~"calc(0px - constant(safe-area-inset-right))";
          right: ~"calc(0px - env(safe-area-inset-right))";
        }
        > .timeline-item:last-child,
        .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
          overflow: visible;
          .timeline-item-date {
            width: auto;
            right: ~"calc(0px - constant(safe-area-inset-right))";
            right: ~"calc(0px - env(safe-area-inset-right))";
            left: 0;
          }
        }
      }
      .timeline:not(.no-ios-edges):not(.no-ios-right-edge):not(.timeline-horizontal) {
        padding-right: ~"calc(16px + constant(safe-area-inset-right))";
        padding-right: ~"calc(16px + env(safe-area-inset-right))";
      }
    });
  });

  // Dark Theme
  & when (@includeDarkTheme) {
    .theme-dark {
      .timeline-item-inner {
        background-color: @blockBgDark;
      }
      .timeline-item-time {
        color: rgba(255,255,255,0.54);
      }
    }
  }

  .color-theme-loop({
    .color-theme-@{colorThemeName} {
      .timeline-item-date, .timeline-year-title, .timeline-month-title {
        background: @colorThemeValue;
      }
    }
  });
  .color-loop({
    .timeline.color-theme-@{colorName} {
      .timeline-item-date, .timeline-year-title, .timeline-month-title {
        background: @colorValue;
      }
    }
  });
}