newsupernova/lib/web/css/docs/source/_icons.less

// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//  # Icons
//  Icons can be represented by using the fonts, images, or sprites.
//
//  An icon can be added to any HTML tag. For this purpose you need to use additional <code>&lt;span&gt;</code> tag within your tag. This additional tag serves for displaying an icon without visible text, thus following the **accessibility requirements**. Then you need to apply appropriate <code>icon</code> mixin for this tag's class. Icon can be added both before and after element's text. Also, icon can be displayed instead of element's text (in this case the text is hidden).
//
//  There are two ways to insert icon: first you can use **sprite or image**, second you can use **an icon font**. Magento UI library provides mixins for both of them.
//  ```
//  <a href="#" class="example-icon-1"><span>sprite icon before the text</span></a>
//  <br>
//  <a href="#" class="example-icon-2"><span>sprite icon after the text</span></a>
//  <br>
//  <a href="#" class="example-icon-3" title="sprite icon instead of the text"><span>icon instead of the text</span></a>
//  <br>
//  <a href="#" class="example-icon-4"><span>font icon before the text</span></a>
//  <br>
//  <a href="#" class="example-icon-5"><span>font icon after the text</span></a>
//  <br>
//  <a href="#" class="example-icon-6" title="font icon instead of the text"><span>icon instead of the text</span></a>
//  ```

.example-icon-1 {
    .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
}

.example-icon-2 {
    .lib-icon-image(
        @_icon-image: '@{baseDir}images/blank-theme-icons.png',
        @_icon-image-position-x: -26px,
        @_icon-image-position-y: 0,
        @_icon-image-position: after
   );
}

.example-icon-3 {
    .lib-icon-image(
        @_icon-image: '@{baseDir}images/blank-theme-icons.png',
        @_icon-image-position-x: -156px,
        @_icon-image-position-y: -52px,
        @_icon-image-text-hide: true
   );
}

.example-icon-4 {
    .lib-icon-font(
        @_icon-font-content: @icon-settings,
        @_icon-font-size: 24px
   );
}

.example-icon-5 {
    .lib-icon-font(
        @_icon-font-content: @icon-star,
        @_icon-font-size: 24px,
        @_icon-font-position: after
   );
}

.example-icon-6 {
    .lib-icon-font(
        @_icon-font-content: @icon-flag,
        @_icon-font-size: 24px,
        @_icon-font-text-hide: true
   );
}

//  # Icon with image or sprite
//  the <code>.lib-icon-image()</code> mixin is used to create icons using single image or sprite. It has one mandatory parameter - <code>@_icon-image</code>. This parameter accepts the path to an image or sprite.
//
//  ```
//  <a href="#" class="example-icon-7"><span>icon-search</span></a>
//  ```

.example-icon-7 {
    .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
}

//  # Icon with image or sprite variables
//
//  <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-image</th>
//        <td>-</td>
//        <td class="vars_value">-</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>A link to an image or sprite, mandatory parameter</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-height</th>
//        <td>@icon__height</td>
//        <td class="vars_value">26px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Icon image height</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-width</th>
//        <td>@icon__width</td>
//        <td class="vars_value">26px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Icon image width</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-margin</th>
//        <td>@icon__margin</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Icon image margin</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-image-vertical-align</th>
//        <td>@icon__vertical-align</td>
//        <td class="vars_value">middle</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Icon image vertical align</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-position-x</th>
//        <td>@icon-image__position-x</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Horizontal image position</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-position-y</th>
//        <td>@icon-image__position-y</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Vertical image position</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-position</th>
//        <td>@icon__position</td>
//        <td class="vars_value">before</td>
//        <td class="vars_value">before | after</td>
//        <td>Icon image position</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-text-hide</th>
//        <td>@icon__text-hide</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">true | false</td>
//        <td>The text in the &lt;span&gt; tag should be hidden</td>
//      </tr>
//    </table>
//  </pre>

//  # Icon position for an icon with image or sprite
//  To change the position for icons with image the <code>.lib-icon-image-position()</code> mixin is used. By managing its <code>@_icon-image-position-x</code> and <code>@_icon-image-position-y</code> variables you can move the image on element's background. The <code>@_icon-image-position</code> variable is used to define the position of icon (before or after the element).
//  ```
//  <a href="#" class="example-icon-8"><span>icon-star</span></a>
//  <br>
//  <a href="#" class="example-icon-9"><span>icon-heart</span></a>
//  ```

