Read about our upcoming Code of Conduct on this issue

dropdowns.scss 16.8 KB
Newer Older
Phil Hughes's avatar
Phil Hughes committed
1
2
.dropdown {
  position: relative;
3
4
5
6
7
8

  .btn-link {
    &:hover {
      cursor: pointer;
    }
  }
9
}
Phil Hughes's avatar
Phil Hughes committed
10

11
12
13
14
15
16
@mixin chevron-active {
  .fa-chevron-down {
    color: $gray-darkest;
  }
}

Nur Rony's avatar
Nur Rony committed
17
18
@mixin set-visible {
  transform: translateY(0);
19
  display: block;
Nur Rony's avatar
Nur Rony committed
20
21
22
23
}

@mixin set-invisible {
  transform: translateY(-10px);
24
  display: none;
Nur Rony's avatar
Nur Rony committed
25
26
}

Clement Ho's avatar
Clement Ho committed
27
.show.dropdown {
Phil Hughes's avatar
Phil Hughes committed
28
29
  .dropdown-menu,
  .dropdown-menu-nav {
Nur Rony's avatar
Nur Rony committed
30
    @include set-visible;
31
32
    min-height: $dropdown-min-height;
    max-height: $dropdown-max-height;
33
    overflow-y: auto;
34

35
36
37
38
    &.dropdown-extended-height {
      max-height: 400px;
    }

Clement Ho's avatar
Clement Ho committed
39
    @include media-breakpoint-down(xs) {
40
41
      width: 100%;
    }
42

43
    &.frequent-items-dropdown-menu {
44
45
46
47
      padding: 0;
      overflow-y: initial;
      max-height: initial;
    }
Phil Hughes's avatar
Phil Hughes committed
48
  }
Phil Hughes's avatar
Phil Hughes committed
49

50
  .dropdown-toggle,
Phil Hughes's avatar
Phil Hughes committed
51
  .dropdown-menu-toggle {
52
    @include chevron-active;
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
53
    border-color: $gray-darkest;
Phil Hughes's avatar
Phil Hughes committed
54
  }
55

56
  [data-toggle='dropdown'] {
57
58
    outline: 0;
  }
Phil Hughes's avatar
Phil Hughes committed
59
60
}

61
62
63
64
65
// Get search dropdown to line up with other nav dropdowns
.search-input-container .dropdown-menu {
  margin-top: 11px;
}

Phil Hughes's avatar
Phil Hughes committed
66
67
.dropdown-toggle,
.confidential-merge-request-fork-group .dropdown-toggle {
68
  padding: 6px 8px 6px 10px;
69
  background-color: $white-light;
70
  color: $gl-text-color;
71
  font-size: 14px;
Phil Hughes's avatar
Phil Hughes committed
72
  text-align: left;
73
  border: 1px solid $border-color;
Phil Hughes's avatar
Phil Hughes committed
74
  border-radius: $border-radius-base;
Phil Hughes's avatar
Phil Hughes committed
75
76
  white-space: nowrap;

77
78
79
80
  &:disabled.read-only {
    color: $gl-text-color !important;
  }

81
82
83
84
  &.no-outline {
    outline: 0;
  }

85
86
87
  &.large {
    width: 200px;
  }
88
89
90
91
92
93
94
95

  &.wide {
    width: 100%;

    + .dropdown-select {
      width: 100%;
    }
  }
96
97
98
99
100
101
102
103
104

  // 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;
  }
105

106
107
108
109
  .fa {
    color: $gray-darkest;
  }

110
111
112
  .fa-chevron-down {
    font-size: $dropdown-chevron-size;
    position: relative;
113
    top: -2px;
114
115
116
117
    margin-left: 5px;
  }

  &:hover {
118
    @include chevron-active;
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
119
    border-color: $gray-darkest;
120
121
122
  }

  &:focus:active {
123
    @include chevron-active;
124
    border-color: $dropdown-toggle-active-border-color;
125
    outline: 0;
126
127
128
129
130
  }
}

