@digital-ai/dot-illustrations 2.0.20 → 2.0.22
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.
- package/demo/demo.css +37 -104
- package/demo/index.html +51 -13
- package/demo/script.js +286 -134
- package/illustrations/dark/global/forbiden-access.svg +24 -0
- package/illustrations/light/global/forbiden-access.svg +24 -0
- package/index.css +136 -128
- package/package.json +1 -1
package/demo/demo.css
CHANGED
|
@@ -7,68 +7,6 @@ body {
|
|
|
7
7
|
margin: 0 auto;
|
|
8
8
|
height: 100%;
|
|
9
9
|
text-align: center;
|
|
10
|
-
overflow-y: hidden;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.search-wrapper {
|
|
14
|
-
border-radius: 4px;
|
|
15
|
-
border: #878f9a 1px solid;
|
|
16
|
-
top: 0;
|
|
17
|
-
background-color: #fff;
|
|
18
|
-
z-index: 999;
|
|
19
|
-
display: flex;
|
|
20
|
-
width: 720px;
|
|
21
|
-
height: 48px;
|
|
22
|
-
flex-direction: column;
|
|
23
|
-
margin: 24px auto;
|
|
24
|
-
gap: 4px;
|
|
25
|
-
padding-left: 12px;
|
|
26
|
-
padding-right: 12px;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
input {
|
|
30
|
-
font-size: 16px;
|
|
31
|
-
font-weight: 500;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.demo-wrapper {
|
|
35
|
-
display: flex;
|
|
36
|
-
flex-wrap: wrap;
|
|
37
|
-
font-size: 2.5rem;
|
|
38
|
-
justify-content: center;
|
|
39
|
-
width: 100vw;
|
|
40
|
-
height: calc(100vh - 200px);
|
|
41
|
-
overflow-y: auto;
|
|
42
|
-
padding-bottom: 200px;
|
|
43
|
-
align-content: flex-start;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.demo-wrapper > div {
|
|
47
|
-
z-index: 1;
|
|
48
|
-
display: grid;
|
|
49
|
-
grid-template-rows: 1fr 1fr;
|
|
50
|
-
width: 220px;
|
|
51
|
-
height: 240px;
|
|
52
|
-
min-width: 220px;
|
|
53
|
-
max-width: 460px;
|
|
54
|
-
max-height: 520px;
|
|
55
|
-
min-height: 220px;
|
|
56
|
-
overflow: hidden;
|
|
57
|
-
background: #fff;
|
|
58
|
-
margin: 16px;
|
|
59
|
-
padding: 24px;
|
|
60
|
-
border: solid 1px #e1e5eb;
|
|
61
|
-
border-radius: 4px;
|
|
62
|
-
transition: opacity 0.3s ease;
|
|
63
|
-
/* DropShadow/dropshadow-normal */
|
|
64
|
-
box-shadow: 0px 8px 16px 0px rgba(59, 72, 92, 0.16);
|
|
65
|
-
position: relative;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.demo-wrapper > div:hover {
|
|
69
|
-
opacity: 0.7;
|
|
70
|
-
background: var(--Overlay-colors-default-overlay, #3B485C);
|
|
71
|
-
z-index: 2;
|
|
72
10
|
}
|
|
73
11
|
|
|
74
12
|
img {
|
|
@@ -94,41 +32,9 @@ span {
|
|
|
94
32
|
z-index: 0;
|
|
95
33
|
}
|
|
96
34
|
|
|
97
|
-
|
|
98
35
|
.copy-container{}
|
|
99
36
|
|
|
100
|
-
/*
|
|
101
|
-
.demo-wrapper .button-group {
|
|
102
|
-
display: flex;
|
|
103
|
-
flex-direction: column; /* Stack buttons vertically */
|
|
104
|
-
align-items: center; /* Center buttons horizontally */
|
|
105
|
-
gap: 8px; /* Add spacing between the buttons */
|
|
106
|
-
margin-top: -102px;
|
|
107
|
-
margin-bottom: 24px;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.button {
|
|
111
|
-
position: relative; /* Make tooltip positioning relative to button */
|
|
112
|
-
opacity: 0;
|
|
113
|
-
transition: opacity 0.3s ease;
|
|
114
|
-
border: solid 1px #667385;
|
|
115
|
-
border-radius: 4px;
|
|
116
|
-
background: #FFF;
|
|
117
|
-
color: rgb(43, 50, 55);
|
|
118
|
-
cursor: pointer;
|
|
119
|
-
font-size: 16px;
|
|
120
|
-
padding: 8px 16px;
|
|
121
|
-
z-index: 29;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.demo-wrapper div:hover .button {
|
|
125
|
-
opacity: 1;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.demo-wrapper div:hover img {
|
|
129
|
-
opacity: 0.5;
|
|
130
|
-
}
|
|
131
|
-
|
|
37
|
+
/* Tooltip for copy buttons */
|
|
132
38
|
.tooltiptext {
|
|
133
39
|
visibility: hidden;
|
|
134
40
|
background-color: black;
|
|
@@ -138,12 +44,12 @@ span {
|
|
|
138
44
|
padding: 5px;
|
|
139
45
|
position: absolute;
|
|
140
46
|
z-index: 1;
|
|
141
|
-
bottom: 125%;
|
|
47
|
+
bottom: 125%;
|
|
142
48
|
left: 50%;
|
|
143
49
|
transform: translateX(-50%);
|
|
144
50
|
opacity: 0;
|
|
145
51
|
transition: opacity 0.3s;
|
|
146
|
-
white-space: nowrap;
|
|
52
|
+
white-space: nowrap;
|
|
147
53
|
}
|
|
148
54
|
|
|
149
55
|
.button:hover .tooltiptext {
|
|
@@ -151,27 +57,26 @@ span {
|
|
|
151
57
|
opacity: 1;
|
|
152
58
|
}
|
|
153
59
|
|
|
154
|
-
|
|
155
60
|
.codeBlock {
|
|
156
61
|
visibility: hidden;
|
|
157
|
-
white-space: pre-wrap;
|
|
62
|
+
white-space: pre-wrap;
|
|
158
63
|
background-color: #f4f4f4;
|
|
159
64
|
padding: 10px;
|
|
160
65
|
border: 1px solid #ddd;
|
|
161
66
|
border-radius: 5px;
|
|
162
|
-
max-width: 300px;
|
|
163
|
-
overflow: auto;
|
|
67
|
+
max-width: 300px;
|
|
68
|
+
overflow: auto;
|
|
164
69
|
}
|
|
165
70
|
|
|
166
71
|
.codeInclude {
|
|
167
72
|
color: rgb(43, 50, 55);
|
|
168
|
-
white-space: pre-wrap;
|
|
73
|
+
white-space: pre-wrap;
|
|
169
74
|
background-color: #f4f4f4;
|
|
170
75
|
padding: 10px;
|
|
171
76
|
border: 1px solid #ddd;
|
|
172
77
|
border-radius: 5px;
|
|
173
|
-
max-width: 300px;
|
|
174
|
-
overflow: auto;
|
|
78
|
+
max-width: 300px;
|
|
79
|
+
overflow: auto;
|
|
175
80
|
}
|
|
176
81
|
|
|
177
82
|
/* When dark mode is active */
|
|
@@ -183,5 +88,33 @@ body.dark-mode .dot-illustration img.dark {
|
|
|
183
88
|
display: block;
|
|
184
89
|
background-color: #232E40;
|
|
185
90
|
border-radius: 8px;
|
|
91
|
+
}
|
|
186
92
|
|
|
93
|
+
#floating-bar {
|
|
94
|
+
pointer-events: none;
|
|
95
|
+
opacity: 0;
|
|
96
|
+
transform: translateY(-100%);
|
|
97
|
+
}
|
|
98
|
+
#floating-bar.floating-bar-visible {
|
|
99
|
+
pointer-events: auto;
|
|
100
|
+
opacity: 1;
|
|
101
|
+
transform: translateY(0);
|
|
102
|
+
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s cubic-bezier(0.4,0,0.2,1);
|
|
103
|
+
}
|
|
104
|
+
.floating-search {
|
|
105
|
+
min-width: 0;
|
|
106
|
+
width: 120px;
|
|
107
|
+
max-width: 200px;
|
|
108
|
+
}
|
|
109
|
+
@media (min-width: 640px) {
|
|
110
|
+
.floating-search {
|
|
111
|
+
width: 200px;
|
|
112
|
+
max-width: 320px;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
.floating-tab {
|
|
116
|
+
min-width: 60px;
|
|
117
|
+
padding-left: 0.75rem;
|
|
118
|
+
padding-right: 0.75rem;
|
|
119
|
+
font-size: 0.85rem;
|
|
187
120
|
}
|
package/demo/index.html
CHANGED
|
@@ -3,23 +3,61 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<title>Dot Illustrations Library</title>
|
|
6
|
+
<!-- Tailwind CSS CDN -->
|
|
7
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
8
|
+
<!-- Heroicons CDN for Tailwind icons -->
|
|
9
|
+
<script src="https://unpkg.com/@heroicons/vue@2.0.18/dist/heroicons.min.js"></script>
|
|
6
10
|
<link rel="stylesheet" href="../index.css" />
|
|
7
11
|
<link rel="stylesheet" href="./demo.css" />
|
|
8
12
|
<script src="script.js" defer></script>
|
|
13
|
+
<script>
|
|
14
|
+
// Tailwind dark mode config
|
|
15
|
+
tailwind.config = { darkMode: 'class' };
|
|
16
|
+
</script>
|
|
9
17
|
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<button id="theme-toggle">Switch to dark mode</button>
|
|
21
|
-
<div id="illustration-list" class="demo-wrapper dot-illustration">
|
|
22
|
-
|
|
18
|
+
<body class="bg-gray-50 dark:bg-gray-900 min-h-screen transition-colors duration-300">
|
|
19
|
+
<div id="floating-bar" class="fixed top-0 left-0 w-full z-50 flex items-center justify-center bg-white/90 dark:bg-gray-900/90 shadow-md px-2 py-1 transition-transform duration-300 -translate-y-full" style="backdrop-filter: blur(6px);">
|
|
20
|
+
<div class="flex flex-row items-center gap-2 w-full max-w-5xl">
|
|
21
|
+
<input class="floating-search flex-1 px-2 py-1 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm" type="text" id="floatingInput" autocomplete="off" placeholder="Search...">
|
|
22
|
+
<nav class="inline-flex rounded shadow overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="tablist">
|
|
23
|
+
<button class="floating-tab tab-btn px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900" id="floating-tab-all" data-tab="all" aria-selected="true" role="tab">All</button>
|
|
24
|
+
<button class="floating-tab tab-btn px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-global" data-tab="global" aria-selected="false" role="tab">Global</button>
|
|
25
|
+
<button class="floating-tab tab-btn px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-dashboards" data-tab="dashboards" aria-selected="false" role="tab">Dashboards</button>
|
|
26
|
+
<button class="floating-tab tab-btn px-3 py-1 text-xs font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="floating-tab-favourites" data-tab="favourites" aria-selected="false" role="tab">Favourites</button>
|
|
27
|
+
</nav>
|
|
23
28
|
</div>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="container mx-auto px-4 py-8">
|
|
31
|
+
<div class="flex flex-col md:flex-row items-center justify-between mb-6 gap-4">
|
|
32
|
+
<h1 class="text-3xl md:text-5xl font-bold text-center md:text-left text-gray-900 dark:text-white">Dot Illustrations</h1>
|
|
33
|
+
<button id="theme-toggle" aria-label="Toggle dark mode" class="flex items-center gap-2 px-4 py-2 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-full shadow hover:bg-gray-300 dark:hover:bg-gray-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
34
|
+
<span id="theme-icon" class="transition-transform duration-300">
|
|
35
|
+
<!-- Sun/Moon icon will be injected by JS -->
|
|
36
|
+
</span>
|
|
37
|
+
<span class="hidden sm:inline">Switch theme</span>
|
|
38
|
+
</button>
|
|
39
|
+
</div>
|
|
40
|
+
<p class="text-center text-gray-700 dark:text-gray-300 mb-2">
|
|
41
|
+
For more details please see
|
|
42
|
+
<a href="https://github.com/digital-ai/dot-illustrations" target="_blank" class="text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-200 transition">https://github.com/digital-ai/dot-illustrations</a>
|
|
43
|
+
</p>
|
|
44
|
+
<p class="text-center text-gray-600 dark:text-gray-400 mb-6">For using illustrations as HTML include <code class="bg-gray-200 dark:bg-gray-800 px-2 py-1 rounded text-sm font-mono">link rel="stylesheet" href="./index.css"</code></p>
|
|
45
|
+
<div class="flex flex-col md:flex-row items-center justify-center gap-4 mb-8 relative">
|
|
46
|
+
<input class="search-wrapper w-full md:w-1/2 px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-white transition" type="text" id="myInput" autocomplete="off" placeholder="Search for illustrations...">
|
|
47
|
+
<div id="search-suggestions" class="absolute top-full left-1/2 -translate-x-1/2 w-full md:w-1/2 z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-b-lg shadow-lg hidden max-h-72 overflow-y-auto"></div>
|
|
48
|
+
</div>
|
|
49
|
+
<!-- Tabs -->
|
|
50
|
+
<div class="mb-8 flex justify-center">
|
|
51
|
+
<nav class="inline-flex rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="tablist">
|
|
52
|
+
<button class="tab-btn px-6 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900" id="tab-all" data-tab="all" aria-selected="true" role="tab">All Illustrations</button>
|
|
53
|
+
<button class="tab-btn px-6 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-global" data-tab="global" aria-selected="false" role="tab">Global</button>
|
|
54
|
+
<button class="tab-btn px-6 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-dashboards" data-tab="dashboards" aria-selected="false" role="tab">Dashboards</button>
|
|
55
|
+
<button class="tab-btn px-6 py-2 text-sm font-medium focus:outline-none transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" id="tab-favourites" data-tab="favourites" aria-selected="false" role="tab">Favourites</button>
|
|
56
|
+
</nav>
|
|
57
|
+
</div>
|
|
58
|
+
<div id="illustration-list" class="demo-wrapper dot-illustration grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-6 max-h-[calc(100vh-300px)] overflow-y-auto px-2">
|
|
59
|
+
<!-- Illustrations will be injected here -->
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
24
62
|
</body>
|
|
25
63
|
</html>
|