Style OR separator properly

1 files changed, 36 insertions, 81 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 12da6fc075b..dacafb0ed37 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -489,7 +489,7 @@ a.deploy-project-label {
     @media (max-width: $screen-md-max) {
       .btn-template-icon {
         display: inline-block;
-        height: 20px;
+        height: 14px;
         font-size: 14px;
         margin: 0;
       }
@@ -507,8 +507,6 @@ a.deploy-project-label {
       fill: #70AD51;
     }
 
-
-
     > div {
       margin-bottom: 10px;
       padding-left: 0;
@@ -516,93 +514,50 @@ a.deploy-project-label {
   }
 }
 
-.project-template {
-
-  &:after {
-    content: "OR";
-    position: absolute;
-    color: $gray-darkest;
-    right: 13px;
-    z-index: 2;
-    top: 78px;
-  }
-
-  @media (max-width: $screen-md-max) {
-    &:after {
-      top: 100%;
-      left: 49%;
-      margin-top: 10px;
-    }
-  }
-
-  @media (max-width: $screen-xs-min) {
-    &:after {
-      top: 100%;
-      left: 46%;
-      margin-top: 10px;
-    }
-  }
+.new-project-second-column {
+  padding-top: 30px;
 
-  @media (min-width: $screen-xs-max) and (max-width: $screen-md-max) {
-    &:after {
-      top: 100%;
-      left: 49%;
-      margin-top: 10px;
-    }
+  @media (min-width: $screen-lg-min) {
+    padding-top: 0;
   }
 
-}
-
-.new-project-first-column {
-  &:after {
-    background: $white-light;
-    content: " ";
+  &::before {
+    content: "OR";
     position: absolute;
-    top: 66%;
-    height: 40px;
-    width: 20px;
-    right: 7px;
-    z-index: 1;
-  }
-
-  @media (min-width: $screen-xs-max) and (max-width: $screen-md-max) {
-    margin-bottom: 40px;
-    &:after {
-      top: 100%;
-      left: 47%;
-      width: 50px;
-    }
-  }
-
-  @media (max-width: $screen-xs-max) {
-    margin-bottom: 40px;
+    left: 50%;
+    top: 0;
+    z-index: 10;
+    padding: 0 10px;
+    text-align: center;
+    background-color: $white-light;
+    color: $gray-darkest;
+    transform: translateX(-50%);
 
-    &:after {
-      top: 100%;
-      left: 42%;
-      width: 50px;
+    @media (min-width: $screen-lg-min) {
+      left: -35px;
+      top: 50%;
+      padding: 10px 0;
+      width: 20px;
+      line-height: 20px;
+      transform: translateY(-50%);
     }
   }
-}
 
-.new-project-second-column {
-  &:before {
-    background: $gray-darkest;
-    width: 1px;
-    height: 100%;
+  &::after {
+    content: "";
     position: absolute;
-    left: -23px;
-    display: inline-block;
-    content: " ";
-  }
-
-  @media (max-width: $screen-md-max) {
-    &:before {
-      height: 1px;
-      left: 15px;
-      top: -20px;
-      right: 15px;
-      width: auto;
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    height: 1px;
+    background-color: $gray-darkest;
+
+    @media (min-width: $screen-lg-min) {
+      bottom: 0;
+      left: -25px;
+      right: auto;
+      height: 100%;
+      width: 1px;
     }
   }
 }