eapenzacharias/todolist-v2

$cell-color: #b2b2b2;
$text-color: #333;
$second-text: #7a7a7a;

body {
  .project {
    display: flex;
    align-content: center;
    width: 100%;
    font-family: Helvetica, sans-serif;
    color: $text-color;
  }

  #main {
    width: 90%;
    max-width: 600px;
    margin: 50px auto;
    padding: 0;
    box-shadow: 0 4px 8px 0 #0003, 0 6px 20px 0 #00000030;
    font-size: 16px;
    font-weight: 300;
    display: flex;
    flex-direction: column;

    h1 {
      border-bottom: 0.5px solid $cell-color;
      font-size: 18px;
      font-weight: 400;
      padding: 20px 10px 15px 10px;
      margin: 0;
    }

    #task-input {
      border: none;
      border-bottom: 0.2px solid $cell-color;
      box-sizing: border-box;
      color: $second-text;
      font-style: italic;
      font-size: 16px;
      padding: 15px 10px;
      margin: 0;
      width: 100%;
    }

    #tasks {
      list-style-type: none;
      width: 100%;
      margin: 0;
      padding: 0;

      li {
        border-bottom: 0.2px solid $cell-color;
        padding: 15px 10px;
        position: relative;
        display: flex;
        margin: 0;

        input {
          margin: 0 15px;
          cursor: pointer;
        }

        .task-text {
          min-width: 70%;
          padding: 0 0 2px 0;
        }

        .task-options {
          position: absolute;
          right: 5px;
          top: 0;
          font-weight: 900;
          color: #848484;
          font-size: 20px;
          -webkit-transition: 0.3s;
          transition: 0.6s;
          cursor: pointer;
          width: 60px;
          display: flex;
          justify-content: end;
          height: 100%;
          align-items: center;
        }

        .task-options:hover {
          color: #1c9159;
        }

        .btn {
          position: absolute;
          color: $cell-color;
          transition: 0.5s;
          cursor: pointer;
          animation-duration: 0.4s;
          animation-fill-mode: both;
        }

        .del-btn {
          right: 25px;
          color: #c14c4c;
        }

        .del-btn:hover {
          color: #b01111;
        }

        .edit-btn {
          right: 50px;
          color: #3d78ab;
        }

        .edit-btn:hover {
          color: #0b406e;
        }

        .editing {
          color: #0d7a1e;
        }
      }

      .completed {
        background-color: #fcfcfc;
        color: $second-text;
      }

      .submenu {
        padding: 0;
        display: flex;
        align-content: center;
        position: absolute;
      }

      @keyframes fadeInRight {
        0% {
          opacity: 0;
          transform: translateX(10px);
        }

        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .fadeInRight {
        animation-name: fadeInRight;
      }
    }

    #clear-btn {
      border: none;
      background-color: #f3f1f1;
      border-bottom: 0.2px solid $cell-color;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 300;
      color: $second-text;
      padding: 15px;
      transition: 0.6s;
      cursor: pointer;
    }

    #clear-btn:hover {
      background-color: #8e8e8e;
      color: $text-color;
    }
  }
}