portal-oddajanje-solar/static/css/history.scss

@import "slovenscina-elements.scss";

.history-item {
  background:white;
  min-height:2.875rem;
  max-height:2.875rem;
  padding:1rem 1.5rem;
  position:relative;
  transition: max-height 1s ease-out;
  cursor:pointer;
  overflow:hidden;
  .history-item-chevron {
    position:absolute;
    bottom:1rem;
    right:1rem;
  }
  .history-item-date {
    text-transform: uppercase;
    display: inline-block;
    color:$grey-dark;
    line-height: 1rem;
    font-weight: 400;
    font-size:0.875rem;
  }
  .history-item-uploader {
    display: inline-block;
    padding-left:1rem;
    margin-left:1rem;
    border-left: 1px solid $grey-dark;
    color:$grey-dark;
    line-height: 1rem;
    font-weight: 400;
    font-size:0.875rem;
  }
  .history-item-filecount {
    position:absolute;
    top:1rem;
    right:1rem;
    color:$blue;
    line-height: 1rem;
    font-weight: 400;
    font-size:0.875rem;
  }
  .history-item-desc {
    position:absolute;
    bottom:1rem;
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.25rem;
    color:$black;
  }
  .history-item-desc-full {
    display: none;
    margin-top:1rem;
  }
  .history-item-files-full {
    display: none;
    .file-item {
      position:relative;
      height:3.125rem;
      border-bottom: 1px solid $grey-dark;
      .file-icon {
        position:absolute;
        width:1.5rem;
        height:1.5rem;
        left:0;
        top:1rem;
      }
      .file-name {
        position:absolute;
        left:3rem;
        top:1rem;
        color:$black;
        text-decoration: none;
        cursor:pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  &.open {
    max-height: 20rem;
    .history-item-date {display:block;}
    .history-item-uploader {
      display:block;
      padding-left:0;
      margin-left:0;
      border-left: none;
    }
    .history-item-desc {
      display: none;
    }
    .history-item-desc-full {
      display: block;
    }
    .history-item-files-full {
      display: block;
    }
    .history-item-chevron {
      transform:rotate(180deg);
    }
  }
}