deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2026-03-14 14:35:51 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #135 from koester/hotfix-animationbug

Browse source 
hotfix-animationbug
This commit is contained in:
Thomas Cazade 2018-01-11 18:41:48 +01:00 • committed by GitHub
commit bc5c4a36cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/_cards.scss
View file

@ -5,6 +5,8 @@
flex-direction: column;
word-wrap: break-word;
border: 2px solid $muted-light;
backface-visibility: hidden;
will-change: transform;
&:hover {
@include shadow(hover);

23
src/core/_config.scss
View file

@ -170,10 +170,23 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
}
}
@mixin translate($x, $y) {
-webkit-transform: translate($x, $y);
-ms-transform: translate($x, $y);
transform: translate($x, $y);
/*
Add transform: translate() with browser prefixes.
Same syntax for translate() and translate3d()
To get 3D add a $z value and set 'true'
@param string | boolean
@default 0 | false
*/
@mixin translate($x, $y, $z: 0, $transform3d: false) {
@if $transform3d {
-webkit-transform: translate3d($x, $y, $z);
-ms-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z);
} @else {
-webkit-transform: translate($x, $y);
-ms-transform: translate($x, $y);
transform: translate($x, $y);
}
}
/*
@ -196,7 +209,7 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
@mixin shadow($type: regular) {
@if $type == hover {
box-shadow: $shadow-hover;
@include translate(0, 2px);
@include translate(0, 2px, 0, true);
} @else if $type == small {
@include transition($animation: ease);
box-shadow: $shadow-small;