Skip to content
GitLab
Commit c2a3b61e authored by Anuprita Kulkarni's avatar Anuprita Kulkarni
Browse files

Merge branch 'feature/ISTWCMS-4700-m26lebla-ff' into '3.1.x' 

ISTWCMS-4766: css for no-js fact and figures when a carousel is selected,...

See merge request !201
parents d2363c1f 08e8d13a
Expand all Hide whitespace changes
Inline Side-by-side
source/_data/design-tokens.artifact.yml deleted 100644 → 0
View file @ d2363c1f
# DO NOT EDIT THIS FILE. This is a gitignored artifact created by Gulp.
# Design tokens should be edited in _patterns/00-config/config.design-tokens.yml
gesso:
palette:
brand:
blue:
base: "#0071BC"
light: "#4773aa"
light-1: "#8ba6ca"
light-2: "#dce4ef"
dark: "#205493"
dark-1: "#112E51"
ocean-blue:
base: "#02bfe7"
light: "#9bdaf1"
light-1: "#e1f3f8"
dark: "#00a6d2"
dark-1: "#046b99"
org-default:
uw-black:
lvl1: "#dfdfdf"
lvl2: "#a2a2a2"
lvl3: "#787878"
lvl4: "#000"
primary: "#000"
uw-gold:
lvl1: "#fffaaa"
lvl2: "#ffea30"
lvl3: "#fdd54f"
lvl4: "#e4b429"
primary: "#fdd54f"
uw-white:
lvl1: "#fff"
primary: "#fff"
neutral:
lvl1: "#dfdfdf"
lvl2: "#a2a2a2"
lvl3: "#787878"
lvl4: "#000"
primary: "#000"
org-ahs:
lvl1: "#97dfef"
lvl2: "#00bed0"
lvl3: "#0098a5"
lvl4: "#005963"
primary: "#005963"
org-art:
lvl1: "#ffd5a5"
lvl2: "#fbaf00"
lvl3: "#e78100"
lvl4: "#d93f00"
primary: "#d93f00"
org-eng:
lvl1: "#d0b4ef"
lvl2: "#be33da"
lvl3: "#8100b4"
lvl4: "#57058b"
primary: "#57058b"
org-env:
lvl1: "#daf582"
lvl2: "#bed500"
lvl3: "#b4be00"
lvl4: "#607000"
primary: "#607000"
org-mat:
lvl1: "#ffbeef"
lvl2: "#ff63aa"
lvl3: "#df2498"
lvl4: "#c60078"
primary: "#df2498"
org-sci:
lvl1: "#b4d5ff"
lvl2: "#63a0ff"
lvl3: "#0073ce"
lvl4: "#0033be"
primary: "#0073ce"
org-school:
lvl1: "#ffa5aa"
lvl2: "#e41740"
lvl3: "#b71233"
lvl4: "#80001f"
primary: "#b71233"
org-ren:
green: "#00693c"
red: "#de3831"
gold: "#d2c295"
lvl1: "#ffa5aa"
lvl2: "#e41740"
lvl3: "#b71233"
lvl4: "#80001f"
primary: "#00693c"
light: "#7FB49D"
org-stj:
green: "#01573e"
gold: "#c88a11"
lvl1: "#ffa5aa"
lvl2: "#e41740"
lvl3: "#b71233"
lvl4: "#80001f"
primary: "#01573e"
light: "#92B7AC"
org-stp:
green: "#879637"
brown: "#584528"
lvl1: "#ffa5aa"
lvl2: "#e41740"
lvl3: "#b71233"
lvl4: "#80001f"
primary: "#879637"
light: "#C2CD79"
org-cgc:
red: "#c4262e"
lvl1: "#ffa5aa"
lvl2: "#e41740"
lvl3: "#b71233"
lvl4: "#80001f"
primary: "#c4262e"
light: "#E8878C"
grayscale:
white: "#fff"
gray-1: "#fafafa"
gray-2: "#eee"
gray-3: "#ccc"
gray-4: "#A2A2A2"
gray-5: "#757575"
gray-6: "#4e4e4e"
gray-7: "#333"
black: "#000"
other:
yellow:
base: "#fad980"
light: "#fff1d2"
yellow-neon:
base: "#ff0"
green:
base: "#4d8f46"
dark: "#0a6700"
light: "#e7f4e4"
red:
base: "#e31c3d"
light: "#e59393"
light-1: "#f9dede"
dark: "#cd2026"
dark-1: "#981b1e"
orange-light: "#f69231"
orange-dark: "#ef6114"
box-shadow:
"0": none
"1": 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
"2": 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
"3": 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)
"4": 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
"5": 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)
"6": 0 0 10px rgba(0, 0, 0, 0.3) ,0 0 0 rgba(0, 0, 0, 0.3)
constrains:
sm: 800px
md: 1440px
lg: 2200px
breakpoints:
xs: 480px
sm: 641px
md: 769px
lg: 1011px
xl: 1200px
xxl: 1640px
onek: 1920px
twok: 2559px
colors:
text:
primary: "#000"
secondary: "#4e4e4e"
on-light: "#000"
on-dark: "#fff"
link: "#4e4e4e"
link-hover: "#000"
link-active: "#4e4e4e"
link-visited: "#4e4e4e"
background:
site: "#fff"
button:
default:
background: "#757575"
background-hover: "#eee"
background-active: "#757575"
text: "#fff"
text-hover: "#4e4e4e"
text-active: "#fff"
primary:
background: "#4d8f46"
background-hover: "#0a6700"
background-active: "#0a6700"
text: "#fff"
text-hover: "#fff"
text-active: "#fff"
secondary:
background: "#02bfe7"
background-hover: "#00a6d2"
background-active: "#046b99"
text: "#fff"
text-hover: "#fff"
text-active: "#fff"
disabled:
background: "#eee"
text: "#A2A2A2"
danger:
background: "#e31c3d"
background-hover: "#cd2026"
background-active: "#981b1e"
text: "#fff"
text-hover: "#fff"
text-active: "#fff"
cancel:
background: "#f69231"
background-hover: "#ef6114"
background-active: "#ef6114"
text: "#fff"
text-hover: "#fff"
text-active: "#fff"
form:
background: "#fafafa"
background-active: "#fff"
background-checked: "#0071BC"
background-unchecked: "#fff"
border: "#ccc"
border-dark: "#757575"
border-light: "#fafafa"
input:
input-background: "#fff"
input-border: "#ccc"
input-border-focus: "#757575"
input-color: "#4e4e4e"
input-outline: "#eee"
input-focus: "#757575"
fieldset:
fieldset-background: "#fafafa"
thumb: "#757575"
track: "#A2A2A2"
mark:
background: "#ff0"
text: "#000"
selection:
background: "#0071BC"
text: "#fff"
table:
border: "#ccc"
background: "#fff"
background-head: "#eee"
background-foot: "#eee"
ui:
generic:
background: "#A2A2A2"
background-darker: "#000"
background-dark: "#757575"
background-light: "#eee"
background-lighter: "#fafafa"
border: "#A2A2A2"
border-dark: "#4e4e4e"
border-light: "#eee"
text-lighter: "#fff"
text-light: "#A2A2A2"
text-dark: "#757575"
text-darker: "#000"
accent: "#000"
accent-dark: "#e4b429"
accent-light: "#ffea30"
focus: "#000"
error:
background: "#f9dede"
border: "#e59393"
success:
background: "#e7f4e4"
border: "#4d8f46"
warning:
background: "#fff1d2"
border: "#fad980"
typography:
font-family:
primary:
name: Primary
stack: georgia, "droid serif", "Times New Roman", Times, serif
secondary:
name: Secondary
stack: BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid
Sans", sans-serif;
book:
name: Book
stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy",
"Droid Sans", sans-serif'
condensed:
name: Condensed
stack: BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed
heavy", "Droid Sans", sans-serif
condensedbook:
name: Condensed-Book
stack: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
system:
name: System Typ1451-Regular
stack: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif
systemlight:
name: System light Typ1451-Light
stack: Typ1451-light,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif
systemmedium:
name: System Medium Typ1451-Medium
stack: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif
systembold:
name: System Bold Typ1451-Bold
stack: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif
monospace:
name: Monospace
stack: Consolas, "Lucida Console", "Liberation Mono", "Courier New",
monospace, sans-serif
base-font-size: 16px
font-size:
"0": 16px
"1": 18px
"2": 20.256px
"3": 22.784px
"4": 25.632px
"5": 28.832px
"6": 32.432px
"7": 36.496px
"8": 41.056px
"9": 46.192px
"10": 51.952px
"11": 58.448px
"12": 65.76px
"13": 73.984px
"14": 83.232px
"15": 93.632px
"16": 105.328px
"-6": 7.888px
"-5": 8.88px
"-4": 9.984px
"-3": 11.232px
"-2": 12.64px
"-1": 14.22224px
font-weight:
hairline: 200
light: 300
regular: 400
bold: 600
semibold: 600
extrabold: 700
black: 800
line-height:
tight: 1.1
base: 1.45
loose: 1.7
display:
display:
font-family: georgia, "droid serif", "Times New Roman", Times, serif
font-size: 41.056px
font-weight: 400
h1:
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
font-size: 41.056px
font-weight: 400
line-height: 1.1
h2:
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
font-size: 28.832px
font-weight: 400
line-height: 1.1
h3:
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
font-size: 22.784px
font-weight: 400
line-height: 1.1
h4:
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
font-size: 20.256px
font-weight: 400
line-height: 1.1
h5:
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
font-size: 18px
font-weight: 400
line-height: 1.1
h6:
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
font-size: 16px
font-weight: 400
line-height: 1.1
blockquote:
font-family: georgia, "droid serif", "Times New Roman", Times, serif
font-size: 22.784px
font-weight: 400
line-height: 1.45
body:
color: "#000"
font-family: georgia, "droid serif", "Times New Roman", Times, serif
font-size: 16px
font-weight: 400
line-height: 1.45
body-large:
color: "#000"
font-family: georgia, "droid serif", "Times New Roman", Times, serif
font-size: 20.256px
font-weight: 400
line-height: 1.45
cite:
color: "#4e4e4e"
font-family: georgia, "droid serif", "Times New Roman", Times, serif
font-size: 16px
font-style: normal
font-weight: 600
letter-spacing: .02rem
line-height: 1.1
input:
color: "#4e4e4e"
font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif
font-size: 16px
font-style: normal
font-weight: 600
letter-spacing: .02rem
line-height: 1.1
transitions:
ease:
ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
ease-out: cubic-bezier(0.0, 0, 0.2, 1)
ease-in: cubic-bezier(0.4, 0, 1, 1)
sharp: cubic-bezier(0.4, 0, 0.6, 1)
duration:
shortest: 150ms
short: 200ms
standard: 375ms
long: 400ms
intro: 270ms
outro: 195ms
z-index:
modal: 10
drawer: 9
overlay: 9
nav: 8
logo: 8
dropdown: 7
mobilemenu: 6
interact: 5
header: 4
content: 3
footer: 2
slides: 2
wrapper: 2
background: 1
spacing:
xxs: 4px
xs: 8px
sm: 16px
md: 24px
lg: 32px
xl: 56px
xxl: 96px
gutter-width: 40px
source/_patterns/00-config/config.design-tokens.yml
View file @ c2a3b61e
......@@ -232,7 +232,7 @@ gesso:
input-outline: grayscale.gray-2
input-focus: grayscale.gray-5
fieldset:
fieldset-background: grayscale.gray-1
fieldset-background: grayscale.gray-1
thumb: grayscale.gray-5
track: grayscale.gray-4
mark:
......
source/_patterns/04-components/facts-and-figures/_infographics.twig 0 → 100644
View file @ c2a3b61e
{% if ffs.bg_colour == 'gold' %}
{% set graph_colour = "#000000" %}
{% else %}
{% if ffs.theme == 'org-art' %}
{% set graph_colour = "#d93f00" %}
{% elseif ffs.theme == 'org-eng' %}
{% set graph_colour = "#57058b" %}
{% elseif ffs.theme == 'org-ahs' %}
{% set graph_colour = "#005963" %}
{% elseif ffs.theme == 'org-mat' %}
{% set graph_colour = "#c60078" %}
{% elseif ffs.theme == 'org-sci' %}
{% set graph_colour = "#0033be" %}
{% elseif ffs.theme == 'org-env' %}
{% set graph_colour = "#607000" %}
{% elseif ffs.theme == 'org-stp' %}
{% set graph_colour = "#879637" %}
{% elseif ffs.theme == 'org-stj' %}
{% set graph_colour = "#01573e" %}
{% elseif ffs.theme == 'org-ren' %}
{% set graph_colour = "#00693c" %}
{% elseif ffs.theme == 'org-cgc' %}
{% set graph_colour = "#c4262e" %}
{% elseif ffs.theme == 'org-school' %}
{% set graph_colour = "#b71233" %}
{% elseif ffs.theme == 'org-default' %}
{% set graph_colour = "#FFD54F" %}
{% 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 }}"
>
{% if infographics.info_type == 'number' %}
<span class="number">
<span class="timer">{{ infographics.info_text }}</span>
{% if infographics.info_suffix %}
{{ infographics.info_suffix }}
{% endif %}
</span>
{% else %}
<div class="infographic-texthide">
{{ infographics.info_text }}
{% if infographics.info_suffix %}
{{ infographics.info_suffix }}
{% else %}
<span>%</span>
{% endif %}
</div>
{% endif %}
</div>
source/_patterns/04-components/facts-and-figures/facts-and-figures.js
View file @ c2a3b61e
/**
* @file
* Javascript for facts and figures
*/
(function ($, Drupal) {
Drupal.behaviors.factfigure = {
attach: function (context, settings) {
$(document).ready(function () {
// Step through each FF on the page.
$('.uw-ff').each(function () {
var result = $(this).find('.uw-ff__has-carousel-settings').length;
// Get the id to reference the individual FF.
// Need this to ensure that if more than one FF on the page,
// that all FFs get the carousel added.
var id = '#uw-ff-' + $(this).data('id');
// Get the number of items for the carousel, if any.
var num_of_items = $(id).data('num-per-carousel') !== '' ? $(this).data('num-per-carousel') : 3;
// Add the carousel to the FF using the id.
$(id + ' .owl-carousel').owlCarousel({
margin: 10,
nav: true,
navContainerClass: 'uw-owl-nav',
navText:[
'‹ prev',
'next ›'
],
responsiveClass: true,
responsive: {
0: {
items: 1
},
600: {
items: num_of_items <= 2 ? (num_of_items - 1 > 0) ? num_of_items - 1 : 1 : 2
},
1000: {
items: num_of_items
}
Drupal.behaviors.factfigure = {
attach: function (context, settings) {
function runCarousel(id, numOfItems)
{
// Add the carousel to the FF using the id.
$(id + " .owl-carousel").owlCarousel(
{
margin: 10,
nav: true,
navContainerClass: "uw-owl-nav",
navText: [
"‹ prev",
"next ›"
],
responsiveClass: true,
responsive: {
0: {
items: 1
},
600: {
items: numOfItems <= 2 ? (numOfItems - 1 > 0) ? numOfItems - 1 : 1 : 2
},
1000: {
items: numOfItems
}
}