frontend/src/styles/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%);

    label{
      width: 96%;
      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;
      }
    }

    .high-priority{
      color: $red;

      .icon {
        vertical-align: middle;
      }

      &.not-so-high {
        color: $orange;
      }
    }

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

    .settings{
      float: right;
      width: 4%;
      cursor: pointer;
    }
  }

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

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

  .reminder-input{
    margin: 0;

    &.overdue input{
      color: $red;
    }

    &:last-child {
      margin-bottom: 0.75rem;
    }

    a {
      color: $red;
      vertical-align: sub;
    }

    input {
      width: 90%;
      border: none;

      &:focus {
        border: none;
        box-shadow: none;
      }
    }
  }

  .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;
    }
  }
}