Skip to content

Commit 0eba77c

Browse files
wuda-iowuda-io
authored
Merge pull request #24 from gselderslaghs/v2-dev
updated docs for badges and collapsible
2 parents 0b90d83 + 096d4aa commit 0eba77c

File tree

2 files changed

+50
-22
lines changed

2 files changed

+50
-22
lines changed

‎src/badges.html

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,28 @@ <h3 class="header">Badges in Collapsibles</h3>
116116

117117
<ul class="collapsible">
118118
<li>
119-
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First<span class="new badge">4</span></div>
119+
<div class="collapsible-header">
120+
<i class="material-icons">filter_drama</i>
121+
<div class="collapsible-header-content">First</div>
122+
<span class="new badge">4</span></div>
120123
<div class="collapsible-body">
121124
<p>Lorem ipsum dolor sit amet.</p>
122125
</div>
123126
</li>
124127
<li>
125-
<div class="collapsible-header"><i class="material-icons">place</i>Second<span class="badge">1</span></div>
128+
<div class="collapsible-header">
129+
<i class="material-icons">place</i>
130+
<div class="collapsible-header-content">Second</div>
131+
<span class="badge">1</span></div>
132+
<div class="collapsible-body">
133+
<p>Lorem ipsum dolor sit amet.</p>
134+
</div>
135+
</li>
136+
<li>
137+
<div class="collapsible-header">
138+
<i class="material-icons">textsms</i>
139+
<div class="collapsible-header-content">Third</div>
140+
<span class="badge leading new">4</span></div>
126141
<div class="collapsible-body">
127142
<p>Lorem ipsum dolor sit amet.</p>
128143
</div>
@@ -134,17 +149,24 @@ <h3 class="header">Badges in Collapsibles</h3>
134149
<li>
135150
<div class="collapsible-header">
136151
<i class="material-icons">filter_drama</i>
137-
First
152+
<div class="collapsible-header-content">First</div>
138153
<span class="new badge">4</span></div>
139154
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
140155
</li>
141156
<li>
142157
<div class="collapsible-header">
143158
<i class="material-icons">place</i>
144-
Second
159+
<div class="collapsible-header-content">Second</div>
145160
<span class="badge">1</span></div>
146161
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
147162
</li>
163+
<li>
164+
<div class="collapsible-header">
165+
<i class="material-icons">textsms</i>
166+
<div class="collapsible-header-content">Third</div>
167+
<span class="badge new">4</span></div>
168+
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
169+
</li>
148170
</ul>
149171
</xmp></code></pre>
150172
</div>

‎src/collapsible.html

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,33 +18,39 @@
1818
<ul class="collapsible collapsible-accordion">
1919
<li>
2020
<div class="collapsible-header">
21-
<i class="material-icons">filter_drama</i>First</div>
21+
<i class="material-icons">filter_drama</i>
22+
<div class="collapsible-header-content">First</div>
23+
</div>
2224
<div class="collapsible-body">
23-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
25+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
2426
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
2527
commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
2628
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
2729
ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
2830
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
29-
ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
31+
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
3032
</div>
3133
</li>
3234
<li>
3335
<div class="collapsible-header">
34-
<i class="material-icons">place</i>Second</div>
36+
<i class="material-icons">place</i>
37+
<div class="collapsible-header-content">Second</div>
38+
</div>
3539
<div class="collapsible-body">
36-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
40+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
3741
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
38-
commodo consequat.</span>
42+
commodo consequat.</p>
3943
</div>
4044
</li>
4145
<li>
4246
<div class="collapsible-header">
43-
<i class="material-icons">whatshot</i>Third</div>
47+
<i class="material-icons">whatshot</i>
48+
<div class="collapsible-header-content">Third</div>
49+
</div>
4450
<div class="collapsible-body">
45-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
51+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
4652
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
47-
commodo consequat.</span>
53+
commodo consequat.</p>
4854
</div>
4955
</li>
5056
</ul>
@@ -58,15 +64,15 @@
5864
<ul class="collapsible">
5965
<li>
6066
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
61-
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
67+
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
6268
</li>
6369
<li>
6470
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
65-
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
71+
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
6672
</li>
6773
<li>
6874
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
69-
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
75+
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
7076
</li>
7177
</ul>
7278
</xmp>
@@ -98,33 +104,33 @@ <h5>Preselected Section</h5>
98104
<div class="collapsible-header">
99105
<i class="material-icons">filter_drama</i>First</div>
100106
<div class="collapsible-body">
101-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
107+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
102108
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
103109
consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
104110
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
105111
ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
106112
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
107-
ut aliquip ex ea commodo consequat.</span>
113+
ut aliquip ex ea commodo consequat.</p>
108114
</div>
109115
</li>
110116
<li class="active">
111117
<div class="collapsible-header">
112118
<i class="material-icons">place</i>Second</div>
113119
<div class="collapsible-body">
114-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
120+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
115121
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
116122
consequat.
117-
</span>
123+
</p>
118124
</div>
119125
</li>
120126
<li>
121127
<div class="collapsible-header">
122128
<i class="material-icons">whatshot</i>Third</div>
123129
<div class="collapsible-body">
124-
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
130+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
125131
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
126132
consequat.
127-
</span>
133+
</p>
128134
</div>
129135
</li>
130136
</ul>

0 commit comments

Comments
 (0)