mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-04-21 22:52:42 +02:00
Code Issues Releases Wiki Activity

refactor(icons): automatically pick main color

Browse Source 
ref #60
This commit is contained in:
Joshua Rouzer 2018-12-09 22:01:01 -05:00
parent 55a6e3ac00
commit d5173b9ad2
6 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
scss/icons/icons.scss
View File

@ -40,14 +40,14 @@
}
&.heart::before {
@include pixelize($icon-heart, $icon-heart-colors, $px, nth($icon-heart-colors, 3));
@include pixelize($icon-heart, $icon-heart-colors, $px);
}
&.heart.is-empty::before {
@include pixelize($icon-heart-empty, $icon-heart-empty-colors, $px);
}
&.star::before {
@include pixelize($icon-star, $icon-star-colors, $px, nth($icon-star-colors, 3));
@include pixelize($icon-star, $icon-star-colors, $px);
}
&.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, nth($icon-facebook-colors, 2));
@include pixelize($icon-facebook, $icon-facebook-colors, $px);
}
&.github::before {
@include pixelize($icon-github, $icon-github-colors, $px, nth($icon-github-colors, 2));
@include pixelize($icon-github, $icon-github-colors, $px);
}
&.youtube::before {
@include pixelize($icon-youtube, $icon-youtube-colors, $px, nth($icon-youtube-colors, 2));
@include pixelize($icon-youtube, $icon-youtube-colors, $px);
}
&.close::before {

2
scss/pixel-arts/bcrikko.scss
View File

@ -34,6 +34,6 @@
content: "";
background: transparent;
@include pixelize($bcrikko, $bcrikko-colors, $px, nth($bcrikko-colors, 2));
@include pixelize($bcrikko, $bcrikko-colors, $px);
}
}

2
scss/pixel-arts/nes-jp-icon.scss
View File

@ -28,6 +28,6 @@
content: "";
background: transparent;
@include pixelize($logo, $logo-colors, $px, nth($logo-colors, 2));
@include pixelize($logo, $logo-colors, $px);
}
}

2
scss/pixel-arts/snes-icon.scss
View File

@ -28,6 +28,6 @@
content: "";
background: transparent;
@include pixelize($logo, $logo-colors, $px, nth($logo-colors, 2));
@include pixelize($logo, $logo-colors, $px);
}
}

2
scss/pixel-arts/snes-jp-icon.scss
View File

@ -28,6 +28,6 @@
content: "";
background: transparent;
@include pixelize($logo, $logo-colors, $px, nth($logo-colors, 2));
@include pixelize($logo, $logo-colors, $px);
}
}

20
scss/utilities/icon-mixin.scss
View File

@ -2,7 +2,25 @@
$ret: "";
$moz: "";
@if ($default-color == null) {
$default-color: nth($colors, 1);
// count number of each color in matrix and decide main color by highest count
$matrix-colors: ();
$counts: ();
@each $row in $matrix {
@each $item in $row {
@if $item != 0 {
$index: index($matrix-colors, $item);
@if not $index {
$matrix-colors: append($matrix-colors, $item);
$counts: append($counts, 1);
} @else {
$count: nth($counts, $index) + 1;
$counts: set-nth($counts, $index, $count);
}
}
}
}
// use index of the highest count to get the corresponding matrix color
$default-color: nth($colors, nth($matrix-colors, index($counts, max($counts...))));
}
@for $i from 1 through length($matrix) {