eBay Skin — for DS6

@ebay/skin

Skin is eBay's official CSS framework and is distributed via NPM under the @ebay/skin package name.

To use Skin, the package should be added as a dependency in your project's package.json file.

{
    "dependencies": {
      "@ebay/skin": "^6"
    }
}

Lasso

Skin is optimised for use with Lasso.js - an advanced JavaScript module bundler, asset pipeline and optimizer.

Add @ebay/skin as a dependency in your project's browser.json file to include the entire set of Skin modules.

{
    "dependencies": [
        "@ebay/skin"
    ]
}

Or, alternatively, by specifying modules on a per-need basis.

{
    "dependencies": [
        "@ebay/skin/less",
        "@ebay/skin/global",
        "@ebay/skin/button"
    ]
}

Flags

To opt into the latest DS6 design system, you must enable the skin-ds6 flag.

myLasso.lassoPage({
    flags: ['skin-ds6']
});

Or, alternatively, using the Marko Taglib.

<lasso-page flags=['skin-ds6']>
   ...
</lasso-page>

CDN

Skin is also available via the following CDN link.

https://ir.ebaystatic.com/cr/v/c1/skin/v6.3.3/ds6/skin.min.css

@ebay/skin/global

Font Family

Applications on Node.js stack will not receive the eBay Market Sans font as the default font. Applications must use the ebay-font loader.

Websites utilising Skin via CDN will have the eBay Market Sans font as the default font.

Paragraph without Market Sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Paragraph with Market Sans

Link States

The states below are hardcoded for the purpose of this demo.

@ebay/skin/less

The LESS module contains variables and mixins.

NOTE: this module requires the lasso-less plugin in your project's dependencies.

Typography

.ds6-typography-giant-2
.ds6-typography-giant-1
.ds6-typography-large-2-bold
.ds6-typography-large-2
.ds6-typography-large-2-secondary
.ds6-typography-large-1-bold
.ds6-typography-large-1
.ds6-typography-large-1-secondary
.ds6-typography-medium-bold
.ds6-typography-medium
.ds6-typography-medium-secondary
.ds6-typography-regular-bold
.ds6-typography-regular
.ds6-typography-regular-secondary
.ds6-typography-small-bold
.ds6-typography-small
.ds6-typography-small-secondary

Color Palette

