header.scss 6.88 KB
Newer Older
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
1 2 3 4
/*
 *  Application Header
 *
 */
5

6
header {
7 8
  @include new-style-dropdown;

9
  transition: padding $sidebar-transition-duration;
10

11
  &.navbar-empty {
12
    height: $header-height;
13
    background: $white-light;
14
    border-bottom: 1px solid $white-normal;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
15 16

    .center-logo {
17
      margin: 8px 0;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
18
      text-align: center;
19

20 21
      .tanuki-logo,
      img {
22
        height: 36px;
23
      }
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
24
    }
25 26
  }

27
  &.navbar-gitlab {
28
    padding: 0 16px;
29
    z-index: 1000;
30
    margin-bottom: 0;
31
    min-height: $header-height;
32
    background-color: $gray-light;
33
    border: none;
34
    border-bottom: 1px solid $border-color;
35 36
    position: fixed;
    top: 0;
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
37 38
    left: 0;
    right: 0;
Phil Hughes's avatar
Phil Hughes committed
39 40
    color: $gl-text-color-secondary;
    border-radius: 0;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
41

Annabel Dunstone's avatar
Annabel Dunstone committed
42 43 44 45
    @media (max-width: $screen-xs-min) {
      padding: 0 16px;
    }

46
    &.with-horizontal-nav {
47 48 49 50 51 52 53 54 55 56 57
      border-bottom: 0;

      .navbar-border {
        height: 1px;
        position: absolute;
        right: 0;
        left: 0;
        bottom: -1px;
        background-color: $border-color;
        opacity: 0;
      }
58 59
    }

60
    .container-fluid {
61
      width: 100% !important;
62
      filter: none;
63
      padding: 0;
64 65

      .nav > li > a {
Phil Hughes's avatar
Phil Hughes committed
66
        color: currentColor;
67
        font-size: 18px;
68
        padding: 0;
69
        margin: (($header-height - 28) / 2) 3px;
70
        margin-left: 8px;
71
        height: 28px;
72
        min-width: 32px;
73
        line-height: 28px;
74
        text-align: center;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
75

76 77
        &.header-user-dropdown-toggle {
          margin-left: 14px;
78 79 80 81 82 83 84 85

          &:hover,
          &:focus,
          &:active {
            .header-user-avatar {
              border-color: rgba($avatar-border, .2);
            }
          }
86 87
        }

88 89 90
        &:hover,
        &:focus,
        &:active {
Phil Hughes's avatar
Phil Hughes committed
91
          background-color: transparent;
92
          color: $gl-text-color;
tauriedavis's avatar
tauriedavis committed
93

94 95
          svg {
            fill: $gl-text-color;
tauriedavis's avatar
tauriedavis committed
96
          }
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
97
        }
98 99

        .fa-caret-down {
100
          font-size: 14px;
101
        }
102

103 104 105 106 107
        .fa-chevron-down {
          position: relative;
          top: -3px;
          font-size: 10px;
        }
108
      }
109

110
      .user-counter {
111
        svg {
112
          margin-right: 3px;
113
        }
114 115
      }

116
      .navbar-toggle {
117
        color: $nav-toggle-gray;
118
        margin: 5px 0;
119
        border-radius: 0;
Annabel Dunstone's avatar
Annabel Dunstone committed
120 121
        right: -10px;
        padding: 6px 10px;
122 123

        &:hover {
124
          background-color: $white-normal;
125
        }
Annabel Dunstone's avatar
Annabel Dunstone committed
126

127
        &.active {
128
          color: $gl-text-color-secondary;
129
        }
130 131
      }
    }
132
  }
Annabel Dunstone's avatar
Annabel Dunstone committed
133

134
  &.navbar-gitlab-new {
135
    .close-icon {
136 137 138 139
      display: none;
    }

    .menu-expanded {
140
      .more-icon {
141 142 143
        display: none;
      }

144
      .close-icon {
145 146 147 148 149
        display: block;
      }
    }
  }

150 151 152 153 154 155
  .global-dropdown {
    position: absolute;
    left: -10px;

    .badge {
      font-size: 11px;
156 157
    }

158
    li {
159
      &.active a {
160
        font-weight: $gl-font-weight-bold;
161
      }
Annabel Dunstone's avatar
Annabel Dunstone committed
162
    }
163 164
  }

165 166 167 168 169 170 171 172 173
  .global-dropdown-toggle {
    margin: 7px 0;
    font-size: 18px;
    padding: 6px 10px;
    border: none;
    background-color: $gray-light;

    &:hover {
      background-color: $white-normal;
174 175 176 177 178
    }

    &:focus {
      outline: none;
      background-color: $white-normal;
179 180 181
    }
  }

182
  .header-content {
183 184
    display: flex;
    justify-content: space-between;
185
    position: relative;
186
    min-height: $header-height;
187
    padding-left: 30px;
Annabel Dunstone's avatar
Annabel Dunstone committed
188

189 190 191 192 193 194 195 196 197 198 199 200 201
    &.menu-expanded {
      @media (max-width: $screen-xs-max) {
        .header-logo,
        .title-container {
          display: none;
        }

        .navbar-collapse {
          display: block;
        }
      }
    }

202 203 204 205
    .dropdown-menu {
      margin-top: -5px;
    }

206
    .header-logo {
207
      display: inline-block;
208
      margin: 0 12px 0 2px;
209
      position: relative;
210
      top: 10px;
211
      transition-duration: .3s;
Ashley Dumaine's avatar
Ashley Dumaine committed
212

213 214
      svg,
      img {
215
        height: 28px;
216 217
      }

218 219 220
      &:hover {
        cursor: pointer;
      }
221 222
    }

Sam Rose's avatar
Sam Rose committed
223
    .group-name-toggle {
224
      margin: 3px 5px;
Sam Rose's avatar
Sam Rose committed
225 226 227 228 229 230 231 232 233 234
    }

    .group-title {
      &.is-hidden {
        .hidable:not(:last-of-type) {
          display: none;
        }
      }
    }

235 236 237 238
    .title-container {
      display: flex;
      align-items: flex-start;
      flex: 1 1 auto;
239
      padding-top: 14px;
240 241 242
      overflow: hidden;
    }

243
    .title {
244 245
      position: relative;
      padding-right: 20px;
246
      margin: 0;
247
      font-size: 18px;
248
      line-height: 22px;
249
      display: inline-block;
250
      font-weight: $gl-font-weight-normal;
251
      color: $gl-text-color;
252 253
      vertical-align: top;
      white-space: nowrap;
254

255 256
      &.wrap {
        white-space: normal;
257 258
      }

259 260
      &.initializing {
        opacity: 0;
261 262
      }

263
      a {
Phil Hughes's avatar
Phil Hughes committed
264
        color: currentColor;
265

266 267
        &:hover {
          text-decoration: underline;
268
          color: $gl-header-nav-hover-color;
269 270
        }
      }
271 272

      .dropdown-toggle-caret {
273 274 275
        color: $gl-text-color;
        border: transparent;
        background: transparent;
276
        position: absolute;
277
        top: 2px;
278
        right: 3px;
279
        width: 12px;
280
        line-height: 19px;
281
        padding: 0;
Phil Hughes's avatar
Phil Hughes committed
282
        font-size: 10px;
283 284
        text-align: center;
        cursor: pointer;
285 286

        &:hover {
287
          color: $gl-header-nav-hover-color;
288
        }
289 290 291 292 293
      }

      .project-item-select {
        right: auto;
        left: 0;
294
      }
295
    }
296 297

    .navbar-collapse {
298
      flex: 0 0 auto;
299
      border-top: none;
300
      padding: 0;
301

Annabel Dunstone's avatar
Annabel Dunstone committed
302
      @media (max-width: $screen-xs-max) {
303
        flex: 1 1 auto;
304
      }
305
    }
306 307
  }

308 309 310 311
  .project-item-select-holder {
    display: inline;
  }

312
  .impersonation i {
313
    color: $red-500;
314
  }
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
315 316
}

