From a735e74141d963257779202ba377742f2d2ce9f1 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 2 Aug 2022 13:53:46 -0400
Subject: [PATCH] ISTWCMS-5718: additional css for fact figures
---
src/patterns/01-core/elements/_svg.scss | 21 ++++----
.../facts-and-figures/_facts-and-figures.scss | 54 ++++++++-----------
.../facts-and-figures/_infographics.twig | 29 +++++-----
.../facts-and-figures/facts-and-figures.yml | 8 ++-
4 files changed, 54 insertions(+), 58 deletions(-)
diff --git a/src/patterns/01-core/elements/_svg.scss b/src/patterns/01-core/elements/_svg.scss
index 9775923b..429dedbd 100644
--- a/src/patterns/01-core/elements/_svg.scss
+++ b/src/patterns/01-core/elements/_svg.scss
@@ -4,20 +4,19 @@
:where(svg) {
block-size: auto;
display: block;
- fill: currentColor;
+ //fill: currentColor;
max-inline-size: 100%;
stroke: none;
+ //&:where(:not([fill])) {
+ // fill: none;
+ // stroke-linecap: round;
+ // stroke-linejoin: round;
+ // //stroke: currentColor;
+ //}
- &:where(:not([fill])) {
- fill: none;
- stroke-linecap: round;
- stroke-linejoin: round;
- stroke: currentColor;
- }
-
- &:where(:not([width])) {
- inline-size: var(--size-10);
- }
+ //&:where(:not([width])) {
+ // inline-size: var(--size-10);
+ //}
&:not(:root) {
overflow: hidden;
}
diff --git a/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss b/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss
index 73b6b46a..cb7dded6 100644
--- a/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss
+++ b/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss
@@ -74,12 +74,10 @@ $highlighted-fact-round: $global-rounded;
}
&__medium {
color: var(--#{$colour}-3);
-
}
&__small{
background-color: var(--#{$colour}-3);
color: var(--#{$colour}-3);
-
}
}
@@ -156,7 +154,6 @@ $highlighted-fact-round: $global-rounded;
&__medium {
color: var(--#{$colour}-1);
-
}
&__small{
background-color: var(--#{$colour}-1);
@@ -207,6 +204,11 @@ $highlighted-fact-round: $global-rounded;
}
@else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc {
+ .number,
+ .timer {
+ color: var(--#{$colour}-light);
+ fill: var(--#{$colour}-light);
+ }
.uw-ff--text {
&__big {
color: var(--#{$colour}-light);
@@ -214,11 +216,10 @@ $highlighted-fact-round: $global-rounded;
&__medium {
color: var(--#{$colour}-light);
-
}
&__small {
- background-color: var(--#{$colour}-light);
+ background-color: var(--#{$colour}-primary);
color: var(--uw-white);
}
}
@@ -241,11 +242,12 @@ $highlighted-fact-round: $global-rounded;
@else {
.number,
.timer {
- color: var(--#{$colour}-4);
+ color: var(--#{$colour}-1);
+ fill: var(--#{$colour}-1);
}
.uw-ff--text {
&__big {
- color: var(--#{$colour}-4);
+ color: var(--#{$colour}-1);
}
&__medium {
@@ -281,21 +283,20 @@ $highlighted-fact-round: $global-rounded;
@else {
.uw-ff--text {
&__big {
- color: var(--#{$colour}-4);
+ color: var(--#{$colour}-primary);
}
&__medium {
- color: var(--#{$colour}-4);
+ color: var(--#{$colour}-primary);
}
&__small{
- background-color: var(--#{$colour}-4);
+ background-color: var(--#{$colour}-primary);
color: var(--uw-white);
}
}
}
}
}
-
&__gold{
.#{$faculty} {
@if $faculty == org-default {
@@ -427,7 +428,6 @@ are the same height. */
&:nth-of-type(odd) {
&::after {
border-bottom: var(--size-3) solid var(--uw-white);
-
}
}
@@ -500,12 +500,12 @@ are the same height. */
&__text-right {
.infographic-number {
- display:block;
+ display: block;
}
.infographic-vertical {
justify-self: flex-end;
- width:auto;
+ width: auto;
}
.uw-ff--fact{
@@ -583,12 +583,10 @@ are the same height. */
&--text {
grid-column: 1 / 2;
- grid-row: auto ;
+ grid-row: auto;
width: 100%;
-
&__icon {
- display:block;
-
+ display: block;
img {
display: block;
height: 100%;
@@ -687,11 +685,10 @@ are the same height. */
width: 100%;
}
- @media(min-width: $screen-xl) {
+ @media(min-width: $screen-xl) {
width: 100%;
}
}
-
.uw-full-width & {
@media(min-width: $screen-xs) {
@@ -733,7 +730,7 @@ are the same height. */
&::after{
bottom: -1.25rem;
top: inherit;
- transform: rotate(180deg)
+ transform: rotate(180deg);
}
}
}
@@ -760,13 +757,13 @@ are the same height. */
}
.circliful .outer {
- -webkit-animation-play-state: running;
+ animation-play-state: running;
fill: transparent;
stroke: var(--gray-7);
stroke-dasharray: 534;
stroke-width: 19.8;
/* firefox bug fix - won't rotate at 90deg angles */
- -moz-transform: rotate(-89deg) translateX(-190px);
+ transform: rotate(-89deg) translateX(-190px);
transition: stroke-dashoffset 1s;
}
@@ -790,9 +787,8 @@ are the same height. */
font-family: var(--font-condensedbook);
font-size: 3.2rem;
width: 100%;
-
.no-js & {
- display:block;
+ display: block;
}
.no-js.js & {
@@ -892,28 +888,22 @@ are the same height. */
@include flex-grow(1);
margin: var(--size-205) 0;
width: 100%;
-
@media(min-width: $screen-xs) {
width: 50%;
}
-
- @media(min-width: $screen-md) {
+ @media(min-width: $screen-md) {
width: 30%;
}
-
@media(min-width: $screen-xl) {
width: 25%;
}
-
.uw-contained-width--wide & {
@media(min-width: $screen-xs) {
width: 45%;
}
-
@media(min-width: $screen-md) {
width: 45%;
}
-
@media(min-width: $screen-xl) {
width: 45%;
}
diff --git a/src/patterns/04-components/facts-and-figures/_infographics.twig b/src/patterns/04-components/facts-and-figures/_infographics.twig
index de2514d7..2baf8acb 100644
--- a/src/patterns/04-components/facts-and-figures/_infographics.twig
+++ b/src/patterns/04-components/facts-and-figures/_infographics.twig
@@ -1,38 +1,39 @@
{% if ffs.bg_colour == 'gold' %}
- {% set graph_colour = "#000000" %}
+ {% set graph_colour = "--uw-black" %}
{% else %}
{% if ffs.theme == 'org-art' %}
- {% set graph_colour = "#d93f00" %}
+ {% set graph_colour = "--art-4" %}
{% elseif ffs.theme == 'org-eng' %}
- {% set graph_colour = "#57058b" %}
+ {% set graph_colour = "--eng-4" %}
{% elseif ffs.theme == 'org-ahs' %}
- {% set graph_colour = "#005963" %}
+ {% set graph_colour = "--ahs-4" %}
{% elseif ffs.theme == 'org-mat' %}
- {% set graph_colour = "#c60078" %}
+ {% set graph_colour = "--mat-4" %}
{% elseif ffs.theme == 'org-sci' %}
- {% set graph_colour = "#0033be" %}
+ {% set graph_colour = "--sci-4" %}
{% elseif ffs.theme == 'org-env' %}
- {% set graph_colour = "#607000" %}
+ {% set graph_colour = "--env-4" %}
{% elseif ffs.theme == 'org-stp' %}
- {% set graph_colour = "#879637" %}
+ {% set graph_colour = "--stp-light" %}
{% elseif ffs.theme == 'org-stj' %}
- {% set graph_colour = "#01573e" %}
+ {% set graph_colour = "--stj-light" %}
{% elseif ffs.theme == 'org-ren' %}
- {% set graph_colour = "#00693c" %}
+ {% set graph_colour = "--ren-light" %}
{% elseif ffs.theme == 'org-cgc' %}
- {% set graph_colour = "#c4262e" %}
+ {% set graph_colour = "--cgc-light" %}
{% elseif ffs.theme == 'org-school' %}
- {% set graph_colour = "#b71233" %}
+ {% set graph_colour = "--school-4" %}
{% elseif ffs.theme == 'org-default' %}
- {% set graph_colour = "#FFD54F" %}
+ {% set graph_colour = "--uw-gold" %}
{% endif %}
{% endif %}
+
<div
class="highlighted-fact-infographic infographic-{{ infographics.info_type | replace({'_': '-'}) }} "
data-infographic-type="{{ infographics.info_type }}"
data-percent="{{ infographics.info_text }}"
- data-foregroundColor="{{ graph_colour }}"
+ data-foregroundColor="var({{ graph_colour }})"
>
{% if infographics.info_type == 'number' %}
<span class="number">
diff --git a/src/patterns/04-components/facts-and-figures/facts-and-figures.yml b/src/patterns/04-components/facts-and-figures/facts-and-figures.yml
index e371ef04..f71409b3 100644
--- a/src/patterns/04-components/facts-and-figures/facts-and-figures.yml
+++ b/src/patterns/04-components/facts-and-figures/facts-and-figures.yml
@@ -2,7 +2,7 @@ ffs:
id: 1
show: true
bg_colour: 'grey'
- theme: 'org-default'
+ theme: 'org-eng'
text_align: 'center'
num_per_carousel: 3
details:
@@ -27,6 +27,9 @@ ffs:
-
text: 'Big #2'
type: 'big'
+ -
+ text: 'Medium'
+ type: 'medium'
-
text: 'Small #1'
type: 'small'
@@ -39,6 +42,9 @@ ffs:
-
text: 'Big #2'
type: 'big'
+ -
+ text: 'Medium'
+ type: 'medium'
-
text: 'Small #1'
type: 'small'
--
GitLab