1 files changed, 97 insertions, 24 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index a086c11324d..bd385db9692 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -48,7 +48,8 @@
       border: 1px solid $border-color;
     }
 
-    + .select2 a {
+    + .select2 a,
+    + .btn-default {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
@@ -549,10 +550,96 @@ a.deploy-project-label {
   }
 }
 
-.project-template,
+.project-template {
+  > .form-group {
+    margin-bottom: 0;
+  }
+
+  .template-option {
+    padding: $gl-padding $gl-padding $gl-padding ($gl-padding * 4);
+    position: relative;
+
+    &:not(:first-child) {
+      border-top: 1px solid $border-color;
+    }
+  }
+
+  .template-title {
+    font-size: 16px;
+  }
+
+  .template-description {
+    margin: 6px 0 12px;
+  }
+
+  .template-button {
+    input {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+    }
+  }
+
+  svg {
+    position: absolute;
+    left: $gl-padding;
+    top: $gl-padding;
+  }
+
+  .project-fields-form {
+    display: none;
+
+    &.selected {
+      display: block;
+      padding: $gl-padding;
+    }
+  }
+
+  .template-input-group {
+    position: relative;
+
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+    }
+
+    .input-group-addon {
+      flex: 1;
+      text-align: left;
+      padding-left: ($gl-padding * 3);
+      background-color: $white-light;
+    }
+
+    .selected-template {
+      line-height: 20px;
+    }
+
+    .selected-icon {
+      svg {
+        display: none;
+        top: 7px;
+        height: 20px;
+        width: 20px;
+
+        &.active {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+.gitlab-tab-content {
+  .import-project-pane {
+    padding-bottom: 6px;
+  }
+}
+
 .project-import {
-  .form-group {
-    margin-bottom: 5px;
+  .import-btn-container {
+    margin-bottom: 0;
+  }
+
+  .toggle-import-form {
+    padding-bottom: 10px;
   }
 
   .import-buttons {
@@ -567,10 +654,6 @@ a.deploy-project-label {
       margin-right: 10px;
     }
 
-    .blank-option {
-      min-width: 70px;
-    }
-
     .btn-template-icon {
       height: 24px;
       width: inherit;
@@ -592,18 +675,6 @@ a.deploy-project-label {
       }
     }
 
-    .icon-rails path {
-      fill: $rails;
-    }
-
-    .icon-node-express path {
-      fill: $node;
-    }
-
-    .icon-java-spring path {
-      fill: $java;
-    }
-
     > div {
       margin-bottom: 10px;
       padding-left: 0;
@@ -611,10 +682,6 @@ a.deploy-project-label {
   }
 }
 
-.project-templates-buttons .btn:last-child {
-  margin-right: 0;
-}
-
 .create-project-options {
   display: flex;
 
@@ -1053,6 +1120,12 @@ pre.light-well {
     min-width: 100px;
   }
 
+  &.form-group {
+    @media (min-width: $screen-sm-min) {
+      margin-bottom: 0;
+    }
+  }
+
   .select2-choice {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;