Skip to content

Commit

Permalink
Fix breach card wiggling on hover.
Browse files Browse the repository at this point in the history
Use `box-shadow` to simulate a slight scaling effect instead of `transform: scale()`, which was causing a noticeable wiggle in some browsers.
  • Loading branch information
lesleyjanenorton committed Nov 11, 2019
1 parent d1ac516 commit 70cbbc3
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 24 deletions.
8 changes: 3 additions & 5 deletions public/css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -529,15 +529,13 @@ ul li {
}

.drop-shadow {
transform: scale(1);
box-shadow: 0 0 1px 1px #607d8b08, 1px 1px 10px #4341571a;
transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}

.drop-shadow:hover {
transform: scale(1.01);
box-shadow: 1px 1px 10px #4341573a;
transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
box-shadow: 0 0 1px 1px #607d8b12, 1px 1px 12px #4341574d;
transition: all 0.15s ease-in-out;
}

.source-info {
Expand Down
19 changes: 0 additions & 19 deletions public/css/breach-cards.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,13 @@
.breach-card {
--logoDmns: 24px;
--logoMargin: 20px;
--breachInfoPadding: calc(var(--logoMargin) * 2 + var(--logoDmns));

padding: 1.5rem 3.25rem 1.5rem 1.5rem;
border-radius: 8px;
display: flex;
flex-direction: row;
overflow: hidden;
margin: 0.5rem;
transform: scale(1);
color: var(--ink);
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.15s ease-in-out;
}

a.breach-card:hover {
opacity: 1;
}

.breach-key {
Expand All @@ -37,15 +27,6 @@ a.breach-card:hover {
line-height: 1.5;
}

/* .more-about-this-breach {
font-size: 14px;
} */

.breach-card:hover {
transform: scale(1.01);
transition: all 0.15s ease-in-out;
}

.breach-title {
padding-top: 2px;
font-size: 18px;
Expand Down

2 comments on commit 70cbbc3

@groovecoder
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this need a PR? Or can we remove this branch?

@lesleyjanenorton
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WHOA! Sorry.. thought this was PRed and merged several years ago.

Please sign in to comment.