deliteful-StarRating-simple

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<div class="group">
	<d-star-rating value="3"></d-star-rating><br>
	<d-star-rating class="yellowgray" value="3"></d-star-rating><br>
	<d-star-rating class="green-man" value="3"></d-star-rating><br>
	<d-star-rating class="heart" value="3"></d-star-rating><br>
	<d-star-rating class="image-sprite" value="3"></d-star-rating>
</div>

CSS

.group {
    margin: 20px;
    padding: 10px;
    border: 1px solid gray;
    border-radius: 6px;
}

/* customize stars */

.yellowgray .d-star-rating-star-icon {
    font-size: 150%;
}

.yellowgray .d-star-rating-empty:before {
    content: "\2605";
    color: #CCC;
}

.yellowgray .d-star-rating-full:before {
    content: "\2605";
    color: yellow;
}

.green-man .d-star-rating-star-icon {
    font-size: 200%;
}

.green-man .d-star-rating-empty:before {
    content: "\263A";
    color: green;
}

.green-man .d-star-rating-full:before {
    content: "\263B";
    color: green;
}

.heart .d-star-rating-star-icon {
    font-size: 150%;
}

.heart .d-star-rating-empty:before {
    content: "\2665";
    color: #CCC;
}

.heart .d-star-rating-full:before {
    content: "\2665";
    color: red;
}

.image-sprite .d-star-rating-star-icon {
    font-size: 40px;
}

.image-sprite .d-star-rating-empty:before {
    content: url("http://ibm-js.github.io/libraries/master/deliteful-build/samples/images/yellow-stars-40.png");
}

.image-sprite .d-star-rating-start.d-star-rating-empty:before {
    margin-left: -1em;
}

.image-sprite .d-star-rating-end.d-star-rating-empty:before {
    margin-left: -1.5em;
}

.image-sprite .d-star-rating-full:before {
    content: url("http://ibm-js.github.io/libraries/master/deliteful-build/samples/images/yellow-stars-40.png");
}

JavaScript

require.config({baseUrl: "http://ibm-js.github.io/libraries/master/"});

require(["deliteful-build/layer"], function () {
    require([
        "deliteful/StarRating",
        "delite/theme!delite/themes/{{theme}}/global.css",	// page level CSS
        "requirejs-domready/domReady!"
    ], function () {
        document.body.style.display = "";
    });
});