From db8cb32cad229bae94267e049910489b85f3c8a1 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 13 Feb 2024 09:53:11 +0300 Subject: [PATCH] Migrated confirm popup --- .../lib/theme/aura/confirmpopup/index.js | 129 ++++++++++++++++++ .../lib/theme/aura/confirmpopup/package.json | 6 + components/lib/theme/aura/index.js | 2 + 3 files changed, 137 insertions(+) create mode 100644 components/lib/theme/aura/confirmpopup/index.js create mode 100644 components/lib/theme/aura/confirmpopup/package.json diff --git a/components/lib/theme/aura/confirmpopup/index.js b/components/lib/theme/aura/confirmpopup/index.js new file mode 100644 index 000000000..7b599b1e6 --- /dev/null +++ b/components/lib/theme/aura/confirmpopup/index.js @@ -0,0 +1,129 @@ +export default { + variables: { + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + } + } + } + }, + css: ` +.p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + background: var(--p-confirmpopup-background); + color: var(--p-confirmpopup-text-color); + border: 1px solid var(--p-confirmpopup-border-color); + border-radius: var(--p-rounded-base); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-confirm-popup-content { + display: flex; + align-items: center; + padding: 1rem; +} + +.p-confirm-popup-icon { + font-size: 1.5rem; + width: 1.5rem; + height: 1.5rem; +} + +.p-confirm-popup-message { + margin-left: 1rem; +} + +.p-confirm-popup-footer { + display: flex; + justify-content: flex-end; + gap: 0.5rem; + padding: 0 1rem 1rem 1rem; +} + +.p-confirm-popup-footer button { + width: auto; +} + +.p-confirm-popup-footer button:last-child { + margin: 0; +} + +.p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; +} + +.p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); +} + +.p-confirm-popup-leave-to { + opacity: 0; +} + +.p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); +} + +.p-confirm-popup-leave-active { + transition: opacity 0.1s linear; +} + +.p-confirm-popup:after, +.p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + border-style: solid; + border-color: transparent; + border-bottom-color: var(--p-confirmpopup-background); +} + +.p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + border-style: solid; + border-color: transparent; + border-bottom-color: var(--p-confirmpopup-border-color); +} + +.p-confirm-popup-flipped:after, +.p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; +} + +.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + border-top-color: var(--p-confirmpopup-background); +} + +.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + border-top-color: var(--p-confirmpopup-border-color); +} +` +}; diff --git a/components/lib/theme/aura/confirmpopup/package.json b/components/lib/theme/aura/confirmpopup/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/confirmpopup/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 63b81c8c2..63baecebd 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -5,6 +5,7 @@ import blockui from 'primevue/theme/aura/blockui'; import card from 'primevue/theme/aura/card'; import chip from 'primevue/theme/aura/chip'; import confirmdialog from 'primevue/theme/aura/confirmdialog'; +import confirmpopup from 'primevue/theme/aura/confirmpopup'; import dialog from 'primevue/theme/aura/dialog'; import divider from 'primevue/theme/aura/divider'; import fieldset from 'primevue/theme/aura/fieldset'; @@ -140,6 +141,7 @@ export default { card, chip, confirmdialog, + confirmpopup, dialog, divider, fieldset,