From 846f9913fa84e442fd3254ad3186e80498f9acc4 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 13 Mar 2017 09:38:29 +0000
Subject: [PATCH] Remove the cheesy skeumorphism from letter preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This isn’t needed any more because:

- we’re moving toward not clicking the letter to preview it, so there’s
  no need for a (not very intuitive) indication that it’s clickable

- we’re not showing letter templates on the same page as email and text
  message templates, so there’s less need to visually differentiate them
  (which also worked to limited effect)
---
 app/assets/stylesheets/components/letter.scss | 47 +------------------
 1 file changed, 2 insertions(+), 45 deletions(-)

diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss
index 4b065dbbd..979831cf8 100644
--- a/app/assets/stylesheets/components/letter.scss
+++ b/app/assets/stylesheets/components/letter.scss
@@ -1,5 +1,4 @@
-// Easing function from: http://easings.net/#easeOutBack
-$transition-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
 $iso-paper-ratio: 141.42135624%;
 
 .letter {
@@ -7,39 +6,9 @@ $iso-paper-ratio: 141.42135624%;
   padding: 0;
   margin: 0 0 $gutter 0;
   position: relative;
-
-  &:after {
-    content: "";
-    display: block;
-    z-index: 10;
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    height: 0;
-    padding: $iso-paper-ratio 0 0 0;
-    width: 100%;
-    background: $highlight-colour;
-    transform-origin: left bottom;
-    box-shadow: inset 0 0 0 1px $border-colour;
-    transition: all 0.2s $transition-easing;
-  }
-
-  &:hover {
-
-    &:after {
-      transform: skew(-1.3deg, 0deg) scale(1, 0.96);
-      transition: all 0.1s $transition-easing;
-      background: mix($highlight-colour, $white);
-    }
-
-    &:before {
-      transform: rotate(50deg);
-    }
-
-  }
+  background: $panel-colour;
 
   a {
-
     display: block;
     overflow: hidden;
     width: 100%;
@@ -47,18 +16,6 @@ $iso-paper-ratio: 141.42135624%;
     padding: $iso-paper-ratio 0 0 0;
     position: relative;
     z-index: 20;
-
-    &:focus {
-
-      outline: none;
-      box-shadow: 0 3px 0 0 $yellow;
-
-      img {
-        box-shadow: inset 0 0 0 3px $yellow;
-      }
-
-    }
-
   }
 
   img {