.example-icon-8 {
    .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
    .lib-icon-image-position(
        @_icon-image-position-x: -182px
   );
}

.example-icon-9 {
    .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png', @_icon-image-position: after);
    .lib-icon-image-position(
        @_icon-image-position-x: -52px,
        @_icon-image-position-y: -26px,
        @_icon-image-position: after
   );
}

//  # Position for icon with image or sprite mixin variables
//
//  <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-image-position-x</th>
//        <td>@icon-image__position-x</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Horizontal starting position of icon image</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-image-position-y</th>
//        <td>@icon-image__position-y</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Vertical starting position of icon image</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-position</th>
//        <td>@icon__position</td>
//        <td class="vars_value">before</td>
//        <td class="vars_value">before | after</td>
//        <td>Position of the icon which is set for the element</td>
//      </tr>
//    </table>
//  </pre>

//  # Icon sprite position (with grid)
//  Mixin <code>.lib-icon-sprite-position()</code> is used to manage the position of sprite background image. It assumes the use of a single sprite image with individual images **placed on a regular grid**.
//  ```
//  <a href="#" class="example-icon-10"><span>icon text</span></a>
//  ```

.example-icon-10 {
    .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
    .lib-icon-sprite-position(4, 0);
}

//  # Icon sprite position variables
//
//  <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-sprite-position-x</th>
//        <td>@icon-sprite__position-x</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>The x coordinate of the desired image on the grid</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-sprite-position-y</th>
//        <td>@icon-sprite__position-y</td>
//        <td class="vars_value">0</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>The y coordinate of the desired image on the grid</td>
//      </tr>
//      <tr>
//        <th>@_icon-sprite-grid</th>
//        <td>@icon-sprite__grid</td>
//        <td class="vars_value">26px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>The size of the grid (in pixels) that the individal images are placed on</td>
//      </tr>
//      <tr>
//        <th>@_icon-sprite-position</th>
//        <td>@icon__position</td>
//        <td class="vars_value">before</td>
//        <td class="vars_value">before | after</td>
//        <td>Icon image position</td>
//      </tr>
//    </table>
//  </pre>

//  # Image/sprite icon size
//  Mixin <code>.lib-icon-image-size()</code> is used to change the image/sprite icon size
//  ```
//  <a href="#" class="example-icon-11"><span>icon-search</span></a>
//  ```

.example-icon-11 {
    .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
    .lib-icon-image-size(30px, 30px);
    &:before {
        background-color: #f1f1f1;
    }
}

//  # Image/sprite icon size variables
//
//  <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-image-width</th>
//        <td>@icon__width</td>
//        <td class="vars_value">26px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Icon image width</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-image-height</th>
//        <td>@icon__height</td>
//        <td class="vars_value">26px</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Icon image height</td>
//      </tr>
//      <tr>
//        <th>@_icon-image-position</th>
//        <td>@icon__position</td>
//        <td class="vars_value">before</td>
//        <td class="vars_value">before | after</td>
//        <td>Icon image position</td>
//      </tr>
//    </table>
//  </pre>
//
//  # Font icon
//  The <code>.lib-icon-font()</code> mixin is used to create icons using font icons. It has one mandatory parameter - <code>@_icon-font-content</code>. This parameter accepts the font icon code.
//
//  ```
//  <a href="#" class="example-icon-12"><span>icon-calendar</span></a>
//  ```

.example-icon-12 {
    .lib-icon-font(
        @icon-calendar,
        @_icon-font-size: 28px
   );
}

