<div class="ui_rating" data-uipack="rating" data-value="2.5">
    <i class="ui_rating__icon"></i>
    <i class="ui_rating__icon"></i>
    <i class="ui_rating__icon"></i>
    <i class="ui_rating__icon"></i>
    <i class="ui_rating__icon"></i>
</div>
    
    

# default icon = .ui_rating__icon;

## overriding default icon

## .ui_rating__icon => .fa.fa-star;

.ui_rating {
    /* font-awsome example */
    .fa-star {
        color: #d9d9d9;
        &[data-state=active] {
            color: #ffc801;
        }

        &[data-state=half] {
            color: #ffc801;
            &:before {
                content:'\f089'
            }
        }
    }
}