Skip to content
GitLab
Commit 2bd7c91e authored by Megan McDermott's avatar Megan McDermott
Browse files

Fixed display of infographics to make heights consistent.

parent e23d27c8
Expand all Hide whitespace changes
Inline Side-by-side
css/rwd.css
View file @ 2bd7c91e
This diff is collapsed.
sass/rwd/modules/_highlighted_facts.scss
View file @ 2bd7c91e
......@@ -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