/
githubmirror
/
magento2
Обзор
Документация
Войти
/
githubmirror
/
magento2
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
2.4-develop
lib/web/css/docs/rating.html
346 строк
239 KB
Alexandra Zota
ACP2E-4019: CE copyright updates for 2.4.9-beta1
22 окт 2025, 10:58
22 окт 2025, 10:58
3d4f486
Код
Авторство
О чём код?
<!-- /** * Copyright 2014 Adobe * All Rights Reserved. */ --> <!DOCTYPE html><html><head><title>rating | Magento UI Library </title><meta charset="utf-8"><style>*{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0}body{padding:60px 0 40px;background-color:hsl(207,10%,90%);color:hsl(207,5%,30%)}.co … [Строка слишком длинная. Вы можете скачать файл] <p> Ratings styling mixins are based on using font icons as rate symbols. There are two types of ratings: rating which allows user to vote and rating which displays voting results summary. Depending on the rating type mixin <code>.lib-rating-vote()</code> or <code>.lib-rating-summary()</code> is used.</p> </div></article><article id="global-rating-variables" class="section"><div class="docs"><a href="#global-rating-variables" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="global-rating-variables">Global rating variables</h1> <p> Global styles for both types of ratings can be modified by changing global variables. To set different styles to types of ratings these variables should be used directly in the mixin call.</p> <pre> <table> <tr> <th class="vars_head">Mixin variable</th> <th class="vars_head">Global variable</th> <th class="vars_head">Default value</th> <th class="vars_head">Allowed values</th> <th class="vars_head">Comment</th> </tr> <tr> <th>@_icon-content</th> <td>@rating-icon__content</td> <td class="vars_value">@icon-star</td> <td class="vars_value">'' | false | icon code</td> <td>Rating icon symbol code</td> </tr> <tr> <th>@_icon-count</th> <td>@rating-icon__count</td> <td class="vars_value">5</td> <td class="vars_value">'' | value</td> <td>Number of rating icon symbols</td> </tr> <tr> <th>@_icon-font</th> <td>@rating-icon__font</td> <td class="vars_value">@icon-font</td> <td class="vars_value">'' | false | value</td> <td>Icon font</td> </tr> <tr> <th>@_icon-font-size</th> <td>@rating-icon__font-size</td> <td class="vars_value">28px</td> <td class="vars_value">'' | false | value</td> <td>Icon font size</td> </tr> <tr> <th>@_icon-letter-spacing</th> <td>@rating-icon__letter-spacing</td> <td class="vars_value">-10px</td> <td class="vars_value">'' | false | value</td> <td>Icon letter spacing</td> </tr> <tr> <th>@_icon-color</th> <td>@rating-icon__color</td> <td class="vars_value">#c7c7c7</td> <td class="vars_value">'' | false | value</td> <td>Unselected icons color</td> </tr> <tr> <th>@_icon-color-active</th> <td>@rating-icon__active__color</td> <td class="vars_value">#ff5601</td> <td class="vars_value">'' | false | value</td> <td>Selected and hovered icons color</td> </tr> <tr> <th>@_label-hide</th> <td>@rating-label__hide</td> <td class="vars_value">false</td> <td class="vars_value">true | false</td> <td>Rating label is displayed</td> </tr> </table> </pre> </div></article><article id="rating-with-vote" class="section"><div class="docs"><a href="#rating-with-vote" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="rating-with-vote">Rating with vote</h1> <p> To implement rating with vote, use the <code>.lib-rating-vote()</code> mixin.</p> <textarea class="preview-code" spellcheck="false"> <div class="rating vote example-ratings-1"> <input type="radio" name="rating-price" id="rating-price-1" value="1" /> <label class="rating-1" for="rating-price-1" title="1 star"> <span>1 star</span> </label> <input type="radio" name="rating-price" id="rating-price-2" value="2" /> <label class="rating-2" for="rating-price-2" title="2 stars"> <span>2 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-3" value="3" /> <label class="rating-3" for="rating-price-3" title="3 stars"> <span>3 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-4" value="4" /> <label class="rating-4" for="rating-price-4" title="4 stars"> <span>4 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-5" value="5" /> <label class="rating-5" for="rating-price-5" title="5 stars"> <span>5 stars</span> </label> </div></textarea> </div><div class="code"><pre><code>.example-ratings-1 { .lib-rating-vote(); }</code></pre></div></article><article id="rating-with-vote-icons-number-customization" class="section"><div class="docs"><a href="#rating-with-vote-icons-number-customization" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="rating-with-vote-icons-number-customization">Rating with vote icons number customization</h1> <p> To change number of icons, add desired number of rating icons (input + label) to the markup. Then set this number to the <code>@_icon-count</code> mixin variable.</p> <textarea class="preview-code" spellcheck="false"> <div class="rating vote example-ratings-2"> <input type="radio" name="rating-price" id="rating-price-1" value="1" /> <label class="rating-1" for="rating-price-1" title="1 star"> <span>1 star</span> </label> <input type="radio" name="rating-price" id="rating-price-2" value="2" /> <label class="rating-2" for="rating-price-2" title="2 stars"> <span>2 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-3" value="3" /> <label class="rating-3" for="rating-price-3" title="3 stars"> <span>3 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-4" value="4" /> <label class="rating-4" for="rating-price-4" title="4 stars"> <span>4 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-5" value="5" /> <label class="rating-5" for="rating-price-5" title="5 stars"> <span>5 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-6" value="6" /> <label class="rating-6" for="rating-price-6" title="6 stars"> <span>6 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-7" value="7" /> <label class="rating-7" for="rating-price-7" title="7 stars"> <span>7 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-8" value="8" /> <label class="rating-8" for="rating-price-8" title="8 stars"> <span>8 stars</span> </label> </div></textarea> </div><div class="code"><pre><code>.example-ratings-2 { .lib-rating-vote( @_icon-count: 8 ); }</code></pre></div></article><article id="rating-with-vote-icons-colors-customization" class="section"><div class="docs"><a href="#rating-with-vote-icons-colors-customization" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="rating-with-vote-icons-colors-customization">Rating with vote icons colors customization</h1> <p> These variables control default and active icon colors:</p> <pre><code class="lang-css"> @_icon-color: value, @_icon-color-active: value</code></pre> <textarea class="preview-code" spellcheck="false"> <div class="rating vote example-ratings-3"> <input type="radio" name="rating-price" id="rating-price-1" value="1" /> <label class="rating-1" for="rating-price-1" title="1 star"> <span>1 star</span> </label> <input type="radio" name="rating-price" id="rating-price-2" value="2" /> <label class="rating-2" for="rating-price-2" title="2 stars"> <span>2 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-3" value="3" /> <label class="rating-3" for="rating-price-3" title="3 stars"> <span>3 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-4" value="4" /> <label class="rating-4" for="rating-price-4" title="4 stars"> <span>4 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-5" value="5" /> <label class="rating-5" for="rating-price-5" title="5 stars"> <span>5 stars</span> </label> </div></textarea> </div><div class="code"><pre><code>.example-ratings-3 { .lib-rating-vote( @_icon-color: #aff5e3, @_icon-color-active: #0a6767 ); }</code></pre></div></article><article id="rating-with-vote-icons-symbol-customization" class="section"><div class="docs"><a href="#rating-with-vote-icons-symbol-customization" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="rating-with-vote-icons-symbol-customization">Rating with vote icons symbol customization</h1> <p> To set custom icon symbol, use the <code>@_icon-content</code> variable</p> <textarea class="preview-code" spellcheck="false"> <div class="rating vote example-ratings-4"> <input type="radio" name="rating-price" id="rating-price-1" value="1" /> <label class="rating-1" for="rating-price-1" title="1 star"> <span>1 star</span> </label> <input type="radio" name="rating-price" id="rating-price-2" value="2" /> <label class="rating-2" for="rating-price-2" title="2 stars"> <span>2 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-3" value="3" /> <label class="rating-3" for="rating-price-3" title="3 stars"> <span>3 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-4" value="4" /> <label class="rating-4" for="rating-price-4" title="4 stars"> <span>4 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-5" value="5" /> <label class="rating-5" for="rating-price-5" title="5 stars"> <span>5 stars</span> </label> </div></textarea> </div><div class="code"><pre><code>.example-ratings-4 { .lib-rating-vote( @_icon-content: @icon-wishlist-full ); }</code></pre></div></article><article id="accessible-rating-with-vote" class="section"><div class="docs"><a href="#accessible-rating-with-vote" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="accessible-rating-with-vote">Accessible rating with vote</h1> <p> The following markup corresponds to <strong>accesibility</strong> demands</p> <textarea class="preview-code" spellcheck="false"> <fieldset class="exapmle-ratings-5 fieldset ratings vote"> <legend>How do you rate this product?</legend> <div class="field price"> <label class="label" for="rating-1" id="price-rating-label"><span>Price</span></label> <div class="control rating vote"> <input type="radio" name="rating-price" id="rating-price-1" value="1" aria-labelledby="price-rating-label rating-price-label-1" /> <label class="rating-1" for="rating-price-1" title="1 star" id="rating-price-label-1"> <span>1 star</span> </label> <input type="radio" name="rating-price" id="rating-price-2" value="2" aria-labelledby="price-rating-label rating-price-label-2" /> <label class="rating-2" for="rating-price-2" title="2 stars" id="rating-price-label-2"> <span>2 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-3" value="3" aria-labelledby="price-rating-label rating-price-label-3" /> <label class="rating-3" for="rating-price-3" title="3 stars" id="rating-price-label-3"> <span>3 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-4" value="4" aria-labelledby="price-rating-label rating-price-label-4" /> <label class="rating-4" for="rating-price-4" title="4 stars" id="rating-price-label-4"> <span>4 stars</span> </label> <input type="radio" name="rating-price" id="rating-price-5" value="5" aria-labelledby="price-rating-label rating-price-label-5" /> <label class="rating-5" for="rating-price-5" title="5 stars" id="rating-price-label-5"> <span>5 stars</span> </label> </div> </div> </fieldset></textarea> </div><div class="code"><pre><code>.exapmle-ratings-5 { .control.rating.vote { .lib-rating-vote(); } }</code></pre></div></article><article id="rating-summary" class="section"><div class="docs"><a href="#rating-summary" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="rating-summary">Rating summary</h1> <p> To implement rating summary, use the following markup</p> <textarea class="preview-code" spellcheck="false"> <div class="example-rating-summary-1"> <span class="label"><span>Rating</span></span> <div class="rating-result" title="60%"> <span style="width:60%"><span>60</span></span> </div> </div></textarea> </div><div class="code"><pre><code>.example-rating-summary-1 { .lib-rating-summary(); }</code></pre></div></article><article id="rating-summary-icons-number-customization" class="section"><div class="docs"><a href="#rating-summary-icons-number-customization" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="rating-summary-icons-number-customization">Rating summary icons number customization</h1> <p> To set up number of icons, use the variable:</p> <pre><code class="lang-css"> @_icon-count: number</code></pre> <textarea class="preview-code" spellcheck="false"> <div class="example-rating-summary-2"> <span class="label"><span>Rating</span></span> <div class="rating-result" title="40%"> <span style="width:40%"><span>40</span></span> </div> </div></textarea> </div><div class="code"><pre><code>.example-rating-summary-2 { .lib-rating-summary( @_icon-count: 8 ); }</code></pre></div></article><article id="rating-summary-icons-color-customization" class="section"><div class="docs"><a href="#rating-summary-icons-color-customization" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="rating-summary-icons-color-customization">Rating summary icons color customization</h1> <p> To set up the icons default and selected color, use variables:</p> <pre><code class="lang-css"> @_icon-color: value @_icon-color-active: value</code></pre> <textarea class="preview-code" spellcheck="false"> <div class="example-rating-summary-3"> <span class="label"><span>Rating</span></span> <div class="rating-result" title="40%"> <span style="width:40%"><span>40</span></span> </div> </div></textarea> </div><div class="code"><pre><code>.example-rating-summary-3 { .lib-rating-summary( @_icon-color: #aff5e3, @_icon-color-active: #0a6767 ); }</code></pre></div></article><article id="rating-summary-icons-symbol-customization" class="section"><div class="docs"><a href="#rating-summary-icons-symbol-customization" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="rating-summary-icons-symbol-customization">Rating summary icons symbol customization</h1> <p> To set up the icons symbol use variable:</p> <pre><code class="lang-css"> @_icon-content: icon_code</code></pre> <textarea class="preview-code" spellcheck="false"> <div class="example-rating-summary-4"> <span class="label"><span>Rating</span></span> <div class="rating-result" title="40%"> <span style="width:40%"><span>40</span></span> </div> </div></textarea> </div><div class="code"><pre><code>.example-rating-summary-4 { .lib-rating-summary( @_icon-content: @icon-wishlist-full ); }</code></pre></div></article><article id="rating-summary-hide-label" class="section"><div class="docs"><a href="#rating-summary-hide-label" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="rating-summary-hide-label">Rating summary hide label</h1> <p> To hide the rating summary label set:</p> <pre><code class="lang-css"> @_label-hide: true</code></pre> <textarea class="preview-code" spellcheck="false"> <div class="example-rating-summary-5"> <span class="label"><span>Rating</span></span> <div class="rating-result" title="40%"> <span style="width:40%"><span>40</span></span> </div> </div></textarea> </div><div class="code"><pre><code>.example-rating-summary-5 { .lib-rating-summary( @_label-hide: true ); }</code></pre></div></article><article id="rating-summary-multiple-ratings" class="section"><div class="docs"><a href="#rating-summary-multiple-ratings" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="rating-summary-multiple-ratings">Rating summary multiple ratings</h1> <textarea class="preview-code" spellcheck="false"> <div class="example-rating-summary-6" tabindex="1"> <strong>Your Rating:</strong> <div class="rating-summary item"> <span class="label"><span>Value</span></span> <div class="rating-result" title="100%" > <span style="width:100%"><span>100%</span></span> </div> </div> <div class="rating-summary item"> <span class="label"><span>Quality</span></span> <div class="rating-result" title="100%"> <span style="width:100%"><span>100%</span></span> </div> </div> <div class="rating-summary item"> <span class="label"><span>rating +</span></span> <div class="rating-result" title="20%"> <span style="width:20%"><span>20%</span></span> </div> </div> <div class="rating-summary item"> <span class="label"><span>Price</span></span> <div class="rating-result" title="40%"> <span style="width:40%"><span>40%</span></span> </div> </div> </div></textarea> </div><div class="code"><pre><code>.example-rating-summary-6 { .rating-summary { .lib-rating-summary(); } }</code></pre></div></article><article id="rating-hide-label-mixin" class="section"><div class="docs"><a href="#rating-hide-label-mixin" class="permalink"><svg viewBox="0 0 512 512" height="32" width="32" class="icon"><path d="M156.2,199.7c7.5-7.5,15.9-13.8,24.8-18.7c49.6-27.3,113.1-12.8,145,35.5l-38.5,38.5c-11.1-25.2-38.5-39.6-65.8-33.5c-10.3,2.3-20.1,7.4-28,15.4l-73.9,73.9c-22.4,22.4-22.4,58.9,0,81.4c22.4,22.4,58.9,22.4,81.4,0l22.8-22.8c20.7,8.2,42.9,11.5,64.9,9.9l-50.3,50.3c-43.1,43.1-113,43.1-156.1,0c-43.1-43.1-43.1-113-0-156.1L156.2,199.7z M273.6,82.3l-50.3,50.3c21.9-1.6,44.2,1.6,64.9,9.9l22.8-22.8c22.4-22.4,58.9-22.4,81.4,0c22.4,22.4,22.4,58.9,0,81.4l-73.9,73.9c-22.5,22.5-59.1,22.3-81.4,0c-5.2-5.2-9.7-11.7-12.5-18l-38.5,38.5c4,6.1,8.3,11.5,13.7,16.9c13.9,13.9,31.7,24.3,52.1,29.3c26.5,6.4,54.8,2.8,79.2-10.6c8.9-4.9,17.3-11.1,24.8-18.7l73.9-73.9c43.1-43.1,43.1-113,0-156.1C386.6,39.2,316.7,39.2,273.6,82.3z"></path></svg></a><h1 id="rating-hide-label-mixin">Rating hide label mixin</h1> <p> The <code>.lib-rating-summary-label-hide()</code> mixin is used to hide rating label in summary rating.</p> <textarea class="preview-code" spellcheck="false"> <div class="example-rating-summary-7"> <span class="label"><span>Rating</span></span> <div class="rating-result" title="40%"> <span style="width:40%"><span>40</span></span> </div> </div></textarea> </div><div class="code"><pre><code>.example-rating-summary-7 { .lib-rating-summary(); .lib-rating-summary-label-hide(); }</code></pre></div></article></section><div class="bar bottom"><div hidden class="settings container"><!-- Icons from http://iconmonstr.com--><button title="Desktop (1280)" data-width='1280'><svg vie … [Строка слишком длинная. Вы можете скачать файл]