@mixin fade($gradient-direction, $gradient-color) { visibility: hidden; opacity: 0; z-index: 2; position: absolute; bottom: 12px; width: 43px; height: 30px; transition-duration: .3s; -webkit-transform: translateZ(0); background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4)); &.scrolling { visibility: visible; opacity: 1; transition-duration: .3s; } .fa { position: relative; top: 5px; font-size: 18px; } } @mixin scrolling-links() { white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { display: none; } } .nav-links { padding: 0; margin: 0; list-style: none; height: auto; border-bottom: 1px solid $border-color; li { display: inline-block; a { display: inline-block; padding: $gl-btn-padding; padding-bottom: 11px; margin-bottom: -1px; font-size: 14px; line-height: 28px; color: $gl-gray-light; border-bottom: 2px solid transparent; &:hover, &:active, &:focus { text-decoration: none; border-bottom: 2px solid $gray-darkest; color: $black; .badge { color: $black; } } } &.active a { border-bottom: 2px solid $link-underline-blue; color: $black; font-weight: 600; .badge { color: $black; } } .badge { font-weight: normal; background-color: $nav-badge-bg; color: $gl-gray-light; vertical-align: baseline; } } &.sub-nav { text-align: center; background-color: $gray-normal; .container-fluid { background-color: $gray-normal; margin-bottom: 0; } li { &.active a { border-bottom: none; color: $link-underline-blue; } a { margin: 0; padding: 11px 10px 9px; &:hover, &:active, &:focus { border-bottom: none; } } } } } .top-area { @include clearfix; border-bottom: 1px solid $white-normal; .nav-text { padding-top: 16px; padding-bottom: 11px; display: inline-block; width: 50%; line-height: 28px; /* Small devices (phones, tablets, 768px and lower) */ @media (max-width: $screen-xs-max) { width: 100%; } } .nav-search { display: inline-block; width: 100%; padding: 11px 0; /* Small devices (phones, tablets, 768px and lower) */ @media (min-width: $screen-sm-min) { width: 50%; } } .nav-links { display: inline-block; width: 50%; margin-bottom: 0; border-bottom: none; &.wide { width: 100%; display: block; } li a { padding: 16px 15px 11px; } /* Small devices (phones, tablets, 768px and lower) */ @media (max-width: $screen-xs-max) { width: 100%; } } .nav-controls { width: 50%; display: inline-block; float: right; text-align: right; padding: 11px 0; margin-bottom: 0; > .dropdown { margin-right: $gl-padding-top; display: inline-block; vertical-align: top; &:last-child { margin-right: 0; } } > .btn { margin-right: $gl-padding-top; display: inline-block; vertical-align: top; &:last-child { margin-right: 0; } } > .btn-grouped { float: none; } > form { display: inline-block; } .icon-label { display: none; } input { height: 35px; display: inline-block; position: relative; margin-right: $gl-padding-top; /* Medium devices (desktops, 992px and up) */ @media (min-width: $screen-md-min) { width: 200px; } /* Large devices (large desktops, 1200px and up) */ @media (min-width: $screen-lg-min) { width: 250px; } &.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; } } } @media (max-width: $screen-xs-max) { padding-bottom: 0; width: 100%; .btn, form, .dropdown, .dropdown-menu-toggle, .form-control { margin: 0 0 10px; display: block; width: 100%; } form { display: block; height: auto; margin-bottom: 14px; input { width: 100%; margin: 0 0 10px; } } .input-short { width: 100%; } .icon-label { display: inline-block; } // Applies on /dashboard/issues .project-item-select-holder { display: block; margin: 0; } } } &.adjust { .nav-text, .nav-controls { width: auto; } } &.multi-line { .nav-text { line-height: 20px; } .nav-controls { padding: 17px 0; } } } .layout-nav { position: fixed; top: $header-height; width: 100%; z-index: 11; background: $gray-light; border-bottom: 1px solid $border-color; transition: padding $sidebar-transition-duration; text-align: center; .container-fluid { position: relative; } .controls { float: right; padding: 7px 0 0; @media (max-width: $screen-sm-max) { display: none; } i { color: $layout-link-gray; } .fa-rss, .fa-cog { font-size: 16px; } .fa-caret-down { margin-left: 5px; color: $gl-gray-light; } .dropdown { position: absolute; top: 7px; right: 15px; z-index: 2; li.active { font-weight: bold; } } } .nav-links { border-bottom: none; height: 51px; li { a { padding-top: 10px; } } } } .scrolling-tabs-container { position: relative; .nav-links { @include scrolling-links(); } .fade-right { @include fade(left, $gray-light); right: -5px; .fa { right: -7px; } } .fade-left { @include fade(right, $gray-light); left: -5px; .fa { left: -7px; } } &.sub-nav-scroll { .fade-right { @include fade(left, $gray-normal); right: 0; .fa { right: -23px; } } .fade-left { @include fade(right, $gray-normal); left: 0; .fa { left: 10px; } } } } .nav-block { position: relative; .nav-links { @include scrolling-links(); .fade-right { @include fade(left, $white-light); right: -5px; .fa { right: -7px; } } .fade-left { @include fade(right, $white-light); left: -5px; .fa { left: -7px; } } } } .page-with-layout-nav { margin-top: $header-height + 2; .right-sidebar { top: ($header-height * 2) + 2; } } .activities { .nav-block { border-bottom: 1px solid $border-color; .nav-links { border-bottom: none; } } }