| Vapor CSS

Picker

This is the standard filter picker control.

Style sheet: /scss/controls/filter-picker.scss

<div class="filter-expression-picker">
    <div class="filters coveo-form">
        <div class="admin-filterbox">
            <div class="filter-popup">
                <div class="filter-actions">
                    <a class="btn add-filter">
                        <span><svg width="512" height="512" viewBox="0 0 512 512" class="icon mod-lg icon-small"><path d="M384 118.182c0-48.514-78.798-87.843-176-87.843-97.203 0-176 39.329-176 87.843 0 28.32 32.148 43.663 68.545 69.569C120.201 201.741 159.716 264.094 160 288c.305 25.727 0 96 0 96l96 48s.306-118.273 0-144c-.283-23.869 38.967-85.978 58.978-100.068C351.713 162.068 384 146.608 384 118.182zm-301.715-.158c0-27.771 56.285-50.285 125.714-50.285 69.431 0 125.714 22.514 125.714 50.285 0 27.773-56.283 50.287-125.714 50.287-69.429 0-125.714-22.514-125.714-50.287zM512 352h-64v-64h-64v64h-64v64l64 .188V480h64v-64h64z"></path></svg></span>
                    </a>
                </div>
            </div>
            <div class="filters">
                <div class="editable-filter">
                    <div class="filter-badge filter-popup ">
                        <button class="btn edit-filter dropdown-toggle mod-light">
                            <span class="edit-filter-content">
                                <span class="filter-dimension">Browser</span>
                                <span class="filter-operator mod-positive">is</span>
                                <span class="filter-values">Chrome</span>
                                <span class="dropdown-toggle-arrow"></span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="filter-popup">
                <div class="filter-actions">
                    <a class="btn clear-all-filters">
                        <span><svg viewBox="0 0 10 10" class="icon mod-lg icon-small"><path d="M9.79.212A.72.72 0 0 0 8.77.211L5 3.981 1.229.211A.717.717 0 0 0 .211.212H.21A.72.72 0 0 0 .211 1.23l3.771 3.769L.211 8.77a.718.718 0 0 0 0 1.018.718.718 0 0 0 1.018 0L5 6.017l3.771 3.771A.72.72 0 0 0 9.789 8.77L6.018 4.999 9.789 1.23A.72.72 0 0 0 9.79.212"></path></svg></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Pickers

This is the standard multiple filter pickers control.

Style sheet: /scss/controls/multi-filter-picker.scss

at least
WHERE
<div class="filter-expression-picker">
    <div class="multi-filters-container">
        <div class="multi-filter">
            <div class="multi-filter-picker">
                <div>
                    <div class="filters coveo-form">
                        <div class="admin-filterbox">
                            <div class="pre-operator">at least</div>
                            <div class="filter-type">
                                <div class="admin-select dropdown">
                                    <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
                                        <span class="dropdown-selected-value">an event</span>
                                        <span class="dropdown-toggle-arrow"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="filter-where">WHERE</div>
                            <div class="filters">
                                <div class="editable-filter">
                                    <div class="filter-badge filter-popup ">
                                        <button class="btn edit-filter dropdown-toggle mod-light">
                                            <span class="edit-filter-content">
                                                <span class="filter-dimension">Browser</span>
                                                <span class="filter-operator mod-positive">is</span>
                                                <span class="filter-values">Chrome</span>
                                                <span class="dropdown-toggle-arrow"></span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-popup">
                                <div class="filter-actions">
                                    <a class="btn add-filter">
                                        <span><svg width="512" height="512" viewBox="0 0 512 512" class="icon mod-lg icon-small"><path d="M384 118.182c0-48.514-78.798-87.843-176-87.843-97.203 0-176 39.329-176 87.843 0 28.32 32.148 43.663 68.545 69.569C120.201 201.741 159.716 264.094 160 288c.305 25.727 0 96 0 96l96 48s.306-118.273 0-144c-.283-23.869 38.967-85.978 58.978-100.068C351.713 162.068 384 146.608 384 118.182zm-301.715-.158c0-27.771 56.285-50.285 125.714-50.285 69.431 0 125.714 22.514 125.714 50.285 0 27.773-56.283 50.287-125.714 50.287-69.429 0-125.714-22.514-125.714-50.287zM512 352h-64v-64h-64v64h-64v64l64 .188V480h64v-64h64z"></path></svg></span>
                                    </a>
                                    <a class="btn clear-all-filters">
                                        <span><svg viewBox="0 0 10 10" class="icon mod-lg icon-small"><path d="M9.79.212A.72.72 0 0 0 8.77.211L5 3.981 1.229.211A.717.717 0 0 0 .211.212H.21A.72.72 0 0 0 .211 1.23l3.771 3.769L.211 8.77a.718.718 0 0 0 0 1.018.718.718 0 0 0 1.018 0L5 6.017l3.771 3.771A.72.72 0 0 0 9.789 8.77L6.018 4.999 9.789 1.23A.72.72 0 0 0 9.79.212"></path></svg></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="add-container">
                        <div class="add right"><span><svg viewBox="0 0 18 18" class="icon icon-small"><path d="M13 8h-3V5a1 1 0 0 0-2 0v3H5a1 1 0 0 0 0 2h3v3a1 1 0 1 0 2 0v-3h3a1 1 0 1 0 0-2"></path><path d="M8.991 16C5.136 16 2 12.86 2 9s3.136-7 6.991-7c3.865 0 7.01 3.14 7.01 7s-3.144 7-7.01 7m0-16C4.023 0 0 4.03 0 9c0 4.968 4.02 9 8.991 9 4.977 0 9.01-4.03 9.01-9 0-4.968-4.03-9-9.01-9"></path></svg></span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