.dropdown-menu-toggle {
  @extend .dropdown-toggle;
131
  padding-right: 25px;
132
  position: relative;
133
  width: 160px;
134
135
136
137
138
139
140
141
  text-overflow: ellipsis;
  overflow: hidden;

  .fa {
    position: absolute;

    &.fa-spinner {
      font-size: 16px;
142
      margin-top: -3px;
143
144
145
    }
  }

146
147
  .fa-chevron-down,
  .fa-spinner {
148
149
150
151
    position: absolute;
    top: 11px;
    right: 8px;
  }
152
153
154
155
156
157
158

  .ic-chevron-down {
    position: absolute;
    top: $gl-padding-8;
    right: $gl-padding-8;
    color: $gray-darkest;
  }
Phil Hughes's avatar
Phil Hughes committed
159
160
}

161
@mixin dropdown-item-hover {
162
  background-color: $gray-darker;
163
  color: $gl-text-color;
164
  outline: 0;
165

166
  // make sure the text color is not overridden
167
168
169
  &.text-danger {
    color: $brand-danger;
  }
170
171
172
173

  .avatar {
    border-color: $white-light;
  }
174
175
}

176
@mixin dropdown-link {
177
178
179
180
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
181
  display: block;
182
  font-weight: $gl-font-weight-normal;
183
  position: relative;
184
  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
185
  color: $gl-text-color;
186
  line-height: $gl-btn-line-height;
187
  white-space: normal;
188
  overflow: hidden;
189
190
  text-align: left;
  width: 100%;
191

192
  // make sure the text color is not overridden
193
194
195
196
  &.text-danger {
    color: $brand-danger;
  }

197
198
199
200
201
  &.disable-hover {
    text-decoration: none;
  }

  &:not(.disable-hover):hover,
202
  &:active,
203
204
  &:focus,
  &.is-focused {
205
206
    @include dropdown-item-hover;

207
208
    text-decoration: none;

Clement Ho's avatar
Clement Ho committed
209
    .badge.badge-pill {
210
      background-color: darken($blue-50, 5%);
211
212
213
214
215
    }
  }

  &.dropdown-menu-user-link {
    line-height: 16px;
216
217
218
219
220
221
222
    padding-top: 10px;
    padding-bottom: 7px;
    white-space: nowrap;

    .dropdown-menu-user-username {
      display: block;
    }
223
224
225
226
227
228
229
230
231
232
  }

  .icon-play {
    fill: $gl-text-color-secondary;
    margin-right: 6px;
    height: 12px;
    width: 11px;
  }
}

Phil Hughes's avatar
Phil Hughes committed
233
234
.dropdown-menu,
.dropdown-menu-nav {
Clement Ho's avatar
Clement Ho committed
235
  display: none;
Phil Hughes's avatar
Phil Hughes committed
236
  position: absolute;
237
  width: auto;
Phil Hughes's avatar
Phil Hughes committed
238
  top: 100%;
Simon Knox's avatar
Simon Knox committed
239
  z-index: 300;
240
  min-width: 240px;
241
  max-width: 500px;
Winnie Hellmann's avatar
Winnie Hellmann committed
242
  margin-top: $dropdown-vertical-offset;
243
  margin-bottom: 24px;
244
  font-size: 14px;
245
  font-weight: $gl-font-weight-normal;
246
  padding: 8px 0;
247
  background-color: $white-light;
248
  border: 1px solid $border-color;
Phil Hughes's avatar
Phil Hughes committed
249
  border-radius: $border-radius-base;
Phil Hughes's avatar
Phil Hughes committed
250
  box-shadow: 0 2px 4px $dropdown-shadow-color;
Nur Rony's avatar
Nur Rony committed
251

252
253
254
255
  &.dropdown-open-top {
    margin-bottom: $dropdown-vertical-offset;
  }

256
257
258
259
260
  &.dropdown-open-left {
    right: 0;
    left: auto;
  }

Phil Hughes's avatar
Phil Hughes committed
261
262
263
264
265
266
267
268
269
270
  &.is-loading {
    .dropdown-content {
      display: none;
    }

    .dropdown-loading {
      display: block;
    }
  }

271
  .shortcut-mappings {
272
273
274
    display: none;
  }

275
  &.shortcuts .shortcut-mappings {
276
    display: inline-block;
277
    margin-right: 5px;
278
279
  }

Phil Hughes's avatar
Phil Hughes committed
280
281
282
283
284
  ul {
    margin: 0;
    padding: 0;
  }

Phil Hughes's avatar
Phil Hughes committed
285
  li {
286
    display: block;
Phil Hughes's avatar
Phil Hughes committed
287
288
    text-align: left;
    list-style: none;
289
    padding: 0 1px;
290

291
    > a,
Phil Hughes's avatar
Phil Hughes committed
292
    button,
293
294
295
    .menu-item {
      @include dropdown-link;
    }
Phil Hughes's avatar
Phil Hughes committed
296
297
  }

298
299
300
301
  .dropdown-item {
    @include dropdown-link;
  }

Phil Hughes's avatar
Phil Hughes committed
302
  .divider {
303
    height: 1px;
304
    margin: #{$grid-size / 2} 0;
305
    padding: 0;
306
    background-color: $dropdown-divider-bg;
307
308

    &:hover {
309
      background-color: $dropdown-divider-bg;
310
    }
311
312
313
  }

  .separator {
Phil Hughes's avatar
Phil Hughes committed
314
315
316
317
    width: 100%;
    height: 1px;
    margin-top: 8px;
    margin-bottom: 8px;
318
    background-color: $dropdown-divider-bg;
Phil Hughes's avatar
Phil Hughes committed
319
320
  }

321
322
323
324
325
326
327
  .dropdown-menu-empty-item a {
    &:hover,
    &:focus {
      background-color: transparent;
    }
  }

328
  .dropdown-header {
329
    color: $black;
330
    font-size: 13px;
331
    font-weight: $gl-font-weight-bold;
332
333
    line-height: $gl-line-height;
    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
334
335
  }

Clement Ho's avatar
Clement Ho committed
336
337
338
339
  &.capitalize-header .dropdown-header {
    text-transform: capitalize;
  }

Tim Zallmann's avatar
Tim Zallmann committed
340
  .dropdown-bold-header {
341
    font-weight: $gl-font-weight-bold;
342
343
    line-height: $gl-line-height;
    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
344
  }
345
346
347
348

  .unclickable {
    cursor: not-allowed;
    padding: 5px 8px;
tauriedavis's avatar
tauriedavis committed
349
    color: $gl-text-color-secondary;
350
  }
351

Clement Ho's avatar
Clement Ho committed
352
  .badge.badge-pill + span:not(.badge.badge-pill) {
353
354
355
    // Expects up to 3 digits on the badge
    margin-right: 40px;
  }
356
357
358
359

  .dropdown-menu-content {
    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  }
Phil Hughes's avatar
Phil Hughes committed
360
361
}

362
363
364
365
366
.droplab-dropdown {
  .dropdown-toggle > i {
    pointer-events: none;
  }

367
  .dropdown-menu li {
368
    cursor: pointer;
369

370
371
372
373
    &.droplab-item-active button {
      @include dropdown-item-hover;
    }

Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
374
375
    > a,
    > button {
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
376
      display: flex;
377
378
      margin: 0;
      text-overflow: inherit;
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
379
      text-align: left;
380

Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
381
382
383
      &.btn .fa:not(:last-child) {
        margin-left: 5px;
      }
384
385
386
387
388
389
    }

    &.droplab-item-selected i {
      visibility: visible;
    }

Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
390
    .icon {
391
392
      visibility: hidden;
    }
393
394
395
396
397
398
399
400
401
402

    .description {
      display: inline-block;
      white-space: normal;
      margin-left: 5px;

      p {
        margin-bottom: 0;
      }
    }
403
404
  }

Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
405
  .icon {
406
407
408
409
410
411
412
413
    display: inline-block;
    vertical-align: top;
    padding-top: 2px;
  }
}

