frontend/src/styles/components/tasks.scss

.settings{
  float: right;
  color: rgb(74, 74, 74);
}

.tasks {
  margin-top: 1rem;
  padding: 0;
  text-align: left;
  max-width: 80vw;

  @media screen and (min-width: $tablet) {
    &.short {
      max-width: 53vw;
    }
  }
  
  @media screen and (max-width: $tablet) {
    max-width: 100%;
  }

  &.noborder{
    margin: 1rem -0.5rem;
  }

  .task {
    display: block;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid darken(#fff, 10%);

    span:not(.tag) {
      width: calc(100% - 40px);
      display: inline-block;
      cursor: pointer;

      .tasktext {
        vertical-align: top;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        width: 94%;

        @media screen and (max-width: $tablet) {
          width: 89%;
        }

        &.done{
          text-decoration: line-through;
          color: $grey;
        }

        .overdue{
          color: $red;
        }
      }

      .tag {
        margin: 0 0.5em;
      }

      .avatar {
        border-radius: 50%;
        vertical-align: bottom;
        margin-left: 5px;
        height: 27px;
        width: 27px;
      }

      a {
        color: $text;
        transition: color ease $transition-duration;

        &:hover {
          color: darken($text, 40%);
        }
      }
    }

    span.parent-tasks {
      color: lighten($dark, 50);
      width: auto;
    }

    .remove {
      color: $red;
    }

    input[type="checkbox"] {
      vertical-align: middle;
    }

    .settings{
      float: right;
      width: 24px;
      cursor: pointer;
    }
  }

  .task:last-child {
    border-bottom: none;
  }
}

.taskedit{
  min-height: calc(100% - 1rem);
  margin-top: 1rem;


  .priority-select{
    .select, select{
      width: 100%;
    }
  }

  ul.assingees {
    list-style: none;
    margin: 0;

    li{
      padding: 0.5em 0.5em 0;

      a{
        float: right;
        color: $red;
        transition: all $transition;

        &:hover{
          color: darken($red, 15);
        }
      }
    }
  }

  .tag{
    margin-right: 0.5em;
    margin-bottom: 0.5em;

    &:last-child{
      margin-right: 0;
    }
  }
}