profile-viewer 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/dist/AssemblyView-codemirror-D6IBMDRW.js +3 -0
- data/dist/AssemblyView-codemirror-D6IBMDRW.js.map +7 -0
- data/dist/SourceView-codemirror-NF5HZACX.js +14 -0
- data/dist/SourceView-codemirror-NF5HZACX.js.map +7 -0
- data/dist/_headers +1 -4
- data/dist/chunk-46YDEKKM.js +2 -0
- data/dist/chunk-46YDEKKM.js.map +7 -0
- data/dist/chunk-6K4OT4SN.js +11 -0
- data/dist/chunk-6K4OT4SN.js.map +7 -0
- data/dist/chunk-FQFFJJVU.js +2 -0
- data/dist/chunk-FQFFJJVU.js.map +7 -0
- data/dist/chunk-JZQU3SPI.js +2 -0
- data/dist/chunk-JZQU3SPI.js.map +7 -0
- data/dist/chunk-RMHNU7HN.js +2 -0
- data/dist/chunk-RMHNU7HN.js.map +7 -0
- data/dist/contribute.json +1 -1
- data/dist/docs/css/vue_v4.13.1.min.css +1 -0
- data/dist/docs/guide-filtering-call-trees.md +12 -0
- data/dist/docs/guide-ui-tour-panels.md +16 -1
- data/dist/docs/index.html +5 -6
- data/dist/docs/js/docsify_v4.13.1+.min.js +1 -0
- data/dist/docs/js/init.js +11 -1
- data/dist/docs/js/search_v4.13.1+.min.js +1 -0
- data/dist/gecko-profiler-demangle-3UYO3F2Y.js +2 -0
- data/dist/gecko-profiler-demangle-3UYO3F2Y.js.map +7 -0
- data/dist/gz.worker-C7QSA26N.js +38 -0
- data/dist/index-CZ7T6DL2.css +2 -0
- data/dist/index-CZ7T6DL2.css.map +7 -0
- data/dist/index-P5VLDZC7.js +381 -0
- data/dist/index-P5VLDZC7.js.map +7 -0
- data/dist/index.html +38 -1
- data/dist/index_bg-FTIMKZRG.wasm +0 -0
- data/dist/jszip.min-JBI6ADTT.js +18 -0
- data/dist/jszip.min-JBI6ADTT.js.map +7 -0
- data/dist/locales/be/app.ftl +50 -11
- data/dist/locales/de/app.ftl +114 -16
- data/dist/locales/el/app.ftl +135 -42
- data/dist/locales/en-CA/app.ftl +97 -11
- data/dist/locales/en-GB/app.ftl +114 -16
- data/dist/locales/en-US/app.ftl +116 -1
- data/dist/locales/es-CL/app.ftl +105 -15
- data/dist/locales/fr/app.ftl +82 -16
- data/dist/locales/fur/app.ftl +35 -11
- data/dist/locales/fy-NL/app.ftl +114 -16
- data/dist/locales/ia/app.ftl +118 -19
- data/dist/locales/it/app.ftl +108 -16
- data/dist/locales/kab/app.ftl +6 -80
- data/dist/locales/nl/app.ftl +114 -16
- data/dist/locales/pt-BR/app.ftl +104 -16
- data/dist/locales/ru/app.ftl +116 -23
- data/dist/locales/sv-SE/app.ftl +114 -16
- data/dist/locales/tr/app.ftl +149 -13
- data/dist/locales/uk/app.ftl +27 -19
- data/dist/locales/zh-CN/app.ftl +75 -13
- data/dist/locales/zh-TW/app.ftl +100 -14
- data/dist/photon/index.css +2 -0
- data/dist/photon/index.css.map +7 -0
- data/dist/photon/index.html +856 -26
- data/dist/photon/index.js +1 -0
- data/dist/photon/index.js.map +7 -0
- data/dist/service-worker-compat.js +51 -1
- data/dist/simpleperf-UUIE7C7E.js +25 -0
- data/dist/simpleperf-UUIE7C7E.js.map +7 -0
- data/dist/sw.js +1 -1
- data/dist/sw.js.map +1 -1
- data/dist/{workbox-e3490c72.js → workbox-1ef09536.js} +2 -2
- data/dist/workbox-1ef09536.js.map +1 -0
- data/ruby-bin/profile-viewer +48 -40
- data/ruby-bin/profile-viewer-version.rb +1 -1
- metadata +56 -103
- data/dist/022efb839d22fa54a716.svg +0 -28
- data/dist/029b9e4fd0218d7b09c6.svg +0 -8
- data/dist/0c510afd6169a0a83f97.svg +0 -14
- data/dist/0d5cf282780cd1a5ec64.svg +0 -8
- data/dist/118632062f4755918dac.svg +0 -4
- data/dist/11c5dca6d97c9e10e5b7.svg +0 -9
- data/dist/136.ad4176dc2a8e5cf33ef3.bundle.js +0 -2
- data/dist/136.ad4176dc2a8e5cf33ef3.bundle.js.map +0 -1
- data/dist/171.37d1e1824587d8df0ae2.bundle.js +0 -2
- data/dist/171.37d1e1824587d8df0ae2.bundle.js.map +0 -1
- data/dist/18e7fdd45099134897d2.svg +0 -8
- data/dist/1ddbc3ce40af8c7a648b.svg +0 -6
- data/dist/234ed61ab185caff67e3.svg +0 -8
- data/dist/280.4edd20bd6228986bbf2e.bundle.js +0 -2
- data/dist/280.4edd20bd6228986bbf2e.bundle.js.map +0 -1
- data/dist/2d4b477bc424d35a0245.svg +0 -25
- data/dist/2e43ad991eb141fc017f.svg +0 -9
- data/dist/2ea5b50b7361e6de561c.svg +0 -11
- data/dist/2f37d1addc2d2f5b699e.module.wasm +0 -0
- data/dist/31fe933f3a12be1aa7f3.svg +0 -4
- data/dist/390aa266f451c1005f61.svg +0 -10
- data/dist/3a829bf1fcf02598aa4b.svg +0 -6
- data/dist/3c3fda7c08bcc9544c64.svg +0 -6
- data/dist/4260d5db8309a6f83637.svg +0 -10
- data/dist/4536fd0738f36c3463bc.svg +0 -1
- data/dist/490065792b7e903c9f3e.svg +0 -6
- data/dist/49da6a2153f62ef73d17.svg +0 -7
- data/dist/4ecb077d8715f89c0f87.svg +0 -13
- data/dist/524e896f487119a0b832.svg +0 -13
- data/dist/556.b8d3d4d402ced081615a.bundle.js +0 -2
- data/dist/556.b8d3d4d402ced081615a.bundle.js.map +0 -1
- data/dist/6bd0589a27236471fdab.svg +0 -4
- data/dist/6c6b49af3a86dfdd44e6.svg +0 -4
- data/dist/6c8063be3afa1d95c902.svg +0 -3
- data/dist/71730566d6c47ffdc965.svg +0 -12
- data/dist/7273fadce89da05535e5.svg +0 -4
- data/dist/731673c749e57bf6f544.svg +0 -13
- data/dist/76e5b29823c9fd62d90d.svg +0 -3
- data/dist/7853c71223701f30d495.svg +0 -19
- data/dist/79856ce399cb305fafb8.svg +0 -19
- data/dist/7c7ac3c7df370340cfd2.svg +0 -7
- data/dist/7e3ac9afb25cfe809520.svg +0 -1
- data/dist/81762b0b1aacd3686a6b.svg +0 -12
- data/dist/86e81402ef76d28ff55f.svg +0 -15
- data/dist/874.7cb94ee0732c5a2ca826.bundle.js +0 -2
- data/dist/874.7cb94ee0732c5a2ca826.bundle.js.map +0 -1
- data/dist/8846b19a497771fe0e9d.svg +0 -4
- data/dist/8aae7b979b04407f71a4.svg +0 -3
- data/dist/8b8b909e42722172d494.svg +0 -7
- data/dist/8dab2a6ba757bcc6e9a5.svg +0 -3
- data/dist/9103e94f1d34c15d44be.svg +0 -6
- data/dist/957.2f40be4cef3037bc352b.bundle.js +0 -3
- data/dist/957.2f40be4cef3037bc352b.bundle.js.LICENSE.txt +0 -19
- data/dist/957.2f40be4cef3037bc352b.bundle.js.map +0 -1
- data/dist/999.a1119c25d77e1883c1e1.bundle.js +0 -2
- data/dist/999.a1119c25d77e1883c1e1.bundle.js.map +0 -1
- data/dist/9a7bd6ec36312a2baa7e.svg +0 -1
- data/dist/9d858d1a3ab57f8ee2e1.svg +0 -4
- data/dist/9eb1fab2684d1e1f0e26.svg +0 -13
- data/dist/a3196e840709b18a3119.svg +0 -1
- data/dist/aa867391c311267af5a9.svg +0 -4
- data/dist/acb8393f3fb9c59b15c9.svg +0 -20
- data/dist/b5698a02eef37ce29146.svg +0 -10
- data/dist/c3432220f657733ed05f.svg +0 -10
- data/dist/ca2af827049e9039ef9c.svg +0 -8
- data/dist/d09537c705fb0878eb63.svg +0 -4
- data/dist/d6df0017c0241dfe86ff.svg +0 -6
- data/dist/d9c199b3e3e469cc5713.svg +0 -10
- data/dist/da1f21c60c7217745dd8.svg +0 -1
- data/dist/docs/gitpod.md +0 -34
- data/dist/docs/js/docsify_v4.12.2+.min.js +0 -1
- data/dist/docs/js/ga_v4.12.2.min.js +0 -1
- data/dist/docs/js/search_v4.12.2.min.js +0 -1
- data/dist/e4ed50222911c5af9a32.svg +0 -12
- data/dist/e70722c0fe0ac3d4227b.svg +0 -10
- data/dist/f8e25c2ebeb0a0725a9e.svg +0 -12
- data/dist/fcb532a05dd4b09c2d08.svg +0 -10
- data/dist/fd040fb5f4e7a515bb3c.svg +0 -15
- data/dist/main.6cdc9308b67c00785584.bundle.js +0 -198
- data/dist/main.6cdc9308b67c00785584.bundle.js.LICENSE.txt +0 -63
- data/dist/main.6cdc9308b67c00785584.bundle.js.map +0 -1
- data/dist/photon/118632062f4755918dac.svg +0 -4
- data/dist/photon/31fe933f3a12be1aa7f3.svg +0 -4
- data/dist/photon/49da6a2153f62ef73d17.svg +0 -7
- data/dist/photon/6bd0589a27236471fdab.svg +0 -4
- data/dist/photon/6c8063be3afa1d95c902.svg +0 -3
- data/dist/photon/76e5b29823c9fd62d90d.svg +0 -3
- data/dist/photon/8aae7b979b04407f71a4.svg +0 -3
- data/dist/photon/8dab2a6ba757bcc6e9a5.svg +0 -3
- data/dist/photon/9103e94f1d34c15d44be.svg +0 -6
- data/dist/photon/aa867391c311267af5a9.svg +0 -4
- data/dist/photon/main.e1d25e5ea6d5812b127b.bundle.js +0 -2
- data/dist/photon/main.e1d25e5ea6d5812b127b.bundle.js.map +0 -1
- data/dist/workbox-e3490c72.js.map +0 -1
- data/dist/zee-worker.js +0 -1
- /data/dist/{4d26f0e38c22eedde178.jpg → firefox-profiler-button-2021-05-06-ZEMGS6NI.jpg} +0 -0
- /data/dist/{18a5d1d99f1c65c33b71.png → perf-screenshot-2024-02-29-4YCKHIPD.png} +0 -0
- /data/dist/{favicon.png → res/img/favicon.png} +0 -0
- /data/dist/{58c5415e952fb6dddd6b.png → spinner-DC3JCQB7.png} +0 -0
data/dist/photon/index.html
CHANGED
|
@@ -1,38 +1,191 @@
|
|
|
1
|
-
<!doctype html
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Photon Styling Examples</title>
|
|
6
|
+
|
|
7
|
+
<script src="/photon/index.js" type="module"></script>
|
|
8
|
+
<link rel="stylesheet" href="/photon/index.css">
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<h1 class="photon-title-40">Photon Styling Examples</h1>
|
|
12
|
+
<p>
|
|
13
|
+
This page has examples for the profiler’s implementation of the
|
|
14
|
+
<a href="https://design.firefox.com/photon/">Photon design spec</a>.
|
|
15
|
+
</p>
|
|
16
|
+
|
|
17
|
+
<h2 class="photon-title-30">Photon Buttons</h2>
|
|
18
|
+
<p>
|
|
19
|
+
All buttons have both enabled and disable states. When a button is
|
|
20
|
+
disabled, please consider adding a title explaining why it's disabled.
|
|
21
|
+
</p>
|
|
22
|
+
<div class="row">
|
|
23
|
+
<h3 class="photon-title-20">Photon Button</h3>
|
|
24
|
+
<pre>
|
|
2
25
|
<button type="button" class="photon-button">Photon Button</button>
|
|
3
26
|
<button type="button" class="photon-button" disabled title="This function is disabled because...">Disabled Photon Button</button>
|
|
4
27
|
<a class="photon-button">Photon Button as a link</a>
|
|
5
|
-
</pre
|
|
28
|
+
</pre>
|
|
29
|
+
<button type="button" class="photon-button">Photon Button</button>
|
|
30
|
+
<button
|
|
31
|
+
type="button"
|
|
32
|
+
class="photon-button"
|
|
33
|
+
disabled
|
|
34
|
+
title="This function is disabled because..."
|
|
35
|
+
>
|
|
36
|
+
Disabled Photon Button
|
|
37
|
+
</button>
|
|
38
|
+
<a class="photon-button">Photon Button as a link</a>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<div class="row">
|
|
42
|
+
<h3 class="photon-title-20">Photon Button Default</h3>
|
|
43
|
+
<pre>
|
|
6
44
|
<button type="button" class="photon-button photon-button-default">Default</button>
|
|
7
45
|
<button type="button" class="photon-button photon-button-default" disabled title="This function is disabled because...">Disabled Default</button>
|
|
8
46
|
<a class="photon-button photon-button-default">Default</a>
|
|
9
|
-
</pre
|
|
47
|
+
</pre>
|
|
48
|
+
<button type="button" class="photon-button photon-button-default">
|
|
49
|
+
Default
|
|
50
|
+
</button>
|
|
51
|
+
<button
|
|
52
|
+
type="button"
|
|
53
|
+
class="photon-button photon-button-default"
|
|
54
|
+
disabled
|
|
55
|
+
title="This function is disabled because..."
|
|
56
|
+
>
|
|
57
|
+
Disabled Default
|
|
58
|
+
</button>
|
|
59
|
+
<a class="photon-button photon-button-default">Default</a>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div class="row">
|
|
63
|
+
<h3 class="photon-title-20">Photon Button Primary</h3>
|
|
64
|
+
<pre>
|
|
10
65
|
<button type="button" class="photon-button photon-button-primary">Primary</button>
|
|
11
66
|
<button type="button" class="photon-button photon-button-primary" disabled title="This function is disabled because...">Disabled Primary</button>
|
|
12
67
|
<a class="photon-button photon-button-primary">Primary</a>
|
|
13
|
-
</pre
|
|
68
|
+
</pre>
|
|
69
|
+
<button type="button" class="photon-button photon-button-primary">
|
|
70
|
+
Primary
|
|
71
|
+
</button>
|
|
72
|
+
<button
|
|
73
|
+
type="button"
|
|
74
|
+
class="photon-button photon-button-primary"
|
|
75
|
+
disabled
|
|
76
|
+
title="This function is disabled because..."
|
|
77
|
+
>
|
|
78
|
+
Disabled Primary
|
|
79
|
+
</button>
|
|
80
|
+
<a class="photon-button photon-button-primary">Primary</a>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<div class="row">
|
|
84
|
+
<h3 class="photon-title-20">Photon Button Destructive</h3>
|
|
85
|
+
<p>Use this class for destructive actions only.</p>
|
|
86
|
+
<pre>
|
|
14
87
|
<button type="button" class="photon-button photon-button-destructive">Delete</button>
|
|
15
88
|
<button type="button" class="photon-button photon-button-destructive" disabled title="This function is disabled because...">Disabled Delete</button>
|
|
16
89
|
<a class="photon-button photon-button-destructive">Delete</a>
|
|
17
|
-
</pre
|
|
90
|
+
</pre>
|
|
91
|
+
<button type="button" class="photon-button photon-button-destructive">
|
|
92
|
+
Delete
|
|
93
|
+
</button>
|
|
94
|
+
<button
|
|
95
|
+
type="button"
|
|
96
|
+
class="photon-button photon-button-destructive"
|
|
97
|
+
disabled
|
|
98
|
+
title="This function is disabled because..."
|
|
99
|
+
>
|
|
100
|
+
Disabled Delete
|
|
101
|
+
</button>
|
|
102
|
+
<a class="photon-button photon-button-destructive">Delete</a>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<div class="row">
|
|
106
|
+
<h3 class="photon-title-20">Photon Button Micro</h3>
|
|
107
|
+
<pre>
|
|
18
108
|
<button type="button" class="photon-button photon-button-micro">Photon Micro Button</button>
|
|
19
109
|
<button type="button" class="photon-button photon-button-micro" disabled title="This function is disabled because...">Disabled Photon Micro Button</button>
|
|
20
110
|
<a class="photon-button photon-button-micro">Micro button as a link</a>
|
|
21
|
-
</pre
|
|
111
|
+
</pre>
|
|
112
|
+
<button type="button" class="photon-button photon-button-micro">
|
|
113
|
+
Photon Micro Button
|
|
114
|
+
</button>
|
|
115
|
+
<button
|
|
116
|
+
type="button"
|
|
117
|
+
class="photon-button photon-button-micro"
|
|
118
|
+
disabled
|
|
119
|
+
title="This function is disabled because..."
|
|
120
|
+
>
|
|
121
|
+
Disabled Photon Micro Button
|
|
122
|
+
</button>
|
|
123
|
+
<a class="photon-button photon-button-micro">Micro button as a link</a>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<div class="row">
|
|
127
|
+
<h3 class="photon-title-20">Photon Button Ghost</h3>
|
|
128
|
+
<pre>
|
|
22
129
|
<button type="button" class="photon-button photon-button-ghost photon-button-test-image"></button>
|
|
23
130
|
<button type="button" class="photon-button photon-button-ghost photon-button-test-image" disabled title="This function is disabled because..."></button>
|
|
24
|
-
</pre
|
|
25
|
-
|
|
131
|
+
</pre>
|
|
132
|
+
<button
|
|
133
|
+
type="button"
|
|
134
|
+
class="photon-button photon-button-ghost photon-button-test-image"
|
|
135
|
+
></button>
|
|
136
|
+
<button
|
|
137
|
+
type="button"
|
|
138
|
+
class="photon-button photon-button-ghost photon-button-test-image"
|
|
139
|
+
disabled
|
|
140
|
+
title="This function is disabled because..."
|
|
141
|
+
></button>
|
|
142
|
+
<a class="photon-button photon-button-ghost photon-button-test-image"></a>
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<h2 class="photon-title-30">Photon inputs</h2>
|
|
146
|
+
|
|
147
|
+
<div class="row">
|
|
148
|
+
<h3 class="photon-title-20">Photon Input</h3>
|
|
149
|
+
<pre>
|
|
150
|
+
<input type="text" class="photon-input" value="Example text" /></pre
|
|
151
|
+
>
|
|
152
|
+
<input type="text" class="photon-input" value="Example text" />
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<div class="row">
|
|
156
|
+
<h3 class="photon-title-20">Photon Checkbox</h3>
|
|
157
|
+
<pre>
|
|
26
158
|
<label class="photon-label photon-label-default">
|
|
27
159
|
<input type="checkbox" class="photon-checkbox photon-checkbox-default" />
|
|
28
160
|
Enable Me
|
|
29
161
|
</label>
|
|
30
|
-
</pre
|
|
162
|
+
</pre>
|
|
163
|
+
<label class="photon-label photon-label-default">
|
|
164
|
+
<input
|
|
165
|
+
type="checkbox"
|
|
166
|
+
class="photon-checkbox photon-checkbox-default"
|
|
167
|
+
/>
|
|
168
|
+
Enable Me
|
|
169
|
+
</label>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
<div class="row">
|
|
173
|
+
<h3 class="photon-title-20">Photon Checkbox Micro (Unofficial)</h3>
|
|
174
|
+
<pre>
|
|
31
175
|
<label class="photon-label photon-label-micro">
|
|
32
176
|
<input type="checkbox" class="photon-checkbox-micro" />
|
|
33
177
|
Enable Me
|
|
34
178
|
</label>
|
|
35
|
-
</pre
|
|
179
|
+
</pre>
|
|
180
|
+
<label class="photon-label photon-label-micro">
|
|
181
|
+
<input type="checkbox" class="photon-checkbox photon-checkbox-micro" />
|
|
182
|
+
Enable Me
|
|
183
|
+
</label>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div class="row">
|
|
187
|
+
<h3 class="photon-title-20">Photon Radio</h3>
|
|
188
|
+
<pre>
|
|
36
189
|
<label class="photon-label photon-label-default">
|
|
37
190
|
<input type="radio" name="radio-example" class="photon-radio photon-radio-default" />
|
|
38
191
|
Choice 1
|
|
@@ -45,7 +198,36 @@
|
|
|
45
198
|
<input type="radio" name="radio-example" class="photon-radio photon-radio-default" />
|
|
46
199
|
Choice 3
|
|
47
200
|
</label>
|
|
48
|
-
</pre
|
|
201
|
+
</pre>
|
|
202
|
+
<label class="photon-label photon-label-default">
|
|
203
|
+
<input
|
|
204
|
+
type="radio"
|
|
205
|
+
name="radio-example"
|
|
206
|
+
class="photon-radio photon-radio-default"
|
|
207
|
+
/>
|
|
208
|
+
Choice 1
|
|
209
|
+
</label>
|
|
210
|
+
<label class="photon-label photon-label-default">
|
|
211
|
+
<input
|
|
212
|
+
type="radio"
|
|
213
|
+
name="radio-example"
|
|
214
|
+
class="photon-radio photon-radio-default"
|
|
215
|
+
/>
|
|
216
|
+
Choice 2
|
|
217
|
+
</label>
|
|
218
|
+
<label class="photon-label photon-label-default">
|
|
219
|
+
<input
|
|
220
|
+
type="radio"
|
|
221
|
+
name="radio-example"
|
|
222
|
+
class="photon-radio photon-radio-default"
|
|
223
|
+
/>
|
|
224
|
+
Choice 3
|
|
225
|
+
</label>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<div class="row">
|
|
229
|
+
<h3 class="photon-title-20">Photon Radio Micro (Unofficial)</h3>
|
|
230
|
+
<pre>
|
|
49
231
|
<label class="photon-label photon-label-micro">
|
|
50
232
|
<input type="radio" name="radio-example" class="photon-radio photon-radio-micro" />
|
|
51
233
|
Choice 1
|
|
@@ -58,13 +240,74 @@
|
|
|
58
240
|
<input type="radio" name="radio-example" class="photon-radio photon-radio-micro" />
|
|
59
241
|
Choice 3
|
|
60
242
|
</label>
|
|
61
|
-
</pre
|
|
243
|
+
</pre>
|
|
244
|
+
<label class="photon-label photon-label-micro">
|
|
245
|
+
<input
|
|
246
|
+
type="radio"
|
|
247
|
+
name="radio-example-micro"
|
|
248
|
+
class="photon-radio photon-radio-micro"
|
|
249
|
+
/>
|
|
250
|
+
Choice 1
|
|
251
|
+
</label>
|
|
252
|
+
<label class="photon-label photon-label-micro">
|
|
253
|
+
<input
|
|
254
|
+
type="radio"
|
|
255
|
+
name="radio-example-micro"
|
|
256
|
+
class="photon-radio photon-radio-micro"
|
|
257
|
+
/>
|
|
258
|
+
Choice 2
|
|
259
|
+
</label>
|
|
260
|
+
<label class="photon-label photon-label-micro">
|
|
261
|
+
<input
|
|
262
|
+
type="radio"
|
|
263
|
+
name="radio-example-micro"
|
|
264
|
+
class="photon-radio photon-radio-micro"
|
|
265
|
+
/>
|
|
266
|
+
Choice 3
|
|
267
|
+
</label>
|
|
268
|
+
</div>
|
|
269
|
+
|
|
270
|
+
<h2 class="photon-title-30">Photon Message Bars</h2>
|
|
271
|
+
<p>
|
|
272
|
+
These components work well both when taking all the available space or
|
|
273
|
+
when they're smaller (sized in a flex component for example).
|
|
274
|
+
</p>
|
|
275
|
+
|
|
276
|
+
<h3 class="photon-title-20">Photon Message Bar Generic</h3>
|
|
277
|
+
<div class="row">
|
|
278
|
+
<pre>
|
|
62
279
|
<div class="photon-message-bar photon-message-bar-inner-content">
|
|
63
280
|
<div class="photon-message-bar-inner-text">
|
|
64
281
|
This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.
|
|
65
282
|
</div>
|
|
66
283
|
</div>
|
|
67
|
-
</pre
|
|
284
|
+
</pre
|
|
285
|
+
>
|
|
286
|
+
<div class="photon-message-bar photon-message-bar-inner-content">
|
|
287
|
+
<div class="photon-message-bar-inner-text">
|
|
288
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
289
|
+
with your version of Firefox.
|
|
290
|
+
</div>
|
|
291
|
+
</div>
|
|
292
|
+
<div
|
|
293
|
+
class="photon-message-bar photon-message-bar-inner-content sized-to-content"
|
|
294
|
+
>
|
|
295
|
+
<div class="photon-message-bar-inner-text">
|
|
296
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
297
|
+
with your version of Firefox.
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
<div
|
|
301
|
+
class="photon-message-bar photon-message-bar-inner-content sized-constrained"
|
|
302
|
+
>
|
|
303
|
+
<div class="photon-message-bar-inner-text">
|
|
304
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
305
|
+
with your version of Firefox.
|
|
306
|
+
</div>
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
<div class="row">
|
|
310
|
+
<pre>
|
|
68
311
|
<div class="photon-message-bar photon-message-bar-inner-content">
|
|
69
312
|
<div class="photon-message-bar-inner-text">
|
|
70
313
|
This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.
|
|
@@ -73,7 +316,51 @@
|
|
|
73
316
|
Call to action
|
|
74
317
|
</button>
|
|
75
318
|
</div>
|
|
76
|
-
</pre
|
|
319
|
+
</pre
|
|
320
|
+
>
|
|
321
|
+
<div class="photon-message-bar photon-message-bar-inner-content">
|
|
322
|
+
<div class="photon-message-bar-inner-text">
|
|
323
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
324
|
+
with your version of Firefox.
|
|
325
|
+
</div>
|
|
326
|
+
<button
|
|
327
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
328
|
+
type="button"
|
|
329
|
+
>
|
|
330
|
+
Call to action
|
|
331
|
+
</button>
|
|
332
|
+
</div>
|
|
333
|
+
<div
|
|
334
|
+
class="photon-message-bar photon-message-bar-inner-content sized-to-content"
|
|
335
|
+
>
|
|
336
|
+
<div class="photon-message-bar-inner-text">
|
|
337
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
338
|
+
with your version of Firefox.
|
|
339
|
+
</div>
|
|
340
|
+
<button
|
|
341
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
342
|
+
type="button"
|
|
343
|
+
>
|
|
344
|
+
Call to action
|
|
345
|
+
</button>
|
|
346
|
+
</div>
|
|
347
|
+
<div
|
|
348
|
+
class="photon-message-bar photon-message-bar-inner-content sized-constrained"
|
|
349
|
+
>
|
|
350
|
+
<div class="photon-message-bar-inner-text">
|
|
351
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
352
|
+
with your version of Firefox.
|
|
353
|
+
</div>
|
|
354
|
+
<button
|
|
355
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
356
|
+
type="button"
|
|
357
|
+
>
|
|
358
|
+
Call to action
|
|
359
|
+
</button>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
<div class="row">
|
|
363
|
+
<pre>
|
|
77
364
|
<div class="photon-message-bar">
|
|
78
365
|
<div class="photon-message-bar-inner-content">
|
|
79
366
|
<div class="photon-message-bar-inner-text">
|
|
@@ -87,7 +374,71 @@
|
|
|
87
374
|
aria-label="Hide the message" title="Hide the message">
|
|
88
375
|
</button>
|
|
89
376
|
</div>
|
|
90
|
-
</pre
|
|
377
|
+
</pre
|
|
378
|
+
>
|
|
379
|
+
<div class="photon-message-bar">
|
|
380
|
+
<div class="photon-message-bar-inner-content">
|
|
381
|
+
<div class="photon-message-bar-inner-text">
|
|
382
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
383
|
+
with your version of Firefox.
|
|
384
|
+
</div>
|
|
385
|
+
<button
|
|
386
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
387
|
+
type="button"
|
|
388
|
+
>
|
|
389
|
+
Call to action
|
|
390
|
+
</button>
|
|
391
|
+
</div>
|
|
392
|
+
<button
|
|
393
|
+
class="photon-button photon-message-bar-close-button"
|
|
394
|
+
type="button"
|
|
395
|
+
aria-label="Hide the message"
|
|
396
|
+
title="Hide the message"
|
|
397
|
+
></button>
|
|
398
|
+
</div>
|
|
399
|
+
<div class="photon-message-bar sized-to-content">
|
|
400
|
+
<div class="photon-message-bar-inner-content">
|
|
401
|
+
<div class="photon-message-bar-inner-text">
|
|
402
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
403
|
+
with your version of Firefox.
|
|
404
|
+
</div>
|
|
405
|
+
<button
|
|
406
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
407
|
+
type="button"
|
|
408
|
+
>
|
|
409
|
+
Call to action
|
|
410
|
+
</button>
|
|
411
|
+
</div>
|
|
412
|
+
<button
|
|
413
|
+
class="photon-button photon-message-bar-close-button"
|
|
414
|
+
type="button"
|
|
415
|
+
aria-label="Hide the message"
|
|
416
|
+
title="Hide the message"
|
|
417
|
+
></button>
|
|
418
|
+
</div>
|
|
419
|
+
<div class="photon-message-bar sized-constrained">
|
|
420
|
+
<div class="photon-message-bar-inner-content">
|
|
421
|
+
<div class="photon-message-bar-inner-text">
|
|
422
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
423
|
+
with your version of Firefox.
|
|
424
|
+
</div>
|
|
425
|
+
<button
|
|
426
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
427
|
+
type="button"
|
|
428
|
+
>
|
|
429
|
+
Call to action
|
|
430
|
+
</button>
|
|
431
|
+
</div>
|
|
432
|
+
<button
|
|
433
|
+
class="photon-button photon-message-bar-close-button"
|
|
434
|
+
type="button"
|
|
435
|
+
aria-label="Hide the message"
|
|
436
|
+
title="Hide the message"
|
|
437
|
+
></button>
|
|
438
|
+
</div>
|
|
439
|
+
</div>
|
|
440
|
+
<div class="row">
|
|
441
|
+
<pre>
|
|
91
442
|
<div class="photon-message-bar">
|
|
92
443
|
<div class="photon-message-bar-inner-content">
|
|
93
444
|
<div class='photon-message-bar-inner-text'>
|
|
@@ -98,13 +449,89 @@
|
|
|
98
449
|
aria-label="Hide the message" title="Hide the message">
|
|
99
450
|
</button>
|
|
100
451
|
</div>
|
|
101
|
-
</pre
|
|
452
|
+
</pre
|
|
453
|
+
>
|
|
454
|
+
<div class="photon-message-bar">
|
|
455
|
+
<div class="photon-message-bar-inner-content">
|
|
456
|
+
<div class="photon-message-bar-inner-text">
|
|
457
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
458
|
+
with your version of Firefox.
|
|
459
|
+
</div>
|
|
460
|
+
</div>
|
|
461
|
+
<button
|
|
462
|
+
class="photon-button photon-message-bar-close-button"
|
|
463
|
+
type="button"
|
|
464
|
+
aria-label="Hide the message"
|
|
465
|
+
title="Hide the message"
|
|
466
|
+
></button>
|
|
467
|
+
</div>
|
|
468
|
+
<div class="photon-message-bar sized-to-content">
|
|
469
|
+
<div class="photon-message-bar-inner-content">
|
|
470
|
+
<div class="photon-message-bar-inner-text">
|
|
471
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
472
|
+
with your version of Firefox.
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
<button
|
|
476
|
+
class="photon-button photon-message-bar-close-button"
|
|
477
|
+
type="button"
|
|
478
|
+
aria-label="Hide the message"
|
|
479
|
+
title="Hide the message"
|
|
480
|
+
></button>
|
|
481
|
+
</div>
|
|
482
|
+
<div class="photon-message-bar sized-constrained">
|
|
483
|
+
<div class="photon-message-bar-inner-content">
|
|
484
|
+
<div class="photon-message-bar-inner-text">
|
|
485
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
486
|
+
with your version of Firefox.
|
|
487
|
+
</div>
|
|
488
|
+
</div>
|
|
489
|
+
<button
|
|
490
|
+
class="photon-button photon-message-bar-close-button"
|
|
491
|
+
type="button"
|
|
492
|
+
aria-label="Hide the message"
|
|
493
|
+
title="Hide the message"
|
|
494
|
+
></button>
|
|
495
|
+
</div>
|
|
496
|
+
</div>
|
|
497
|
+
|
|
498
|
+
<h3 class="photon-title-20">Photon Message Bar Error</h3>
|
|
499
|
+
<div class="row">
|
|
500
|
+
<pre>
|
|
102
501
|
<div class="photon-message-bar photon-message-bar-error photon-message-bar-inner-content">
|
|
103
502
|
<div class="photon-message-bar-inner-text">
|
|
104
503
|
This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.
|
|
105
504
|
</div>
|
|
106
505
|
</div>
|
|
107
|
-
</pre
|
|
506
|
+
</pre
|
|
507
|
+
>
|
|
508
|
+
<div
|
|
509
|
+
class="photon-message-bar photon-message-bar-error photon-message-bar-inner-content"
|
|
510
|
+
>
|
|
511
|
+
<div class="photon-message-bar-inner-text">
|
|
512
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
513
|
+
with your version of Firefox.
|
|
514
|
+
</div>
|
|
515
|
+
</div>
|
|
516
|
+
<div
|
|
517
|
+
class="photon-message-bar photon-message-bar-error photon-message-bar-inner-content sized-to-content"
|
|
518
|
+
>
|
|
519
|
+
<div class="photon-message-bar-inner-text">
|
|
520
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
521
|
+
with your version of Firefox.
|
|
522
|
+
</div>
|
|
523
|
+
</div>
|
|
524
|
+
<div
|
|
525
|
+
class="photon-message-bar photon-message-bar-error photon-message-bar-inner-content sized-constrained"
|
|
526
|
+
>
|
|
527
|
+
<div class="photon-message-bar-inner-text">
|
|
528
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
529
|
+
with your version of Firefox.
|
|
530
|
+
</div>
|
|
531
|
+
</div>
|
|
532
|
+
</div>
|
|
533
|
+
<div class="row">
|
|
534
|
+
<pre>
|
|
108
535
|
<div class="photon-message-bar photon-message-bar-error photon-message-bar-inner-content">
|
|
109
536
|
<div class="photon-message-bar-inner-text">
|
|
110
537
|
This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.
|
|
@@ -113,7 +540,53 @@
|
|
|
113
540
|
Call to action
|
|
114
541
|
</button>
|
|
115
542
|
</div>
|
|
116
|
-
</pre
|
|
543
|
+
</pre
|
|
544
|
+
>
|
|
545
|
+
<div
|
|
546
|
+
class="photon-message-bar photon-message-bar-error photon-message-bar-inner-content"
|
|
547
|
+
>
|
|
548
|
+
<div class="photon-message-bar-inner-text">
|
|
549
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
550
|
+
with your version of Firefox.
|
|
551
|
+
</div>
|
|
552
|
+
<button
|
|
553
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
554
|
+
type="button"
|
|
555
|
+
>
|
|
556
|
+
Call to action
|
|
557
|
+
</button>
|
|
558
|
+
</div>
|
|
559
|
+
<div
|
|
560
|
+
class="photon-message-bar photon-message-bar-error photon-message-bar-inner-content sized-to-content"
|
|
561
|
+
>
|
|
562
|
+
<div class="photon-message-bar-inner-text">
|
|
563
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
564
|
+
with your version of Firefox.
|
|
565
|
+
</div>
|
|
566
|
+
<button
|
|
567
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
568
|
+
type="button"
|
|
569
|
+
>
|
|
570
|
+
Call to action
|
|
571
|
+
</button>
|
|
572
|
+
</div>
|
|
573
|
+
<div
|
|
574
|
+
class="photon-message-bar photon-message-bar-error photon-message-bar-inner-content sized-constrained"
|
|
575
|
+
>
|
|
576
|
+
<div class="photon-message-bar-inner-text">
|
|
577
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
578
|
+
with your version of Firefox.
|
|
579
|
+
</div>
|
|
580
|
+
<button
|
|
581
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
582
|
+
type="button"
|
|
583
|
+
>
|
|
584
|
+
Call to action
|
|
585
|
+
</button>
|
|
586
|
+
</div>
|
|
587
|
+
</div>
|
|
588
|
+
<div class="row">
|
|
589
|
+
<pre>
|
|
117
590
|
<div class="photon-message-bar photon-message-bar-error">
|
|
118
591
|
<div class="photon-message-bar-inner-content">
|
|
119
592
|
<div class="photon-message-bar-inner-text">
|
|
@@ -127,7 +600,73 @@
|
|
|
127
600
|
aria-label="Hide the message" title="Hide the message">
|
|
128
601
|
</button>
|
|
129
602
|
</div>
|
|
130
|
-
</pre
|
|
603
|
+
</pre
|
|
604
|
+
>
|
|
605
|
+
<div class="photon-message-bar photon-message-bar-error">
|
|
606
|
+
<div class="photon-message-bar-inner-content">
|
|
607
|
+
<div class="photon-message-bar-inner-text">
|
|
608
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
609
|
+
with your version of Firefox.
|
|
610
|
+
</div>
|
|
611
|
+
<button
|
|
612
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
613
|
+
type="button"
|
|
614
|
+
>
|
|
615
|
+
Call to action
|
|
616
|
+
</button>
|
|
617
|
+
</div>
|
|
618
|
+
<button
|
|
619
|
+
class="photon-button photon-message-bar-close-button"
|
|
620
|
+
type="button"
|
|
621
|
+
aria-label="Hide the message"
|
|
622
|
+
title="Hide the message"
|
|
623
|
+
></button>
|
|
624
|
+
</div>
|
|
625
|
+
<div class="photon-message-bar photon-message-bar-error sized-to-content">
|
|
626
|
+
<div class="photon-message-bar-inner-content">
|
|
627
|
+
<div class="photon-message-bar-inner-text">
|
|
628
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
629
|
+
with your version of Firefox.
|
|
630
|
+
</div>
|
|
631
|
+
<button
|
|
632
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
633
|
+
type="button"
|
|
634
|
+
>
|
|
635
|
+
Call to action
|
|
636
|
+
</button>
|
|
637
|
+
</div>
|
|
638
|
+
<button
|
|
639
|
+
class="photon-button photon-message-bar-close-button"
|
|
640
|
+
type="button"
|
|
641
|
+
aria-label="Hide the message"
|
|
642
|
+
title="Hide the message"
|
|
643
|
+
></button>
|
|
644
|
+
</div>
|
|
645
|
+
<div
|
|
646
|
+
class="photon-message-bar photon-message-bar-error sized-constrained"
|
|
647
|
+
>
|
|
648
|
+
<div class="photon-message-bar-inner-content">
|
|
649
|
+
<div class="photon-message-bar-inner-text">
|
|
650
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
651
|
+
with your version of Firefox.
|
|
652
|
+
</div>
|
|
653
|
+
<button
|
|
654
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
655
|
+
type="button"
|
|
656
|
+
>
|
|
657
|
+
Call to action
|
|
658
|
+
</button>
|
|
659
|
+
</div>
|
|
660
|
+
<button
|
|
661
|
+
class="photon-button photon-message-bar-close-button"
|
|
662
|
+
type="button"
|
|
663
|
+
aria-label="Hide the message"
|
|
664
|
+
title="Hide the message"
|
|
665
|
+
></button>
|
|
666
|
+
</div>
|
|
667
|
+
</div>
|
|
668
|
+
<div class="row">
|
|
669
|
+
<pre>
|
|
131
670
|
<div class="photon-message-bar photon-message-bar-error">
|
|
132
671
|
<div class="photon-message-bar-inner-content">
|
|
133
672
|
<div class='photon-message-bar-inner-text'>
|
|
@@ -138,13 +677,90 @@
|
|
|
138
677
|
aria-label="Hide the message" title="Hide the message">
|
|
139
678
|
</button>
|
|
140
679
|
</div>
|
|
141
|
-
</pre
|
|
680
|
+
</pre
|
|
681
|
+
>
|
|
682
|
+
<div class="photon-message-bar photon-message-bar-error">
|
|
683
|
+
<div class="photon-message-bar-inner-content">
|
|
684
|
+
<div class="photon-message-bar-inner-text">
|
|
685
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
686
|
+
with your version of Firefox.
|
|
687
|
+
</div>
|
|
688
|
+
</div>
|
|
689
|
+
<button
|
|
690
|
+
class="photon-button photon-message-bar-close-button"
|
|
691
|
+
type="button"
|
|
692
|
+
aria-label="Hide the message"
|
|
693
|
+
title="Hide the message"
|
|
694
|
+
></button>
|
|
695
|
+
</div>
|
|
696
|
+
<div class="photon-message-bar photon-message-bar-error sized-to-content">
|
|
697
|
+
<div class="photon-message-bar-inner-content">
|
|
698
|
+
<div class="photon-message-bar-inner-text">
|
|
699
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
700
|
+
with your version of Firefox.
|
|
701
|
+
</div>
|
|
702
|
+
</div>
|
|
703
|
+
<button
|
|
704
|
+
class="photon-button photon-message-bar-close-button"
|
|
705
|
+
type="button"
|
|
706
|
+
aria-label="Hide the message"
|
|
707
|
+
title="Hide the message"
|
|
708
|
+
></button>
|
|
709
|
+
</div>
|
|
710
|
+
<div
|
|
711
|
+
class="photon-message-bar photon-message-bar-error sized-constrained"
|
|
712
|
+
>
|
|
713
|
+
<div class="photon-message-bar-inner-content">
|
|
714
|
+
<div class="photon-message-bar-inner-text">
|
|
715
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
716
|
+
with your version of Firefox.
|
|
717
|
+
</div>
|
|
718
|
+
</div>
|
|
719
|
+
<button
|
|
720
|
+
class="photon-button photon-message-bar-close-button"
|
|
721
|
+
type="button"
|
|
722
|
+
aria-label="Hide the message"
|
|
723
|
+
title="Hide the message"
|
|
724
|
+
></button>
|
|
725
|
+
</div>
|
|
726
|
+
</div>
|
|
727
|
+
|
|
728
|
+
<h3 class="photon-title-20">Photon Message Bar Warning</h3>
|
|
729
|
+
<div class="row">
|
|
730
|
+
<pre>
|
|
142
731
|
<div class="photon-message-bar photon-message-bar-warning photon-message-bar-inner-content">
|
|
143
732
|
<div class="photon-message-bar-inner-text">
|
|
144
733
|
This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.
|
|
145
734
|
</div>
|
|
146
735
|
</div>
|
|
147
|
-
</pre
|
|
736
|
+
</pre>
|
|
737
|
+
<div
|
|
738
|
+
class="photon-message-bar photon-message-bar-warning photon-message-bar-inner-content"
|
|
739
|
+
>
|
|
740
|
+
<div class="photon-message-bar-inner-text">
|
|
741
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
742
|
+
with your version of Firefox.
|
|
743
|
+
</div>
|
|
744
|
+
</div>
|
|
745
|
+
<div
|
|
746
|
+
class="photon-message-bar photon-message-bar-warning photon-message-bar-inner-content sized-to-content"
|
|
747
|
+
>
|
|
748
|
+
<div class="photon-message-bar-inner-text">
|
|
749
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
750
|
+
with your version of Firefox.
|
|
751
|
+
</div>
|
|
752
|
+
</div>
|
|
753
|
+
<div
|
|
754
|
+
class="photon-message-bar photon-message-bar-warning photon-message-bar-inner-content sized-constrained"
|
|
755
|
+
>
|
|
756
|
+
<div class="photon-message-bar-inner-text">
|
|
757
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
758
|
+
with your version of Firefox.
|
|
759
|
+
</div>
|
|
760
|
+
</div>
|
|
761
|
+
</div>
|
|
762
|
+
<div class="row">
|
|
763
|
+
<pre>
|
|
148
764
|
<div class="photon-message-bar photon-message-bar-warning photon-message-bar-inner-content">
|
|
149
765
|
<div class="photon-message-bar-inner-text">
|
|
150
766
|
This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.
|
|
@@ -153,7 +769,52 @@
|
|
|
153
769
|
Call to action
|
|
154
770
|
</button>
|
|
155
771
|
</div>
|
|
156
|
-
</pre
|
|
772
|
+
</pre>
|
|
773
|
+
<div
|
|
774
|
+
class="photon-message-bar photon-message-bar-warning photon-message-bar-inner-content"
|
|
775
|
+
>
|
|
776
|
+
<div class="photon-message-bar-inner-text">
|
|
777
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
778
|
+
with your version of Firefox.
|
|
779
|
+
</div>
|
|
780
|
+
<button
|
|
781
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
782
|
+
type="button"
|
|
783
|
+
>
|
|
784
|
+
Call to action
|
|
785
|
+
</button>
|
|
786
|
+
</div>
|
|
787
|
+
<div
|
|
788
|
+
class="photon-message-bar photon-message-bar-warning photon-message-bar-inner-content sized-to-content"
|
|
789
|
+
>
|
|
790
|
+
<div class="photon-message-bar-inner-text">
|
|
791
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
792
|
+
with your version of Firefox.
|
|
793
|
+
</div>
|
|
794
|
+
<button
|
|
795
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
796
|
+
type="button"
|
|
797
|
+
>
|
|
798
|
+
Call to action
|
|
799
|
+
</button>
|
|
800
|
+
</div>
|
|
801
|
+
<div
|
|
802
|
+
class="photon-message-bar photon-message-bar-warning photon-message-bar-inner-content sized-constrained"
|
|
803
|
+
>
|
|
804
|
+
<div class="photon-message-bar-inner-text">
|
|
805
|
+
This is a non-dismissable message bar. This add-on is not compatible
|
|
806
|
+
with your version of Firefox.
|
|
807
|
+
</div>
|
|
808
|
+
<button
|
|
809
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
810
|
+
type="button"
|
|
811
|
+
>
|
|
812
|
+
Call to action
|
|
813
|
+
</button>
|
|
814
|
+
</div>
|
|
815
|
+
</div>
|
|
816
|
+
<div class="row">
|
|
817
|
+
<pre>
|
|
157
818
|
<div class="photon-message-bar photon-message-bar-warning">
|
|
158
819
|
<div class="photon-message-bar-inner-content">
|
|
159
820
|
<div class="photon-message-bar-inner-text">
|
|
@@ -167,7 +828,74 @@
|
|
|
167
828
|
aria-label="Hide the message" title="Hide the message">
|
|
168
829
|
</button>
|
|
169
830
|
</div>
|
|
170
|
-
</pre
|
|
831
|
+
</pre>
|
|
832
|
+
<div class="photon-message-bar photon-message-bar-warning">
|
|
833
|
+
<div class="photon-message-bar-inner-content">
|
|
834
|
+
<div class="photon-message-bar-inner-text">
|
|
835
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
836
|
+
with your version of Firefox.
|
|
837
|
+
</div>
|
|
838
|
+
<button
|
|
839
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
840
|
+
type="button"
|
|
841
|
+
>
|
|
842
|
+
Call to action
|
|
843
|
+
</button>
|
|
844
|
+
</div>
|
|
845
|
+
<button
|
|
846
|
+
class="photon-button photon-message-bar-close-button"
|
|
847
|
+
type="button"
|
|
848
|
+
aria-label="Hide the message"
|
|
849
|
+
title="Hide the message"
|
|
850
|
+
></button>
|
|
851
|
+
</div>
|
|
852
|
+
<div
|
|
853
|
+
class="photon-message-bar photon-message-bar-warning sized-to-content"
|
|
854
|
+
>
|
|
855
|
+
<div class="photon-message-bar-inner-content">
|
|
856
|
+
<div class="photon-message-bar-inner-text">
|
|
857
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
858
|
+
with your version of Firefox.
|
|
859
|
+
</div>
|
|
860
|
+
<button
|
|
861
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
862
|
+
type="button"
|
|
863
|
+
>
|
|
864
|
+
Call to action
|
|
865
|
+
</button>
|
|
866
|
+
</div>
|
|
867
|
+
<button
|
|
868
|
+
class="photon-button photon-message-bar-close-button"
|
|
869
|
+
type="button"
|
|
870
|
+
aria-label="Hide the message"
|
|
871
|
+
title="Hide the message"
|
|
872
|
+
></button>
|
|
873
|
+
</div>
|
|
874
|
+
<div
|
|
875
|
+
class="photon-message-bar photon-message-bar-warning sized-constrained"
|
|
876
|
+
>
|
|
877
|
+
<div class="photon-message-bar-inner-content">
|
|
878
|
+
<div class="photon-message-bar-inner-text">
|
|
879
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
880
|
+
with your version of Firefox.
|
|
881
|
+
</div>
|
|
882
|
+
<button
|
|
883
|
+
class="photon-button photon-button-micro photon-message-bar-action-button"
|
|
884
|
+
type="button"
|
|
885
|
+
>
|
|
886
|
+
Call to action
|
|
887
|
+
</button>
|
|
888
|
+
</div>
|
|
889
|
+
<button
|
|
890
|
+
class="photon-button photon-message-bar-close-button"
|
|
891
|
+
type="button"
|
|
892
|
+
aria-label="Hide the message"
|
|
893
|
+
title="Hide the message"
|
|
894
|
+
></button>
|
|
895
|
+
</div>
|
|
896
|
+
</div>
|
|
897
|
+
<div class="row">
|
|
898
|
+
<pre>
|
|
171
899
|
<div class="photon-message-bar photon-message-bar-warning">
|
|
172
900
|
<div class="photon-message-bar-inner-content">
|
|
173
901
|
<div class='photon-message-bar-inner-text'>
|
|
@@ -178,7 +906,60 @@
|
|
|
178
906
|
aria-label="Hide the message" title="Hide the message">
|
|
179
907
|
</button>
|
|
180
908
|
</div>
|
|
181
|
-
</pre
|
|
909
|
+
</pre>
|
|
910
|
+
<div class="photon-message-bar photon-message-bar-warning">
|
|
911
|
+
<div class="photon-message-bar-inner-content">
|
|
912
|
+
<div class="photon-message-bar-inner-text">
|
|
913
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
914
|
+
with your version of Firefox.
|
|
915
|
+
</div>
|
|
916
|
+
</div>
|
|
917
|
+
<button
|
|
918
|
+
class="photon-button photon-message-bar-close-button"
|
|
919
|
+
type="button"
|
|
920
|
+
aria-label="Hide the message"
|
|
921
|
+
title="Hide the message"
|
|
922
|
+
></button>
|
|
923
|
+
</div>
|
|
924
|
+
<div
|
|
925
|
+
class="photon-message-bar photon-message-bar-warning sized-to-content"
|
|
926
|
+
>
|
|
927
|
+
<div class="photon-message-bar-inner-content">
|
|
928
|
+
<div class="photon-message-bar-inner-text">
|
|
929
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
930
|
+
with your version of Firefox.
|
|
931
|
+
</div>
|
|
932
|
+
</div>
|
|
933
|
+
<button
|
|
934
|
+
class="photon-button photon-message-bar-close-button"
|
|
935
|
+
type="button"
|
|
936
|
+
aria-label="Hide the message"
|
|
937
|
+
title="Hide the message"
|
|
938
|
+
></button>
|
|
939
|
+
</div>
|
|
940
|
+
<div
|
|
941
|
+
class="photon-message-bar photon-message-bar-warning sized-constrained"
|
|
942
|
+
>
|
|
943
|
+
<div class="photon-message-bar-inner-content">
|
|
944
|
+
<div class="photon-message-bar-inner-text">
|
|
945
|
+
This is a dismissable message bar. This add-on is not compatible
|
|
946
|
+
with your version of Firefox.
|
|
947
|
+
</div>
|
|
948
|
+
</div>
|
|
949
|
+
<button
|
|
950
|
+
class="photon-button photon-message-bar-close-button"
|
|
951
|
+
type="button"
|
|
952
|
+
aria-label="Hide the message"
|
|
953
|
+
title="Hide the message"
|
|
954
|
+
></button>
|
|
955
|
+
</div>
|
|
956
|
+
</div>
|
|
957
|
+
|
|
958
|
+
<h2 class="photon-title-30">Typography</h2>
|
|
959
|
+
Please look only at the font sizes and weights. We don't change colors or
|
|
960
|
+
paddings with these classes..
|
|
961
|
+
<div class="row">
|
|
962
|
+
<pre>
|
|
182
963
|
<div class="photon-display-20">Something just happened.</div>
|
|
183
964
|
<h4 class="photon-title-30">Title 30 followed with body 30</h4>
|
|
184
965
|
<div class="photon-body-30">This is a large body of text.</div>
|
|
@@ -189,7 +970,35 @@
|
|
|
189
970
|
<h4 class="photon-title-10">Title 10 followed with body 10</h4>
|
|
190
971
|
<div class="photon-body-10">This is a large body of text.</div>
|
|
191
972
|
<div class="photon-caption-10">This is a caption. Normally its color is also paler.</div>
|
|
192
|
-
</pre
|
|
973
|
+
</pre>
|
|
974
|
+
</div>
|
|
975
|
+
<div class="row">
|
|
976
|
+
<div class="photon-display-20">Something just happened.</div>
|
|
977
|
+
<h4 class="photon-title-30">Title 30 followed with body 30</h4>
|
|
978
|
+
<div class="photon-body-30">This is a large body of text.</div>
|
|
979
|
+
<div class="photon-caption-30">
|
|
980
|
+
This is a caption. Normally its color is also paler.
|
|
981
|
+
</div>
|
|
982
|
+
<h4 class="photon-title-20">Title 20 followed with body 20</h4>
|
|
983
|
+
<div class="photon-body-20">This is a large body of text.</div>
|
|
984
|
+
<div class="photon-caption-20">
|
|
985
|
+
This is a caption. Normally its color is also paler.
|
|
986
|
+
</div>
|
|
987
|
+
<h4 class="photon-title-10">Title 10 followed with body 10</h4>
|
|
988
|
+
<div class="photon-body-10">This is a large body of text.</div>
|
|
989
|
+
<div class="photon-caption-10">
|
|
990
|
+
This is a caption. Normally its color is also paler.
|
|
991
|
+
</div>
|
|
992
|
+
</div>
|
|
993
|
+
|
|
994
|
+
<h2 class="photon-title-30">Bigger components</h2>
|
|
995
|
+
<h3 class="photon-title-20">Confirm dialog</h3>
|
|
996
|
+
<p>
|
|
997
|
+
This is used to display a confirmation dialog. This will be usually used
|
|
998
|
+
inside another container.
|
|
999
|
+
</p>
|
|
1000
|
+
<div class="row">
|
|
1001
|
+
<pre>
|
|
193
1002
|
<div className="confirmDialog">
|
|
194
1003
|
<h3 className="confirmDialogTitle">
|
|
195
1004
|
Wonderful title
|
|
@@ -212,4 +1021,25 @@
|
|
|
212
1021
|
/>
|
|
213
1022
|
</div>
|
|
214
1023
|
</div>
|
|
215
|
-
</pre
|
|
1024
|
+
</pre>
|
|
1025
|
+
</div>
|
|
1026
|
+
<div class="row">
|
|
1027
|
+
<div class="confirmDialog">
|
|
1028
|
+
<h3 class="confirmDialogTitle">Wonderful title</h3>
|
|
1029
|
+
<div class="confirmDialogContent">Wonderful content</div>
|
|
1030
|
+
<div class="confirmDialogButtons">
|
|
1031
|
+
<input
|
|
1032
|
+
type="button"
|
|
1033
|
+
class="photon-button photon-button-default"
|
|
1034
|
+
value="Cancel"
|
|
1035
|
+
/>
|
|
1036
|
+
<input
|
|
1037
|
+
type="button"
|
|
1038
|
+
class="photon-button photon-button-destructive"
|
|
1039
|
+
value="Confirm"
|
|
1040
|
+
/>
|
|
1041
|
+
</div>
|
|
1042
|
+
</div>
|
|
1043
|
+
</div>
|
|
1044
|
+
</body>
|
|
1045
|
+
</html>
|