@@ -171,28 +171,42 @@ <h2 class="display-flex mb-10">
171
171
</ main > < div class ="container ">
172
172
< div class ="pure reset panel ">
173
173
< div class ="content ">
174
- < span class ="alert "> Lorem ipsum < a href ="javascript: "> dolor sit</ a > amet.</ span >
174
+ < span class ="alert "> This is my < a href ="javascript: "> default</ a > alert.</ span >
175
+ < span class ="closable alert "> This is my closable < a href ="javascript: "> default</ a > alert.</ span >
175
176
</ div >
176
177
< div class ="content ">
177
178
< script type ="text/plain " class ="language-markup ">
178
- < span class = "alert" > </ span >
179
179
< div class = "alert" > </ div >
180
+ < div class = "closable alert" > < / div >
180
181
</ script >
181
182
</ div >
182
183
< div class ="content ">
183
- < div class ="primary alert "> Lorem ipsum < a href ="javascript: "> dolor sit</ a > amet.</ div >
184
- < div class ="success alert "> Lorem ipsum < a href ="javascript: "> dolor sit</ a > amet.</ div >
185
- < div class ="warning alert "> Lorem ipsum < a href ="javascript: "> dolor sit</ a > amet.</ div >
186
- < div class ="error alert "> Lorem ipsum < a href ="javascript: "> dolor sit</ a > amet.</ div >
187
- < div class ="dark alert "> Lorem ipsum < a href ="javascript: "> dolor sit</ a > amet.</ div >
184
+ < div class ="primary alert "> This is my < a href ="javascript: "> primary</ a > alert.</ div >
185
+ < div class ="closable primary alert "> This is my primary < a href ="javascript: "> closable</ a > alert.</ div >
186
+ < div class ="success alert "> This is my < a href ="javascript: "> success</ a > alert.</ div >
187
+ < div class ="warning alert "> This is my < a href ="javascript: "> warning</ a > alert.</ div >
188
+ < div class ="error alert "> This is my < a href ="javascript: "> error</ a > alert.</ div >
189
+ < div class ="dark alert "> This is my < a href ="javascript: "> dark</ a > alert.</ div >
188
190
</ div >
189
191
< div class ="content ">
190
192
< script type ="text/plain " class ="language-markup ">
191
193
< div class = "primary alert" > </ div >
192
- < div class = "success alert" > < / div >
193
- < div class = "warning alert" > </ div >
194
- < div class = "error alert" > </ div >
195
- < div class = "dark alert" > </ div >
194
+ < div class = "closable primary alert" > < / div >
195
+ </ script >
196
+ </ div >
197
+ < div class ="header ">
198
+ < div class ="title "> Outlined Style</ div >
199
+ </ div >
200
+ < div class ="content ">
201
+ < div class ="outlined primary alert "> This is my outlined < a href ="javascript: "> primary</ a > alert.</ div >
202
+ < div class ="outlined closable primary alert "> This is my outlined < a href ="javascript: "> closable</ a > primary alert.</ div >
203
+ < div class ="outlined error alert border-2 "> Utility : border-2</ div >
204
+ </ div >
205
+ < div class ="content ">
206
+ < script type ="text/plain " class ="language-markup ">
207
+ < div class = "outlined primary alert" > </ div >
208
+ < div class = "outlined closable primary alert" > < / div >
209
+ < div class = "outlined closable error alert border-2" > </ div >
196
210
</ script >
197
211
</ div >
198
212
< div class ="header ">
@@ -239,6 +253,22 @@ <h2 class="display-flex mb-10">
239
253
< td > < code > dark</ code > </ td >
240
254
< td > < code > .dark.alert</ code > </ td >
241
255
</ tr >
256
+ < tr >
257
+ < td > < code > outlined</ code > </ td >
258
+ < td > < code > .outlined.alert</ code > </ td >
259
+ </ tr >
260
+ </ tbody >
261
+ < thead >
262
+ < tr >
263
+ < th > States</ th >
264
+ < th > Combinators</ th >
265
+ </ tr >
266
+ </ thead >
267
+ < tbody >
268
+ < tr >
269
+ < td > < code > closable</ code > </ td >
270
+ < td > < code > .closable.alert</ code > </ td >
271
+ </ tr >
242
272
</ tbody >
243
273
< thead >
244
274
< tr >
0 commit comments