#2699: History.module.scss

Code Structure

CSS Rules (14): .entry, .active, .icon, .icon, .username, .comment, .editComment, .changesAmount, .modifiedAt, .Insert, .Update, .Delete, .details, .detail

Imports: ../../../../assets/style/mixins

Include uses: transform, transition

Source Code (abridged)

@import '../../../../assets/style/mixins';

div.entry {
  border-bottom: 1px solid #ddd;
  padding: 5px;
  cursor: default;

  &.active {
    .icon {
      @include transform(rotate(90deg));
    }
  }

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background-color: #f0f0f0;
  }

  .icon {
    display: inline-block;
    @include transition-transform($defaultTransitionTime, rotate(0));
  }

  span {
    font-size: 14px;
  }

  span.username {
    margin-left: 10px;
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
  }

  pre.comment {
    background-color: #fafad2;
  }

  div.editComment {
    margin-bottom: 5px;
  }

  h5 {
    font-size: 15px;
  }

  span.changesAmount {
    display: block;
    color: #888;

    span::after {
      content: ', ';
    }

    span:last-child::after {
      content: '';
    }
  }

  span.modifiedAt {
    display: block;
    width: 100%;
    text-align: right;
  }

  span {
    &.Insert {
      color: #28a745;
    }

    &.Update {
      color: #007bff;
    }

    &.Delete {
      color: #dc3545;
    }
  }
  div.details {
    padding-top: 10px;

    span.detail {
      display: block;
    }
  }
}

Git History

398ac8947 History comments: editing prepared, HistoryEntry.jsx: to be continued.
ab739d9ba combine edit and dynamic page to form page