nav.scss 8.11 KB
Newer Older
1
@mixin fade($gradient-direction, $gradient-color) {
2 3
  visibility: hidden;
  opacity: 0;
4
  z-index: 2;
5
  position: absolute;
6
  bottom: 12px;
7 8 9 10
  width: 43px;
  height: 30px;
  transition-duration: .3s;
  -webkit-transform: translateZ(0);
11
  background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4));
12

13 14 15
  &.scrolling {
    visibility: visible;
    opacity: 1;
16 17
    transition-duration: .3s;
  }
18 19 20

  .fa {
    position: relative;
21
    top: 5px;
22
    font-size: 18px;
23
  }
24 25
}

Annabel Dunstone's avatar
Annabel Dunstone committed
26 27 28 29 30
@mixin scrolling-links() {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
31

Annabel Dunstone's avatar
Annabel Dunstone committed
32 33 34 35 36
  &::-webkit-scrollbar {
    display: none;
  }
}

37 38 39 40
.nav-links {
  padding: 0;
  margin: 0;
  list-style: none;
41
  height: auto;
42 43 44 45 46 47 48
  border-bottom: 1px solid $border-color;

  li {
    display: inline-block;

    a {
      display: inline-block;
Annabel Dunstone's avatar
Annabel Dunstone committed
49
      padding: $gl-btn-padding;
50 51
      padding-bottom: 11px;
      margin-bottom: -1px;
52
      font-size: 14px;
53
      line-height: 28px;
54
      color: $gl-text-color-secondary;
55 56
      border-bottom: 2px solid transparent;

57 58 59
      &:hover,
      &:active,
      &:focus {
60
        text-decoration: none;
61 62 63 64 65 66
        border-bottom: 2px solid $gray-darkest;
        color: $black;

        .badge {
          color: $black;
        }
67 68 69 70
      }
    }

    &.active a {
71 72
      border-bottom: 2px solid $link-underline-blue;
      color: $black;
73
      font-weight: 600;
74 75 76 77

      .badge {
        color: $black;
      }
78 79
    }
  }
Annabel Dunstone's avatar
Annabel Dunstone committed
80 81

  &.sub-nav {
82
    text-align: center;
83
    background-color: $gray-normal;
Annabel Dunstone's avatar
Annabel Dunstone committed
84 85

    .container-fluid {
86
      background-color: $gray-normal;
87
      margin-bottom: 0;
Annabel Dunstone's avatar
Annabel Dunstone committed
88 89 90 91
    }

    li {

92 93
      &.active a {
        border-bottom: none;
94
        color: $link-underline-blue;
95 96
      }

Annabel Dunstone's avatar
Annabel Dunstone committed
97 98 99 100
      a {
        margin: 0;
        padding: 11px 10px 9px;

101 102 103
        &:hover,
        &:active,
        &:focus {
104
          border-color: transparent;
105
        }
Annabel Dunstone's avatar
Annabel Dunstone committed
106 107 108
      }
    }
  }
109
}
110 111