//  # Font icon variables
//
//  <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-font-content</th>
//        <td>-</td>
//        <td class="vars_value">&nbsp;</td>
//        <td class="vars_value">'' | icon code | icon variables</td>
//        <td>Font icon code</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-font</th>
//        <td>@icon-font</td>
//        <td class="vars_value">@icons__font-name</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>The icon font</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-size</th>
//        <td>@icon-font__size</td>
//        <td class="vars_value">inherit</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Font icon size</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-line-height</th>
//        <td>@icon-font__line-height</td>
//        <td class="vars_value">@icon-font__size</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Font icon line height</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-font-color</th>
//        <td>@icon-font__color</td>
//        <td class="vars_value">inherit</td>
//        <td class="vars_value">'' | inherit | color code</td>
//        <td>Font icon color</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-color-hover</th>
//        <td>@icon-font__color-hover</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | inherit | color code</td>
//        <td>Font icon color - hover state</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-color-active</th>
//        <td>@icon-font__color-active</td>
//        <td class="vars_value">false</td>
//        <td class="vars_value">'' | inherit | color code</td>
//        <td>Font icon color - active state</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-font-margin</th>
//        <td>@icon-font__margin</td>
//        <td class="vars_value">@icon__margin</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Font icon margin</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-font-vertical-align</th>
//        <td>@icon-font__vertical-align</td>
//        <td class="vars_value" nowrap="nowrap">@icon__vertical-align</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Font icon vertical align</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-font-position</th>
//        <td>@icon-font__position</td>
//        <td class="vars_value">@icon__position</td>
//        <td class="vars_value">before | after</td>
//        <td>Font icon position</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-text-hide</th>
//        <td>@icon-font__text-hide</td>
//        <td class="vars_value">@icon__text-hide</td>
//        <td class="vars_value">true | false</td>
//        <td>The text of the element is replaced with the icon(true), or the icon is on the side of the text (false)</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-display</th>
//        <td>@icon-font__display</td>
//        <td class="vars_value">inline-block</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>The 'display' property of the icon container</td>
//      </tr>
//    </table>
//  </pre>

//  # Change the size of font icon
//  The <code>.lib-icon-font-size()</code> mixin is used to change size of the font icon which is already defined. The mixin generates only new font size and line height without any other options. @_icon-font-position variable is used to define the position of icon (before or after the element) which we want to set font size of.
//
//  ```
//  <a href="#" class="example-icon-13"><span>icon-calendar</span></a>
//  ```

.example-icon-13 {
    .lib-icon-font(@icon-calendar);
    .lib-icon-font-size(
        @_icon-font-size: 26px
   );
}

//  # Change the size of font icon variables
//
//  <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-font-size</th>
//        <td>@icon-font__size</td>
//        <td class="vars_value">inherit</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Font icon font size</td>
//      </tr>
//      <tr>
//        <th nowrap="nowrap">@_icon-font-line-height</th>
//        <td>@icon-font__line-height</td>
//        <td class="vars_value">@icon-font__size</td>
//        <td class="vars_value">'' | false | value</td>
//        <td>Font icon line height</td>
//      </tr>
//      <tr>
//        <th>@_icon-font-position</th>
//        <td>@icon-font__position</td>
//        <td class="vars_value">before</td>
//        <td class="vars_value">before | after</td>
//        <td>Font icon - icon position</td>
//      </tr>
//    </table>
//  </pre>
//
//  # Hide icon text
//  The <code>.lib-icon-text-hide()</code> mixin can be used separately to hide text of an element that has an icon text. This mixin accepts no variables.
//
//  ```
//  <a href="#" class="example-icon-14"><span>icon-calendar</span></a>
//  ```

.example-icon-14 {
    .lib-icon-font(
        @icon-envelope,
        @_icon-font-size: 26px
   );
    .lib-icon-text-hide();
}

