Skip to content

Commit

Permalink
feat(icons): add new star icons (#147)
Browse files Browse the repository at this point in the history
  • Loading branch information
@4k1k0 @abdallahalsamman
4k1k0 authored and abdallahalsamman committed Dec 9, 2018
1 parent 9c9e891 commit 11ce7b8
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 0 deletions.
9 changes: 9 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,15 @@ <h3 class="title">Reaction</h3>
<i class="icon star"></i>
<i class="icon star is-medium"></i>
<i class="icon star is-large"></i>

<i class="icon star is-half"></i>
<i class="icon star is-half is-medium"></i>
<i class="icon star is-half is-large"></i>

<i class="icon star is-transparent"></i>
<i class="icon star is-transparent is-medium"></i>
<i class="icon star is-transparent is-large"></i>

<i class="icon star is-empty"></i>

<i class="icon like is-small"></i>
Expand Down
6 changes: 6 additions & 0 deletions scss/icons/icons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,12 @@
&.star.is-empty::before {
@include pixelize($icon-star-empty, $icon-star-empty-colors, $px);
}
&.star.is-half::before {
@include pixelize($icon-star-half, $icon-star-colors, $px);
}
&.star.is-transparent::before {
@include pixelize($icon-star-transparent, $icon-star-colors, $px);
}

&.trophy::before {
@include pixelize($icon-trophy, $icon-trophy-colors, $px);
Expand Down
38 changes: 38 additions & 0 deletions scss/icons/star.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,41 @@ $icon-star-empty: (
(1,0,0,1,1,0,0,0,0,0,1,1,0,0,1,0),
(1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0)
);

$icon-star-half: (
(0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0),
(0, 0, 0, 0, 0, 0, 2, 3, 2, 0, 0, 0, 0, 0, 0, 0),
(0, 0, 0, 0, 0, 0, 2, 3, 2, 0, 0, 0, 0, 0, 0, 0),
(0, 0, 0, 0, 0, 2, 3, 3, 0, 2, 0, 0, 0, 0, 0, 0),
(0, 0, 0, 0, 0, 2, 3, 3, 0, 2, 0, 0, 0, 0, 0, 0),
(2, 2, 2, 2, 2, 2, 3, 3, 0, 0, 2, 2, 2, 2, 2, 0),
(2, 3, 3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 2, 0),
(0, 2, 3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 2, 0, 0),
(0, 0, 2, 3, 3, 3, 3, 3, 0, 0, 0, 0, 2, 0, 0, 0),
(0, 0, 0, 2, 3, 3, 3, 3, 0, 0, 0, 2, 0, 0, 0, 0),
(0, 0, 2, 3, 3, 3, 3, 4, 0, 0, 0, 0, 2, 0, 0, 0),
(0, 0, 2, 3, 3, 3, 4, 4, 0, 0, 0, 0, 2, 0, 0, 0),
(0, 2, 3, 3, 4, 4, 4, 2, 0, 0, 0, 0, 0, 2, 0, 0),
(0, 2, 3, 4, 4, 2, 2, 0, 2, 2, 0, 0, 0, 2, 0, 0),
(2, 4, 4, 2, 2, 0, 0, 0, 0, 0, 2, 2, 0, 0, 2, 0),
(2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 0)
);

$icon-star-transparent: (
(0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0),
(0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 0, 0),
(0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 0, 0, 0, 0, 0, 0),
(0, 0, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0),
(0, 0, 0, 0, 0, 2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0),
(2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 2, 2, 2, 2, 2, 0),
(2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0),
(0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0),
(0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0),
(0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0),
(0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0),
(0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0),
(0, 2, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 2, 0, 0),
(0, 2, 0, 0, 0, 2, 2, 0, 2, 2, 0, 0, 0, 2, 0, 0),
(2, 0, 0, 2, 2, 0, 0, 0, 0, 0, 2, 2, 0, 0, 2, 0),
(2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 0)
);

0 comments on commit 11ce7b8

Please sign in to comment.