BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 54e3361f by Filipa Lacerda
Options

Style OR separator properly

parent 3baf3dc9
Showing with 37 additions and 82 deletions
app/assets/stylesheets/pages/projects.scss
...@@ -489,7 +489,7 @@ a.deploy-project-label { ...@@ -489,7 +489,7 @@ a.deploy-project-label {
@media (max-width: $screen-md-max) { @media (max-width: $screen-md-max) {
.btn-template-icon { .btn-template-icon {
display: inline-block; display: inline-block;
height: 20px; height: 14px;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
} }
...@@ -507,8 +507,6 @@ a.deploy-project-label { ...@@ -507,8 +507,6 @@ a.deploy-project-label {
fill: #70AD51; fill: #70AD51;
} }
> div { > div {
margin-bottom: 10px; margin-bottom: 10px;
padding-left: 0; padding-left: 0;
...@@ -516,93 +514,50 @@ a.deploy-project-label { ...@@ -516,93 +514,50 @@ a.deploy-project-label {
} }
} }
.project-template { .new-project-second-column {
padding-top: 30px;
&: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;
}
}
@media (min-width: $screen-xs-max) and (max-width: $screen-md-max) { @media (min-width: $screen-lg-min) {
&:after { padding-top: 0;
top: 100%;
left: 49%;
margin-top: 10px;
}
} }
} &::before {
content: "OR";
.new-project-first-column {
&:after {
background: $white-light;
content: " ";
position: absolute; position: absolute;
top: 66%; left: 50%;
height: 40px; top: 0;
width: 20px; z-index: 10;
right: 7px; padding: 0 10px;
z-index: 1; text-align: center;
} background-color: $white-light;
color: $gray-darkest;
@media (min-width: $screen-xs-max) and (max-width: $screen-md-max) { transform: translateX(-50%);
margin-bottom: 40px;
&:after {
top: 100%;
left: 47%;
width: 50px;
}
}
@media (max-width: $screen-xs-max) {
margin-bottom: 40px;
&:after { @media (min-width: $screen-lg-min) {
top: 100%; left: -35px;
left: 42%; top: 50%;
width: 50px; padding: 10px 0;
width: 20px;
line-height: 20px;
transform: translateY(-50%);
} }
} }
}
.new-project-second-column { &::after {
&:before { content: "";
background: $gray-darkest;
width: 1px;
height: 100%;
position: absolute; position: absolute;
left: -23px; top: 10px;
display: inline-block; left: 10px;
content: " "; right: 10px;
} height: 1px;
background-color: $gray-darkest;
@media (max-width: $screen-md-max) {
&:before { @media (min-width: $screen-lg-min) {
height: 1px; bottom: 0;
left: 15px; left: -25px;
top: -20px; right: auto;
right: 15px; height: 100%;
width: auto; width: 1px;
} }
} }
} }
......
app/views/projects/new.html.haml
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
.col-lg-9.js-toggle-container .col-lg-9.js-toggle-container
= form_for @project, html: { class: 'new_project' } do |f| = form_for @project, html: { class: 'new_project' } do |f|
.row .row
.col-lg-6.col-sm-12.new-project-first-column .col-lg-6.col-sm-12
.project-template .project-template
.form-group .form-group
= f.label :template_project, class: 'label-light' do = f.label :template_project, class: 'label-light' do
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment