diff --git a/scss/pixel-arts/ash.scss b/scss/pixel-arts/ash.scss index aad6e05..a63268a 100644 --- a/scss/pixel-arts/ash.scss +++ b/scss/pixel-arts/ash.scss @@ -33,5 +33,6 @@ background: transparent; @include pixelize($size, $ash, $ash-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/bcrikko.scss b/scss/pixel-arts/bcrikko.scss index 9680231..d904851 100644 --- a/scss/pixel-arts/bcrikko.scss +++ b/scss/pixel-arts/bcrikko.scss @@ -35,5 +35,6 @@ background: transparent; @include pixelize($size, $bcrikko, $bcrikko-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/bulbasaur.scss b/scss/pixel-arts/bulbasaur.scss index bbe7efe..857632f 100644 --- a/scss/pixel-arts/bulbasaur.scss +++ b/scss/pixel-arts/bulbasaur.scss @@ -35,5 +35,6 @@ background: transparent; @include pixelize($size, $bulbasaur, $bulbasaur-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/charmander.scss b/scss/pixel-arts/charmander.scss index a0c1b9c..4741f10 100644 --- a/scss/pixel-arts/charmander.scss +++ b/scss/pixel-arts/charmander.scss @@ -36,5 +36,6 @@ background: transparent; @include pixelize($size, $charmander, $charmander-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/kirby.scss b/scss/pixel-arts/kirby.scss index 03a8655..73c938c 100644 --- a/scss/pixel-arts/kirby.scss +++ b/scss/pixel-arts/kirby.scss @@ -34,5 +34,6 @@ background: transparent; @include pixelize($size, $kirby, $kirby-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/mario.scss b/scss/pixel-arts/mario.scss index 6b5c778..afc437f 100644 --- a/scss/pixel-arts/mario.scss +++ b/scss/pixel-arts/mario.scss @@ -34,5 +34,6 @@ background: transparent; @include pixelize($size, $mario, $mario-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/nes-icon.scss b/scss/pixel-arts/nes-icon.scss index 032ce9a..de48917 100644 --- a/scss/pixel-arts/nes-icon.scss +++ b/scss/pixel-arts/nes-icon.scss @@ -29,5 +29,6 @@ background: transparent; @include pixelize($size, $logo, $logo-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/nes-jp-icon.scss b/scss/pixel-arts/nes-jp-icon.scss index abfb4c0..de43ff7 100644 --- a/scss/pixel-arts/nes-jp-icon.scss +++ b/scss/pixel-arts/nes-jp-icon.scss @@ -29,5 +29,6 @@ background: transparent; @include pixelize($size, $logo, $logo-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/octocat.scss b/scss/pixel-arts/octocat.scss index 341a229..4b818b0 100644 --- a/scss/pixel-arts/octocat.scss +++ b/scss/pixel-arts/octocat.scss @@ -51,6 +51,7 @@ background: transparent; @include pixelize($size, $octocat-1, $octocat-colors); + @include fill-gaps(); } &.animate::before { diff --git a/scss/pixel-arts/phone.scss b/scss/pixel-arts/phone.scss index f0f06ce..36cc11c 100644 --- a/scss/pixel-arts/phone.scss +++ b/scss/pixel-arts/phone.scss @@ -39,5 +39,6 @@ background: transparent; @include pixelize($size, $phone, $phone-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/pokeball.scss b/scss/pixel-arts/pokeball.scss index ca2d140..f5daa24 100644 --- a/scss/pixel-arts/pokeball.scss +++ b/scss/pixel-arts/pokeball.scss @@ -32,5 +32,6 @@ background: transparent; @include pixelize($size, $pokeball, $pokeball-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/smartphone.scss b/scss/pixel-arts/smartphone.scss index 782555d..65836a9 100644 --- a/scss/pixel-arts/smartphone.scss +++ b/scss/pixel-arts/smartphone.scss @@ -45,5 +45,6 @@ background: transparent; @include pixelize($size, $smartphone, $smartphone-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/snes-icon.scss b/scss/pixel-arts/snes-icon.scss index 37f8d8e..3e4fbde 100644 --- a/scss/pixel-arts/snes-icon.scss +++ b/scss/pixel-arts/snes-icon.scss @@ -29,5 +29,6 @@ background: transparent; @include pixelize($size, $logo, $logo-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/snes-jp-icon.scss b/scss/pixel-arts/snes-jp-icon.scss index 42cadfa..b9a30fc 100644 --- a/scss/pixel-arts/snes-jp-icon.scss +++ b/scss/pixel-arts/snes-jp-icon.scss @@ -30,5 +30,6 @@ background: transparent; @include pixelize($size, $logo, $logo-colors); + @include fill-gaps(); } } diff --git a/scss/pixel-arts/squirtle.scss b/scss/pixel-arts/squirtle.scss index a57db00..2eeed33 100644 --- a/scss/pixel-arts/squirtle.scss +++ b/scss/pixel-arts/squirtle.scss @@ -35,5 +35,6 @@ background: transparent; @include pixelize($size, $squirtle, $squirtle-colors); + @include fill-gaps(); } } diff --git a/scss/utilities/_index.scss b/scss/utilities/_index.scss index 6531acf..5af0dd7 100644 --- a/scss/utilities/_index.scss +++ b/scss/utilities/_index.scss @@ -1,6 +1,7 @@ @charset "utf-8"; @import "animations.scss"; +@import "fill-gaps.scss"; @import "icon-mixin.scss"; @import "rounded-corners-mixin.scss"; @import "visually-hidden.scss"; diff --git a/scss/utilities/fill-gaps.scss b/scss/utilities/fill-gaps.scss new file mode 100644 index 0000000..93a82ab --- /dev/null +++ b/scss/utilities/fill-gaps.scss @@ -0,0 +1,5 @@ +// Fill gaps in pixel art dots +// `transform` property conflict when used for nes-icon +@mixin fill-gaps() { + transform: rotate(0); +} diff --git a/scss/utilities/icon-mixin.scss b/scss/utilities/icon-mixin.scss index 17fe32a..d884bc5 100644 --- a/scss/utilities/icon-mixin.scss +++ b/scss/utilities/icon-mixin.scss @@ -51,7 +51,6 @@ height: $size; color: $default-color; box-shadow: unquote($ret); - transform: rotate(0.0001deg); // firefox only style @supports (-moz-appearance: meterbar) {