assets/sass/@primer/css/navigation/subnav.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

// Needs refactoring
// Sub nav
.subnav {
  // stylelint-disable-next-line primer/spacing
  margin-bottom: 20px;

  @include clearfix();
}

.subnav-bordered {
  // stylelint-disable-next-line primer/spacing
  padding-bottom: 20px;
  border-bottom: $border-width $border-style $border-gray-light;
}

.subnav-flush {
  margin-bottom: 0;
}

.subnav-item {
  position: relative;
  float: left;
  // stylelint-disable-next-line primer/spacing
  padding: 6px 14px;
  font-weight: $font-weight-bold;
  // stylelint-disable-next-line primer/typography
  line-height: 20px;
  color: $text-gray;
  border: $border;

  + .subnav-item {
    // stylelint-disable-next-line primer/spacing
    margin-left: -1px;
  }

  &:hover,
  &:focus {
    text-decoration: none;
    background-color: $bg-gray;
  }

  &.selected,
  &[aria-selected=true],
  &[aria-current] {
    z-index: 2;
    color: $text-white;
    background-color: $bg-blue;
    // stylelint-disable-next-line primer/borders
    border-color: $blue;
  }

  &:first-child {
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
  }

  &:last-child {
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }
}

.subnav-search {
  position: relative;
  // stylelint-disable-next-line primer/spacing
  margin-left: 10px;
}

.subnav-search-input {
  width: 320px;
  // stylelint-disable-next-line primer/spacing
  padding-left: 30px;
  color: $text-gray;
}

.subnav-search-input-wide {
  width: 500px;
}

.subnav-search-icon {
  position: absolute;
  top: 9px;
  left: 8px;
  display: block;
  // stylelint-disable-next-line primer/colors
  color: darken($gray-300, 4%);
  text-align: center;
  pointer-events: none;
}

.subnav-search-context {
  .btn {
    // stylelint-disable-next-line primer/colors
    color: $gray-700;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    &:hover,
    &:focus,
    &:active,
    &.selected {
      z-index: 2;
    }
  }

  + .subnav-search {
    // stylelint-disable-next-line primer/spacing
    margin-left: -1px;

    .subnav-search-input {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .select-menu-modal-holder {
    z-index: 30;
  }

  .select-menu-modal {
    width: 220px;
  }

  .select-menu-item-icon {
    color: inherit;
  }
}

.subnav-spacer-right {
  // stylelint-disable-next-line primer/spacing
  padding-right: 10px;
}