glass-alert-animation 0.1.2 → 0.1.3
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/README.md +5 -1
- package/dist/core/utils.d.ts +10 -0
- package/dist/glass-alert.css +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -105,7 +105,11 @@ function MyComponent() {
|
|
|
105
105
|
| `timer` | `number` | `0` | Auto-dismiss timer in ms. |
|
|
106
106
|
| `glassBlur` | `number` | `20` | Blur intensity for the glass effect (px). |
|
|
107
107
|
| `glassOpacity` | `number` | `0.12` | Opacity of the background (0-1). |
|
|
108
|
-
| `glassColor` | `string` | `'#6366f1'` | Primary accent color. |
|
|
108
|
+
| `glassColor` | `string` | `'#6366f1'` | Primary glass accent color. |
|
|
109
|
+
| `glassColorSecondary` | `string` | `'#8b5cf6'` | Secondary color for gradients. |
|
|
110
|
+
| `confirmButtonColor` | `string` | `'#6366f1'` | Custom color for confirm button. |
|
|
111
|
+
| `cancelButtonColor` | `string` | `'#ffffff'` | Custom color for cancel button. |
|
|
112
|
+
| `denyButtonColor` | `string` | `'#ef4444'` | Custom color for deny button. |
|
|
109
113
|
| `animatedBackground`| `boolean` | `true` | Enable the dynamic background gradient. |
|
|
110
114
|
|
|
111
115
|
---
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert Hex color to RGB string (r, g, b)
|
|
3
|
+
* Supports #RGB, #RGBA, #RRGGBB, #RRGGBBAA
|
|
4
|
+
*/
|
|
5
|
+
export declare function hexToRgb(hex: string): string | null;
|
|
6
|
+
/**
|
|
7
|
+
* Ensures color is in RGB format for CSS variables
|
|
8
|
+
* If input is hex, converts it; if already rgb(a), extracts numbers
|
|
9
|
+
*/
|
|
10
|
+
export declare function formatRgb(color: string): string;
|
package/dist/glass-alert.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");:root{--ga-glass-blur:20px;--ga-glass-opacity:0.12;--ga-glass-color:99,102,241;--ga-glass-color-secondary:139,92,246;--ga-glass-border-opacity:0.25;--ga-backdrop-blur:8px;--ga-border-radius:24px;--ga-font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;--ga-shadow-color:0,0,0;--ga-text-color:255,255,255;--ga-bg-speed:8s;--ga-success:34,197,94;--ga-error:239,68,68;--ga-warning:245,158,11;--ga-info:59,130,246;--ga-question:139,92,246}.ga-overlay{align-items:center;display:flex;inset:0;justify-content:center;opacity:0;padding:20px;position:fixed;visibility:hidden;z-index:99990}.ga-overlay.ga-visible{opacity:1;visibility:visible}.ga-backdrop{backdrop-filter:blur(var(--ga-backdrop-blur));-webkit-backdrop-filter:blur(var(--ga-backdrop-blur));background:rgba(0,0,0,.4);inset:0;position:absolute}.ga-animated-bg{animation:ga-bg-drift var(--ga-bg-speed) ease-in-out infinite alternate;background:radial-gradient(ellipse at 20% 50%,rgba(var(--ga-glass-color),.15) 0,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(var(--ga-glass-color-secondary),.12) 0,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(var(--ga-glass-color),.1) 0,transparent 50%),radial-gradient(ellipse at 70% 60%,rgba(var(--ga-glass-color-secondary),.08) 0,transparent 40%);background-size:200% 200%;height:200%;inset:-50%;pointer-events:none;position:absolute;width:200%}@keyframes ga-bg-drift{0%{transform:translate(0) rotate(0deg) scale(1)}25%{transform:translate(5%,-3%) rotate(1deg) scale(1.02)}50%{transform:translate(-3%,5%) rotate(-1deg) scale(1.01)}75%{transform:translate(4%,2%) rotate(.5deg) scale(1.03)}to{transform:translate(-2%,-4%) rotate(-.5deg) scale(1)}}.ga-backdrop:after,.ga-backdrop:before{animation:ga-orb-float 6s ease-in-out infinite alternate;border-radius:50%;content:"";filter:blur(80px);opacity:.35;pointer-events:none;position:absolute}.ga-backdrop:before{animation-delay:0s;background:rgba(var(--ga-glass-color),.4);height:300px;left:15%;top:20%;width:300px}.ga-backdrop:after{animation-delay:-3s;background:rgba(var(--ga-glass-color-secondary),.35);bottom:15%;height:250px;right:15%;width:250px}@keyframes ga-orb-float{0%{transform:translate(0) scale(1)}33%{transform:translate(30px,-20px) scale(1.1)}66%{transform:translate(-20px,30px) scale(.95)}to{transform:translate(15px,10px) scale(1.05)}}.ga-overlay.ga-pos-top{align-items:flex-start;padding-top:40px}.ga-overlay.ga-pos-top-start{align-items:flex-start;justify-content:flex-start;padding:40px}.ga-overlay.ga-pos-top-end{align-items:flex-start;justify-content:flex-end;padding:40px}.ga-overlay.ga-pos-bottom{align-items:flex-end;padding-bottom:40px}.ga-overlay.ga-pos-bottom-start{align-items:flex-end;justify-content:flex-start;padding:40px}.ga-overlay.ga-pos-bottom-end{align-items:flex-end;justify-content:flex-end;padding:40px}.ga-popup{backdrop-filter:blur(var(--ga-glass-blur)) saturate(1.6);-webkit-backdrop-filter:blur(var(--ga-glass-blur)) saturate(1.6);background:linear-gradient(135deg,rgba(var(--ga-glass-color),var(--ga-glass-opacity)) 0,rgba(var(--ga-glass-color-secondary),calc(var(--ga-glass-opacity)*.7)) 50%,rgba(var(--ga-glass-color),calc(var(--ga-glass-opacity)*.5)) 100%);border:1px solid rgba(255,255,255,var(--ga-glass-border-opacity));border-radius:var(--ga-border-radius);box-shadow:0 8px 32px rgba(var(--ga-shadow-color),.3),0 2px 8px rgba(var(--ga-shadow-color),.15),inset 0 1px 0 hsla(0,0%,100%,.15),inset 0 -1px 0 hsla(0,0%,100%,.05);font-family:var(--ga-font-family);max-width:440px;opacity:0;overflow:hidden;padding:32px;position:relative;text-align:center;visibility:hidden;width:100%;z-index:2}.ga-popup.ga-visible{opacity:1;visibility:visible}.ga-popup:before{background:linear-gradient(180deg,hsla(0,0%,100%,.12),hsla(0,0%,100%,.03) 40%,transparent);border-radius:var(--ga-border-radius) var(--ga-border-radius) 0 0;height:50%;left:0;right:0;top:0}.ga-popup:after,.ga-popup:before{content:"";pointer-events:none;position:absolute}.ga-popup:after{animation:ga-shimmer 4s ease-in-out infinite;background:linear-gradient(45deg,transparent 30%,hsla(0,0%,100%,.08) 50%,transparent 70%);background-size:300% 300%;border-radius:var(--ga-border-radius);inset:-2px;z-index:-1}@keyframes ga-shimmer{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.ga-close-btn{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:hsla(0,0%,100%,.1);border:none;border:1px solid hsla(0,0%,100%,.1);border-radius:50%;color:rgba(var(--ga-text-color),.7);cursor:pointer;display:flex;font-size:18px;height:36px;justify-content:center;position:absolute;right:12px;top:12px;transition:all .2s ease;width:36px;z-index:10}.ga-close-btn:hover{background:hsla(0,0%,100%,.2);color:rgba(var(--ga-text-color),1);transform:scale(1.1) rotate(90deg)}.ga-icon-wrapper{align-items:center;display:flex;justify-content:center;margin:0 auto 20px;position:relative}.ga-icon-svg,.ga-icon-wrapper{height:80px;width:80px}.ga-icon-wrapper.ga-icon-type-success{color:rgb(var(--ga-success))}.ga-icon-wrapper.ga-icon-type-error{color:rgb(var(--ga-error))}.ga-icon-wrapper.ga-icon-type-warning{color:rgb(var(--ga-warning))}.ga-icon-wrapper.ga-icon-type-info{color:rgb(var(--ga-info))}.ga-icon-wrapper.ga-icon-type-question{color:rgb(var(--ga-question))}.ga-title{color:rgba(var(--ga-text-color),.95);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:0 0 8px}.ga-content{color:rgba(var(--ga-text-color),.7);font-size:.95rem;font-weight:400;line-height:1.6;margin:0 0 24px}.ga-actions{align-items:center;display:flex;gap:12px;justify-content:center;margin-top:8px}.ga-actions.ga-reverse{flex-direction:row-reverse}.ga-btn{border:none;border-radius:14px;cursor:pointer;font-family:var(--ga-font-family);font-size:.9rem;font-weight:600;letter-spacing:.01em;overflow:hidden;padding:12px 28px;position:relative;transition:all .25s ease}.ga-btn-confirm{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:linear-gradient(135deg,rgba(var(--ga-
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");:root{--ga-glass-blur:20px;--ga-glass-opacity:0.12;--ga-glass-color:99,102,241;--ga-glass-color-secondary:139,92,246;--ga-confirm-color:var(--ga-glass-color);--ga-cancel-color:255,255,255;--ga-deny-color:var(--ga-error);--ga-glass-border-opacity:0.25;--ga-backdrop-blur:8px;--ga-border-radius:24px;--ga-font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;--ga-shadow-color:0,0,0;--ga-text-color:255,255,255;--ga-bg-speed:8s;--ga-success:34,197,94;--ga-error:239,68,68;--ga-warning:245,158,11;--ga-info:59,130,246;--ga-question:139,92,246}.ga-overlay{align-items:center;display:flex;inset:0;justify-content:center;opacity:0;padding:20px;position:fixed;visibility:hidden;z-index:99990}.ga-overlay.ga-visible{opacity:1;visibility:visible}.ga-backdrop{backdrop-filter:blur(var(--ga-backdrop-blur));-webkit-backdrop-filter:blur(var(--ga-backdrop-blur));background:rgba(0,0,0,.4);inset:0;position:absolute}.ga-animated-bg{animation:ga-bg-drift var(--ga-bg-speed) ease-in-out infinite alternate;background:radial-gradient(ellipse at 20% 50%,rgba(var(--ga-glass-color),.15) 0,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(var(--ga-glass-color-secondary),.12) 0,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(var(--ga-glass-color),.1) 0,transparent 50%),radial-gradient(ellipse at 70% 60%,rgba(var(--ga-glass-color-secondary),.08) 0,transparent 40%);background-size:200% 200%;height:200%;inset:-50%;pointer-events:none;position:absolute;width:200%}@keyframes ga-bg-drift{0%{transform:translate(0) rotate(0deg) scale(1)}25%{transform:translate(5%,-3%) rotate(1deg) scale(1.02)}50%{transform:translate(-3%,5%) rotate(-1deg) scale(1.01)}75%{transform:translate(4%,2%) rotate(.5deg) scale(1.03)}to{transform:translate(-2%,-4%) rotate(-.5deg) scale(1)}}.ga-backdrop:after,.ga-backdrop:before{animation:ga-orb-float 6s ease-in-out infinite alternate;border-radius:50%;content:"";filter:blur(80px);opacity:.35;pointer-events:none;position:absolute}.ga-backdrop:before{animation-delay:0s;background:rgba(var(--ga-glass-color),.4);height:300px;left:15%;top:20%;width:300px}.ga-backdrop:after{animation-delay:-3s;background:rgba(var(--ga-glass-color-secondary),.35);bottom:15%;height:250px;right:15%;width:250px}@keyframes ga-orb-float{0%{transform:translate(0) scale(1)}33%{transform:translate(30px,-20px) scale(1.1)}66%{transform:translate(-20px,30px) scale(.95)}to{transform:translate(15px,10px) scale(1.05)}}.ga-overlay.ga-pos-top{align-items:flex-start;padding-top:40px}.ga-overlay.ga-pos-top-start{align-items:flex-start;justify-content:flex-start;padding:40px}.ga-overlay.ga-pos-top-end{align-items:flex-start;justify-content:flex-end;padding:40px}.ga-overlay.ga-pos-bottom{align-items:flex-end;padding-bottom:40px}.ga-overlay.ga-pos-bottom-start{align-items:flex-end;justify-content:flex-start;padding:40px}.ga-overlay.ga-pos-bottom-end{align-items:flex-end;justify-content:flex-end;padding:40px}.ga-popup{backdrop-filter:blur(var(--ga-glass-blur)) saturate(1.6);-webkit-backdrop-filter:blur(var(--ga-glass-blur)) saturate(1.6);background:linear-gradient(135deg,rgba(var(--ga-glass-color),var(--ga-glass-opacity)) 0,rgba(var(--ga-glass-color-secondary),calc(var(--ga-glass-opacity)*.7)) 50%,rgba(var(--ga-glass-color),calc(var(--ga-glass-opacity)*.5)) 100%);border:1px solid rgba(255,255,255,var(--ga-glass-border-opacity));border-radius:var(--ga-border-radius);box-shadow:0 8px 32px rgba(var(--ga-shadow-color),.3),0 2px 8px rgba(var(--ga-shadow-color),.15),inset 0 1px 0 hsla(0,0%,100%,.15),inset 0 -1px 0 hsla(0,0%,100%,.05);font-family:var(--ga-font-family);max-width:440px;opacity:0;overflow:hidden;padding:32px;position:relative;text-align:center;visibility:hidden;width:100%;z-index:2}.ga-popup.ga-visible{opacity:1;visibility:visible}.ga-popup:before{background:linear-gradient(180deg,hsla(0,0%,100%,.12),hsla(0,0%,100%,.03) 40%,transparent);border-radius:var(--ga-border-radius) var(--ga-border-radius) 0 0;height:50%;left:0;right:0;top:0}.ga-popup:after,.ga-popup:before{content:"";pointer-events:none;position:absolute}.ga-popup:after{animation:ga-shimmer 4s ease-in-out infinite;background:linear-gradient(45deg,transparent 30%,hsla(0,0%,100%,.08) 50%,transparent 70%);background-size:300% 300%;border-radius:var(--ga-border-radius);inset:-2px;z-index:-1}@keyframes ga-shimmer{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.ga-close-btn{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:hsla(0,0%,100%,.1);border:none;border:1px solid hsla(0,0%,100%,.1);border-radius:50%;color:rgba(var(--ga-text-color),.7);cursor:pointer;display:flex;font-size:18px;height:36px;justify-content:center;position:absolute;right:12px;top:12px;transition:all .2s ease;width:36px;z-index:10}.ga-close-btn:hover{background:hsla(0,0%,100%,.2);color:rgba(var(--ga-text-color),1);transform:scale(1.1) rotate(90deg)}.ga-icon-wrapper{align-items:center;display:flex;justify-content:center;margin:0 auto 20px;position:relative}.ga-icon-svg,.ga-icon-wrapper{height:80px;width:80px}.ga-icon-wrapper.ga-icon-type-success{color:rgb(var(--ga-success))}.ga-icon-wrapper.ga-icon-type-error{color:rgb(var(--ga-error))}.ga-icon-wrapper.ga-icon-type-warning{color:rgb(var(--ga-warning))}.ga-icon-wrapper.ga-icon-type-info{color:rgb(var(--ga-info))}.ga-icon-wrapper.ga-icon-type-question{color:rgb(var(--ga-question))}.ga-title{color:rgba(var(--ga-text-color),.95);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:0 0 8px}.ga-content{color:rgba(var(--ga-text-color),.7);font-size:.95rem;font-weight:400;line-height:1.6;margin:0 0 24px}.ga-actions{align-items:center;display:flex;gap:12px;justify-content:center;margin-top:8px}.ga-actions.ga-reverse{flex-direction:row-reverse}.ga-btn{border:none;border-radius:14px;cursor:pointer;font-family:var(--ga-font-family);font-size:.9rem;font-weight:600;letter-spacing:.01em;overflow:hidden;padding:12px 28px;position:relative;transition:all .25s ease}.ga-btn-confirm{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:linear-gradient(135deg,rgba(var(--ga-confirm-color),.7) 0,rgba(var(--ga-confirm-color-secondary,var(--ga-confirm-color)),.6) 100%);border:1px solid hsla(0,0%,100%,.2);box-shadow:0 4px 16px rgba(var(--ga-confirm-color),.3),inset 0 1px 0 hsla(0,0%,100%,.15);color:hsla(0,0%,100%,.95)}.ga-btn-confirm:hover{box-shadow:0 6px 24px rgba(var(--ga-glass-color),.45),inset 0 1px 0 hsla(0,0%,100%,.2)}.ga-btn-confirm:active{transform:scale(.97)}.ga-btn-confirm:after{animation:ga-btn-shimmer 3s ease-in-out infinite;background:linear-gradient(105deg,transparent 35%,hsla(0,0%,100%,.2) 50%,transparent 65%);background-size:300% 100%;content:"";inset:0;position:absolute}@keyframes ga-btn-shimmer{0%{background-position:200% 0}to{background-position:-100% 0}}.ga-btn-cancel{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:rgba(var(--ga-cancel-color),.08);border:1px solid rgba(var(--ga-cancel-color),.12);color:rgba(var(--ga-text-color),.8)}.ga-btn-cancel:hover{background:hsla(0,0%,100%,.15);border-color:hsla(0,0%,100%,.2);color:rgba(var(--ga-text-color),1)}.ga-btn-cancel:active{transform:scale(.97)}.ga-btn-deny{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:rgba(var(--ga-deny-color),.2);border:1px solid rgba(var(--ga-deny-color),.25);color:rgb(var(--ga-deny-color))}.ga-btn-deny:hover{background:rgba(var(--ga-deny-color),.35);box-shadow:0 4px 16px rgba(var(--ga-deny-color),.2)}.ga-btn-deny:active{transform:scale(.97)}.ga-timer-bar-wrapper{border-radius:0 0 var(--ga-border-radius) var(--ga-border-radius);bottom:0;height:4px;left:0;overflow:hidden;position:absolute;right:0}.ga-timer-bar{background:linear-gradient(90deg,rgba(var(--ga-glass-color),.8),rgba(var(--ga-glass-color-secondary),.8));border-radius:0 2px 2px 0;height:100%;transform-origin:left center;width:100%}.ga-footer{border-top:1px solid hsla(0,0%,100%,.08);color:rgba(var(--ga-text-color),.45);font-size:.8rem;margin-top:16px;padding-top:12px}.ga-overlay.ga-toast{background:transparent;pointer-events:none}.ga-overlay.ga-toast .ga-backdrop{display:none}.ga-overlay.ga-toast .ga-popup{max-width:360px;padding:16px 24px;pointer-events:auto;text-align:left}.ga-overlay.ga-toast .ga-icon-wrapper{display:inline-flex;height:40px;margin:0 12px 0 0;width:40px}.ga-overlay.ga-toast .ga-icon-svg{height:40px;width:40px}.ga-overlay.ga-toast .ga-popup{align-items:center;display:flex;flex-direction:row}.ga-overlay.ga-toast .ga-toast-body{flex:1}.ga-overlay.ga-toast .ga-title{font-size:.95rem;margin-bottom:2px}.ga-overlay.ga-toast .ga-content{font-size:.8rem;margin-bottom:0}.ga-overlay.ga-toast .ga-actions{margin-left:12px;margin-top:0}@media (max-width:480px){.ga-popup{border-radius:20px;max-width:calc(100vw - 32px);padding:24px 20px}.ga-title{font-size:1.25rem}.ga-actions{flex-direction:column;gap:8px}.ga-btn{width:100%}}@media (prefers-reduced-motion:reduce){.ga-animated-bg,.ga-backdrop:after,.ga-backdrop:before,.ga-btn-confirm:after,.ga-popup:after{animation:none!important}}
|