You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
3.6 KiB
167 lines
3.6 KiB
// Core variables and mixins |
|
|
|
@import '../bootstrap-extended/include'; // Bootstrap includes |
|
@import '../components/include'; // Components includes |
|
|
|
$avatar-add-new-color: rgba(108, 117, 125, 0.12); |
|
|
|
.kanban-application { |
|
.kanban-wrapper { |
|
width: 100%; |
|
position: relative; |
|
.kanban-container { |
|
display: flex; |
|
width: max-content !important; |
|
|
|
// Padding to prevent add-item btn from touching scrollbar |
|
padding-bottom: 1.5rem; |
|
|
|
.kanban-board { |
|
width: auto !important; |
|
height: 100%; |
|
background: transparent; |
|
&:focus { |
|
outline: 0; |
|
} |
|
|
|
.kanban-board-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
padding-left: 0; |
|
padding-right: 0; |
|
.kanban-title-board { |
|
color: $headings-color; |
|
font-size: 1.1rem; |
|
padding: 0.5rem; |
|
font-weight: 500; |
|
width: 100%; |
|
max-width: 13rem; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
border-radius: $card-border-radius; |
|
&:hover, |
|
&:focus { |
|
background-color: $white; |
|
} |
|
&:focus { |
|
outline: 0; |
|
} |
|
} |
|
.dropdown { |
|
.dropdown-toggle:after { |
|
display: none; |
|
} |
|
} |
|
} |
|
.kanban-drag { |
|
min-height: 1rem; |
|
min-width: 18.55rem; |
|
padding: 0; |
|
} |
|
.kanban-title-button { |
|
position: absolute; |
|
left: -8px; |
|
bottom: 0; |
|
margin: -1rem 0; |
|
&:focus { |
|
box-shadow: none; |
|
} |
|
} |
|
.kanban-item { |
|
position: relative; |
|
display: flex; |
|
flex-direction: column; |
|
background: $white; |
|
width: 18.55rem; |
|
padding: 1rem 1.2rem; |
|
margin-bottom: 1.5rem; |
|
box-shadow: $box-shadow; |
|
cursor: pointer; |
|
@include border-radius($card-border-radius); |
|
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), background 0s, color 0s, border 0s; |
|
|
|
i, |
|
svg { |
|
stroke: $headings-color; |
|
} |
|
|
|
.kanban-text { |
|
font-weight: 500; |
|
} |
|
.item-dropdown { |
|
display: none; |
|
position: absolute; |
|
right: 0rem; |
|
cursor: pointer; |
|
.dropdown-toggle:after { |
|
display: none; |
|
} |
|
} |
|
&:hover { |
|
.item-dropdown { |
|
display: block; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Add new board styles |
|
.add-new-board { |
|
margin-top: 22px; |
|
float: left; |
|
padding: 0 15px; |
|
label { |
|
font-size: 1rem; |
|
font-weight: 700; |
|
margin-bottom: 0; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
// Update sidebar styles |
|
.update-item-sidebar { |
|
text-align: left; |
|
|
|
.avatar-add-member { |
|
background-color: $avatar-add-new-color; |
|
i, |
|
svg { |
|
stroke: $headings-color; |
|
} |
|
} |
|
|
|
.comment-editor { |
|
.ql-editor { |
|
min-height: 5.5rem; |
|
} |
|
} |
|
.comment-toolbar.ql-toolbar { |
|
width: 100%; |
|
text-align: right; |
|
border-top: 0; |
|
} |
|
} |
|
} |
|
|
|
// For when item is being dragged |
|
.kanban-item.gu-mirror { |
|
.item-dropdown { |
|
.dropdown-toggle:after { |
|
display: none; |
|
} |
|
} |
|
} |
|
// For Light Layout |
|
.kanban-board.gu-mirror { |
|
height: fit-content !important; |
|
.kanban-board-header { |
|
display: flex; |
|
justify-content: space-around; |
|
} |
|
.kanban-drag { |
|
padding-right: 20px !important; |
|
} |
|
}
|
|
|