// # Sprite and font icons for Blank theme
//  You can use the icons designed to our Blank theme, which are also available in two variants: sprite and font
// ##Icons using sprite
//  ```
// <ul class="icons-image-list">
//     <li>
//         <span class="icon-search"><span>icon-search</span></span>
//     </li>
//     <li>
//         <span class="icon-cart"><span>icon-cart</span></span>
//     </li>
//     <li>
//         <span class="icon-arrow-down"><span>icon-arrow-down</span></span>
//     </li>
//     <li>
//         <span class="icon-arrow-up"><span>icon-arrow-up</span></span>
//     </li>
//     <li>
//         <span class="icon-grid"><span>icon-grid</span></span>
//     </li>
//     <li>
//         <span class="icon-list"><span>icon-list</span></span>
//     </li>
//     <li>
//         <span class="icon-remove"><span>icon-remove</span></span>
//     </li>
//     <li>
//         <span class="icon-star"><span>icon-star</span></span>
//     </li>
//     <li>
//         <span class="icon-pointer-down"><span>icon-pointer-down</span></span>
//     </li>
//     <li>
//         <span class="icon-pointer-up"><span>icon-pointer-up</span></span>
//     </li>
//     <li>
//         <span class="icon-pointer-left"><span>icon-pointer-left</span></span>
//     </li>
//     <li>
//         <span class="icon-pointer-right"><span>icon-pointer-right</span></span>
//     </li>
//     <li>
//         <span class="icon-compare-empty"><span>icon-compare-empty</span></span>
//     </li>
//     <li>
//         <span class="icon-compare-full"><span>icon-compare-full</span></span>
//     </li>
//     <li>
//         <span class="icon-wishlist-empty"><span>icon-wishlist-empty</span></span>
//     </li>
//     <li>
//         <span class="icon-wishlist-full"><span>icon-wishlist-full</span></span>
//     </li>
//     <li>
//         <span class="icon-update"><span>icon-update</span></span>
//     </li>
//     <li>
//         <span class="icon-collapse"><span>icon-collapse</span></span>
//     </li>
//     <li>
//         <span class="icon-expand"><span>icon-expand</span></span>
//     </li>
//     <li>
//         <span class="icon-menu"><span>icon-menu</span></span>
//     </li>
//     <li>
//         <span class="icon-prev"><span>icon-prev</span></span>
//     </li>
//     <li>
//         <span class="icon-next"><span>icon-next</span></span>
//     </li>
//     <li>
//         <span class="icon-settings"><span>icon-settings</span></span>
//     </li>
//     <li>
//         <span class="icon-info"><span>icon-info</span></span>
//     </li>
//     <li>
//         <span class="icon-checkmark"><span>icon-checkmark</span></span>
//     </li>
//     <li>
//         <span class="icon-calendar"><span>icon-calendar</span></span>
//     </li>
//     <li>
//         <span class="icon-comment"><span>icon-comment</span></span>
//     </li>
//     <li>
//         <span class="icon-comment-reflected"><span>icon-comment-reflected</span></span>
//     </li>
//     <li>
//         <span class="icon-envelope"><span>icon-envelope</span></span>
//     </li>
//     <li>
//         <span class="icon-warning"><span>icon-warning</span></span>
//     </li>
//     <li>
//         <span class="icon-trash"><span>icon-trash</span></span>
//     </li>
//     <li>
//         <span class="icon-flag"><span>icon-flag</span></span>
//     </li>
//     <li>
//         <span class="icon-location"><span>icon-location</span></span>
//     </li>
//     <li>
//         <span class="icon-up"><span>icon-up</span></span>
//     </li>
//     <li>
//         <span class="icon-down"><span>icon-down</span></span>
//     </li>
// </ul>
//  ```
//
// ## Icons using font
//  ```
// <ul class="icons-font-list">
//     <li>
//         <span class="icon-wishlist-full" data-icon="&#xe600"><span>@icon-wishlist-full</span></span>
//     </li>
//     <li>
//         <span class="icon-wishlist-empty" data-icon="&#xe601"><span>@icon-wishlist-empty</span></span>
//     </li>
//     <li>
//         <span class="icon-warning" data-icon="&#xe602"><span>@icon-warning</span></span>
//     </li>
//     <li>
//         <span class="icon-update" data-icon="&#xe603"><span>@icon-update</span></span>
//     </li>
//     <li>
//         <span class="icon-trash" data-icon="&#xe604"><span>@icon-trash</span></span>
//     </li>
//     <li>
//         <span class="icon-star" data-icon="&#xe605"><span>@icon-star</span></span>
//     </li>
//     <li>
//         <span class="icon-settings" data-icon="&#xe606"><span>@icon-settings</span></span>
//     </li>
//     <li>
//         <span class="icon-next" data-icon="&#xe608"><span>@icon-next</span></span>
//     </li>
//     <li>
//         <span class="icon-menu" data-icon="&#xe609"><span>@icon-menu</span></span>
//     </li>
//     <li>
//         <span class="icon-location" data-icon="&#xe60a"><span>@icon-location</span></span>
//     </li>
//     <li>
//         <span class="icon-list" data-icon="&#xe60b"><span>@icon-list</span></span>
//     </li>
//     <li>
//         <span class="icon-info" data-icon="&#xe60c"><span>@icon-info</span></span>
//     </li>
//     <li>
//         <span class="icon-grid" data-icon="&#xe60d"><span>@icon-grid</span></span>
//     </li>
//     <li>
//         <span class="icon-checkmark" data-icon="&#xe610"><span>@icon-checkmark</span></span>
//     </li>
//     <li>
//         <span class="icon-cart" data-icon="&#xe611"><span>@icon-cart</span></span>
//     </li>
//     <li>
//         <span class="icon-calendar" data-icon="&#xe612"><span>@icon-calendar</span></span>
//     </li>
//     <li>
//         <span class="icon-arrow-up" data-icon="&#xe613"><span>@icon-arrow-up</span></span>
//     </li>
//     <li>
//         <span class="icon-arrow-down" data-icon="&#xe614"><span>@icon-arrow-down</span></span>
//     </li>
//     <li>
//         <span class="icon-search" data-icon="&#xe615"><span>@icon-search</span></span>
//     </li>
//     <li>
//         <span class="icon-remove" data-icon="&#xe616"><span>@icon-remove</span></span>
//     </li>
//     <li>
//         <span class="icon-prev" data-icon="&#xe617"><span>@icon-prev</span></span>
//     </li>
//     <li>
//         <span class="icon-pointer-down" data-icon="&#xe607"><span>@icon-pointer-down</span></span>
//     </li>
//     <li>
//         <span class="icon-pointer-up" data-icon="&#xe618"><span>@icon-pointer-up</span></span>
//     </li>
//     <li>
//         <span class="icon-pointer-left" data-icon="&#xe61a"><span>@icon-pointer-left</span></span>
//     </li>
//     <li>
//         <span class="icon-pointer-right" data-icon="&#xe619"><span>@icon-pointer-right</span></span>
//     </li>
//     <li>
//         <span class="icon-flag" data-icon="&#xe61b"><span>@icon-flag</span></span>
//     </li>
//     <li>
//         <span class="icon-collapse" data-icon="&#xe60f"><span>@icon-collapse</span></span>
//     </li>
//     <li>
//         <span class="icon-expand" data-icon="&#xe61c"><span>@icon-expand</span></span>
//     </li>
//     <li>
//         <span class="icon-envelope" data-icon="&#xe61d"><span>@icon-envelope</span></span>
//     </li>
//     <li>
//         <span class="icon-compare-empty" data-icon="&#xe61f"><span>@icon-compare-empty</span></span>
//     </li>
//     <li>
//         <span class="icon-compare-full" data-icon="&#xe61e"><span>@icon-compare-full</span></span>
//     </li>
//     <li>
//         <span class="icon-comment" data-icon="&#xe620"><span>@icon-comment</span></span>
//     </li>
//     <li>
//         <span class="icon-comment-reflected" data-icon="&#xe60e"><span>@icon-comment-reflected</span></span>
//     </li>
//     <li>
//         <span class="icon-up" data-icon="&#xe621"><span>@icon-up</span></span>
//     </li>
//     <li>
//         <span class="icon-down" data-icon="&#xe622"><span>@icon-down</span></span>
//     </li>
//     <li>
//         <span class="icon-arrow-up-thin" data-icon="&#xe623"><span>@icon-arrow-up-thin</span></span>
//     </li>
//     <li>
//         <span class="icon-arrow-right-thin" data-icon="&#xe624"><span>@icon-arrow-right-thin</span></span>
//     </li>
//     <li>
//         <span class="icon-arrow-left-thin" data-icon="&#xe625"><span>@icon-arrow-left-thin</span></span>
//     </li>
//     <li>
//         <span class="icon-arrow-down-thin" data-icon="&#xe626"><span>@icon-arrow-down-thin</span></span>
//     </li>
//     <li>
//         <span class="icon-arrow-left-thin" data-icon="&#xe628"><span>@icon-gift-registry</span></span>
//     </li>
//     <li>
//         <span class="icon-arrow-down-thin" data-icon="&#xe629"><span>@icon-present</span></span>
//     </li>
// </ul>
//  ```

