Start moving new nav styles into header.scss

1 files changed, 50 insertions, 145 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 63eed636476..c10e3467bef 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -27,84 +27,28 @@ header {
     z-index: 1000;
     margin-bottom: 0;
     min-height: $header-height;
-    background-color: $gray-light;
     border: none;
     border-bottom: 1px solid $border-color;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
-    color: $gl-text-color-secondary;
     border-radius: 0;
 
-    @media (max-width: $screen-xs-min) {
-      padding: 0 16px;
-    }
-
-    &.with-horizontal-nav {
-      border-bottom: 0;
+    .logo-text {
+      line-height: initial;
 
-      .navbar-border {
-        height: 1px;
-        position: absolute;
-        right: 0;
-        left: 0;
-        bottom: -1px;
-        background-color: $border-color;
-        opacity: 0;
+      svg {
+        width: 55px;
+        height: 14px;
+        margin: 0;
+        fill: $white-light;
       }
     }
 
     .container-fluid {
-      width: 100% !important;
-      filter: none;
       padding: 0;
 
-      .nav > li > a {
-        color: currentColor;
-        font-size: 18px;
-        padding: 0;
-        margin: (($header-height - 28) / 2) 3px;
-        margin-left: 8px;
-        height: 28px;
-        min-width: 32px;
-        line-height: 28px;
-        text-align: center;
-
-        &.header-user-dropdown-toggle {
-          margin-left: 14px;
-
-          &:hover,
-          &:focus,
-          &:active {
-            .header-user-avatar {
-              border-color: rgba($avatar-border, .2);
-            }
-          }
-        }
-
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: transparent;
-          color: $gl-text-color;
-
-          svg {
-            fill: $gl-text-color;
-          }
-        }
-
-        .fa-caret-down {
-          font-size: 14px;
-        }
-
-        .fa-chevron-down {
-          position: relative;
-          top: -3px;
-          font-size: 10px;
-        }
-      }
-
       .user-counter {
         svg {
           margin-right: 3px;
@@ -112,36 +56,34 @@ header {
       }
 
       .navbar-toggle {
-        color: $nav-toggle-gray;
-        margin: 5px 0;
-        border-radius: 0;
-        right: -10px;
-        padding: 6px 10px;
-
-        &:hover {
-          background-color: $white-normal;
-        }
+        min-width: 45px;
+        padding: 4px $gl-padding;
+        margin-right: -7px;
+        font-size: 14px;
+        text-align: center;
+        color: currentColor;
 
+        &:hover,
+        &:focus,
         &.active {
-          color: $gl-text-color-secondary;
+          color: currentColor;
+          background-color: transparent;
         }
       }
     }
   }
 
-  &.navbar-gitlab-new {
-    .close-icon {
+  .fa-times {
+    display: none;
+  }
+
+  .menu-expanded {
+    .fa-ellipsis-v {
       display: none;
     }
 
-    .menu-expanded {
-      .more-icon {
-        display: none;
-      }
-
-      .close-icon {
-        display: block;
-      }
+    .fa-times {
+      display: block;
     }
   }
 
@@ -160,29 +102,11 @@ header {
     }
   }
 
-  .global-dropdown-toggle {
-    margin: 7px 0;
-    font-size: 18px;
-    padding: 6px 10px;
-    border: none;
-    background-color: $gray-light;
-
-    &:hover {
-      background-color: $white-normal;
-    }
-
-    &:focus {
-      outline: none;
-      background-color: $white-normal;
-    }
-  }
-
   .header-content {
     display: flex;
-    justify-content: space-between;
     position: relative;
     min-height: $header-height;
-    padding-left: 30px;
+    padding-left: 0;
 
     &.menu-expanded {
       @media (max-width: $screen-xs-max) {
@@ -218,38 +142,32 @@ header {
       }
     }
 
-    .group-name-toggle {
-      margin: 3px 5px;
-    }
-
-    .group-title {
-      &.is-hidden {
-        .hidable:not(:last-of-type) {
-          display: none;
-        }
-      }
-    }
-
     .title-container {
       display: flex;
-      align-items: flex-start;
+      -webkit-align-items: stretch;
+      align-items: stretch;
+      -webkit-flex: 1 1 auto;
       flex: 1 1 auto;
-      padding-top: 14px;
-      overflow: hidden;
+      padding-top: 0;
+      overflow: visible;
     }
 
     .title {
+      padding-right: 0;
+      color: currentColor;
+      display: -webkit-flex;
+      display: flex;
       position: relative;
-      padding-right: 20px;
       margin: 0;
       font-size: 18px;
-      line-height: 22px;
-      display: inline-block;
-      font-weight: $gl-font-weight-normal;
-      color: $gl-text-color;
       vertical-align: top;
       white-space: nowrap;
 
+      img {
+        height: 28px;
+        margin-right: 8px;
+      }
+
       &.wrap {
         white-space: normal;
       }
@@ -259,30 +177,17 @@ header {
       }
 
       a {
-        color: currentColor;
+        display: -webkit-flex;
+        display: flex;
+        align-items: center;
+        padding: 2px 8px;
+        margin: 5px 2px 5px -8px;
+        border-radius: $border-radius-default;
 
-        &:hover {
-          text-decoration: underline;
-          color: $gl-header-nav-hover-color;
-        }
-      }
-
-      .dropdown-toggle-caret {
-        color: $gl-text-color;
-        border: transparent;
-        background: transparent;
-        position: absolute;
-        top: 2px;
-        right: 3px;
-        width: 12px;
-        line-height: 19px;
-        padding: 0;
-        font-size: 10px;
-        text-align: center;
-        cursor: pointer;
-
-        &:hover {
-          color: $gl-header-nav-hover-color;
+        svg {
+          @media (min-width: $screen-sm-min) {
+            margin-right: 8px;
+          }
         }
       }