Merge branch 'master' into ide-staged-changes

5 files changed, 135 insertions, 61 deletions

diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index db36e27fa74..05cb0196ced 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -2,7 +2,15 @@
  * Styles the GitLab application with a specific color theme
  */
 
-@mixin gitlab-theme($color-100, $color-200, $color-500, $color-700, $color-800, $color-900, $color-alternate) {
+@mixin gitlab-theme(
+  $color-100,
+  $color-200,
+  $color-500,
+  $color-700,
+  $color-800,
+  $color-900,
+  $color-alternate
+) {
   // Header
 
   .navbar-gitlab {
@@ -23,7 +31,7 @@
       > li {
         > a:hover,
         > a:focus {
-          background-color: rgba($color-200, .2);
+          background-color: rgba($color-200, 0.2);
         }
 
         &.active > a,
@@ -33,7 +41,7 @@
         }
 
         &.line-separator {
-          border-left: 1px solid rgba($color-200, .2);
+          border-left: 1px solid rgba($color-200, 0.2);
         }
       }
     }
@@ -56,7 +64,7 @@
           &:hover,
           &:focus {
             @media (min-width: $screen-sm-min) {
-              background-color: rgba($color-200, .2);
+              background-color: rgba($color-200, 0.2);
             }
 
             svg {
@@ -91,34 +99,34 @@
     > a {
       &:hover,
       &:focus {
-        background-color: rgba($color-200, .2);
+        background-color: rgba($color-200, 0.2);
       }
     }
   }
 
   .search {
     form {
-      background-color: rgba($color-200, .2);
+      background-color: rgba($color-200, 0.2);
 
       &:hover {
-        background-color: rgba($color-200, .3);
+        background-color: rgba($color-200, 0.3);
       }
     }
 
     .location-badge {
       color: $color-100;
-      background-color: rgba($color-200, .1);
+      background-color: rgba($color-200, 0.1);
       border-right: 1px solid $color-800;
     }
 
     .search-input::placeholder {
-      color: rgba($color-200, .8);
+      color: rgba($color-200, 0.8);
     }
 
     .search-input-wrap {
       .search-icon,
       .clear-icon {
-        fill: rgba($color-200, .8);
+        fill: rgba($color-200, 0.8);
       }
     }
 
@@ -133,7 +141,7 @@
 
       .search-input-wrap {
         .search-icon {
-          fill: rgba($color-200, .8);
+          fill: rgba($color-200, 0.8);
         }
       }
     }
@@ -144,7 +152,6 @@
     color: $color-900;
   }
 
-
   // Sidebar
   .nav-sidebar li.active {
     box-shadow: inset 4px 0 0 $color-700;
@@ -169,28 +176,94 @@
       font-weight: $gl-font-weight-bold;
     }
   }
-}
 
