darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-04-05 01:51:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

Don’t skew bottom half of letter in folded state

Browse Source 
Skewing the letter results in a bunch of slightly-off-vertical diagonal
lines. This is a bit visually jarring when everything else on the page
lines up vertically or horizontally.

This commit makes the bottom half of the letter straight, by offsetting
it instead of transforming it. The ‘fold’ now has depth, so it has to
be drawn in somehow, that’s what the `:before` is doing.
This commit is contained in:
Chris Hill-Scott
2017-01-03 10:29:11 +00:00
parent 83a9d3ad42
commit 6271b427aa
1 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/stylesheets/components/letter.scss
View File

@@ -1,10 +1,9 @@
// Easing function from: http://easings.net/#easeOutBack
$transition-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
$iso-paper-ratio: 70.7%;
$iso-paper-ratio: 70.710678118%;
.letter {
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0 0 $gutter 0;
position: relative;
@@ -15,22 +14,40 @@ $iso-paper-ratio: 70.7%;
z-index: 10;
position: absolute;
top: 2px;
left: 0;
left: 5px;
height: 0;
padding: $iso-paper-ratio 0 0 0;
width: 100%;
background: $highlight-colour;
transform: skew(-1deg, 0deg) scale(1, 0.99);
transform-origin: left bottom;
transform: scale(1, 0.99);
box-shadow: inset 0 0 0 2px $panel-colour;
transition: transform 0.2s $transition-easing;
transition: all 0.2s $transition-easing;
}
&:before {
content: "";
z-index: 15;
position: absolute;
bottom: -3px;
right: -5px;
width: 5px;
height: 6px;
background: $white;
transform: rotate(45deg);
box-shadow: inset 2px 0 0 0 $panel-colour;
}
&:hover {
&:after {
transform: skew(-1.5deg, 0deg) scale(1, 0.97);
transition: transform 0.1s $transition-easing;
transform: skew(-1.3deg, 0deg) scale(1, 0.96);
transition: all 0.1s $transition-easing;
background: mix($white, $highlight-colour);
}
&:before {
transform: rotate(50deg);
}
}
@@ -44,7 +61,7 @@ $iso-paper-ratio: 70.7%;
padding: $iso-paper-ratio 0 0 0;
position: relative;
z-index: 20;
transition: all 0.1s ease-out;
box-shadow: 0 2px 0 0 $panel-colour;
&:focus {