.dropdown { position: relative; .btn-link { &:hover { cursor: pointer; } } } @mixin chevron-active { .fa-chevron-down { color: $gray-darkest; } } @mixin set-visible { transform: translateY(0); display: block; } @mixin set-invisible { transform: translateY(-10px); display: none; } .show.dropdown { .dropdown-menu, .dropdown-menu-nav { @include set-visible; min-height: $dropdown-min-height; max-height: $dropdown-max-height; overflow-y: auto; @include media-breakpoint-down(xs) { width: 100%; } &.projects-dropdown-menu { padding: 0; overflow-y: initial; max-height: initial; } } .dropdown-toggle, .dropdown-menu-toggle { @include chevron-active; border-color: $gray-darkest; } [data-toggle='dropdown'] { outline: 0; } } // Get search dropdown to line up with other nav dropdowns .search-input-container .dropdown-menu { margin-top: 11px; } .dropdown-toggle { padding: 6px 8px 6px 10px; background-color: $white-light; color: $gl-text-color; font-size: 14px; text-align: left; border: 1px solid $border-color; border-radius: $border-radius-base; white-space: nowrap; &:disabled.read-only { color: $gl-text-color !important; } &.no-outline { outline: 0; } &.large { width: 200px; } &.wide { width: 100%; + .dropdown-select { width: 100%; } } // Allows dynamic-width text in the dropdown toggle. // Resizes to allow long text without overflowing the container. &.dynamic { width: auto; min-width: 160px; max-width: 100%; padding-right: 25px; } .fa { color: $gray-darkest; } .fa-chevron-down { font-size: $dropdown-chevron-size; position: relative; top: -2px; margin-left: 5px; } &:hover { @include chevron-active; border-color: $gray-darkest; } &:focus:active { @include chevron-active; border-color: $dropdown-toggle-active-border-color; outline: 0; } } .dropdown-menu-toggle { @extend .dropdown-toggle; padding-right: 25px; position: relative; width: 163px; text-overflow: ellipsis; overflow: hidden; .fa { position: absolute; &.fa-spinner { font-size: 16px; margin-top: -3px; } } .fa-chevron-down, .fa-spinner { position: absolute; top: 11px; right: 8px; } } @mixin dropdown-item-hover { background-color: $dropdown-item-hover-bg; color: $gl-text-color; outline: 0; // make sure the text color is not overriden &.text-danger { color: $brand-danger; } .avatar { border-color: $white-light; } } @mixin dropdown-link { background: transparent; border: 0; border-radius: 0; box-shadow: none; display: block; font-weight: $gl-font-weight-normal; position: relative; padding: 8px 16px; color: $gl-text-color; line-height: normal; white-space: normal; overflow: hidden; text-align: left; width: 100%; // make sure the text color is not overriden &.text-danger { color: $brand-danger; } &.disable-hover { text-decoration: none; } &:not(.disable-hover):hover, &:active, &:focus, &.is-focused { @include dropdown-item-hover; text-decoration: none; .badge.badge-pill { background-color: darken($dropdown-link-hover-bg, 5%); } } &.dropdown-menu-user-link { line-height: 16px; padding-top: 10px; padding-bottom: 7px; white-space: nowrap; .dropdown-menu-user-username { display: block; } } .icon-play { fill: $gl-text-color-secondary; margin-right: 6px; height: 12px; width: 11px; } } .dropdown-menu, .dropdown-menu-nav { display: none; position: absolute; width: auto; top: 100%; z-index: 300; min-width: 240px; max-width: 500px; margin-top: $dropdown-vertical-offset; margin-bottom: 24px; font-size: 14px; font-weight: $gl-font-weight-normal; padding: 8px 0; background-color: $white-light; border: 1px solid $dropdown-border-color; border-radius: $border-radius-base; box-shadow: 0 2px 4px $dropdown-shadow-color; &.dropdown-open-top { margin-bottom: $dropdown-vertical-offset; } &.dropdown-open-left { right: 0; left: auto; } &.is-loading { .dropdown-content { display: none; } .dropdown-loading { display: block; } } .shortcut-mappings { display: none; } &.shortcuts .shortcut-mappings { display: inline-block; margin-right: 5px; } ul { margin: 0; padding: 0; } li { display: block; text-align: left; list-style: none; padding: 0 1px; a, button, .menu-item { @include dropdown-link; } } .divider { height: 1px; margin: #{$grid-size / 2} 0; padding: 0; background-color: $dropdown-divider-color; &:hover { background-color: $dropdown-divider-color; } } .separator { width: 100%; height: 1px; margin-top: 8px; margin-bottom: 8px; background-color: $dropdown-divider-color; } .dropdown-menu-empty-item a { &:hover, &:focus { background-color: transparent; } } .dropdown-header { color: $gl-text-color-secondary; font-size: 13px; line-height: 22px; padding: 8px 16px; } &.capitalize-header .dropdown-header { text-transform: capitalize; } .dropdown-bold-header { font-weight: $gl-font-weight-bold; line-height: 22px; padding: 0 16px; } .separator + .dropdown-header, .separator + .dropdown-bold-header { padding-top: 10px; } .unclickable { cursor: not-allowed; padding: 5px 8px; color: $gl-text-color-secondary; } .badge.badge-pill + span:not(.badge.badge-pill) { // Expects up to 3 digits on the badge margin-right: 40px; } } .droplab-dropdown { .dropdown-toggle > i { pointer-events: none; } .dropdown-menu li { cursor: pointer; &.droplab-item-active button { @include dropdown-item-hover; } > a, > button { display: flex; margin: 0; text-overflow: inherit; text-align: left; &.btn .fa:not(:last-child) { margin-left: 5px; } } &.droplab-item-selected i { visibility: visible; } .icon { visibility: hidden; } .description { display: inline-block; white-space: normal; margin-left: 5px; p { margin-bottom: 0; } } } .icon { display: inline-block; vertical-align: top; padding-top: 2px; } } .droplab-dropdown .dropdown-menu, .droplab-dropdown .dropdown-menu-nav { display: none; opacity: 1; visibility: visible; transform: translateY(0); } .comment-type-dropdown.show .dropdown-menu { display: block; } .filtered-search-box-input-container { .dropdown-menu, .dropdown-menu-nav { max-width: 280px; } } .dropdown-menu-drop-up { top: auto; bottom: 100%; } .dropdown-menu-large { width: 340px; } .dropdown-menu-no-wrap { a { white-space: normal; } } .dropdown-menu-full-width { width: 100%; } .dropdown-menu-paging { .dropdown-page-two, .dropdown-menu-back { display: none; } &.is-page-two { .dropdown-page-one { display: none; } .dropdown-page-two, .dropdown-menu-back { display: block; } .dropdown-content { padding: 0 10px; } } } .dropdown-menu-user { .avatar { float: left; width: 2 * $gl-padding; height: 2 * $gl-padding; margin: 0 10px 0 0; } } .dropdown-menu-user-full-name { display: block; font-weight: $gl-font-weight-normal; line-height: 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .dropdown-menu-user-username { display: block; line-height: 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .dropdown-select { width: $dropdown-width; @include media-breakpoint-down(sm) { width: 100%; } } .dropdown-menu-selectable { li { a, button { padding: 8px 40px; position: relative; &.is-indeterminate, &.is-active { color: $gl-text-color; &::before { position: absolute; left: 16px; top: 16px; transform: translateY(-50%); font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } &.dropdown-menu-user-link::before { top: 50%; } } &.is-indeterminate::before { content: '\f068'; } &.is-active::before { content: '\f00c'; } } } } .dropdown-title { position: relative; padding: 2px 25px 10px; margin: 0 10px 10px; font-weight: $gl-font-weight-bold; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid $dropdown-divider-color; overflow: hidden; } .dropdown-title-button { position: absolute; top: 0; padding: 0; color: $dropdown-title-btn-color; font-size: 14px; border: 0; background: none; outline: 0; &:hover { color: darken($dropdown-title-btn-color, 15%); } } .dropdown-menu-close { right: 5px; width: 20px; height: 20px; top: -1px; } .dropdown-menu-back { left: 7px; top: 2px; } .dropdown-input { position: relative; margin-bottom: 10px; padding: 0 10px; .fa { position: absolute; top: 10px; right: 20px; color: $dropdown-input-fa-color; font-size: 12px; pointer-events: none; } .dropdown-input-clear { display: none; cursor: pointer; pointer-events: all; right: 22px; top: 9px; font-size: 14px; } &.has-value { .dropdown-input-clear { display: block; } .dropdown-input-search { display: none; } } } .dropdown-input-field, .default-dropdown-input { display: block; width: 100%; min-height: 30px; padding: 0 7px; color: $dropdown-input-color; line-height: 30px; border: 1px solid $dropdown-divider-color; border-radius: 2px; outline: 0; &:focus { color: $dropdown-link-color; border-color: $dropdown-input-focus-border; box-shadow: 0 0 4px $dropdown-input-focus-shadow; ~ .fa { color: $dropdown-link-color; } } &:hover { ~ .fa { color: $dropdown-link-color; } } } .dropdown-content { max-height: 252px; overflow-y: auto; } .dropdown-info-note { color: $gl-text-color-secondary; text-align: center; } .dropdown-footer { padding-top: 10px; margin-top: 10px; font-size: 13px; border-top: 1px solid $dropdown-divider-color; } .dropdown-footer-content { padding-left: 10px; padding-right: 10px; } .dropdown-due-date-footer { padding-top: 0; margin-left: 10px; margin-right: 10px; border-top: 0; } .dropdown-footer-list { font-size: 14px; a { cursor: pointer; padding-left: 10px; } } .dropdown-create-new-item-button { @include dropdown-link; width: 100%; background-color: transparent; border: 0; text-align: left; text-overflow: ellipsis; } .dropdown-loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; z-index: 9; background-color: $dropdown-loading-bg; font-size: 28px; .fa { position: absolute; top: 50%; left: 50%; margin-top: -14px; margin-left: -14px; } } .dropdown-label-box { position: relative; top: 3px; margin-right: 5px; display: inline-block; width: 15px; height: 15px; border-radius: $border-radius-base; } .git-revision-dropdown { .dropdown-content { max-height: 215px; } } .sidebar-move-issue-dropdown { .dropdown-content { max-height: 160px; } } .dropdown-menu-author { .dropdown-content { max-height: 215px; } } .dropdown-menu-labels { .dropdown-content { max-height: 128px; } } .dropdown-menu-due-date { .dropdown-content { max-height: 230px; } .pika-single { position: relative !important; top: 0 !important; border: 0; box-shadow: none; } .pika-lendar { margin-top: -5px; margin-bottom: 0; } } .dropdown-menu-inner-title { display: block; color: $gl-text-color; font-weight: $gl-font-weight-bold; } .dropdown-menu-inner-content { display: block; color: $gl-text-color-secondary; } .dropdown-toggle-text { &.is-default { color: $gl-text-color-secondary; } } .pika-single.animate-picker.is-bound, .pika-single.animate-picker.is-bound.is-hidden { /* * Having `!important` is not recommended but * since `pikaday` sets positioning inline * there's no way it can be gracefully overridden * using config options. */ position: absolute !important; display: block; } .pika-single.animate-picker.is-bound { @include set-visible; &.is-hidden { @include set-invisible; overflow: hidden; } } @include media-breakpoint-down(xs) { .navbar-gitlab { li.header-projects, li.header-more, li.header-new, li.header-user { position: static; } } header.navbar-gitlab .dropdown { .dropdown-menu, .dropdown-menu-nav { width: 100%; min-width: 100%; } } header.navbar-gitlab-new .header-content .dropdown { .dropdown-menu { left: 0; min-width: 100%; } } } header.header-content .dropdown-menu.projects-dropdown-menu { padding: 0; } .projects-dropdown-container { display: flex; flex-direction: row; width: 500px; height: 334px; .project-dropdown-sidebar, .project-dropdown-content { padding: 8px 0; } .loading-animation { color: $almost-black; } .project-dropdown-sidebar { width: 30%; border-right: 1px solid $border-color; } .project-dropdown-content { position: relative; width: 70%; } @include media-breakpoint-down(xs) { flex-direction: column; width: 100%; height: auto; flex: 1; .project-dropdown-sidebar, .project-dropdown-content { width: 100%; } .project-dropdown-sidebar { border-bottom: 1px solid $border-color; border-right: 0; } } .projects-list-frequent-container, .projects-list-search-container { padding: 8px 0; overflow-y: auto; li.section-empty.section-failure { color: $callout-danger-color; } } .section-header, .projects-list-frequent-container li.section-empty, .projects-list-search-container li.section-empty { padding: 0 15px; color: $gl-text-color-secondary; font-size: $gl-font-size; } .search-input-container { position: relative; padding: 4px $gl-padding; .search-icon { position: absolute; top: 13px; right: 25px; color: $md-area-border; } } .section-header { font-weight: 700; margin-top: 8px; } .projects-list-search-container { height: 284px; } @include media-breakpoint-down(xs) { .projects-list-frequent-container { width: auto; height: auto; padding-bottom: 0; } } } .projects-list-item-container { .project-item-avatar-container .project-item-metadata-container { float: left; } .project-title, .project-namespace { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } &:hover { .project-item-avatar-container .avatar { border-color: $md-area-border; } } .project-title { font-size: $gl-font-size; font-weight: 400; line-height: 16px; } .project-namespace { margin-top: 4px; font-size: 12px; line-height: 12px; color: $gl-text-color-secondary; } @include media-breakpoint-down(xs) { .project-item-metadata-container { float: none; } } } .dropdown-content-faded-mask { position: relative; .dropdown-list { max-height: $dropdown-max-height; overflow-y: auto; position: relative; } &::after { height: $dropdown-fade-mask-height; width: 100%; position: absolute; bottom: 0; background: linear-gradient(to top, $white-light 0, rgba($white-light, 0)); transition: opacity $fade-mask-transition-duration $fade-mask-transition-curve; content: ''; pointer-events: none; } &.fade-out::after { opacity: 0; } }