diff options
Diffstat (limited to 'app/assets/stylesheets/framework/new-nav.scss')
| -rw-r--r-- | app/assets/stylesheets/framework/new-nav.scss | 404 |
1 files changed, 404 insertions, 0 deletions
diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss new file mode 100644 index 00000000000..3abf3e4ac7d --- /dev/null +++ b/app/assets/stylesheets/framework/new-nav.scss @@ -0,0 +1,404 @@ +@import "framework/variables"; +@import 'framework/tw_bootstrap_variables'; +@import "bootstrap/variables"; +@import "framework/mixins"; + +.content-wrapper.page-with-new-nav { + margin-top: $new-navbar-height; +} + +header.navbar-gitlab-new { + color: $white-light; + border-bottom: 0; + min-height: $new-navbar-height; + + .logo-text { + line-height: initial; + + svg { + width: 55px; + height: 14px; + margin: 0; + fill: $white-light; + } + } + + .header-content { + display: -webkit-flex; + display: flex; + padding-left: 0; + min-height: $new-navbar-height; + + .title-container { + display: -webkit-flex; + display: flex; + -webkit-align-items: stretch; + align-items: stretch; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + padding-top: 0; + overflow: visible; + } + + .title { + display: -webkit-flex; + display: flex; + padding-right: 0; + color: currentColor; + + img { + height: 28px; + margin-right: 8px; + } + + a { + display: -webkit-flex; + display: flex; + align-items: center; + padding: 2px 8px; + margin: 5px 2px 5px -8px; + border-radius: $border-radius-default; + + svg { + @media (min-width: $screen-sm-min) { + margin-right: 8px; + } + } + } + } + + .dropdown.open { + > a { + border-bottom-color: $white-light; + } + } + + .dropdown-menu { + margin-top: 4px; + min-width: 130px; + + @media (max-width: $screen-xs-max) { + left: auto; + right: 0; + } + } + + &.menu-expanded { + @media (max-width: $screen-xs-max) { + .title-container, + .header-logo, { + display: none; + } + } + } + } + + .dropdown-bold-header { + color: $gl-text-color-secondary; + font-size: 12px; + } + + .navbar-collapse { + padding-left: 0; + box-shadow: 0; + + @media (max-width: $screen-xs-max) { + margin-left: -8px; + margin-right: -10px; + } + + .nav { + > li:not(.hidden-xs) a { + @media (max-width: $screen-xs-max) { + margin-left: 0; + min-width: 100%; + } + } + } + } + + .container-fluid { + .navbar-toggle { + min-width: 45px; + padding: 0 $gl-padding; + margin-right: -7px; + text-align: center; + color: currentColor; + + svg { + fill: currentColor; + } + + &:hover, + &:focus, + &.active { + color: currentColor; + background-color: transparent; + + svg { + fill: currentColor; + } + } + } + + .navbar-nav { + @media (max-width: $screen-xs-max) { + display: flex; + padding-right: 10px; + } + + li { + .badge { + box-shadow: none; + font-weight: $gl-font-weight-bold; + } + } + } + + .nav > li { + &.header-user { + @media (max-width: $screen-xs-max) { + padding-left: 10px; + } + } + + > a { + will-change: color; + margin: 4px 2px; + padding: 6px 8px; + height: 32px; + + @media (max-width: $screen-xs-max) { + padding: 0; + } + + &.header-user-dropdown-toggle { + margin-left: 2px; + + .header-user-avatar { + margin-right: 0; + } + } + + &:hover, + &:focus { + text-decoration: none; + outline: 0; + opacity: 1; + color: $white-light; + + svg { + fill: currentColor; + } + + &.header-user-dropdown-toggle { + .header-user-avatar { + border-color: $white-light; + } + } + } + } + + .header-new-dropdown-toggle { + margin-right: 0; + } + + .impersonated-user, + .impersonated-user:hover { + margin-right: 1px; + background-color: $white-light; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .impersonation-btn, + .impersonation-btn:hover { + background-color: $white-light; + margin-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + i { + color: $orange-500; + font-size: 20px; + } + } + + &.active > a, + &.dropdown.open > a { + + svg { + fill: currentColor; + } + } + } + } +} + +.navbar-sub-nav { + display: -webkit-flex; + display: flex; + margin: 0 0 0 6px; + + .dropdown-chevron { + position: relative; + top: -1px; + font-size: 10px; + } +} + +.navbar-gitlab-new { + .navbar-sub-nav, + .navbar-nav { + > li { + > a:hover, + > a:focus { + text-decoration: none; + outline: 0; + color: $white-light; + + svg { + fill: currentColor; + } + } + + > a { + display: flex; + align-items: center; + justify-content: center; + padding: 6px 8px; + margin: 4px 2px; + font-size: 12px; + color: currentColor; + border-radius: $border-radius-default; + height: 32px; + font-weight: $gl-font-weight-bold; + + svg { + fill: currentColor; + } + } + + &.line-separator { + margin: 8px; + } + } + } +} + +.caret-down { + height: 11px; + width: 11px; + margin-left: 4px; + fill: currentColor; +} + +.header-user .dropdown-menu-nav, +.header-new .dropdown-menu-nav { + margin-top: 4px; +} + +.breadcrumbs { + display: flex; + min-height: 48px; + color: $gl-text-color; +} + +.breadcrumbs-container { + display: -webkit-flex; + display: flex; + width: 100%; + position: relative; + padding-top: $gl-padding / 2; + padding-bottom: $gl-padding / 2; + align-items: center; + border-bottom: 1px solid $border-color; +} + +.breadcrumbs-links { + -webkit-flex: 1; + flex: 1; + min-width: 0; + align-self: center; + color: $gl-text-color-secondary; + + .avatar-tile { + margin-right: 4px; + border: 1px solid $border-color; + border-radius: 50%; + vertical-align: sub; + } + + .text-expander { + margin-left: 0; + margin-right: 2px; + + > i { + position: relative; + top: 1px; + } + } +} + +.breadcrumbs-list { + display: -webkit-flex; + display: flex; + flex-wrap: wrap; + margin-bottom: 0; + line-height: 16px; + + > li { + display: flex; + align-items: center; + position: relative; + padding: 2px 0; + + &:not(:last-child) { + margin-right: 20px; + } + + > a { + font-size: 12px; + color: currentColor; + } + } +} + +.breadcrumb-item-text { + @include str-truncated(128px); + text-decoration: inherit; +} + +.breadcrumbs-list-angle { + position: absolute; + right: -12px; + top: 50%; + color: $gl-text-color-tertiary; + transform: translateY(-50%); +} + +.breadcrumbs-extra { + display: flex; + flex: 0 0 auto; + margin-left: auto; +} + +.breadcrumbs-sub-title { + margin: 0; + font-size: 12px; + font-weight: 600; + line-height: 16px; + + a { + color: $gl-text-color; + } +} + +.btn-sign-in { + margin-top: 3px; + font-weight: $gl-font-weight-bold; + + &:hover { + background-color: $white-light; + } +} |