CSS3 circle ratings

by Jerga99

HTML

<div class="pacss-wrapper"> 
    <span class="pacss-foreground">
        <span class="pacss-number">1</span>
    </span> 
    <span class="pacss"></span>
</div>

<div class="pacss-wrapper"> 
    <span class="pacss-foreground">
        <span class="pacss-number">2</span>
    </span> 
    <span class="pacss pacss-20"></span>
</div>

<div class="pacss-wrapper"> 
    <span class="pacss-foreground">
        <span class="pacss-number">5</span>
    </span> 
    <span class="pacss pacss-50"></span>
</div>

<div class="pacss-wrapper"> 
    <span class="pacss-foreground">
        <span class="pacss-number">6</span>
    </span> 
    <span class="pacss pacss-60 pacss-big"></span>
</div>

<div class="pacss-wrapper"> 
    <span class="pacss-foreground">
        <span class="pacss-number">10</span>
    </span> 
    <span class="pacss pacss-100 pacss-big"></span>
</div>

<div class="pacss-wrapper"> 
    <span class="pacss-foreground">
        <span class="pacss-number">3.3</span>
    </span> 
    <span class="pacss pacss-33 pacss-big"></span>
</div>

<!-- add class big for more than 50% -->

SCSS

@mixin transform-origin ($origin) {
    -moz-transform-origin: $origin;
	     -o-transform-origin: $origin;
	    -ms-transform-origin: $origin;
	-webkit-transform-origin: $origin;
          transform-origin: $origin;
}

@mixin transform($transforms) {
	   -moz-transform: $transforms;
	     -o-transform: $transforms;
	    -ms-transform: $transforms;
	-webkit-transform: $transforms;
          transform: $transforms;
}

@mixin ratings-x {
  @for $i from 1 through 20 {
    .pacss-#{$i / 2 * 10}:before {
        @include transform(rotate(#{$i / 2 * 36}deg));
    }
  }
}

$rating-inactive-color: #E6E7E8;
$rating-active-color: #23BDF0;

.pacss-wrapper {
    font-size: 300%;
    width:1em;
    height:1em;
    border-radius: 1em;
    background: $rating-inactive-color;
    margin: 0;
    padding: 0;
    float: left;
    margin: .3em;
    position:relative;
    box-sizing: border-box;
    &:after {
        //needed for android :(
        width: 1.3em;
        height: 1.3em;
        background:none;
        display:block;
        border: .2em solid white;
        position:absolute;   
        border-radius:1em;
        top:-.15em;
        left:-.15em;
        outline:0;
        content: "";
        z-index: 6;
        box-sizing: inherit;
        overflow:hidden;
    }

}

.pacss-foreground {
    position: absolute;
    margin:.15em;
    width:.7em;
    height:.7em;
    background: #fff;
    border-radius:1em;
    z-index:2;
    box-sizing:border-box;
    display:block;
    .pacss-number{
        font-size:.36em;
        font-weight:bold;
        font-family:arial;
        text-align: center;
        vertical-align: middle;
        line-height: 2em; 
        display:block;
        height:100%;
    }
}

/* 1em */
 .pacss {
    display:block;
    position:relative;
    width:.5em;
    height:1em;
    overflow:hidden;
    @include transform-origin(left center);
    margin-left:.5em;
}
.pacss.pacss-big:after, .pacss:before {
    content:" ";
    position:absolute;
   ...