@energycap/components 0.43.8 → 0.43.9-ECAP-30432-Splash-Updates.20250717-0724
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/energycap-components.min.css +1 -1
- package/esm2022/lib/display/splash/splash.component.mjs +3 -3
- package/fesm2022/energycap-components.mjs +2 -2
- package/fesm2022/energycap-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/images/favicon-whitelabel.svg +4 -0
- package/src/assets/images/splash-electric.svg +3 -0
- package/src/assets/images/splash-interval.svg +3 -0
- package/src/assets/images/splash-seedling.svg +11 -0
- package/src/assets/images/splash-water.svg +3 -0
- package/src/styles/components/_splash.scss +117 -3
package/package.json
CHANGED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32">
|
|
2
|
+
<rect width="32" height="32" fill="#162F3B" rx="5"/>
|
|
3
|
+
<path fill="#fff" d="M22.534 4.99a1.666 1.666 0 0 0-2.63-1.912L6.57 14.745a1.668 1.668 0 0 0-.464 1.838 1.68 1.68 0 0 0 1.563 1.084h5.807L9.471 27.01a1.666 1.666 0 0 0 2.63 1.912l13.334-11.668a1.667 1.667 0 0 0 .464-1.838 1.67 1.67 0 0 0-1.563-1.079H18.53l4.005-9.349Z"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M11.92 1.39376C12.1044 0.965633 11.9669 0.465633 11.5888 0.190633C11.2107 -0.0843669 10.695 -0.0593669 10.3419 0.246883L2.34192 7.24688C2.02942 7.52188 1.91692 7.96251 2.0638 8.35001C2.21067 8.73751 2.58567 9.00001 3.0013 9.00001H6.48567L4.08255 14.6063C3.89817 15.0344 4.03567 15.5344 4.4138 15.8094C4.79192 16.0844 5.30755 16.0594 5.66067 15.7531L13.6607 8.75313C13.9732 8.47813 14.0857 8.03751 13.9388 7.65001C13.7919 7.26251 13.42 7.00313 13.0013 7.00313H9.51692L11.92 1.39376Z" fill="#162F3B"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M7.9775 1.99993C8.3475 1.98993 8.675 2.23243 8.7725 2.58993L10.6225 9.36993L11.065 8.48493C11.335 7.94243 11.89 7.59993 12.495 7.59993H15.2C15.6425 7.59993 16 7.95743 16 8.39993C16 8.84243 15.6425 9.19993 15.2 9.19993H12.495L11.115 11.9574C10.9675 12.2549 10.65 12.4274 10.32 12.3949C9.99 12.3624 9.715 12.1299 9.6275 11.8099L8.0925 6.18243L6.3825 14.1674C6.305 14.5274 5.995 14.7874 5.6275 14.7999C5.26 14.8124 4.9325 14.5724 4.8325 14.2199L3.3975 9.19993H0.8C0.3575 9.19993 0 8.84243 0 8.39993C0 7.95743 0.3575 7.59993 0.8 7.59993H3.3975C4.1125 7.59993 4.74 8.07243 4.935 8.75993L5.49 10.6999L7.2175 2.63243C7.295 2.27243 7.61 2.00993 7.9775 1.99993Z" fill="#383840"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_14682_45032)">
|
|
3
|
+
<path d="M1 2C0.446875 2 0 2.44687 0 3C0 6.86562 3.13438 10 7 10V15C7 15.5531 7.44687 16 8 16C8.55313 16 9 15.5531 9 15V10V9C9 5.13438 5.86562 2 2 2H1Z" fill="#354751"/>
|
|
4
|
+
<path d="M15.0001 0C15.5532 0 16.0001 0.446875 16.0001 1C16.0001 4.86562 12.8657 8 9.0001 8H8.92822C8.74385 6.71563 8.2126 5.54063 7.42822 4.58125C8.4126 1.90625 10.9845 0 14.0001 0H15.0001Z" fill="#162F3B"/>
|
|
5
|
+
</g>
|
|
6
|
+
<defs>
|
|
7
|
+
<clipPath id="clip0_14682_45032">
|
|
8
|
+
<rect width="16" height="16" fill="white"/>
|
|
9
|
+
</clipPath>
|
|
10
|
+
</defs>
|
|
11
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M8 16C4.6875 16 2 13.3125 2 10C2 7.15 6.06875 1.80312 7.20625 0.365625C7.39375 0.13125 7.67188 0 7.97188 0H8.02812C8.32812 0 8.60625 0.13125 8.79375 0.365625C9.93125 1.80312 14 7.15 14 10C14 13.3125 11.3125 16 8 16ZM5 10.5C5 10.225 4.775 10 4.5 10C4.225 10 4 10.225 4 10.5C4 12.4344 5.56562 14 7.5 14C7.775 14 8 13.775 8 13.5C8 13.225 7.775 13 7.5 13C6.11875 13 5 11.8813 5 10.5Z" fill="#162F3B"/>
|
|
3
|
+
</svg>
|
|
@@ -45,9 +45,123 @@
|
|
|
45
45
|
animation-duration: 6s;
|
|
46
46
|
animation-iteration-count: infinite;
|
|
47
47
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
@keyframes splash {
|
|
49
|
+
0% {
|
|
50
|
+
background-position: left bottom;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
20% {
|
|
54
|
+
background-position: left top;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
40% {
|
|
58
|
+
background-position: right top;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
60% {
|
|
62
|
+
background-position: right bottom;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
100% {
|
|
66
|
+
background-position: left bottom;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.splash-loader {
|
|
71
|
+
width: 96px;
|
|
72
|
+
height: 96px;
|
|
73
|
+
border: 10px solid #FFF;
|
|
74
|
+
border-radius: 50%;
|
|
75
|
+
box-sizing: border-box;
|
|
76
|
+
position: relative;
|
|
77
|
+
animation: splash-pulse 1s linear infinite, splash-fade 1s ease-in-out infinite;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.splash-icon-wrapper {
|
|
81
|
+
position: absolute;
|
|
82
|
+
top: 0;
|
|
83
|
+
left: 0;
|
|
84
|
+
width: 100%;
|
|
85
|
+
height: 100%;
|
|
86
|
+
z-index: 2;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.splash-icon-wrapper img {
|
|
90
|
+
position: absolute;
|
|
91
|
+
filter: brightness(0) invert(1);
|
|
92
|
+
top: 50%;
|
|
93
|
+
left: 50%;
|
|
94
|
+
transform: translate(-50%, -50%);
|
|
95
|
+
opacity: 0;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Electricity, Water, Interval icons */
|
|
99
|
+
.splash-icon-wrapper img:nth-child(1),
|
|
100
|
+
.splash-icon-wrapper img:nth-child(2),
|
|
101
|
+
.splash-icon-wrapper img:nth-child(3) {
|
|
102
|
+
width: 56px;
|
|
103
|
+
height: 56px;
|
|
104
|
+
animation: splash-showIcon 4s linear infinite;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.splash-icon-wrapper img:nth-child(1) {
|
|
108
|
+
animation-delay: 0s;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.splash-icon-wrapper img:nth-child(2) {
|
|
112
|
+
animation-delay: 1s;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.splash-icon-wrapper img:nth-child(3) {
|
|
116
|
+
animation-delay: 2s;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Seedling icon at 45×45px */
|
|
120
|
+
.splash-icon-wrapper img:nth-child(4) {
|
|
121
|
+
width: 45px;
|
|
122
|
+
height: 45px;
|
|
123
|
+
animation: splash-showIcon 4s linear infinite;
|
|
124
|
+
animation-delay: 3s;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@keyframes splash-showIcon {
|
|
128
|
+
0% {
|
|
129
|
+
opacity: 1;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
24.9% {
|
|
133
|
+
opacity: 1;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
25% {
|
|
137
|
+
opacity: 0;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
100% {
|
|
141
|
+
opacity: 0;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
@keyframes splash-pulse {
|
|
146
|
+
0%,
|
|
147
|
+
100% {
|
|
148
|
+
transform: scale(1);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
50% {
|
|
152
|
+
transform: scale(1.2);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@keyframes splash-fade {
|
|
157
|
+
0%,
|
|
158
|
+
100% {
|
|
159
|
+
opacity: 1;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
50% {
|
|
163
|
+
opacity: 0.6;
|
|
164
|
+
}
|
|
51
165
|
}
|
|
52
166
|
|
|
53
167
|
&.app-loaded {
|