diff --git a/scss/icons/icons.scss b/scss/icons/icons.scss index 43971b9..f2ee487 100644 --- a/scss/icons/icons.scss +++ b/scss/icons/icons.scss @@ -40,14 +40,14 @@ } &.heart::before { - @include pixelize($icon-heart, $icon-heart-colors, $px); + @include pixelize($icon-heart, $icon-heart-colors, $px, nth($icon-heart-colors, 3)); } &.heart.is-empty::before { @include pixelize($icon-heart-empty, $icon-heart-empty-colors, $px); } &.star::before { - @include pixelize($icon-star, $icon-star-colors, $px); + @include pixelize($icon-star, $icon-star-colors, $px, nth($icon-star-colors, 3)); } &.star.is-empty::before { @include pixelize($icon-star-empty, $icon-star-empty-colors, $px); @@ -78,15 +78,15 @@ } &.facebook::before { - @include pixelize($icon-facebook, $icon-facebook-colors, $px); + @include pixelize($icon-facebook, $icon-facebook-colors, $px, nth($icon-facebook-colors, 2)); } &.github::before { - @include pixelize($icon-github, $icon-github-colors, $px); + @include pixelize($icon-github, $icon-github-colors, $px, nth($icon-github-colors, 2)); } &.youtube::before { - @include pixelize($icon-youtube, $icon-youtube-colors, $px); + @include pixelize($icon-youtube, $icon-youtube-colors, $px, nth($icon-youtube-colors, 2)); } &.close::before { diff --git a/scss/pixel-arts/bcrikko.scss b/scss/pixel-arts/bcrikko.scss index 348bf24..be3dc5b 100644 --- a/scss/pixel-arts/bcrikko.scss +++ b/scss/pixel-arts/bcrikko.scss @@ -34,6 +34,6 @@ content: ""; background: transparent; - @include pixelize($bcrikko, $bcrikko-colors, $px); + @include pixelize($bcrikko, $bcrikko-colors, $px, nth($bcrikko-colors, 2)); } } diff --git a/scss/pixel-arts/nes-jp-icon.scss b/scss/pixel-arts/nes-jp-icon.scss index b98a993..0223271 100644 --- a/scss/pixel-arts/nes-jp-icon.scss +++ b/scss/pixel-arts/nes-jp-icon.scss @@ -28,6 +28,6 @@ content: ""; background: transparent; - @include pixelize($logo, $logo-colors, $px); + @include pixelize($logo, $logo-colors, $px, nth($logo-colors, 2)); } } diff --git a/scss/pixel-arts/snes-icon.scss b/scss/pixel-arts/snes-icon.scss index 7994e98..6d19652 100644 --- a/scss/pixel-arts/snes-icon.scss +++ b/scss/pixel-arts/snes-icon.scss @@ -28,6 +28,6 @@ content: ""; background: transparent; - @include pixelize($logo, $logo-colors, $px); + @include pixelize($logo, $logo-colors, $px, nth($logo-colors, 2)); } } diff --git a/scss/pixel-arts/snes-jp-icon.scss b/scss/pixel-arts/snes-jp-icon.scss index e2db10d..0e69ba0 100644 --- a/scss/pixel-arts/snes-jp-icon.scss +++ b/scss/pixel-arts/snes-jp-icon.scss @@ -28,6 +28,6 @@ content: ""; background: transparent; - @include pixelize($logo, $logo-colors, $px); + @include pixelize($logo, $logo-colors, $px, nth($logo-colors, 2)); } } diff --git a/scss/utilities/icon-mixin.scss b/scss/utilities/icon-mixin.scss index c84d3ed..bf87505 100644 --- a/scss/utilities/icon-mixin.scss +++ b/scss/utilities/icon-mixin.scss @@ -1,6 +1,9 @@ -@mixin pixelize($matrix, $colors, $size) { +@mixin pixelize($matrix, $colors, $size, $default-color: null) { $ret: ""; $moz: ""; + @if ($default-color == null) { + $default-color: nth($colors, 1); + } @for $i from 1 through length($matrix) { $row: nth($matrix, $i); @@ -15,14 +18,20 @@ } $color: nth($colors, $dot); - $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color; - $moz: $moz + ($j * $size)+" "+ ($i * $size)+" 0 0.020em " + $color; + @if $color == $default-color { + $ret: $ret + ($j * $size) + " " + ($i * $size); + $moz: $moz + ($j * $size) + " " + ($i * $size) + " 0 0.020em"; + } @else { + $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color; + $moz: $moz + ($j * $size) + " " + ($i * $size) + " 0 0.020em " + $color; + } } } } width: $size; height: $size; + color: $default-color; box-shadow: unquote($ret); @-moz-document url-prefix() { -webkit-box-shadow: unquote($moz);