jb-modal 1.6.0 → 1.6.1
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/JBModal.js +1 -1
- package/dist/JBModal.umd.js +1 -1
- package/lib/JBModal.scss +1 -1
- package/package.json +1 -1
package/dist/JBModal.js
CHANGED
|
@@ -28,7 +28,7 @@ function __classPrivateFieldSet(receiver, state, value, kind, f) {
|
|
|
28
28
|
|
|
29
29
|
var HTML = "<div class=\"jb-modal-web-component --closed\">\r\n <div class=\"modal-background\"></div>\r\n <div class=\"modal-content-wrapper\">\r\n <div class=\"modal-content\">\r\n <slot name=\"content\"></slot>\r\n </div>\r\n </div>\r\n</div>";
|
|
30
30
|
|
|
31
|
-
var css_248z = ".jb-modal-web-component {\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--jb-modal-z-index, 1);\n width: 100%;\n height: 100%; }\n .jb-modal-web-component.--closed {\n display: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component.--closed .modal-content-wrapper {\n transform: translateY(100%); } }\n .jb-modal-web-component.--opened {\n display: block; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component.--opened .modal-content-wrapper {\n animation-name: swipe-up;\n animation-duration: 0.3s;\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-timing-function: ease; } }\n\n@keyframes swipe-up {\n 0% {\n transform: translateY(100%); }\n 100% {\n transform: translateY(0%); } }\n .jb-modal-web-component .modal-background {\n position: absolute;\n top: 0;\n left: 0;\n background-color: var(jb-modal-bg-color, rgba(255, 255, 255, 0.1));\n backdrop-filter: blur(10px);\n z-index: 2;\n width: 100%;\n height: 100%; }\n .jb-modal-web-component .modal-content-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 3;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component .modal-content-wrapper {\n bottom: 0;\n top: initial;\n align-items: flex-end; } }\n .jb-modal-web-component .modal-content-wrapper .modal-content {\n pointer-events: all;\n width: auto;\n height: auto;\n background-color: var(--jb-modal-bg-color, #fff);\n border-radius: var(--jb-modal-border-radius, 24px); }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component .modal-content-wrapper .modal-content {\n width: 100%;\n height: auto;\n max-height: calc(100% - 80px);\n min-height: 32px;\n border-radius: var(--jb-modal-border-radius-mobile, 24px 24px 0 0);\n overflow-y: auto; } }\n";
|
|
31
|
+
var css_248z = ".jb-modal-web-component {\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--jb-modal-z-index, 1);\n width: 100%;\n height: 100%; }\n .jb-modal-web-component.--closed {\n display: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component.--closed .modal-content-wrapper {\n transform: translateY(100%); } }\n .jb-modal-web-component.--opened {\n display: block; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component.--opened .modal-content-wrapper {\n animation-name: swipe-up;\n animation-duration: 0.3s;\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-timing-function: ease; } }\n\n@keyframes swipe-up {\n 0% {\n transform: translateY(100%); }\n 100% {\n transform: translateY(0%); } }\n .jb-modal-web-component .modal-background {\n position: absolute;\n top: 0;\n left: 0;\n background-color: var(--jb-modal-back-bg-color, rgba(255, 255, 255, 0.1));\n backdrop-filter: blur(10px);\n z-index: 2;\n width: 100%;\n height: 100%; }\n .jb-modal-web-component .modal-content-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 3;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component .modal-content-wrapper {\n bottom: 0;\n top: initial;\n align-items: flex-end; } }\n .jb-modal-web-component .modal-content-wrapper .modal-content {\n pointer-events: all;\n width: auto;\n height: auto;\n background-color: var(--jb-modal-bg-color, #fff);\n border-radius: var(--jb-modal-border-radius, 24px); }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component .modal-content-wrapper .modal-content {\n width: 100%;\n height: auto;\n max-height: calc(100% - 80px);\n min-height: 32px;\n border-radius: var(--jb-modal-border-radius-mobile, 24px 24px 0 0);\n overflow-y: auto; } }\n";
|
|
32
32
|
|
|
33
33
|
var _JBModalWebComponent_instances, _JBModalWebComponent_isOpen, _JBModalWebComponent_id, _JBModalWebComponent_onBrowserBack;
|
|
34
34
|
class JBModalWebComponent extends HTMLElement {
|
package/dist/JBModal.umd.js
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
var HTML = "<div class=\"jb-modal-web-component --closed\">\r\n <div class=\"modal-background\"></div>\r\n <div class=\"modal-content-wrapper\">\r\n <div class=\"modal-content\">\r\n <slot name=\"content\"></slot>\r\n </div>\r\n </div>\r\n</div>";
|
|
36
36
|
|
|
37
|
-
var css_248z = ".jb-modal-web-component {\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--jb-modal-z-index, 1);\n width: 100%;\n height: 100%; }\n .jb-modal-web-component.--closed {\n display: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component.--closed .modal-content-wrapper {\n transform: translateY(100%); } }\n .jb-modal-web-component.--opened {\n display: block; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component.--opened .modal-content-wrapper {\n animation-name: swipe-up;\n animation-duration: 0.3s;\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-timing-function: ease; } }\n\n@keyframes swipe-up {\n 0% {\n transform: translateY(100%); }\n 100% {\n transform: translateY(0%); } }\n .jb-modal-web-component .modal-background {\n position: absolute;\n top: 0;\n left: 0;\n background-color: var(jb-modal-bg-color, rgba(255, 255, 255, 0.1));\n backdrop-filter: blur(10px);\n z-index: 2;\n width: 100%;\n height: 100%; }\n .jb-modal-web-component .modal-content-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 3;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component .modal-content-wrapper {\n bottom: 0;\n top: initial;\n align-items: flex-end; } }\n .jb-modal-web-component .modal-content-wrapper .modal-content {\n pointer-events: all;\n width: auto;\n height: auto;\n background-color: var(--jb-modal-bg-color, #fff);\n border-radius: var(--jb-modal-border-radius, 24px); }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component .modal-content-wrapper .modal-content {\n width: 100%;\n height: auto;\n max-height: calc(100% - 80px);\n min-height: 32px;\n border-radius: var(--jb-modal-border-radius-mobile, 24px 24px 0 0);\n overflow-y: auto; } }\n";
|
|
37
|
+
var css_248z = ".jb-modal-web-component {\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--jb-modal-z-index, 1);\n width: 100%;\n height: 100%; }\n .jb-modal-web-component.--closed {\n display: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component.--closed .modal-content-wrapper {\n transform: translateY(100%); } }\n .jb-modal-web-component.--opened {\n display: block; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component.--opened .modal-content-wrapper {\n animation-name: swipe-up;\n animation-duration: 0.3s;\n animation-delay: 0s;\n animation-iteration-count: 1;\n animation-timing-function: ease; } }\n\n@keyframes swipe-up {\n 0% {\n transform: translateY(100%); }\n 100% {\n transform: translateY(0%); } }\n .jb-modal-web-component .modal-background {\n position: absolute;\n top: 0;\n left: 0;\n background-color: var(--jb-modal-back-bg-color, rgba(255, 255, 255, 0.1));\n backdrop-filter: blur(10px);\n z-index: 2;\n width: 100%;\n height: 100%; }\n .jb-modal-web-component .modal-content-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 3;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none; }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component .modal-content-wrapper {\n bottom: 0;\n top: initial;\n align-items: flex-end; } }\n .jb-modal-web-component .modal-content-wrapper .modal-content {\n pointer-events: all;\n width: auto;\n height: auto;\n background-color: var(--jb-modal-bg-color, #fff);\n border-radius: var(--jb-modal-border-radius, 24px); }\n @media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component .modal-content-wrapper .modal-content {\n width: 100%;\n height: auto;\n max-height: calc(100% - 80px);\n min-height: 32px;\n border-radius: var(--jb-modal-border-radius-mobile, 24px 24px 0 0);\n overflow-y: auto; } }\n";
|
|
38
38
|
|
|
39
39
|
var _JBModalWebComponent_instances, _JBModalWebComponent_isOpen, _JBModalWebComponent_id, _JBModalWebComponent_onBrowserBack;
|
|
40
40
|
class JBModalWebComponent extends HTMLElement {
|
package/lib/JBModal.scss
CHANGED