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

$bucket-background: #e8f0f5;
$task-background: $white;
$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
$bucket-width: 300px;

$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';

.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.5em;

  .bucket {

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

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

    .tasks {
      max-height: calc(#{$crazy-height-calculation} - 1rem - 2.5rem - 2em - #{$button-height} - 1em);
      overflow: auto;

      .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: 2px 2px 2px darken($white, 12%);
        display: block;

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

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

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

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

          .icon {
            margin-right: 2px;
            margin-left: 5px;
          }

          &.overdue {
            color: $red;
          }
        }

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

        .footer {
          background: transparent;
          padding: 0;
          display: flex;
          justify-content: space-between;
          margin-top: 8px;

          .items {
            display: flex;
            align-items: center;

            > :not(:last-child) {
              margin-right: .5em;
            }
          }

          .assignees {
            display: flex;

            .user {
              display: inline;
              margin: 0 -12px 0 0;

              img {
                margin-right: 0;
              }
            }
          }

          .icons-container {
            display: flex;
            align-items: flex-end;
            .icon {
              padding: 0px .4rem;
              &:not(:first-child) {
                margin-left: 4px;
              }
              svg {
                margin: 0;
              }
            }
          }

          .icon {
            svg {
              margin: 4px 0 4px 4px;
              fill: $dark;

              &:not(.svg-inline--fa) {
                width: 16px;
              }
            }
          }
        }

        .footer .icon,
        .due-date,
        .priority-label {
          background: darken($task-background, 5%);
          border-radius: $radius;
          padding-right: 5px;
        }

        .priority-label {
          margin: .5em 0;
          display: inline-block;
        }

        .task-id {
          color: $grey;
          font-size: .8rem;
        }

        .is-done {
          margin: 0;
          font-size: .8em;
          padding: .25em .5em;
        }

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

        span {
          width: auto;
        }

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

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

          .footer .icon,
          .due-date,
          .priority-label {
            background: darken($task-background, 80%);
          }

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

      .drop-preview {
        border-radius: $radius;
        margin: 0 .5em .5em;
        background: transparent;
        border: 3px dashed darken($bucket-background, 5%);
      }
    }

    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;

      .input {
        height: 2.25em;
      }
    }
  }

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

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

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

    .dropdown-trigger {
      cursor: pointer;
    }

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

  .bucket-footer {
    padding: .5em;

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