Single line list@1.0.0

<h3>Plain list</h3>
<!-- HACK NOTE: Remove inline style when using this component -->
<ul class="c-single-line-list" style="border: solid 1px #ccc;">
    <li class="c-single-line-list__item">Single line item</li>
    <li class="c-single-line-list__item">Single line item</li>
    <li class="c-single-line-list__item">Single line item</li>
</ul>

<h3>With icon</h3>
<!-- HACK NOTE: Remove inline style when using this component -->
<ul class="c-single-line-list" style="border: solid 1px #ccc;">
    <li class="c-single-line-list__item">
        <i class="c-single-line-list__item-icon material-icons">favorite</i>
        Single line item
    </li>
    <li class="c-single-line-list__item">
        <i class="c-single-line-list__item-icon material-icons">favorite</i>
        Single line item
    </li>
    <li class="c-single-line-list__item">
        <i class="c-single-line-list__item-icon material-icons">favorite</i>
        Single line item
    </li>
</ul>

<h3>With disclosure indicator</h3>
<!-- HACK NOTE: Remove inline style when using this component -->
<ul class="c-single-line-list" style="border: solid 1px #ccc;">
    <li class="c-single-line-list__item c-single-line-list__item--between">
        Single line item
        <i class="c-single-line-list__item-disclosure material-icons">arrow_forward_ios</i>
    </li>
    <li class="c-single-line-list__item c-single-line-list__item--between">
        Single line item
        <i class="c-single-line-list__item-disclosure material-icons">arrow_forward_ios</i>
    </li>
    <li class="c-single-line-list__item c-single-line-list__item--between">
        Single line item
        <i class="c-single-line-list__item-disclosure material-icons">arrow_forward_ios</i>
    </li>
</ul>

<h3>With item separator</h3>
<!-- HACK NOTE: Remove inline style when using this component -->
<ul class="c-single-line-list">
    <li class="c-single-line-list__item c-single-line-list__item--between c-single-line-list__item--separator">
        Single line item
        <i class="c-single-line-list__item-disclosure material-icons ">arrow_forward_ios</i>
    </li>
    <li class="c-single-line-list__item c-single-line-list__item--between c-single-line-list__item--separator">
        Single line item
        <i class="c-single-line-list__item-disclosure material-icons">arrow_forward_ios</i>
    </li>
    <li class="c-single-line-list__item c-single-line-list__item--between c-single-line-list__item--separator">
        Single line item
        <i class="c-single-line-list__item-disclosure material-icons">arrow_forward_ios</i>
    </li>
</ul>

<h3>With switch</h3>
<!-- HACK NOTE: Remove inline style when using this component -->
<ul class="c-single-line-list" style="border: solid 1px #ccc;">
    <li class="c-single-line-list__item">
        <label for="basic-switch">Single line item</label>
        <div class="c-single-line-list__item-control">
            <div class="c-toggle-switch">
                <input type="checkbox" id="basic-switch" class="c-toggle-switch__control" role="switch" />
                <div class="c-toggle-switch__background">
                    <div class="c-toggle-switch__knob">
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="c-single-line-list__item">
        <label for="basic-switch-2">Single line item</label>
        <div class="c-single-line-list__item-control">
            <div class="c-toggle-switch">
                <input type="checkbox" id="basic-switch-2" class="c-toggle-switch__control" role="switch" />
                <div class="c-toggle-switch__background">
                    <div class="c-toggle-switch__knob">
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="c-single-line-list__item">
        <label for="basic-switch-3">Single line item</label>
        <div class="c-single-line-list__item-control">
            <div class="c-toggle-switch">
                <input type="checkbox" id="basic-switch-3" class="c-toggle-switch__control" role="switch" />
                <div class="c-toggle-switch__background">
                    <div class="c-toggle-switch__knob">
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>

<h3>With icon and switch</h3>
<!-- HACK NOTE: Remove inline style when using this component -->
<ul class="c-single-line-list" style="border: solid 1px #ccc;">
    <li class="c-single-line-list__item">
        <i class="c-single-line-list__item-icon material-icons">favorite</i>
        <label for="basic-switch-4">Single line item</label>
        <div class="c-single-line-list__item-control">
            <div class="c-toggle-switch">
                <input type="checkbox" id="basic-switch-4" class="c-toggle-switch__control" role="switch" />
                <div class="c-toggle-switch__background">
                    <div class="c-toggle-switch__knob">
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="c-single-line-list__item">
        <i class="c-single-line-list__item-icon material-icons">favorite</i>
        <label for="basic-switch-5">Single line item</label>
        <div class="c-single-line-list__item-control">
            <div class="c-toggle-switch">
                <input type="checkbox" id="basic-switch-5" class="c-toggle-switch__control" role="switch" />
                <div class="c-toggle-switch__background">
                    <div class="c-toggle-switch__knob">
                    </div>
                </div>
            </div>
        </div>
    </li>
    <li class="c-single-line-list__item">
        <i class="c-single-line-list__item-icon material-icons">favorite</i>
        <label for="basic-switch-6">Single line item</label>
        <div class="c-single-line-list__item-control">
            <div class="c-toggle-switch">
                <input type="checkbox" id="basic-switch-6" class="c-toggle-switch__control" role="switch" />
                <div class="c-toggle-switch__background">
                    <div class="c-toggle-switch__knob">
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>

