/* Modifiers A beautiful ui component for displaying rating values of up to 5 stars with css only. Options are: - Value - Size - Spread - Static Color - Label Position - Animation Speed - Disabled (in this html is additional angular markup to make the showcase interactive) markup:
3.5
Styleguide 1.1 */ /* Value Different styles for different rating values. Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above. .value-0 - 0 rating .value-1 - 1 rating .value-2 - 2 rating .value-3 - 3 rating .value-4 - 4 rating .value-5 - 5 rating markup:
Styleguide 1.1.1 */ /* Hover Styles for mouse hover effects. The star and all previous the one the mouse hovers are visible as filled and have opacity .hover-0 - hover over no star .hover-1 - hover over 1st star .hover-2 - hover over 2nd star .hover-3 - hover over 3rd star .hover-4 - hover over 4th star .hover-5 - hover over 5th star markup:
Styleguide 1.1.2.1 */ /* Half-Stars Different styles for different rating values. Default colors are red for values equal to 2 or below, yellow for 3, and green for 4 or above. .half - rating with half stars on the end markup:
Styleguide 1.1.2 */ /* Size Different sizes of the stars and the label. Additional to the default size medium there are more sizes, small and large. .small - Small size .medium - Medium size .large - Large size markup:
Styleguide 1.1.3 */ /* Space Different space options .space-between - stars take all available space to position. Space is only between the stars. .space-around - stars take all available space to position. Space is only around the stars. markup:
Styleguide 1.1.4 */ /* Static Color Overriding default colors of ratings to display the color independent of the rating. .color-default - Stars are always colored default .color-positive - Stars are always colored positive .color-ok - Stars are always colored ok .color-negative - Stars are always colored negative markup:
Styleguide 1.1.5 */ /* Label Position Displays the rating value as text label. .label-top - Value displayed on the top .label-right - Value displayed on the right side .label-bottom - Value displayed on the bottom .label-left - Value displayed on the left side markup:
0
(bad)
3.1
Good
Styleguide 1.1.6 */ /* Disabled Visualizes the disabled state of the rating component. The styles symbolizing that no interaction is possible .disabled - Stars are grayed out, no interaction is possible markup:
(bad)
3.1
Good
Styleguide 1.1.7 */ /* Animation Speed By default the stars animate (fade) to the new state. These modifiers provide three different durations of the transition. .immediately - No Transition .noticeable - Transition runs in noticeable speed .slow - Transition runs very slow markup:
Styleguide 1.1.8 */ /* Star Type The stars can be generated out of three different types. characters, svg's of any icon font .star-icon - Star-Characters from default browser font .star-custom-icon - Star-Characters from icon-fonts like fontawesome and others .star-svg - Star-Vectors form the shipped svg images markup:
Styleguide 1.1.9 */ /* Direction The the direction of the star container. .direction-rtl - displays component elements in right to left direction. .direction-ltr - displays component elements in left to right direction. markup:
3.5
Styleguide 1.1.10 */ /* Label Visibility Label hidden or not .label-hidden - stars take all available space to position. Space is only between the stars. .label-visible - stars take all available space to position. Space is only around the stars. markup:
3.5
Styleguide 1.1.11 */