List Popup

This is the field picker control used to select a filter field.

Style sheet: /scss/controls/filters-list.scss

<button type="button" class="btn js-tether-target-list">Form Toggle</button>
<div class="filter-expression-picker js-tether-element-list">
    <div class="add-filter-popup popover">
        <div id="filters-list" class="filter-choices">
            <div class="popup-header py2 flex flex-column flex-center">
                <div class="event-type">
                    <div class="flat-select mod-option-picker clearfix">
                        <a class="flat-select-option">
                            <span class="enabled selected-value state-selected">All</span>
                        </a>
                        <a class="flat-select-option selectable">
                            <span class="enabled ">Search</span>
                        </a>
                        <a class="flat-select-option selectable">
                            <span class="enabled ">Click</span>
                        </a>
                        <a class="flat-select-option selectable">
                            <span class="enabled ">Custom</span>
                        </a>
                    </div>
                </div>

                <div class="coveo-filter-container">
                    <input type="text" class="filter-box" placeholder="Filter">
                    <span class="hide"></span>
                    <svg class="filter-icon icon mod-lg fill-medium-grey" viewBox="0 0 20 20">
                        <path d="M19.2 4.1c0-1.9-4-3.3-9.2-3.3S.8 2.3.8 4.1c0 .2 0 .3.1.5l.1.2c0 .1.1.2.2.3l6.2 8.7V18l.2.2c.1.1 1.1 1 2.5 1 .9 0 1.7-.3 2.4-.9l.2-.2v-4.3l6.1-8.7c.1-.1.1-.2.2-.2v-.1l.1-.1c.1-.2.1-.4.1-.6zm-15 2.6c1.7.5 3.7.8 5.8.8s4.1-.3 5.8-.7l-4.6 6.5v4.3c-.9.6-1.8.3-2.3 0v-4.2L4.2 6.7zM10 2.4c5.1 0 7.3 1.4 7.6 1.7-.6.7-3.3 1.7-7.6 1.7s-7-1-7.6-1.7V4c.3-.3 2.5-1.6 7.6-1.6z"></path>
                    </svg>
                </div>
            </div>
            <div class="popup-content">
                <div class="available-filters">
                    <span class="section">Named filters</span>
                    <div class="filter-list">
                        <ul class="list">
                            <li class="filter">
                                <span class="dimension">Canada</span>
                                <span class="type">Named filter</span>
                            </li>
                            <li class="filter">
                                <span class="dimension">USA</span>
                                <span class="type">Named filter</span>
                            </li>
                        </ul>
                    </div>
                    <span class="section">Dimensions</span>
                    <div class="filter-list">
                        <ul class="list">
                            <li class="filter">
                                <span class="dimension">A/B Test Name</span>
                                <span class="type">All</span>
                            </li>
                            <li class="filter">
                                <span class="dimension">A/B Test Version</span>
                                <span class="type">All</span>
                            </li>
                            <li class="filter">
                                <span class="dimension">Browser</span>
                                <span class="type">All</span>
                            </li>
                            <li class="filter">
                                <span class="dimension">City</span>
                                <span class="type">All</span>
                            </li>
                            <li class="filter">
                                <span class="dimension">Country</span>
                                <span class="type">All</span>
                            </li>
                            <li class="filter">
                                <span class="dimension">Document Title</span>
                                <span class="type">Click</span>
                            </li>
                            <li class="filter">
                                <span class="dimension">City</span>
                                <span class="type">All</span>
                            </li>
                            <li class="filter">
                                <span class="dimension">Country</span>
                                <span class="type">All</span>
                            </li>
                            <li class="filter">
                                <span class="dimension">Document Title</span>
                                <span class="type">Click</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        var myPopup = new Tether({
            element: '.js-tether-element-list',
            target: '.js-tether-target-list',
            attachment: 'top left',
            targetAttachment: 'bottom left',
            constraints: [{
                to: 'scrollParent',
                attachment: 'together'
            }]
        });

        $('.js-tether-target-list').click(function() {
            if (myPopup.enabled) {
                $('.js-tether-element-list').slideUp(200, function() {
                    myPopup.disable();
                });
            } else {
                myPopup.enable();

                $('.js-tether-element-list').slideDown(200);
            }
        });
    });
