pome-ui 2.0.0-preview50 → 2.0.0-preview52
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/package.json +1 -1
- package/pome-skeleton.css +136 -0
- package/pome-ui.dev.js +468 -32
- package/pome-ui.dev.min.js +23 -23
- package/pome-ui.js +468 -32
- package/pome-ui.min.js +4 -4
package/package.json
CHANGED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
/* Pomelo Vue Skeleton Styles
|
|
2
|
+
* These styles control the skeleton loading placeholder appearance.
|
|
3
|
+
* You can override any of these rules in your own CSS to customize the skeleton effect.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* Skeleton container */
|
|
7
|
+
._pome-skeleton {
|
|
8
|
+
pointer-events: none !important;
|
|
9
|
+
user-select: none !important;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* Hide all text and visual decorations inside skeleton */
|
|
13
|
+
._pome-skeleton * {
|
|
14
|
+
color: transparent !important;
|
|
15
|
+
-webkit-text-fill-color: transparent !important;
|
|
16
|
+
border-color: transparent !important;
|
|
17
|
+
box-shadow: none !important;
|
|
18
|
+
text-shadow: none !important;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Hide media elements */
|
|
22
|
+
._pome-skeleton svg,
|
|
23
|
+
._pome-skeleton video,
|
|
24
|
+
._pome-skeleton canvas,
|
|
25
|
+
._pome-skeleton iframe {
|
|
26
|
+
visibility: hidden !important;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
._pome-skeleton img {
|
|
30
|
+
visibility: hidden !important;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Shimmer animation keyframes */
|
|
34
|
+
@keyframes _pome-sk-shimmer {
|
|
35
|
+
0% { background-position: 100% 50%; }
|
|
36
|
+
100% { background-position: 0 50%; }
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Shimmer class – applied to elements that should show the loading animation */
|
|
40
|
+
._pome-sk-shimmer {
|
|
41
|
+
background-image: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 37%, #e8e8e8 63%) !important;
|
|
42
|
+
background-size: 400% 100% !important;
|
|
43
|
+
animation: _pome-sk-shimmer 1.4s ease infinite !important;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Inline elements sizing */
|
|
47
|
+
._pome-skeleton span._pome-sk-shimmer,
|
|
48
|
+
._pome-skeleton a._pome-sk-shimmer,
|
|
49
|
+
._pome-skeleton label._pome-sk-shimmer {
|
|
50
|
+
display: inline-block !important;
|
|
51
|
+
min-width: 100px !important;
|
|
52
|
+
min-height: 1em !important;
|
|
53
|
+
border-radius: 4px !important;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Block elements sizing */
|
|
57
|
+
._pome-skeleton p._pome-sk-shimmer,
|
|
58
|
+
._pome-skeleton h1._pome-sk-shimmer,
|
|
59
|
+
._pome-skeleton h2._pome-sk-shimmer,
|
|
60
|
+
._pome-skeleton h3._pome-sk-shimmer,
|
|
61
|
+
._pome-skeleton h4._pome-sk-shimmer,
|
|
62
|
+
._pome-skeleton h5._pome-sk-shimmer,
|
|
63
|
+
._pome-skeleton h6._pome-sk-shimmer,
|
|
64
|
+
._pome-skeleton li._pome-sk-shimmer,
|
|
65
|
+
._pome-skeleton blockquote._pome-sk-shimmer,
|
|
66
|
+
._pome-skeleton figcaption._pome-sk-shimmer {
|
|
67
|
+
display: block !important;
|
|
68
|
+
min-height: 1em !important;
|
|
69
|
+
border-radius: 4px !important;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Table layout */
|
|
73
|
+
._pome-skeleton table {
|
|
74
|
+
table-layout: fixed !important;
|
|
75
|
+
width: 100% !important;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
._pome-skeleton td,
|
|
79
|
+
._pome-skeleton th {
|
|
80
|
+
color: transparent !important;
|
|
81
|
+
overflow: hidden !important;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
._pome-skeleton td ._pome-sk-block,
|
|
85
|
+
._pome-skeleton th ._pome-sk-block {
|
|
86
|
+
min-width: 0 !important;
|
|
87
|
+
width: 80% !important;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Button / input sizing */
|
|
91
|
+
._pome-skeleton button._pome-sk-shimmer,
|
|
92
|
+
._pome-skeleton input._pome-sk-shimmer,
|
|
93
|
+
._pome-skeleton textarea._pome-sk-shimmer,
|
|
94
|
+
._pome-skeleton select._pome-sk-shimmer {
|
|
95
|
+
display: inline-block !important;
|
|
96
|
+
min-width: 80px !important;
|
|
97
|
+
min-height: 1em !important;
|
|
98
|
+
border-radius: 4px !important;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Skeleton block – replaces text nodes */
|
|
102
|
+
._pome-sk-block {
|
|
103
|
+
display: inline-block;
|
|
104
|
+
min-width: 100px;
|
|
105
|
+
height: 1em;
|
|
106
|
+
border-radius: 4px;
|
|
107
|
+
vertical-align: middle;
|
|
108
|
+
background-image: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 37%, #e8e8e8 63%);
|
|
109
|
+
background-size: 400% 100%;
|
|
110
|
+
animation: _pome-sk-shimmer 1.4s ease infinite;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Skeleton image – replaces img elements */
|
|
114
|
+
._pome-sk-img {
|
|
115
|
+
display: inline-block;
|
|
116
|
+
border-radius: 4px;
|
|
117
|
+
vertical-align: middle;
|
|
118
|
+
background-image: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 37%, #e8e8e8 63%);
|
|
119
|
+
background-size: 400% 100%;
|
|
120
|
+
animation: _pome-sk-shimmer 1.4s ease infinite;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* Layout skeleton overlay – covers viewport while Layout created() resolves.
|
|
124
|
+
* The real layout content (including <render-body> container) stays in the DOM
|
|
125
|
+
* behind this overlay so that container.open() can mount the page immediately.
|
|
126
|
+
*/
|
|
127
|
+
._pome-layout-skeleton {
|
|
128
|
+
position: fixed;
|
|
129
|
+
top: 0;
|
|
130
|
+
left: 0;
|
|
131
|
+
right: 0;
|
|
132
|
+
bottom: 0;
|
|
133
|
+
z-index: 9999;
|
|
134
|
+
background: #fff;
|
|
135
|
+
overflow: hidden;
|
|
136
|
+
}
|