-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathnotice.html
138 lines (123 loc) · 4.64 KB
/
notice.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
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>notice</title>
<script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.91/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.91/calcite.css" />
<style>
h1 {
margin-bottom: 5rem;
}
h2,
calcite-notice {
margin-bottom: 3rem;
}
body {
font-family: var(--calcite-sans-family);
font-size: var(--calcite-font-size-0);
color: var(--calcite-ui-text-1);
max-width: 1024px;
min-width: 280px;
width: 70vw;
padding: 0 var(--calcite-spacing-double);
margin: 0 auto;
background-color: var(--calcite-ui-background);
}
/* Theme Switcher */
#theme-label {
position: fixed;
top: 20px;
right: 20px;
z-index: 2;
background-color: var(--calcite-ui-background);
border: 1px solid;
border-color: var(--calcite-ui-border-1);
border-radius: var(--calcite-border-radius);
margin: 0;
padding: 10px;
}
#theme-label label {
margin: 0;
}
</style>
</head>
<body>
<main>
<!-- calcite-switch -->
<div id="theme-label">
<calcite-label layout="inline">
Toggle theme
<calcite-switch id="theme-switch"></calcite-switch>
</calcite-label>
</div>
<h1><code>notice</code></h1>
<h2>Test 1. Color Contrast on Notice</h2>
<calcite-notice active>
<div slot="title">Blue Notice</div>
<div slot="message">Notice message</div>
<calcite-link slot="link" title="notice link">Blue notice link</calcite-link>
</calcite-notice>
<calcite-notice active color="green">
<div slot="title">Green notice</div>
<div slot="message">Notice message</div>
<calcite-link slot="link" title="notice link">Green notice link</calcite-link>
</calcite-notice>
<calcite-notice active color="yellow">
<div slot="title">Yellow Notice</div>
<div slot="message">Notice message</div>
<calcite-link slot="link" title="notice link">Yellow notice link</calcite-link>
</calcite-notice>
<calcite-notice active color="red">
<div slot="title">Red Notice</div>
<div slot="message">Notice message</div>
<calcite-link slot="link" title="notice link">Red notice link</calcite-link>
</calcite-notice>
<h2>Test 2. Notice scale</h2>
<p>Does the scale of each notice meet sizing?</p>
<calcite-notice active scale="s">
<div slot="title">Small scale notice</div>
<div slot="message">Notice message</div>
<calcite-link slot="link" title="notice link">Small scale notice link</calcite-link>
</calcite-notice>
<calcite-notice active scale="m">
<div slot="title">Medium scale notice</div>
<div slot="message">Notice message</div>
<calcite-link slot="link" title="notice link">Medium scale notice link</calcite-link>
</calcite-notice>
<calcite-notice active scale="l">
<div slot="title">Large scale notice</div>
<div slot="message">Notice message</div>
<calcite-link slot="link" title="notice link">Large scale notice link</calcite-link>
</calcite-notice>
<h2>Test 3. Dismissible Notice</h2>
<calcite-notice active dismissible>
<div slot="title">Dismissible Notice</div>
<div slot="message">Notice message</div>
<calcite-link slot="link" title="notice link">Dismissible notice link</calcite-link>
</calcite-notice>
<h2>Test 4. Notice with Icon</h2>
<calcite-notice active icon>
<div slot="title">Notice with Icon</div>
<div slot="message">Notice message</div>
<calcite-link slot="link" title="notice link">Notice with icon link</calcite-link>
</calcite-notice>
<h2>Test 5. Notice with tabindex</h2>
<calcite-notice active>
<div slot="title" tabindex="0">Notice with tabindex</div>
<div slot="message" tabindex="0">Notice message</div>
<calcite-link slot="link" title="notice link">Blue notice link</calcite-link>
</calcite-notice>
</main>
</body>
<script>
window.onload = () => {
// Theme Switcher
const themeSwitch = document.getElementById("theme-switch");
themeSwitch.addEventListener("calciteSwitchChange", () => {
document.body.classList.toggle("calcite-theme-dark");
});
};
</script>
</html>