Commit f922fa52 authored by Simon Knox's avatar Simon Knox

fixup some classnames and media queries

parent da1f5255
...@@ -39,10 +39,7 @@ $space-between-cards: 8px; ...@@ -39,10 +39,7 @@ $space-between-cards: 8px;
.convdev-cards { .convdev-cards {
display: flex; display: flex;
justify-content: center; justify-content: center;
@media (max-width: $screen-lg-min) {
flex-wrap: wrap; flex-wrap: wrap;
}
} }
.convdev-card-wrapper { .convdev-card-wrapper {
...@@ -50,35 +47,26 @@ $space-between-cards: 8px; ...@@ -50,35 +47,26 @@ $space-between-cards: 8px;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
text-align: center; text-align: center;
width: 10%; width: 50%;
border-color: $border-color; border-color: $border-color;
margin: 0 0 32px; margin: 0 0 32px;
padding: $space-between-cards / 2; padding: $space-between-cards / 2;
position: relative; position: relative;
@media (max-width: $screen-lg-min) { @media (min-width: $screen-xs-min) {
width: 16.667%; width: percentage(1 / 4);
.convdev-card-title {
max-width: 100px;
margin: $gl-padding auto auto;
} }
.card-scores { @media (min-width: $screen-sm-min) {
margin: $gl-padding 24px; width: percentage(1 / 5);
}
} }
@media (max-width: $screen-md-min) { @media (min-width: $screen-md-min) {
width: 20%; width: percentage(1 / 6);
} }
@media (max-width: $screen-sm-min) { @media (min-width: $screen-lg-min) {
width: 25%; width: percentage(1 / 10);
}
@media (max-width: $screen-xs-min) {
width: 50%;
} }
} }
...@@ -86,8 +74,6 @@ $space-between-cards: 8px; ...@@ -86,8 +74,6 @@ $space-between-cards: 8px;
border: solid 1px $border-color; border: solid 1px $border-color;
border-radius: 3px; border-radius: 3px;
border-top-width: 3px; border-top-width: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
...@@ -118,8 +104,8 @@ $space-between-cards: 8px; ...@@ -118,8 +104,8 @@ $space-between-cards: 8px;
} }
.convdev-card-title { .convdev-card-title {
margin-top: $gl-padding; margin: $gl-padding auto auto;
margin-bottom: auto; max-width: 100px;
h3 { h3 {
font-size: 14px; font-size: 14px;
...@@ -166,7 +152,6 @@ $space-between-cards: 8px; ...@@ -166,7 +152,6 @@ $space-between-cards: 8px;
.card-buttons { .card-buttons {
display: flex; display: flex;
justify-content: stretch;
> * { > * {
font-size: 16px; font-size: 16px;
...@@ -192,10 +177,6 @@ $space-between-cards: 8px; ...@@ -192,10 +177,6 @@ $space-between-cards: 8px;
justify-content: space-around; justify-content: space-around;
position: relative; position: relative;
background: $border-color; background: $border-color;
@media (max-width: $screen-lg-min) {
display: none;
}
} }
.convdev-step { .convdev-step {
...@@ -247,6 +228,8 @@ $space-between-cards: 8px; ...@@ -247,6 +228,8 @@ $space-between-cards: 8px;
transition: transform 0.1s; transition: transform 0.1s;
width: 30px; width: 30px;
height: 30px; height: 30px;
min-height: 30px;
min-width: 30px;
} }
} }
......
...@@ -27,10 +27,9 @@ ...@@ -27,10 +27,9 @@
- @metric.cards.each do |card| - @metric.cards.each do |card|
= render 'card', card: card = render 'card', card: card
.convdev-steps.row .convdev-steps.visible-lg
- @metric.idea_to_production_steps.each_with_index do |step, index| - @metric.idea_to_production_steps.each_with_index do |step, index|
.convdev-step{ class: "convdev-#{score_level(step.percentage_score)}-score" } .convdev-step{ class: "convdev-#{score_level(step.percentage_score)}-score" }
.as
= custom_icon("i2p_step_#{index + 1}") = custom_icon("i2p_step_#{index + 1}")
%h4.convdev-step-title %h4.convdev-step-title
= step.title = step.title
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