.droplab-dropdown .dropdown-menu,
.droplab-dropdown .dropdown-menu-nav {
Nur Rony's avatar
Nur Rony committed
414
415
416
417
418
419
  display: none;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

420
.comment-type-dropdown.show .dropdown-menu {
421
422
423
  display: block;
}

Nur Rony's avatar
Nur Rony committed
424
425
426
427
428
429
430
.filtered-search-box-input-container {
  .dropdown-menu,
  .dropdown-menu-nav {
    max-width: 280px;
  }
}

Phil Hughes's avatar
Phil Hughes committed
431
432
433
434
435
.dropdown-menu-drop-up {
  top: auto;
  bottom: 100%;
}

436
437
438
439
440
441
442
443
444
445
.dropdown-menu-large {
  width: 340px;
}

.dropdown-menu-no-wrap {
  a {
    white-space: normal;
  }
}

Phil Hughes's avatar
Phil Hughes committed
446
447
448
449
.dropdown-menu-full-width {
  width: 100%;
}

Phil Hughes's avatar
Phil Hughes committed
450
.dropdown-menu-paging {
451
452
  .dropdown-page-two,
  .dropdown-menu-back {
Phil Hughes's avatar
Phil Hughes committed
453
454
455
456
457
458
459
460
    display: none;
  }

  &.is-page-two {
    .dropdown-page-one {
      display: none;
    }

461
462
    .dropdown-page-two,
    .dropdown-menu-back {
Phil Hughes's avatar
Phil Hughes committed
463
464
      display: block;
    }
465
466
467
468

    .dropdown-content {
      padding: 0 10px;
    }
Phil Hughes's avatar
Phil Hughes committed
469
470
471
472
473
474
  }
}

.dropdown-menu-user {
  .avatar {
    float: left;
475
476
    width: 2 * $gl-padding;
    height: 2 * $gl-padding;
Phil Hughes's avatar
Phil Hughes committed
477
478
479
480
481
482
    margin: 0 10px 0 0;
  }
}

.dropdown-menu-user-full-name {
  display: block;
483
  font-weight: $gl-font-weight-normal;
484
  line-height: 16px;
Phil Hughes's avatar
Phil Hughes committed
485
486
487
488
489
490
491
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.dropdown-menu-user-username {
  display: block;
492
  line-height: 16px;
Phil Hughes's avatar
Phil Hughes committed
493
494
495
496
497
498
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.dropdown-select {
499
  width: $dropdown-width;
Nur Rony's avatar
Nur Rony committed
500

Clement Ho's avatar
Clement Ho committed
501
  @include media-breakpoint-down(sm) {
Nur Rony's avatar
Nur Rony committed
502
503
    width: 100%;
  }
Phil Hughes's avatar
Phil Hughes committed
504
505
}

Phil Hughes's avatar
Phil Hughes committed
506
.dropdown-menu-selectable {
507
  li {
haseeb's avatar
haseeb committed
508
    a,
509
510
    button,
    .dropdown-item {
511
512
      padding: 8px 40px;
      position: relative;
Phil Hughes's avatar
Phil Hughes committed
513

514
515
516
      &.is-indeterminate,
      &.is-active {
        color: $gl-text-color;
517
518

        &::before {
519
520
521
522
523
524
525
526
527
528
529
          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;
        }

530
531
        &.dropdown-menu-user-link::before {
          top: 50%;
532
533
        }
      }
Alfredo Sumaran's avatar
Alfredo Sumaran committed
534

535
      &.is-indeterminate::before {
536
        content: '\f068';
537
      }
Alfredo Sumaran's avatar
Alfredo Sumaran committed
538

539
      &.is-active::before {
540
        content: '\f00c';
541
      }
Alfredo Sumaran's avatar
Alfredo Sumaran committed
542
    }
Phil Hughes's avatar
Phil Hughes committed
543
544
545
  }
}

Phil Hughes's avatar
Phil Hughes committed
546
547
.dropdown-title {
  position: relative;
548
549
550
  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  padding-bottom: #{2 * $dropdown-item-padding-y};
  margin-bottom: $dropdown-item-padding-y;
551
  font-weight: $gl-font-weight-bold;
Phil Hughes's avatar
Phil Hughes committed
552
553
554
555
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
556
  border-bottom: 1px solid $dropdown-divider-bg;
Phil Hughes's avatar
Phil Hughes committed
557
558
559
560
561
  overflow: hidden;
}

.dropdown-title-button {
  position: absolute;
562
  top: 0;
Phil Hughes's avatar
Phil Hughes committed
563
  padding: 0;
Phil Hughes's avatar
Phil Hughes committed
564
  color: $dropdown-title-btn-color;
Phil Hughes's avatar
Phil Hughes committed
565
566
567
  font-size: 14px;
  border: 0;
  background: none;
568
  outline: 0;
Phil Hughes's avatar
Phil Hughes committed
569
570

  &:hover {
Phil Hughes's avatar
Phil Hughes committed
571
    color: darken($dropdown-title-btn-color, 15%);
Phil Hughes's avatar
Phil Hughes committed
572
573
574
575
  }
}

.dropdown-menu-close {
576
577
  top: $gl-padding-4;
  right: $gl-padding-8;
578
579
  width: 20px;
  height: 20px;
Phil Hughes's avatar
Phil Hughes committed
580
581
}

582
583
584
585
.dropdown-menu-close-icon {
  vertical-align: middle;
}

Phil Hughes's avatar
Phil Hughes committed
586
.dropdown-menu-back {
587
588
  left: 7px;
  top: 2px;
Phil Hughes's avatar
Phil Hughes committed
589
590
591
592
593
}

.dropdown-input {
  position: relative;
  margin-bottom: 10px;
594
  padding: 0 10px;
Phil Hughes's avatar
Phil Hughes committed
595

596
  .fa,
597
598
  .input-icon,
  .ic-search {
Phil Hughes's avatar
Phil Hughes committed
599
    position: absolute;
600
    top: $gl-padding-8;
601
    right: 20px;
Sam Rose's avatar
Sam Rose committed
602
    color: $dropdown-input-fa-color;
Phil Hughes's avatar
Phil Hughes committed
603
604
605
    font-size: 12px;
    pointer-events: none;
  }
606
607
608
609
610

  .dropdown-input-clear {
    display: none;
    cursor: pointer;
    pointer-events: all;
611
612
613
    right: 22px;
    top: 9px;
    font-size: 14px;
614
615
616
617
618
619
620
621
622
623
624
  }

  &.has-value {
    .dropdown-input-clear {
      display: block;
    }

    .dropdown-input-search {
      display: none;
    }
  }
Phil Hughes's avatar
Phil Hughes committed
625
626
}

627
628
.dropdown-input-field,
.default-dropdown-input {
Phil Hughes's avatar
Phil Hughes committed
629
  display: block;
Phil Hughes's avatar
Phil Hughes committed
630
  width: 100%;
631
  min-height: 30px;
Phil Hughes's avatar
Phil Hughes committed
632
  padding: 0 7px;
633
  color: $gl-gray-700;
Phil Hughes's avatar
Phil Hughes committed
634
  line-height: 30px;
635
  border: 1px solid $dropdown-divider-bg;
Phil Hughes's avatar
Phil Hughes committed
636
637
638
639
  border-radius: 2px;
  outline: 0;

  &:focus {
640
    color: $gl-gray-700;
641
    border-color: $blue-300;
Phil Hughes's avatar
Phil Hughes committed
642
    box-shadow: 0 0 4px $dropdown-input-focus-shadow;
Phil Hughes's avatar
Phil Hughes committed
643

644
    ~ .fa {
645
      color: $gl-gray-700;
Phil Hughes's avatar
Phil Hughes committed
646
647
648
649
    }
  }

  &:hover {
650
    ~ .fa {
651
      color: $gl-gray-700;
Phil Hughes's avatar
Phil Hughes committed
652
653
654
655
656
    }
  }
}

.dropdown-content {
657
  max-height: 252px;
658
  overflow-y: auto;
Phil Hughes's avatar
Phil Hughes committed
659
660
}

661
662
663
664
665
.dropdown-info-note {
  color: $gl-text-color-secondary;
  text-align: center;
}

Phil Hughes's avatar
Phil Hughes committed
666
667
668
669
.dropdown-footer {
  padding-top: 10px;
  margin-top: 10px;
  font-size: 13px;
670
  border-top: 1px solid $dropdown-divider-bg;
Phil Hughes's avatar
Phil Hughes committed
671
672
}

673
674
675
676
677
.dropdown-footer-content {
  padding-left: 10px;
  padding-right: 10px;
}

Phil Hughes's avatar
Phil Hughes committed
678
679
680
681
682
683
684
.dropdown-due-date-footer {
  padding-top: 0;
  margin-left: 10px;
  margin-right: 10px;
  border-top: 0;
}

685
686
687
688
.dropdown-footer-list {
  font-size: 14px;

  a {
689
    cursor: pointer;
690
691
692
693
    padding-left: 10px;
  }
}

694
695
696
697
698
699
700
701
702
703
.dropdown-create-new-item-button {
  @include dropdown-link;

  width: 100%;
  background-color: transparent;
  border: 0;
  text-align: left;
  text-overflow: ellipsis;
}

Phil Hughes's avatar
Phil Hughes committed
704
705
706
707
708
709
710
711
.dropdown-loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  z-index: 9;
Phil Hughes's avatar
Phil Hughes committed
712
  background-color: $dropdown-loading-bg;
Phil Hughes's avatar
Phil Hughes committed
713
714
715
716
717
718
719
720
721
722
  font-size: 28px;

  .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -14px;
    margin-left: -14px;
  }
}
723

724
725
726
.dropdown-label-box {
  position: relative;
  top: 3px;
727
  margin-right: 5px;
728
  display: inline-block;
729
730
731
  width: 15px;
  height: 15px;
  border-radius: $border-radius-base;
732
}
Phil Hughes's avatar
Phil Hughes committed
733

734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
.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;
  }
}

