1 files changed, 56 insertions, 60 deletions

diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index c42b5554d8d..cb3c97f18a3 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -27,10 +27,6 @@ body {
   text-align: left;
   background-color: #fff;
 }
-h1 {
-  margin-top: 0;
-  margin-bottom: 0.25rem;
-}
 ul {
   margin-top: 0;
   margin-bottom: 1rem;
@@ -90,15 +86,6 @@ button::-moz-focus-inner,
 [type="search"] {
   outline-offset: -2px;
 }
-h1 {
-  margin-bottom: 0.25rem;
-  font-weight: 600;
-  line-height: 1.2;
-  color: #303030;
-}
-h1 {
-  font-size: 2.1875rem;
-}
 .list-unstyled {
   padding-left: 0;
   list-style: none;
@@ -348,9 +335,6 @@ h1 {
   white-space: nowrap;
   border: 0;
 }
-.m-auto {
-  margin: auto !important;
-}
 .gl-badge {
   display: inline-flex;
   align-items: center;
@@ -431,7 +415,7 @@ a.gl-badge.badge-warning:active {
 .gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only,
 .gl-form-input.form-control:disabled,
 .gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only {
-  background-color: #fafafa;
+  background-color: #f5f5f5;
   box-shadow: inset 0 0 0 1px #dbdbdb;
 }
 .gl-form-input:disabled,
@@ -532,10 +516,6 @@ html [type="button"],
 [role="button"] {
   cursor: pointer;
 }
-h1 {
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
 strong {
   font-weight: bold;
 }
@@ -619,6 +599,10 @@ body {
 .dropdown {
   position: relative;
 }
+.dropdown-menu-toggle:active {
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc;
+  outline: none;
+}
 .search-input-container .dropdown-menu {
   margin-top: 11px;
 }
@@ -669,7 +653,6 @@ body {
   display: block;
   text-align: left;
   list-style: none;
-  padding: 0 1px;
 }
 .dropdown-menu li > a,
 .dropdown-menu li button {
@@ -695,6 +678,12 @@ body {
   outline: 0;
   text-decoration: none;
 }
+.dropdown-menu li > a:active,
+.dropdown-menu li button:active {
+  box-shadow: inset 0 0 0 2px #428fdc, inset 0 0 0 3px #fff,
+    inset 0 0 0 1px #fff;
+  outline: none;
+}
 .dropdown-menu .divider {
   height: 1px;
   margin: 0.25rem 0;
@@ -740,7 +729,7 @@ input {
   padding: 0 16px;
   z-index: 1000;
   margin-bottom: 0;
-  min-height: var(--header-height, 40px);
+  min-height: var(--header-height, 48px);
   border: 0;
   position: fixed;
   top: 0;
@@ -756,7 +745,7 @@ input {
   display: flex;
   justify-content: space-between;
   position: relative;
-  min-height: var(--header-height, 40px);
+  min-height: var(--header-height, 48px);
   padding-left: 0;
 }
 .navbar-gitlab .header-content .title {
@@ -772,16 +761,17 @@ input {
 .navbar-gitlab .header-content .title img {
   height: 24px;
 }
-.navbar-gitlab .header-content .title img + .logo-text {
-  margin-left: 8px;
-}
 .navbar-gitlab .header-content .title a {
   display: flex;
   align-items: center;
   padding: 2px 8px;
-  margin: 4px 2px 4px -12px;
+  margin: 4px 2px 4px -8px;
   border-radius: 4px;
 }
+.navbar-gitlab .header-content .title a:active {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9;
+  outline: none;
+}
 .navbar-gitlab .header-content .title .canary-badge {
   margin-left: -8px;
 }
@@ -887,6 +877,13 @@ input {
   height: 32px;
   font-weight: 600;
 }
+.navbar-sub-nav > li > a:active,
+.navbar-sub-nav > li > button:active,
+.navbar-nav > li > a:active,
+.navbar-nav > li > button:active {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9;
+  outline: none;
+}
 .navbar-sub-nav > li .top-nav-toggle,
 .navbar-sub-nav > li > button,
 .navbar-nav > li .top-nav-toggle,
@@ -900,6 +897,8 @@ input {
 }
 .navbar-sub-nav {
   display: flex;
+  align-items: center;
+  height: 100%;
   margin: 0 0 0 6px;
 }
 .caret-down,
@@ -975,7 +974,7 @@ input {
 .context-header {
   position: relative;
   margin-right: 2px;
-  width: 220px;
+  width: 256px;
 }
 .context-header > a,
 .context-header > button {
@@ -1000,17 +999,17 @@ input {
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
-    padding-left: 48px;
+    padding-left: 56px;
   }
 }
 @media (min-width: 1200px) {
   .page-with-contextual-sidebar {
-    padding-left: 220px;
+    padding-left: 256px;
   }
 }
 @media (min-width: 768px) {
   .page-with-icon-sidebar {
-    padding-left: 48px;
+    padding-left: 56px;
   }
 }
 .nav-sidebar {
@@ -1018,13 +1017,14 @@ input {
   bottom: 0;
   left: 0;
   z-index: 600;
-  width: 220px;
-  top: var(--header-height, 40px);
-  background-color: #f0f0f0;
+  width: 256px;
+  top: var(--header-height, 48px);
+  background-color: #f5f5f5;
+  border-right: 1px solid #e9e9e9;
   transform: translate3d(0, 0, 0);
 }
 .nav-sidebar.sidebar-collapsed-desktop {
-  width: 48px;
+  width: 56px;
 }
 .nav-sidebar.sidebar-collapsed-desktop .nav-sidebar-inner-scroll {
   overflow-x: hidden;
@@ -1077,7 +1077,7 @@ input {
   border-radius: 0.25rem;
   width: auto;
   line-height: 1rem;
-  margin: 1px 4px;
+  margin: 1px 8px;
 }
 .nav-sidebar li.active > a {
   font-weight: 600;
@@ -1091,7 +1091,7 @@ input {
 }
 @media (max-width: 767.98px) {
   .nav-sidebar {
-    left: -220px;
+    left: -256px;
   }
 }
 .nav-sidebar .nav-icon-container {
@@ -1213,7 +1213,7 @@ input {
 }
 @media (min-width: 768px) and (max-width: 1199px) {
   .nav-sidebar:not(.sidebar-expanded-mobile) {
-    width: 48px;
+    width: 56px;
   }
   .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
     overflow-x: hidden;
@@ -1248,7 +1248,7 @@ input {
   }
   .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: 60px;
-    width: 48px;
+    width: 56px;
   }
   .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 10px 4px;
@@ -1280,7 +1280,8 @@ input {
     margin-right: 0;
   }
   .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
-    width: 48px;
+    width: 55px;
+    padding: 0 21px;
   }
   .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
@@ -1313,10 +1314,10 @@ input {
   border-radius: 0.25rem;
   width: auto;
   line-height: 1rem;
-  margin: 1px 4px;
+  margin: 1px 8px;
   padding: 0.25rem;
   margin-bottom: 0.25rem;
-  margin-top: 0;
+  margin-top: 0.125rem;
 }
 .nav-sidebar-inner-scroll > div.context-header a .avatar-container {
   font-weight: 400;
@@ -1335,13 +1336,12 @@ input {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 .sidebar-top-level-items {
-  margin-top: 0.25rem;
   margin-bottom: 60px;
 }
 .sidebar-top-level-items .context-header a {
   padding: 0.25rem;
   margin-bottom: 0.25rem;
-  margin-top: 0;
+  margin-top: 0.125rem;
 }
 .sidebar-top-level-items .context-header a .avatar-container {
   font-weight: 400;
@@ -1387,11 +1387,10 @@ input {
   color: #666;
   display: flex;
   align-items: center;
-  background-color: #f0f0f0;
-  border-top: 1px solid #dbdbdb;
+  background-color: #f5f5f5;
   position: fixed;
   bottom: 0;
-  width: 220px;
+  width: 255px;
 }
 .toggle-sidebar-button .collapse-text,
 .toggle-sidebar-button .icon-chevron-double-lg-left,
@@ -1405,7 +1404,7 @@ input {
 }
 .sidebar-collapsed-desktop .context-header {
   height: 60px;
-  width: 48px;
+  width: 56px;
 }
 .sidebar-collapsed-desktop .context-header a {
   padding: 10px 4px;
@@ -1437,7 +1436,8 @@ input {
   margin-right: 0;
 }
 .sidebar-collapsed-desktop .toggle-sidebar-button {
-  width: 48px;
+  width: 55px;
+  padding: 0 21px;
 }
 .sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
   display: none;
@@ -1704,19 +1704,9 @@ svg.s16 {
 .gl-display-none {
   display: none;
 }
-@media (min-width: 992px) {
-  .gl-lg-display-none\! {
-    display: none !important;
-  }
-}
 .gl-display-flex {
   display: flex;
 }
-@media (min-width: 992px) {
-  .gl-lg-display-flex {
-    display: flex;
-  }
-}
 @media (min-width: 576px) {
   .gl-sm-display-block {
     display: block;
@@ -1730,12 +1720,18 @@ svg.s16 {
 .gl-display-inline-block\! {
   display: inline-block !important;
 }
+.gl-align-items-center {
+  align-items: center;
+}
 .gl-align-items-stretch {
   align-items: stretch;
 }
 .gl-flex-grow-1 {
   flex-grow: 1;
 }
+.gl-justify-content-end {
+  justify-content: flex-end;
+}
 .gl-relative {
   position: relative;
 }