From 45c4b24d9a223491b9b470f8ceecf8b77470e68c Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 30 Aug 2016 15:34:12 +0100
Subject: [PATCH] Make placeholder highlighting align at all size

Because the placeholder highlighting was defined in pixels it got
slightly out of line when it was used at larger type sizes, eg inside a
heading.

By using `em`s it will scale with the size of the type.
---
 app/assets/stylesheets/components/placeholder.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/components/placeholder.scss b/app/assets/stylesheets/components/placeholder.scss
index 2d76d8ff0..8bbf2e2fd 100644
--- a/app/assets/stylesheets/components/placeholder.scss
+++ b/app/assets/stylesheets/components/placeholder.scss
@@ -7,10 +7,10 @@
   overflow-wrap: break-word;
   word-wrap: break-word;
   border-radius: 20px;
-  box-shadow: inset 9px 0 0 0 $white, inset -9px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;
+  box-shadow: inset 0.47em 0 0 0 $white, inset -0.47em 0 0 0 $white, inset 0 -0.15em 0 0 $white, inset 0 0.15em 0 0 $white;
 
   .sms-message-wrapper & {
-    box-shadow: inset 9px 0 0 0 $panel-colour, inset -9px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
+    box-shadow: inset 0.47em 0 0 0 $panel-colour, inset -0.47em 0 0 0 $panel-colour, inset 0 -0.18em 0 0 $panel-colour, inset 0 0.18em 0 0 $panel-colour;
   }
 
 }
@@ -20,7 +20,7 @@
   padding-left: 3px;
   padding-right: 3px;
   border-radius: 1px;
-  box-shadow: inset 0 -2px 0 0 $white, inset 0 2px 0 0 $white;
+  box-shadow: inset 0 -0.1em 0 0 $white, inset 0 0.1em 0 0 $white;
 }
 
 .placeholder-conditional {
@@ -31,10 +31,10 @@
   border-bottom-left-radius: 20px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
-  box-shadow: inset 9px 0 0 0 $white, inset -17px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;
+  box-shadow: inset 0.47em 0 0 0 $white, inset -0.89em 0 0 0 $white, inset 0 -0.16em 0 0 $white, inset 0 0.16em 0 0 $white;
 
   .sms-message-wrapper & {
-    box-shadow: inset 9px 0 0 0 $panel-colour, inset -17px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
+    box-shadow: inset 0.47em 0 0 0 $panel-colour, inset -0.89em 0 0 0 $panel-colour, inset 0 -0.18em 0 0 $panel-colour, inset 0 0.18em 0 0 $panel-colour;
   }
 
 }