From 37b710b57ffea9ef9c60528ae844e5c129abdf29 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Sat, 24 Jun 2017 17:32:47 +0100 Subject: [PATCH] Style redacted placeholders MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The visual convention for redaction is heavy black crossing-out. Our text colour isn’t always black exactly though (usually it’s very dark grey, sometimes just dark grey). `currentColor` is a magical CSS value that let’s us set the background colour to whatever the text colour is. So both the text and redaction look like they are part of the same thing. Couple of subtle visual things here: - opacity to make the colour better match the text colour – a filled box naturally looks darker than thin text, so this knocks it back a bit - an inset shadow to take a few pixels of the bottom edge – the visual weight of text is biased upwards because text has ore capital letters and ascenders than descenders – this make it look aligned visually --- app/assets/stylesheets/components/placeholder.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/app/assets/stylesheets/components/placeholder.scss b/app/assets/stylesheets/components/placeholder.scss index 8bbf2e2fd..762d40e84 100644 --- a/app/assets/stylesheets/components/placeholder.scss +++ b/app/assets/stylesheets/components/placeholder.scss @@ -38,3 +38,16 @@ } } + +.placeholder-redacted { + + background: currentColor; + padding: 0 0.5em; + opacity: 0.8; + box-shadow: inset 0 -0.25em 0 0 $white; + + .sms-message-wrapper & { + box-shadow: inset 0 -0.25em 0 0 $panel-colour; + } + +}