task-summary-table.component.scss

@import "../../../../variables";

.summary-table {
  width: 100%;

  tr {
    height: 36px !important;
  }

  td {
  }

  th {
    text-align: center;
  }


  th,
  td {
    min-width: 50px;
  }

  td:first-child {
    text-align: left;
    min-width: 220px;
  }

  .cdk-column-timeSpentToday ::ng-deep .inline-input-wrapper {
    padding: $s;

    input {
      width: 100px;
    }
  }
}

.check-done {
  opacity: 0.5;

  &:hover {
    opacity: 1 !important;
  }

  .check,
  .undo {
    opacity: 0;
  }

  .undo {
    margin-right: -24px;
  }


  &:hover {
    mat-icon {
      animation: $transition-duration-m success-btn-ani linear;
    }

    .check {
      opacity: 1;
    }
  }

  &.isDone {
    .check {
      opacity: 1;
    }

    &:hover {
      .check {
        opacity: 0;
      }

      .undo {
        opacity: 1;
      }
    }
  }
}


.repeat-task-icon {
  vertical-align: middle;
  margin-right: 4px;
  transform: rotate(45deg);
  opacity: 0.7;
}

.task-title {
  display: flex;
  //border: 1px solid orange;
  text-align: left;
  align-items: center;

  &.isDone ::ng-deep .value-wrapper {
    text-decoration: line-through;
  }

  &.isSubTask {
    font-style: italic;
  }


  > span {
    text-decoration: none !important;
    display: block;
    padding-left: $s*1;
  }

  inline-input {
    flex-grow: 1;
    text-align: left;
    display: block;
  }

  ::ng-deep .inline-input-wrapper {
    padding: $s;

    input {
      width: 100%;
      text-align: left;
    }
  }
}