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 | |
parent | bc45fd78df153bec48bc759cddc370fba934d447 (diff) |
Finish combining nav styles
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/stylesheets/framework.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/header.scss | 470 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/images.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/new-nav.scss | 415 |
5 files changed, 412 insertions, 477 deletions
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 09a29d41823..c7be94e2c8e 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -30,8 +30,6 @@ @import "framework/media_object"; @import "framework/mobile"; @import "framework/modal"; -@import "framework/nav"; -@import "framework/new-nav"; @import "framework/pagination"; @import "framework/panels"; @import "framework/secondary-navigation-elements"; 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; +} diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss index 59bfc5a8d77..6819fd88b7f 100644 --- a/app/assets/stylesheets/framework/images.scss +++ b/app/assets/stylesheets/framework/images.scss @@ -28,6 +28,7 @@ svg { &.s8 { @include svg-size(8px); } + &.s12 { @include svg-size(12px); } &.s16 { @include svg-size(16px); } &.s18 { @include svg-size(18px); } &.s24 { @include svg-size(24px); } diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss deleted file mode 100644 index 8b137891791..00000000000 --- a/app/assets/stylesheets/framework/nav.scss +++ /dev/null @@ -1 +0,0 @@ - diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss index a8fe8b31a6b..e69de29bb2d 100644 --- a/app/assets/stylesheets/framework/new-nav.scss +++ b/app/assets/stylesheets/framework/new-nav.scss @@ -1,415 +0,0 @@ -.content-wrapper.page-with-new-nav { - margin-top: $header-height; -} - -header { - .header-content { - .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-nav { - @media (max-width: $screen-xs-max) { - 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 { - display: -webkit-flex; - display: flex; - margin: 0 0 0 6px; - - .dropdown-chevron { - position: relative; - top: -1px; - font-size: 10px; - } -} - -header { - .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; - } - } - } -} - -.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 { - display: table; - table-layout: fixed; - width: 100%; - margin: 0; - text-align: right; - } - - .navbar-collapse { - padding-left: 5px; - - .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: -5px; - 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; -} |