.kanban-container-outer { position: relative; box-sizing: border-box; width: 100%; overflow: scroll; } .kanban-container { width: 200%; padding: 15px; } .kanban-container * { box-sizing: border-box; } .kanban-container:after { clear: both; display: block; content: ""; } .kanban-board { position: relative; float: left; background: #E2E4E6; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); margin: 10px; vertical-align: top; } .kanban-board.disabled-board { opacity: .3; } .kanban-board.is-moving.gu-mirror { transform: rotate(3deg); } .kanban-board.is-moving.gu-mirror .kanban-drag { overflow: hidden; padding-right: 50px; } .kanban-board header { font-size: 16px; padding: 10px; } .kanban-board header .kanban-title-board { font-weight: 700; margin: 0; padding: 0; display: inline; } .kanban-board header .kanban-title-button { float: right; line-height: 1; padding: .25rem .5rem; } .kanban-board .kanban-drag { min-height: 200px; padding: 20px; } .kanban-board:after { clear: both; display: block; content: ""; } .kanban-item { background: #fff; padding: 15px; margin-bottom: 20px; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); } .kanban-item:hover { cursor: move; } .kanban-item:last-child { margin: 0; } .kanban-item.is-moving.gu-mirror { transform: rotate(3deg); height: auto !important; } .kanban-header-yellow { background: #FC3; } .kanban-header-orange { background: #F91; } .kanban-header-blue { background: #0AC; } .kanban-header-red { background: #E43; } .kanban-header-green { background: #8C4; } #kanban-addboard { float: left; margin: 30px; margin-right: 10px; padding: 5px; padding-top: 3; padding-bottom: 3px; border: 1px solid; width: 30px; text-align: center; background: #d4d4e8; font-weight: bold; } .kanban-removeboard { float: right; margin: 10px; padding: 3px; width: 30px; text-align: center; background: #eee; font-weight: bold; } /* Dragula CSS */ .gu-mirror { position: fixed !important; margin: 0 !important; z-index: 9999 !important; } .gu-hide { display: none !important; } .gu-unselectable { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } .gu-transit { opacity: 0.2 !important; transform: rotate(0deg) !important; } .form-group { text-align: right; margin-button: 5px; }