Filters

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div class="ox-filters-wrapper">
    <div class="ox-filters__icon">
        <span class="ox-icon ox-icon--filter"></span>
    </div>
    <div class="ox-filters__filter">
        <div class="ox-filter__item ox-dropmenu-wrapper ox-dropmenu-wrapper--filter" id="dox-drop-menu-example" aria-haspopup="true" aria-expanded="false">
            <input type="checkbox" class="ox-dropmenu-toggle" id="filter-orderstatus">
            <label for="filter-orderstatus" class="ox-filter__trigger ox-filter__trigger--active" role="button" id="orderStatus" aria-label="Order status">
                Status
            </label>
            <div class="ox-dropmenu ox-dropmenu--left ox-dropmenu--filter">
                <div class="ox-dropmenu__body">
                    <div class="ox-form__checkbox ox-form__checkbox--ghost">
                        <input type="checkbox" id="orderstatus-draft" class="ox-form__checkbox__input" value="Draft" aria-describedby="orderStatus" />
                        <label for="orderstatus-draft" class="ox-form__checkbox__label">Draft</label>
                    </div>
                    <div class="ox-form__checkbox ox-form__checkbox--ghost">
                        <input type="checkbox" id="orderstatus-sent" class="ox-form__checkbox__input" value="Sent" aria-describedby="orderStatus" />
                        <label for="orderstatus-sent" class="ox-form__checkbox__label">Sent</label>
                    </div>
                    <div class="ox-form__checkbox ox-form__checkbox--ghost">
                        <input type="checkbox" id="orderstatus-lost" class="ox-form__checkbox__input" value="Lost" aria-describedby="orderStatus" />
                        <label for="orderstatus-lost" class="ox-form__checkbox__label">Lost sale</label>
                    </div>
                    <div class="ox-form__checkbox ox-form__checkbox--ghost">
                        <input type="checkbox" id="orderstatus-confirmed" class="ox-form__checkbox__input" value="Confirmed" aria-describedby="orderStatus" checked/>
                        <label for="orderstatus-confirmed" class="ox-form__checkbox__label">Confirmed</label>
                    </div>
                </div>
                <div class="ox-dropmenu__footer">
                    <button type="button" class="ox-button ox-button--plain ox-button--small js-apply-clear">Clear</button>
                    <button type="button" class="ox-button ox-button--secondary ox-button--small js-apply-filter">Apply</button>
                </div>
            </div>
        </div>
        <div class="ox-filter__item ox-dropmenu-wrapper ox-dropmenu-wrapper--filter" id="dox-drop-menu-example" aria-haspopup="true" aria-expanded="false">
            <input type="checkbox" class="ox-dropmenu-toggle" id="filter-creator">
            <label for="filter-creator" class="ox-filter__trigger" role="button" id="orderCreator" aria-label="Creator">
                Creator
            </label>
            <div class="ox-dropmenu ox-dropmenu--left ox-dropmenu--filter">
                <div class="ox-dropmenu__body">
                    <div class="ox-form__group ox-form__input-group ox-form__input-group--small ox-form__input-group--prepend">
                        <input type="text" id="search-creator" class="ox-form__field"/>
                        <label for="search-creator" class="ox-form__input-group__unit"><span class="ox-icon ox-icon--search"></span></label>
                    </div>
                    <div class="ox-form__filterable-dropdown__list__content">
                        <div class="ox-form__checkbox ox-form__checkbox--ghost">
                            <input type="checkbox" id="orderCreator-ben" class="ox-form__checkbox__input" value="Ben Geller" aria-describedby="orderCreator" />
                            <label for="orderCreator-ben" class="ox-form__checkbox__label">Ben Geller</label>
                        </div>
                        <div class="ox-form__checkbox ox-form__checkbox--ghost">
                            <input type="checkbox" id="orderCreator-chandler" class="ox-form__checkbox__input" value="Chandler Bing" aria-describedby="orderCreator" />
                            <label for="orderCreator-chandler" class="ox-form__checkbox__label">Chandler Bing</label>
                        </div>
                        <div class="ox-form__checkbox ox-form__checkbox--ghost">
                            <input type="checkbox" id="orderCreator-jack" class="ox-form__checkbox__input" value="Jack Geller" aria-describedby="orderCreator" />
                            <label for="orderCreator-jack" class="ox-form__checkbox__label">Jack Geller</label>
                        </div>
                        <div class="ox-form__checkbox ox-form__checkbox--ghost">
                            <input type="checkbox" id="orderCreator-janice" class="ox-form__checkbox__input" value="Janice Litman-Goralnick" aria-describedby="orderCreator" />
                            <label for="orderCreator-janice" class="ox-form__checkbox__label">Janice Litman-Goralnick</label>
                        </div>
                        <div class="ox-form__checkbox ox-form__checkbox--ghost">
                            <input type="checkbox" id="orderCreator-joey" class="ox-form__checkbox__input" value="Joey Tribbiani" aria-describedby="orderCreator" />
                            <label for="orderCreator-joey" class="ox-form__checkbox__label">Joey Tribbiani</label>
                        </div>
                        <div class="ox-form__checkbox ox-form__checkbox--ghost">
                            <input type="checkbox" id="orderCreator-judy" class="ox-form__checkbox__input" value="Judy Geller" aria-describedby="orderCreator" />
                            <label for="orderCreator-judy" class="ox-form__checkbox__label">Judy Geller</label>
                        </div>
                        <div class="ox-form__checkbox ox-form__checkbox--ghost">
                            <input type="checkbox" id="orderCreator-monica" class="ox-form__checkbox__input" value="Monica Geller" aria-describedby="orderCreator" />
                            <label for="orderCreator-monica" class="ox-form__checkbox__label">Monica Geller</label>
                        </div>
                        <div class="ox-form__checkbox ox-form__checkbox--ghost">
                            <input type="checkbox" id="orderCreator-phoebe" class="ox-form__checkbox__input" value="Phoebe Buffay" aria-describedby="orderCreator" />
                            <label for="orderCreator-phoebe" class="ox-form__checkbox__label">Phoebe Buffay</label>
                        </div>
                        <div class="ox-form__checkbox ox-form__checkbox--ghost">
                            <input type="checkbox" id="orderCreator-rachel" class="ox-form__checkbox__input" value="Rachel Green" aria-describedby="orderCreator" />
                            <label for="orderCreator-rachel" class="ox-form__checkbox__label">Rachel Green</label>
                        </div>
                        <div class="ox-form__checkbox ox-form__checkbox--ghost">
                            <input type="checkbox" id="orderCreator-ross" class="ox-form__checkbox__input" value="Ross Geller" aria-describedby="orderCreator" />
                            <label for="orderCreator-ross" class="ox-form__checkbox__label">Ross Geller</label>
                        </div>
                        <p class="ox-text--xs ox-text--muted">Only showing 10 of <strong>1000</strong> items.</p>
                    </div>
                </div>
                <div class="ox-dropmenu__footer">
                    <button type="button" class="ox-button ox-button--plain ox-button--small js-apply-clear">Clear</button>
                    <button type="button" class="ox-button ox-button--secondary ox-button--small js-apply-filter">Apply</button>
                </div>
            </div>
        </div>
    </div>
    <div class="ox-filters__search">
        <div class="ox-filter__item ox-filter__item--search ox-form__input-group ox-form__input-group--small ox-form__input-group--prepend">
            <input type="search" id="dox-table-search" class="ox-form__field" placeholder="Search..." aria-label="Search though table content" />
            <label for="dox-table-search" class="ox-form__input-group__icon">
                <span class="ox-icon ox-icon--search"></span>
            </label>
            <input class="ox-sr-only" type="submit" title="Search" value="search">
        </div>
    </div>
</div>