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

$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 {

	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-container {
		display: flex;
		align-items: flex-start;
	}

	.ghost {
		background: transparent !important;
		border: 3px dashed $grey-300 !important;
		box-shadow: none !important;

		* {
			opacity: 0;
		}
	}

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

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

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

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

			.task {
				user-select: none;

				//transition: $ease-out;
				cursor: pointer;
				box-shadow: $shadow-xs;
				display: block;
				border: 3px solid transparent;

				font-size: .9rem;
				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;
					margin-top: .25rem;

					.tag, .assignees, .icon, .priority-label, .checklist-summary {
						margin-top: 0;
						margin-right: .25rem;
					}
					
					.checklist-summary {
						padding-left: 0;
					}

					.assignees {
						display: flex;

						.user {
							display: inline;
							margin: 0;

							img {
								margin: 0;
							}
						}
					}

					.tag {
						margin-left: 0;
					}

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

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

				&.v-leave, &.v-leave-to, &.v-leave-active
				&.move-card-leave, &.move-card-leave-to, &.move-card-leave-active {
					display: none;
				}
			}

			.dropper {
				&, > div {
					min-height: 40px;
				}
			}
		}

		.move-card-move {
			transition: transform $transition-duration;
		}

		.no-move {
			transition: transform 0s;
		}

		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;
			cursor: pointer;
		}
	}

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

	.bucket-footer {
		padding: .5rem;

		.button {
			background-color: transparent;

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

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

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