Commit 2bd7c91e authored by Megan McDermott's avatar Megan McDermott
Browse files

Fixed display of infographics to make heights consistent.

parent e23d27c8
This diff is collapsed.
......@@ -360,11 +360,15 @@ $highlighted-fact-color-shaded: mix(black, $highlighted-fact-color, 10%);
.highlighted-fact-infographic {
margin: 0 auto;
max-width: 250px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.number,
.timer {
font-family: $font-bg-cond-book;
color: $dark-gray;
color: #4e4e4e;
}
.timer {
font-size: 2.3em;
......@@ -384,11 +388,12 @@ $highlighted-fact-color-shaded: mix(black, $highlighted-fact-color, 10%);
}
&.infographic-vertical {
// Had to choose a grey with suitable contrast for faculty colours + background
background: $medium-gray;
height: 200px;
width: 80px;
position: relative;
.graph-wrapper {
background: $medium-gray;
height: 200px;
width: 80px;
position: relative;
}
.graph {
width: 80px;
......@@ -397,9 +402,7 @@ $highlighted-fact-color-shaded: mix(black, $highlighted-fact-color, 10%);
bottom: 1px;
}
.timer {
position: relative;
left: calc(100% + 0.2em);
top: calc(100px - 1rem);
margin-left: .5em;
}
.timer:after {
content: '%';
......@@ -408,22 +411,23 @@ $highlighted-fact-color-shaded: mix(black, $highlighted-fact-color, 10%);
}
&.infographic-horizontal {
background: $medium-gray;
height: 80px;
width: 100%;
width: calc(100% - 5em);
position: relative;
left: -2em;
margin-bottom: 1em;
margin: 0;
max-width: 100%;
padding: 0 1em;
.graph-wrapper {
background: $medium-gray;
height: 80px;
width: 100%;
width: calc(100% - 5em);
position: relative;
margin-bottom: 1em;
}
.graph {
height: 80px;
width: 1px;
margin-right: 1em;
}
.timer {
position: relative;
left: calc(100% - .5em);
top: calc(-1 * (40px + 1.5rem));
width: 3em;
}
.timer:after {
......
Supports Markdown
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