dropdowns.scss 16.4 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
@mixin chevron-active {
  .fa-chevron-down {
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
13
    color: $gray-darkest;
14
15
16
  }
}

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

Clement Ho's avatar
Clement Ho committed
35
    @include media-breakpoint-down(xs) {
36
37
      width: 100%;
    }
38

39
    &.frequent-items-dropdown-menu {
40
41
42
43
      padding: 0;
      overflow-y: initial;
      max-height: initial;
    }
Phil Hughes's avatar
Phil Hughes committed
44
  }
Phil Hughes's avatar
Phil Hughes committed
45

46
  .dropdown-toggle,
Phil Hughes's avatar
Phil Hughes committed
47
  .dropdown-menu-toggle {
48
    @include chevron-active;
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
49
    border-color: $gray-darkest;
Phil Hughes's avatar
Phil Hughes committed
50
  }
51

52
  [data-toggle='dropdown'] {
53
54
    outline: 0;
  }
Phil Hughes's avatar
Phil Hughes committed
55
56
}

57
58
59
60
61
// Get search dropdown to line up with other nav dropdowns
.search-input-container .dropdown-menu {
  margin-top: 11px;
}

62
63
.dropdown-toggle {
  padding: 6px 8px 6px 10px;
64
  background-color: $white-light;
65
  color: $gl-text-color;
66
  font-size: 14px;
Phil Hughes's avatar
Phil Hughes committed
67
  text-align: left;
68
  border: 1px solid $border-color;
Phil Hughes's avatar
Phil Hughes committed
69
  border-radius: $border-radius-base;
Phil Hughes's avatar
Phil Hughes committed
70
71
  white-space: nowrap;

72
73
74
75
  &:disabled.read-only {
    color: $gl-text-color !important;
  }

76
77
78
79
  &.no-outline {
    outline: 0;
  }

80
81
82
  &.large {
    width: 200px;
  }
83
84
85
86
87
88
89
90

  &.wide {
    width: 100%;

    + .dropdown-select {
      width: 100%;
    }
  }
91
92
93
94
95
96
97
98
99

  // 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;
  }
100
101

  .fa {
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
102
    color: $gray-darkest;
103
104
105
106
107
  }

  .fa-chevron-down {
    font-size: $dropdown-chevron-size;
    position: relative;
108
    top: -2px;
109
110
111
112
    margin-left: 5px;
  }

  &:hover {
113
    @include chevron-active;
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
114
    border-color: $gray-darkest;
115
116
117
  }

  &:focus:active {
118
    @include chevron-active;
119
    border-color: $dropdown-toggle-active-border-color;
120
    outline: 0;
121
122
123
124
125
  }
}

