/** * Well styled list * */ .hover-list { position: relative; margin: 0; padding: 0; list-style: none; > li { padding: 10px 15px; min-height: 20px; border-bottom: 1px solid $list-border; word-wrap: break-word; &::after { content: " "; display: table; clear: both; } &.disabled { color: $list-text-disabled-color; } &:not(.ui-sort-disabled):hover { background: $row-hover; } &.unstyled { &:hover { background: none; } } &.warning-row { background-color: $list-warning-row-bg; border-color: $list-warning-row-border; color: $list-warning-row-color; &:hover { background: $list-warning-row-bg; } } &.smoke { background-color: $gray-light; } &:last-child { border-bottom: 0; &.bottom { background: $gray-light; } } .list-item-name { float: left; position: relative; top: 3px; } p { padding-top: 1px; margin: 0; color: $white-normal; img { position: relative; top: 3px; } } .card.card-body-title { font-size: $list-font-size; line-height: 18px; } } } /** light list with border-bottom between li **/ ul.bordered-list, ul.unstyled-list { @include basic-list; &.top-list { li:first-child { padding-top: 0; h4, h5 { margin-top: 0; } } } } ul.unstyled-list > li { border-bottom: 0; } // Generic content list ul.content-list { @include basic-list; margin: 0; padding: 0; li { border-color: $white-normal; font-size: $list-font-size; color: $list-text-color; &.no-description { .title { line-height: $list-text-height; } } .title { font-weight: $gl-font-weight-bold; } a { color: $gl-text-color; } .member-group-link { color: $blue-600; } .description { @include str-truncated; color: $gl-text-color-secondary; } .controls { float: right; > .control-text { margin-right: $gl-padding-top; line-height: $list-text-height; &:last-child { margin-right: 0; } } > .btn, > .btn-group, > .dropdown.inline { margin-right: $gl-padding-top; display: inline-block; margin-top: 3px; margin-bottom: 4px; &.has-tooltip, &:last-child { margin-right: 0; @include media-breakpoint-down(xs) { margin: 0 auto; } } } .no-comments { opacity: .5; } } .member-controls { float: none; @include media-breakpoint-up(sm) { float: right; } } // When dragging a list item &.ui-sortable-helper { border-bottom: 0; } &.list-placeholder { background-color: $gray-light; border: dotted 1px $white-normal; margin: 1px 0; min-height: 52px; } } } // Content list using flexbox .flex-list { .flex-row { display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; white-space: nowrap; } .row-main-content { flex: 1 1 auto; overflow: hidden; padding-right: 8px; } .row-fixed-content { flex: 0 0 auto; margin-left: auto; } .row-title { font-weight: $gl-font-weight-bold; } .row-second-line { display: block; } .dropdown { .btn-block { margin-bottom: 0; line-height: inherit; } } .badge-secondary { color: $gl-text-color-secondary; } .avatar-cell { align-self: flex-start; } } .card > .content-list > li { padding: $gl-padding-top $gl-padding; } ul.controls { float: right; list-style: none; display: flex; align-items: center; .btn { padding: 10px 14px; } > li { float: left; margin-right: 10px; &:last-child { margin-right: 0; } .author-link { .avatar-inline { margin-left: 0; margin-right: 0; margin-bottom: 0; } } } .issuable-pipeline-broken a, .issuable-pipeline-status a, .author-link { display: flex; } } ul.indent-list { padding: 10px 0 0 30px; } // Specific styles for tree list @keyframes spin-avatar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .namespace-title { .tooltip-inner { max-width: 350px; } }