.top-area {
112
  @include clearfix;
113
  border-bottom: 1px solid $white-normal;
114 115 116 117 118 119

  .nav-text {
    padding-top: 16px;
    padding-bottom: 11px;
    display: inline-block;
    line-height: 28px;
120
    white-space: normal;
121 122

    /* Small devices (phones, tablets, 768px and lower) */
123
    @media (max-width: $screen-xs-max) {
124 125
      width: 100%;
    }
126 127
  }

128 129
  .nav-search {
    display: inline-block;
130
    width: 100%;
131 132 133
    padding: 11px 0;

    /* Small devices (phones, tablets, 768px and lower) */
134 135
    @media (min-width: $screen-sm-min) {
      width: 50%;
136 137 138
    }
  }

139 140
  .nav-links {
    display: inline-block;
141
    margin-bottom: 0;
142
    border-bottom: none;
143

144 145 146 147 148
    &.wide {
      width: 100%;
      display: block;
    }

Annabel Dunstone's avatar
Annabel Dunstone committed
149
    li a {
150
      padding: 16px 15px 11px;
Annabel Dunstone's avatar
Annabel Dunstone committed
151 152
    }

153
    /* Small devices (phones, tablets, 768px and lower) */
154
    @media (max-width: $screen-xs-max) {
155 156
      width: 100%;
    }
157 158 159 160 161 162 163
  }

  .nav-controls {
    display: inline-block;
    float: right;
    text-align: right;
    padding: 11px 0;
164
    margin-bottom: 0;
165

166 167
    > .btn,
    > .btn-container,
168 169 170
    > .dropdown,
    > input,
    > form {
171
      margin-right: $gl-padding-top;
172
      display: inline-block;
173
      vertical-align: top;
174 175 176

      &:last-child {
        margin-right: 0;
177
        float: right;
178 179 180 181 182
      }
    }

    > .btn-grouped {
      float: none;
183
    }
184

185 186 187 188
    .icon-label {
      display: none;
    }

189 190 191 192 193
    .btn,
    .dropdown,
    .dropdown-toggle,
    input,
    form {
194
      height: 35px;
195 196 197
    }

    input {
198
      display: inline-block;
199
      position: relative;
200 201 202 203 204

      /* Medium devices (desktops, 992px and up) */
      @media (min-width: $screen-md-min) { width: 200px; }

      /* Large devices (large desktops, 1200px and up) */
205
      @media (min-width: $screen-lg-min) { width: 250px; }
206

207 208 209 210 211 212 213
      &.input-short {
        /* Medium devices (desktops, 992px and up) */
        @media (min-width: $screen-md-min) { width: 170px; }

        /* Large devices (large desktops, 1200px and up) */
        @media (min-width: $screen-lg-min) { width: 210px; }
      }
214 215
    }

216 217
    @media (max-width: $screen-xs-max) {
      padding-bottom: 0;
218
      width: 100%;
219

220 221 222
      .btn,
      form,
      .dropdown,
223
      .dropdown-toggle,
224 225
      .dropdown-menu-toggle,
      .form-control {
226
        margin: 0 0 10px;
227
        display: block;
228
        width: 100%;
229 230 231 232 233
      }

      form {
        display: block;
        height: auto;
234
        margin-bottom: 14px;
235 236 237

        input {
          width: 100%;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
238
          margin: 0 0 10px;
239
        }
240 241
      }

Alfredo Sumaran's avatar
Alfredo Sumaran committed
242
      .input-short {
243 244 245 246 247 248
        width: 100%;
      }

      .icon-label {
        display: inline-block;
      }
249 250 251 252 253 254

      // Applies on /dashboard/issues
      .project-item-select-holder {
        display: block;
        margin: 0;
      }
255
    }
256
  }
257 258

  &.adjust {
259 260
    .nav-text,
    .nav-controls {
261
      width: auto;
262 263 264 265

      @media (max-width: $screen-xs-max) {
        width: 100%;
      }
266 267
    }
  }
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
268 269 270 271 272 273 274 275 276 277

  &.multi-line {
    .nav-text {
      line-height: 20px;
    }

    .nav-controls {
      padding: 17px 0;
    }
  }
278 279 280 281

  pre {
    width: 100%;
  }
282
}
283 284

.layout-nav {
285
  width: 100%;
286
  background: $gray-light;
287
  border-bottom: 1px solid $border-color;
288
  transition: padding $sidebar-transition-duration;
289
  text-align: center;
290

291 292
  .container-fluid {
    position: relative;
293 294 295

    .nav-control {
      @media (max-width: $screen-sm-max) {
296
        margin-right: 2px;
297 298
      }
    }
299 300
  }

301 302
  .controls {
    float: right;
303
    padding: 7px 0 0;
304 305 306 307 308 309 310 311 312 313 314 315

    i {
      color: $layout-link-gray;
    }

    .fa-rss,
    .fa-cog {
      font-size: 16px;
    }

    .fa-caret-down {
      margin-left: 5px;
316
      color: $gl-text-color-secondary;
317
    }
318 319

    .dropdown {
320 321 322
      position: absolute;
      top: 7px;
      right: 15px;
323
      z-index: 2;
324 325 326 327

      li.active {
        font-weight: bold;
      }
328
    }
329 330
  }

331 332
  .nav-links {
    border-bottom: none;
333
    height: 51px;
334

335
    li {
336 337 338
      a {
        padding-top: 10px;
      }
339
    }
340
  }
341 342
}

