diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-10-07 01:37:26 +0300 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-10-07 01:37:26 +0300 |
commit | 7312b8708fe5e917d14c60d628829d3f79027e8f (patch) | |
tree | a753ef24ed6b389ea2582ad8ccd06d2b40ddfc33 /app/assets/stylesheets/framework/header.scss | |
parent | bc45fd78df153bec48bc759cddc370fba934d447 (diff) |
Finish combining nav styles
Diffstat (limited to 'app/assets/stylesheets/framework/header.scss')
-rw-r--r-- | app/assets/stylesheets/framework/header.scss | 470 |
1 files changed, 411 insertions, 59 deletions
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index cd71d3c1dd9..4693b4a18d7 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -1,7 +1,6 @@ -/* - * Application Header - * - */ +.content-wrapper.page-with-new-nav { + margin-top: $header-height; +} header { @include new-style-dropdown; @@ -56,8 +55,10 @@ header { } .navbar-toggle { + right: -10px; + border-radius: 0; min-width: 45px; - padding: 0 $gl-padding; + padding: 0; margin-right: -7px; font-size: 14px; text-align: center; @@ -69,6 +70,12 @@ header { color: currentColor; background-color: transparent; } + + .more-icon, + .close-icon { + fill: $white-light; + margin: auto; + } } } } @@ -87,62 +94,14 @@ header { } } - .global-dropdown { - position: absolute; - left: -10px; - - .badge { - font-size: 11px; - } - - li { - &.active a { - font-weight: $gl-font-weight-bold; - } - } - } - .header-content { display: -webkit-flex; display: flex; + justify-content: space-between; position: relative; min-height: $header-height; padding-left: 0; - &.menu-expanded { - @media (max-width: $screen-xs-max) { - .header-logo, - .title-container { - display: none; - } - - .navbar-collapse { - display: block; - } - } - } - - .dropdown-menu { - margin-top: -5px; - } - - .header-logo { - display: inline-block; - margin: 0 12px 0 2px; - position: relative; - top: 10px; - transition-duration: .3s; - - svg, - img { - height: 28px; - } - - &:hover { - cursor: pointer; - } - } - .title-container { display: -webkit-flex; display: flex; @@ -199,15 +158,197 @@ header { } } - .navbar-collapse { - flex: 0 0 auto; - border-top: none; - padding: 0; + .dropdown.open { + > a { + border-bottom-color: $white-light; + } + } + + &.menu-expanded { + @media (max-width: $screen-xs-max) { + .title-container { + display: none; + } + + .navbar-collapse { + display: block; + } + } + } + } + + .dropdown-bold-header { + color: $gl-text-color-secondary; + font-size: 12px; + } + + .navbar-collapse { + flex: 0 0 auto; + border-top: none; + padding: 0; + + @media (max-width: $screen-xs-max) { + flex: 1 1 auto; + } + + .nav { + > li:not(.hidden-xs) a { + @media (max-width: $screen-xs-max) { + margin-left: 0; + min-width: 100%; + } + } + } + } + + .container-fluid { + .navbar-nav { @media (max-width: $screen-xs-max) { - flex: 1 1 auto; + display: -webkit-flex; + 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, +.navbar-nav { + > li { + > a:hover, + > a:focus { + text-decoration: none; + outline: 0; + color: $white-light; + + svg { + fill: currentColor; + } + } + + > a { + display: -webkit-flex; + 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; + } + } +} + +.navbar-sub-nav { + display: -webkit-flex; + display: flex; + margin: 0 0 0 6px; + + .projects-dropdown-menu { + padding: 0; + } + + .dropdown-chevron { + position: relative; + top: -1px; + font-size: 10px; } .project-item-select-holder { @@ -218,3 +359,214 @@ header { color: $red-500; } } + +.caret-down { + height: 11px; + width: 11px; + margin-left: 4px; + fill: currentColor; +} + +.header-user .dropdown-menu-nav, +.header-new .dropdown-menu-nav { + margin-top: $dropdown-vertical-offset; +} + +.breadcrumbs { + display: -webkit-flex; + 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: -webkit-flex; + 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; + } +} + +.navbar-nav { + li { + .badge { + position: inherit; + font-weight: $gl-font-weight-normal; + margin-left: -6px; + font-size: 11px; + color: $white-light; + padding: 0 5px; + line-height: 12px; + 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; + } + } + } +} + +@media (max-width: $screen-xs-max) { + header .container-fluid { + font-size: 18px; + + .navbar-nav { + table-layout: fixed; + width: 100%; + margin: 0; + text-align: right; + } + + .navbar-collapse { + margin-left: -8px; + margin-right: -10px; + + .nav > li:not(.hidden-xs) { + display: table-cell !important; + width: 25%; + + a { + margin-right: 8px; + } + } + } + } + + .header-user-dropdown-toggle { + text-align: center; + } + + .header-user-avatar { + float: none; + } +} + +.header-user { + .dropdown-menu-nav { + width: auto; + min-width: 140px; + margin-top: 4px; + color: $gl-text-color; + left: auto; + + .current-user { + padding: 5px 18px; + + .user-name { + display: block; + } + } + } +} + +.header-user-avatar { + float: left; + margin-right: 5px; + border-radius: 50%; + border: 1px solid $avatar-border; +} + +.with-performance-bar header.navbar-gitlab { + top: $performance-bar-height; +} |