317 318 319 320
.with-performance-bar header.navbar-gitlab {
  top: $performance-bar-height;
}

321 322 323 324
.navbar-nav {
  li {
    .badge {
      position: inherit;
325
      font-weight: $gl-font-weight-normal;
326
      margin-left: -6px;
327 328
      font-size: 11px;
      color: $white-light;
329 330
      padding: 0 5px;
      line-height: 12px;
331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348
      border-radius: 7px;
      box-shadow: 0 1px 0 rgba($gl-header-color, .2);

      &.issues-count {
        background-color: $green-500;
      }

      &.merge-requests-count {
        background-color: $orange-600;
      }

      &.todos-count {
        background-color: $blue-500;
      }
    }
  }
}

349
@media (max-width: $screen-xs-max) {
350
  header .container-fluid {
351 352 353
    font-size: 18px;

    .navbar-nav {
354 355 356
      display: table;
      table-layout: fixed;
      width: 100%;
357
      margin: 0;
358
      text-align: right;
359 360
    }

361 362 363
    .navbar-collapse {
      padding-left: 5px;

364
      .nav > li:not(.hidden-xs) {
365
        display: table-cell !important;
366 367 368 369 370
        width: 25%;

        a {
          margin-right: 8px;
        }
371
      }
372 373
    }
  }
374 375 376 377 378 379 380 381

  .header-user-dropdown-toggle {
    text-align: center;
  }

  .header-user-avatar {
    float: none;
  }
382
}
Phil Hughes's avatar
Phil Hughes committed
383 384 385

.header-user {
  .dropdown-menu-nav {
386
    width: auto;
387
    min-width: 140px;
Phil Hughes's avatar
Phil Hughes committed
388
    margin-top: -5px;
Phil Hughes's avatar
Phil Hughes committed
389
    color: $gl-text-color;
390
    left: auto;
391 392 393 394 395 396 397 398

    .current-user {
      padding: 5px 18px;

      .user-name {
        display: block;
      }
    }
Phil Hughes's avatar
Phil Hughes committed
399 400 401 402 403 404 405
  }
}

.header-user-avatar {
  float: left;
  margin-right: 5px;
  border-radius: 50%;
406
  border: 1px solid $avatar-border;
Phil Hughes's avatar
Phil Hughes committed
407
}