From 83a9d3ad42a784fba1fd9f48e2d4479e19625374 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Wed, 28 Dec 2016 11:15:14 +0000 Subject: [PATCH] Make the letter unfold slightly on hover MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This might be taking the skeumorphism too far (especially with the animation). But it’s a way of indicating that the letter will ‘unfold’ if you click it. Might revert this, but let’s see how it feels. --- app/assets/stylesheets/components/letter.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss index c74574315..33439893a 100644 --- a/app/assets/stylesheets/components/letter.scss +++ b/app/assets/stylesheets/components/letter.scss @@ -1,3 +1,5 @@ +// Easing function from: http://easings.net/#easeOutBack +$transition-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275); $iso-paper-ratio: 70.7%; .letter { @@ -21,6 +23,15 @@ $iso-paper-ratio: 70.7%; transform: skew(-1deg, 0deg) scale(1, 0.99); transform-origin: left bottom; box-shadow: inset 0 0 0 2px $panel-colour; + transition: transform 0.2s $transition-easing; + } + + &:hover { + + &:after { + transform: skew(-1.5deg, 0deg) scale(1, 0.97); + transition: transform 0.1s $transition-easing; + } }