jb-modal 1.2.0 → 1.4.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/README.md +3 -1
- package/dist/JBModal.js +1 -1
- package/dist/JBModal.umd.js +1 -1
- package/lib/JBModal.scss +16 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,4 +5,6 @@ modal web compoent
|
|
|
5
5
|
|
|
6
6
|
you can customize modal look by following css properties
|
|
7
7
|
|
|
8
|
-
--jb-modal-bg-color: modal background color
|
|
8
|
+
--jb-modal-bg-color: modal background color
|
|
9
|
+
--jb-modal-border-radius: modal border-radius
|
|
10
|
+
--jb-modal-border-radius-mobile: modal border-radius on mobile
|
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 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
|
|
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}";
|
|
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 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
|
|
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}";
|
|
37
37
|
|
|
38
38
|
var _JBModalWebComponent_instances, _JBModalWebComponent_isOpen, _JBModalWebComponent_id, _JBModalWebComponent_onBrowserBack;
|
|
39
39
|
class JBModalWebComponent extends HTMLElement {
|
package/lib/JBModal.scss
CHANGED
|
@@ -19,11 +19,24 @@
|
|
|
19
19
|
display: block;
|
|
20
20
|
.modal-content-wrapper{
|
|
21
21
|
@include mobile-tablet{
|
|
22
|
-
transform: translateY(0%);
|
|
22
|
+
// transform: translateY(0%);
|
|
23
|
+
animation-name: swipe-up;
|
|
24
|
+
animation-duration: 0.3s;
|
|
25
|
+
animation-delay: 0s;
|
|
26
|
+
animation-iteration-count: 1;
|
|
27
|
+
animation-timing-function: ease;
|
|
23
28
|
}
|
|
24
29
|
}
|
|
25
30
|
|
|
26
31
|
}
|
|
32
|
+
@keyframes swipe-up{
|
|
33
|
+
0%{
|
|
34
|
+
transform: translateY(100%);
|
|
35
|
+
}
|
|
36
|
+
100%{
|
|
37
|
+
transform: translateY(0%);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
27
40
|
.modal-background {
|
|
28
41
|
position: absolute;
|
|
29
42
|
top: 0;
|
|
@@ -49,19 +62,19 @@
|
|
|
49
62
|
bottom: 0;
|
|
50
63
|
top:initial;
|
|
51
64
|
align-items: flex-end;
|
|
52
|
-
transition: all 0.5s 0s ease;
|
|
53
65
|
}
|
|
54
66
|
.modal-content{
|
|
55
67
|
pointer-events: all;
|
|
56
68
|
width: auto;
|
|
57
69
|
height: auto;
|
|
58
70
|
background-color: var(--jb-modal-bg-color, #fff);
|
|
59
|
-
border-radius: 24px;
|
|
71
|
+
border-radius: var(--jb-modal-border-radius, 24px);
|
|
60
72
|
@include mobile-tablet{
|
|
61
73
|
width: 100%;
|
|
62
74
|
height: auto;
|
|
63
75
|
max-height: calc(100% - 80px);
|
|
64
76
|
min-height: 32px;
|
|
77
|
+
border-radius: var(--jb-modal-border-radius-mobile, 24px 24px 0 0);
|
|
65
78
|
}
|
|
66
79
|
}
|
|
67
80
|
}
|