Style or separator according to review

3 files changed, 79 insertions, 39 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 96720c0f83b..2461d32a826 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -7,7 +7,8 @@
 }
 
 .new_project,
-.edit-project {
+.edit-project,
+.import-project {
 
   .sharing-and-permissions {
     .header {
@@ -486,7 +487,7 @@ a.deploy-project-label {
       font-size: 24px;
     }
 
-    @media (max-width: $screen-md-max) {
+    @media (max-width: $screen-xs-max) {
       .btn-template-icon {
         display: inline-block;
         height: 14px;
@@ -514,54 +515,93 @@ a.deploy-project-label {
   }
 }
 
-.new-project-second-column {
-  padding-top: 30px;
+.create-project-options {
+  display: flex;
 
-  @media (min-width: $screen-lg-min) {
-    padding-top: 0;
+  @media (max-width: $screen-xs-max) {
+    display: block;
   }
 
-  &::before {
-    content: "OR";
-    position: absolute;
-    left: 50%;
-    top: 0;
-    z-index: 10;
-    padding: 0 10px;
-    text-align: center;
-    background-color: $white-light;
-    color: $gray-darkest;
-    transform: translateX(-50%);
-
-    @media (min-width: $screen-lg-min) {
-      left: -30px;
-      top: 50%;
-      padding: 10px 0;
-      width: 20px;
-      line-height: 20px;
-      transform: translateY(-50%);
+  .first-column {
+    @media(min-width: $screen-xs-min) {
+      max-width: 50%;
+      width: 50%;
+    }
+
+    @media(max-width: $screen-xs-max) {
+      max-width: 100%;
+      width: 100%;
     }
   }
 
-  &::after {
-    content: "";
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    right: 10px;
-    height: 1px;
-    background-color: $gray-darkest;
+  .second-column {
+    @media(min-width: $screen-xs-min) {
+      width: 50%;
+      flex: 1;
+      padding-left: 30px;
+      position: relative;
+    }
 
-    @media (min-width: $screen-lg-min) {
+    @media(max-width: $screen-xs-max) {
+      max-width: 100%;
+      width: 100%;
+      padding-left: 0;
+      position: relative;
+    }
+
+    // Mobile
+    @media (max-width: $screen-xs-max) {
+      padding-top: 30px;
+    }
+
+    &::before {
+      content: "OR";
+      position: absolute;
+      left: 0px;
+      top: 40%;
+      z-index: 10;
+      padding: 8px 0;
+      text-align: center;
+      background-color: $white-light;
+      color: $gl-text-color-tertiary;
+      transform: translateX(-50%);
+      font-size: 12px;
+      font-weight: bold;;
+      line-height: 20px;
+
+      // Mobile
+      @media (max-width: $screen-xs-max) {
+        left: 50%;
+        top: 10px;
+        transform: translateY(-50%);
+        padding: 0px 8px;
+      }
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      background-color: $border-color;
       bottom: 0;
-      left: -20px;
+      left: 0;
       right: auto;
       height: 100%;
       width: 1px;
+      top: 0;
+
+      // Mobile
+      @media (max-width: $screen-xs-max) {
+        top: 10px;
+        left: 10px;
+        right: 10px;
+        height: 1px;
+        width: auto;
+      }
     }
   }
 }
 
+
 .project-stats {
   font-size: 0;
   text-align: center;
diff --git a/app/views/import/gitlab_projects/new.html.haml b/app/views/import/gitlab_projects/new.html.haml
index e20e31e0b32..2049b5dd249 100644
--- a/app/views/import/gitlab_projects/new.html.haml
+++ b/app/views/import/gitlab_projects/new.html.haml
@@ -5,7 +5,7 @@
   Import an exported GitLab project
 %hr
 
-= form_for import_gitlab_project_path, class: 'form-horizontal', multipart: true do |f|
+= form_for import_gitlab_project_path, class: 'form-horizontal import-project', multipart: true do |f|
   .row
     .form-group.col-xs-12.col-sm-6
       = f.label :namespace_id, class: 'label-light' do
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 93b59dbccaf..15e8e485812 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -17,8 +17,8 @@
           Create or Import your project from popular Git services
     .col-lg-9.js-toggle-container
       = form_for @project, html: { class: 'new_project' } do |f|
-        .row
-          .col-lg-6.col-sm-12
+        .create-project-options
+          .first-column
             .project-template
               .form-group
                 = f.label :template_project, class: 'label-light' do
@@ -26,7 +26,7 @@
                   = link_to icon('question-circle'), help_page_path("public_access/public_access"), aria: { label: "What's included in a template?" }, title: "What's included in a template?", class: 'has-tooltip', data: { placement: 'top'}
                 %div
                   = render 'project_templates', f: f
-          .col-lg-6.col-sm-12.new-project-second-column
+          .second-column
             - if import_sources_enabled?
               .project-import
                 .form-group.clearfix