$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; } .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: .5em .5em 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: 2em; .icon { height: 1rem; padding: 0 .25rem; margin-top: 0; } } } .footer .icon, .due-date, .priority-label { background: darken($task-background, 5%); border-radius: $radius; padding: 0 .5rem; } .due-date { padding: 0 .25rem; } .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; } } .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) }