Add styles for system header and system footer

app/assets/stylesheets/framework/variables.scss

@@ -261,6 +261,8 @@ $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
 $highlight-changes-color: rgb(235, 255, 232);
 $performance-bar-height: 35px;
+$system-header-height: 35px;
+$system-footer-height: $system-header-height;
 $flash-height: 52px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;

app/helpers/application_helper.rb

@@ -283,10 +283,16 @@ module ApplicationHelper
     end
   end
 
+  def appearance
+    @appearance ||= Appearance.current
+  end
+
   def page_class
     class_names = []
     class_names << 'issue-boards-page' if current_controller?(:boards)
     class_names << 'with-performance-bar' if performance_bar_enabled?
+    class_names << 'with-system-header' if appearance.show_header?
+    class_names << 'with-system-footer' if appearance.show_footer?
 
     class_names
   end

ee/app/assets/stylesheets/framework/system_messages.scss

+.header-message,
+.footer-message {
+  padding: 0 15px;
+  border: 1px solid transparent;
+  border-radius: 0;
+  position: fixed;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  margin: 0;
+  z-index: 1000;
+
+  p {
+    @include str-truncated(100%);
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+.header-message {
+  top: 0;
+  height: $system-header-height;
+  line-height: $system-header-height;
+}
+
+.footer-message {
+  bottom: 0;
+  height: $system-footer-height;
+  line-height: $system-footer-height;
+}
+
+.with-performance-bar {
+  .header-message {
+    top: $performance-bar-height;
+  }
+}
+
+// System Header
+.with-system-header {
+  .navbar-gitlab {
+    top: $system-header-height;
+  }
+
+  .nav-sidebar,
+  .right-sidebar {
+    top: $system-header-height + $header-height;
+  }
+}
+
+// System Footer
+.with-system-footer {
+  .nav-sidebar,
+  .right-sidebar {
+    bottom: $system-footer-height;
+  }
+}
+
+// Performance Bar
+// System Header
+.with-system-header.with-performance-bar {
+  header.navbar-gitlab {
+    top: $performance-bar-height + $system-header-height;
+  }
+
+  .layout-page {
+    margin-top: $header-height + $performance-bar-height + $system-header-height;
+  }
+
+  .nav-sidebar,
+  .right-sidebar {
+    top: $header-height + $performance-bar-height + $system-header-height;
+  }
+}