From 19730dad6e6db15c866d5091b16e39c90f1ae89c Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 24 Sep 2020 12:30:19 +0100 Subject: [PATCH] Rotate the map key icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We’ve had some feedback that the map key icons look a bit like checkboxes, and that this might have confused a user during the research. So we need a way of making them look different to checkboxes. We don’t want to change the border thickness because it matches what’s on the map. A different approach is changing the shape. Shapes that might still be confusing: - circles (look like radio buttons) - triangles (look like a warning) So this commit changes the shape to a diamond, which is easy to acheive by rotating the square 45 degrees. --- app/assets/stylesheets/components/area-list.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss index 1bb30c1df..e78829329 100644 --- a/app/assets/stylesheets/components/area-list.scss +++ b/app/assets/stylesheets/components/area-list.scss @@ -94,12 +94,13 @@ content: ""; display: block; position: absolute; - top: 0; - left: 0; - width: govuk-spacing(7); - height: govuk-spacing(7); + top: 4px; + left: govuk-spacing(1); + width: govuk-spacing(6); + height: govuk-spacing(6); box-sizing: border-box; margin-right: govuk-spacing(1); + transform: rotate(45deg); } &--certain {