blob: d31c6f7724bfa7ae18e9acc71e3a43d690ac1e24 (
plain)
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'filters'
- var parent = 'experimentals'
- var title = 'Filters - Experimentals - Spectre.css CSS Framework'
- var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
block docs-content
+docs-heading('filters', 'Filters')
include ../_layout/_ad-g.pug
p Filters are CSS only content filters.
.docs-demo.columns
.column.col-12
.filter
input#tag-0.filter-tag(type="radio" name="filter-radio" hidden="" checked="")
input#tag-1.filter-tag(type="radio" name="filter-radio" hidden="")
input#tag-2.filter-tag(type="radio" name="filter-radio" hidden="")
input#tag-3.filter-tag(type="radio" name="filter-radio" hidden="")
input#tag-4.filter-tag(type="radio" name="filter-radio" hidden="")
.filter-nav
label.chip(for="tag-0") All
label.chip(for="tag-1") Action
label.chip(for="tag-2") Roleplaying
label.chip(for="tag-3") Shooter
label.chip(for="tag-4") Sports
.filter-body.columns
.column.col-4.filter-item(data-tag="tag-2")
.card
.card-header
.card-title Fallout 4
.card-subtitle Roleplaying
.column.col-4.filter-item(data-tag="tag-3")
.card
.card-header
.card-title Halo 5
.card-subtitle Shooter
.column.col-4.filter-item(data-tag="tag-1")
.card
.card-header
.card-title Quantum Break
.card-subtitle Action
.column.col-4.filter-item(data-tag="tag-4")
.card
.card-header
.card-title Forza Horizon 3
.card-subtitle Sports
.column.col-4.filter-item(data-tag="tag-2")
.card
.card-header
.card-title Final Fantasy XV
.card-subtitle Roleplaying
.column.col-4.filter-item(data-tag="tag-4")
.card
.card-header
.card-title NBA 2K17
.card-subtitle Sports
.column.col-4.filter-item(data-tag="tag-3")
.card
.card-header
.card-title Battlefield 1
.card-subtitle Shooter
.column.col-4.filter-item(data-tag="tag-1")
.card
.card-header
.card-title GTA V
.card-subtitle Action
.column.col-4.filter-item(data-tag="tag-4")
.card
.card-header
.card-title FIFA 17
.card-subtitle Sports
.column.col-4.filter-item(data-tag="tag-3")
.card
.card-header
.card-title Overwatch
.card-subtitle Shooter
.column.col-4.filter-item(data-tag="tag-3")
.card
.card-header
.card-title Titanfall 2
.card-subtitle Shooter
.column.col-4.filter-item(data-tag="tag-3")
.card
.card-header
.card-title Gears of Wars 4
.card-subtitle Shooter
p
| Filters use #[code tag-1] to #[code tag-8] to flag different tags.
| #[code tag-0] is reserved for clearing filter (or showing all).
| You can overwrite #[code $filter-number] in #[code _filters.scss] to have more filters.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<div class="filter">
<input type="radio" id="tag-0" class="filter-tag" name="filter-radio" hidden checked>
<input type="radio" id="tag-1" class="filter-tag" name="filter-radio" hidden>
<input type="radio" id="tag-2" class="filter-tag" name="filter-radio" hidden>
<div class="filter-nav">
<label class="chip" for="tag-0">All</label>
<label class="chip" for="tag-1">Action</label>
<label class="chip" for="tag-2">Roleplaying</label>
</div>
<div class="filter-body">
<div class="filter-item card" data-tag="tag-1">
<!-- Filter item content -->
</div>
<div class="filter-item card" data-tag="tag-2">
<!-- Filter item content -->
</div>
<!-- Filter items -->
</div>
</div>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
