1+ /// Credits to https://codepen.io/damianmuti/pen/KmEMdR
2+
3+ ///
4+ $rating-min-value : 0 !default ;
5+ ///
6+ $rating-max-value : 5 !default ;
7+ ///
8+ $rating-steps-value : .25 !default ;
9+ ///
10+ $rating-color-empty : ' %23ddd' !default ;
11+ ///
12+ $rating-color-full : gold !default ;
13+ ///
14+ $rating-color-hover : grey !default ;
15+ /// This variable is a map containing the "d" attribute of each of the SVG icons
16+ $rating-icons-paths : (
17+ quarter : ' M196.208 415.2v-224.8l-139.504 20.272 100.944 98.384-23.84 138.928z'
18+ half : ' M258.672 64l-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6v-318.4z'
19+ three-quarters : ' M321.616 190.496l-0.656-0.096-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 63.024 33.136z'
20+ full : ' M457.888 210.672l-139.504-20.272-62.384-126.4-62.384 126.4-139.504 20.272 100.944 98.384-23.84 138.928 124.768-65.6 124.768 65.6-23.84-138.928c0 0 100.944-98.384 100.944-98.384z'
21+ );
22+
23+ /// Creates a dynamic list of values that increment each .25 from 0 to 5
24+ /// @return {list}
25+ @function rating-values() {
26+ $rating-values : ();
27+
28+ @for $i from $rating-min-value through ($rating-max-value / $rating-steps-value ) {
29+ $rating-value : abs ($i * $rating-steps-value );
30+ $rating-values : append ($rating-values , $rating-value , ' comma'
31+ }
32+
33+ @return $rating-values ;
34+ }
35+
36+ /// Generates an SVG with a given fill color depending on the type of icon passed as parameter. The SVG string is scaped for cross-browser support.
37+ /// @param {string} $icon - Type of icon. Accepted values: `quarter`, `half`, `three-quarters` or `full`.
38+ /// @param {color} $color - Passes the fill color of the SVG icon that is being generated. Note: Hexa color values must be escaped for cross-browser support.
39+ /// @return {string} background value.
40+ @function get-icon ($icon , $color ) {
41+ @if not index (quarter half three-quarters full , $icon ) {
42+ @error " Interaction type must be either `quarter`, `half`, `three-quarters` or `full`."
43+ }
44+
45+ @return url (' data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22' + $color + ' %22%20d%3D%22' + map-get ($rating-icons-paths , $icon ) + ' %22%3E%3C%2Fpath%3E%3C%2Fsvg%3E' center / cover no-repeat ;
46+ }
47+
48+ /// This is a CSS-only star rating component that shows the proper rating depending on a data-attribute value. JS logic behind this component should round up values per quarter.
49+ /// @param {number} $star-size [20px] - Provides width and height for each of the stars.
50+ /// @param {string} $rating-element [button] - Element to use for each of the stars.
51+ /// @param {string} $interaction-type [representative] - Indicates whether this component should be clickable or representative. Accepted values: `clickable` or `representative`.
52+ /// @example scss
53+ /// .class {
54+ /// c-rating(toem(20px), button , clickable);
55+ /// }
56+ /// @example markup
57+ /// <div class="c-rating" data-rating-value="3.25">
58+ /// <span>1</span>
59+ /// <span>2</span>
60+ /// <span>3</span>
61+ /// <span>4</span>
62+ /// <span>5</span>
63+ /// </div>
64+ @mixin c-rating($star-size: 20px, $star-element: button, $interaction-type: representative) {
65+ @if not index (clickable representative , $interaction-type ) {
66+ @error " Interaction type must be either `clickable` or `representative`."
67+ }
68+
69+ #{$star-element } {
70+ display inline-block ;
71+ float left ;
72+ width $star-size ;
73+ height $star-size ;
74+ border 0 ;
75+ text-indent -9999px ;
76+ outline none ;
77+ background get-icon (full , $rating-color-empty );
78+
79+ }
80+
81+ @each $rating-value in rating-values () {
82+ // Get the next higher integer.
83+ $rating-value-ceil : ceil ($rating-value );
84+
85+ & [data-rating-value = " #{$rating-value } "
86+ #{$star-element } :nth-child (-n +#{$rating-value-ceil } ) {
87+ background get-icon (full , $rating-color-full );
88+ }
89+
90+ #{$star-element } :nth-child (#{$rating-value-ceil } ) {
91+ // Evaluate which fraction of a star this value is and add the proper background
92+ @if str-slice (" #{$rating-value } " 2 , 4 ) == ' .25'
93+ background get-icon (quarter , $rating-color-full ), get-icon (full , $rating-color-empty )
94+ }
95+ @else if str-slice (" #{$rating-value } " 2 , 4 ) == ' .5'
96+ background get-icon (half , $rating-color-full ), get-icon (full , $rating-color-empty )
97+ }
98+ @else if str-slice (" #{$rating-value } " 2 , 4 ) == ' .75'
99+ background get-icon (three-quarters , $rating-color-full ), get-icon (full , $rating-color-empty )
100+ }
101+ }
102+ }
103+ }
104+ }
105+
106+ /// Convert to EMs function
107+ /// @param {number} target - The value to be converted
108+ /// @param {number} context [$msuxf-font-size] The base font size
109+ /// @return {em} value
110+ @function toem ($target , $context : 16px ) {
111+ @if $target == 0 {
112+ @return 0
113+ }
114+
115+ @return $target / $context + 0em ;
116+ }
117+
118+
119+ .rating-holder {
120+ font-size 16px ;
121+ display inline-block ;
122+ background-color #fff ;
123+ border-radius toem (25px );
124+ box-sizing border-box ;
125+ }
126+
127+ .c-rating {
128+ @include c-rating (toem (20px ), button, clickable);
129+
130+ & --small {
131+ font-size 50%
132+ }
133+
134+ & --big {
135+ font-size 150% ;
136+ }
137+ }
0 commit comments