+  // Web IDE
+  .ide-sidebar-link {
+    color: $color-200;
+    background-color: $color-700;
+
+    &:hover,
+    &:focus {
+      background-color: $color-500;
+    }
+
+    &:active {
+      background: $color-800;
+    }
+  }
+
+  .branch-container {
+    border-left-color: $color-700;
+  }
+
+  .branch-header-title {
+    color: $color-700;
+  }
+
+  .ide-file-list .file.file-active {
+    color: $color-700;
+  }
+}
 
 body {
   &.ui_indigo {
-    @include gitlab-theme($indigo-100, $indigo-200, $indigo-500, $indigo-700, $indigo-800, $indigo-900, $white-light);
+    @include gitlab-theme(
+      $indigo-100,
+      $indigo-200,
+      $indigo-500,
+      $indigo-700,
+      $indigo-800,
+      $indigo-900,
+      $white-light
+    );
   }
 
   &.ui_dark {
-    @include gitlab-theme($theme-gray-100, $theme-gray-200, $theme-gray-500, $theme-gray-700, $theme-gray-800, $theme-gray-900, $white-light);
+    @include gitlab-theme(
+      $theme-gray-100,
+      $theme-gray-200,
+      $theme-gray-500,
+      $theme-gray-700,
+      $theme-gray-800,
+      $theme-gray-900,
+      $white-light
+    );
   }
 
   &.ui_blue {
-    @include gitlab-theme($theme-blue-100, $theme-blue-200, $theme-blue-500, $theme-blue-700, $theme-blue-800, $theme-blue-900, $white-light);
+    @include gitlab-theme(
+      $theme-blue-100,
+      $theme-blue-200,
+      $theme-blue-500,
+      $theme-blue-700,
+      $theme-blue-800,
+      $theme-blue-900,
+      $white-light
+    );
   }
 
   &.ui_green {
-    @include gitlab-theme($theme-green-100, $theme-green-200, $theme-green-500, $theme-green-700, $theme-green-800, $theme-green-900, $white-light);
+    @include gitlab-theme(
+      $theme-green-100,
+      $theme-green-200,
+      $theme-green-500,
+      $theme-green-700,
+      $theme-green-800,
+      $theme-green-900,
+      $white-light
+    );
   }
 
   &.ui_light {
-    @include gitlab-theme($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-700, $theme-gray-700, $theme-gray-100, $theme-gray-700);
+    @include gitlab-theme(
+      $theme-gray-900,
+      $theme-gray-700,
+      $theme-gray-800,
+      $theme-gray-700,
+      $theme-gray-700,
+      $theme-gray-100,
+      $theme-gray-700
+    );
 
     .navbar-gitlab {
       background-color: $theme-gray-100;
@@ -270,5 +343,9 @@ body {
     .sidebar-top-level-items > li.active .badge {
       color: $theme-gray-900;
     }
+
+    .ide-sidebar-link {
+      color: $white-light;
+    }
   }
 }
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 48b981dd31f..eb789cc64b0 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -4,9 +4,15 @@
 
   .page-title,
   .modal-title {
+    .modal-title-with-label span {
+      vertical-align: middle;
+      display: inline-block;
+    }
+
     .color-label {
       font-size: $gl-font-size;
       padding: $gl-vert-padding $label-padding-modal;
+      vertical-align: middle;
     }
   }
 
diff --git a/app/assets/stylesheets/pages/lint.scss b/app/assets/stylesheets/pages/lint.scss
deleted file mode 100644
index 68b6c5ecbd4..00000000000
--- a/app/assets/stylesheets/pages/lint.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.ci-body {
-  .incorrect-syntax {
-    font-size: 18px;
-    color: $lint-incorrect-color;
-  }
-
-  .correct-syntax {
-    font-size: 18px;
-    color: $lint-correct-color;
-  }
-}
-
-.ci-linter {
-  .ci-editor {
-    height: 400px;
-  }
-
-  .ci-template pre {
-    white-space: pre-wrap;
-  }
-}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 584b0579b72..9a770d77685 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -1121,3 +1121,25 @@ pre.light-well {
   padding-top: $gl-padding;
   padding-bottom: 37px;
 }
+
+.project-ci-body {
+  .incorrect-syntax {
+    font-size: 18px;
+    color: $lint-incorrect-color;
+  }
+
+  .correct-syntax {
+    font-size: 18px;
+    color: $lint-correct-color;
+  }
+}
+
+.project-ci-linter {
+  .ci-editor {
+    height: 400px;
+  }
+
+  .ci-template pre {
+    white-space: pre-wrap;
+  }
+}
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 79cf93ee607..794a2640ad1 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -20,7 +20,6 @@
   display: flex;
   height: calc(100vh - #{$header-height});
   margin-top: 40px;
-  color: $almost-black;
   border-top: 1px solid $white-dark;
   border-bottom: 1px solid $white-dark;
 
@@ -43,7 +42,11 @@
     cursor: pointer;
 
     &.file-open {
-      background: $white-normal;
+      background: $link-active-background;
+    }
+
+    &.file-active {
+      font-weight: $gl-font-weight-bold;
     }
 
     .ide-file-name {
@@ -76,7 +79,10 @@
       margin-right: -8px;
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
+      background: $link-active-background;
+
       .ide-new-btn {
         display: block;
       }
@@ -406,7 +412,7 @@
   }
 
   .branch-container {
-    border-left: 4px solid $indigo-700;
+    border-left: 4px solid;
     margin-bottom: $gl-bar-padding;
   }
 
@@ -418,7 +424,6 @@
   .branch-header-title {
     flex: 1;
     padding: $grid-size $gl-padding;
-    color: $indigo-700;
     font-weight: $gl-font-weight-bold;
 
     svg {
@@ -736,9 +741,7 @@
     }
 
     .ide-view {
-      height: calc(
-        100vh - #{$header-height + $performance-bar-height + $flash-height}
-      );
+      height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
     }
   }
 }
@@ -798,20 +801,7 @@
 
 .ide-sidebar-link {
   padding: $gl-padding-8 $gl-padding;
-  background: $indigo-700;
-  color: $white-light;
-  text-decoration: none;
   display: flex;
   align-items: center;
-
-  &:focus,
-  &:hover {
-    color: $white-light;
-    text-decoration: underline;
-    background: $indigo-500;
-  }
-
-  &:active {
-    background: $indigo-800;
-  }
+  font-weight: $gl-font-weight-bold;
 }