343 344 345 346 347
.scrolling-tabs-container {
  position: relative;

  .nav-links {
    @include scrolling-links();
348
  }
349

350
  .fade-right {
351
    @include fade(left, $gray-light);
352 353 354
    right: -5px;

    .fa {
355
      right: -7px;
356
    }
357
  }
358

359
  .fade-left {
360
    @include fade(right, $gray-light);
361
    left: -5px;
362
    text-align: center;
363 364 365

    .fa {
      left: -7px;
366 367
    }
  }
368 369 370 371

  &.sub-nav-scroll {

    .fade-right {
372
      @include fade(left, $gray-normal);
373 374 375 376 377 378 379 380
      right: 0;

      .fa {
        right: -23px;
      }
    }

    .fade-left {
381
      @include fade(right, $gray-normal);
382 383 384
      left: 0;

      .fa {
385
        left: 10px;
386 387 388
      }
    }
  }
389 390
}

Annabel Dunstone's avatar
Annabel Dunstone committed
391 392 393 394 395 396 397
.nav-block {
  position: relative;

  .nav-links {
    @include scrolling-links();

    .fade-right {
398
      @include fade(left, $white-light);
399 400 401 402 403
      right: -5px;

      .fa {
        right: -7px;
      }
Annabel Dunstone's avatar
Annabel Dunstone committed
404 405 406
    }

    .fade-left {
407
      @include fade(right, $white-light);
408 409 410 411 412
      left: -5px;

      .fa {
        left: -7px;
      }
Annabel Dunstone's avatar
Annabel Dunstone committed
413 414 415 416
    }
  }
}

417
.page-with-layout-nav {
418
  .right-sidebar {
419
    top: ($header-height + 1) * 2;
420
  }
421

422 423 424
  &.page-with-sub-nav {
    .right-sidebar {
      top: ($header-height + 1) * 3;
425

426 427 428
      &.affix {
        top: 0;
      }
429 430
    }
  }
431
}
432 433 434 435 436 437 438 439 440

.activities {
  .nav-block {
    border-bottom: 1px solid $border-color;

    .nav-links {
      border-bottom: none;
    }
  }
441 442 443
}

@media (max-width: $screen-xs-max) {
444 445
  .top-area {
    flex-flow: row wrap;
446

447 448 449 450 451 452 453 454 455 456 457
    .nav-controls {
      $controls-margin: $btn-xs-side-margin - 2px;
      flex: 0 0 100%;

      &.controls-flex {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        padding: 0 0 $gl-padding-top;
      }
458

459 460 461 462 463 464 465
      .controls-item,
      .controls-item-full,
      .controls-item:last-child {
        flex: 1 1 35%;
        display: block;
        width: 100%;
        margin: $controls-margin;
466

467 468 469 470
        .btn,
        .dropdown {
          margin: 0;
        }
471 472
      }

473 474 475
      .controls-item-full {
        flex: 1 1 100%;
      }
476 477 478
    }
  }
}
479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501

.inner-page-scroll-tabs {
  position: relative;

  .fade-right {
    @include fade(left, $white-light);
    right: 0;
    text-align: right;

    .fa {
      right: 5px;
    }
  }

  .fade-left {
    @include fade(right, $white-light);
    left: 0;
    text-align: left;

    .fa {
      left: 5px;
    }
  }
502 503 504 505 506 507 508 509 510 511 512 513 514

  .fade-right,
  .fade-left {
    top: 16px;
    bottom: auto;
  }

  &.is-smaller {
    .fade-right,
    .fade-left {
      top: 11px;
    }
  }
515
}