jb-modal 1.4.0 → 1.5.0
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 -0
- 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}\n.jb-modal-web-component.--closed {\n display: none;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component.--closed .modal-content-wrapper {\n transform: translateY(100%);\n }\n}\n.jb-modal-web-component.--opened {\n display: block;\n}\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}\n@keyframes swipe-up {\n 0% {\n transform: translateY(100%);\n }\n 100% {\n transform: translateY(0%);\n }\n}\n.jb-modal-web-component .modal-background {\n position: absolute;\n top: 0;\n left: 0;\n background-color: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n z-index: 2;\n width: 100%;\n height: 100%;\n}\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}\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 }\n}\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}\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 }\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}\n.jb-modal-web-component.--closed {\n display: none;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component.--closed .modal-content-wrapper {\n transform: translateY(100%);\n }\n}\n.jb-modal-web-component.--opened {\n display: block;\n}\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}\n@keyframes swipe-up {\n 0% {\n transform: translateY(100%);\n }\n 100% {\n transform: translateY(0%);\n }\n}\n.jb-modal-web-component .modal-background {\n position: absolute;\n top: 0;\n left: 0;\n background-color: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n z-index: 2;\n width: 100%;\n height: 100%;\n}\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}\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 }\n}\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}\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 }\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
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
|
|
34
34
|
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>";
|
|
35
35
|
|
|
36
|
-
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}\n.jb-modal-web-component.--closed {\n display: none;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component.--closed .modal-content-wrapper {\n transform: translateY(100%);\n }\n}\n.jb-modal-web-component.--opened {\n display: block;\n}\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}\n@keyframes swipe-up {\n 0% {\n transform: translateY(100%);\n }\n 100% {\n transform: translateY(0%);\n }\n}\n.jb-modal-web-component .modal-background {\n position: absolute;\n top: 0;\n left: 0;\n background-color: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n z-index: 2;\n width: 100%;\n height: 100%;\n}\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}\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 }\n}\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}\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 }\n}";
|
|
36
|
+
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}\n.jb-modal-web-component.--closed {\n display: none;\n}\n@media (min-width: 320px) and (max-width: 767px) {\n .jb-modal-web-component.--closed .modal-content-wrapper {\n transform: translateY(100%);\n }\n}\n.jb-modal-web-component.--opened {\n display: block;\n}\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}\n@keyframes swipe-up {\n 0% {\n transform: translateY(100%);\n }\n 100% {\n transform: translateY(0%);\n }\n}\n.jb-modal-web-component .modal-background {\n position: absolute;\n top: 0;\n left: 0;\n background-color: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n z-index: 2;\n width: 100%;\n height: 100%;\n}\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}\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 }\n}\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}\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 }\n}";
|
|
37
37
|
|
|
38
38
|
var _JBModalWebComponent_instances, _JBModalWebComponent_isOpen, _JBModalWebComponent_id, _JBModalWebComponent_onBrowserBack;
|
|
39
39
|
class JBModalWebComponent extends HTMLElement {
|
package/lib/JBModal.scss
CHANGED