.icons-image-list {
    list-style: none;
    padding: 0;
    li {
        float: left;
        width: 33%;
        > span {
            .lib-icon-image(@_icon-image: '@{baseDir}images/blank-theme-icons.png');
        }
        .icon-search {
            .lib-icon-sprite-position(0, 0);
        }
        .icon-cart {
            .lib-icon-sprite-position(1, 0);
        }
        .icon-arrow-down {
            .lib-icon-sprite-position(2, 0);
        }
        .icon-arrow-up {
            .lib-icon-sprite-position(3, 0);
        }
        .icon-grid {
            .lib-icon-sprite-position(4, 0);
        }
        .icon-list {
            .lib-icon-sprite-position(5, 0);
        }
        .icon-remove {
            .lib-icon-sprite-position(6, 0);
        }
        .icon-star {
            .lib-icon-sprite-position(7, 0);
        }
        .icon-pointer-down {
            .lib-icon-sprite-position(8, 0);
        }
        .icon-pointer-up {
            .lib-icon-sprite-position(9, 0);
        }
        .icon-pointer-left {
            .lib-icon-sprite-position(10, 0);
        }
        .icon-pointer-right {
            .lib-icon-sprite-position(11, 0);
        }
        .icon-compare-empty {
            .lib-icon-sprite-position(0, 1);
        }
        .icon-compare-full {
            .lib-icon-sprite-position(1, 1);
        }
        .icon-wishlist-empty {
            .lib-icon-sprite-position(2, 1);
        }
        .icon-wishlist-full {
            .lib-icon-sprite-position(3, 1);
        }
        .icon-update {
            .lib-icon-sprite-position(4, 1);
        }
        .icon-collapse {
            .lib-icon-sprite-position(5, 1);
        }
        .icon-expand {
            .lib-icon-sprite-position(6, 1);
        }
        .icon-menu {
            .lib-icon-sprite-position(7, 1);
        }
        .icon-prev {
            .lib-icon-sprite-position(8, 1);
        }
        .icon-next {
            .lib-icon-sprite-position(9, 1);
        }
        .icon-settings {
            .lib-icon-sprite-position(10, 1);
        }
        .icon-info {
            .lib-icon-sprite-position(11, 1);
        }
        .icon-checkmark {
            .lib-icon-sprite-position(0, 2);
        }
        .icon-calendar {
            .lib-icon-sprite-position(1, 2);
        }
        .icon-comment {
            .lib-icon-sprite-position(2, 2);
        }
        .icon-comment-reflected {
            .lib-icon-sprite-position(3, 2);
        }
        .icon-envelope {
            .lib-icon-sprite-position(4, 2);
        }
        .icon-warning {
            .lib-icon-sprite-position(5, 2);
        }
        .icon-trash {
            .lib-icon-sprite-position(6, 2);
        }
        .icon-flag {
            .lib-icon-sprite-position(7, 2);
        }
        .icon-location {
            .lib-icon-sprite-position(8, 2);
        }
        .icon-up {
            .lib-icon-sprite-position(9, 2);
        }
        .icon-down {
            .lib-icon-sprite-position(10, 2);
        }
    }
}

