From a0aed6a61a0f06e7e8cf630b33183b05c3195e0d Mon Sep 17 00:00:00 2001 From: Mati Date: Sat, 9 Feb 2019 13:56:07 +0100 Subject: [PATCH 1/7] feat: coin-icon --- docs/icons.stories.js | 1 + scss/pixel-arts/_index.scss | 1 + scss/pixel-arts/coin.scss | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 38 insertions(+) create mode 100644 scss/pixel-arts/coin.scss diff --git a/docs/icons.stories.js b/docs/icons.stories.js index 699682a..ff41eb5 100644 --- a/docs/icons.stories.js +++ b/docs/icons.stories.js @@ -32,6 +32,7 @@ stories.add('icon', () => { 'nes-jp-logo': 'nes-jp-logo', 'snes-logo': 'snes-logo', 'snes-jp-logo': 'snes-jp-logo', + 'nes-coin': 'nes-coin', }, 'nes-icon twitter'); const selectedSize = radios('size', { default: '', diff --git a/scss/pixel-arts/_index.scss b/scss/pixel-arts/_index.scss index 8303885..5f3af20 100644 --- a/scss/pixel-arts/_index.scss +++ b/scss/pixel-arts/_index.scss @@ -15,3 +15,4 @@ @import "mario.scss"; @import "kirby.scss"; @import "octocat.scss"; +@import "coin.scss"; diff --git a/scss/pixel-arts/coin.scss b/scss/pixel-arts/coin.scss new file mode 100644 index 0000000..1ddad3d --- /dev/null +++ b/scss/pixel-arts/coin.scss @@ -0,0 +1,36 @@ +.nes-coin { + $coin-colors: (#060606,#ffd700, #daa520); + // prettier-ignore + $coin: ( + (0,0,0,0,0,1,1,1,1,0,0,0,0,0), + (0,0,0,1,1,2,2,2,2,1,1,0,0,0), + (0,0,1,2,2,1,1,1,1,2,2,1,0,0), + (0,1,2,1,1,3,3,3,3,1,2,1,1,0), + (0,1,2,1,3,3,3,3,3,3,1,2,1,0), + (1,2,1,3,3,3,3,3,3,3,3,1,2,1), + (1,2,1,3,3,3,3,3,3,3,3,1,2,1), + (1,2,1,3,3,3,3,3,3,3,3,1,2,1), + (1,2,1,3,3,3,3,3,3,3,3,1,2,1), + (0,1,2,1,3,3,3,3,3,3,1,2,1,0), + (0,1,2,1,1,3,3,3,3,1,2,2,1,0), + (0,0,1,2,2,1,1,1,1,2,2,1,0,0), + (0,0,0,1,1,2,2,2,2,1,1,0,0,0), + (0,0,0,0,0,1,1,1,1,0,0,0,0,0), + ); + $size: 6px; + + position: relative; + display: inline-block; + width: $size * length(nth($coin, 1)); + height: $size * length($coin); + + &::before { + position: absolute; + top: -$size; + left: -$size; + content: ""; + background: transparent; + + @include pixelize($size, $coin, $coin-colors); + } +} From 029bf0a58f81121eba952a3d331ada35565a4978 Mon Sep 17 00:00:00 2001 From: Mati Date: Sat, 9 Feb 2019 14:10:07 +0100 Subject: [PATCH 2/7] feat: coin-icon earned (with animation) --- docs/icons.stories.js | 1 + scss/pixel-arts/coin.scss | 5 +++++ scss/utilities/animations.scss | 20 ++++++++++++++++++++ 3 files changed, 26 insertions(+) diff --git a/docs/icons.stories.js b/docs/icons.stories.js index ff41eb5..6dd4269 100644 --- a/docs/icons.stories.js +++ b/docs/icons.stories.js @@ -33,6 +33,7 @@ stories.add('icon', () => { 'snes-logo': 'snes-logo', 'snes-jp-logo': 'snes-jp-logo', 'nes-coin': 'nes-coin', + 'nes-coin earned': 'nes-coin earned', }, 'nes-icon twitter'); const selectedSize = radios('size', { default: '', diff --git a/scss/pixel-arts/coin.scss b/scss/pixel-arts/coin.scss index 1ddad3d..632b455 100644 --- a/scss/pixel-arts/coin.scss +++ b/scss/pixel-arts/coin.scss @@ -33,4 +33,9 @@ @include pixelize($size, $coin, $coin-colors); } + + &.earned { + animation: rotateIn 1.4s ease-out forwards, + fadeOut 2s ease-out forwards; + } } diff --git a/scss/utilities/animations.scss b/scss/utilities/animations.scss index f0f088b..f732dd2 100644 --- a/scss/utilities/animations.scss +++ b/scss/utilities/animations.scss @@ -7,3 +7,23 @@ opacity: 0; } } + +@keyframes rotateIn { + 0% { + opacity: 0; + transform: rotateY(0) translateY(100%); + } + 100% { + opacity: 1; + transform: rotateY(1800deg) translateY(0); + } +} + +@keyframes fadeOut { + 70% { + opacity: 1; + } + 100% { + opacity: 0; + } +} From 74bb4e685edbe59fc13591571b157f3cd7421b0e Mon Sep 17 00:00:00 2001 From: Mati Date: Sat, 9 Feb 2019 20:53:56 +0100 Subject: [PATCH 3/7] Revert "feat: coin-icon earned (with animation)" This reverts commit 029bf0a58f81121eba952a3d331ada35565a4978. --- docs/icons.stories.js | 1 - scss/pixel-arts/coin.scss | 5 ----- scss/utilities/animations.scss | 20 -------------------- 3 files changed, 26 deletions(-) diff --git a/docs/icons.stories.js b/docs/icons.stories.js index 6dd4269..ff41eb5 100644 --- a/docs/icons.stories.js +++ b/docs/icons.stories.js @@ -33,7 +33,6 @@ stories.add('icon', () => { 'snes-logo': 'snes-logo', 'snes-jp-logo': 'snes-jp-logo', 'nes-coin': 'nes-coin', - 'nes-coin earned': 'nes-coin earned', }, 'nes-icon twitter'); const selectedSize = radios('size', { default: '', diff --git a/scss/pixel-arts/coin.scss b/scss/pixel-arts/coin.scss index 632b455..1ddad3d 100644 --- a/scss/pixel-arts/coin.scss +++ b/scss/pixel-arts/coin.scss @@ -33,9 +33,4 @@ @include pixelize($size, $coin, $coin-colors); } - - &.earned { - animation: rotateIn 1.4s ease-out forwards, - fadeOut 2s ease-out forwards; - } } diff --git a/scss/utilities/animations.scss b/scss/utilities/animations.scss index f732dd2..f0f088b 100644 --- a/scss/utilities/animations.scss +++ b/scss/utilities/animations.scss @@ -7,23 +7,3 @@ opacity: 0; } } - -@keyframes rotateIn { - 0% { - opacity: 0; - transform: rotateY(0) translateY(100%); - } - 100% { - opacity: 1; - transform: rotateY(1800deg) translateY(0); - } -} - -@keyframes fadeOut { - 70% { - opacity: 1; - } - 100% { - opacity: 0; - } -} From eaf396eb94883978b839424af64b25b93d8d6409 Mon Sep 17 00:00:00 2001 From: Mati Date: Sat, 9 Feb 2019 21:10:27 +0100 Subject: [PATCH 4/7] fix: move icon-coin to the icons folder --- docs/icons.stories.js | 2 +- scss/icons/coin.scss | 18 ++++++++++++++++++ scss/icons/icons.scss | 5 +++++ scss/pixel-arts/_index.scss | 1 - scss/pixel-arts/coin.scss | 36 ------------------------------------ 5 files changed, 24 insertions(+), 38 deletions(-) create mode 100644 scss/icons/coin.scss delete mode 100644 scss/pixel-arts/coin.scss diff --git a/docs/icons.stories.js b/docs/icons.stories.js index ff41eb5..a08438f 100644 --- a/docs/icons.stories.js +++ b/docs/icons.stories.js @@ -17,6 +17,7 @@ stories.add('icon', () => { 'nes-icon gmail': 'nes-icon gmail', 'nes-icon linkedin': 'nes-icon linkedin', 'nes-icon close': 'nes-icon close', + 'nes-icon coin': 'nes-icon coin', 'nes-pokeball': 'nes-pokeball', 'nes-bulbasaur': 'nes-bulbasaur', 'nes-charmander': 'nes-charmander', @@ -32,7 +33,6 @@ stories.add('icon', () => { 'nes-jp-logo': 'nes-jp-logo', 'snes-logo': 'snes-logo', 'snes-jp-logo': 'snes-jp-logo', - 'nes-coin': 'nes-coin', }, 'nes-icon twitter'); const selectedSize = radios('size', { default: '', diff --git a/scss/icons/coin.scss b/scss/icons/coin.scss new file mode 100644 index 0000000..574ac74 --- /dev/null +++ b/scss/icons/coin.scss @@ -0,0 +1,18 @@ +$icon-coin-colors: (#060606,#ffd700, #daa520); +// prettier-ignore +$icon-coin: ( + (0,0,0,0,0,1,1,1,1,0,0,0,0,0), + (0,0,0,1,1,2,2,2,2,1,1,0,0,0), + (0,0,1,2,2,1,1,1,1,2,2,1,0,0), + (0,1,2,1,1,3,3,3,3,1,2,1,1,0), + (0,1,2,1,3,3,3,3,3,3,1,2,1,0), + (1,2,1,3,3,3,3,3,3,3,3,1,2,1), + (1,2,1,3,3,3,3,3,3,3,3,1,2,1), + (1,2,1,3,3,3,3,3,3,3,3,1,2,1), + (1,2,1,3,3,3,3,3,3,3,3,1,2,1), + (0,1,2,1,3,3,3,3,3,3,1,2,1,0), + (0,1,2,1,1,3,3,3,3,1,2,2,1,0), + (0,0,1,2,2,1,1,1,1,2,2,1,0,0), + (0,0,0,1,1,2,2,2,2,1,1,0,0,0), + (0,0,0,0,0,1,1,1,1,0,0,0,0,0), +); diff --git a/scss/icons/icons.scss b/scss/icons/icons.scss index 27bbbb5..e88e098 100644 --- a/scss/icons/icons.scss +++ b/scss/icons/icons.scss @@ -19,6 +19,7 @@ // others @import "close.scss"; @import "trophy.scss"; +@import "coin.scss"; .nes-icon { $default-size: 1px; @@ -146,4 +147,8 @@ &.linkedin::before { @include pixelize($default-size, $icon-linkedin, $icon-linkedin-colors); } + + &.coin::before { + @include pixelize($default-size, $icon-coin, $icon-coin-colors); + } } diff --git a/scss/pixel-arts/_index.scss b/scss/pixel-arts/_index.scss index 5f3af20..8303885 100644 --- a/scss/pixel-arts/_index.scss +++ b/scss/pixel-arts/_index.scss @@ -15,4 +15,3 @@ @import "mario.scss"; @import "kirby.scss"; @import "octocat.scss"; -@import "coin.scss"; diff --git a/scss/pixel-arts/coin.scss b/scss/pixel-arts/coin.scss deleted file mode 100644 index 1ddad3d..0000000 --- a/scss/pixel-arts/coin.scss +++ /dev/null @@ -1,36 +0,0 @@ -.nes-coin { - $coin-colors: (#060606,#ffd700, #daa520); - // prettier-ignore - $coin: ( - (0,0,0,0,0,1,1,1,1,0,0,0,0,0), - (0,0,0,1,1,2,2,2,2,1,1,0,0,0), - (0,0,1,2,2,1,1,1,1,2,2,1,0,0), - (0,1,2,1,1,3,3,3,3,1,2,1,1,0), - (0,1,2,1,3,3,3,3,3,3,1,2,1,0), - (1,2,1,3,3,3,3,3,3,3,3,1,2,1), - (1,2,1,3,3,3,3,3,3,3,3,1,2,1), - (1,2,1,3,3,3,3,3,3,3,3,1,2,1), - (1,2,1,3,3,3,3,3,3,3,3,1,2,1), - (0,1,2,1,3,3,3,3,3,3,1,2,1,0), - (0,1,2,1,1,3,3,3,3,1,2,2,1,0), - (0,0,1,2,2,1,1,1,1,2,2,1,0,0), - (0,0,0,1,1,2,2,2,2,1,1,0,0,0), - (0,0,0,0,0,1,1,1,1,0,0,0,0,0), - ); - $size: 6px; - - position: relative; - display: inline-block; - width: $size * length(nth($coin, 1)); - height: $size * length($coin); - - &::before { - position: absolute; - top: -$size; - left: -$size; - content: ""; - background: transparent; - - @include pixelize($size, $coin, $coin-colors); - } -} From e0381440a52754638f4bdb25ecf700362d944ce1 Mon Sep 17 00:00:00 2001 From: Mati Date: Sat, 9 Feb 2019 22:13:51 +0100 Subject: [PATCH 5/7] fix: went full-on classic 8-bit mario coin here --- scss/icons/coin.scss | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/scss/icons/coin.scss b/scss/icons/coin.scss index 574ac74..69ee23a 100644 --- a/scss/icons/coin.scss +++ b/scss/icons/coin.scss @@ -1,18 +1,20 @@ -$icon-coin-colors: (#060606,#ffd700, #daa520); +$icon-coin-colors: (#060606, #ffffff, #ffc107); // prettier-ignore $icon-coin: ( - (0,0,0,0,0,1,1,1,1,0,0,0,0,0), - (0,0,0,1,1,2,2,2,2,1,1,0,0,0), - (0,0,1,2,2,1,1,1,1,2,2,1,0,0), - (0,1,2,1,1,3,3,3,3,1,2,1,1,0), - (0,1,2,1,3,3,3,3,3,3,1,2,1,0), - (1,2,1,3,3,3,3,3,3,3,3,1,2,1), - (1,2,1,3,3,3,3,3,3,3,3,1,2,1), - (1,2,1,3,3,3,3,3,3,3,3,1,2,1), - (1,2,1,3,3,3,3,3,3,3,3,1,2,1), - (0,1,2,1,3,3,3,3,3,3,1,2,1,0), - (0,1,2,1,1,3,3,3,3,1,2,2,1,0), - (0,0,1,2,2,1,1,1,1,2,2,1,0,0), - (0,0,0,1,1,2,2,2,2,1,1,0,0,0), - (0,0,0,0,0,1,1,1,1,0,0,0,0,0), + (0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0), + (0,0,0,1,1,1,2,2,2,1,1,1,1,0,0,0), + (0,0,1,1,2,2,3,3,3,3,3,1,1,0,0,0), + (0,0,1,2,3,3,2,2,2,1,3,3,1,1,0,0), + (0,1,1,2,3,3,2,3,3,1,3,3,1,1,0,0), + (0,1,2,3,3,3,2,3,3,1,3,3,3,1,1,0), + (0,1,2,3,3,3,2,3,3,1,3,3,3,1,1,0), + (0,1,2,3,3,3,2,3,3,1,3,3,3,1,1,0), + (0,1,2,3,3,3,2,3,3,1,3,3,3,1,1,0), + (0,1,2,3,3,3,2,3,3,1,3,3,3,1,1,0), + (0,1,2,3,3,3,2,3,3,1,3,3,3,1,1,0), + (0,1,1,2,3,3,2,3,3,1,3,3,1,1,0,0), + (0,0,1,2,3,3,2,1,1,1,3,3,1,1,0,0), + (0,0,1,1,2,3,3,3,3,3,3,1,1,0,0,0), + (0,0,0,1,1,1,3,3,3,1,1,1,1,0,0,0), + (0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0), ); From 6c787bafdbd32aa0081ab2b67fd1df4ff4b77de9 Mon Sep 17 00:00:00 2001 From: Mati Date: Sun, 10 Feb 2019 11:43:43 +0100 Subject: [PATCH 6/7] fix: stylelint color naming fix --- scss/icons/coin.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/icons/coin.scss b/scss/icons/coin.scss index 69ee23a..93b1d81 100644 --- a/scss/icons/coin.scss +++ b/scss/icons/coin.scss @@ -1,4 +1,4 @@ -$icon-coin-colors: (#060606, #ffffff, #ffc107); +$icon-coin-colors: (#060606, #fff, #ffc107); // prettier-ignore $icon-coin: ( (0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0), From 70f4cc1602bfcd85a529343d47e4bd0077235535 Mon Sep 17 00:00:00 2001 From: Mati Date: Sun, 10 Feb 2019 11:52:12 +0100 Subject: [PATCH 7/7] feat: add `nes-coin` to `index.html` --- index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.html b/index.html index 4705170..e67c47e 100644 --- a/index.html +++ b/index.html @@ -798,6 +798,11 @@ + + + + +