Phil Hughes's avatar
Phil Hughes committed
758
.dropdown-menu-due-date {
759
760
761
762
  .dropdown-content {
    max-height: 230px;
  }

Phil Hughes's avatar
Phil Hughes committed
763
  .pika-single {
764
765
    position: relative !important;
    top: 0 !important;
Phil Hughes's avatar
Phil Hughes committed
766
767
    border: 0;
    box-shadow: none;
Phil Hughes's avatar
Phil Hughes committed
768
769
  }

Phil Hughes's avatar
Phil Hughes committed
770
771
772
  .pika-lendar {
    margin-top: -5px;
    margin-bottom: 0;
Phil Hughes's avatar
Phil Hughes committed
773
774
  }
}
775
776
777

.dropdown-menu-inner-title {
  display: block;
tauriedavis's avatar
tauriedavis committed
778
  color: $gl-text-color;
779
  font-weight: $gl-font-weight-bold;
780
781
782
783
}

.dropdown-menu-inner-content {
  display: block;
tauriedavis's avatar
tauriedavis committed
784
  color: $gl-text-color-secondary;
785
}
Phil Hughes's avatar
Phil Hughes committed
786
787
788

.dropdown-toggle-text {
  &.is-default {
tauriedavis's avatar
tauriedavis committed
789
    color: $gl-text-color-secondary;
Phil Hughes's avatar
Phil Hughes committed
790
791
  }
}
792