</script>

Value Popup

This is the filter picker control used to define a filter on a field.

Style sheet: /scss/controls/filters-values.scss

<button type="button" class="btn js-tether-target-values">Form Toggle</button>
<div class="filter-expression-picker js-tether-element-values">
    <div class="edit-filter-popup popover">
        <div class="edit-filter-values popover-row flex">
            <div class="popover-navigation-section">
                <div class="back">
                    <span><svg viewBox="0 0 20 20" class="icon arrow-left-rounded mod-lg"><path d="M11.5 4.8L7.2 9.3c-.3.4-.3.9 0 1.3l4.3 4.6c.3.4.9.4 1.2 0 .3-.4.3-.9 0-1.3L9 9.9 12.7 6c.3-.4.3-.9 0-1.3-.3-.3-.9-.3-1.2.1z"></path></svg></span>
                </div>
            </div>
            <div class="popup-main-section">
                <div class="popup-header">
                    <label class="selected-filter filter">Browser</label>
                </div>

                <div class="popover-body">
                    <div class="coveo-form">
                        <div class="form-group">
                            <div class="operator value">
                                <div class="admin-select dropdown">
                                    <button class="btn dropdown-toggle" type="button">
                                        <span class="dropdown-selected-value">Is</span>
                                        <span class="dropdown-toggle-arrow"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li>
                                            <span class="enabled selected-value state-selected  " title="">
                                                Is
                                            </span>
                                        </li>
                                        <li>
                                            <span class="enabled" title="">
                                                Is not
                                            </span>
                                        </li>
                                        <li>
                                            <span class="enabled" title="">
                                                Contains
                                            </span>
                                        </li>
                                        <li>
                                            <span class="enabled" title="">
                                                Does not contain
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-field multiline-field form-group">
                                <ul>
                                    <li class="input-wrapper">
                                        <input type="text" class="js-value-input" value="Chrome" required>
                                        <label>Value</label>
                                        <div class="input-actions">
                                            <button class="js-delete-value-button" type="button">
                                                <i class="delete-action" title="Delete this entry"></i>
                                            </button>
                                        </div>
                                    </li>
                                </ul>
                                <div class="input-wrapper">
                                    <input type="text" class="js-new-value-input" placeholder="Enter filter value" required>
                                    <div class="input-actions">
                                        <button class="js-add-value-button">
                                            <i class="add-action" title="Add a new entry"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="string-filters popover-row">
                        <div class="form-control coveo-checkbox-labels-group">
                            <label class="coveo-checkbox-label">
                                <input type="checkbox" class="coveo-checkbox empty-filter">
                                <button type="button"></button>
                                <span class="label">Include blank values in filter</span>
                            </label>
                            <label class="coveo-checkbox-label">
                                <input type="checkbox" class="coveo-checkbox null-filter">
                                <button type="button"></button>
                                <span class="label">Include n/a values in filter</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="popover-footer">
                    <button class="btn mod-primary mod-small" type="button">Add</button>
                    <button class="btn mod-small" type="button">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        var myPopup = new Tether({
            element: '.js-tether-element-values',
            target: '.js-tether-target-values',
            attachment: 'top left',
            targetAttachment: 'bottom left',
            constraints: [{
                to: 'scrollParent',
                attachment: 'together'
            }]
        });

        $('.js-tether-target-values').click(function() {
            if (myPopup.enabled) {
                $('.js-tether-element-values').slideUp(200, function() {
                    myPopup.disable();
                });
            } else {
                myPopup.enable();

                $('.js-tether-element-values').slideDown(200);
            }
        });
    });
</script>