<h3>With checkbox</h3>
<!-- HACK NOTE: Remove inline style when using this component -->
<ul class="c-single-line-list" style="border: solid 1px #ccc;">
    <li class="c-single-line-list__item">
        <label for="checkbox-1" id="checkbox-label" class="c-checkbox__label">Single line item</label>
        <div class="c-single-line-list__item-control">
            <div class="c-checkbox">
                <input type="checkbox" id="checkbox-1" class="c-checkbox__control"/>
                <div class="c-checkbox__background">
                    <svg class="c-checkbox__checkmark" viewBox="0 0 24 24">
                        <path class="c-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
                    </svg>
                </div>
                <div class="c-checkbox__mixedmark"></div>
            </div>
        </div>
    </li>
    <li class="c-single-line-list__item">
        <label for="checkbox-2" id="checkbox-label" class="c-checkbox__label">Single line item</label>
        <div class="c-single-line-list__item-control">
            <div class="c-checkbox">
                <input type="checkbox" id="checkbox-2" class="c-checkbox__control"/>
                <div class="c-checkbox__background">
                    <svg class="c-checkbox__checkmark" viewBox="0 0 24 24">
                        <path class="c-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
                    </svg>
                </div>
                <div class="c-checkbox__mixedmark"></div>
            </div>
        </div>
    </li>
    <li class="c-single-line-list__item">
        <label for="checkbox-3" id="checkbox-label" class="c-checkbox__label">Single line item</label>
        <div class="c-single-line-list__item-control">
            <div class="c-checkbox">
                <input type="checkbox" id="checkbox-3" class="c-checkbox__control"/>
                <div class="c-checkbox__background">
                    <svg class="c-checkbox__checkmark" viewBox="0 0 24 24">
                        <path class="c-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
                    </svg>
                </div>
                <div class="c-checkbox__mixedmark"></div>
            </div>
        </div>
    </li>
</ul>

<h3>With icon and checkbox</h3>
<!-- HACK NOTE: Remove inline style when using this component -->
<ul class="c-single-line-list" style="border: solid 1px #ccc;">
    <li class="c-single-line-list__item">
        <i class="c-single-line-list__item-icon material-icons">favorite</i>
        <label for="checkbox-4" id="checkbox-label" class="c-checkbox__label">Single line item</label>
        <div class="c-single-line-list__item-control">
            <div class="c-checkbox">
                <input type="checkbox" id="checkbox-4" class="c-checkbox__control"/>
                <div class="c-checkbox__background">
                    <svg class="c-checkbox__checkmark" viewBox="0 0 24 24">
                        <path class="c-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
                    </svg>
                </div>
                <div class="c-checkbox__mixedmark"></div>
            </div>
        </div>
    </li>
    <li class="c-single-line-list__item">
        <i class="c-single-line-list__item-icon material-icons">favorite</i>
        <label for="checkbox-5" id="checkbox-label" class="c-checkbox__label">Single line item</label>
        <div class="c-single-line-list__item-control">
            <div class="c-checkbox">
                <input type="checkbox" id="checkbox-5" class="c-checkbox__control"/>
                <div class="c-checkbox__background">
                    <svg class="c-checkbox__checkmark" viewBox="0 0 24 24">
                        <path class="c-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
                    </svg>
                </div>
                <div class="c-checkbox__mixedmark"></div>
            </div>
        </div>
    </li>
    <li class="c-single-line-list__item">
        <i class="c-single-line-list__item-icon material-icons">favorite</i>
        <label for="checkbox-6" id="checkbox-label" class="c-checkbox__label">Single line item</label>
        <div class="c-single-line-list__item-control">
            <div class="c-checkbox">
                <input type="checkbox" id="checkbox-6" class="c-checkbox__control"/>
                <div class="c-checkbox__background">
                    <svg class="c-checkbox__checkmark" viewBox="0 0 24 24">
                        <path class="c-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
                    </svg>
                </div>
                <div class="c-checkbox__mixedmark"></div>
            </div>
        </div>
    </li>
</ul>