@vueless/storybook 0.0.43 → 0.0.44
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/.storybook/index.css +2 -0
- package/.storybook/manager-head.html +69 -8
- package/package.json +1 -1
package/.storybook/index.css
CHANGED
|
@@ -14,6 +14,7 @@ body {
|
|
|
14
14
|
.light .sbdocs .sbdocs-content > h1,
|
|
15
15
|
.light .sbdocs .sbdocs-content > h2,
|
|
16
16
|
.light .sbdocs .sbdocs-content > h3,
|
|
17
|
+
.light .sbdocs .sbdocs-content > .sb-anchor > h3,
|
|
17
18
|
.light .sbdocs .sbdocs-content > p,
|
|
18
19
|
.light .sbdocs .sbdocs-content > table th,
|
|
19
20
|
.light .sbdocs .sbdocs-content > table td {
|
|
@@ -23,6 +24,7 @@ body {
|
|
|
23
24
|
.dark .sbdocs .sbdocs-content > h1,
|
|
24
25
|
.dark .sbdocs .sbdocs-content > h2,
|
|
25
26
|
.dark .sbdocs .sbdocs-content > h3,
|
|
27
|
+
.dark .sbdocs .sbdocs-content > .sb-anchor > h3,
|
|
26
28
|
.dark .sbdocs .sbdocs-content > p,
|
|
27
29
|
.dark .sbdocs .sbdocs-content > table th,
|
|
28
30
|
.dark .sbdocs .sbdocs-content > table td {
|
|
@@ -5,13 +5,78 @@ Overrides content of storybook layout HTML page <head> tag,
|
|
|
5
5
|
<link rel="shortcut icon" href="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/favicons/favicon.ico">
|
|
6
6
|
<link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/favicons/favicon.svg" />
|
|
7
7
|
|
|
8
|
+
<!--
|
|
9
|
+
Custom dark mode related vueless loader.
|
|
10
|
+
-->
|
|
11
|
+
<div id="sb-vueless-loader">
|
|
12
|
+
<img
|
|
13
|
+
class="sb-vueless-loader-img-dark"
|
|
14
|
+
src="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-dark.svg"
|
|
15
|
+
alt="Vueless UI"
|
|
16
|
+
width="250" />
|
|
17
|
+
|
|
18
|
+
<img
|
|
19
|
+
class="sb-vueless-loader-img-light"
|
|
20
|
+
src="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-light.svg"
|
|
21
|
+
alt="Vueless UI"
|
|
22
|
+
width="250" />
|
|
23
|
+
</div>
|
|
24
|
+
|
|
8
25
|
<style>
|
|
9
26
|
/* -------------------- Prevent showing users default storybook theme styles -------------------- */
|
|
10
27
|
|
|
11
|
-
body {
|
|
28
|
+
body.dark {
|
|
29
|
+
background: #111827;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
#root {
|
|
12
33
|
visibility: hidden;
|
|
13
34
|
}
|
|
14
35
|
|
|
36
|
+
#sb-vueless-loader {
|
|
37
|
+
top: 0;
|
|
38
|
+
left: 0;
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
justify-content: center;
|
|
42
|
+
position: fixed;
|
|
43
|
+
background: inherit;
|
|
44
|
+
width: 100%;
|
|
45
|
+
height: 100%;
|
|
46
|
+
z-index: 999;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.light #sb-vueless-loader {
|
|
50
|
+
background: #f1f5f9;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.dark #sb-vueless-loader {
|
|
54
|
+
background: #111827;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.sb-vueless-loader-img-dark,
|
|
58
|
+
.sb-vueless-loader-img-light {
|
|
59
|
+
display: none;
|
|
60
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.light .sb-vueless-loader-img-light {
|
|
64
|
+
display: block;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.dark .sb-vueless-loader-img-dark {
|
|
68
|
+
display: block;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@keyframes pulse {
|
|
72
|
+
0%, 100% {
|
|
73
|
+
opacity: 1;
|
|
74
|
+
}
|
|
75
|
+
50% {
|
|
76
|
+
opacity: .5;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
15
80
|
/* -------------------- Storybook config tooltip -------------------- */
|
|
16
81
|
|
|
17
82
|
div[data-testid="tooltip"] {
|
|
@@ -73,15 +138,11 @@ Overrides content of storybook layout HTML page <head> tag,
|
|
|
73
138
|
<script>
|
|
74
139
|
/* This trick prevents showing users default storybook theme */
|
|
75
140
|
(() => {
|
|
76
|
-
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
77
|
-
const theme = prefersDarkScheme ? 'dark' : 'light';
|
|
78
|
-
|
|
79
|
-
document.documentElement.classList.add(theme);
|
|
80
|
-
|
|
81
141
|
window.onload = function() {
|
|
82
142
|
setTimeout(() => {
|
|
83
|
-
document.
|
|
84
|
-
|
|
143
|
+
document.getElementById("root").style.visibility = 'visible';
|
|
144
|
+
document.getElementById("sb-vueless-loader").style.display = 'none';
|
|
145
|
+
}, 1000);
|
|
85
146
|
};
|
|
86
147
|
})();
|
|
87
148
|
</script>
|