@import "./issues/issue_count_badge"; [v-cloak] { display: none; } .user-can-drag { cursor: -webkit-grab; cursor: grab; } .is-dragging { // Important because plugin sets inline CSS opacity: 1 !important; * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; // !important to make sure no style can override this when dragging cursor: -webkit-grabbing !important; cursor: grabbing !important; } } .is-ghost { opacity: 0.3; } .dropdown-menu-issues-board-new { width: 320px; .dropdown-content { max-height: 150px; } } .issue-board-dropdown-content { margin: 0 8px 10px; padding-bottom: 10px; border-bottom: 1px solid $dropdown-divider-color; > p { margin: 0; font-size: 14px; } } .issue-boards-page { .content-wrapper { padding-bottom: 0; } } .boards-app { position: relative; @media (min-width: $screen-sm-min) { transition: width $right-sidebar-transition-duration; width: 100%; &.is-compact { width: calc(100% - #{$gutter_width}); } } } .boards-app-loading { width: 100%; font-size: 34px; } .boards-list { height: calc(100vh - 105px); width: 100%; padding-top: 25px; padding-bottom: 25px; padding-right: ($gl-padding / 2); padding-left: ($gl-padding / 2); overflow-x: scroll; white-space: nowrap; @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { height: calc(100vh - 90px); } @media (min-width: $screen-md-min) { height: calc(100vh - 160px); min-height: 475px; } } .board { display: inline-block; width: calc(85vw - 15px); height: 100%; padding-right: ($gl-padding / 2); padding-left: ($gl-padding / 2); white-space: normal; vertical-align: top; @media (min-width: $screen-sm-min) { width: 400px; } &.is-expandable { .board-header { cursor: pointer; } } &.is-collapsed { width: 50px; .board-header { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .board-title { padding: 0; border-bottom: 0; > span { display: block; transform: rotate(90deg) translate(35px, 10px); } } .board-title-expandable-toggle { position: absolute; top: 50%; left: 50%; margin-left: -10px; } .board-list-component, .issue-count-badge { display: none; } } } .board-inner { position: relative; height: 100%; font-size: $issue-boards-font-size; background: $gray-light; border: 1px solid $border-color; border-radius: $border-radius-default; } .board-header { position: relative; &.has-border::before { border-top: 3px solid; border-color: inherit; border-top-left-radius: $border-radius-default; border-top-right-radius: $border-radius-default; content: ''; position: absolute; width: calc(100% + 2px); top: 0; left: 0; margin-top: -1px; margin-right: -1px; margin-left: -1px; padding-top: 1px; padding-right: 1px; padding-left: 1px; .board-title { padding-top: ($gl-padding - 3px); padding-bottom: $gl-padding; } } } .board-inner-container { border-bottom: 1px solid $border-color; padding: $gl-padding; } .board-title { margin: 0; padding: 12px $gl-padding; font-size: 1em; border-bottom: 1px solid $border-color; display: flex; align-items: center; } .board-title-text { margin-right: auto; } .board-delete { margin-right: 10px; padding: 0; color: $gray-darkest; background-color: transparent; border: 0; outline: 0; &:hover { color: $gl-link-color; } } .board-blank-state { height: calc(100% - 49px); padding: $gl-padding; background-color: $white-light; } .board-blank-state-list { list-style: none; > li:not(:last-child) { margin-bottom: 8px; } .label-color { position: relative; top: 2px; display: inline-block; width: 16px; height: 16px; margin-right: 3px; border-radius: $border-radius-default; } } .board-list-component { height: calc(100% - 49px); overflow: hidden; position: relative; } .board-list { height: 100%; width: 100%; margin-bottom: 0; padding: 5px; list-style: none; overflow-y: scroll; overflow-x: hidden; } .board-list-loading { margin-top: 10px; font-size: (26px / $issue-boards-font-size) * 1em; } .card { position: relative; padding: 11px 10px 11px $gl-padding; background: $white-light; border-radius: $border-radius-default; box-shadow: 0 1px 2px $issue-boards-card-shadow; list-style: none; &:not(:last-child) { margin-bottom: 5px; } &.is-active, &.is-active .card-assignee:hover a { background-color: $row-hover; &:first-child:not(:only-child) { box-shadow: -10px 0 10px 1px $row-hover; } } .label { border: 0; outline: 0; } .confidential-icon { position: relative; top: 1px; margin-right: 5px; } } .card-title { margin: 0 30px 0 0; font-size: 1em; line-height: inherit; a { color: $gl-text-color; word-wrap: break-word; margin-right: 2px; } } .card-header { display: flex; min-height: 20px; .card-assignee { display: flex; justify-content: flex-end; position: absolute; right: 15px; height: 20px; width: 20px; .avatar-counter { display: none; vertical-align: middle; min-width: 20px; line-height: 19px; height: 20px; padding-left: 2px; padding-right: 2px; border-radius: 2em; } img { vertical-align: top; } a { position: relative; margin-left: -15px; } a:nth-child(1) { z-index: 3; } a:nth-child(2) { z-index: 2; } a:nth-child(3) { z-index: 1; } a:nth-child(4) { display: none; } &:hover { .avatar-counter { display: inline-block; } a { position: static; background-color: $white-light; transition: background-color 0s; margin-left: auto; &:nth-child(4) { display: block; } &:first-child:not(:only-child) { box-shadow: -10px 0 10px 1px $white-light; } } } } .avatar { margin: 0; } } .card-footer { margin: 0 0 5px; .label { margin-top: 5px; margin-right: 6px; } } .card-number { font-size: 12px; color: $gl-text-color-secondary; } .issue-boards-search { width: 395px; .form-control { display: inline-block; width: 210px; } } .board-list-count { padding: 10px 0; color: $gl-text-color-secondary; font-size: 13px; > .fa { margin-right: 5px; } } .board-new-issue-form { z-index: 4; margin: 5px; } .page-with-contextual-sidebar.page-with-sidebar .issue-boards-sidebar { .issuable-sidebar-header { position: relative; } .gutter-toggle { position: absolute; top: 0; bottom: 15px; right: 0; width: 22px; color: $gray-darkest; svg { position: absolute; top: 50%; margin-top: (-11px / 2); } &:hover { path { fill: $gray-darkest; } } } .issuable-header-text { padding-right: 35px; > strong { font-weight: $gl-font-weight-bold; } } } .right-sidebar.right-sidebar-expanded { &.boards-sidebar-slide-enter-active, &.boards-sidebar-slide-leave-active { transition: width $right-sidebar-transition-duration, padding $right-sidebar-transition-duration; } &.boards-sidebar-slide-enter, &.boards-sidebar-slide-leave-active { width: 0; padding-left: 0; padding-right: 0; } } .add-issues-modal { display: -webkit-flex; display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba($black, .3); z-index: 9999; } .add-issues-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: 90vw; height: 85vh; max-width: 1100px; min-height: 500px; margin: auto; padding: 25px 15px 0; background-color: $white-light; border-radius: $border-radius-default; box-shadow: 0 2px 12px rgba($black, .5); .empty-state { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1; margin-top: 0; &.add-issues-empty-state-filter { -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; } > .row { width: 100%; margin: auto 0; } .svg-content { margin-top: -40px; } } } .add-issues-header { margin: -25px -15px -5px; border-top: 0; border-bottom: 1px solid $border-color; border-top-right-radius: $border-radius-default; border-top-left-radius: $border-radius-default; > h2 { margin: 0; font-size: 18px; } } .add-issues-search { display: -webkit-flex; display: flex; .issues-filters { -webkit-flex: 1; flex: 1; } } .add-issues-list-column { width: 100%; @media (min-width: $screen-sm-min) { width: 50%; } @media (min-width: $screen-md-min) { width: (100% / 3); } } .add-issues-list { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1; padding-top: 3px; margin-left: -$gl-vert-padding; margin-right: -$gl-vert-padding; overflow-y: scroll; .card-parent { padding: 0 5px 5px; } .card { border: 1px solid $border-gray-dark; box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, .3); cursor: pointer; } } .add-issues-list-loading { -webkit-align-self: center; align-self: center; width: 100%; padding-left: $gl-vert-padding; padding-right: $gl-vert-padding; font-size: 35px; } .add-issues-footer { margin: auto -15px 0; padding-left: 15px; padding-right: 15px; border-bottom-right-radius: $border-radius-default; border-bottom-left-radius: $border-radius-default; } .add-issues-footer-to-list { padding-left: $gl-vert-padding; padding-right: $gl-vert-padding; line-height: 34px; } .issue-card-selected { position: absolute; right: -3px; top: -3px; width: 17px; background-color: $blue-500; color: $white-light; border: 1px solid $blue-600; font-size: 9px; line-height: 15px; border-radius: 50%; } .modal-filters { display: flex; > .dropdown { display: none; margin-right: 10px; @media (min-width: $screen-sm-min) { display: block; } } .dropdown-menu-toggle { width: 100px; @media (min-width: $screen-md-min) { width: 140px; } } }