@icon-wishlist-full: '\e600';
@icon-wishlist-empty: '\e601';
@icon-warning: '\e602';
@icon-update: '\e603';
@icon-trash: '\e604';
@icon-star: '\e605';
@icon-settings: '\e606';
@icon-pointer-down: '\e607';
@icon-next: '\e608';
@icon-menu: '\e609';
@icon-location: '\e60a';
@icon-list: '\e60b';
@icon-info: '\e60c';
@icon-grid: '\e60d';
@icon-comment-reflected: '\e60e';
@icon-collapse: '\e60f';
@icon-checkmark: '\e610';
@icon-cart: '\e611';
@icon-calendar: '\e612';
@icon-arrow-up: '\e613';
@icon-arrow-down: '\e614';
@icon-search: '\e615';
@icon-remove: '\e616';
@icon-prev: '\e617';
@icon-pointer-up: '\e618';
@icon-pointer-right: '\e619';
@icon-pointer-left: '\e61a';
@icon-flag: '\e61b';
@icon-expand: '\e61c';
@icon-envelope: '\e61d';
@icon-compare-full: '\e61e';
@icon-compare-empty: '\e61f';
@icon-comment: '\e620';
@icon-up: '\e621';
@icon-down: '\e622';
@icon-arrow-up-thin: '\e623';
@icon-arrow-right-thin: '\e624';
@icon-arrow-left-thin: '\e625';
@icon-arrow-down-thin: '\e626';

.icons-font-list {
    list-style: none;
    padding: 0;
    li {
        float: left;
        width: 25%;
        margin-bottom: 35px;
        text-align: center;
        > span {
            .lib-icon-font('', @_icon-font-size: 34px);
            &:before {
                content: attr(data-icon);
                margin: 0 auto;
                display: block;
            }
        }
    }
}