diff --git a/css/mistica-common.css b/css/mistica-common.css index fb8d003cbd..e15cde9964 100644 --- a/css/mistica-common.css +++ b/css/mistica-common.css @@ -1362,6 +1362,140 @@ button.mistica-display-card:has(.mistica-card__media):active:after { opacity: initial; /* avoid applying 0.5 opacity twice */ } +/* FeedbackScreen */ + +@keyframes mistica-animation-shake { + 10%, + 90% { + transform: translateX(3px); + } + 20%, + 80% { + transform: translateX(6px); + } + 30%, + 50%, + 70% { + transform: translateX(0); + } + 40%, + 60% { + transform: translateX(8px); + } +} + +@keyframes mistica-animation-text-appear { + 0% { + opacity: 0; + transform: translateY(var(--text-appear-distance)); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.mistica-feedback-screen { + --text-animation: mistica-animation-text-appear 1s both cubic-bezier(0.215, 0.61, 0.355, 1); + --text-appear-distance: 16px; + padding: 64px 0 16px; +} + +@media (min-width: 1024px) { + .mistica-feedback-screen { + --text-appear-distance: 40px; + margin-top: 64px; + border-radius: var(--mistica-border-radius-legacyDisplay); + border: var(--mistica-boxed-border); + background: var(--mistica-color-backgroundContainer); + padding: 64px; + } + + .mistica-feedback-screen > .mistica-fixed-footer-buttons { + margin-top: 40px; + } +} + +@media (max-width: 1023px) { + .mistica-feedback-screen { + /* Space for fixed buttons */ + padding-bottom: 142px; + } +} + +.mistica-feedback-screen__asset { + --asset-animation: mistica-animation-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + width: 48px; + height: 48px; + margin-bottom: 24px; +} + +.mistica-feedback-screen__asset-error-inside { + animation: var(--asset-animation); + animation-delay: 0.8s; +} + +.mistica-feedback-screen__asset-error-outside { + animation: var(--asset-animation); + animation-delay: 0.84s; +} + +.mistica-feedback-screen__title { + font-size: var(--mistica-font-size-6); + line-height: var(--mistica-line-height-6); + font-weight: var(--mistica-font-weight-6); + color: var(--mistica-color-textPrimary); + animation: var(--text-animation); + animation-delay: 0.6s; +} + +.mistica-feedback-screen__description { + margin-top: 16px; + font-size: var(--mistica-font-size-3); + line-height: var(--mistica-line-height-3); + font-weight: 400; + color: var(--mistica-color-textSecondary); + animation: var(--text-animation); + animation-delay: 0.8s; +} + +.mistica-feedback-screen__slot { + margin-top: 16px; + animation: var(--text-animation); + color: var(--mistica-color-textSecondary); + animation-delay: 1s; +} + +.mistica-fixed-footer-buttons { + display: flex; + gap: 16px; +} + +@media (max-width: 1023px) { + .mistica-fixed-footer, + .mistica-fixed-footer-buttons { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: var(--mistica-color-background); + box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.1); + } + + .mistica-fixed-footer-buttons { + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; + } +} + +@media (min-width: 768px) and (max-width: 1023px) { + .mistica-fixed-footer-buttons { + padding: 32px 24px; + } +} + /* TextField */ .mistica-text-field { --border-width: 1px; diff --git a/examples/css/error-feedback.html b/examples/css/error-feedback.html new file mode 100644 index 0000000000..566b808abb --- /dev/null +++ b/examples/css/error-feedback.html @@ -0,0 +1,114 @@ + + + + + + + Mistica CSS Example + + + +
+
+ + + + + + + + + + + + + + + + + +

Title

+

Description

+

Error reference: #95001

+
+ Action + Link + +
+
+
+ + diff --git a/examples/css/index.html b/examples/css/index.html index be0b42a38a..de6b8a903e 100644 --- a/examples/css/index.html +++ b/examples/css/index.html @@ -88,6 +88,12 @@

Tag

Warning
Error
+

FeedbackScreen

+
+ See ErrorFeedbackScreen +

TextFields

TextField

diff --git a/examples/css/package.json b/examples/css/package.json index edaf7891a7..57b05956c2 100644 --- a/examples/css/package.json +++ b/examples/css/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "dev": "vite", - "build": "vite build --base=\"/mistica-css/\"", + "build": "vite build", "preview": "vite preview" }, "devDependencies": { diff --git a/examples/css/vite.config.js b/examples/css/vite.config.js new file mode 100644 index 0000000000..018f0cc18d --- /dev/null +++ b/examples/css/vite.config.js @@ -0,0 +1,17 @@ +import {dirname, resolve} from 'node:path'; +import {fileURLToPath} from 'node:url'; +import {defineConfig} from 'vite'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +export default defineConfig({ + base: '/mistica-css/', + build: { + rollupOptions: { + input: { + main: resolve(__dirname, 'index.html'), + 'error-feedback': resolve(__dirname, 'error-feedback.html'), + }, + }, + }, +});