Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
// Ratings.
$ranks-color: gold !default;
@mixin clearfix() {
content: "clearfix";
}
$fa-star-o: "empty";
$fa-star-half-o: "half";
$fa-star: "full";
@mixin get_content($p, $r, $half: false) {
$next: $r + 1;
@if $p > $next {
content: $fa-star-o;
} @else if $p == $next {
@if $half {
content: $fa-star-half-o;
} @else {
content: $fa-star-o;
}
} @else if $p < $next {
content: $fa-star;
}
}
// Class Name.
.ranks {
// The basic structure for the ranks class is a simple `ul > li(x5) > i`,
// with an optional container. There are no real styles that come with
// the container
//
// ```html
// <div class="ranks__box">
// <ul class="ranks__list ranks__{number}[--half]">
// <li class="ranks__item"><i class="ranks__point point--1"></i></li>
// <li class="ranks__item"><i class="ranks__point point--2"></i></li>
// <li class="ranks__item"><i class="ranks__point point--3"></i></li>
// <li class="ranks__item"><i class="ranks__point point--4"></i></li>
// <li class="ranks__item"><i class="ranks__point point--5"></i></li>
// </ul>
// </div>
// ```
&__box {
margin: 0;
padding: 0;
}
// The list containing the each of the points.
&__list {
@include clearfix;
margin: 0;
padding: 0;
list-style: none;
}
// Each list item.
&__item {
display: block;
float: left;
& + & {
margin-left: 2px;
}
}
// Each of the point markers.
&__point {
color: $ranks-color;
text-shadow: 0 0 2px darken($ranks-color, 15%);
font-size: 10px;
}
@each $r in 5, 4, 3, 2, 1, 0 {
@if $r < 5 {
&__#{$r}--half {
@each $p in 1, 2, 3, 4, 5 {
.point--#{$p}::before {
@include get_content($p, $r, true)
}
}
}
}
&__#{$r} {
@each $p in 1, 2, 3, 4, 5 {
.point--#{$p}::before{
@include get_content($p, $r)
}
}
}
}
}
.ranks__box { margin: 0; padding: 0; }
.ranks__list { content: "clearfix"; margin: 0; padding: 0; list-style: none; }
.ranks__item { display: block; float: left; }
.ranks__item + .ranks__item { margin-left: 2px; }
.ranks__point { color: gold; text-shadow: 0 0 2px #b39700; font-size: 10px; }
.ranks__5 .point--1::before { content: "full"; }
.ranks__5 .point--2::before { content: "full"; }
.ranks__5 .point--3::before { content: "full"; }
.ranks__5 .point--4::before { content: "full"; }
.ranks__5 .point--5::before { content: "full"; }
.ranks__4--half .point--1::before { content: "full"; }
.ranks__4--half .point--2::before { content: "full"; }
.ranks__4--half .point--3::before { content: "full"; }
.ranks__4--half .point--4::before { content: "full"; }
.ranks__4--half .point--5::before { content: "half"; }
.ranks__4 .point--1::before { content: "full"; }
.ranks__4 .point--2::before { content: "full"; }
.ranks__4 .point--3::before { content: "full"; }
.ranks__4 .point--4::before { content: "full"; }
.ranks__4 .point--5::before { content: "empty"; }
.ranks__3--half .point--1::before { content: "full"; }
.ranks__3--half .point--2::before { content: "full"; }
.ranks__3--half .point--3::before { content: "full"; }
.ranks__3--half .point--4::before { content: "half"; }
.ranks__3--half .point--5::before { content: "empty"; }
.ranks__3 .point--1::before { content: "full"; }
.ranks__3 .point--2::before { content: "full"; }
.ranks__3 .point--3::before { content: "full"; }
.ranks__3 .point--4::before { content: "empty"; }
.ranks__3 .point--5::before { content: "empty"; }
.ranks__2--half .point--1::before { content: "full"; }
.ranks__2--half .point--2::before { content: "full"; }
.ranks__2--half .point--3::before { content: "half"; }
.ranks__2--half .point--4::before { content: "empty"; }
.ranks__2--half .point--5::before { content: "empty"; }
.ranks__2 .point--1::before { content: "full"; }
.ranks__2 .point--2::before { content: "full"; }
.ranks__2 .point--3::before { content: "empty"; }
.ranks__2 .point--4::before { content: "empty"; }
.ranks__2 .point--5::before { content: "empty"; }
.ranks__1--half .point--1::before { content: "full"; }
.ranks__1--half .point--2::before { content: "half"; }
.ranks__1--half .point--3::before { content: "empty"; }
.ranks__1--half .point--4::before { content: "empty"; }
.ranks__1--half .point--5::before { content: "empty"; }
.ranks__1 .point--1::before { content: "full"; }
.ranks__1 .point--2::before { content: "empty"; }
.ranks__1 .point--3::before { content: "empty"; }
.ranks__1 .point--4::before { content: "empty"; }
.ranks__1 .point--5::before { content: "empty"; }
.ranks__0--half .point--1::before { content: "half"; }
.ranks__0--half .point--2::before { content: "empty"; }
.ranks__0--half .point--3::before { content: "empty"; }
.ranks__0--half .point--4::before { content: "empty"; }
.ranks__0--half .point--5::before { content: "empty"; }
.ranks__0 .point--1::before { content: "empty"; }
.ranks__0 .point--2::before { content: "empty"; }
.ranks__0 .point--3::before { content: "empty"; }
.ranks__0 .point--4::before { content: "empty"; }
.ranks__0 .point--5::before { content: "empty"; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.