Nur Rony's avatar
Nur Rony committed
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
.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;

808
809
810
811
  &.is-hidden {
    @include set-invisible;
    overflow: hidden;
  }
Nur Rony's avatar
Nur Rony committed
812
}
813

Clement Ho's avatar
Clement Ho committed
814
@include media-breakpoint-down(xs) {
815
  .navbar-gitlab {
816
    li.dropdown {
817
818
819
820
821
822
823
824
825
826
827
      position: static;
    }
  }

  header.navbar-gitlab .dropdown {
    .dropdown-menu,
    .dropdown-menu-nav {
      width: 100%;
      min-width: 100%;
    }
  }
828
829
830
831
832
833
834

  header.navbar-gitlab-new .header-content .dropdown {
    .dropdown-menu {
      left: 0;
      min-width: 100%;
    }
  }
835
836
}

837
header.header-content .dropdown-menu.frequent-items-dropdown-menu {
838
839
840
  padding: 0;
}

841
.frequent-items-dropdown-container {
842
843
844
  display: flex;
  flex-direction: row;
  width: 500px;
845
  height: 354px;
846

847
848
  .frequent-items-dropdown-sidebar,
  .frequent-items-dropdown-content {
849
850
851
852
853
854
855
    padding: 8px 0;
  }

  .loading-animation {
    color: $almost-black;
  }

856
  .frequent-items-dropdown-sidebar {
857
858
859
860
    width: 30%;
    border-right: 1px solid $border-color;
  }

861
  .frequent-items-dropdown-content {
862
863
864
865
    position: relative;
    width: 70%;
  }

Clement Ho's avatar
Clement Ho committed
866
  @include media-breakpoint-down(xs) {
867
868
869
870
871
    flex-direction: column;
    width: 100%;
    height: auto;
    flex: 1;

872
873
    .frequent-items-dropdown-sidebar,
    .frequent-items-dropdown-content {
874
875
876
      width: 100%;
    }

877
    .frequent-items-dropdown-sidebar {
878
879
880
881
882
      border-bottom: 1px solid $border-color;
      border-right: 0;
    }
  }

883
884
885
886
887
888
889
890
  .section-header,
  .frequent-items-list-container li.section-empty {
    padding: 0 $gl-padding;
    color: $gl-text-color-secondary;
    font-size: $gl-font-size;
  }

  .frequent-items-list-container {
891
    height: 304px;
892
893
    padding: 8px 0;
    overflow-y: auto;
Phil Hughes's avatar
Phil Hughes committed
894
895

    li.section-empty.section-failure {
896
      color: $red-700;
Phil Hughes's avatar
Phil Hughes committed
897
    }
898

899
900
901
    .frequent-items-list-item-container a {
      display: flex;
    }
902
903
904
905
906
907
908
909
910
911
  }

  .search-input-container {
    position: relative;
    padding: 4px $gl-padding;

    .search-icon {
      position: absolute;
      top: 13px;
      right: 25px;
912
      color: $gray-100;
913
914
915
916
917
918
919
920
    }
  }

  .section-header {
    font-weight: 700;
    margin-top: 8px;
  }

Clement Ho's avatar
Clement Ho committed
921
  @include media-breakpoint-down(xs) {
922
    .frequent-items-list-container {
923
924
925
926
927
928
929
      width: auto;
      height: auto;
      padding-bottom: 0;
    }
  }
}

930
931
932
.frequent-items-list-item-container {
  .frequent-items-item-avatar-container,
  .frequent-items-item-metadata-container {
933
934
935
    float: left;
  }

936
937
938
939
940
941
942
943
  .frequent-items-item-metadata-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .frequent-items-item-title,
  .frequent-items-item-namespace {
944
945
    max-width: 250px;
    text-overflow: ellipsis;
946
    white-space: nowrap;
947
948
949
  }

  &:hover {
950
    .frequent-items-item-avatar-container .avatar {
951
      border-color: $gray-100;
952
953
954
    }
  }

955
  .frequent-items-item-title {
956
957
958
959
960
    font-size: $gl-font-size;
    font-weight: 400;
    line-height: 16px;
  }

961
  .frequent-items-item-namespace {
962
963
964
965
966
967
    margin-top: 4px;
    font-size: 12px;
    line-height: 12px;
    color: $gl-text-color-secondary;
  }

Clement Ho's avatar
Clement Ho committed
968
  @include media-breakpoint-down(xs) {
969
    .frequent-items-item-metadata-container {
970
971
972
973
      float: none;
    }
  }
}
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998

.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;
  }
}