diff --git a/docs/icons.stories.js b/docs/icons.stories.js index a71b405..8410653 100644 --- a/docs/icons.stories.js +++ b/docs/icons.stories.js @@ -14,6 +14,7 @@ stories.add('icon', () => { 'icon google': 'icon google', 'icon youtube': 'icon youtube', 'icon close': 'icon close', + pokeball: 'pokeball', 'octocat animate': 'octocat animate', 'icon trophy': 'icon trophy', 'nes-logo': 'nes-logo', diff --git a/index.html b/index.html index 3d3f0ce..35d4ac9 100644 --- a/index.html +++ b/index.html @@ -242,6 +242,8 @@ + + diff --git a/scss/pixel-arts/_index.scss b/scss/pixel-arts/_index.scss index 30c3f30..86a1138 100644 --- a/scss/pixel-arts/_index.scss +++ b/scss/pixel-arts/_index.scss @@ -6,3 +6,4 @@ @import "snes-jp-icon.scss"; @import "bcrikko.scss"; @import "octocat.scss"; +@import "pokeball.scss"; diff --git a/scss/pixel-arts/pokeball.scss b/scss/pixel-arts/pokeball.scss new file mode 100644 index 0000000..8fbf228 --- /dev/null +++ b/scss/pixel-arts/pokeball.scss @@ -0,0 +1,38 @@ +.pokeball { + $px: 6px; + $pokeball-colors: (#060606, #ff001d, #fff, #9fa1a1); + // prettier-ignore + $pokeball: ( + (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,3,3,2,2,2,2,2,2,1,0,0), + (0,1,3,3,2,2,2,2,2,2,2,1,1,0), + (0,1,3,2,2,2,2,2,2,2,2,2,1,0), + (1,3,2,2,2,2,2,2,2,2,2,2,2,1), + (1,1,1,2,2,2,2,1,1,1,2,2,2,1), + (1,1,1,1,2,2,1,3,3,3,1,2,2,1), + (1,4,3,1,1,1,1,3,3,3,1,1,1,1), + (0,1,3,3,3,1,1,3,3,3,1,3,1,0), + (0,1,3,3,3,3,3,1,1,1,3,3,1,0), + (0,0,1,4,4,3,3,3,3,3,3,1,0,0), + (0,0,0,1,1,4,4,4,4,1,1,0,0,0), + (0,0,0,0,0,1,1,1,1,0,0,0,0,0), + (0,0,0,0,0,0,0,0,0,0,0,0,0,0), + (0,0,0,0,0,0,0,0,0,0,0,0,0,0), + ); + + position: relative; + display: inline-block; + width: $px * 14; + height: $px * 14; + + &::before { + position: absolute; + top: $px * -1; + left: $px * -1; + content: ""; + background: transparent; + + @include pixelize($pokeball, $pokeball-colors, $px); + } +}