Skip to content

Commit 99ea3cf

Browse files
atabelatabel
authored
feat(mistica-css): ErrorFeedbackScreen (#1371)
WEB-2189
1 parent 55781c4 commit 99ea3cf

5 files changed

Lines changed: 272 additions & 1 deletion

File tree

‎css/mistica-common.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1362,6 +1362,140 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
13621362
opacity: initial; /* avoid applying 0.5 opacity twice */
13631363
}
13641364

1365+
/* FeedbackScreen */
1366+
1367+
@keyframes mistica-animation-shake {
1368+
10%,
1369+
90% {
1370+
transform: translateX(3px);
1371+
}
1372+
20%,
1373+
80% {
1374+
transform: translateX(6px);
1375+
}
1376+
30%,
1377+
50%,
1378+
70% {
1379+
transform: translateX(0);
1380+
}
1381+
40%,
1382+
60% {
1383+
transform: translateX(8px);
1384+
}
1385+
}
1386+
1387+
@keyframes mistica-animation-text-appear {
1388+
0% {
1389+
opacity: 0;
1390+
transform: translateY(var(--text-appear-distance));
1391+
}
1392+
100% {
1393+
opacity: 1;
1394+
transform: translateY(0);
1395+
}
1396+
}
1397+
1398+
.mistica-feedback-screen {
1399+
--text-animation: mistica-animation-text-appear 1s both cubic-bezier(0.215, 0.61, 0.355, 1);
1400+
--text-appear-distance: 16px;
1401+
padding: 64px 0 16px;
1402+
}
1403+
1404+
@media (min-width: 1024px) {
1405+
.mistica-feedback-screen {
1406+
--text-appear-distance: 40px;
1407+
margin-top: 64px;
1408+
border-radius: var(--mistica-border-radius-legacyDisplay);
1409+
border: var(--mistica-boxed-border);
1410+
background: var(--mistica-color-backgroundContainer);
1411+
padding: 64px;
1412+
}
1413+
1414+
.mistica-feedback-screen > .mistica-fixed-footer-buttons {
1415+
margin-top: 40px;
1416+
}
1417+
}
1418+
1419+
@media (max-width: 1023px) {
1420+
.mistica-feedback-screen {
1421+
/* Space for fixed buttons */
1422+
padding-bottom: 142px;
1423+
}
1424+
}
1425+
1426+
.mistica-feedback-screen__asset {
1427+
--asset-animation: mistica-animation-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
1428+
width: 48px;
1429+
height: 48px;
1430+
margin-bottom: 24px;
1431+
}
1432+
1433+
.mistica-feedback-screen__asset-error-inside {
1434+
animation: var(--asset-animation);
1435+
animation-delay: 0.8s;
1436+
}
1437+
1438+
.mistica-feedback-screen__asset-error-outside {
1439+
animation: var(--asset-animation);
1440+
animation-delay: 0.84s;
1441+
}
1442+
1443+
.mistica-feedback-screen__title {
1444+
font-size: var(--mistica-font-size-6);
1445+
line-height: var(--mistica-line-height-6);
1446+
font-weight: var(--mistica-font-weight-6);
1447+
color: var(--mistica-color-textPrimary);
1448+
animation: var(--text-animation);
1449+
animation-delay: 0.6s;
1450+
}
1451+
1452+
.mistica-feedback-screen__description {
1453+
margin-top: 16px;
1454+
font-size: var(--mistica-font-size-3);
1455+
line-height: var(--mistica-line-height-3);
1456+
font-weight: 400;
1457+
color: var(--mistica-color-textSecondary);
1458+
animation: var(--text-animation);
1459+
animation-delay: 0.8s;
1460+
}
1461+
1462+
.mistica-feedback-screen__slot {
1463+
margin-top: 16px;
1464+
animation: var(--text-animation);
1465+
color: var(--mistica-color-textSecondary);
1466+
animation-delay: 1s;
1467+
}
1468+
1469+
.mistica-fixed-footer-buttons {
1470+
display: flex;
1471+
gap: 16px;
1472+
}
1473+
1474+
@media (max-width: 1023px) {
1475+
.mistica-fixed-footer,
1476+
.mistica-fixed-footer-buttons {
1477+
position: fixed;
1478+
bottom: 0;
1479+
left: 0;
1480+
right: 0;
1481+
background: var(--mistica-color-background);
1482+
box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.1);
1483+
}
1484+
1485+
.mistica-fixed-footer-buttons {
1486+
padding: 16px;
1487+
display: flex;
1488+
flex-direction: column;
1489+
gap: 16px;
1490+
}
1491+
}
1492+
1493+
@media (min-width: 768px) and (max-width: 1023px) {
1494+
.mistica-fixed-footer-buttons {
1495+
padding: 32px 24px;
1496+
}
1497+
}
1498+
13651499
/* TextField */
13661500
.mistica-text-field {
13671501
--border-width: 1px;

‎examples/css/error-feedback.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Mistica CSS Example</title>
8+
<link rel="stylesheet" href="/style.css" />
9+
</head>
10+
<body data-mistica-skin="movistar" data-mistica-color-scheme="auto">
11+
<div class="mistica-responsive-layout">
12+
<div class="mistica-feedback-screen">
13+
<svg
14+
role="presentation"
15+
class="mistica-feedback-screen__asset"
16+
viewBox="0 0 64 64"
17+
overflow="visible"
18+
>
19+
<g
20+
stroke="var(--mistica-color-error)"
21+
fill="none"
22+
stroke-width="2"
23+
stroke-linecap="round"
24+
stroke-linejoin="round"
25+
stroke-miterlimit="10"
26+
>
27+
<g class="mistica-feedback-screen__asset-error-outside">
28+
<path
29+
fill="none"
30+
stroke-width="2"
31+
stroke-miterlimit="10"
32+
d="M 31.9 0.9 C 52.5 0.9 62.9 11.4 62.9 31.9 C 62.9 52.5 52.5 62.9 31.9 62.9 C 11.3 62.9 0.9 52.5 0.9 31.9 C 0.9 11.3 11.3 0.9 31.9 0.9 Z"
33+
transform="rotate(90 32 32)"
34+
stroke-dasharray="202"
35+
stroke-dashoffset="202"
36+
>
37+
<animate
38+
attributeName="stroke-dashoffset"
39+
from="202"
40+
to="0"
41+
dur="0.7"
42+
repeatCount="1"
43+
begin="0.3s"
44+
fill="freeze"
45+
keyTimes="0;1"
46+
calcMode="spline"
47+
keySplines="0.65 0 0.25 1"
48+
></animate>
49+
</path>
50+
</g>
51+
<g class="mistica-feedback-screen__asset-error-inside">
52+
<line
53+
x1="31.9"
54+
y1="20.9"
55+
x2="31.9"
56+
y2="36.9"
57+
stroke-dasharray="17"
58+
stroke-dashoffset="17"
59+
>
60+
<animate
61+
attributeName="stroke-dashoffset"
62+
from="17"
63+
to="0"
64+
dur="0.7"
65+
repeatCount="1"
66+
begin="0.7s"
67+
fill="freeze"
68+
keyTimes="0;1"
69+
calcMode="spline"
70+
keySplines="0.65 0 0.25 1"
71+
></animate>
72+
</line>
73+
<circle
74+
stroke="var(--mistica-color-error)"
75+
fill="var(--mistica-color-error)"
76+
stroke-width="1"
77+
cx="31.9"
78+
cy="43.9"
79+
r="1.5"
80+
opacity="0"
81+
>
82+
<animate
83+
attributeName="opacity"
84+
from="0"
85+
to="1"
86+
dur="0.4"
87+
repeatCount="1"
88+
begin="1s"
89+
fill="freeze"
90+
keyTimes="0;1"
91+
calcMode="spline"
92+
keySplines="0.65 0 0.25 1"
93+
></animate>
94+
</circle>
95+
</g>
96+
</g>
97+
</svg>
98+
<h1 class="mistica-feedback-screen__title">Title</h1>
99+
<p class="mistica-feedback-screen__description">Description</p>
100+
<p class="mistica-feedback-screen__slot mistica-text-2">Error reference: #95001</p>
101+
<div class="mistica-fixed-footer-buttons">
102+
<a class="mistica-button-primary" href="#">Action</a>
103+
<a class="mistica-button-link" href="#"
104+
>Link<svg style="margin-left: 2px" width="0.5em" height="0.5em" viewBox="0 0 8 8">
105+
<path
106+
d="M6.32595 3.46071L3.03801 0.158595L3.03292 0.153747L3.032 0.152903L3.02931 0.150463L3.02848 0.149738L3.02248 0.144353C2.88533 0.021206 2.71386 -0.0126731 2.56343 0.00394249C2.41648 0.0201739 2.27272 0.0856702 2.16886 0.18711C2.06893 0.281844 2.01209 0.42816 2.00175 0.567065C1.99083 0.71377 2.02925 0.889583 2.16869 1.02392L5.24446 4.00145L2.15859 6.96199L2.15375 6.96708L2.1529 6.968L2.15046 6.97069L2.14974 6.97152L2.14435 6.97752C2.02121 7.11467 1.98733 7.28614 2.00394 7.43657C2.02017 7.58352 2.08567 7.72728 2.18711 7.83114C2.28184 7.93107 2.42816 7.98791 2.56706 7.99825C2.71377 8.00917 2.88958 7.97075 3.02392 7.83132L6.32595 4.5422V4.5422C6.6246 4.24355 6.6246 3.75935 6.32595 3.46071V3.46071Z"
107+
fill="currentColor"
108+
/></svg
109+
></a>
110+
</div>
111+
</div>
112+
</div>
113+
</body>
114+
</html>

‎examples/css/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,12 @@ <h3 class="mistica-text-title2">Tag</h3>
8888
<div class="mistica-tag-warning">Warning</div>
8989
<div class="mistica-tag-error">Error</div>
9090
</div>
91+
<h3 class="mistica-text-title2">FeedbackScreen</h3>
92+
<div>
93+
<a class="mistica-button-primary" href="/mistica-css/error-feedback.html"
94+
>See ErrorFeedbackScreen</a
95+
>
96+
</div>
9197

9298
<h3 class="mistica-text-title2">TextFields</h3>
9399
<h4 class="mistica-text-title1">TextField</h4>

‎examples/css/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"type": "module",
66
"scripts": {
77
"dev": "vite",
8-
"build": "vite build --base=\"/mistica-css/\"",
8+
"build": "vite build",
99
"preview": "vite preview"
1010
},
1111
"devDependencies": {

‎examples/css/vite.config.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {dirname, resolve} from 'node:path';
2+
import {fileURLToPath} from 'node:url';
3+
import {defineConfig} from 'vite';
4+
5+
const __dirname = dirname(fileURLToPath(import.meta.url));
6+
7+
export default defineConfig({
8+
base: '/mistica-css/',
9+
build: {
10+
rollupOptions: {
11+
input: {
12+
main: resolve(__dirname, 'index.html'),
13+
'error-feedback': resolve(__dirname, 'error-feedback.html'),
14+
},
15+
},
16+
},
17+
});

0 commit comments

Comments
 (0)