vikunja-frontend/src/styles/components/kanban.scss

@use 'sass:math';

$bucket-background: $grey-100;
$task-background: $white;
$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
$bucket-width: 300px;
$bucket-header-height: 60px;
$bucket-right-margin: 1rem;

$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
$crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem';
$filter-container-height: '1rem - #{$switch-view-height}';

.app-content.list\.kanban {
  padding-bottom: 0;
}

.kanban {

  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  height: calc(#{$crazy-height-calculation});
  margin: 0 -1.5rem;
  padding: 0 1.5rem;

  @media screen and (max-width: $tablet) {
    height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
  }

  .bucket {
    background-color: $bucket-background;
    border-radius: $radius;
    position: relative;

    flex: 0 0 $bucket-width;
    margin: 0 $bucket-right-margin 0 0;
    max-height: 100%;
    min-height: 20px;
    max-width: $bucket-width;

    .tasks {
      max-height: calc(#{$crazy-height-calculation-tasks});
      overflow: auto;

      @media screen and (max-width: $tablet) {
        max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
      }

      .task {

        &:first-child {
          margin-top: 0;
        }

        -webkit-touch-callout: none; // iOS Safari
        -webkit-user-select: none; // Safari
        -khtml-user-select: none; // Konqueror HTML
        -moz-user-select: none; // Old versions of Firefox
        -ms-user-select: none; // Internet Explorer/Edge
        user-select: none; // Non-prefixed version, currently supported by Chrome, Opera and Firefox

        transition: $ease-out;
        cursor: pointer;
        box-shadow: $shadow-xs;
        display: block;

        font-size: .9rem;
        padding: .5rem;
        margin: .5rem;
        border-radius: $radius;
        background: $task-background;

        &.loader-container.is-loading:after {
          width: 1.5rem;
          height: 1.5rem;
          top: calc(50% - .75rem);
          left: calc(50% - .75rem);
          border-width: 2px;
        }

        h3 {
          font-family: $family-sans-serif;
          font-size: .85rem;
          word-break: break-word;
        }

        .progress {
          margin: 8px 0 0 0;
          width: 100%;
          height: 0.5rem;
        }

        .due-date {
          float: right;
          display: flex;
          align-items: center;

          .icon {
            margin-right: .25rem;
          }

          &.overdue {
            color: $red;
          }
        }

        .label-wrapper .tag {
          margin: .5rem .5rem 0 0;
        }

        .footer {
          background: transparent;
          padding: 0;
          display: flex;
          flex-wrap: wrap;
          align-items: center;

          .tag, .assignees, .icon, .priority-label {
            margin-top: .25rem;
            margin-right: .25rem;
          }

          .assignees {
            display: flex;

            .user {
              display: inline;
              margin: 0;

              img {
                margin: 0;
              }
            }
          }

          .tag {
            margin-left: 0;
          }

          .priority-label {
            font-size: .75rem;
            height: 2rem;

            .icon {
              height: 1rem;
              padding: 0 .25rem;
              margin-top: 0;
            }
          }
        }

        .footer .icon,
        .due-date,
        .priority-label {
          background: $grey-100;
          border-radius: $radius;
          padding: 0 .5rem;
        }

        .due-date {
          padding: 0 .25rem;
        }

        .task-id {
          color: $grey-500;
          font-size: .8rem;
          margin-bottom: .25rem;
          display: flex;
        }

        .is-done {
          font-size: .75rem;
          padding: .2rem .3rem;
          margin: 0 .25rem 0 0;
        }

        &.is-moving {
          opacity: .5;
        }

        span {
          width: auto;
        }

        &.has-light-text {
          color: $white;

          .task-id {
            color: $grey-200;
          }

          .footer .icon,
          .due-date,
          .priority-label {
            background: $grey-800;
          }

          .footer {
            .icon svg {
              fill: $white;
            }
          }
        }
      }

      .drop-preview {
        border-radius: $radius;
        margin: 0 .5rem .5rem;
        background: transparent;
        border: 3px dashed $grey-300;
      }
    }

    h2 {
      font-size: 1rem;
      margin: 0;
      font-weight: 600 !important;
    }

    &.new-bucket {
      // Because of reasons, this button ignores the margin we gave it to the right.
      // To make it still look like it has some, we modify the container to have a padding of 1rem,
      // which is the same as the margin it should have. Then we make the container itself bigger
      // to hide the fact we just made the button smaller.
      min-width: calc(#{$bucket-width} + 1rem);
      background: transparent;
      padding-right: 1rem;

      .button {
        background: $bucket-background;
        width: 100%;
      }
    }

    a.dropdown-item {
      padding-right: 1rem;
    }

    &.is-collapsed {
      transform: rotate(90deg) translateX(math.div($bucket-width, 2) - math.div($bucket-header-height, 2));
      // Using negative margins instead of translateY here to make all other buckets fill the empty space
      margin-left: (math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1;
      margin-right: calc(#{(math.div($bucket-width, 2) - math.div($bucket-header-height, 2)) * -1} + #{$bucket-right-margin});
      cursor: pointer;

      .tasks, .bucket-footer {
        display: none;
      }
    }
  }

  .bucket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem;
    height: $bucket-header-height;

    .limit {
      padding-left: .5rem;
      font-weight: bold;

      &.is-max {
        color: $red;
      }
    }

    .title.input {
      height: auto;
      padding: .4rem .5rem;
      display: inline-block;
    }
  }

  .dropdown-trigger {
    cursor: pointer;
    padding: .5rem;
  }

  .bucket-footer {
    padding: .5rem;

    .button {
      background-color: transparent;

      &:hover {
        background-color: $white;
      }
    }
  }
}

.ghost-task {
  transition: transform 0.18s ease;
  transform: rotateZ(3deg)
}

.ghost-task-drop {
  transition: transform 0.18s ease-in-out;
  transform: rotateZ(0deg)
}