-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
95 lines (79 loc) · 2.79 KB
/
test.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Components Test Page</title>
<link rel="stylesheet" href="/dist/componentize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body > h1 { text-align: center; }
.plain { padding: 1em; }
/* Modifier(s) */
.plain.fat { font-weight: bold; }
.plain.inverse { background: black; color: white; }
/* State(s) */
.plain.selected {
box-shadow: 0 0 0 5px black inset;
}
.plain.inverse.selected {
box-shadow: 0 0 0 5px #ddd inset;
}
</style>
</head>
<body>
<h1>Components Test Page</h1>
<section class="components">
<div class="components-description">
<p>This is a test page for the various component classes</p>
</div>
<div class="component" data-title="Plain Component" data-modifiers="fat,inverse" data-states="nil,selected">
<div class="plain">
<p>Here's two plain paragraphs of text to make it easier to see how everything flows.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
</p>
</div>
</div>
<div class="component" data-title="Component w/ modifier" data-modifiers="fat,inverse" data-states="nil,selected">
<div class="plain inverse">
<p>This should have the 'inverse' modifier selected already.</p>
</div>
</div>
<div class="component" data-title="Component w/ state" data-modifiers="fat,inverse" data-states="nil,selected">
<div class="plain selected">
<p>This should have the 'selected' state pre-selected.</p>
</div>
</div>
<div class="component alt-bg" data-title="Alternate Background Component">
<p>
<mark>
This component has the <code>.alt-bg</code> class set, so should be shown on
a transparent checkerboard background.
</mark>
</p>
</div>
<div class="component solid-bg" data-title="Solid Background Component" data-modifiers="fat,inverse">
<p>
<mark>
This component has the <code>.solid-bg</code> class set, so should be shown on
a solid color background.
</mark>
</p>
</div>
<div class="component solid-bg" style="--bg-color:#ff8000" data-title="Solid Background Component (Custom)">
<p>
<mark>
This component has the <code>.solid-bg</code> class set <em>and</em> provides a specific background color
to use, so should be shown on a solid orange background.
</mark>
</p>
</div>
<div class="component" data-title="Empty Component (no content)"><!-- Intentionally left empty for testing --></div>
<div class="component" data-title="Empty Component (w/ empty content element)">
<div><!-- Intentionally left empty for testing --></div>
</div>
</section>
<script src="/dist/componentize.js"></script>
</body>
</html>