Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
WCMS
uw_fdsu_theme_resp
Commits
2bd7c91e
Commit
2bd7c91e
authored
Apr 08, 2020
by
Megan McDermott
Browse files
Fixed display of infographics to make heights consistent.
parent
e23d27c8
Changes
2
Expand all
Hide whitespace changes
Inline
Side-by-side
css/rwd.css
View file @
2bd7c91e
This diff is collapsed.
Click to expand it.
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
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment