From 79effedea1663b0c80534d725eaa22498090645e Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Tue, 15 Nov 2016 09:28:16 +0000 Subject: [PATCH 1/2] Move styles for data to the elements typography partial - Ensure data has the same top and bottom margins as paragraph text - Reduce the line height of data items --- public/sass/elements-page.scss | 7 +------ public/sass/elements/_elements-typography.scss | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/public/sass/elements-page.scss b/public/sass/elements-page.scss index 6ec2c55f4..cd6965799 100644 --- a/public/sass/elements-page.scss +++ b/public/sass/elements-page.scss @@ -357,12 +357,7 @@ $palette: ( // 5. Data // ========================================================================== -.data .bold-xlarge, -.data .bold-xxlarge { - line-height: 0.8; -} - -.example .data p { +.example .data { margin-bottom: 0; } diff --git a/public/sass/elements/_elements-typography.scss b/public/sass/elements/_elements-typography.scss index 36f3319c1..044c22ce9 100644 --- a/public/sass/elements/_elements-typography.scss +++ b/public/sass/elements/_elements-typography.scss @@ -291,3 +291,19 @@ hr { margin-left: -$gutter-half; } } + +// Data +.data { + margin-top: em(5, 16); + margin-bottom: em(20, 16); + + @include media(tablet) { + margin-top: em(5, 19); + margin-bottom: em(20, 19); + } +} + +.data-item { + display: block; + line-height: 1; +} From 3869203c2e6c41744e595ab045e56faa3b3e0863 Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Tue, 15 Nov 2016 09:30:28 +0000 Subject: [PATCH 2/2] Amend the markup for data examples Use a span for wrapping numbers, rather than a heading and paragraph. Add a new class, data-item to set data items to display:block and to override the line height for data items --- app/views/snippets/data_48px_16px.html | 4 ++-- app/views/snippets/data_48px_16px_example.html | 4 ++-- app/views/snippets/data_80px_16px.html | 4 ++-- app/views/snippets/data_80px_16px_example.html | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/views/snippets/data_48px_16px.html b/app/views/snippets/data_48px_16px.html index 6e18f9e8e..12d0326ce 100644 --- a/app/views/snippets/data_48px_16px.html +++ b/app/views/snippets/data_48px_16px.html @@ -1,4 +1,4 @@
-

48px

-

16px

+ 48px + 16px
diff --git a/app/views/snippets/data_48px_16px_example.html b/app/views/snippets/data_48px_16px_example.html index a04d7bffd..035b5581f 100644 --- a/app/views/snippets/data_48px_16px_example.html +++ b/app/views/snippets/data_48px_16px_example.html @@ -1,4 +1,4 @@
-

56/154

-

on GOV.UK

+ 56/154 + on GOV.UK
diff --git a/app/views/snippets/data_80px_16px.html b/app/views/snippets/data_80px_16px.html index 34f65a7d7..60da67cdf 100644 --- a/app/views/snippets/data_80px_16px.html +++ b/app/views/snippets/data_80px_16px.html @@ -1,4 +1,4 @@
-

80px

-

16px

+ 80px + 16px
diff --git a/app/views/snippets/data_80px_16px_example.html b/app/views/snippets/data_80px_16px_example.html index 5711a459d..613597b50 100644 --- a/app/views/snippets/data_80px_16px_example.html +++ b/app/views/snippets/data_80px_16px_example.html @@ -1,4 +1,4 @@
-

24

-

Ministerial departments

+ 24 + Ministerial departments