.dropdown-menu-toggle {
  @extend .dropdown-toggle;
126
  padding-right: 25px;
127
  position: relative;
Dimitrie Hoekstra's avatar
Dimitrie Hoekstra committed
128
  width: 163px;
129
130
131
132
133
134
135
136
  text-overflow: ellipsis;
  overflow: hidden;

  .fa {
    position: absolute;

    &.fa-spinner {
      font-size: 16px;
137
      margin-top: -3px;
138
139
140
    }
  }

141
142
  .fa-chevron-down,
  .fa-spinner {
143
144
145
146
    position: absolute;
    top: 11px;
    right: 8px;
  }
147
148
149
150
151
152
153

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

156
@mixin dropdown-item-hover {
157
  background-color: $gray-darker;
158
  color: $gl-text-color;
159
  outline: 0;
160

161
  // make sure the text color is not overridden
162
163
164
  &.text-danger {
    color: $brand-danger;
  }
165
166
167
168

  .avatar {
    border-color: $white-light;
  }
169
170
}

171
@mixin dropdown-link {
172
173
174
175
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
176
  display: block;
177
  font-weight: $gl-font-weight-normal;
178
  position: relative;
179
  padding: 8px 16px;
180
  color: $gl-text-color;
181
182
  line-height: normal;
  white-space: normal;
183
  overflow: hidden;
184
185
  text-align: left;
  width: 100%;
186

187
  // make sure the text color is not overridden
188
189
190
191
  &.text-danger {
    color: $brand-danger;
  }

192
193
194
195
196
  &.disable-hover {
    text-decoration: none;
  }

  &:not(.disable-hover):hover,
197
  &:active,
198
199
  &:focus,
  &.is-focused {
200
201
    @include dropdown-item-hover;

202
203
    text-decoration: none;

Clement Ho's avatar
Clement Ho committed
204
    .badge.badge-pill {
205
      background-color: darken($blue-50, 5%);
206
207
208
209
210
    }
  }

  &.dropdown-menu-user-link {
    line-height: 16px;
211
212
213
214
215
216
217
    padding-top: 10px;
    padding-bottom: 7px;
    white-space: nowrap;

    .dropdown-menu-user-username {
      display: block;
    }
218
219
220
221
222
223
224
225
226
227
  }

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

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

247
248
249
250
  &.dropdown-open-top {
    margin-bottom: $dropdown-vertical-offset;
  }

251
252
253
254
255
  &.dropdown-open-left {
    right: 0;
    left: auto;
  }

Phil Hughes's avatar
Phil Hughes committed
256
257
258
259
260
261
262
263
264
265
  &.is-loading {
    .dropdown-content {
      display: none;
    }

    .dropdown-loading {
      display: block;
    }
  }

266
  .shortcut-mappings {
267
268
269
    display: none;
  }

270
  &.shortcuts .shortcut-mappings {
271
    display: inline-block;
272
    margin-right: 5px;
273
274
  }

Phil Hughes's avatar
Phil Hughes committed
275
276
277
278
279
  ul {
    margin: 0;
    padding: 0;
  }

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

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

  .divider {
294
    height: 1px;
295
    margin: #{$grid-size / 2} 0;
296
297
    padding: 0;
    background-color: $dropdown-divider-color;
298
299
300
301

    &:hover {
      background-color: $dropdown-divider-color;
    }
302
303
304
  }

  .separator {
Phil Hughes's avatar
Phil Hughes committed
305
306
307
308
309
310
311
    width: 100%;
    height: 1px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: $dropdown-divider-color;
  }

312
313
314
315
316
317
318
  .dropdown-menu-empty-item a {
    &:hover,
    &:focus {
      background-color: transparent;
    }
  }

319
  .dropdown-header {
320
    color: $gl-text-color-secondary;
321
322
    font-size: 13px;
    line-height: 22px;
323
    padding: 8px 16px;
324
325
  }

Clement Ho's avatar
Clement Ho committed
326
327
328
329
  &.capitalize-header .dropdown-header {
    text-transform: capitalize;
  }

Tim Zallmann's avatar
Tim Zallmann committed
330
  .dropdown-bold-header {
331
    font-weight: $gl-font-weight-bold;
Tim Zallmann's avatar
Tim Zallmann committed
332
333
334
335
    line-height: 22px;
    padding: 0 16px;
  }

Tim Zallmann's avatar
Tim Zallmann committed
336
  .separator + .dropdown-header,
Tim Zallmann's avatar
Tim Zallmann committed
337
  .separator + .dropdown-bold-header {
338
    padding-top: 10px;
339
  }
340
341
342
343

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

Clement Ho's avatar
Clement Ho committed
347
  .badge.badge-pill + span:not(.badge.badge-pill) {
348
349
350
    // Expects up to 3 digits on the badge
    margin-right: 40px;
  }
Phil Hughes's avatar
Phil Hughes committed
351
352
}

353
354
355
356
357
.droplab-dropdown {
  .dropdown-toggle > i {
    pointer-events: none;
  }

358
  .dropdown-menu li {
359
    cursor: pointer;
360

361
362
363
364
    &.droplab-item-active button {
      @include dropdown-item-hover;
    }

Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
365
366
    > a,
    > button {
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
367
      display: flex;
368
369
      margin: 0;
      text-overflow: inherit;
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
370
      text-align: left;
371

Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
372
373
374
      &.btn .fa:not(:last-child) {
        margin-left: 5px;
      }
375
376
377
378
379
380
    }

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

Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
381
    .icon {
382
383
      visibility: hidden;
    }
384
385
386
387
388
389
390
391
392
393

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

      p {
        margin-bottom: 0;
      }
    }
394
395
  }

Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
396
  .icon {
397
398
399
400
401
402
403
404
    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
405
406
407
408
409
410
  display: none;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

411
.comment-type-dropdown.show .dropdown-menu {
412
413
414
  display: block;
}

Nur Rony's avatar
Nur Rony committed
415
416
417
418
419
420
421
.filtered-search-box-input-container {
  .dropdown-menu,
  .dropdown-menu-nav {
    max-width: 280px;
  }
}

Phil Hughes's avatar
Phil Hughes committed
422
423
424
425
426
.dropdown-menu-drop-up {
  top: auto;
  bottom: 100%;
}

427
428
429
430
431
432
433
434
435
436
.dropdown-menu-large {
  width: 340px;
}

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

Phil Hughes's avatar
Phil Hughes committed
437
438
439
440
.dropdown-menu-full-width {
  width: 100%;
}

Phil Hughes's avatar
Phil Hughes committed
441
.dropdown-menu-paging {
442
443
  .dropdown-page-two,
  .dropdown-menu-back {
Phil Hughes's avatar
Phil Hughes committed
444
445
446
447
448
449
450
451
    display: none;
  }

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

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

    .dropdown-content {
      padding: 0 10px;
    }
Phil Hughes's avatar
Phil Hughes committed
460
461
462
463
464
465
  }
}

.dropdown-menu-user {
  .avatar {
    float: left;
466
467
    width: 2 * $gl-padding;
    height: 2 * $gl-padding;
Phil Hughes's avatar
Phil Hughes committed
468
469
470
471
472
473
    margin: 0 10px 0 0;
  }
}

.dropdown-menu-user-full-name {
  display: block;
474
  font-weight: $gl-font-weight-normal;
475
  line-height: 16px;
Phil Hughes's avatar
Phil Hughes committed
476
477
478
479
480
481
482
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.dropdown-menu-user-username {
  display: block;
483
  line-height: 16px;
Phil Hughes's avatar
Phil Hughes committed
484
485
486
487
488
489
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.dropdown-select {
490
  width: $dropdown-width;
Nur Rony's avatar
Nur Rony committed
491

Clement Ho's avatar
Clement Ho committed
492
  @include media-breakpoint-down(sm) {
Nur Rony's avatar
Nur Rony committed
493
494
    width: 100%;
  }
Phil Hughes's avatar
Phil Hughes committed
495
496
}

Phil Hughes's avatar
Phil Hughes committed
497
.dropdown-menu-selectable {
498
  li {
haseeb's avatar
haseeb committed
499
500
    a,
    button {
501
502
      padding: 8px 40px;
      position: relative;
Phil Hughes's avatar
Phil Hughes committed
503

504
505
506
      &.is-indeterminate,
      &.is-active {
        color: $gl-text-color;
507
508

        &::before {
509
510
511
512
513
514
515
516
517
518
519
          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;
        }

520
521
        &.dropdown-menu-user-link::before {
          top: 50%;
522
523
        }
      }
Alfredo Sumaran's avatar
Alfredo Sumaran committed
524

525
      &.is-indeterminate::before {
526
        content: '\f068';
527
      }
Alfredo Sumaran's avatar
Alfredo Sumaran committed
528

529
      &.is-active::before {
530
        content: '\f00c';
531
      }
Alfredo Sumaran's avatar
Alfredo Sumaran committed
532
    }
Phil Hughes's avatar
Phil Hughes committed
533
534
535
  }
}

Phil Hughes's avatar
Phil Hughes committed
536
537
.dropdown-title {
  position: relative;
dimitrieh's avatar
dimitrieh committed
538
  padding: 2px 25px 10px;
539
  margin: 0 10px 10px;
540
  font-weight: $gl-font-weight-bold;
Phil Hughes's avatar
Phil Hughes committed
541
542
543
544
545
546
547
548
549
550
  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;
551
  top: 0;
Phil Hughes's avatar
Phil Hughes committed
552
  padding: 0;
Phil Hughes's avatar
Phil Hughes committed
553
  color: $dropdown-title-btn-color;
Phil Hughes's avatar
Phil Hughes committed
554
555
556
  font-size: 14px;
  border: 0;
  background: none;
557
  outline: 0;
Phil Hughes's avatar
Phil Hughes committed
558
559

  &:hover {
Phil Hughes's avatar
Phil Hughes committed
560
    color: darken($dropdown-title-btn-color, 15%);
Phil Hughes's avatar
Phil Hughes committed
561
562
563
564
  }
}

.dropdown-menu-close {
Phil Hughes's avatar
Phil Hughes committed
565
  right: 5px;
566
567
  width: 20px;
  height: 20px;
dimitrieh's avatar
dimitrieh committed
568
  top: -1px;
Phil Hughes's avatar
Phil Hughes committed
569
570
}

571
572
573
574
.dropdown-menu-close-icon {
  vertical-align: middle;
}

Phil Hughes's avatar
Phil Hughes committed
575
.dropdown-menu-back {
576
577
  left: 7px;
  top: 2px;
Phil Hughes's avatar
Phil Hughes committed
578
579
580
581
582
}

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

585
  .fa,
586
587
  .input-icon,
  .ic-search {
Phil Hughes's avatar
Phil Hughes committed
588
    position: absolute;
589
    top: $gl-padding-8;
590
    right: 20px;
Sam Rose's avatar
Sam Rose committed
591
    color: $dropdown-input-fa-color;
Phil Hughes's avatar
Phil Hughes committed
592
593
594
    font-size: 12px;
    pointer-events: none;
  }
595
596
597
598
599

  .dropdown-input-clear {
    display: none;
    cursor: pointer;
    pointer-events: all;
600
601
602
    right: 22px;
    top: 9px;
    font-size: 14px;
603
604
605
606
607
608
609
610
611
612
613
  }

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

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

616
617
.dropdown-input-field,
.default-dropdown-input {
Phil Hughes's avatar
Phil Hughes committed
618
  display: block;
Phil Hughes's avatar
Phil Hughes committed
619
  width: 100%;
620
  min-height: 30px;
Phil Hughes's avatar
Phil Hughes committed
621
  padding: 0 7px;
622
  color: $gl-gray-700;
Phil Hughes's avatar
Phil Hughes committed
623
624
625
626
627
628
  line-height: 30px;
  border: 1px solid $dropdown-divider-color;
  border-radius: 2px;
  outline: 0;

  &:focus {
629
    color: $gl-gray-700;
630
    border-color: $blue-300;
Phil Hughes's avatar
Phil Hughes committed
631
    box-shadow: 0 0 4px $dropdown-input-focus-shadow;
Phil Hughes's avatar
Phil Hughes committed
632

633
    ~ .fa {
634
      color: $gl-gray-700;
Phil Hughes's avatar
Phil Hughes committed
635
636
637
638
    }
  }

  &:hover {
639
    ~ .fa {
640
      color: $gl-gray-700;
Phil Hughes's avatar
Phil Hughes committed
641
642
643
644
645
    }
  }
}

.dropdown-content {
646
  max-height: 252px;
647
  overflow-y: auto;
Phil Hughes's avatar
Phil Hughes committed
648
649
}

650
651
652
653
654
.dropdown-info-note {
  color: $gl-text-color-secondary;
  text-align: center;
}

Phil Hughes's avatar
Phil Hughes committed
655
656
657
658
659
660
661
.dropdown-footer {
  padding-top: 10px;
  margin-top: 10px;
  font-size: 13px;
  border-top: 1px solid $dropdown-divider-color;
}

662
663
664
665
666
.dropdown-footer-content {
  padding-left: 10px;
  padding-right: 10px;
}

Phil Hughes's avatar
Phil Hughes committed
667
668
669
670
671
672
673
.dropdown-due-date-footer {
  padding-top: 0;
  margin-left: 10px;
  margin-right: 10px;
  border-top: 0;
}

674
675
676
677
.dropdown-footer-list {
  font-size: 14px;

  a {
678
    cursor: pointer;
679
680
681
682
    padding-left: 10px;
  }
}

683
684
685
686
687
688
689
690
691
692
.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
693
694
695
696
697
698
699
700
.dropdown-loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  z-index: 9;
Phil Hughes's avatar
Phil Hughes committed
701
  background-color: $dropdown-loading-bg;
Phil Hughes's avatar
Phil Hughes committed
702
703
704
705
706
707
708
709
710
711
  font-size: 28px;

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

713
714
715
.dropdown-label-box {
  position: relative;
  top: 3px;
716
  margin-right: 5px;
717
  display: inline-block;
718
719
720
  width: 15px;
  height: 15px;
  border-radius: $border-radius-base;
721
}
Phil Hughes's avatar
Phil Hughes committed
722

723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
.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
747
.dropdown-menu-due-date {
748
749
750
751
  .dropdown-content {
    max-height: 230px;
  }

Phil Hughes's avatar
Phil Hughes committed
752
  .pika-single {
753
754
    position: relative !important;
    top: 0 !important;
Phil Hughes's avatar
Phil Hughes committed
755
756
    border: 0;
    box-shadow: none;
Phil Hughes's avatar
Phil Hughes committed
757
758
  }

Phil Hughes's avatar
Phil Hughes committed
759
760
761
  .pika-lendar {
    margin-top: -5px;
    margin-bottom: 0;
Phil Hughes's avatar
Phil Hughes committed
762
763
  }
}
764
765
766

.dropdown-menu-inner-title {
  display: block;
tauriedavis's avatar
tauriedavis committed
767
  color: $gl-text-color;
768
  font-weight: $gl-font-weight-bold;
769
770
771
772
}

.dropdown-menu-inner-content {
  display: block;
tauriedavis's avatar
tauriedavis committed
773
  color: $gl-text-color-secondary;
774
}
Phil Hughes's avatar
Phil Hughes committed
775
776
777

.dropdown-toggle-text {
  &.is-default {
tauriedavis's avatar
tauriedavis committed
778
    color: $gl-text-color-secondary;
Phil Hughes's avatar
Phil Hughes committed
779
780
  }
}
781

Nur Rony's avatar
Nur Rony committed
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
.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;

797
798
799
800
  &.is-hidden {
    @include set-invisible;
    overflow: hidden;
  }
Nur Rony's avatar
Nur Rony committed
801
}
802

Clement Ho's avatar
Clement Ho committed
803
@include media-breakpoint-down(xs) {
804
805
  .navbar-gitlab {
    li.header-projects,
806
    li.header-groups,
807
808
809
810
811
812
813
814
815
816
817
818
819
820
    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%;
    }
  }
821
822
823
824
825
826
827

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

830
header.header-content .dropdown-menu.frequent-items-dropdown-menu {
831
832
833
  padding: 0;
}

834
.frequent-items-dropdown-container {
835
836
837
  display: flex;
  flex-direction: row;
  width: 500px;
838
  height: 354px;
839

840
841
  .frequent-items-dropdown-sidebar,
  .frequent-items-dropdown-content {
842
843
844
845
846
847
848
    padding: 8px 0;
  }

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

849
  .frequent-items-dropdown-sidebar {
850
851
852
853
    width: 30%;
    border-right: 1px solid $border-color;
  }

854
  .frequent-items-dropdown-content {
855
856
857
858
    position: relative;
    width: 70%;
  }

Clement Ho's avatar
Clement Ho committed
859
  @include media-breakpoint-down(xs) {
860
861
862
863
864
    flex-direction: column;
    width: 100%;
    height: auto;
    flex: 1;

865
866
    .frequent-items-dropdown-sidebar,
    .frequent-items-dropdown-content {
867
868
869
      width: 100%;
    }

870
    .frequent-items-dropdown-sidebar {
871
872
873
874
875
      border-bottom: 1px solid $border-color;
      border-right: 0;
    }
  }

876
877
878
879
880
881
882
883
  .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 {
884
    height: 304px;
885
886
    padding: 8px 0;
    overflow-y: auto;
Phil Hughes's avatar
Phil Hughes committed
887
888

    li.section-empty.section-failure {
889
      color: $red-700;
Phil Hughes's avatar
Phil Hughes committed
890
    }
891

892
893
894
    .frequent-items-list-item-container a {
      display: flex;
    }
895
896
897
898
899
900
901
902
903
904
  }

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

    .search-icon {
      position: absolute;
      top: 13px;
      right: 25px;
905
      color: $gray-100;
906
907
908
909
910
911
912
913
    }
  }

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

Clement Ho's avatar
Clement Ho committed
914
  @include media-breakpoint-down(xs) {
915
    .frequent-items-list-container {
916
917
918
919
920
921
922
      width: auto;
      height: auto;
      padding-bottom: 0;
    }
  }
}

923
924
925
.frequent-items-list-item-container {
  .frequent-items-item-avatar-container,
  .frequent-items-item-metadata-container {
926
927
928
    float: left;
  }

929
930
931
932
933
934
935
936
  .frequent-items-item-metadata-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .frequent-items-item-title,
  .frequent-items-item-namespace {
937
938
    max-width: 250px;
    text-overflow: ellipsis;
939
    white-space: nowrap;
940
941
942
  }

  &:hover {
943
    .frequent-items-item-avatar-container .avatar {
944
      border-color: $gray-100;
945
946
947
    }
  }

948
  .frequent-items-item-title {
949
950
951
952
953
    font-size: $gl-font-size;
    font-weight: 400;
    line-height: 16px;
  }

954
  .frequent-items-item-namespace {
955
956
957
958
959
960
    margin-top: 4px;
    font-size: 12px;
    line-height: 12px;
    color: $gl-text-color-secondary;
  }

Clement Ho's avatar
Clement Ho committed
961
  @include media-breakpoint-down(xs) {
962
    .frequent-items-item-metadata-container {
963
964
965
966
      float: none;
    }
  }
}
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991

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