Merge branch 'master' into filter-labelfilter-label

1 files changed, 169 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
new file mode 100644
index 00000000000..91e6975e269
--- /dev/null
+++ b/app/assets/stylesheets/framework/header.scss
@@ -0,0 +1,169 @@
+/*
+ *  Application Header
+ *
+ */
+header {
+  transition-duration: .3s;
+
+  &.navbar-empty {
+    background: #FFF;
+    border-bottom: 1px solid #EEE;
+
+    .center-logo {
+      margin: 8px 0;
+      text-align: center;
+
+      img {
+        height: 32px;
+      }
+    }
+  }
+
+  &.navbar-gitlab {
+    padding: 0 20px;
+    z-index: 100;
+    margin-bottom: 0;
+    min-height: $header-height;
+    background-color: #fff;
+    border: none;
+
+    .container-fluid {
+      width: 100% !important;
+      filter: none;
+      padding: 0;
+
+      .nav > li > a {
+        color: #7f8fa4;
+        font-size: 18px;
+        padding: 0;
+        margin: ($header-height - 28) / 2 0;
+        margin-left: 10px;
+        height: 28px;
+        width: 28px;
+        line-height: 28px;
+        text-align: center;
+
+        &:hover, &:focus, &:active {
+          background-color: #FFF;
+        }
+      }
+
+      .navbar-toggle {
+        color: #666;
+        margin: 6px 0;
+        border-radius: 0;
+        position: absolute;
+        right: 2px;
+
+        &:hover {
+          background-color: #EEE;
+        }
+        &.active {
+          color: #7f8fa4;
+        }
+      }
+    }
+  }
+
+  .header-content {
+    height: $header-height;
+
+    .title {
+      margin: 0;
+      overflow: hidden;
+      font-size: 19px;
+      line-height: $header-height;
+      font-weight: normal;
+      color: #4c4e54;
+      text-overflow: ellipsis;
+      vertical-align: top;
+      white-space: nowrap;
+
+      a {
+        color: #4c4e54;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .navbar-collapse {
+      float: right;
+      border-top: none;
+    }
+  }
+
+  .search {
+    margin-right: 10px;
+    margin-left: 10px;
+    margin-top: ($header-height - 36) / 2;
+
+    form {
+      margin: 0;
+      padding: 0;
+    }
+
+    .search-input {
+      width: 220px;
+      background-image: image-url("icon-search.png");
+      background-repeat: no-repeat;
+      background-position: 195px;
+      @include input-big;
+
+      &:focus {
+        @include box-shadow(none);
+        outline: none;
+        border-color: #DDD;
+        background-color: #FFF;
+      }
+    }
+  }
+}
+
+@mixin collapsed-header {
+  margin-left: $sidebar_collapsed_width;
+}
+
+@media (max-width: $screen-md-max) {
+  .header-collapsed, .header-expanded {
+    @include collapsed-header;
+  }
+}
+
+@media(min-width: $screen-md-max) {
+  .header-collapsed {
+    @include collapsed-header;
+  }
+
+  .header-expanded {
+    margin-left: $sidebar_width;
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  header .container-fluid {
+    font-size: 18px;
+
+    .navbar-nav {
+      margin: 0px;
+      float: none !important;
+
+      .visible-xs, .visable-sm {
+        display: table-cell !important;
+      }
+    }
+
+    .navbar-collapse {
+      padding-left: 5px;
+
+      li {
+        display: table-cell;
+        width: 1%;
+
+        a {
+          margin-left: 8px !important;
+        }
+      }
+    }
+  }
+}