From 7d896c6de354fa4d68d6d19cdad0592160ed8962 Mon Sep 17 00:00:00 2001 From: Edvins Antonovs Date: Tue, 9 Jan 2018 21:35:01 +0000 Subject: [PATCH 1/4] Fixed typo in the url --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ef6c00c..4e28fe6 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,6 @@ If you are new to Git or SCSS, this would be a great project to get your feet we ## Credits and license -Code and documentation under [ISC license](https://github.com/papercss/papercss/blob/master/licenseāˆ). +Code and documentation under [ISC license](https://github.com/papercss/papercss/blob/master/license). Shout out to Tiffany Rayside for creating Imperfect Buttons, which was an inspiration for this project. https://codepen.io/tmrDevelops/pen/VeRvKX From 821c4962cf47d87bb62f94b3d07e897cf606baf6 Mon Sep 17 00:00:00 2001 From: koester Date: Thu, 11 Jan 2018 10:38:05 +0100 Subject: [PATCH 2/4] fixes #111 --- src/components/_cards.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/_cards.scss b/src/components/_cards.scss index 809b522..0ee1e11 100644 --- a/src/components/_cards.scss +++ b/src/components/_cards.scss @@ -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); From 4240b6df299982d4e18b4210600fe93ec97265d8 Mon Sep 17 00:00:00 2001 From: koester Date: Thu, 11 Jan 2018 12:15:05 +0100 Subject: [PATCH 3/4] IE animation bug fix --- src/core/_config.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/core/_config.scss b/src/core/_config.scss index 05139da..b443130 100644 --- a/src/core/_config.scss +++ b/src/core/_config.scss @@ -170,10 +170,16 @@ $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); +@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 +202,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; From c334c816115776d61b3dcd74ca8d5f9a5b668861 Mon Sep 17 00:00:00 2001 From: koester Date: Thu, 11 Jan 2018 12:24:35 +0100 Subject: [PATCH 4/4] Added documentation to translate mixin --- src/core/_config.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/core/_config.scss b/src/core/_config.scss index b443130..4e1c193 100644 --- a/src/core/_config.scss +++ b/src/core/_config.scss @@ -170,6 +170,13 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default; } } +/* + 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);