@ds6-color-y1 (#fcf2bd)
@ds6-color-y2 (#f7e376)
@ds6-color-y3 (#fbcd25)
@ds6-color-y4 (#f7b100)
@ds6-color-y5 (#e58c02)
@ds6-color-y6 (#aa5404)
@ds6-color-y7 (#592e13)
@ds6-color-o1 (#ffdec7)
@ds6-color-o2 (#feb786)
@ds6-color-o3 (#ff8559)
@ds6-color-o4 (#ff6932)
@ds6-color-o5 (#db3c07)
@ds6-color-o6 (#b03005)
@ds6-color-o7 (#5c1b05)
@ds6-color-r1 (#ffd1dd)
@ds6-color-r2 (#ffa2b6)
@ds6-color-r3 (#ff6383)
@ds6-color-r4 (#e62048)
@ds6-color-r5 (#c4003a)
@ds6-color-r6 (#a00739)
@ds6-color-r7 (#680226)
@ds6-color-m1 (#fad8f0)
@ds6-color-m2 (#f5a0d9)
@ds6-color-m3 (#ea5fbc)
@ds6-color-m4 (#d11da4)
@ds6-color-m5 (#a60d8a)
@ds6-color-m6 (#82187c)
@ds6-color-m7 (#500750)
@ds6-color-b1 (#c5e5fb)
@ds6-color-b2 (#93c9ff)
@ds6-color-b3 (#659eff)
@ds6-color-b4 (#3665f3)
@ds6-color-b5 (#382aef)
@ds6-color-b6 (#2b0eaf)
@ds6-color-b7 (#121258)
@ds6-color-t1 (#c2f2ef)
@ds6-color-t2 (#71e3e2)
@ds6-color-t3 (#1dcbca)
@ds6-color-t4 (#02a2ac)
@ds6-color-t5 (#01718f)
@ds6-color-t6 (#0e4a6c)
@ds6-color-t7 (#00364f)
@ds6-color-g1 (#ccfdce)
@ds6-color-g2 (#9ef4a6)
@ds6-color-g3 (#5ee471)
@ds6-color-g4 (#3ac952)
@ds6-color-g5 (#119c4b)
@ds6-color-g6 (#157a40)
@ds6-color-g7 (#064d2f)
@ds6-color-l1 (#f4fabe)
@ds6-color-l2 (#e9f577)
@ds6-color-l3 (#c9e43b)
@ds6-color-l4 (#accf02)
@ds6-color-l5 (#86b300)
@ds6-color-l6 (#4b7d06)
@ds6-color-l7 (#364f03)
@ds6-color-white (#fff)
@ds6-color-grey1 (#ebebeb)
@ds6-color-grey2 (#c8c8c8)
@ds6-color-grey3 (#8a8a8a)
@ds6-color-grey4 (#6e6e6e)
@ds6-color-grey5 (#41413f)
@ds6-color-black (#111820)

Product Usage

@ds6-color-text-default
@ds6-color-text-secondary
@ds6-color-link-default
@ds6-color-link-visited
@ds6-color-information-background
@ds6-color-badge
@ds6-color-star
@ds6-color-warning-background
@ds6-color-critical-text
@ds6-color-critical-background
@ds6-color-confirmation-text
@ds6-color-confirmation-background
@ds6-color-background-default

@ebay/skin/badge

A badge is a visual indicator added to an element to convey quantity, newness or both. Badges are intended to remind a user of previous actions taken, or to alert them of new actions that they should consider.

Default Badge

The default badge contains the basic, base styles. A role and aria-label are added for assistive technology.

<span class="badge" role="img" aria-label="1 notification">1</span>

A badge can be placed inside of a menu item and it will receive the appropriate margin. Note that the aria-label is now moved to the menuitem role.

<span class="menu">
    <div class="menu__items" role="menu">
        <div aria-label="Item 1 (3 notifications)" class="menu__item" role="menuitem">
            <span aria-hidden="true">Item 1<span class="badge">3</span></span>
        </div>
        <div aria-label="Item 2 (77 notifications)" class="menu__item" role="menuitem">
            <span aria-hidden="true">Item 2<span class="badge">77</span></span>
        </div>
        <div class="menu__item" role="menuitem">
            <span>Item 3</span>
        </div>
    </div>
</span>

Icon Button Badge

A badge can be placed inside of an icon button and it will receive the appropriate positioning. Note that the aria-label is now moved to the button role.

The button element requires an additional icon-btn--badged modifier.

<button aria-label="Menu (4 notifications)" class="icon-btn icon-btn--badged" type="button">
    <svg aria-hidden="true" focusable="false" width="16" height="16">
        <use xlink:href="#icon-menu"></use>
    </svg>
    <span aria-hidden="true" class="badge">4</span>
</button>

@ebay/skin/breadcrumb

Breadcrumbs are a navigational landmark that let the user discover their current position in the site hierarchy and provide a means to navigate upwards through that hierarchy.

Typically, the last breadcrumb is the current page, therefore that link's href attribute is not relevant and can be removed.

<nav aria-labelledby="breadcrumbs-heading" class="breadcrumb" role="navigation">
    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
    <ul>
        <li><a href="https://www.ebay.com/">ebay</a></li>
        <li><a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a></li>
        <li><a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a></li>
        <li><a aria-current="location">Smart Watch Bands</a></li>
    </ul>
</nav>

If the last breadcrumb is not the current page, then that link must have a valid href.

<nav aria-labelledby="breadcrumbs-heading" class="breadcrumb" role="navigation">
    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
    <ul>
        <li><a href="https://www.ebay.com/">ebay</a></li>
        <li><a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a></li>
        <li><a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a></li>
    </ul>
</nav>

When performing client side navigation prefer using buttons instead of links like so.

<nav aria-labelledby="breadcrumbs-heading" class="breadcrumb" role="navigation">
    <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
    <ul>
        <li><button>ebay</button></li>
        <li><button>Cell Phones, Smart Watches &amp; Accessories</button></li>
        <li><button>Smart Watch Accessories</button></li>
        <li><button aria-current="location">Smart Watch Bands</button></li>
    </ul>
</nav>

Button

A button is typically used to trigger a JavaScript action (e.g. fetch results, open a dialog or expand a menu). In this case, the <button> tag is required.

A button may also be used to submit or reset a form. In this case use the <button> tag with type=submit or type=reset respectively. Use of the <input> tag is not currently supported.

Finally, a link may be styled to look like a button. We call this a fake button. In this case the <a> tag is required with a valid HREF attribute.

Raw Button
Regular Button
Primary Button
Secondary Button
Small Button
Large Button
Extra Large Button
Fluid Button
Disabled Button
Partially Disabled Button
Icon Button
Expand Button

Raw Button

Use the raw button as the base to build custom modifiers. The raw button does not define any styles for states such as disabled, invalid, readonly, etc.

Link

<button class="btn">Button</button>
<a class="fake-btn" href="http://www.ebay.com">Link</a>

Regular Button

Use the regular modifier to create the regular button.

Link

<button class="btn btn--regular">Button</button>
<a class="fake-btn fake-btn--regular" href="http://www.ebay.com">Link</a>

Primary Button

Use the primary block modifier to create a primary button style.

Link

<button class="btn btn--primary">Button</button>
<a class="fake-btn fake-btn--primary" href="http://www.ebay.com">Link</a>

Secondary Button

Use the secondary block modifier to create a secondary button style.

Link

<button class="btn btn--secondary">Button</button>
<a class="fake-btn fake-btn--secondary" href="http://www.ebay.com">Link</a>

Disabled Button

The disabled attribute is required to fully disable a button tag.

<button class="btn btn--primary" type="button" disabled>Primary Button</button>
<button class="btn btn--secondary" type="button" disabled>Secondary Button</button>

Remove the href attribute to fully disable an anchor tag.

Primary Link Secondary Link

<a class="fake-btn fake-btn--primary">Primary Link</a>
<a class="fake-btn fake-btn--secondary">Secondary Link</a>

Partially Disabled Button

Partially disabled buttons are visually and aurally identifiable as disabled, but remain keyboard focusable.

Partially disabled buttons can vastly simplify keyboard focus management logic in situations where the button may frequently toggle back and forth between enabled and disabled (e.g. pagination or carousel 'bookend' buttons).

The aria-disabled state is required for partially disabled buttons.

<button aria-disabled="true" class="btn btn--primary" type="button">Prev</button>
<button aria-disabled="true" class="btn btn--primary" type="button">Next</button>

Fluid Button

Use the btn--fluid modifier to fill the entire width of the parent element.

<button class="btn btn--primary btn--fluid" type="button">Button</button>

Small Button

DS4 small buttons are no longer supported and will default to regular buttons in DS6.

Large Button

Use the btn--large size modifier to create a large button style.

<button class="btn btn--primary btn--large" type="button">Button</button>

Extra-Large Button

DS4 extra large buttons are no longer supported and will default to large buttons in DS6.

Icon Button

Any foreground icon can be placed adjacent to the button text.

<button class="btn btn--primary">
    <span class="btn__cell">
        <svg aria-hidden="true" class="btn__icon" focusable="false" height="16" width="16">
            <use xlink:href="#icon-menu"></use>
        </svg>
        <span>Button</span>
    </span>
</button>

To flip position of text and icon, simply swap the DOM order.

<button class="btn btn--primary">
    <span class="btn__cell">
        <span>Button</span>
        <svg aria-hidden="true" class="btn__icon" focusable="false" height="16" width="16">
            <use xlink:href="#icon-menu"></use>
        </svg>
    </span>
</button>

Because the button cell uses flex box layout, it is fairly trivial to achieve alternate layouts, as in the example below.

<button class="btn btn--primary btn--fluid" type="button" style="padding: 0 16px;">
    <span class="btn__cell" style="justify-content: space-between">
        <span>Select</span>
        <span style="display: inline-flex;">
            <span>Any</span>
            <svg aria-hidden="true" class="btn__icon" focusable="false" width="8" height="8">
                <use xlink:href="#icon-chevron-down"></use>
            </svg>
        </span>
    </span>
</button>

Expand Button

Use the expand-btn base class on a button that expands (and collapses) content.

<button aria-expanded="false" class="expand-btn expand-btn--regular" type="button">
<span class="expand-btn__cell">
    <span>Expand</span>
    <span class="expand-btn__icon"></span>
</span>
</button>

<button aria-expanded="false" class="expand-btn expand-btn--primary expand-btn--legacy" type="button">
<span class="expand-btn__cell">
    <span>Expand</span>
    <span class="expand-btn__icon"></span>
</span>
</button>

Can be used with or without a text label, with background or foreground SVG.

<button aria-expanded="false" class="expand-btn expand-btn--secondary" aria-label="Expand/Collapse">
    <span class="expand-btn__icon"></span>
</button>

<button aria-expanded="false" class="expand-btn expand-btn--primary" aria-label="Expand/Collapse">
    <svg aria-hidden="true" class="expand-btn__icon" focusable="false" height="8" width="8">
        <use xlink:href="#icon-chevron-down"></use>
    </svg>
</button>

<button aria-expanded="false" class="expand-btn expand-btn--primary expand-btn--legacy expand-btn--no-text" aria-label="Expand/Collapse">
    <svg aria-hidden="true" class="expand-btn__icon" focusable="false" height="8" width="8">
        <use xlink:href="#icon-chevron-down"></use>
    </svg>
</button>

CTA Button

Takes users to another URL destination (i.e. it is a hyperlink, not actually a button).

Default Background

Button

<a class="cta-btn" href="http://www.ebay.com">
    <span class="cta-btn__cell">
        <span>Button</span>
        <svg aria-hidden="true" class="cta-btn__icon" focusable="false" height="8" width="8">
            <use xlink:href="#icon-arrow-right-bold"></use>
        </svg>
    </span>
</a>

Blue Background (B4)

Button

<a class="cta-btn cta-btn--b4" href="http://www.ebay.com">
    <span class="fake-btn__cell">
        <span>Button</span>
        <svg aria-hidden="true" class="cta-btn__icon" focusable="false" height="8" width="8">
            <use xlink:href="#icon-arrow-right-bold"></use>
        </svg>
    </span>
</a>

Red Background (R4)

Button

<a class="cta-btn cta-btn--r4" href="http://www.ebay.com">
    <span class="cta-btn__cell">
        <span>Button</span>
        <svg aria-hidden="true" class="cta-btn__icon" focusable="false" height="8" width="8">
            <use xlink:href="#icon-arrow-right-bold"></use>
        </svg>
    </span>
</a>

Purple Background (TBD)

Button

<a class="cta-btn cta-btn--purple" href="http://www.ebay.com">
    <span class="cta-btn__cell">
        <span>Button</span>
        <svg aria-hidden="true" class="cta-btn__icon" focusable="false" height="8" width="8">
            <use xlink:href="#icon-arrow-right-bold"></use>
        </svg>
    </span>
</a>

Button overflow behavior

Text of buttons with a fixed width (or max-width) will be truncated by default.

Button with a lot of text

<a class="cta-btn" href="http://www.ebay.com" style="max-width: 200px">
<span class="cta-btn__cell">
    <span>Button with a lot of text</span>
    <svg aria-hidden="true" class="cta-btn__icon" focusable="false" height="8" width="8">
        <use xlink:href="#icon-arrow-right-bold"></use>
    </svg>
</span>
</a>

@ebay/skin/checkbox

A checkbox is a form control that allows the user to toggle a choice on or off.

The purpose of a checkbox is to collect form data; therefore a checkbox should always be used in conjunction with a form, label and submit button.

Default Checkbox
Disabled Checkbox
Grouped Checkbox
Custom Checkbox

Default Checkbox

Use the checkbox base class to create a checkbox.

The checkbox is decoupled from it's text label to allow more flexibility in terms of layout. How and where you provide this label is up to you, but do not forget it!

<span class="checkbox">
    <input class="checkbox__control" type="checkbox" name="checkbox-default" />
    <span class="checkbox__icon"></span>
</span>

Disabled Checkbox

Use the disabled attribute to disable any checkbox input.

<span class="checkbox">
    <input class="checkbox__control" type="checkbox" name="checkbox-disabled" checked disabled  />
    <span class="checkbox__icon"></span>
</span>

Grouped Checkboxes

A group of checkboxes allows multi-select (unlike a group of radio buttons which enforces single-select).

A fieldset and legend are required in order to create the correct grouping semantics. Note that the Skin global module removes the default fieldset border and padding.

TIP: To stack checkboxes vertically instead of side-by-side, simply replace the span wrapper with a div wrapper.

Choose an Option Option 1 Option 2 Option 3

<fieldset>
    <legend>Choose an Option</legend>
    <span class="field">
        <span class="checkbox field__control">
            <input class="checkbox__control" id="group-checkbox-1" type="checkbox" value="1" name="checkbox-group" />
            <span class="checkbox__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-1">Option 1</label>
    </span>
    <span class="field">
        <span class="checkbox field__control">
            <input class="checkbox__control" id="group-checkbox-2" type="checkbox" value="2" name="checkbox-group" />
            <span class="checkbox__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-2">Option 2</label>
    </span>
    <span class="field">
        <span class="checkbox field__control">
            <input class="checkbox__control" id="group-checkbox-3" type="checkbox" value="3" name="checkbox-group" />
            <span class="checkbox__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-checkbox-3">Option 3</label>
    </span>
</fieldset>

Custom Checkbox

The default checkbox shown above uses an SVG background image, and therefore has a fixed colour. Inline SVG, while slightly more verbose, honours the CSS cascade, thus allowing any possible colour for the checkbox icon.

<span class="checkbox" style="color: #71c63e">
    <input class="checkbox__control" type="checkbox" />
    <span class="checkbox__icon" hidden>
        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
            <use xlink:href="#icon-checkbox-unchecked"></use>
        </svg>
        <svg aria-hidden="true" class="checkbox__checked" focusable="false">
            <use xlink:href="#icon-checkbox-checked"></use>
        </svg>
    </span>
</span>

NOTE: The hidden property ensures that the SVG icon is not visible alongside the native icon when the page is in a non-CSS state. This hidden property will be overriden by CSS.

The checkbox module can use any inline SVG for it's checked and unchecked states.

<span class="checkbox" style="color: #71c63e">
    <input class="checkbox__control" name="checkbox-custom-icon" type="checkbox" />
    <span class="checkbox__icon" hidden>
        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
            <use xlink:href="#icon-save"></use>
        </svg>
        <svg aria-hidden="true" class="checkbox__checked" focusable="false">
            <use xlink:href="#icon-save-selected"></use>
        </svg>
    </span>
</span>

Be careful when using a custom checkbox; the icon for each state must still give enough affordance to a user that it represents an interactive control.

@ebay/skin/color

Static sites that do not have access to the LESS variables can leverage the product palette via the color module class names.

color-text-default
color-text-secondary
color-link-default
color-link-visited
color-information-background
color-warning-background
color-critical-text
color-critical-background
color-confirmation-text
color-confirmation-background

@ebay/skin/combobox

An enhanced textbox that allows free text input, or selection from a predefined list of values, or a combination of both. Hence the term 'combo'.

Only limited expand & collapse behaviour has been implemented in these combobox examples. For detailed behaviour requirements, please visit the eBay MIND Pattern for Combobox.

Default Combobox

By default, no option in the list should be selected.

<span class="combobox">
    <span class="combobox__control">
        <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox1" />
        <span class="combobox__icon" aria-hidden="true"></span>
    </span>
    <div id="listbox1" class="combobox__options" role="listbox">
        <div class="combobox__option" role="option">
            <span>Option 1</span>
            <span class="combobox__status"></span>
        </div>
        <div class="combobox__option" role="option">
            <span>Option 2</span>
            <span class="combobox__status"></span>
        </div>
        <div class="combobox__option" role="option">
            <span>Option 3</span>
            <span class="combobox__status"></span>
        </div>
    </div>
</span>

The combobox overlay becomes automatically scrollable at a height of 400px.

Disabled Combobox

Apply the disabled property to disable the combobox.

<span class="combobox">
    <span class="combobox__control">
        <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox2" disabled />
        <span class="combobox__icon" aria-hidden="true"></span>
    </span>
    <div id="listbox2" class="combobox__options" role="listbox">
        <div class="combobox__option" role="option">
            <span>Option 1</span>
            <span class="combobox__status"></span>
        </div>
        <div class="combobox__option" role="option">
            <span>Option 2</span>
            <span class="combobox__status"></span>
        </div>
        <div class="combobox__option" role="option">
            <span>Option 3</span>
            <span class="combobox__status"></span>
        </div>
    </div>
</span>

Readonly Combobox

A readonly combobox is intended for use as a custom implementation of the native HTML select element. Unfortunately, a readonly combobox exhibits some UX issues on iOS, which is why for now we recommend using the listbox instead.

Apply the readonly property to create a readonly combobox.

By default, the first item should be selected if the user does not specify a selection. This matches the behaviour of a native HTML select element.

<span class="combobox">
    <span class="combobox__control">
        <input role="combobox" type="text" value="Option 1" aria-haspopup="listbox" aria-owns="listbox4" readonly />
        <span class="combobox__icon" aria-hidden="true"></span>
    </span>
    <div id="listbox4" class="combobox__options" role="listbox">
        <div class="combobox__option" role="option" aria-selected="true">
            <span>Option 1</span>
            <span class="combobox__status"></span>
        </div>
        <div class="combobox__option" role="option">
            <span>Option 2</span>
            <span class="combobox__status"></span>
        </div>
        <div class="combobox__option" role="option">
            <span>Option 3</span>
            <span class="combobox__status"></span>
        </div>
    </div>
</span>

@ebay/skin/dialog

A dialog is a child window spawned by the main web page or application. This window forms a new background layer in our design system topography.

A dialog must remain in a hidden state for all users and devices until called upon.

All dialogs have support for optional CSS transition effects. See dialog transitions section for more details.

Default Dialog

The default dialog is a lightbox.

The lightbox will have a margin of 15vh and automatically scales vertically.

<div role="dialog" aria-labelledby="dialog-title" class="dialog" hidden>
    <div class="dialog__window" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

Fill Dialog

Apply the dialog__window--fill modifier to have the lightbox fill at least 70% of the screen (centered vertically).

<div role="dialog" aria-labelledby="dialog-title" class="dialog" hidden>
    <div class="dialog__window dialog__window--fill" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

Left Panel Dialog

Apply the dialog__window--left modifier to have the dialog act as a left side panel (100vh height and aligned to the left side of the screen).

<div role="dialog" aria-labelledby="dialog-title" class="dialog" hidden>
    <div class="dialog__window dialog__window--left" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

Right Panel Dialog

Apply the dialog__window--right modifier to have the dialog act as a right side panel (100vh height and aligned to the right side of the screen).

<div role="dialog" aria-labelledby="dialog-title" class="dialog" hidden>
    <div class="dialog__window dialog__window--right" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

Fullscreen Panel Dialog

Apply the dialog__window--full modifier to have the dialog take up the entire viewport.

Having a mask on a fullscreen dialog doesn't typically make sense and can cause the animations to look a bit strange. You can disable the default background mask of the dialog by applying the dialog--no-mask modifier on the dialog element.

<div role="dialog" aria-labelledby="dialog-title" class="dialog dialog--no-mask" hidden>
    <div class="dialog__window dialog__window--full" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

Scrolling Panel Dialog

When you have a lot of content, the dialog will automatically handle scrolling for your.

<div role="dialog" aria-labelledby="dialog-title" class="dialog dialog--no-mask" hidden>
    <div class="dialog__window dialog__window--full" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ... 1</p>
            <p>Lorem ... 2</p>
            <p>(you get the idea)</p>
            <p>Lorem ... n</p>
            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

Dialog Transitions

Skin currently supports two types of dialog transition: fade and slide. Because CSS cannot transition an element to and from hidden (i.e. "display:none"), transitions are acheived using two classes applied during different stages of the animation. Before applying an animation class to the dialog component you must first apply the primer class which will be $name-init where $name is the base class. The dialog component has two different animation base classes dialog--show and dialog--hide.

Firstly the -init postfix must be applied to dialog component to prime animation. One animation frame later the -init postfix must be removed and the base class applied to start the animation. Finally once the animation has completed remove the base class.

An example implementation is shown below.

const dialogEl = document.querySelector(".dialog");
const windowEl = dialogEl.querySelector(".dialog__window");
const openBtnEl = document.querySelector("#dialog-open");
const closeBtnEl = dialogEl.querySelector(".dialog__close");

// Trigger dialog show animation.
openBtnEl.addEventListener("click", () => {
    dialogEl.classList.add("dialog--show-init");
    dialogEl.removeAttribute("hidden");

    requestAnimationFrame(() => requestAnimationFrame(() => {
        // Two RAFS to ensure this happens on the next animation frame.
        dialogEl.classList.remove("dialog--show-init");
        dialogEl.classList.add("dialog--show");

        windowEl.addEventListener("transitionend", () => {
            /**
             * The window animation is the longest, so we wait for it to
             * finish before removing the classes.
             */
            dialogEl.classList.remove("dialog--show");
        }, { once: true });
    }));
});

// Trigger dialog hide animation. (In the real world the dialog mask) should also be handled.
closeBtnEl.addEventListener("click", () => {
    dialogEl.classList.add("dialog--hide-init");
    dialogEl.setAttribute("hidden", "");

    requestAnimationFrame(() => requestAnimationFrame(() => {
        // Two RAFS to ensure this happens on the next animation frame.
        dialogEl.classList.remove("dialog--hide-init");
        dialogEl.classList.add("dialog--hide");

        windowEl.addEventListener("transitionend", () => {
            /**
             * The window animation is the longest, so we wait for it to
             * finish before removing the classes.
             */
            dialogEl.classList.remove("dialog--hide");
        }, { once: true });
    }));
});

Fade Transition

Any dialog window and mask can be faded in and out, using the dialog__window--fade modifier on the dialog__window and a dialog--mask-fade modifier on the dialog.

The default fade duration is 16ms.

<div role="dialog" aria-labelledby="dialog-title" class="dialog dialog--mask-fade" hidden>
    <div class="dialog__window dialog__window--fade" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>
                <a href="http://www.ebay.com">www.ebay.com</a>
            </p>
        </div>
    </div>
</div>

<div role="dialog" aria-labelledby="dialog-title" class="dialog dialog--no-mask" hidden>
    <div class="dialog__window dialog__window--full dialog__window--fade" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

Slide Transition

Any panel or fullscreen dialog can slide in and out, using the dialog__window--slide modifier on the dialog__window.

The slide transition duration is 32ms. An accompanying dialog--mask-fade-slow modifier on the dialog should also be applied. This slower fade matches the 32ms of the slide transition.

<div role="dialog" aria-labelledby="dialog-title" class="dialog dialog--mask-fade-slow" hidden>
    <div class="dialog__window dialog__window--left dialog__window--slide" role="document">
        <button aria-label="Close dialog" class="dialog__close" type="button">
            <span></span>
        </button>
        <div class="dialog__body">
            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
        </div>
    </div>
</div>

@ebay/skin/field

The field module facilitates the layout of a form control and it's associated label, plus any other applicable text or sub-controls (e.g. error text or help button).

Unstacked Field

The field__label & field__control elements are inline by default, taking up only as much horizontal space as they need.

Multiple fields can be laid out inline by using the span tag with field class, as per the example below.

Field 1 Field 2 Field 3

<span class="field">
    <label class="field__label" for="field1">Field 1</label>
    <span class="field__control textbox">
        <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
    </span>
</span>
<span class="field">
    <label class="field__label" for="field2">Field 2</label>
    <span class="field__control">
        <span class="select">
            <select name="field2" id="field2">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <span class="select__icon"></span>
        </span>
    </span>
</span>
<span class="field">
    <label class="field__label" for="field3">Field 3</label>
    <span class="field__control switch">
        <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
        <span class="switch__button"></span>
    </span>
</span>

Replace the span tag with a div tag to layout fields in blocks, as per the following example.

Field 1

Field 2

Field 3

Stacked Field

For a label stacked above the control, use the field__label--stacked element modifier.

Again, multiple fields can be laid out inline by using a span tag, as per the example below.

Field 1 Field 2 Field 3

<span class="field">
    <label class="field__label field__label--stacked" for="field1">Field 1</label>
    <span class="textbox">
        <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
    </span>
</span>
<span class="field">
    <label class="field__label field__label--stacked" for="field2">Field 2</label>
    <span class="field__control">
        <span class="select">
            <select name="field2" id="field2">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <span class="select__icon"></span>
        </span>
    </span>
</span>
<span class="field">
    <label class="field__label field__label--stacked">Field 3</label>
    <span class="field__control switch">
        <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
        <span class="switch__button"></span>
    </span>
</span>

Replace the span tag with a div tag to layout the stacked fields in blocks, as per the example below.

Field 1

Field 2

Field 3

Field Font-Size

The field label will honour any font-size cascade (so be careful if this is not your intention!).

Notice that form controls do not inherit the cascade. This is default browser behaviour.

Field 1 Field 2 Field 3

<span class="field" style="font-size: 18px;">
    <label class="field__label" for="email">Field 1</label>
    <span class="field__control textbox textbox--large">
        <input class="textbox__control" id="field1" type="text" placeholder="placeholder text" />
    </span>
</span>
<span class="field" style="font-size: 18px;">
    <label class="field__label" for="size">Field 2</label>
    <span class="field__control">
        <span class="select">
            <select name="size" id="size">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <span class="select__icon"></span>
        </span>
    </span>
</span>
<span class="field" style="font-size: 18px;">
    <label class="field__label" for="field3">Field 3</label>
    <span class="field__control switch">
        <input aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
        <span class="switch__button"></span>
    </span>
</span>

Disabled Field

The disabled control is conveyed using the disabled attribute. The value of a disabled control is not passed to the server.

Field 1 Field 2 Field 3

<span class="field">
    <label class="field__label" for="email">Field 1</label>
    <span class="field__control textbox">
        <input class="textbox__control" id="field1" type="text" value="placeholder text" disabled />
    </span>
</span>
<span class="field">
    <label class="field__label" for="size">Field 2</label>
    <span class="field__control">
        <span class="select">
            <select name="field2" id="field2" disabled>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <span class="select__icon"></span>
        </span>
    </span>
</span>
<span class="field">
    <label class="field__label" for="field3">Field 3</label>
    <span class="field__control switch">
        <input disabled aria-label="Switch Demo" class="switch__control" role="switch" type="checkbox" id="field3" />
        <span class="switch__button"></span>
    </span>
</span>

TIP: Disabled controls are exempt from WCAG colour contrast requirements.

Readonly Field

A readonly control is conveyed using the readonly attribute. The value of a readonly control is passed to the server.

Field 1 Field 2

<span class="field">
    <label class="field__label" for="email">Field 1</label>
    <span class="field__control textbox">
        <input class="textbox__control" id="field1" type="text" value="placeholder text" readonly />
    </span>
</span>
<span class="field">
    <label class="field__label" for="size">Field 2</label>
    <span class="field__control">
        <span class="select">
            <select name="field2" id="field2" readonly>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <span class="select__icon"></span>
        </span>
    </span>
</span>

Required Field

A required field is conveyed visually with an asterisk, and non-visually using the aria-required property.

Field 1 ^* Field 2 ^*

<span class="field">
    <label class="field__label" for="email">Field 1 <sup>*</sup></label>
    <span class="field__control textbox">
        <input aria-required="true" class="textbox__control" id="field1" type="text" placeholder="placeholder text">
    </span>
</div>
<span class="field">
    <label class="field__label" for="size">Field 2 <sup>*</sup></label>
    <span class="field__control">
        <span class="select">
            <select aria-required="true" id="field2">
                <option value="0" disabled selected>-select-</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <span class="select__icon"></span>
        </span>
    </span>
</span>

Invalid Field

An invalid control is conveyed visually via a combination of red outline and some other indicator (usually either text and/or an icon). The invalid state is conveyed non-visually using the aria-invalid state.

IMPORTANT: The example below shows the field with red border only. Do not forget that colour should not be used as the only visual means of conveying information. A description and/or icon is also required. See next section for more details.

Field 1 Field 2

<span class="field">
    <label class="field__label" for="email">Field 1</label>
    <span class="field__control textbox">
        <input aria-invalid="true" class="textbox__control" id="field1" type="text" placeholder="placeholder text">
    </span>
</div>
<span class="field">
    <label class="field__label" for="size">Field 2</label>
    <span class="field__control">
        <span class="select">
            <select aria-invalid="true" id="field2">
                <option value="0" disabled selected>-select-</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <span class="select__icon"></span>
        </span>
    </span>
</span>

Field Description

A field may have nearby text to describe additional instructions, status or validation error of the control.

The field__description element defines some minimal styling, but does not dictate location or layout. This element has modifiers for confirmation, information and priority, depending on the type of descriptive text (or icon).

TIP: The description element can be designated as an ARIA live-region if client-side updates occur.

Text on Side of Field

A description can be placed adjacent to any stacked or unstacked field simply by using an inline-level tag, such as span.

Field Label Field description or error

<span class="field">
    <label class="field__label" for="field1">Field Label</label>
    <span class="field__control textbox">
        <input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
    </span>
    <span class="field__description" id="field1-description">
        <span>Field description or error</span>
    </span>
</span>

Text Below Stacked Field

A description can be placed underneath a stacked field simply by using a block-level tag, such as div.

Field Label

Field description or error

<span class="field">
    <label class="field__label field__label--stacked" for="field1">Field Label</label>
    <div class="field__control textbox">
        <input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
    </div>
    <div class="field__description" id="field1-description">
        <span>Field description or error</span>
    </div>
</span>

Text Above or Below Unstacked Field

A description can be added directly above and/or below the control by utlising CSS table-layout via the field--table modifier and field__row elements.

Field description or error

Field Label

<span class="field field--table">
    <div class="field__row">
        <span><!-- empty cell--></span>
        <span class="field__description" id="field1-description">
            <span>Field description or error</span>
        </span>
    </div>
    <div class="field__row">
        <label class="field__label" for="field1">Field Label</label>
        <span class="textbox">
            <input aria-describedby="field1-description" class="textbox__control" id="field1" type="text" />
        </span>
    </div>
</span>

@ebay/skin/label

The label module consists of a "floating label" for textbox. Floating labels appear to sit inside the textbox when it has no value or focus, and sit above the textbox otherwise.

Floating Label with no Value

If the textbox has no value, the label can be positioned inside the textbox.

First Name

<span class="floating-label">
    <label class="floating-label__label" for="firstName">First Name</label>
    <span class="textbox">
        <input class="textbox__control textbox__control--underline" id="firstName" type="text" />
    </span>
</span>

Floating Label with Value

If the textbox has a value, the label must be positioned above the textbox.

Last Name

<span class="floating-label">
    <label class="floating-label__label" for="lastName">Last Name</label>
    <span class="textbox">
        <input class="textbox__control textbox__control--underline" id="lastName" type="text" value="Smith" />
    </span>
</span>

Floating Label with Placeholder

The placeholder always remains obscured until the textbox gains focus.

Date Of Birth

<span class="floating-label">
    <label class="floating-label__label" for="dob">Date Of Birth</label>
    <span class="textbox">
        <input class="textbox__control textbox__control--underline" id="dob" type="text" placeholder="MM/DD/YYYY" />
    </span>
</span>

Floating Label with Disabled Textbox

Use the disabled property & floating-label__label--disabled modifier on the input element and the label element respectively to disable the input.

First Name

<span class="floating-label">
    <label class="floating-label__label floating-label__label--disabled" for="firstName">First Name</label>
    <span class="textbox">
        <input class="textbox__control textbox__control--underline" id="firstName02" type="text" disabled />
    </span>
</span>

Floating Label with Invalid Textbox

Set the aria-invalid property to true to semantically and visually highlight the invalid state.

First Name

<span class="floating-label">
    <label class="floating-label__label" for="firstName">First Name</label>
    <span class="textbox">
        <input class="textbox__control textbox__control--underline" id="firstName03" type="text" aria-invalid="true" />
    </span>
</span>

Floating Label Transitions

By default, with only the base markup shown above, the label remains in a floating state above the input. This default state ensures that the label does not obscure the textbox value while we wait for JavaScript.

When JavaScript is ready, the label can be re-positioned inside the textbox by adding the floating-label__label--inline modifier class. By default, this re-positioning of label happens instantly, without a transition. Typically, we do not want to show transitions on the initial page render, as this might be too jarring and distracting for some users.

To opt into transitions after the initial render is complete, add the floating-label__label--animate modifier when the textbox receives focus.

The examples above use makeup-floating-label, a simple JavaScript module that adds the aforementioned logic. Feel free to use this module or use it as the basis to roll your own.

@ebay/skin/icon

The icon module allows direct access to the Skin iconography via the <svg> tag (i.e. foreground icons) or <span> tag (i.e. background icons).

@ebay/skin/icon/foreground

Foregound icons can inherit their colour via the CSS cascade; this behaviour can be useful when crafting custom buttons and controls.

To avoid gigantic icons when in a non-CSS (edge-case) state, we use the SVG width and height attributes to override the browser's default 300x150 size.

IMPORTANT: Skin removes all mouse and touch events on our SVG icons due to a bug in IE. To add events to these icons you should wrap them in another element and attach your events there.

<svg class="icon icon--arrow-left" focusable="false" height="24" width="24">
    <use xlink:href="#icon-arrow-left"></use>
</svg>

@ebay/skin/icon/background

Background icons have a fixed colour that cannot be changed via CSS.

IMPORTANT: this module contains a base64 encoded string for every icon in the set, therefore a significant increase in CSS payload will occur.

<span class="icon icon--arrow-left"></span>

List of available icons

Arrows

#icon-arrow-left

.icon--arrow-left

#icon-arrow-right

.icon--arrow-right

#icon-arrow-move

.icon--arrow-move

#icon-arrow-right-bold

.icon--arrow-right-bold

Chevrons

#icon-chevron-up

.icon--chevron-up

#icon-chevron-down

.icon--chevron-down

#icon-chevron-left

.icon--chevron-left

#icon-chevron-right

.icon--chevron-right

#icon-chevron-up-bold

.icon--chevron-up-bold

#icon-chevron-down-bold

.icon--chevron-down-bold

Filters

#icon-filter-grid

.icon--filter-grid

#icon-filter-single

.icon--filter-single

#icon-filter-list

.icon--filter-list

Forms

#icon-checkbox-unchecked

.icon--checkbox-unchecked

#icon-checkbox-checked

.icon--checkbox-checked

#icon-radio-unchecked

.icon--radio-unchecked

#icon-radio-checked

.icon--radio-checked

#icon-tick

.icon--tick

Navigation

#icon-menu

.icon--menu

#icon-close

.icon--close

#icon-cart

.icon--cart

#icon-notification

.icon--notification

#icon-search

.icon--search

#icon-search-bold

.icon--search-bold

#icon-overflow

.icon--overflow

Navigation support

#icon-bids

.icon--bids

#icon-categories

.icon--categories

#icon-deals

.icon--deals

#icon-download

.icon--download

#icon-event

.icon--event

#icon-help

.icon--help

#icon-home

.icon--home

#icon-info

.icon--info

#icon-messages

.icon--messages

#icon-pause

.icon--pause

#icon-play

.icon--play

#icon-profile

.icon--profile

#icon-purchases

.icon--purchases

#icon-selling

.icon--selling

#icon-settings

.icon--settings

#icon-watch

.icon--watch

#icon-following

.icon--following

#icon-send

.icon--send

#icon-refresh

.icon--refresh

#icon-add

.icon--add

#icon-sign-out

.icon--sign-out

#icon-user-profile

.icon--user-profile

#icon-flag

.icon--flag

Photo editor

#icon-photo-rotate

.icon--photo-rotate

#icon-photo-crop

.icon--photo-crop

#icon-photo-select-all

.icon--photo-select-all

#icon-photo-select-none

.icon--photo-select-none

#icon-photo-brightness

.icon--photo-brightness

#icon-photo-gallery

.icon--photo-gallery

#icon-photo-gallery-more

.icon--photo-gallery-more

#icon-delete

.icon--delete

Programs

#icon-top-seller

.icon--top-seller

#icon-fast-n-free

.icon--fast-n-free

Reviews

#icon-thumbs-up

.icon--thumbs-up

#icon-thumbs-up-selected

.icon--thumbs-up-selected

#icon-thumbs-down

.icon--thumbs-down

#icon-thumbs-down-selected

.icon--thumbs-down-selected

Save

#icon-save

.icon--save

#icon-save-bold

.icon--save-bold

#icon-save-selected

.icon--save-selected

Search

#icon-camera

.icon--camera

#icon-mic

.icon--mic

#icon-clear

.icon--clear

#icon-red-laser

.icon--red-laser

All inline icons

All background icons

@ebay/skin/link

The link module is a bit unusual in that it has no base class; this is because all anchor tags are styled, by default, by the global module.

The default link is used inline, amongst sentences and paragraphs of text. The underline gives visual affordance that this selection of text is a hyperlink. Color alone is not sufficient affordance in this context and therefore the underline is required and must not be removed.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a href="#">tempor incididunt</a> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <a href="#">ullamco laboris</a> nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate velit esse cillum</a> dolore eu fugiat nulla pariatur.</p>

Action Link

Action links remove the default underline, and therefore clickability must clearly and easily be perceivable via other visual affordances (e.g. call to action text, placement, or other such contextual clues).

Action links are commonly used within item tiles and provide a means to drill-down into additional aspects such as seller page and reviews.

See all 17 Reviews

<a class="action-link" href="https://www.ebay.com">See all 17 Reviews</a>

Nav Link

Nav links remove the default underline and colour. Again, clickability must clearly and easily be perceivable via other visual affordances (e.g. headings, spacing or other such contextual clues).

Nav links are typically used in blocks of navigation within sidebars, allowing the user to navigate the site hierarchy.

<nav aria-labelledby="nav-link-heading" role="navigation">
    <h2 id="nav-link-heading">Navigation</h2>
    <ul>
        <li><a class="nav-link" href="#">Item 1</a></li>
        <li><a class="nav-link" href="#">Item 2</a></li>
        <li><a class="nav-link" href="#">Item 3</a></li>
        <li><a class="nav-link" href="#">Item 4</a></li>
        <li><a class="nav-link" href="#">Item 5</a></li>
    </ul>
</nav>

@ebay/skin/listbox

A listbox is intended for use as a custom implementation of the native HTML select element.

Because the listbox pattern uses a button element, it's value will not be submitted along with other form data without the assistance of JavaScript.

NOTE: only limited expand & collapse behaviour has been implemented in the listbox examples. For detailed behaviour requirements, please visit the W3C's Collapsible Dropdown Listbox Example.

Default

By default, the first option should be selected if the user does not specify a selection. This matches the behaviour of a native HTML select element.

<span class="listbox">
    <button class="expand-btn expand-btn--regular" aria-expanded="false" aria-haspopup="listbox">
        <span class="expand-btn__cell">
            <span>Option 1</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="listbox__options" role="listbox" tabindex="-1">
        <div class="listbox__option" role="option">
            <span>Option 1</span>
            <span class="listbox__status"></span>
        </div>
        <div class="listbox__option" role="option">
            <span>Option 2</span>
            <span class="listbox__status"></span>
        </div>
        <div class="listbox__option" role="option">
            <span>Option 3</span>
            <span class="listbox__status"></span>
        </div>
    </div>
</span>

Selected State

An initial selection can be specified by applying the aria-selected state to a single option.

<span class="listbox">
    <button class="expand-btn expand-btn--regular" aria-expanded="false" aria-haspopup="listbox">
        <span class="expand-btn__cell">
            <span>Option 1</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="listbox__options" role="listbox" tabindex="-1">
        <div class="listbox__option" role="option">
            <span>Option 1</span>
            <span class="listbox__status"></span>
        </div>
        <div class="listbox__option" role="option" aria-selected="true">
            <span>Option 2</span>
            <span class="listbox__status"></span>
        </div>
        <div class="listbox__option" role="option">
            <span>Option 3</span>
            <span class="listbox__status"></span>
        </div>
    </div>
</span>

Borderless

Apply the expand-btn--borderless modifier to create a borderless listbox.

<span class="listbox">
    <button class="expand-btn expand-btn--regular" aria-expanded="false" aria-haspopup="listbox">
        <span class="expand-btn__cell">
            <span>Listbox</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="listbox__options" role="listbox" tabindex="-1">
        <div class="listbox__option" role="option">
            <span>Option 1</span>
            <span class="listbox__status"></span>
        </div>
        <div class="listbox__option" role="option">
            <span>Option 2</span>
            <span class="listbox__status"></span>
        </div>
        <div class="listbox__option" role="option">
            <span>Option 3</span>
            <span class="listbox__status"></span>
        </div>
    </div>
</span>

@ebay/skin/menu

A menu follows the principal of progressive disclosure, it keeps secondary commands hidden from view until needed.

A menu is not a form control. If you wish to submit form data, please consider checkbox, combobox, select, or radio instead.

Selecting a menu item command should update the page without a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the fake menu.

NOTE: Only limited expand & collapse behaviour has been implemented in these menu examples. For detailed behaviour requirements, please visit the eBay MIND Pattern for Menu and eBay MIND Pattern for Fake Menu.

The default menu is a stateless menu.

<span class="menu">
    <button class="expand-btn expand-btn--regular" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitem">
            <span>Item 1 with a long string</span>
        </div>
        <div class="menu__item" role="menuitem"><span>Item 2</span></div>
        <div class="menu__item" role="menuitem"><span>Item 3</span></div>
    </div>
</span>

For all menus, the overlay becomes automatically scrollable when it's height reaches 400px.

For single-select state, use role menuitemradio on each menu item.

<span class="menu">
    <button class="expand-btn expand-btn--regular" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Radio menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitemradio" aria-checked="true">
            <span>Radio menu item 1</span>
            <span class="menu__status"></span>
        </div>
        <div class="menu__item" role="menuitemradio" aria-checked="false">
            <span>Radio menu item 2</span>
            <span class="menu__status"></span>
        </div>
        <div class="menu__item" role="menuitemradio" aria-checked="false">
            <span>Radio menu item 3</span>
            <span class="menu__status"></span>
        </div>
    </div>
</span>

For multi-select state, use role menuitemcheckbox on each menu item.

<span class="menu">
    <button class="expand-btn expand-btn--regular" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Checkbox menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitemcheckbox" aria-checked="true" height="8" width="8">
            <span>Item 1</span>
            <span class="menu__status"></span>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="true" height="8" width="8">
            <span>Item 2</span>
            <span class="menu__status"></span>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="false" height="8" width="8">
            <span>Item 3</span>
            <span class="menu__status"></span>
        </div>
    </div>
</span>

A fake menu looks like a normal menu component, but it contains a list of hyperlinks (instead of a menu of menuitems) and thus behaves more like a navigational component.

A valid HREF attribute is required for all anchor tags. A value of "javascript" (or any such variant) is not a valid URL!

Use the aria-current attribute to denote the link that matches the current page URL (if applicable).

<span class="fake-menu">
    <button class="expand-btn expand-btn--regular" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Fake menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <ul class="fake-menu__items">
        <li>
            <a aria-current="page" class="fake-menu__item" href="http://www.ebay.com">
                <span>Link 1</span>
                <span class="fake-menu__status"></span>
            </a>
        </li>
        <li>
            <a href="http://www.ebay.com" class="fake-menu__item">Link 2</a>
        </li>
        <li>
            <a href="http://www.ebay.com" class="fake-menu__item">Link 3</a>
        </li>
        <li>
            <a href="http://www.ebay.com" class="fake-menu__item">Link 4</a>
        </li>
    </ul>
</span>

TIP: A fake menu can contain a mix of anchor tags and button tags.

Use the menu__items--fix-width or fake-menu__items--fix-width element modifier to fix the width of any menu items to the button width. This is useful in cases where the menu overlay needs to be constrained to the button width, usually to accomodate spacing and layout.

NOTE: The fix-width modifier only works on menus that use a span tag.

<span class="menu">
    <button class="expand-btn expand-btn--regular" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="menu__items menu__items--fix-width" role="menu">
        <div class="menu__item" role="menuitem">
            <span>Item 1 with a long string</span>
        </div>
        <div class="menu__item" role="menuitem">
            <span>Item 2</span>
        </div>
        <div class="menu__item" role="menuitem">
            <span>Item 3</span>
        </div>
    </div>
</span>

Use the expand-btn--borderless element modifier on the expand button to allow for a borderless version of the expand button.

<span class="menu">
    <button class="expand-btn  expand-btn--regular expand-btn--borderless" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Borderless menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitem">
            <span>Item 1</span>
        </div>
        <div class="menu__item" role="menuitem">
            <span>Item 2</span>
        </div>
        <div class="menu__item" role="menuitem">
            <span>Item 3</span>
        </div>
    </div>
</span>

Any menu can use any kind of button hierarchy as defined in the button module (e.g. .expand-btn--primary).

<span class="menu">
    <button class="expand-btn expand-btn--primary" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Primary Menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <!-- menu items omitted from example code -->
</span>

<span class="menu">
    <button class="expand-btn expand-btn--secondary" aria-expanded="false" aria-haspopup="true" type="button">
        <span class="expand-btn__cell">
            <span>Secondary Menu</span>
            <span class="expand-btn__icon"></span>
        </span>
    </button>
    <!-- menu items omitted from example code -->
</span>

For custom background and foreground colours, please replace the icon's span element with an inline SVG element:

<span class="menu">
    <button class="expand-btn" aria-expanded="false" aria-haspopup="true" style="background-color: #6a29b9; color: white" type="button">
        <span class="expand-btn__cell">
            <span>Custom Menu</span>
            <svg aria-hidden="true" class="expand-btn__icon" focusable="false">
                <use xlink:href="#icon-chevron-down-bold"></use>
            </svg>
        </span>
    </button>
</span>

A checkbox menu or radio menu can also leverage inline SVG for the checked state of each item:

<span class="menu">
    <button class="expand-btn" aria-expanded="false" aria-haspopup="true" style="background-color: #5ba71b; color: white" type="button">
        <span class="expand-btn__cell">
            <span>Custom Checkbox Menu</span>
            <svg aria-hidden="true" class="expand-btn__icon" focusable="false" height="8" width="8">
                <use xlink:href="#icon-chevron-down"></use>
            </svg>
        </span>
    </button>
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
            <span>Menu item 1</span>
            <svg aria-hidden="true" class="menu__status" focusable="false" height="8" width="8">
                <use xlink:href="#icon-confirmation"></use>
            </svg>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
            <span>Menu item 2</span>
            <svg aria-hidden="true" class="menu__status" focusable="false" height="8" width="8">
                <use xlink:href="#icon-confirmation"></use>
            </svg>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="false">
            <span>Menu item 3</span>
            <svg aria-hidden="true" class="menu__status" focusable="false" height="8" width="8">
                <use xlink:href="#icon-confirmation"></use>
            </svg>
        </div>
    </div>
</span>

Finally, any menu can be presented as a buttonless menu, simply by omitting the expand button.

<span class="menu">
    <div class="menu__items" role="menu">
        <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
            <span class="menu__status"></span>
            <span>Menu item 1</span>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
            <span class="menu__status"></span>
            <span>Menu item 2</span>
        </div>
        <div class="menu__item" role="menuitemcheckbox" aria-checked="false">
            <span class="menu__status"></span>
            <span>Menu item 3</span>
        </div>
    </div>
</span>

TIP: The positions of the status icon and label have been reversed in this example, simply by flipping their DOM order.

@ebay/skin/notice

The purpose of a notice is to convey the next course of action for a task or flow. The notice must be clear and concise, with minimum cognitive load.

A notice may appear at page-level or inline-level, with a status of priority, confirmation, or information.

Page Notice

A page-level notice typically appears prominently at the top of the page or directly above a module. To aid discoverabilty of such important content for assistive technology, we make each page notice a landmark region with heading.

Congrats! You just listed "Spam and Eggs From the Cow's Perspective (paperback)."

Error. Please take another look at the following:
Card number, Expiration date & Security code.

Good news! You get free shipping on your next pair of shoes! Learn more.

<section aria-labelledby="confirmation-status" class="page-notice page-notice--confirmation">
    <h2 class="page-notice__status" id="confirmation-status">
        <span aria-label="Confirmation" role="img"></span>
    </h2>
    <div class="page-notice__content">
        <p><strong>Congrats!</strong> You just listed <a href="#">"Spam and Eggs From the Cow's Perspective</a> (paperback)."</p>
    </div>
</section>

<section aria-labelledby="priority-status" class="page-notice page-notice--priority">
    <h2 class="page-notice__status" id="priority-status">
        <span aria-label="Priority" role="img"></span>
    </h2>
    <div class="page-notice__content">
        <p><strong>Error.</strong> Please take another look at the following:<br /><a href="#">Card number</a>, <a href="#">Expiration date</a> &amp; <a href="#">Security code</a>.</p>
    </div>
</section>

<section aria-labelledby="information-status" class="page-notice page-notice--information" role="region">
    <h2 class="page-notice__status" id="information-status">
        <span aria-label="Information" role="img"></span>
    </h2>
    <div class="page-notice__content">
        <p><strong>Good news!</strong> You get free shipping on your next pair of shoes! <a href="#">Learn more</a>.</p>
    </div>
</section>

Dismissable Page Notice

Append a button with class page-notice__close to create a dismissable page notice.

Congrats! You just listed "Spam and Eggs From the Cow's Perspective (paperback)."

You can check your listing or sell another item

Good news! You get free shipping on your next pair of shoes! Learn more.

<section aria-labelledby="confirmation-status" class="page-notice page-notice--confirmation">
    <h2 class="page-notice__status" id="confirmation-status">
        <span aria-label="Confirmation" role="img"></span>
    </h2>
    <div class="page-notice__content">
        <p><strong>Congrats!</strong> You just listed <a href="#">"Spam and Eggs From the Cow's Perspective</a> (paperback)."</p>
        <p>You can check <a href="#">your listing</a> or <a href="#">sell another item</a></p>
    </div>
    <button aria-label="Dismiss notice" class="page-notice__close">
        <span></span>
    </button>
</section>

<section aria-labelledby="information-status" class="page-notice page-notice--information" role="region">
    <h2 class="page-notice__status" id="information-status">
        <span aria-label="Information" role="img"></span>
    </h2>
    <div class="page-notice__content">
        <p><strong>Good news!</strong> You get free shipping on your next pair of shoes! <a href="#">Learn more</a>.</p>
    </div>
    <button aria-label="Dismiss notice" class="page-notice__close">
        <span></span>
    </button>
</section>

Call-to-Action Page Notice

Use an anchor or button tag to create a 'call-to-action' page notice tile.

IMPORTANT: A call-to-action can only have one action, i.e. a link or button tag cannot contain any nested links or buttons.

Congrats! You are the highest bidder!

 <span aria-labelledby="confirmation-status" role="region">
     <a href="http://www.ebay.com" class="page-notice page-notice--confirmation page-notice--fluid">
         <h2 class="page-notice__status">
             <span aria-label="Confirmation notice" id="confirmation-status" role="img"></span>
         </h2>
         <span class="page-notice__content page-notice__content--align-middle">
             <p>Congrats! You are the highest bidder!</p>
         </span>
         <span class="page-notice__cta"></span>
     </a>
 </span>

Inline Notice

An inline-level notice is typically located near a form field or user interface control.

Delivered on May 1, 2017

Tracking number: 93878473859376898908657567

Update your credit card.

Global Shipping Program transaction.

<div class="inline-notice inline-notice--confirmation">
    <span class="inline-notice__status">
        <span aria-label="Confirmation" role="img"></span>
    </span>
    <span class="inline-notice__content">
        <p>Delivered on May 1, 2017</p>
        <p>Tracking number: <a href="#">93878473859376898908657567</a></p>
    </span>
</div>

<div class="inline-notice inline-notice--priority">
    <span class="inline-notice__status">
        <span aria-label="Priority" role="img"></span>
    </span>
    <span class="inline-notice__content">
        <p>Update your credit card.</p>
    </span>
</div>

<div class="inline-notice inline-notice--information">
    <span class="inline-notice__status">
        <span aria-label="Information" role="img"></span>
    </span>
    <span class="inline-notice__content">
        <p>Global Shipping Program transaction.</p>
    </span>
</div>

@ebay/skin/pagination

Pagination allows a user to navigate back and forwards through a URL based dataset, or jump directly to any specific URL in that set.

Pagination links may update the results immediately on the client via AJAX, or on the server via a full page reload.

<nav class="pagination" aria-labelledby="pagination-heading" role="navigation">
    <span aria-live="polite" role="status">
        <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
    </span>
    <a aria-disabled="true" aria-label="Previous Page" class="pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
        <span></span>
    </a>
    <ol class="pagination__items">
        <li>
            <a aria-current="page" href="http://www.ebay.com/sch/i.html?_nkw=guitars" class="pagination__item">1</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2" class="pagination__item">2</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3" class="pagination__item">3</a>
        </li>
        ...
    </ol>
    <a aria-label="Next Page" class="pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
        <span></span>
    </a>
</nav>

When performing client side navigation prefer using buttons instead of links like so.

<nav class="pagination" aria-labelledby="pagination-heading" role="navigation">
    <span aria-live="polite" role="status">
        <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
    </span>
    <button aria-disabled="true" aria-label="Previous Page" class="pagination__previous">
        <span></span>
    </button>
    <ol class="pagination__items">
        <li>
            <button aria-current="page" class="pagination__item">1</button>
        </li>
        <li>
            <button class="pagination__item">2</button>
        </li>
        <li>
            <button class="pagination__item">3</button>
        </li>
        ...
    </ol>
    <button aria-label="Next Page" class="pagination__next">
        <span></span>
    </button>
</nav>

Fluid Pagination

Apply the pagination--fluid modifier class to fill all available horizontal space. Horizontal space will be distributed around each pagination item as necessary.

<nav class="pagination pagination--fluid" aria-labelledby="pagination-heading" role="navigation">
    <span aria-live="polite" role="status">
        <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
    </span>
    <a aria-disabled="true" aria-label="Previous Page" class="pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
        <span></span>
    </a>
    <ol class="pagination__items">
        <li>
            <a aria-current="page" href="http://www.ebay.com/sch/i.html?_nkw=guitars" class="pagination__item">1</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2" class="pagination__item">2</a>
        </li>
        <li>
            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=3" class="pagination__item">3</a>
        </li>
        ...
    </ol>
    <a aria-label="Next Page" class="pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
        <span></span>
    </a>
</nav>

NOTE: The heading need only be wrapped in an ARIA live-region if client-side pagination is implemented (i.e. partial page updates).

@ebay/skin/radio

A radio button is a form control that allows a user to select a single option from a group of choices.

The purpose of a radio button is to collect form data. Therefore, radio buttons should always be used in conjunction with a form, label and submit button.

Default Radio
Disabled Radio
Grouped Radio
Custom Radio

Default Radio

Use the radio base class to create a styled radio.

The radio is decoupled from it's text label to allow more flexibility in terms of layout. How and where you provide this label is up to you, but do not forget it!

<span class="radio">
    <input class="radio__control" type="radio" />
    <span class="radio__icon"></span>
</span>

Disabled Radio

Use the disabled attribute to disable any radio input.

<span class="radio">
    <input class="radio__control" type="radio" checked disabled />
    <span class="radio__icon"></span>
</span>

Grouped Radio

A group of radios enforces single-select (unlike a group of checkboxes which allows multi-select).

A fieldset and legend are required in order to create the correct grouping semantics. Note that the Skin global module removes the default fieldset border and padding.

TIP: To stack radio buttons vertically instead of side-by-side, simply replace the span wrapper with a div wrapper.

Choose an Option Option 1 Option 2 Option 3

<fieldset>
    <legend>Choose an Option</legend>
    <span class="field">
        <span class="field__control radio">
            <input class="radio__control" id="group-radio-1" type="radio" value="1" name="radio-group" />
            <span class="radio__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-radio-1">Option 1</label>
    </span>
    <span class="field">
        <span class="field__control radio">
            <input class="radio__control" id="group-radio-2" type="radio" value="2" name="radio-group" />
            <span class="radio__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-radio-2">Option 2</label>
    </span>
    <span class="field">
        <span class="field__control radio">
            <input class="radio__control" id="group-radio-3" type="radio" value="3" name="radio-group" />
            <span class="radio__icon"></span>
        </span>
        <label class="field__label field__label--end" for="group-radio-3">Option 3</label>
    </span>
</fieldset>

Custom Radio

The default radio shown above uses an SVG background image, and therefore has a fixed colour. Inline SVG, while slightly more verbose, honours the CSS cascade, thus allowing any possible colour for the radio icon.

<span class="radio" style="color: #71c63e">
    <input class="radio__control" type="radio" />
    <span class="radio__icon" hidden>
        <svg aria-hidden="true" class="radio__unchecked" focusable="false">
            <use xlink:href="#icon-radio-unchecked"></use>
        </svg>
        <svg aria-hidden="true" class="radio__checked" focusable="false">
            <use xlink:href="#icon-radio-checked"></use>
        </svg>
    </span>
</span>

NOTE: The hidden property ensures that the SVG icon is not visible alongside the native icon when the page is in a non-CSS state. This hidden property will be overriden by CSS.

The radio module can use any inline SVG for it's checked and unchecked states.

<span class="field__control radio" style="color: #e62048">
    <input class="radio__control" type="radio" />
    <span class="radio__icon" hidden>
        <svg aria-hidden="true" class="radio__unchecked" focusable="false">
            <use xlink:href="#icon-radio-unchecked"></use>
        </svg>
        <svg aria-hidden="true" class="radio__checked" focusable="false">
            <use xlink:href="#icon-confirmation"></use>
        </svg>
    </span>
</span>

Be careful when using a custom radio; the icon for each state must still give enough affordance to a user that it represents an interactive control.

@ebay/skin/select

A select allows the user to select one item from a list of options. A select is exactly the same as a normal HTML select (because it is one), but Skin's version uses a wrapper to style it.

The purpose of a select is to collect form data; therefore a select should always be used in conjunction with a form, label and submit button. If you are not submitting form data, then a menu maybe a better choice.

IMPORTANT: The examples below show the select in isolation, without any label. Please see the field module for details on labeling controls. Remember: every select requires a label!

Default select

<span class="select">
    <select name="options">
        <option value="item1">Option 1</option>
        <option value="item2">Option 2</option>
        <option value="item3">Option 3</option>
    </select>
    <span class="select__icon"></span>
</span>

Disabled select

<span class="select">
    <select name="options" disabled>
        <option value="item1">Option 1</option>
        <option value="item2" selected>Option 2</option>
        <option value="item3">Option 3</option>
    </select>
    <span class="select__icon"></span>
</span>

Selected option

<span class="select">
    <select name="options">
        <option value="item1">Option 1</option>
        <option value="item2" selected>Option 2</option>
        <option value="item3">Option 3</option>
        <span class="select__icon"></span>
    </select>
</span>

Unselected Select

If no suitable default value exists, the first option in the list can be used as a prompt and set to disabled & selected.

<span class="select">
    <select>
        <option value="0" disabled selected>-select-</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <span class="select__icon"></span>
</span>

Fluid select

<span class="select select--fluid">
    <select name="options" id="options">
        <option value="item1">Option 1</option>
        <option value="item2" selected>Option 2</option>
        <option value="item3">Option 3</option>
    </select>
    <span class="select__icon"></span>
</span>

Borderless select

<span class="select select--borderless">
    <select name="options" id="options">
        <option value="item1">Option 1</option>
        <option value="item2" selected>Option 2</option>
        <option value="item3">Option 3</option>
    </select>
    <span class="select__icon"></span>
</span>

Borderless, disabled select

<span class="select select--borderless">
    <select name="options" id="options" disabled>
        <option value="item1">Option 1</option>
        <option value="item2" selected>Option 2</option>
        <option value="item3">Option 3</option>
    </select>
    <span class="select__icon"></span>
</span>

Right-to-left select

<span class="select" dir="rtl">
    <select name="options" id="options">
        <option value="item1">Option 1</option>
        <option value="item2" selected>Option 2</option>
        <option value="item3">Option 3</option>
    </select>
    <span class="select__icon"></span>
</span>

Foreground icon select

<span class="select">
    <select name="options" id="options">
        <option value="item1">Option 1</option>
        <option value="item2" selected>Option 2</option>
        <option value="item3">Option 3</option>
    </select>
    <svg aria-hidden="true" class="select__icon" focusable="false">
        <use xlink:href="#icon-settings"></use>
    </svg>
</span>

@ebay/skin/svg

The SVG module imports an external SVG source file containing all symbol definitions. However, due to a lack of browser support for external SVG definitions, we recommend not using this module for now and instead inlining (i.e. copy & pasting) all required definitions from below into a hidden SVG block on your page.

Please view the icon module for instructions on how to reuse and display these symbol definitions anywhere on the page.

Notice that we use the SVG viewBox attribute to crop out any arbitrary whitespace around the icon path(s). This allows us to leverage CSS to fine-tune whitespace instead.

    <svg hidden>
        <symbol id="icon-alert" viewBox="0 0 22 22">
            <path d="M10.975 0C4.914 0 0 4.914 0 10.975S4.914 21.95 10.975 21.95c6.062 0 10.975-4.913 10.975-10.975C21.95 4.913 17.037 0 10.975 0zm-.459 16.966H8.67v-2.764l1.846-.924v3.688zM8.67 13.278V4.984l8.297 4.146-8.297 4.148z"/>
        </symbol>
        <symbol id="icon-arrow-down" viewBox="0 0 24 13">
            <path d="M11.604 12.921L0 0h23.215l-5.807 6.462z"/>
        </symbol>
        <symbol id="icon-arrow-down-disabled" viewBox="0 0 24 13">
            <path fill="#ccc" d="M11.604 12.921L0 0h23.215l-5.807 6.462z"/>
        </symbol>
        <symbol id="icon-arrow-up" viewBox="0 0 24 13">
            <path d="M12.045.029L23.649 12.95H.434l5.807-6.462z"/>
        </symbol>
        <symbol id="icon-auction" viewBox="0 0 23 24">
            <path d="M12.081 20.234H1.504c-.83 0-1.504.674-1.504 1.504v.758C0 23.326.673 24 1.504 24h10.577c.83 0 1.504-.674 1.504-1.504v-.758c0-.83-.674-1.504-1.504-1.504zm.348 2.262a.386.386 0 0 1-.372.373H1.504a.386.386 0 0 1-.373-.372v-.759a.386.386 0 0 1 .372-.373H12.08a.386.386 0 0 1 .373.372l-.024.759zm9.508-6.723L15.051 9.46l2.15-2.15a3.584 3.584 0 0 0 1.042-2.529c0-.986-.398-1.88-1.042-2.53l-1.243-1.243A3.577 3.577 0 0 0 13.466.004a3.58 3.58 0 0 0-2.53 1.042L2.833 9.149a3.584 3.584 0 0 0-1.042 2.529c0 .986.398 1.88 1.042 2.53l1.243 1.243a3.58 3.58 0 0 0 2.529 1.042c.986 0 1.88-.398 2.53-1.042l2.746-2.746 7.035 6.451a2.262 2.262 0 0 0 3.057-3.33l-.036-.053zM8.265 14.604a2.475 2.475 0 0 1-1.734.704 2.473 2.473 0 0 1-1.734-.705l-1.242-1.242a2.471 2.471 0 0 1-.644-1.669c0-.682.274-1.3.719-1.748l8.104-8.104a2.475 2.475 0 0 1 1.734-.704c.675 0 1.286.268 1.734.705l1.242 1.242c.436.447.704 1.059.704 1.734s-.268 1.286-.705 1.734l-8.178 8.053zm12.951 3.605a1.167 1.167 0 0 1-1.593.074l-6.959-6.412 1.591-1.604 6.873 6.339a1.13 1.13 0 0 1 .111 1.605l-.023-.002z"/>
        </symbol>
        <symbol id="icon-autocomplete" viewBox="0 0 22 22">
            <path d="M1.757 2.721a.187.187 0 0 0-.32.132v16.584H.312V.312h18.75v1.125H3.124a.188.188 0 0 0-.134.319L21.766 20.87l-.891.924L1.756 2.72l.001.001zM18.875.5v.75H3.125a.376.376 0 0 0-.268.638l18.648 18.985-.632.655L1.889 2.588a.372.372 0 0 0-.409-.08.375.375 0 0 0-.231.346V19.25h-.75V.5h18.376zm.375-.375H.125v19.5h1.5V2.854l19.254 19.209 1.15-1.192L3.125 1.626H19.25V.125z"/>
        </symbol>
        <symbol id="icon-best-offer" viewBox="0 0 28 24">
            <path d="M26.34 7.152a2.495 2.495 0 0 0-1.802-.766l-.046.001h-2.363V3.105v-.031c0-.846-.351-1.611-.916-2.156a2.99 2.99 0 0 0-2.157-.917H3.105L3.054 0C2.209 0 1.447.351.904.916A3.002 3.002 0 0 0 0 3.065v10.34c0 .84.346 1.599.902 2.143a2.986 2.986 0 0 0 2.104.864l.104-.001h2.074v4.294a.823.823 0 0 0 .001.278.93.93 0 0 0 .299.5.86.86 0 0 0 .543.193h.237l.206-.082.178-.11.191-.068 1.149-.902 2.339-1.846.616-.437c.14.314.329.582.56.806.46.465 1.096.753 1.801.753h4.053c.083.043.155.094.22.151l1.886 1.462 2.845 2.216h.068l.151.096.205.068h.219a.805.805 0 0 0 .507-.179.844.844 0 0 0 .284-.444.997.997 0 0 0 .001-.271l.001-3.1h.793a2.584 2.584 0 0 0 2.584-2.584V8.987v-.006c0-.718-.299-1.365-.778-1.826l-.003-.003zM9.423 17.504l-2.79 2.188v-3.364a.527.527 0 0 0 0-.167 1.223 1.223 0 0 0-.369-.831 1.215 1.215 0 0 0-.907-.288H3.073c-.443 0-.844-.184-1.129-.479a1.568 1.568 0 0 1-.479-1.13V3.103v-.032c0-.443.184-.844.479-1.13a1.566 1.566 0 0 1 1.13-.479H19.056c.443 0 .844.184 1.13.479.296.287.479.687.479 1.13V13.36c0 .906-.735 1.641-1.641 1.641h-5.989a2.918 2.918 0 0 0-.674.227 3.348 3.348 0 0 0-.592.367l-2.346 1.909zm16.26-.328a1.19 1.19 0 0 1-1.19 1.189H23.411c-.585 0-1.063.459-1.093 1.037a.666.666 0 0 0 0 .156v2.459l-.178-.136-3.761-2.94a2.734 2.734 0 0 0-.489-.294 2.372 2.372 0 0 0-.576-.182l-4.036-.002h-.015c-.622 0-1.131-.49-1.161-1.105l.588-.467c.084-.077.178-.145.28-.201a.884.884 0 0 1 .29-.086h5.816A3.104 3.104 0 0 0 22.18 13.5V7.798h2.365c.657 0 1.19.533 1.19 1.19l-.052 8.188zm-11.487-6.755a2.615 2.615 0 0 0-2.498-2.462l-.005-2.489a1.989 1.989 0 0 1 1.364.842.63.63 0 1 0 1.125-.559 3.247 3.247 0 0 0-2.475-1.54l-.013-.11a.63.63 0 0 0-1.258 0 2.613 2.613 0 0 0-2.503 2.555 2.615 2.615 0 0 0 2.497 2.464l.005 2.476a1.988 1.988 0 0 1-1.364-.828.63.63 0 1 0-1.124.559 3.247 3.247 0 0 0 2.475 1.54l.013.001a.63.63 0 0 0 1.258 0 2.614 2.614 0 0 0 2.502-2.441l.001-.008zm-3.761-2.585c-.601-.123-1.258-.465-1.258-1.176 0-.711.643-1.053 1.258-1.176v2.352zm1.258 3.76V9.231c.602.123 1.259.465 1.259 1.176 0 .711-.643 1.066-1.259 1.189z"/>
        </symbol>
        <symbol id="icon-bold" viewBox="0 0 21 25">
            <path d="M0 .011h12a8.839 8.839 0 0 1 5.397 1.495 5.137 5.137 0 0 1 1.99 4.472c.003.029.003.084.003.139a5.124 5.124 0 0 1-.939 2.963 5.916 5.916 0 0 1-2.504 1.975l-.039.014a5.46 5.46 0 0 1 3.418 2.095 6.807 6.807 0 0 1 1.244 4.174l.001.06c0 .927-.189 1.81-.531 2.613a5.436 5.436 0 0 1-1.683 2.072 8.364 8.364 0 0 1-2.801 1.402 14.407 14.407 0 0 1-4.223.529H0V.011zm4.355 10.046h7.097c.04.002.088.002.136.002.937 0 1.798-.324 2.477-.865a3.012 3.012 0 0 0 1.037-2.472 3.058 3.058 0 0 0-.941-2.544 4.279 4.279 0 0 0-2.723-.738l-7.084-.001.001 6.618zm0 10.525h7.646a4.417 4.417 0 0 0 3.093-1 3.59 3.59 0 0 0 1.089-2.816 3.42 3.42 0 0 0-1.094-2.731 4.495 4.495 0 0 0-3.102-.945l-7.631-.001-.001 7.493z"/>
        </symbol>
        <symbol id="icon-box" viewBox="0 0 22 24">
            <path d="M10.693.001L0 6.054v11.653l10.693 5.973 10.64-5.947.08-.027V6.053L10.693 0v.001zm5.28 3.28L5.706 9.148l-1.6-.907 10.267-5.84 1.6.88zm-10.4 6.08v2.56l-1.6-.8V8.454l1.6.907zm5.12-9.04l3.387 1.92-10.24 5.84L.427 6.134 10.694.321h-.001zm-.133 22.96L.267 17.548V6.375l3.44 1.947v2.987l2.133 1.067V9.523l4.747 2.693v11.067l-.027-.002zm-4.587-14l10.267-5.84 4.747 2.693-10.293 5.84-4.72-2.693h-.001zm15.174 8.266l-10.32 5.733V12.213L21.12 6.346v11.2l.027.001zm-3.014-4.48l-5.547 3.2v4.373l5.547-3.227v-4.347.001zm-.266 4.187l-5.013 2.907v-3.76l5.013-2.853v3.707-.001z"/>
        </symbol>
        <symbol id="icon-bulleted-list" viewBox="0 0 24 17">
            <path d="M23.085 9H7.35a.945.945 0 1 1 0-1.89h15.735a.945.945 0 1 1 0 1.89zM2.73 8.25c0 .795-.611 1.44-1.365 1.44S0 9.045 0 8.25c0-.795.611-1.44 1.365-1.44s1.365.645 1.365 1.44zm20.355-6.36H7.35a.93.93 0 0 1-.93-.93V.944.93A.93.93 0 0 1 7.35 0h15.735A.93.93 0 0 1 24 .93v.03a.93.93 0 0 1-.914.93h-.001zM2.73 1.44c0 .795-.611 1.44-1.365 1.44S0 2.235 0 1.44C0 .645.611 0 1.365 0S2.73.645 2.73 1.44zm20.355 14.73H7.35a.945.945 0 1 1 0-1.89h15.735a.945.945 0 1 1 0 1.89zM2.73 15.06c0 .795-.611 1.44-1.365 1.44S0 15.855 0 15.06c0-.795.611-1.44 1.365-1.44s1.365.645 1.365 1.44z"/>
        </symbol>
        <symbol id="icon-call" viewBox="0 0 21 24">
            <path d="M3.71 24a.575.575 0 0 1-.265-.064c-1.42-.723-2.412-1.514-3.316-2.642a.582.582 0 0 1-.123-.444c.409-3.005 2.638-4.981 4.765-6.518a.597.597 0 0 1 .242-.102c.954-.162 1.557.321 2.025.697.512.411.804.586 1.357.383.872-.241 2.022-1.207 2.977-2.476.913-1.213 1.508-2.51 1.553-3.384l.005-.066a1.055 1.055 0 0 0-.046-.339 5.178 5.178 0 0 1-.035-.085c-.112-.248-.356-.431-.639-.643-.465-.349-1.101-.826-1.176-1.792a.577.577 0 0 1 .039-.26c.966-2.44 2.332-5.087 5.144-6.222a.582.582 0 0 1 .461.01c1.264.574 2.369 1.413 3.377 2.565.12.137.169.321.134.5-.701 3.509-1.831 6.576-3.359 9.115-.56.934-2.567 4.144-4.835 6.185-2.077 2.11-4.786 3.975-8.034 5.527a.607.607 0 0 1-.252.056L3.71 24zm-2.507-3.24c.704.832 1.46 1.433 2.518 2.002 3.009-1.467 5.518-3.209 7.461-5.181a1.11 1.11 0 0 1 .05-.047c2.186-1.967 4.214-5.263 4.599-5.904 1.418-2.355 2.479-5.198 3.156-8.456-.781-.846-1.622-1.487-2.561-1.949-2.196.997-3.329 3.134-4.209 5.331.066.338.296.525.696.826.359.269.766.574 1.002 1.094.009.016.029.061.047.108a1.8 1.8 0 0 1 .106.398c.001.006.012.065.012.072.014.118.022.242.018.376l-.005.07c-.058 1.121-.725 2.627-1.786 4.038-1.118 1.485-2.48 2.591-3.556 2.885a2.3 2.3 0 0 1-.792.144c-.746 0-1.249-.404-1.653-.729-.383-.308-.623-.484-.972-.471-1.912 1.395-3.705 3.019-4.131 5.393z"/>
        </symbol>
        <symbol id="icon-camera" viewBox="0 0 22 17">
            <path d="M5.866 5.306H2.639a.774.774 0 0 1-.773-.773V4.16c0-.427.347-.773.773-.773h3.227c.427 0 .773.347.773.773v.373a.774.774 0 0 1-.773.773zM2.64 3.653a.507.507 0 0 0-.507.507v.373c0 .293.24.507.507.507h3.227c.293 0 .507-.24.507-.507V4.16a.507.507 0 0 0-.507-.507H2.64zm9.92 9.227a3.802 3.802 0 0 1-3.787-3.787 3.802 3.802 0 0 1 3.787-3.787 3.802 3.802 0 0 1 3.787 3.787c.027 2.08-1.68 3.787-3.787 3.787zm0-7.307a3.516 3.516 0 0 0-3.52 3.52 3.516 3.516 0 0 0 3.52 3.52 3.516 3.516 0 0 0 3.52-3.52c.027-1.947-1.573-3.52-3.52-3.52zm0 9.253a5.77 5.77 0 0 1-5.76-5.76 5.77 5.77 0 0 1 5.76-5.76 5.77 5.77 0 0 1 5.76 5.76c0 3.2-2.587 5.76-5.76 5.76zm0-11.226c-3.013 0-5.493 2.453-5.493 5.493 0 3.013 2.453 5.493 5.493 5.493a5.485 5.485 0 0 0 5.493-5.493A5.485 5.485 0 0 0 12.56 3.6zm6.96 13.04H1.84A1.844 1.844 0 0 1 0 14.8V3.467c0-1.013.827-1.84 1.84-1.84h1.173C3.066.72 3.813 0 4.72 0h3.013c.907 0 1.68.72 1.707 1.627h10.08c1.013 0 1.84.827 1.84 1.84v11.307c0 1.04-.8 1.867-1.84 1.867v-.001zM1.84 1.893c-.88 0-1.573.72-1.573 1.573v11.307c0 .88.72 1.573 1.573 1.573h17.707c.88 0 1.573-.72 1.573-1.573V3.466c0-.88-.72-1.573-1.573-1.573H9.307c-.053 0-.133-.027-.133-.187 0-.8-.64-1.467-1.467-1.467H4.72c-.8 0-1.467.64-1.467 1.467v.187H1.84z"/>
        </symbol>
        <symbol id="icon-cart" viewBox="0 0 30 24">
            <path d="M29.564 5.561c-.293-.468-.937-1.054-2.224-1.054-1.405-.059-18.207 0-19.202 0L6.675.585A.88.88 0 0 0 5.855 0H.878C.351 0 0 .351 0 .878s.351.878.878.878h4.39l5.738 15.22a.88.88 0 0 0 .82.585h13.817c.527 0 .937-.293 1.112-.761.117-.293.761-2.049 1.405-3.805.644-1.815 1.346-3.688 1.522-4.273.469-1.288.41-2.4-.117-3.161zm-1.522 2.517c-.234.585-.878 2.459-1.58 4.273a107.382 107.382 0 0 0-1.23 3.454h-12.82l-3.63-9.541h18.5c.293 0 .644.059.82.293.234.234.176.82-.059 1.522v-.001zM14.695 21.6a2.166 2.166 0 1 1-4.333 0 2.166 2.166 0 0 1 4.333 0zm12.645 0a2.166 2.166 0 1 1-4.333 0 2.166 2.166 0 0 1 4.333 0z"/>
        </symbol>
        <symbol id="icon-cart-null" viewBox="0 0 23 19">
            <path fill="#999" d="M21.862 14.104H9.702c-.519 0-1.078-.378-1.271-.861L4.919 4.47a.036.036 0 0 0-.004-.009L3.542 1.032c-.121-.303-.514-.57-.841-.57H.231a.23.23 0 1 1 0-.462h2.47c.519 0 1.078.378 1.271.861l1.316 3.287h16.574c.552 0 1.001.449 1.001 1.002v7.951c0 .552-.449 1.002-1.001 1.002v.001zM5.473 4.611l3.387 8.46c.122.304.514.57.841.57h12.16a.54.54 0 0 0 .539-.539V5.151a.54.54 0 0 0-.539-.539H5.472l.001-.001zm14.41 14.335a1.862 1.862 0 0 1-1.854-1.866c0-1.029.832-1.866 1.854-1.866 1.023 0 1.854.837 1.854 1.866a1.862 1.862 0 0 1-1.854 1.866zm0-3.268a1.4 1.4 0 0 0-1.392 1.403 1.4 1.4 0 0 0 1.392 1.403 1.4 1.4 0 0 0 1.392-1.403 1.4 1.4 0 0 0-1.392-1.403zm-8.04 3.268a1.862 1.862 0 0 1-1.855-1.866c0-1.029.832-1.866 1.855-1.866 1.022 0 1.854.837 1.854 1.866a1.862 1.862 0 0 1-1.854 1.866zm0-3.268c-.768 0-1.392.629-1.392 1.403s.624 1.403 1.392 1.403a1.4 1.4 0 0 0 1.392-1.403 1.4 1.4 0 0 0-1.392-1.403zm-5.61-8.25h16.398v.231H6.233v-.231zm1.431 3.164H22.79v.231H7.664v-.231z"/>
        </symbol>
        <symbol id="icon-caution-null" viewBox="0 0 24 20">
            <path fill="#999" d="M21.973 19.696H1.27c-.539 0-.945-.195-1.145-.548-.2-.353-.158-.801.12-1.263L10.546.712c.275-.46.657-.712 1.074-.712.417 0 .798.253 1.074.712L23 17.885c.277.462.32.91.12 1.263-.2.353-.607.548-1.146.548zM11.62.501c-.234 0-.463.167-.644.469L.672 18.143c-.177.296-.218.572-.113.759.105.187.364.294.71.294h20.703c.345 0 .603-.107.71-.294.105-.187.063-.463-.114-.759L12.264.97c-.18-.302-.41-.469-.645-.469h.001zm0 13.897c.228 0 .422.08.583.24a.79.79 0 0 1 .24.583.773.773 0 0 1-.254.583.808.808 0 0 1-.569.24c-.21 0-.4-.08-.569-.24a.77.77 0 0 1-.254-.583c0-.229.08-.423.24-.583.16-.16.354-.24.582-.24h.001zm.784-4.272c0 1.716-.352 3.121-.784 3.121-.432 0-.784-1.404-.784-3.121s.353-3.121.784-3.121c.431 0 .784 1.404.784 3.121z"/>
        </symbol>
        <symbol id="icon-center-aligned" viewBox="0 0 24 17">
            <path d="M22.966 9.195H.826A.946.946 0 0 1 .821 7.32h22.145a.946.946 0 0 1 .005 1.875h-.005zm-4.185-7.32H5.011a.93.93 0 0 1-.915-.93V.93A.93.93 0 0 1 5.01 0h13.756a.93.93 0 0 1 .93.93v.015a.93.93 0 0 1-.914.93h-.001zM18.316 16.5H5.476a.946.946 0 0 1-.005-1.875h12.845a.946.946 0 0 1 .005 1.875h-.005z"/>
        </symbol>
        <symbol id="icon-center-justified" viewBox="0 0 24 17">
            <path d="M23.07 9.195H.93A.946.946 0 0 1 .925 7.32H23.07a.946.946 0 0 1 .005 1.875h-.005zm0-7.32H.93A.93.93 0 0 1 0 .945V.93A.93.93 0 0 1 .93 0h22.14a.93.93 0 0 1 .93.93v.016a.93.93 0 0 1-.93.929zM18.42 16.5H5.58a.946.946 0 0 1-.005-1.875H18.42a.946.946 0 0 1 .005 1.875h-.005z"/>
        </symbol>
        <symbol id="icon-chat" viewBox="0 0 31 24">
            <path d="M1.484 18.271h-.009a.665.665 0 0 1-.531-.263c-.358-.473-.001-1.152.793-2.498a12.95 12.95 0 0 0 .934-1.843C1.106 12.321.071 10.414 0 8.261 0 3.648 5.143 0 11.505 0c5.384 0 9.975 2.635 11.172 6.397l-1.151.345C20.502 3.498 16.257 1.15 11.459 1.15c-5.684 0-10.355 3.187-10.355 7.099a5.993 5.993 0 0 0 2.445 4.59l.155.081c.46.564 0 1.473-.966 3.152l-.426.771a9.101 9.101 0 0 0 1.521-.781A8.168 8.168 0 0 0 5.63 14.55l.272-.365.38.15c.707.294 1.54.545 2.403.712l-.136 1.164a14.515 14.515 0 0 1-2.401-.677c-.441.594-1.045 1.088-1.702 1.505-.827.525-1.74.92-2.715 1.161l-.247.071zm27.785 5.73h-.184a9.116 9.116 0 0 1-2.764-1.173 9.852 9.852 0 0 1-1.752-1.501c-1.548.569-3.33.902-5.19.902h-.054c-5.37 0-9.961-2.635-11.169-6.397l-.288-.92.943.184c.809.16 1.74.252 2.692.253 5.684 0 10.355-3.187 10.355-7.099a4.974 4.974 0 0 0-.252-1.543l-.277-.885.943.173c5.039.943 8.56 4.222 8.56 7.973a7.037 7.037 0 0 1-2.801 5.326c.292.76.62 1.391.993 1.992.749 1.335 1.117 1.968.761 2.439a.666.666 0 0 1-.517.276h.001zm-4.418-4.061l.265.311a8.258 8.258 0 0 0 1.806 1.522c.458.292.946.547 1.457.757l-.364-.725c-.955-1.68-1.427-2.589-.966-3.152l.081-.081a5.995 5.995 0 0 0 2.462-4.59c0-2.992-2.726-5.638-6.742-6.662.044.267.069.575.069.889v.033c0 4.6-5.143 8.248-11.505 8.248a15.925 15.925 0 0 1-1.953-.123c1.538 2.769 5.427 4.702 9.765 4.702h.045c1.848 0 3.612-.359 5.226-1.011l.354-.118z"/>
        </symbol>
        <symbol id="icon-check" viewBox="0 0 24 18">
            <path fill="#0654ba" d="M20.429.001L7.673 12.87 2.481 7.677 0 10.386l7.674 7.45L23.14 2.486 20.43 0z"/>
        </symbol>
        <symbol id="icon-checkbox-checked" viewBox="0 0 23 24">
            <path d="M0 4.235A4.237 4.237 0 0 1 4.237 0h14.482a4.228 4.228 0 0 1 4.237 4.235v15.529a4.237 4.237 0 0 1-4.237 4.235H4.237A4.228 4.228 0 0 1 0 19.764V4.235zm3.577 8.955l5.279 5.129L19.229 8.24l-1.977-1.921-8.197 7.965-3.332-3.237-2.146 2.143z"/>
        </symbol>
        <symbol id="icon-checkbox-unchecked" viewBox="0 0 23 24">
            <path d="M18.361 24.046H4.701A4.705 4.705 0 0 1 0 19.348V4.701A4.707 4.707 0 0 1 4.701 0h13.66a4.707 4.707 0 0 1 4.701 4.701v14.647a4.706 4.706 0 0 1-4.701 4.698zM4.701 1.411A3.292 3.292 0 0 0 1.412 4.7v14.647a3.291 3.291 0 0 0 3.289 3.287h13.66a3.291 3.291 0 0 0 3.289-3.287V4.7a3.292 3.292 0 0 0-3.289-3.289H4.701z"/>
        </symbol>
        <symbol id="icon-checkout-complete" viewBox="0 0 32 25">
            <path d="M10.733 20.368h-.028c-.502 0-.956.208-1.28.543a1.805 1.805 0 0 0-.543 1.397 1.85 1.85 0 0 0 1.851 1.847 1.802 1.802 0 0 0 1.392-.543 1.78 1.78 0 0 0 .544-1.281v-.029-.013a1.852 1.852 0 0 0-1.852-1.852h-.015l-.069-.069zm10.859 0h-.028c-.502 0-.956.208-1.28.543a1.805 1.805 0 0 0-.543 1.397 1.85 1.85 0 0 0 3.703-.005c.002-.029.002-.063.002-.098 0-.508-.209-.966-.545-1.294a1.78 1.78 0 0 0-1.281-.544h-.029l.001.001zM25.169.098h-.045a6.571 6.571 0 0 0-6.508 7.483L6.96 7.547 5.735 4.275a.748.748 0 0 0-.276-.36.72.72 0 0 0-.419-.141H.723c-.386 0-.7.301-.722.68L0 4.492c0 .203.08.386.21.521a.72.72 0 0 0 .508.208h3.806l4.928 12.974a.599.599 0 0 0 .262.374c.119.08.263.127.418.127H21.995l.035.001c.209 0 .404-.062.567-.17a.895.895 0 0 0 .343-.464l.447-1.176c.241-.64.497-1.346.766-2.116l.571-1.545h.46a6.613 6.613 0 1 0 0-13.226l-.015.098zm0 11.833a5.235 5.235 0 1 1 .002-10.47 5.235 5.235 0 0 1-.002 10.47zm-2.478 2.367c-.232.603-.44 1.174-.626 1.712l-.445 1.253H10.636L7.532 9.078h11.471a6.675 6.675 0 0 0 4.13 3.913l-.442 1.307zm5.93-10.149a.667.667 0 0 0-.918.124l-3.106 4.052-1.963-1.67a.685.685 0 0 0-.933.069.654.654 0 0 0 .069.933l2.506 2.186c.113.095.26.153.421.153h.08a.67.67 0 0 0 .458-.249l3.509-4.609a.655.655 0 0 0-.124-.918l.001-.071z"/>
        </symbol>
        <symbol id="icon-chevron-down" viewBox="0 0 24 14">
            <path d="M2.905-.023l11.542 11.544-2.448 2.449L.455 2.426l2.45-2.449zM9.55 11.521L21.095-.024l2.45 2.449L11.999 13.97 9.55 11.521z"/>
        </symbol>
        <symbol id="icon-chevron-left" viewBox="0 0 14 24">
            <path d="M13.993 2.45L2.449 13.992 0 11.544 11.545 0l2.449 2.45h-.001zM2.449 9.096l11.545 11.545-2.449 2.45L0 11.546l2.449-2.45z"/>
        </symbol>
        <symbol id="icon-chevron-right" viewBox="0 0 14 23">
            <path d="M0 20.502L11.469 9.036l2.433 2.432L2.433 22.936 0 20.502zm11.469-6.601L0 2.433 2.433 0l11.469 11.469-2.433 2.433v-.001z"/>
        </symbol>
        <symbol id="icon-chevron-up" viewBox="0 0 24 14">
            <path d="M20.641 13.993L9.099 2.449 11.547 0l11.544 11.545-2.45 2.448zM13.995 2.449L2.45 13.994 0 11.545 11.546 0l2.449 2.449z"/>
        </symbol>
        <symbol id="icon-chevron-light-left" viewBox="0 0 13 23">
            <path d="M12.118.263a.92.92 0 0 0-1.288 0L.293 10.8c-.176.176-.293.41-.293.644 0 .234.117.468.293.644l10.185 10.185c.176.176.41.293.644.293.234 0 .468-.117.644-.293a.92.92 0 0 0 0-1.288l-9.541-9.54 9.893-9.894a.92.92 0 0 0 0-1.288z"/>
        </symbol>
        <symbol id="icon-chevron-light-right" viewBox="0 0 13 23">
            <path d="M.263.263a.92.92 0 0 1 1.288 0L12.088 10.8c.176.176.293.41.293.644 0 .234-.117.468-.293.644L1.903 22.273c-.176.176-.41.293-.644.293-.234 0-.468-.117-.644-.293a.92.92 0 0 1 0-1.288l9.541-9.54L.263 1.55a.92.92 0 0 1 0-1.288z"/>
        </symbol>
        <symbol id="icon-classified-ad" viewBox="0 0 28 25">
            <path d="M8.999 7.715h5.783a.856.856 0 0 0 0-1.712H8.999a.856.856 0 1 0 0 1.712zm0 9.426h13.924a.856.856 0 1 0 0-1.712H8.999a.856.856 0 1 0 0 1.712zm0-4.704h5.783a.856.856 0 0 0 0-1.712H8.999a.856.856 0 1 0 0 1.712zm9.648 0h3.422a1.727 1.727 0 0 0 1.695-1.726V7.289a1.728 1.728 0 0 0-1.71-1.711h-3.407c-.948 0-1.718.764-1.727 1.71v3.423c0 .954.773 1.727 1.727 1.727v-.001zm0-5.133h3.422v3.406h-3.422V7.304zM25.918.001H6.005a1.71 1.71 0 0 0-1.711 1.711v6.004H1.711A1.71 1.71 0 0 0 0 9.427l.002.083v11.085a3.437 3.437 0 0 0 3.437 3.421h22.495a1.71 1.71 0 0 0 1.711-1.711V1.711A1.71 1.71 0 0 0 25.934 0h-.016v.001zM4.294 22.29h-.872a1.711 1.711 0 0 1-1.711-1.694V9.506h2.582l.001 12.784zm21.64 0H6.005V1.696h19.929V22.29z"/>
        </symbol>
        <symbol id="icon-clear" viewBox="0 0 24 24">
            <path fill="#ccc" d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm4.2 16.245a1.5 1.5 0 0 1-2.116 0l-2.085-2.115-2.13 2.115a1.5 1.5 0 1 1-2.117-2.114l2.117-2.132-2.115-2.115a1.501 1.501 0 1 1 2.116-2.13L12 9.884l2.115-2.115a1.499 1.499 0 0 1 2.693.909c0 .493-.238.93-.604 1.203l-2.089 2.118 2.085 2.115a1.497 1.497 0 0 1 0 2.13v.001z"/>
        </symbol>
        <symbol id="icon-clock" viewBox="0 0 24 24">
            <path d="M12 0C5.422 0 0 5.422 0 12s5.422 12 12 12 12-5.422 12-12S18.578 0 12 0zm0 21.333A9.332 9.332 0 0 1 2.667 12 9.332 9.332 0 0 1 12 2.667 9.332 9.332 0 0 1 21.333 12 9.332 9.332 0 0 1 12 21.333zm3.467-6.577L12 12.445V6.223c0-.711-.622-1.333-1.333-1.333s-1.333.533-1.333 1.333v6.933c0 .444.356.8.711 1.067l4 2.756c.267.178.533.267.8.267.444 0 .8-.178.978-.533.444-.622.267-1.511-.356-1.956v-.001z"/>
        </symbol>
        <symbol id="icon-close" viewBox="0 0 24 24">
            <path d="M23.205 1.79L21.415 0l-9.813 9.812L1.79 0 0 1.79l9.812 9.812L0 21.415l1.79 1.789 9.812-9.811 9.813 9.811 1.79-1.789-9.813-9.813z"/>
        </symbol>
        <symbol id="icon-collections-null" viewBox="0 0 49 24">
            <path fill="#999" d="M26.079 23.983H.344a.34.34 0 0 1-.34-.34V.394A.34.34 0 0 1 .34 0h25.739a.34.34 0 0 1 .34.34v23.249a.34.34 0 0 1-.336.394h-.005.001zM.702 23.321h25.037V.662H.702v22.659zm22.819-1.699H2.919a.34.34 0 0 1-.322-.339V2.827a.34.34 0 0 1 .34-.34h20.584a.34.34 0 0 1 .34.34v18.456a.34.34 0 0 1-.34.34v-.001zm-20.262-.661h19.923V3.077H3.259v17.884zm44.423-9.711H29.011a.34.34 0 0 1-.34-.34V.341a.34.34 0 0 1 .34-.34h18.671a.34.34 0 0 1 .34.34v10.587a.34.34 0 0 1-.339.322h-.001zm-18.366-.698h18.027V.662H29.316v9.89zM45 8.764H31.784a.34.34 0 0 1-.34-.34V2.826a.34.34 0 0 1 .34-.34H45a.34.34 0 0 1 .34.34v5.598a.34.34 0 0 1-.34.34zm-12.877-.662h12.519V3.166H32.123v4.936zm15.398 15.899H28.976a.34.34 0 0 1-.34-.34V13.145a.34.34 0 0 1 .34-.34h18.545a.34.34 0 0 1 .34.34v10.516a.34.34 0 0 1-.34.34zm-18.205-.662H47.2v-9.854H29.316v9.854zm8.941-1.502c-3.863 0-6.903-1.466-6.903-3.326s3.022-3.326 6.903-3.326 6.903 1.466 6.903 3.326-2.987 3.326-6.903 3.326zm0-5.919c-3.38 0-6.241 1.216-6.241 2.665s2.861 2.665 6.241 2.665c3.38 0 6.241-1.216 6.241-2.665s-2.808-2.665-6.241-2.665z"/>
        </symbol>
        <symbol id="icon-comments" viewBox="0 0 25 24">
            <path d="M17.843 24.001a.895.895 0 0 1-.392-.096c-.1-.05-.191-.114-.275-.181l-1.33-1.041a1237.267 1237.267 0 0 1-5.29-4.154 1.668 1.668 0 0 0-.783-.367 5.3 5.3 0 0 0-.779-.079l-5.733-.003A3.264 3.264 0 0 1 0 14.819V3.261A3.265 3.265 0 0 1 3.261 0h17.956a3.265 3.265 0 0 1 3.261 3.261v11.558a3.265 3.265 0 0 1-3.261 3.261H18.66a.892.892 0 0 0-.016.215l-.001 4.644c0 .129-.004.281-.045.442-.097.376-.393.618-.753.618l-.002.002zM3.26 1.175a2.09 2.09 0 0 0-2.088 2.087V14.82a2.09 2.09 0 0 0 2.088 2.088l5.738.003c.34.001.677.048.961.093.475.077.907.275 1.324.605 1.757 1.39 3.521 2.771 5.285 4.151l.898.703.001-4.123c0-.134 0-.228.006-.319.048-.662.522-1.11 1.181-1.113h2.56a2.09 2.09 0 0 0 2.088-2.088V3.262a2.09 2.09 0 0 0-2.087-2.087H3.259h.001z"/>
        </symbol>
        <symbol id="icon-confirmation" viewBox="0 0 24 24">
            <path fill="#5ba71b" d="M12.007 24.014C5.376 24.014 0 18.638 0 12.007 0 5.376 5.376 0 12.007 0c6.631 0 12.007 5.376 12.007 12.007v.015c-.008 6.625-5.381 11.992-12.007 11.992zm0-22.261c-5.671 0-10.268 4.597-10.268 10.268s4.597 10.268 10.268 10.268 10.268-4.597 10.268-10.268S17.678 1.753 12.007 1.753zM11.13 17.6h-.003a.736.736 0 0 1-.485-.182L5.968 13.44a.74.74 0 1 1 .961-1.125l4.076 3.477 6.136-8.056a.744.744 0 1 1 1.181.906l-6.607 8.68a.722.722 0 0 1-.512.292h-.087l.014-.014z"/>
        </symbol>
        <symbol id="icon-fire" viewBox="0 0 19 24">
            <path d="M11.27 9.854C12.459 8.756 13.724 2.182 7.904 0 9.384 5.392-.81 9.055.052 16.174c.38 3.148 3.852 6.475 7.68 7.076-.622-.81-1.175-.981-1.464-2.438-.474-2.385 1.13-4.729 4.087-5.822-.401 3.693 2.646 4.118 2.243 6.887a5.372 5.372 0 0 1-.268 1.055c2.888-.747 5.274-2.493 6.072-5.268 1.122-3.905-.425-8.829-4.031-10.887-.5 1.987-1.913 2.919-3.102 3.077z"/>
        </symbol>
        <symbol id="icon-fixed-price" viewBox="0 0 19 24">
            <path d="M12.584 18.262a2.583 2.583 0 0 0-2.464-2.428l-.005-2.456a1.962 1.962 0 0 1 1.3.826.624.624 0 0 0 1.072-.552 3.21 3.21 0 0 0-2.371-1.52l-.015-.002a.624.624 0 1 0-1.233.003l-.001-.004a2.582 2.582 0 0 0-2.469 2.42 2.583 2.583 0 0 0 2.464 2.434l.005 2.456a1.962 1.962 0 0 1-1.3-.826.624.624 0 1 0-1.112.552 3.21 3.21 0 0 0 2.399 1.52l.014.002a.624.624 0 1 0 1.233-.003l.001.004a2.581 2.581 0 0 0 2.483-2.42l-.001-.006zm-4.953-3.704c0-.707.638-1.04 1.234-1.165v2.33c-.541-.139-1.234-.457-1.234-1.165zm2.469 4.87v-2.331c.596.125 1.235.458 1.235 1.166s-.638 1.04-1.235 1.165zm5.827-10.516V6.138a6.438 6.438 0 0 0-12.86-.014l-.001 2.789A3.179 3.179 0 0 0 0 12.088V20.469a3.177 3.177 0 0 0 3.177 3.177h12.624a3.177 3.177 0 0 0 3.177-3.177V12.131v-.044a3.176 3.176 0 0 0-3.046-3.174l-.005-.001zm-.125 1.387h.001c.981 0 1.776.795 1.776 1.776l-.001.058v8.321c0 .981-.795 1.776-1.776 1.776H3.164a1.776 1.776 0 0 1-1.776-1.776v-8.323l-.001-.056c0-.981.795-1.776 1.776-1.776h12.639zM14.526 8.91H4.453V6.299a3.832 3.832 0 0 1-.007-.249c0-2.617 2.255-4.74 5.036-4.74 2.782 0 5.037 2.123 5.037 4.74 0 .088-.002.174-.008.261l.015 2.599z"/>
        </symbol>
        <symbol id="icon-follow" viewBox="0 0 24 24">
            <path fill="#0654ba" d="M23.362 9.347h-9.345V0H9.345v9.347H0v4.67h9.345v9.348h4.672v-9.348h9.345z"/>
        </symbol>
        <symbol id="icon-glasses-null" viewBox="0 0 58 24">
            <path fill="#999" d="M11.979 24C5.361 23.988 0 18.62 0 12 0 5.373 5.373 0 12 0s12 5.373 12 12c-.012 6.63-5.39 12-12.021 12zm0-23.149C5.878.863.936 5.812.936 11.915c0 6.11 4.953 11.064 11.064 11.064s11.064-4.953 11.064-11.064C23.04 5.807 18.089.863 11.98.851h-.001zM45.319 24c-6.618-.012-11.979-5.38-11.979-12 0-6.627 5.373-12 12-12s12 5.373 12 12c-.012 6.63-5.39 12-12.021 12zm0-23.149c-6.074.048-10.978 4.983-10.978 11.064 0 6.11 4.953 11.064 11.064 11.064 6.08 0 11.015-4.905 11.063-10.974v-.047c0-6.134-4.972-11.106-11.106-11.106h-.045l.002-.001zm-11.511 9.617A.468.468 0 0 1 33.34 10c0-1.681-2.128-3.043-4.723-3.043-2.595 0-4.723 1.362-4.723 3.043a.468.468 0 1 1-.936 0c0-2.128 2.532-3.979 5.66-3.979s5.66 1.787 5.66 3.979c0 .259-.21.468-.468.468h-.002z"/>
        </symbol>
        <symbol id="icon-help" viewBox="0 0 17 24">
            <path d="M8.316 21.161a.582.582 0 0 1-.583-.583c0-3.144.835-4.06 1.892-5.22l.074-.081c.622-.683 1.175-1.103 1.815-1.589a24.687 24.687 0 0 0 2.165-1.804c1.64-1.537 1.735-4.205 1.736-4.232 0-1.034-.17-1.972-.504-2.771a5.65 5.65 0 0 0-1.396-2.009 6.26 6.26 0 0 0-2.157-1.263c-.843-.294-1.797-.444-2.836-.444-1.142 0-2.186.199-3.1.59a6.529 6.529 0 0 0-2.313 1.642 7.495 7.495 0 0 0-1.46 2.515c-.342.969-.504 2.033-.482 3.162a.584.584 0 0 1-.57.595c-.309.027-.588-.249-.595-.57C-.023 7.83.16 6.628.55 5.527A8.65 8.65 0 0 1 2.24 2.622 7.669 7.669 0 0 1 4.961.685C6.022.231 7.221 0 8.521 0c1.17 0 2.254.172 3.222.511.98.344 1.84.849 2.556 1.501a6.793 6.793 0 0 1 1.686 2.42c.394.943.595 2.031.595 3.237-.003.144-.104 3.192-2.105 5.066a25.446 25.446 0 0 1-2.257 1.882c-.619.47-1.108.841-1.658 1.445l-.075.082c-.99 1.086-1.587 1.741-1.587 4.434a.584.584 0 0 1-.583.583h.001zM8.291 24a.582.582 0 0 1-.583-.583v-.742a.583.583 0 1 1 1.166 0v.742a.583.583 0 0 1-.583.583z"/>
        </symbol>
        <symbol id="icon-information" viewBox="0 0 24 24">
            <path fill="#0654ba" d="M12.007 9.753a.849.849 0 0 0-.849.849v6.553a.85.85 0 0 0 1.683.004v-6.557a.849.849 0 0 0-.834-.849zm1.057-2.88a1.016 1.016 0 1 1-2.032 0 1.016 1.016 0 0 1 2.032 0zm-1.057 17.141C5.376 24.014 0 18.638 0 12.007 0 5.376 5.376 0 12.007 0c6.631 0 12.007 5.376 12.007 12.007v.015c-.008 6.625-5.381 11.992-12.007 11.992zm0-22.261c-5.671 0-10.268 4.597-10.268 10.268s4.597 10.268 10.268 10.268 10.268-4.597 10.268-10.268S17.678 1.753 12.007 1.753z"/>
        </symbol>
        <symbol id="icon-italic" viewBox="0 0 14 24">
            <path d="M9.686 23.999H0l.411-2.451h3.206l3.24-19.097h-3.24L4.028 0h9.686l-.411 2.451h-3.206l-3.24 19.097h3.24z"/>
        </symbol>
        <symbol id="item-feedback" viewBox="0 0 24 24">
            <path d="M22.648.962A3.143 3.143 0 0 0 20.381 0l-.05.001H3.236c-.892 0-1.697.368-2.272.961A3.142 3.142 0 0 0 .001 3.23v11.859L0 15.142c0 .888.369 1.69.962 2.26a3.17 3.17 0 0 0 2.266.95h6.2c.13.044.241.11.335.196.127.063.237.137.336.224l2.452 1.965 2.51 1.967 1.283.99.112.084.181.112.209.084h.234c.209 0 .4-.073.549-.197a.924.924 0 0 0 .304-.495.967.967 0 0 0 .001-.305l.001-4.569h2.287a3.249 3.249 0 0 0 3.249-3.249V3.263c.002-.049.005-.105.005-.162 0-.825-.314-1.576-.829-2.141l.001.002zm-.502 2.301v11.826a1.813 1.813 0 0 1-1.813 1.813h-2.456c-.335 0-.64.133-.863.349-.23.218-.377.523-.39.862a.6.6 0 0 0 .001.173l-.001 3.72-.572-.446-2.51-1.966-2.552-1.98a3.463 3.463 0 0 0-.607-.382 2.99 2.99 0 0 0-.698-.229L9.234 17H3.265l-.037.001c-.489 0-.931-.203-1.246-.529a1.73 1.73 0 0 1-.588-1.3l.002-.086V3.264l-.001-.037c0-.489.203-.931.529-1.246a1.726 1.726 0 0 1 1.341-.586h17.067l.037-.001c.489 0 .931.203 1.246.529a1.728 1.728 0 0 1 .53 1.344l.001-.004zm-4.295 3.793l-3.431-.641-1.548-3.221a.923.923 0 0 0-.778-.53h-.005a.921.921 0 0 0-.831.524L9.652 6.443l-3.431.641a.935.935 0 0 0-.488 1.576l2.482 2.496-.558 3.64a.934.934 0 0 0 1.398.96l3.05-1.601 3.054 1.59a.939.939 0 0 0 .953-.003l-.005.002a.893.893 0 0 0 .18-.166.929.929 0 0 0 .21-.76l-.613-3.662 2.455-2.468a.933.933 0 0 0-.482-1.575l-.006-.057zm-8.284 4.1a.931.931 0 0 0-.265-.809l-2.05-2.106 2.789-.544a.935.935 0 0 0 .667-.511l1.286-2.642 1.255 2.636a.94.94 0 0 0 .664.515l2.865.559-1.98 2.05a.934.934 0 0 0-.264.8l.46 3.035-2.441-1.297a.94.94 0 0 0-.869.002l-2.519 1.392.402-3.08z"/>
        </symbol>
        <symbol id="item-paid" viewBox="0 0 35 24">
            <path d="M15.181 8.956a6.043 6.043 0 0 0-3.828 10.567l.142.096a5.999 5.999 0 0 0 3.697 1.263 6.012 6.012 0 0 0 3.511-1.124l.148-.109A6.04 6.04 0 0 0 15.19 8.957l-.009-.001zm0 10.573h-.002c-.933 0-1.8-.282-2.521-.766a2.627 2.627 0 0 1 1.51-1.6c.291.097.608.157.938.157.33 0 .647-.06.94-.169a2.593 2.593 0 0 1 1.487 1.665 4.312 4.312 0 0 1-2.349.712l-.003.001zm-1.284-4.939v-.005a1.269 1.269 0 1 1 1.806 1.15l-.008.003a1.269 1.269 0 0 1-1.798-1.147v-.001zm4.803 3.263a4.075 4.075 0 0 0-1.346-1.607 2.841 2.841 0 0 0 .535-1.652 2.734 2.734 0 1 0-4.968 1.576 3.935 3.935 0 0 0-1.4 1.48 4.329 4.329 0 0 1-.89-2.662 4.531 4.531 0 1 1 8.048 2.857l.021.008zM34.741 7.069a7.16 7.16 0 0 0-14.207-1.176L.727 5.937H.725a.726.726 0 0 0-.723.772V23.17c0 .401.325.725.725.725h28.531c.4 0 .725-.325.725-.725v-9.35c2.796-1.022 4.756-3.657 4.758-6.752v.001zm-7.129 5.663h-.061a5.679 5.679 0 1 1 5.679-5.679v.016a5.678 5.678 0 0 1-5.615 5.663h-.003zm-26.1 9.712v-3.745a4.544 4.544 0 0 1 3.727 3.704l-3.727.041zm27.066 0h-3.64a4.394 4.394 0 0 1 3.553-3.561l.087 3.561zm0-5.045a5.932 5.932 0 0 0-5.056 5.013l-16.844.032a6.053 6.053 0 0 0-5.133-5.222l-.032-9.776h18.941c.18 3.785 3.293 6.786 7.106 6.786.338 0 .671-.023.997-.069l.021 3.236zm2.779-13.11a.724.724 0 0 0-.996.135l-3.369 4.397-2.13-1.813a.735.735 0 0 0-.466-.165.709.709 0 0 0-.472 1.252l2.72 2.372a.702.702 0 0 0 .457.166h.087a.719.719 0 0 0 .497-.271l3.807-5.001a.712.712 0 0 0-.134-1.072h-.001z"/>
        </symbol>
        <symbol id="item-shipped" viewBox="0 0 28 24">
            <path d="M20.729 0a6.415 6.415 0 0 0-5.645 3.385l-10.666.034a.687.687 0 0 0-.606.362L.081 10.312 0 10.42v12.771c0 .395.321.716.716.716H22.365a.717.717 0 0 0 .716-.716V12.367c2.396-.963 4.057-3.267 4.057-5.96A6.406 6.406 0 0 0 20.732.001h-.003V0zM4.837 4.838h9.649a6.192 6.192 0 0 0-.219 1.652c0 1.314.4 2.534 1.085 3.547l-13.528-.022 3.013-5.177zM21.594 22.54H1.391V11.378h15.27a6.263 6.263 0 0 0 3.982 1.419c.326 0 .646-.025.958-.072l-.007 9.815zm-.865-11.054a5.081 5.081 0 1 1 0-10.162 5.081 5.081 0 0 1 0 10.162zm3.351-7.554a.649.649 0 0 0-.891.12l-2.947 3.934-1.906-1.621a.658.658 0 0 0-.905.066.632.632 0 0 0 .066.905l2.366 2.123a.635.635 0 0 0 .409.149h.078a.65.65 0 0 0 .445-.242l3.406-4.474a.633.633 0 0 0-.119-.958l-.002-.002zM2.85 18.162h7.933v-5.324H2.85v5.324zm1.23-4.054h5.527v2.865H4.026l.054-2.865z"/>
        </symbol>
        <symbol id="justified" viewBox="0 0 24 17">
            <path d="M23.085 9.195H.945a.945.945 0 1 1 0-1.89h22.14a.945.945 0 1 1 0 1.89zm0-7.305H.945a.93.93 0 0 1-.93-.93V.944.93A.93.93 0 0 1 .945 0h22.14a.93.93 0 0 1 .93.93v.03a.93.93 0 0 1-.93.93zm0 14.61H.945a.945.945 0 1 1 0-1.89h22.14a.945.945 0 1 1 0 1.89z"/>
        </symbol>
        <symbol id="left-aligned" viewBox="0 0 24 17">
            <path d="M16.02 1.89H.945a.93.93 0 0 1-.93-.93V.944.93A.93.93 0 0 1 .945 0H16.02a.93.93 0 0 1 .93.93v.03a.93.93 0 0 1-.93.93zm3.105 14.61H.945a.945.945 0 1 1 0-1.89h18.18a.945.945 0 1 1 0 1.89zm3.96-7.305H.945a.945.945 0 1 1 0-1.89h22.14a.945.945 0 1 1 0 1.89z"/>
        </symbol>
        <symbol id="left-justified" viewBox="0 0 24 17">
            <path d="M.93 9.195h22.14a.946.946 0 0 0 .005-1.875H.93a.946.946 0 0 0-.005 1.875H.93zm0-7.32h22.14a.93.93 0 0 0 .93-.93V.93a.93.93 0 0 0-.93-.93H.93A.93.93 0 0 0 0 .93v.016a.93.93 0 0 0 .93.929zm0 14.625h12.84a.946.946 0 0 0 .005-1.875H.93A.946.946 0 0 0 .925 16.5H.93z"/>
        </symbol>
        <symbol id="link" viewBox="0 0 25 24">
            <path d="M22.356 1.649A5.62 5.62 0 0 0 18.371 0c-1.556 0-2.965.63-3.985 1.65l-4.038 4.038a.792.792 0 0 0 0 1.128.838.838 0 0 0 1.128-.001l4.037-4.038a4.13 4.13 0 0 1 2.857-1.142c1.108 0 2.115.435 2.859 1.144a4.042 4.042 0 0 1 1.176 2.856 4.04 4.04 0 0 1-1.178 2.857l-5.287 5.226a4.13 4.13 0 0 1-2.857 1.142 4.131 4.131 0 0 1-2.859-1.144.804.804 0 0 0-1.081 1.19 5.621 5.621 0 0 0 3.985 1.65c1.555 0 2.965-.63 3.985-1.649L22.4 9.62a5.62 5.62 0 0 0 1.649-3.985A5.62 5.62 0 0 0 22.4 1.65l-.044-.001zM11.903 17.816L8.49 21.229a4.04 4.04 0 0 1-2.821 1.143h-.075a4.008 4.008 0 0 1-2.818-6.858l4.968-4.968a4.13 4.13 0 0 1 2.857-1.142c1.108 0 2.115.435 2.859 1.144a.852.852 0 0 0 1.127-.003.788.788 0 0 0-.001-1.127 5.622 5.622 0 0 0-3.985-1.65 5.62 5.62 0 0 0-3.985 1.649L1.648 14.4A5.623 5.623 0 0 0 5.623 24h.018a5.577 5.577 0 0 0 3.962-1.645l3.414-3.414a.793.793 0 0 0 0-1.128.85.85 0 0 0-1.113.001l-.001.002z"/>
        </symbol>
        <symbol id="magnify" viewBox="0 0 25 24">
            <path d="M10.032 19.936h-.064C4.463 19.936 0 15.473 0 9.968S4.463 0 9.968 0s9.968 4.463 9.968 9.968V10c0 5.476-4.43 9.918-9.902 9.936h-.002zm0-18.144h-.048a8.192 8.192 0 1 0 8.192 8.192v-.016a8.176 8.176 0 0 0-8.142-8.176h-.002zm13.216 22.224h-.003a.881.881 0 0 1-.621-.256l-6.768-6.816a.89.89 0 0 1-.253-.624.877.877 0 0 1 1.501-.624l6.768 6.8a.89.89 0 0 1 .253.624.89.89 0 0 1-.253.624.865.865 0 0 1-.624.272zM13.728 9.36h-2.944V6.416H9.216V9.36H6.272v1.552h2.944v2.944h1.568v-2.944h2.944V9.36z"/>
        </symbol>
        <symbol id="icon-mail" viewBox="0 0 24 17">
            <path d="M23.534.47V.353c0-.058-.059-.059-.059-.117V.177c0-.059-.059-.059-.117-.059l-.059-.059c-.059 0-.059 0-.117-.059h-.117H.528.352C.294 0 .293 0 .235.059.176.059.176.118.176.118.117.118.117.177.059.177v.059C.059.295 0 .295 0 .353V15.69c0 .293.234.585.585.585h22.478a.586.586 0 0 0 .585-.585V.529c-.059 0-.059 0-.117-.059h.003zM11.769 8.84l-9.6-7.727h19.2l-9.6 7.727zM1.115 15.162V1.757L11.3 9.952s.059.059.117.059c.117.059.234.117.351.117.117 0 .234-.059.351-.117l10.302-8.254v13.405H1.114h.001z"/>
        </symbol>
        <symbol id="icon-mail-open" viewBox="0 0 23 24">
            <path d="M22.199 8.99a.558.558 0 0 0-.001-.242l-.069-.136v-.07L11.626.15a.641.641 0 0 0-.827.001L10.688.15.073 8.458v.07a.589.589 0 0 0-.068.135l-.001.116a.736.736 0 0 0 0 .143.402.402 0 0 0-.001.083l-.001.04.001.044v13.984a.686.686 0 0 0 .685.671h20.979a.685.685 0 0 0 .685-.671V9.086a.63.63 0 0 0-.15-.096h-.003zM11.01 1.437l9.413 7.552-9.413 7.552-9.399-7.552 9.399-7.552zM1.22 22.514V10.472l9.315 7.483h.112a.641.641 0 0 0 .827-.001l9.356-7.482v12.084H1.194l.026-.042z"/>
        </symbol>
        <symbol id="icon-menu" viewBox="0 0 21 18">
            <path d="M19.234 2.62H1.205a.862.862 0 0 1-.878-.878c0-.527.41-.878.878-.878h18.029a.9.9 0 0 1 .878.878.9.9 0 0 1-.878.878zm0 14.517H1.205a.9.9 0 0 1-.878-.878.9.9 0 0 1 .878-.878h18.029a.9.9 0 0 1 .878.878.9.9 0 0 1-.878.878zm0-7.493H1.205a.9.9 0 0 1-.878-.878.9.9 0 0 1 .878-.878h18.029a.9.9 0 0 1 .878.878.9.9 0 0 1-.878.878z"/>
        </symbol>
        <symbol id="icon-minus" viewBox="0 0 12 2">
            <path d="M0 0h11.406v1.2H0z"/>
        </symbol>
        <symbol id="icon-notifications" viewBox="0 0 24 24">
            <path d="M12.048 23.59c1.229 0 2.224-.995 2.224-2.166h-4.39c-.06 1.171.937 2.166 2.166 2.166zm11.532-4.566s-2.166-1.756-3.337-3.102c-.937-1.112-.937-2.517-.937-4.332 0-2.4.059-5.444-2.693-8.429C15.442 1.873 14.037 1.288 13.1.995 13.04.41 12.516 0 11.93 0c-.586 0-1.054.41-1.171.995-.995.293-2.341.878-3.512 2.166C4.496 6.146 4.496 9.19 4.554 11.59c0 1.815.059 3.22-.937 4.332C2.446 17.268.339 19.024.28 19.024c-.234.176-.351.527-.234.82.117.293.35.468.702.468h22.244a.76.76 0 0 0 .702-.468c.234-.293.117-.644-.117-.82h.003zm-11.532-.175h-9.25a31.656 31.656 0 0 0 1.99-1.99c1.347-1.522 1.289-3.337 1.289-5.268 0-2.4-.06-4.859 2.34-7.434C9.94 2.459 11.99 2.225 11.99 2.225h.059s2.049.234 3.57 1.932c2.342 2.576 2.342 5.034 2.342 7.434 0 1.932-.06 3.746 1.288 5.268a31.656 31.656 0 0 0 1.99 1.99h-9.19z"/>
        </symbol>
        <symbol id="icon-notifications-null" viewBox="0 0 22 23">
            <path fill="#999" d="M20.648 17.357h-.537c-.444-.021-1.299-.39-1.356-1.634-.061-3.686-.55-6.623-1.455-8.737-1.051-2.459-2.634-3.858-4.837-4.281a.276.276 0 0 1-.226-.272V1.79a1.24 1.24 0 0 0-2.477 0v.645a.277.277 0 0 1-.224.272c-2.159.42-3.781 1.862-4.823 4.285-.916 2.127-1.411 5.062-1.471 8.723-.058 1.251-.912 1.62-1.356 1.642h-.537v-.554h.515c.096-.008.777-.099.824-1.105.061-3.725.571-6.73 1.515-8.924 1.084-2.517 2.766-4.051 5.003-4.562v-.42C9.206.804 10.01 0 10.998 0c.989 0 1.792.804 1.792 1.792v.417c2.253.507 3.942 2.04 5.02 4.56.945 2.211 1.437 5.135 1.499 8.937.047 1.014.749 1.092.823 1.097h.516v.554zm.15 2.551H1.2c-.662 0-1.2-.539-1.2-1.201v-.703c0-.663.482-1.201 1.074-1.201h.798v.554h-.798c-.282 0-.52.296-.52.647v.703c0 .356.29.647.647.647h19.598a.648.648 0 0 0 .646-.647v-.703c0-.351-.239-.647-.521-.647h-.798v-.554h.798c.593 0 1.075.538 1.075 1.201v.703c0 .662-.538 1.201-1.201 1.201zM11 22.722c-1.683 0-3.054-1.387-3.054-3.091v-.277h6.106v.277c0 1.704-1.369 3.091-3.051 3.091H11zm-2.485-2.814c.136 1.269 1.198 2.26 2.485 2.26 1.285 0 2.346-.991 2.482-2.26H8.515zm-6.644-2.827h18.255v.277H1.871v-.277zM9.51 2.713l-.053-.272a8.05 8.05 0 0 1 1.542-.143 8.2 8.2 0 0 1 1.541.14l-.052.272a7.916 7.916 0 0 0-1.49-.135c-.519 0-1.02.046-1.488.137v.001z"/>
        </symbol>
        <symbol id="icon-numbered-list" viewBox="0 0 24 17">
            <path d="M23.099 2.911H7.499a.9.9 0 0 1-.9-.884.9.9 0 0 1 .9-.886h15.615a.9.9 0 0 1 .9.884.9.9 0 0 1-.9.886h-.016.001zm-21.66 1.05v-2.46h-.96V.916h.39c.126-.032.236-.084.333-.152a.815.815 0 0 0 .31-.236.816.816 0 0 0 0-.368l.616.006v3.795h-.689zm.93.165H1.274v-2.46h-.96V.751h.525a.812.812 0 0 0 .287-.137.625.625 0 0 0 .192-.177.667.667 0 0 0 .106-.299V0h.915l.03 4.126zm-.765-.33h.435V.331h-.315a.925.925 0 0 1-.137.288.97.97 0 0 1-.294.28 1.153 1.153 0 0 1-.387.151l-.262.031v.255h.945l.015 2.46zm21.495 5.205H7.514a.885.885 0 1 1 0-1.77h15.585a.885.885 0 1 1 0 1.77zM.359 7.171c.057-.184.144-.344.257-.483.114-.138.259-.25.426-.324.181-.079.383-.123.596-.123h.038c.168 0 .329.027.48.078.151.053.291.135.411.238.117.101.213.225.281.367.102.17.163.366.168.575l.001.039c0 .165-.033.322-.093.465-.06.131-.14.25-.238.353a2.106 2.106 0 0 1-.337.28l-.397.26-.435.21c-.126.1-.235.213-.327.34l1.827.005v.66H.197v-.041c0-.189.033-.371.094-.54.06-.156.147-.3.254-.426.11-.132.233-.25.368-.354l.47-.334.27-.18.255-.195c.075-.069.14-.148.192-.235a.603.603 0 0 0 .093-.304l.001-.034a.566.566 0 0 0-.166-.402.554.554 0 0 0-.38-.15l-.026.001h-.021a.492.492 0 0 0-.265.077.59.59 0 0 0-.176.205.937.937 0 0 0-.106.298 1.597 1.597 0 0 0 0 .312l-.765-.006a1.826 1.826 0 0 1 .078-.643l-.008.011zm2.775 3.105H.014v-.165-.031c0-.215.039-.421.109-.611.073-.173.174-.331.297-.47.119-.138.252-.261.397-.369l.472-.335.225-.195.24-.18a.882.882 0 0 0 .163-.206.445.445 0 0 0 .002-.233.404.404 0 0 0-.104-.312.417.417 0 0 0-.482.001.415.415 0 0 0-.132.147c-.002.01-.002.019-.002.028 0 .055.006.108.016.159a1.627 1.627 0 0 0-.001.271v.159H.119v-.15l-.001-.062a2 2 0 0 1 .095-.612c.059-.193.157-.373.284-.529.13-.157.295-.284.484-.369a1.718 1.718 0 0 1 1.235.001 1.5 1.5 0 0 1 .455.268c.137.099.252.224.34.368a1.293 1.293 0 0 1 .107.656 1.357 1.357 0 0 1-.108.499c-.068.147-.159.28-.267.397a2.303 2.303 0 0 1-.366.309L1.979 9l-.36.27h1.515v1.006zm-2.76-.33h2.43v-.33H.854l.195-.27c.105-.131.224-.245.355-.341l.395-.289.39-.255a2.01 2.01 0 0 0 .314-.269c.086-.091.156-.195.208-.309.049-.118.076-.247.078-.381v-.008a.973.973 0 0 0-.093-.418.964.964 0 0 0-.236-.308 1.134 1.134 0 0 0-.353-.194 1.416 1.416 0 0 0-.992.001c-.14.063-.265.16-.364.28-.101.125-.178.27-.224.428a1.516 1.516 0 0 0-.001.407l.329-.008s.015-.18.03-.18a1.13 1.13 0 0 1 .123-.336.75.75 0 0 1 .235-.263.651.651 0 0 1 .36-.107h.018l.031-.001a.72.72 0 0 1 .494.196.734.734 0 0 1 .21.509v.003a.758.758 0 0 1-.107.39c-.061.106-.136.2-.222.281l-.286.211-.675.495a2.155 2.155 0 0 0-.358.327 1.362 1.362 0 0 0-.224.383c-.051.11-.088.225-.107.347l-.003.009zm22.725 5.325H7.514a.885.885 0 1 1 0-1.77h15.585a.885.885 0 1 1 0 1.77zm-21.585-1.26a.839.839 0 0 0 .259-.001.507.507 0 0 0 .189-.148.407.407 0 0 0 .15-.363l.001-.024a.447.447 0 0 0-.165-.348.584.584 0 0 0-.439-.09l-.022-.001a.523.523 0 0 0-.408.195.745.745 0 0 0-.15.483l-.66-.002c.004-.195.042-.38.109-.551a1.22 1.22 0 0 1 .663-.676c.147-.05.306-.077.473-.078a1.44 1.44 0 0 1 .459.001c.147.048.281.119.399.211.119.087.219.197.294.323a.87.87 0 0 1 .123.446V13.402c0 .175-.05.339-.137.478a.661.661 0 0 1-.383.28l-.004.001a.828.828 0 0 1 .494.298.88.88 0 0 1 .181.537v.029a1.157 1.157 0 0 1-.433.904c-.13.105-.279.187-.442.239-.161.05-.333.078-.513.078h-.053c-.198 0-.388-.033-.566-.094a1.206 1.206 0 0 1-.438-.267 1.207 1.207 0 0 1-.282-.426 1.438 1.438 0 0 1-.032-.464l.735.006a1.05 1.05 0 0 0 .001.29.714.714 0 0 0 .121.236.586.586 0 0 0 .191.162.632.632 0 0 0 .724-.163.642.642 0 0 0 .088-.768.48.48 0 0 0-.205-.161.896.896 0 0 0-.294-.001l-.22-.001v-.585l.192.001zm0 2.49h-.009c-.223 0-.436-.039-.634-.109a1.374 1.374 0 0 1-.498-.297 1.353 1.353 0 0 1-.326-.485 1.619 1.619 0 0 1-.032-.618l-.001-.201h1.05v.21a.902.902 0 0 0 .001.245.58.58 0 0 0 .09.177c.039.049.089.09.147.118a.53.53 0 0 0 .543-.075.388.388 0 0 0 .12-.282c0-.011 0-.023-.002-.034a.38.38 0 0 0 0-.226.325.325 0 0 0-.132-.102l-.227-.001h-.45v-.945H.104v-.165c.008-.212.051-.412.124-.597.067-.169.169-.324.296-.453.129-.128.284-.23.456-.297a1.666 1.666 0 0 1 1.116 0c.166.048.32.125.458.224.135.098.25.223.338.366.079.147.124.316.124.495l-.001.053V13.5c0 .211-.061.408-.168.574a.782.782 0 0 1-.161.174.98.98 0 0 1 .33.182c.13.174.209.395.209.634v.044c0 .416-.192.787-.493 1.029-.142.118-.307.21-.487.269a1.896 1.896 0 0 1-.737.093l.006.002zm-1.23-1.38c.007.131.034.254.078.369.051.138.133.264.237.366.108.099.239.176.383.223a1.614 1.614 0 0 0 1.024-.001c.138-.045.268-.117.381-.209a.989.989 0 0 0 .373-.779v-.025a.722.722 0 0 0-.151-.442.662.662 0 0 0-.384-.238l-.139-.001v-.27h.12a.497.497 0 0 0 .299-.208.738.738 0 0 0 .181-.403v-.018a.693.693 0 0 0-.092-.348.935.935 0 0 0-.251-.28 1.138 1.138 0 0 0-.354-.18 1.372 1.372 0 0 0-.888.001c-.125.05-.24.127-.335.222-.096.1-.172.22-.223.353a1.442 1.442 0 0 0-.09.238l.388.009a.86.86 0 0 1 .166-.422.687.687 0 0 1 .494-.208h.03c.177 0 .339.062.465.166.157.1.266.268.284.462v.012a.567.567 0 0 1-.121.351.662.662 0 0 1-.265.192.948.948 0 0 1-.325.001l-.054.001v.21h.135a1.066 1.066 0 0 1 .336.001c.11.048.207.125.277.222a.809.809 0 0 1-.118.992.79.79 0 0 1-.522.196l-.034-.001h-.014a.83.83 0 0 1-.349-.077.774.774 0 0 1-.249-.206.87.87 0 0 1-.15-.28.971.971 0 0 1-.001-.19l-.542.199zm.825-1.29h.615a.33.33 0 0 0 .134-.104.233.233 0 0 0 .001-.153.285.285 0 0 0-.104-.238.417.417 0 0 0-.238-.135.345.345 0 0 0-.317.134.583.583 0 0 0-.105.377l.014.119z"/>
        </symbol>
        <symbol id="icon-part-paid" viewBox="0 0 40 24">
            <path d="M8.801 21.753c-.465-3.574-3.243-6.379-6.764-6.881l-.043-5.975c3.527-.566 6.263-3.355 6.742-6.864l21.895-.042 1.99-1.99H.956A.956.956 0 0 0 0 .957c0 .028.002.055.004.083v21.688c0 .527.427.956.955.956h7.204l1.99-1.99-1.352.059zM1.995 1.991h4.796A5.984 5.984 0 0 1 2.032 6.88l-.037-4.889zm0 19.762v-4.935c2.523.429 4.487 2.393 4.91 4.88l-4.91.055zm36.1-5.832c-.67 0-1.214-.544-1.214-1.214V8.996a1.213 1.213 0 1 1 2.407-.007l.001 5.698v.02c0 .664-.532 1.203-1.193 1.213l-.001.001zm1.214 8.08h-3.622a1.213 1.213 0 1 1-.006-2.407l1.22-.001v-1.214a1.213 1.213 0 1 1 2.407-.006l.001 3.628zm-7.562 0h-3.88a1.213 1.213 0 1 1-.006-2.407l3.986-.001A1.213 1.213 0 1 1 31.853 24l-.106.001zm-7.961 0h-3.88a1.215 1.215 0 1 1 .006-2.407l3.974-.001a1.214 1.214 0 1 1-.006 2.408h-.094zm-7.861 0h-2.348a1.213 1.213 0 1 1-.006-2.407l2.354-.001A1.213 1.213 0 1 1 15.931 24l-.006.001zm2.388-12.597v-.002a1.67 1.67 0 0 1 1.588-1.669 1.725 1.725 0 0 1 .47.001l1.523-1.354a3.544 3.544 0 0 0-1.915-.554 3.581 3.581 0 0 0-3.071 5.426l1.463-1.429a1.595 1.595 0 0 1-.06-.417l.002-.002zm-3.342 3.701a5.907 5.907 0 0 1-1.034-3.154 5.973 5.973 0 0 1 5.97-5.981 5.645 5.645 0 0 1 3.523.988l1.274-1.266a7.187 7.187 0 0 0-4.669-1.712h-.029a7.96 7.96 0 0 0-6.449 12.523l1.414-1.398zM36.88 2.329v.975a1.213 1.213 0 1 0 2.407.006L39.288 0 36.88 2.329z"/>
        </symbol>
        <symbol id="icon-pause" viewBox="0 0 16 16">
            <g fill="currentColor" fill-rule="evenodd"><path d="M0 0h6v16H0zM10 0h6v16h-6z"></path></g>
        </symbol>
        <symbol id="icon-payment-refunded" viewBox="0 0 35 24">
            <path d="M15.181 8.956a6.043 6.043 0 0 0-3.828 10.567l.142.096a5.999 5.999 0 0 0 3.697 1.263 6.012 6.012 0 0 0 3.511-1.124l.148-.109A6.04 6.04 0 0 0 15.19 8.957l-.009-.001zm0 10.573h-.002c-.933 0-1.8-.282-2.521-.766a2.627 2.627 0 0 1 1.51-1.6c.291.097.608.157.938.157.33 0 .647-.06.94-.169a2.593 2.593 0 0 1 1.487 1.665 4.312 4.312 0 0 1-2.349.712l-.003.001zm-1.284-4.939v-.005a1.269 1.269 0 1 1 1.806 1.15l-.008.003a1.269 1.269 0 0 1-1.798-1.147v-.001zm4.803 3.263a4.075 4.075 0 0 0-1.346-1.607 2.841 2.841 0 0 0 .535-1.652 2.734 2.734 0 1 0-4.968 1.576 3.935 3.935 0 0 0-1.4 1.48 4.329 4.329 0 0 1-.89-2.662 4.531 4.531 0 1 1 8.048 2.857l.021.008zM34.741 7.069a7.16 7.16 0 0 0-14.207-1.176L.727 5.937H.725a.726.726 0 0 0-.723.772V23.17c0 .401.325.725.725.725h28.531c.4 0 .725-.325.725-.725v-9.35c2.796-1.022 4.756-3.657 4.758-6.752v.001zm-7.129 5.663h-.061a5.679 5.679 0 1 1 5.679-5.679v.016a5.678 5.678 0 0 1-5.615 5.663h-.003zm-26.1 9.712v-3.745a4.544 4.544 0 0 1 3.727 3.704l-3.727.041zm27.066 0h-3.64a4.394 4.394 0 0 1 3.553-3.561l.087 3.561zm0-5.045a5.932 5.932 0 0 0-5.056 5.013l-16.844.032a6.053 6.053 0 0 0-5.133-5.222l-.032-9.776h18.941c.18 3.785 3.293 6.786 7.106 6.786.338 0 .671-.023.997-.069l.021 3.236zm-.105-12.838h-2.145l.755-.755a.644.644 0 0 0-.459-1.105.657.657 0 0 0-.46.186l-1.858 1.858v.076l.166.076h-.302v.121a.692.692 0 0 0-.004.068c0 .024.002.047.004.071-.002.011-.002.026-.002.043a.68.68 0 0 0 .002.047l.181-.002-.181.167h.181l-.151.106.091.151 1.873 1.782a.66.66 0 0 0 .92-.001.646.646 0 0 0 .191-.461.646.646 0 0 0-.191-.46l-.755-.755h2.145c1.42 0 2.13.559 2.13 1.676s-.725 1.676-2.13 1.676h-1.873a.65.65 0 0 0 0 1.298h1.873c2.145 0 3.428-1.103 3.428-3.021s-1.284-2.839-3.428-2.839l-.001-.003z"/>
        </symbol>
        <symbol id="icon-pencil-null" viewBox="0 0 24 24">
            <path fill="#999" d="M.788 24.001a.653.653 0 0 1-.652-.638L0 16.992c.008-.302.131-.574.326-.774L16.625.191a.636.636 0 0 1 .91 0l6.302 6.465a.651.651 0 0 1 0 .91L7.593 23.661a1.203 1.203 0 0 1-.758.312H.788v.028zM17.087.681L.788 16.695a.509.509 0 0 0-.122.283l.136 6.359h6.031a.57.57 0 0 0 .3-.123L23.322 7.12 17.087.681zM7.171 23.499H7.17a.323.323 0 0 1-.23-.095L.366 16.817a.338.338 0 0 1 0-.476.328.328 0 0 1 .476 0l6.56 6.588a.338.338 0 0 1 0 .476.323.323 0 0 1-.23.095h-.001v-.001zM21.256 9.495h-.001a.323.323 0 0 1-.23-.095l-6.56-6.587a.338.338 0 0 1 0-.476.328.328 0 0 1 .476 0l6.56 6.588a.338.338 0 0 1 0 .476.323.323 0 0 1-.23.095h-.015v-.001zM2.458 23.431L.76 21.584l-.149 2.187 1.847-.34z"/>
        </symbol>
        <symbol id="icon-pictures-null" viewBox="0 0 24 24">
            <path fill="#999" d="M18.64 16.938a.095.095 0 0 1-.033-.005l-2.614-.7.064-.242 2.495.67 3.069-11.455-12.77-3.42L7.714 6.03l-.242-.065L8.642 1.6a.122.122 0 0 1 .152-.087l13.011 3.486a.127.127 0 0 1 .089.153L18.76 16.846a.125.125 0 0 1-.121.092h.001zm-.394 3.95a.974.974 0 0 1-.249-.033l-2.029-.543.115-.43 2.029.544a.52.52 0 0 0 .636-.367l4.087-15.252a.52.52 0 0 0-.367-.637L8.638.464a.522.522 0 0 0-.637.367L6.602 6.055l-.43-.116 1.4-5.224A.966.966 0 0 1 8.754.033l13.83 3.705a.965.965 0 0 1 .683 1.181L19.18 20.173a.969.969 0 0 1-.933.715h-.001zm-2.963 2.606H.964A.965.965 0 0 1 0 22.53V6.74c0-.533.433-.966.964-.966h5.422v.446H.964a.52.52 0 0 0-.519.52v15.79c0 .287.232.52.519.52h14.319a.52.52 0 0 0 .52-.52v-2.433h.445v2.433a.965.965 0 0 1-.965.964v.001zm.965-3.397h-.445V6.74a.52.52 0 0 0-.52-.519H6.387v-.446h8.897c.532 0 .965.433.965.965v13.358h-.001zm-1.389-.549H1.389a.124.124 0 0 1-.124-.125V7.315c0-.069.056-.125.124-.125h13.47c.069 0 .124.056.124.125v12.108a.125.125 0 0 1-.124.125zM1.514 19.3h13.22V7.441H1.514V19.3z"/>
        </symbol>
        <symbol id="icon-play" viewBox="0 0 16 16">
            <path fill="currentColor" fill-rule="evenodd" d="M16 8L0 16V0z"></path>
        </symbol>
        <symbol id="icon-priority" viewBox="0 0 24 24">
            <path fill="#dd1e31" d="M12.007 14.261a.849.849 0 0 1-.849-.849V6.859a.849.849 0 1 1 1.684.005v6.549a.849.849 0 0 1-.834.849l-.001-.001zm1.057 2.894a1.016 1.016 0 1 1-2.032 0 1.016 1.016 0 0 1 2.032 0zm-1.057 6.859C5.376 24.014 0 18.638 0 12.007 0 5.376 5.376 0 12.007 0c6.631 0 12.007 5.376 12.007 12.007v.015c-.008 6.625-5.381 11.992-12.007 11.992zm0-22.261c-5.671 0-10.268 4.597-10.268 10.268s4.597 10.268 10.268 10.268 10.268-4.597 10.268-10.268S17.678 1.753 12.007 1.753z"/>
        </symbol>
        <symbol id="icon-profile" viewBox="0 0 22 22">
            <path d="M8.854 0h3.539c3.489 0 3.979 4.028 3.979 4.028s-.014 4.239-.014 5.237c0 .313-2.189 6.226-2.189 6.226l7.074 3.544s-1.268 2.201-2.658 2.201-13.022.014-15.927.014C1.31 21.25 0 19.036 0 19.036l7.107-3.586S4.878 9.752 4.878 9.266c0-1.247-.027-5.279-.027-5.279S5.531 0 8.854 0z"/>
        </symbol>
        <symbol id="icon-radio-checked" viewBox="0 0 24 24">
            <path d="M11.789 23.4C5.289 23.4 0 18.152 0 11.7 0 5.249 5.289 0 11.789 0s11.789 5.249 11.789 11.7c0 6.453-5.289 11.7-11.789 11.7zm0-22.067C6.024 1.333 1.333 5.984 1.333 11.7c0 5.716 4.691 10.367 10.456 10.367S22.245 17.416 22.245 11.7c0-5.716-4.691-10.367-10.456-10.367zm6.104 10.219c0 3.305-2.787 5.984-6.224 5.984-3.437 0-6.224-2.679-6.224-5.984s2.787-5.984 6.224-5.984c3.437 0 6.224 2.679 6.224 5.984z"/>
        </symbol>
        <symbol id="icon-radio-unchecked" viewBox="0 0 24 24">
            <path d="M11.789 23.4C5.289 23.4 0 18.151 0 11.7S5.289 0 11.789 0s11.789 5.249 11.789 11.7c0 6.453-5.289 11.7-11.789 11.7zm0-22.067C6.024 1.333 1.333 5.984 1.333 11.7c0 5.716 4.691 10.367 10.456 10.367S22.245 17.416 22.245 11.7c0-5.716-4.691-10.367-10.456-10.367z"/>
        </symbol>
        <symbol id="icon-relisted" viewBox="0 0 28 24">
            <path d="M4.767 2.407a2.222 2.222 0 1 0 2.221 2.236v-.015a2.222 2.222 0 0 0-2.221-2.221zm.726 2.22a.726.726 0 1 1-.726-.726h.015c.393 0 .712.319.712.712l-.001.03v-.016zm22.065 6.377V11a8.341 8.341 0 0 0-12.732-7.093L11.189.214A.753.753 0 0 0 10.663 0h-8.03A2.633 2.633 0 0 0 0 2.618v8.044c.004.207.09.392.227.526l12.057 12.057c.433.468 1.051.76 1.737.76a2.36 2.36 0 0 0 1.736-.759l3.916-3.916c4.403-.256 7.878-3.884 7.886-8.326h-.001zm-16.712 0a8.374 8.374 0 0 0 6.766 8.191l-2.922 2.984c-.16.195-.4.32-.668.327a.968.968 0 0 1-.683-.326L1.509 10.349V2.62a1.153 1.153 0 0 1 1.123-1.124h7.717l3.288 3.288a8.313 8.313 0 0 0-2.79 6.22v.001l-.001-.001zm1.31 0a7.117 7.117 0 1 1 7.117 7.118h-.014a7.117 7.117 0 0 1-7.117-7.117l.014-.001zm12.043.542c0-2.149-1.424-3.445-3.957-3.445h-2.847l1.11-1.082a.666.666 0 0 0 0-.939.683.683 0 0 0-.94.001l-2.249 2.22v.285a.758.758 0 0 0 .001.145v.296l2.221 2.221a.68.68 0 0 0 .94-.001.666.666 0 0 0-.001-.939l-1.096-1.096h2.847c1.224 0 2.676.37 2.676 2.121s-1.424 2.121-2.676 2.121h-2.235a.668.668 0 1 0 .003 1.323l2.245.001c2.534.214 3.957-1.068 3.957-3.231l.001-.001z"/>
        </symbol>
        <symbol id="icon-requested-total" viewBox="0 0 22 24">
            <path d="M15.51 9.773V7.615c.483.078.892.348 1.153.728a.55.55 0 0 0 .976-.491 2.823 2.823 0 0 0-2.115-1.405l-.014-.002a.55.55 0 1 0-1.085.003l-.001-.003a2.272 2.272 0 0 0-2.186 2.196 2.27 2.27 0 0 0 2.182 2.146l.004 2.158a1.73 1.73 0 0 1-1.139-.727.55.55 0 1 0-.99.477A2.823 2.823 0 0 0 14.41 14.1l.014.002a.55.55 0 1 0 1.085-.003v.003a2.273 2.273 0 0 0 2.186-2.138 2.27 2.27 0 0 0-2.18-2.191h-.004zm-1.085-.098c-.522-.113-1.086-.395-1.086-1.03s.564-.917 1.086-1.03v2.06zm1.085 3.271v-2.059c.522.113 1.086.395 1.086 1.03s-.55.916-1.086 1.03v-.001zM20.642.001H.001v22.731L0 22.769c0 .293.095.565.257.785a1.168 1.168 0 0 0 1.58.177l2.605-1.648a.446.446 0 0 1 .426.002l1.408 1.409c.311.282.727.455 1.182.455.376 0 .724-.118 1.009-.317l1.912-1.505a.546.546 0 0 1 .483.001l2.097 1.549c.28.203.628.324 1.005.324h.024c.472 0 .899-.188 1.212-.494l1.41-1.41a.378.378 0 0 1 .383.001l2.324 1.592c.213.151.476.244.76.254a1.115 1.115 0 0 0 1.087-1.232l.001-18.482C21.151.225 21.151.225 20.643 0v.001zm-.987 22.167l-1.903-1.297a1.806 1.806 0 0 0-.94-.26c-.51 0-.97.207-1.301.542l-1.41 1.41a.33.33 0 0 1-.354-.001l-2.1-1.55a1.898 1.898 0 0 0-2.248.004l-1.827 1.477a.28.28 0 0 1-.311-.001l-1.409-1.409a1.882 1.882 0 0 0-1.286-.505c-.346 0-.67.093-.95.256L1.41 22.296V1.412h18.244c.014 2.947 0 14.101 0 20.799v-.043zM4.23 9.125h5.133a.663.663 0 1 0-.003-1.311L4.23 7.813a.663.663 0 1 0 .003 1.311l-.004.001zm12.38 7.078H4.23a.663.663 0 1 0 .003 1.311l12.39.001a.664.664 0 0 0 .567-.655.664.664 0 0 0-.563-.655l-.017-.002zM4.23 13.326h5.133a.663.663 0 0 0 .003-1.31l-5.137-.001a.663.663 0 1 0 .003 1.311H4.23z"/>
        </symbol>
        <symbol id="icon-right-aligned" viewBox="0 0 24 18">
            <path d="M7.995 2.64H23.07a.93.93 0 0 0 .93-.93v-.016-.014a.93.93 0 0 0-.93-.93H7.995a.93.93 0 0 0-.93.93v.03c0 .514.416.93.93.93zM4.89 17.25h18.18a.945.945 0 1 0 0-1.89H4.89a.945.945 0 1 0 0 1.89zM.93 9.945h22.14a.945.945 0 1 0 0-1.89H.93a.945.945 0 1 0 0 1.89z"/>
        </symbol>
        <symbol id="icon-right-justified" viewBox="0 0 24 17">
            <path d="M23.07 9.195H.93A.946.946 0 0 1 .925 7.32H23.07a.946.946 0 0 1 .005 1.875h-.005zm0-7.32H.93A.93.93 0 0 1 0 .945V.93A.93.93 0 0 1 .93 0h22.14a.93.93 0 0 1 .93.93v.016a.93.93 0 0 1-.93.929zm0 14.625H10.23a.946.946 0 0 1-.005-1.875H23.07a.946.946 0 0 1 .005 1.875h-.005z"/>
        </symbol>
        <symbol id="icon-save" viewBox="0 0 25 24">
            <path d="M24.058 18.424a.59.59 0 0 0-.591.591v2.032c0 .977-.795 1.773-1.773 1.773H2.955a1.775 1.775 0 0 1-1.773-1.773v-2.032a.59.59 0 1 0-1.182 0v2.032a2.957 2.957 0 0 0 2.954 2.954h18.739a2.957 2.957 0 0 0 2.954-2.954v-2.032a.59.59 0 0 0-.591-.591h.002zm-12.063 1.081c.008.005.017.007.025.012a.69.69 0 0 0 .06.032c.013.006.026.01.04.015h.001c.017.006.033.014.05.019a.624.624 0 0 0 .149.022l.005.001h.001c.001 0 0 0 0 0h.001l.005-.001a.577.577 0 0 0 .149-.022c.017-.005.033-.012.05-.019h.001c.014-.005.027-.009.04-.015a.495.495 0 0 0 .06-.032c.008-.005.018-.006.025-.012l4.475-3.009a.59.59 0 0 0-.659-.981l-3.555 2.389V.591a.59.59 0 1 0-1.182 0v17.313l-3.555-2.389a.59.59 0 1 0-.659.981l4.475 3.009h-.002z"/>
        </symbol>
        <symbol id="icon-search" viewBox="0 0 20 20">
            <path d="M19.786 18.557l-5.093-5.093a8.1 8.1 0 0 0 1.873-5.21C16.507 3.747 12.82 0 8.254 0 3.688 0 0 3.746 0 8.254c0 4.508 3.688 8.312 8.254 8.312 2.049 0 3.863-.761 5.327-1.932l5.093 5.093a.714.714 0 0 0 .527.234c.176 0 .41-.059.527-.234.351-.351.351-.878.059-1.171l-.001.001zM1.581 8.254a6.67 6.67 0 0 1 6.673-6.673 6.67 6.67 0 0 1 6.673 6.673c0 3.688-2.985 6.732-6.673 6.732s-6.673-2.985-6.673-6.732z"/>
        </symbol>
        <symbol id="icon-search" viewBox="0 0 23 23">
            <path d="M21.897 12.698L9.867.664C9.481.281 8.783 0 8.207 0c-.046 0-.09.004-.132.008L1.99.499C1.355.548.785 1.106.714 1.736L.01 8.092c-.064.593.213 1.38.63 1.8l12.03 12.03a1.199 1.199 0 0 0 1.699 0l7.53-7.526c.225-.229.35-.529.35-.852 0-.323-.125-.622-.35-.847v.001zM4.714 5.858c-.69 0-1.253-.559-1.253-1.249a1.252 1.252 0 0 1 2.502 0c0 .69-.559 1.249-1.249 1.249z"/>
        </symbol>
        <symbol id="icon-search-null" viewBox="0 0 24 24">
            <path d="M9.554 17.149c-4.18 0-7.58-3.4-7.58-7.58s3.4-7.58 7.58-7.58 7.58 3.4 7.58 7.58-3.401 7.58-7.58 7.58zm0-14.878c-4.024 0-7.298 3.274-7.298 7.298s3.273 7.297 7.298 7.297c4.024 0 7.298-3.274 7.298-7.298S13.578 2.27 9.554 2.27v.001zm11.45 20.884c-.368 0-.714-.143-.972-.401l-5.223-5.223a9.492 9.492 0 0 1-5.255 1.577C4.286 19.108 0 14.822 0 9.553S4.286 0 9.554 0c5.268 0 9.553 4.286 9.553 9.553a9.5 9.5 0 0 1-1.588 5.273l5.22 5.22c.259.258.401.604.401.972 0 .367-.142.713-.401.972l-.763.763a1.368 1.368 0 0 1-.972.401v.001zM14.876 16.8l5.554 5.554a.801.801 0 0 0 .573.236c.217 0 .42-.084.572-.236l.763-.763a.799.799 0 0 0 .236-.572.805.805 0 0 0-.236-.573l-5.552-5.552.136-.195a8.938 8.938 0 0 0 1.62-5.145c0-4.956-4.033-8.988-8.989-8.988S.564 4.598.564 9.554c0 4.956 4.032 8.989 8.989 8.989a8.932 8.932 0 0 0 5.128-1.608l.194-.135h.001z"/>
        </symbol>
        <symbol id="icon-second-chance" viewBox="0 0 30 24">
            <path d="M4.77 2.404A2.222 2.222 0 1 0 6.991 4.64v-.015A2.222 2.222 0 0 0 4.77 2.404zm.726 2.22a.726.726 0 1 1-.726-.726h.015c.393 0 .712.319.712.712l-.001.03v-.016zm23.702 5.822l.697-2.05a1.42 1.42 0 0 0-.523-1.62L27.66 5.521l-.612-2.007a1.426 1.426 0 0 0-1.363-1.012l-.064.002H23.46l-1.737-1.281a1.493 1.493 0 0 0-.897-.295 1.5 1.5 0 0 0-.901.299l-1.704 1.264h-2.135a1.51 1.51 0 0 0-1.421 1.001l-.003.224L11.189.214A.753.753 0 0 0 10.663 0H2.619A2.633 2.633 0 0 0 0 2.618v8.044c.004.207.09.392.227.527l12.057 12.057a2.36 2.36 0 0 0 3.472.002l3.887-3.888.37.271a1.417 1.417 0 0 0 1.74-.002l1.705-1.265h2.164c.655 0 1.211-.417 1.42-1l.658-2.018 1.723-1.253a1.423 1.423 0 0 0 .467-1.647l-.692-2zM11.845 8.411l.669 2.007-.669 2.035a1.423 1.423 0 0 0 .522 1.634l1.713 1.256.669 2.007a1.426 1.426 0 0 0 1.427 1.01h2.104l.143.1-3.716 3.716c-.16.195-.4.32-.668.327a.968.968 0 0 1-.683-.326L1.512 10.347V2.618a1.153 1.153 0 0 1 1.123-1.124h7.717l3.886 3.815v.185l-1.85 1.267a1.424 1.424 0 0 0-.537 1.661l-.006-.011zm15.93 2.491l.697 1.993-1.737 1.267a1.657 1.657 0 0 0-.481.7l-.63 1.991h-2.135c-.322 0-.619.107-.858.287l-1.705 1.25-1.68-1.224a1.418 1.418 0 0 0-.891-.314H16.256l-.655-1.964a1.427 1.427 0 0 0-.537-.78l-1.712-1.213.655-2.007a1.425 1.425 0 0 0-.06-.935l-.651-1.984 1.737-1.267c.218-.187.384-.427.481-.7l.644-2.004h2.135c.322 0 .62-.107.858-.287l1.691-1.264 1.694 1.238c.242.195.553.314.891.314h2.127l.655 1.964c.089.323.28.593.537.78l1.712 1.213-.683 2.007a1.436 1.436 0 0 0 .003.95l-.003-.011zm-4.784 2.007h-2.847c.076-.118.156-.22.244-.315.596-.539 1.18-1.066 1.778-1.593.475-.37.873-.814 1.183-1.317a2.178 2.178 0 0 0-1.14-3.162 3.396 3.396 0 0 0-1.144-.196c-.547 0-1.066.128-1.525.356a2.046 2.046 0 0 0-1.276 1.854.612.612 0 0 0 .366.627.625.625 0 0 0 .743-.238c.125-.202.235-.432.321-.674.18-.497.625-.828 1.147-.828.101 0 .199.012.293.035.525.119.917.59.917 1.152v.029a1.914 1.914 0 0 1-.527 1.123c-.355.327-.739.611-1.096.939-.357.328-1.081 1.039-1.623 1.566-.24.245-.415.553-.496.898a.726.726 0 0 0 .682.982l.044-.001h4.098l.034.001a.559.559 0 0 0 .506-.325.624.624 0 0 0-.085-.687.696.696 0 0 0-.601-.226h.004z"/>
        </symbol>
        <symbol id="icon-sell-null" viewBox="0 0 23 23">
            <path fill="#999" d="M13.52 22.272a1.19 1.19 0 0 1-.85-.351L.64 9.89C.221 9.471-.056 8.681.01 8.092l.704-6.358C.784 1.103 1.356.547 1.99.496L8.075.005C8.117.001 8.161 0 8.205 0c.578 0 1.277.279 1.662.664l12.03 12.03c.226.226.351.528.351.849 0 .321-.125.623-.35.849l-7.53 7.528a1.194 1.194 0 0 1-.849.351v.001zM8.204.554c-.029 0-.058.001-.086.003l-6.085.492a.888.888 0 0 0-.769.747L.56 8.155c-.046.418.174 1.047.472 1.345l12.03 12.03a.643.643 0 0 0 .457.188.643.643 0 0 0 .457-.188l7.528-7.528a.643.643 0 0 0 .188-.457.643.643 0 0 0-.188-.457L9.474 1.058C9.195.781 8.626.556 8.203.556l.001-.002zm-3.492 5.58a1.529 1.529 0 0 1-1.527-1.527c0-.842.685-1.527 1.527-1.527.842 0 1.527.685 1.527 1.527 0 .842-.685 1.527-1.527 1.527zm0-2.777a1.251 1.251 0 0 0 0 2.5 1.251 1.251 0 0 0 0-2.5z"/>
        </symbol>
        <symbol id="icon-seller-feedback" viewBox="0 0 28 24">
            <path d="M27.539 5.075a.911.911 0 0 0-.702-.627l-3.478-.642L21.81.547A.91.91 0 0 0 21.024 0H21.015a.909.909 0 0 0-.819.515l-1.605 3.304-1.683.32a10.397 10.397 0 0 0-5.976-1.87h-.078C4.862 2.269 0 7.131 0 13.127s4.861 10.858 10.858 10.858c5.997 0 10.858-4.861 10.858-10.858v-.05c0-.453-.029-.899-.085-1.337l2.45 1.387a.922.922 0 0 0 1.335-.967l-.574-3.681 2.484-2.484a.91.91 0 0 0 .211-.928l.002.008zm-6.972 5.196l-2.578 1.336.481-3.139a.92.92 0 0 0-.254-.789l-2.097-2.07 2.912-.548a.928.928 0 0 0 .652-.502l1.338-2.677 1.336 2.671a.91.91 0 0 0 .649.506l2.93.562-2.164 2.083a.922.922 0 0 0-.253.793l.52 3.106-2.671-1.336a.928.928 0 0 0-.808.003l.007.001zm-9.709 12.434a9.45 9.45 0 0 1-6.339-2.438l.008.008c1.283-2.173 3.613-3.607 6.277-3.607a7.265 7.265 0 0 1 6.259 3.573l.019.034a9.454 9.454 0 0 1-6.217 2.431l-.007-.001zM7.946 12.341a2.925 2.925 0 1 1 5.85 0 2.925 2.925 0 0 1-5.85 0zm10.191 6.958a8.65 8.65 0 0 0-4.627-3.602c.954-.801 1.602-2.019 1.602-3.388a4.247 4.247 0 1 0-6.841 3.363 8.716 8.716 0 0 0-4.657 3.592c-1.429-1.617-2.286-3.776-2.286-6.136 0-5.265 4.267-9.533 9.53-9.536h.06a9.22 9.22 0 0 1 4.108.959.834.834 0 0 0-.615.815c0 .258.107.491.28.656l2.497 2.485-.561 3.673a.908.908 0 0 0 1.339.946l2.386-1.253c.057.375.091.81.094 1.252a9.467 9.467 0 0 1-2.333 6.184l.024-.01z"/>
        </symbol>
        <symbol id="icon-settings" viewBox="0 0 22 22">
            <path d="M20.913 12.552h-1.002c-.458 0-.948.359-1.086.797l-.576 1.403c-.217.405-.127 1.006.195 1.329l.714.712a.839.839 0 0 1 0 1.184l-1.186 1.183a.838.838 0 0 1-1.182 0l-.71-.712c-.326-.324-.925-.413-1.33-.193l-1.402.576c-.439.136-.798.624-.798 1.084v1.003a.84.84 0 0 1-.837.835h-1.674a.839.839 0 0 1-.837-.835v-1.003c0-.46-.358-.948-.799-1.084L7 18.255c-.403-.22-1.002-.131-1.325.193l-.714.712a.837.837 0 0 1-1.181 0l-1.186-1.183a.843.843 0 0 1 0-1.184l.713-.712c.325-.323.414-.925.195-1.329l-.577-1.403c-.135-.438-.62-.797-1.083-.799H.837A.84.84 0 0 1 0 11.712v-1.674a.84.84 0 0 1 .837-.836l1.004.002c.462 0 .948-.361 1.086-.8l.574-1.403c.22-.406.131-1.002-.195-1.328l-.711-.713a.838.838 0 0 1 0-1.183L3.78 2.595a.837.837 0 0 1 1.181 0l.714.711c.326.326.922.415 1.328.196l1.4-.575c.441-.137.799-.626.799-1.086V.838A.84.84 0 0 1 10.039 0h1.674a.84.84 0 0 1 .837.838v1.003c0 .46.359.948.798 1.086l1.398.575c.408.219 1.007.129 1.331-.196l.713-.711a.838.838 0 0 1 1.182 0l1.186 1.182a.839.839 0 0 1 0 1.184l-.714.712c-.322.326-.413.923-.195 1.328l.576 1.4c.138.44.626.801 1.086.801h1.002c.462 0 .836.376.836.836v1.676a.836.836 0 0 1-.835.837l-.001.001zM10.876 6.995a3.881 3.881 0 1 0 0 7.764 3.882 3.882 0 1 0 0-7.764z"/>
        </symbol>
        <symbol id="icon-shopping-null" viewBox="0 0 24 22">
            <path fill="#999" d="M23.601 21.375H.242a.24.24 0 0 1-.241-.241V5.864c0-.133.108-.241.241-.241h23.359c.133 0 .241.108.241.241v15.27a.241.241 0 0 1-.241.241zM.482 20.893h22.877V6.105H.482v14.788zM8.942 8.78a.645.645 0 1 1-1.29 0 .645.645 0 0 1 1.29 0zm7.265 0a.646.646 0 1 1-1.291 0 .646.646 0 0 1 1.291 0zm-.404-.204h-.482V3.874A3.395 3.395 0 0 0 11.93.483a3.396 3.396 0 0 0-3.392 3.391v4.702h-.482V3.874A3.879 3.879 0 0 1 11.93 0a3.878 3.878 0 0 1 3.873 3.874v4.702z"/>
        </symbol>
        <symbol id="icon-sort" viewBox="0 0 20 24">
            <path d="M9.662 0L0 8.994v.691h19.322v-.691L9.662 0zM0 14.118l9.662 8.998 9.66-8.998v-.69H0v.69z"/>
        </symbol>
        <symbol id="icon-star" viewBox="0 0 23 23">
            <path d="M11.354 0l3.462 7.481 7.894 1.247-5.677 5.819 1.383 8.175-7.061-3.881-7.063 3.881 1.385-8.175L0 8.728l7.894-1.247L11.355 0z"/>
        </symbol>
        <symbol id="icon-strike-thru" viewBox="0 0 24 21">
            <path d="M24 9.003h-9.12a13.74 13.74 0 0 1-2.768-.536A10.509 10.509 0 0 1 8.154 7.1a2.28 2.28 0 0 1-.653-1.734 2.65 2.65 0 0 1 1.087-2.119 5.504 5.504 0 0 1 3.43-.889 5.33 5.33 0 0 1 3.493 1 4.18 4.18 0 0 1 1.364 2.889l2.625-.245a6.186 6.186 0 0 0-1.005-3.219A5.71 5.71 0 0 0 15.893.735a9.86 9.86 0 0 0-3.901-.733C11.939 0 11.868 0 11.797 0a9.403 9.403 0 0 0-3.61.715 5.342 5.342 0 0 0-2.43 1.983 5.18 5.18 0 0 0-.867 2.878v.023l-.001.074c0 .85.258 1.639.7 2.295.276.435.651 1.035 1.116 1.035H0v3h11.655l.148-.001c1.21 0 2.365.232 3.425.653a3.828 3.828 0 0 1 1.738.998c.336.413.54.947.54 1.528v.047c0 .64-.214 1.23-.575 1.702a3.694 3.694 0 0 1-1.694 1.215 7.246 7.246 0 0 1-2.719.457 7.473 7.473 0 0 1-3.116-.618 4.503 4.503 0 0 1-1.892-1.557 5.593 5.593 0 0 1-.833-2.499l-2.506.204a6.886 6.886 0 0 0 1.111 3.672 6.432 6.432 0 0 0 2.778 2.372 11.257 11.257 0 0 0 4.554.827 8.975 8.975 0 0 0 3.942-.817 6.01 6.01 0 0 0 2.586-2.16 5.546 5.546 0 0 0 .928-3.018l.001-.073c0-.932-.316-1.791-.848-2.474a.726.726 0 0 0-.605-.456H24V9.003z"/>
        </symbol>
        <symbol id="icon-success" viewBox="0 0 24 18">
            <path d="M3.389 5.36l9.057 9.057-3.389 3.389L0 8.749 3.388 5.36h.001zm2.701 8.656L20.106 0l3.389 3.389L9.479 17.405 6.09 14.016z"/>
        </symbol>
        <symbol id="icon-tag" viewBox="0 0 22 22">
            <path d="M21.334.187L21.147 0 17.84 3.28h-7.653L0 13.467l7.813 7.84 10.24-10.24v-7.6l3.28-3.28h.001zm-3.573 10.8l-9.947 9.947-7.44-7.467 9.92-9.92h7.28L15.681 5.44a1.004 1.004 0 0 0-.56-.187 1.012 1.012 0 1 0 1.013 1.013c0-.267-.107-.48-.267-.667l1.893-1.893v7.28l.001.001zm-1.893-4.693a.746.746 0 0 1-.747.747.764.764 0 0 1-.747-.747c0-.4.347-.747.747-.747s.747.32.747.747z"/>
        </symbol>
        <symbol id="icon-trash" viewBox="0 0 22 24">
            <path d="M14.587 16.28h.005c.34 0 .621-.255.662-.583v-5.443a.667.667 0 1 0-1.334 0v5.44a.668.668 0 0 0 .662.587h.005v-.001zm-4 0h.005c.34 0 .621-.255.662-.583v-5.443a.667.667 0 1 0-1.334 0v5.44a.668.668 0 0 0 .662.587h.005v-.001zm-4 0h.005c.34 0 .621-.255.662-.583v-5.443a.667.667 0 1 0-1.334 0v5.44a.668.668 0 0 0 .662.587h.005v-.001zM20.814 4h-4.653c0-1.333-.36-4-2.667-4H7.961C5.668 0 5.294 2.667 5.294 4H.667a.667.667 0 1 0 0 1.334H1.92v14.36c0 1.64 1.547 4.307 3.187 4.307h11.2c1.64 0 2.893-2.667 2.893-4.307V5.334h1.547l.033.001A.668.668 0 0 0 20.815 4h-.001zM7.96 1.333h5.547c1.173 0 1.467 1.333 1.467 2.667h-8.48c.013-1.333.307-2.667 1.467-2.667H7.96zm9.96 18.36c0 .987-.573 2.973-1.56 2.973H5.107c-.987 0-1.84-1.987-1.84-2.973V5.333h14.667v14.36h-.014z"/>
        </symbol>
        <symbol id="icon-underline" viewBox="0 0 21 24">
            <path d="M16.372 18.345a8.422 8.422 0 0 1-5.94 1.901 9.348 9.348 0 0 1-6.137-1.834 7.052 7.052 0 0 1-2.185-5.787L2.108.001h2.709v12.651a5.28 5.28 0 0 0 1.458 4.03 5.828 5.828 0 0 0 4.2 1.368 5.278 5.278 0 0 0 3.929-1.374 5.492 5.492 0 0 0 1.349-4.043L15.754 0h2.709v12.651a7.315 7.315 0 0 1-2.092 5.692l.001.002zM0 22.099h20.571v1.903H0v-1.903z"/>
        </symbol>
        <symbol id="icon-view-detail" viewBox="0 0 22 23">
            <path d="M21.824 13.591a.599.599 0 0 1-.597.597H.597A.599.599 0 0 1 0 13.591V.597C0 .269.268 0 .597 0h20.63a.6.6 0 0 1 .597.597v12.994zm.069 8.212a.6.6 0 0 1-.597.597H.684a.6.6 0 0 1-.597-.597v-4.352c0-.328.268-.597.597-.597h20.613a.6.6 0 0 1 .597.597v4.352h-.001z"/>
        </symbol>
        <symbol id="icon-view-grid" viewBox="0 0 22 22">
            <path d="M9.475 8.876a.599.599 0 0 1-.597.597H.597A.6.6 0 0 1 0 8.876V.597C0 .269.268 0 .597 0h8.281c.328 0 .597.268.597.597v8.279zm0 12.379a.599.599 0 0 1-.597.597H.597A.599.599 0 0 1 0 21.255v-8.278c0-.328.268-.597.597-.597h8.281c.328 0 .597.268.597.597v8.278zM21.857 8.876a.6.6 0 0 1-.597.597h-8.28a.6.6 0 0 1-.597-.597V.597c0-.328.268-.597.597-.597h8.28c.328 0 .597.268.597.597v8.279zm0 12.379a.6.6 0 0 1-.597.597h-8.28a.599.599 0 0 1-.597-.597v-8.278c0-.328.268-.597.597-.597h8.28c.328 0 .597.268.597.597v8.278z"/>
        </symbol>
        <symbol id="icon-view-list" viewBox="0 0 23 23">
            <path d="M5.546 4.947a.6.6 0 0 1-.597.597H.597A.6.6 0 0 1 0 4.947V.597C0 .269.268 0 .597 0h4.352a.6.6 0 0 1 .597.597v4.35zm17.242 0a.599.599 0 0 1-.597.597H8.589a.6.6 0 0 1-.597-.597V.597A.6.6 0 0 1 8.589 0h13.602a.6.6 0 0 1 .597.597v4.35zM5.546 13.226a.6.6 0 0 1-.597.597H.597A.599.599 0 0 1 0 13.226V8.875c0-.328.268-.597.597-.597h4.352a.6.6 0 0 1 .597.597v4.351zm17.242 0a.599.599 0 0 1-.597.597H8.589a.599.599 0 0 1-.597-.597V8.875a.6.6 0 0 1 .597-.597h13.602a.6.6 0 0 1 .597.597v4.351zM5.546 21.503a.6.6 0 0 1-.597.597H.597A.599.599 0 0 1 0 21.503v-4.351c0-.328.268-.597.597-.597h4.352c.328 0 .597.268.597.597v4.351zm17.242 0a.599.599 0 0 1-.597.597H8.589a.599.599 0 0 1-.597-.597v-4.351a.6.6 0 0 1 .597-.597h13.602c.328 0 .597.268.597.597v4.351z"/>
        </symbol>
        <symbol id="icon-watching-null" viewBox="0 0 24 9">
            <path d="M6.003 7.224c-1.042 0-1.925-.369-2.55-1.069-.672-.75-1.017-1.867-.9-2.918.22-1.992 1.194-2.211 3.207-2.211 1.405 0 2.82.555 3.519 1.379.401.472.562 1.021.468 1.587-.266 1.606-1.638 3.231-3.744 3.231v.001zm-.244-6.023c-1.952 0-2.829.195-3.034 2.056-.111 1.002.218 2.069.857 2.782.593.662 1.429 1.011 2.421 1.011 2.009 0 3.318-1.552 3.571-3.085.086-.523-.057-1.009-.429-1.446-.668-.787-2.028-1.317-3.386-1.317v-.001zm11.818 6.022c-2.106 0-3.478-1.625-3.744-3.23-.093-.567.068-1.116.468-1.588.699-.824 2.114-1.378 3.519-1.378 2.015 0 2.988.218 3.207 2.211.116 1.05-.229 2.168-.9 2.918-.627.699-1.509 1.068-2.551 1.068l.001-.001zm.243-6.022c-1.357 0-2.718.53-3.386 1.317-.371.437-.515.924-.429 1.446.254 1.533 1.562 3.085 3.571 3.085.992 0 1.829-.35 2.421-1.011.639-.713.968-1.78.857-2.782C20.649 1.395 19.772 1.2 17.82 1.2v.001zM5.995 8.099c-2.724 0-4.073-1.886-4.429-3.652l-.001-.007-.139-.861c-.178-.422-.539-.623-.803-.771C.39 2.677 0 2.356 0 1.657 0 1.056.489.512 1.09.444L3.507.17C4.134.021 4.922 0 5.681 0c1.9 0 3.797.783 4.671 1.915a6.123 6.123 0 0 1 2.874.002C14.101.784 15.998 0 17.898 0c.758 0 1.546.021 2.173.17l2.417.274c.601.069 1.09.612 1.09 1.213 0 .699-.391 1.021-.622 1.151-.264.147-.624.349-.803.771l-.141.867c-.355 1.766-1.705 3.652-4.428 3.652a4.776 4.776 0 0 1-3.295-1.286 5.15 5.15 0 0 1-1.583-2.922 2.485 2.485 0 0 1-.019-.693 6.854 6.854 0 0 0-.899-.064c-.298 0-.647.044-.896.083.024.221.017.447-.021.675a5.145 5.145 0 0 1-1.583 2.922A4.772 4.772 0 0 1 5.994 8.1l.001-.001zM1.909 4.382c.329 1.629 1.575 3.369 4.086 3.369 2.551 0 4.212-1.971 4.534-3.917.04-.242.04-.48 0-.711l-.004-.019-.033-.174.174-.03a7.139 7.139 0 0 1 1.124-.115c.363 0 .783.036 1.128.096l.174.03-.032.172-.006.027-.002.012c-.04.23-.04.469 0 .711.322 1.946 1.983 3.917 4.534 3.917 2.512 0 3.757-1.74 4.086-3.369l.145-.897.008-.018c.221-.548.685-.807.962-.962.287-.16.444-.461.444-.847 0-.421-.358-.819-.781-.867L20.001.51C19.407.368 18.64.348 17.899.348c-1.847 0-3.681.768-4.459 1.866l-.07.099-.117-.031a5.764 5.764 0 0 0-2.925-.002l-.117.031-.07-.099C9.364 1.114 7.53.347 5.682.347c-.741 0-1.509.02-2.102.162l-.021.004-2.428.276c-.424.048-.782.445-.782.867 0 .386.158.687.444.847.277.155.742.414.963.962l.007.018.145.897.001.002zm-.108-2.668c0 .106-.095.192-.213.192H.96c-.118 0-.213-.086-.213-.192 0-.106.095-.192.213-.192h.628c.118 0 .213.086.213.192zm21.066 0c0 .106-.096.192-.213.192h-.629c-.117 0-.213-.086-.213-.192 0-.106.095-.192.213-.192h.629c.117 0 .213.086.213.192z"/>
        </symbol>
        <symbol id="icon-window" viewBox="0 0 28 25">
            <path d="M.497 5.701h15.644c.274 0 .497.222.497.497v.718a.497.497 0 0 1-.497.497H.497A.497.497 0 0 1 0 6.916v-.718c0-.274.222-.497.497-.497zm1.215 0V23.94H0V5.701h1.712zm18.515 7.785v9.939a.552.552 0 0 1-.552.552h-.699a.552.552 0 0 1-.552-.552v-9.939c0-.305.247-.552.552-.552h.699c.305 0 .552.247.552.552zM0 22.302h20.209v1.712H0v-1.712zM25.767.161h1.914v16.583h-1.914V.161zm1.914-.147v1.914H11.098V.014h16.583zM26.322 0l1.353 1.353L13.398 15.63l-1.353-1.353L26.322 0z"/>
        </symbol>
    </svg>

@ebay/skin/switch

A switch behaves like a checkbox - it can be on or off (i.e checked or unchecked) - and under the hood, that's exactly what it is. Whereas checkboxes are often used to allow multi-selection from a group of choices, switches are more often used in isolation or as a series of unrelated options.

REMEMBER: every switch requires a visible label! Please see the field module for details on labelling controls.

<span class="switch">
    <input class="switch__control" role="switch" type="checkbox" />
    <span class="switch__button"></span>
</span>

Disabled Switch

<span class="switch">
    <input class="switch__control" role="switch" type="checkbox" disabled />
    <span class="switch__button"></span>
</span>

Tab

A tab allows the user to switch between multiple panels of content. By decluttering the user-interface in this way, we say that tabs follow the principal of progressive disclosure.

Selecting a tab should update the visible panel without a full page reload. If a full page load is required instead (i.e. acting like a link), please see the fake tab section below for more details.

NOTE: JavaScript is required to handle tab selection, panel visibility, focus management and arrow-key navigation. For detailed behaviour requirements, please visit the eBay MIND Pattern for Tabs.

Default Tabs

When a tab is selected, the aria-selected state of all tabs in the list must be updated in order for the CSS to reflect the change. Only one tab can be selected and in the tab order at any moment in time. Likewise, only one tabpanel can be visible at any time, and it must correspond to the currently selected tab.

Tab 1

Tab 2

Tab 3

Panel 1 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?

    <div class="tabs">
        <div class="tabs__items" role="tablist">
            <div aria-controls="default-tabpanel-1" aria-selected="true" class="tabs__item" id="default-tab-1" role="tab">
                <span>Tab 1</span>
            </div>
            <div aria-controls="default-tabpanel-2" aria-selected="false" class="tabs__item" id="default-tab-2" role="tab">
                <span>Tab 2</span>
            </div>
            <div aria-controls="default-tabpanel-3" aria-selected="false" class="tabs__item" id="default-tab-3" role="tab">
                <span>Tab 3</span>
            </div>
        </div>
        <div class="tabs__content">
            <div aria-labelledby="default-tab-1" class="tabs__panel" id="default-tabpanel-1" role="tabpanel">
                <div class="tabs__cell">
                    <h3>Panel 1 Content</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?
                    </p>
                </div>
            </div>
            <div aria-labelledby="default-tab-2" class="tabs__panel" hidden id="default-tabpanel-2" role="tabpanel">
                <div class="tabs__cell">
                    <h3>Panel 2 Content</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?
                    </p>
                </div>
            </div>
            <div aria-labelledby="default-tab-3" class="tabs__panel" hidden id="default-tabpanel-3" role="tabpanel">
                <div class="tabs__cell">
                    <h3>Panel 3 Content</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?
                    </p>
                </div>
            </div>
        </div>
    </div>

Fake Tabs

A fake tab looks like a normal tab, but is actually a hyperlink to a new page. Therefore a set of fake tabs behaves more like a simple navigational widget, rather than a dynamic user interface control.

A valid HREF attribute is required for all anchor tags. A value of "javascript" (or any such variant) is not a valid URL!

The fake-tabs__item--current class is used to visually denote the current link. The aria-current attribute is used to programmatically denote the current page state.

    <div class="fake-tabs">
        <ul class="fake-tabs__items">
            <li class="fake-tabs__item fake-tabs__item--current">
                <a aria-current="page" href="http://www.ebay.com">Page 1</a>
            </li>
            <li class="fake-tabs__item">
                <a href="http://www.ebay.com">Page 2</a>
            </li>
            <li class="fake-tabs__item">
                <a href="http://www.ebay.com">Page 3</a>
            </li>
        </ul>
        <div class="fake-tabs__content">
            <div class="fake-tabs__cell">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda culpa est nisi porro quae quidem ratione repellendus, temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus quos ut?
                </p>
            </div>
        </div>
    </div>

@ebay/skin/textbox

A textbox (also known as an input) allows the user to enter data.

The purpose of a textbox is to collect form data. Therefore, textbox should always be used in conjunction with a form, label and submit button.

IMPORTANT: The examples below show the textbox in isolation, without any label. Remember: every textbox requires a label!

Single-Line Textbox

Use an input tag for a single-line textbox.

<span class="textbox">
    <input class="textbox__control" type="text" placeholder="placeholder text" />
</span>

Disabled Textbox

Use the disabled attribute to disable any input.

<span class="textbox">
    <input class="textbox__control" type="text" placeholder="placeholder text" disabled />
</span>

Textbox with error

Use the aria-invalid attribute to highlight any input with error.

<span class="textbox">
    <input class="textbox__control" type="text" placeholder="placeholder text" aria-invalid="true" />
</span>

Multi-line Textbox

Use the textarea tag for a multi-line textbox.

A multi-line textbox allows line breaks and has a minimum height of 200px.

<span class="textbox">
    <textarea class="textbox__control" placeholder="placeholder text"></textarea>
</span>

Fluid Textbox

Apply the textbox__control--fluid modifier (or fluid utility class) to fill the width of the parent element.

<div class="textbox">
    <input class="textbox__control textbox__control--fluid" type="text" placeholder="placeholder text" />
</div>

Textbox with Icon

Single-line textboxes can be augmented with any inline SVG icon, using a textbox__icon element before the control. Font-icons are no longer supported.

<span class="textbox">
    <svg aria-hidden="true" class="textbox__icon" focusable="false" width="16" height="16">
        <use xlink:href="#icon-messages"></use>
    </svg>
    <input class="textbox__control" type="text" placeholder="placeholder text" />
</span>

Use textbox--icon-end modifier to position the icon after the control.

<span class="textbox textbox--icon-end">
    <input class="textbox__control" type="text" placeholder="placeholder text" />
    <svg aria-hidden="true" class="textbox__icon" focusable="false" width="16" height="16">
        <use xlink:href="#icon-messages"></use>
    </svg>
</span>

NOTE: The icon is presentational, and therefore hidden from assistive technology using aria-hidden. Remember, the purpose of the field must be conveyed using a label.

Underline Textbox

Use textbox__control--underline modifier to style the textbox with only a bottom border to be used in conjuction with floating labels.

Please see the label module for details on labelling controls. Remember: every textbox requires a label!

<span class="textbox">
    <input class="textbox__control textbox__control--underline" type="text" placeholder="placeholder text" />
</span>

@ebay/skin/typography

Static sites that do not have access to LESS preprocessor can leverage the Skin type ramp via the typography module.

.giant-text-2
.giant-text-1
.large-text-2
.large-text-1
.medium-text
.regular-text
.small-text

With the exception of giant text, which is always bold, all other entries in the type ramp can be set to bold-text or secondary-text by adding the relevant class:

.large-text-2 .bold-text
.large-text-2 .secondary-text

@ebay/skin

Lasso

Flags

CDN

@ebay/skin/global

Font Family

Paragraph without Market Sans

Paragraph with Market Sans

Link States

@ebay/skin/less

Typography

Color Palette

Product Usage

@ebay/skin/badge

Default Badge

Menu Badge

Icon Button Badge

@ebay/skin/breadcrumb

Button

Raw Button

Regular Button

Primary Button

Secondary Button

Disabled Button

Partially Disabled Button

Fluid Button

Small Button

Large Button

Extra-Large Button

Icon Button

Expand Button

CTA Button

Default Background

Blue Background (B4)

Red Background (R4)

Purple Background (TBD)

Button overflow behavior

@ebay/skin/checkbox

Default Checkbox

Disabled Checkbox

Grouped Checkboxes

Custom Checkbox

@ebay/skin/color

@ebay/skin/combobox

Default Combobox

Disabled Combobox

Readonly Combobox

@ebay/skin/dialog

Default Dialog

Fill Dialog

Left Panel Dialog

Right Panel Dialog

Fullscreen Panel Dialog

Scrolling Panel Dialog

Dialog Transitions

Fade Transition

Slide Transition

@ebay/skin/field

Unstacked Field

Stacked Field

Field Font-Size

Disabled Field

Readonly Field

Required Field

Invalid Field

Field Description

Text on Side of Field

Text Below Stacked Field

Text Above or Below Unstacked Field

@ebay/skin/label

Floating Label with no Value

Floating Label with Value

Floating Label with Placeholder

Floating Label with Disabled Textbox

Floating Label with Invalid Textbox

Floating Label Transitions

@ebay/skin/icon

@ebay/skin/icon/foreground

@ebay/skin/icon/background

List of available icons