vue-modaller 1.0.8 → 1.0.9
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/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--draggable-slidein-y: 0px}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}}@keyframes zoomOut{0%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:both}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:both}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.slideInBottom{-webkit-animation-name:slideInBottom;animation-name:slideInBottom;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:backwards}@-webkit-keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutBottom{-webkit-animation-name:slideOutBottom;animation-name:slideOutBottom;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:backwards}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(50%);transform:translateY(50%);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}to{-webkit-transform:translateY(50%);transform:translateY(50%)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{visibility:hidden;-webkit-transform:translateY(50%);transform:translateY(50%)}}@keyframes slideOutDown{0%{-webkit-transform:translateY(50%);transform:translateY(50%)}to{visibility:hidden;-webkit-transform:translateY(0%);transform:translateY(0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:forwards}@-webkit-keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}@keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}.slideInBottom{-webkit-animation-name:slideInBottom;animation-name:slideInBottom;animation-duration:.35s;animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-fill-mode:both}@-webkit-keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}}@keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}}.slideOutBottom{-webkit-animation-name:slideOutBottom;animation-name:slideOutBottom;animation-duration:.25s;animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-fill-mode:both}:root{--white: #fff;--blue-500: #3b82f6;--blue-600: #2563eb;--gray-500: #6b7280;--gray-600: #4b5563;--dark: #1f2937;--border-gray: #e0e0e0;--modal-backdrop: rgba(0, 0, 0, .2);--modal-border-radius: .75rem;--modal-padding: 1rem;--modal-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--modal-z-index: 9999;--modal-content-z-index: 99;--modal-draggable-handle-color: #ccc;--modal-draggable-handle-hover-color: #999;--modal-draggable-handle-active-color: #666;--modal-draggable-handle-height: 5px;--modal-draggable-handle-width: 45px;--modal-draggable-handle-radius: 4px;--modal-draggable-handle-margin-top: 10px;--modal-draggable-handle-margin-bottom: 10px}.__modal-wrapper{display:flex;position:fixed;width:100%;height:100%;z-index:var(--modal-z-index);top:0;left:0}.__modal-wrapper--centered{display:flex;justify-content:center;align-items:center}.__modal-wrapper--side{display:grid;justify-content:flex-end}.__modal-backdrop{position:absolute;width:100%;height:100%;background-color:var(--modal-backdrop);cursor:pointer;top:0;right:0;bottom:0;left:0}.__modal-backdrop--blur,.blur-bg{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}.__modal-content{z-index:var(--modal-content-z-index);width:100%;pointer-events:auto;overflow-y:auto;background-color:var(--white)}.__modal-content--standard{max-width:100%;margin-top:5rem;margin-bottom:5rem}.__modal-content--side{height:100%}@media (
|
|
1
|
+
:root{--draggable-slidein-y: 0px}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}}@keyframes zoomOut{0%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:both}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:both}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.slideInBottom{-webkit-animation-name:slideInBottom;animation-name:slideInBottom;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:backwards}@-webkit-keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutBottom{-webkit-animation-name:slideOutBottom;animation-name:slideOutBottom;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:backwards}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(50%);transform:translateY(50%);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}to{-webkit-transform:translateY(50%);transform:translateY(50%)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{visibility:hidden;-webkit-transform:translateY(50%);transform:translateY(50%)}}@keyframes slideOutDown{0%{-webkit-transform:translateY(50%);transform:translateY(50%)}to{visibility:hidden;-webkit-transform:translateY(0%);transform:translateY(0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:forwards}@-webkit-keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}@keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}.slideInBottom{-webkit-animation-name:slideInBottom;animation-name:slideInBottom;animation-duration:.35s;animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-fill-mode:both}@-webkit-keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}}@keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}}.slideOutBottom{-webkit-animation-name:slideOutBottom;animation-name:slideOutBottom;animation-duration:.25s;animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-fill-mode:both}:root{--white: #fff;--blue-500: #3b82f6;--blue-600: #2563eb;--gray-500: #6b7280;--gray-600: #4b5563;--dark: #1f2937;--border-gray: #e0e0e0;--modal-backdrop: rgba(0, 0, 0, .2);--modal-border-radius: .75rem;--modal-padding: 1rem;--modal-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--modal-z-index: 9999;--modal-content-z-index: 99;--modal-draggable-handle-color: #ccc;--modal-draggable-handle-hover-color: #999;--modal-draggable-handle-active-color: #666;--modal-draggable-handle-height: 5px;--modal-draggable-handle-width: 45px;--modal-draggable-handle-radius: 4px;--modal-draggable-handle-margin-top: 10px;--modal-draggable-handle-margin-bottom: 10px}.__modal-wrapper{display:flex;position:fixed;width:100%;height:100%;z-index:var(--modal-z-index);top:0;left:0}.__modal-wrapper--centered{display:flex;justify-content:center;align-items:center}.__modal-wrapper--side{display:grid;justify-content:flex-end}.__modal-backdrop{position:absolute;width:100%;height:100%;background-color:var(--modal-backdrop);cursor:pointer;top:0;right:0;bottom:0;left:0}.__modal-backdrop--blur,.blur-bg{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}.__modal-content{z-index:var(--modal-content-z-index);width:100%;pointer-events:auto;overflow-y:auto;background-color:var(--white)}.__modal-content--standard{max-width:100%;margin-top:5rem;margin-bottom:5rem}.__modal-content--side{height:100%}@media (max-width: 900px){.__modal-content--side{max-width:30rem}}.__modal-wrapper--panel{display:flex;justify-content:center;align-items:flex-end;top:0;left:0}.__modal-content--panel{width:100%;height:100vh;max-height:100vh;transition:transform .25s cubic-bezier(.25,.1,.25,1);position:absolute;bottom:0}.__modal-wrapper--draggable{display:flex;justify-content:center}.__modal-content--dragable.dragging{transition:none}.__modal-content--draggable{width:100%;height:100vh;max-height:100vh;transition:transform .25s cubic-bezier(.25,.1,.25,1);position:absolute;bottom:0;touch-action:none;overflow:hidden}.__modal-content--draggable.__modal-content--dragging{transition:none}.__modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.__modal-header__title{color:var(--dark);font-weight:600}.__modal-header__title--standard{font-size:1.25rem;line-height:1.75rem}.__modal-header__title--side{font-size:1.5rem;line-height:2rem}.__modal-header__close-btn{cursor:pointer;width:2.5rem;height:2.5rem;display:flex;justify-content:center;align-items:center;border:1px solid var(--border-gray);border-radius:9999px;background-color:transparent;font-size:1.25rem;color:var(--dark)}.__modal-header__close-btn:hover{background-color:#f3f4f6}.__modal-body{padding:var(--modal-padding)}@media (min-width: 768px){.__modal-body{padding:var(--modal-padding)}}.__modal-drag-handle{cursor:grab;background:var(--modal-draggable-handle-color);height:var(--modal-draggable-handle-height);width:var(--modal-draggable-handle-width);border-radius:var(--modal-draggable-handle-radius);margin-top:var(--modal-draggable-handle-margin-top);margin-bottom:var(--modal-draggable-handle-margin-bottom);margin-left:auto;margin-right:auto;transition:background-color .2s}.__modal-drag-handle:hover{background:var(--modal-draggable-handle-hover-color)}.__modal-drag-handle:active{cursor:grabbing;background:var(--modal-draggable-handle-active-color)}.__hidden{display:none}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vue-modaller",
|
|
3
3
|
"author": "Classydev (https://github.com/classyrazy)",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.9",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "A flexible and powerful modal system for Vue 3 applications with TypeScript support, featuring draggable modals, side panels, and smooth animations",
|
|
7
7
|
"private": false,
|