webcimes-modal 2.2.0 → 2.2.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/README.md +10 -10
- package/demo/script_esm.js +3 -3
- package/demo/script_udm.js +3 -3
- package/dist/css/webcimes-modal.css +1 -1
- package/dist/css/webcimes-modal.css.map +1 -1
- package/package.json +1 -1
- package/src/css/webcimes-modal.css +29 -20
- package/test/script.js +2 -2
package/README.md
CHANGED
|
@@ -407,17 +407,17 @@ You can style modal with the following field applying to the class of `.webcimes
|
|
|
407
407
|
--modal-background: #fff;
|
|
408
408
|
--modal-border-color: #ddd;
|
|
409
409
|
--modal-box-shadow: 1px 1px 3px 0px #444;
|
|
410
|
-
--modal-header-padding:
|
|
411
|
-
--modal-body-padding:
|
|
412
|
-
--modal-footer-padding:
|
|
413
|
-
--modal-title-font-size:
|
|
410
|
+
--modal-header-padding: 1.25rem 2.5rem;
|
|
411
|
+
--modal-body-padding: 1.25rem 2.5rem;
|
|
412
|
+
--modal-footer-padding: 1.25rem 2.5rem;
|
|
413
|
+
--modal-title-font-size: 1.5rem;
|
|
414
414
|
--modal-title-font-weight: 600;
|
|
415
|
-
--modal-button-cancel-background:
|
|
416
|
-
--modal-button-cancel-background-hover:
|
|
417
|
-
--modal-button-cancel-color: #
|
|
418
|
-
--modal-button-cancel-color-hover: #
|
|
419
|
-
--modal-button-confirm-background:
|
|
420
|
-
--modal-button-confirm-background-hover:
|
|
415
|
+
--modal-button-cancel-background: #e5e5e5;
|
|
416
|
+
--modal-button-cancel-background-hover: #d0d0d0;
|
|
417
|
+
--modal-button-cancel-color: #333;
|
|
418
|
+
--modal-button-cancel-color-hover: #000;
|
|
419
|
+
--modal-button-confirm-background: #1e88e5;
|
|
420
|
+
--modal-button-confirm-background-hover: #1565c0;
|
|
421
421
|
--modal-button-confirm-color: #fff;
|
|
422
422
|
--modal-button-confirm-color-hover: #fff;
|
|
423
423
|
}
|
package/demo/script_esm.js
CHANGED
|
@@ -70,7 +70,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
|
70
70
|
headerHtml: () => {
|
|
71
71
|
const header = document.createElement('div');
|
|
72
72
|
header.innerHTML =
|
|
73
|
-
'<h2 style="margin: 0; color: #333;">Custom Header</h2><p style="margin:
|
|
73
|
+
'<h2 style="margin: 0; color: #333;">Custom Header</h2><p style="margin: 0.3125rem 0 0; font-size: 0.875rem; color: #666;">With dynamic content</p>';
|
|
74
74
|
return header;
|
|
75
75
|
},
|
|
76
76
|
bodyHtml: () => {
|
|
@@ -88,13 +88,13 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
|
88
88
|
const cancelBtn = document.createElement('button');
|
|
89
89
|
cancelBtn.textContent = 'Custom Cancel';
|
|
90
90
|
cancelBtn.className = 'webcimes-modal__close';
|
|
91
|
-
cancelBtn.style.padding = '
|
|
91
|
+
cancelBtn.style.padding = '0.5rem 1rem';
|
|
92
92
|
cancelBtn.style.cursor = 'pointer';
|
|
93
93
|
|
|
94
94
|
const confirmBtn = document.createElement('button');
|
|
95
95
|
confirmBtn.textContent = 'Custom Confirm';
|
|
96
96
|
confirmBtn.className = 'webcimes-modal__close';
|
|
97
|
-
confirmBtn.style.padding = '
|
|
97
|
+
confirmBtn.style.padding = '0.5rem 1rem';
|
|
98
98
|
confirmBtn.style.cursor = 'pointer';
|
|
99
99
|
confirmBtn.style.background = '#007bff';
|
|
100
100
|
confirmBtn.style.color = 'white';
|
package/demo/script_udm.js
CHANGED
|
@@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
|
67
67
|
headerHtml: () => {
|
|
68
68
|
const header = document.createElement('div');
|
|
69
69
|
header.innerHTML =
|
|
70
|
-
'<h2 style="margin: 0; color: #333;">Custom Header</h2><p style="margin:
|
|
70
|
+
'<h2 style="margin: 0; color: #333;">Custom Header</h2><p style="margin: 0.3125rem 0 0; font-size: 0.875rem; color: #666;">With dynamic content</p>';
|
|
71
71
|
return header;
|
|
72
72
|
},
|
|
73
73
|
bodyHtml: () => {
|
|
@@ -85,13 +85,13 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
|
85
85
|
const cancelBtn = document.createElement('button');
|
|
86
86
|
cancelBtn.textContent = 'Custom Cancel';
|
|
87
87
|
cancelBtn.className = 'webcimes-modal__close';
|
|
88
|
-
cancelBtn.style.padding = '
|
|
88
|
+
cancelBtn.style.padding = '0.5rem 1rem';
|
|
89
89
|
cancelBtn.style.cursor = 'pointer';
|
|
90
90
|
|
|
91
91
|
const confirmBtn = document.createElement('button');
|
|
92
92
|
confirmBtn.textContent = 'Custom Confirm';
|
|
93
93
|
confirmBtn.className = 'webcimes-modal__close';
|
|
94
|
-
confirmBtn.style.padding = '
|
|
94
|
+
confirmBtn.style.padding = '0.5rem 1rem';
|
|
95
95
|
confirmBtn.style.cursor = 'pointer';
|
|
96
96
|
confirmBtn.style.background = '#007bff';
|
|
97
97
|
confirmBtn.style.color = 'white';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.webcimes-modals,.webcimes-modals *,.webcimes-modals :after,.webcimes-modals :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.webcimes-modals{--webcimes-modals-background:rgba(0,0,0,.8);--webcimes-modals-z-index:5;align-items:center;background:var(--webcimes-modals-background);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--webcimes-modals-z-index)}.webcimes-modal{--modal-color:inherit;--modal-background:#fff;--modal-border-color:#ddd;--modal-box-shadow:1px 1px 3px 0px #444;--modal-header-padding:
|
|
1
|
+
.webcimes-modals,.webcimes-modals *,.webcimes-modals :after,.webcimes-modals :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.webcimes-modals{--webcimes-modals-background:rgba(0,0,0,.8);--webcimes-modals-z-index:5;align-items:center;background:var(--webcimes-modals-background);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--webcimes-modals-z-index)}.webcimes-modal{--modal-color:inherit;--modal-background:#fff;--modal-border-color:#ddd;--modal-box-shadow:1px 1px 3px 0px #444;--modal-header-padding:1.25rem 2.5rem;--modal-body-padding:1.25rem 2.5rem;--modal-footer-padding:1.25rem 2.5rem;--modal-title-font-size:1.5rem;--modal-title-font-weight:600;--modal-button-cancel-background:#e5e5e5;--modal-button-cancel-background-hover:#d0d0d0;--modal-button-cancel-color:#333;--modal-button-cancel-color-hover:#000;--modal-button-confirm-background:#1e88e5;--modal-button-confirm-background-hover:#1565c0;--modal-button-confirm-color:#fff;--modal-button-confirm-color-hover:#fff;background:var(--modal-background);border-radius:.25rem;-webkit-box-shadow:var(--modal-box-shadow);-moz-box-shadow:var(--modal-box-shadow);-o-box-shadow:var(--modal-box-shadow);box-shadow:var(--modal-box-shadow);color:var(--modal-color);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;overflow:hidden;position:absolute}.webcimes-modal__button{background:none;border:none;font-family:inherit;font-size:inherit;font-weight:inherit}.webcimes-modal__header{border-bottom:1px solid var(--modal-border-color);flex:0 0 auto;padding:var(--modal-header-padding);position:relative}.webcimes-modal__header--is-movable{cursor:move;touch-action:none}.webcimes-modal__title{font-size:var(--modal-title-font-size);font-weight:var(--modal-title-font-weight);overflow:hidden;text-overflow:ellipsis}.webcimes-modal__close-button{align-items:center;aspect-ratio:.625;cursor:pointer;display:flex;height:1.25rem;justify-content:center;opacity:1;padding:0;position:absolute;right:1rem;top:1rem;-webkit-transition:opacity .6s ease 0s;-moz-transition:opacity .6s ease 0s;-o-transition:opacity .6s ease 0s;transition:opacity .6s ease 0s}.webcimes-modal__close-button:hover{opacity:.5}.webcimes-modal__close-button svg{fill:currentColor;height:100%;width:100%}.webcimes-modal__body{flex:1;overflow:auto;padding:var(--modal-body-padding)}.webcimes-modal__body--is-movable{cursor:move}.webcimes-modal__footer{border-top:1px solid var(--modal-border-color);flex:0 0 auto;padding:var(--modal-footer-padding)}.webcimes-modal__footer--is-movable{cursor:move;touch-action:none}.webcimes-modal__footer-buttons{display:flex;flex-direction:column;flex-wrap:wrap;gap:.625rem;justify-content:flex-end}.webcimes-modal__footer-button{border-radius:.188rem;cursor:pointer;flex:1;max-width:100%;overflow:hidden;padding:.625rem 1.875rem;text-overflow:ellipsis;-webkit-transition:color .6s ease 0s,background .6s ease 0s;-moz-transition:color .6s ease 0s,background .6s ease 0s;-o-transition:color .6s ease 0s,background .6s ease 0s;transition:color .6s ease 0s,background .6s ease 0s}@media (min-width:640px){.webcimes-modal__footer-buttons{flex-direction:row}.webcimes-modal__footer-button{flex:0 0 auto}}.webcimes-modal__footer-button--cancel{background:var(--modal-button-cancel-background);color:var(--modal-button-cancel-color)}.webcimes-modal__footer-button--cancel:hover{background:var(--modal-button-cancel-background-hover);color:var(--modal-button-cancel-color-hover)}.webcimes-modal__footer-button--confirm{background:var(--modal-button-confirm-background);color:var(--modal-button-confirm-color)}.webcimes-modal__footer-button--confirm:hover{background:var(--modal-button-confirm-background-hover);color:var(--modal-button-confirm-color-hover)}@-webkit-keyframes animFadeIn{0%{opacity:0}to{opacity:1}}@keyframes animFadeIn{0%{opacity:0}to{opacity:1}}.animFadeIn{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animFadeIn;animation-name:animFadeIn}@-webkit-keyframes animFadeOut{0%{opacity:1}to{opacity:0}}@keyframes animFadeOut{0%{opacity:1}to{opacity:0}}.animFadeOut{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animFadeOut;animation-name:animFadeOut}@-webkit-keyframes animDropDown{0%{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@keyframes animDropDown{0%{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}.animDropDown{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animDropDown;animation-name:animDropDown}@-webkit-keyframes animDropUp{0%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}}@keyframes animDropUp{0%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}}.animDropUp{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animDropUp;animation-name:animDropUp}@-webkit-keyframes animGrowShrink{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes animGrowShrink{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.animGrowShrink{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animGrowShrink;animation-name:animGrowShrink}
|
|
2
2
|
/*# sourceMappingURL=webcimes-modal.css.map*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css/webcimes-modal.css","mappings":"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","sources":["webpack://webcimes-modal/./src/css/webcimes-modal.css"],"sourcesContent":["/**\r\n * Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)\r\n * MIT License - https://choosealicense.com/licenses/mit/\r\n * Date: 2023-03-25\r\n */\r\n\r\n/*\r\n-----------------------\r\n WEBCIMES MODAL\r\n-----------------------\r\n*/\r\n\r\n.webcimes-modals,\r\n.webcimes-modals *,\r\n.webcimes-modals *::before,\r\n.webcimes-modals *::after {\r\n -webkit-box-sizing: border-box;\r\n -moz-box-sizing: border-box;\r\n box-sizing: border-box;\r\n}\r\n.webcimes-modals {\r\n --webcimes-modals-background: rgba(0, 0, 0, 0.8);\r\n --webcimes-modals-z-index: 5;\r\n\r\n position: fixed;\r\n background: var(--webcimes-modals-background);\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: var(--webcimes-modals-z-index);\r\n}\r\n.webcimes-modal {\r\n --modal-color: inherit;\r\n --modal-background: #fff;\r\n --modal-border-color: #ddd;\r\n --modal-box-shadow: 1px 1px 3px 0px #444;\r\n --modal-header-padding: 20px 40px;\r\n --modal-body-padding: 20px 40px;\r\n --modal-footer-padding: 20px 40px;\r\n --modal-title-font-size: 24px;\r\n --modal-title-font-weight: 600;\r\n --modal-button-cancel-background: rgba(102, 102, 102, 1);\r\n --modal-button-cancel-background-hover: rgba(102, 102, 102, 0.7);\r\n --modal-button-cancel-color: #fff;\r\n --modal-button-cancel-color-hover: #fff;\r\n --modal-button-confirm-background: rgba(0, 0, 0, 1);\r\n --modal-button-confirm-background-hover: rgba(0, 0, 0, 0.7);\r\n --modal-button-confirm-color: #fff;\r\n --modal-button-confirm-color-hover: #fff;\r\n\r\n position: absolute;\r\n border-radius: 5px;\r\n display: flex;\r\n flex-direction: column;\r\n max-width: 90vw;\r\n max-height: 90vh;\r\n overflow: hidden;\r\n color: var(--modal-color);\r\n background: var(--modal-background);\r\n -webkit-box-shadow: var(--modal-box-shadow);\r\n -moz-box-shadow: var(--modal-box-shadow);\r\n -o-box-shadow: var(--modal-box-shadow);\r\n box-shadow: var(--modal-box-shadow);\r\n}\r\n.webcimes-modal__button {\r\n font-family: inherit;\r\n font-size: inherit;\r\n font-weight: inherit;\r\n border: none;\r\n background: none;\r\n}\r\n.webcimes-modal__header {\r\n position: relative;\r\n flex: 0 0 auto;\r\n padding: var(--modal-header-padding);\r\n border-bottom: 1px solid var(--modal-border-color);\r\n}\r\n.webcimes-modal__header--is-movable {\r\n cursor: move;\r\n touch-action: none;\r\n}\r\n.webcimes-modal__title {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n font-weight: var(--modal-title-font-weight);\r\n font-size: var(--modal-title-font-size);\r\n}\r\n.webcimes-modal__close-button {\r\n position: absolute;\r\n height: 20px;\r\n width: 12.5px;\r\n right: 15px;\r\n top: 15px;\r\n cursor: pointer;\r\n opacity: 1;\r\n padding: 0;\r\n -webkit-transition: opacity 0.6s ease 0s;\r\n -moz-transition: opacity 0.6s ease 0s;\r\n -o-transition: opacity 0.6s ease 0s;\r\n transition: opacity 0.6s ease 0s;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.webcimes-modal__close-button:hover {\r\n opacity: 0.5;\r\n}\r\n.webcimes-modal__close-button svg {\r\n fill: currentColor;\r\n height: 100%;\r\n width: 100%;\r\n}\r\n.webcimes-modal__body {\r\n flex: 1;\r\n overflow: auto;\r\n padding: var(--modal-body-padding);\r\n}\r\n.webcimes-modal__body--is-movable {\r\n cursor: move;\r\n}\r\n.webcimes-modal__footer {\r\n flex: 0 0 auto;\r\n padding: var(--modal-footer-padding);\r\n border-top: 1px solid var(--modal-border-color);\r\n}\r\n.webcimes-modal__footer--is-movable {\r\n cursor: move;\r\n touch-action: none;\r\n}\r\n.webcimes-modal__footer-buttons {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n}\r\n.webcimes-modal__footer-button {\r\n max-width: 100%;\r\n flex: 0 0 auto;\r\n border-radius: 5px;\r\n padding: 10px 30px;\r\n margin: 5px;\r\n cursor: pointer;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n -webkit-transition:\r\n color 0.6s ease 0s,\r\n background 0.6s ease 0s;\r\n -moz-transition:\r\n color 0.6s ease 0s,\r\n background 0.6s ease 0s;\r\n -o-transition:\r\n color 0.6s ease 0s,\r\n background 0.6s ease 0s;\r\n transition:\r\n color 0.6s ease 0s,\r\n background 0.6s ease 0s;\r\n}\r\n.webcimes-modal__footer-button--cancel {\r\n background: var(--modal-button-cancel-background);\r\n color: var(--modal-button-cancel-color);\r\n}\r\n.webcimes-modal__footer-button--cancel:hover {\r\n background: var(--modal-button-cancel-background-hover);\r\n color: var(--modal-button-cancel-color-hover);\r\n}\r\n.webcimes-modal__footer-button--confirm {\r\n background: var(--modal-button-confirm-background);\r\n color: var(--modal-button-confirm-color);\r\n}\r\n.webcimes-modal__footer-button--confirm:hover {\r\n background: var(--modal-button-confirm-background-hover);\r\n color: var(--modal-button-confirm-color-hover);\r\n}\r\n\r\n/* ANIMATIONS */\r\n\r\n@-webkit-keyframes animFadeIn {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n@keyframes animFadeIn {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n.animFadeIn {\r\n -webkit-animation-duration: 0.5s;\r\n animation-duration: 0.5s;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n -webkit-animation-name: animFadeIn;\r\n animation-name: animFadeIn;\r\n}\r\n\r\n@-webkit-keyframes animFadeOut {\r\n 0% {\r\n opacity: 1;\r\n }\r\n 100% {\r\n opacity: 0;\r\n }\r\n}\r\n@keyframes animFadeOut {\r\n 0% {\r\n opacity: 1;\r\n }\r\n 100% {\r\n opacity: 0;\r\n }\r\n}\r\n.animFadeOut {\r\n -webkit-animation-duration: 0.5s;\r\n animation-duration: 0.5s;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n -webkit-animation-name: animFadeOut;\r\n animation-name: animFadeOut;\r\n}\r\n\r\n@-webkit-keyframes animDropDown {\r\n 0% {\r\n -webkit-transform: translateY(-20vh);\r\n -moz-transform: translateY(-20vh);\r\n -ms-transform: translateY(-20vh);\r\n -o-transform: translateY(-20vh);\r\n transform: translateY(-20vh);\r\n opacity: 0;\r\n }\r\n 100% {\r\n -webkit-transform: translateY(0);\r\n -moz-transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n -o-transform: translateY(0);\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n}\r\n\r\n@keyframes animDropDown {\r\n 0% {\r\n -webkit-transform: translateY(-20vh);\r\n -moz-transform: translateY(-20vh);\r\n -ms-transform: translateY(-20vh);\r\n -o-transform: translateY(-20vh);\r\n transform: translateY(-20vh);\r\n opacity: 0;\r\n }\r\n 100% {\r\n -webkit-transform: translateY(0);\r\n -moz-transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n -o-transform: translateY(0);\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n}\r\n.animDropDown {\r\n -webkit-animation-duration: 0.5s;\r\n animation-duration: 0.5s;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n -webkit-animation-name: animDropDown;\r\n animation-name: animDropDown;\r\n}\r\n\r\n@-webkit-keyframes animDropUp {\r\n 0% {\r\n -webkit-transform: translateY(0);\r\n -moz-transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n -o-transform: translateY(0);\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n 100% {\r\n -webkit-transform: translateY(-20vh);\r\n -moz-transform: translateY(-20vh);\r\n -ms-transform: translateY(-20vh);\r\n -o-transform: translateY(-20vh);\r\n transform: translateY(-20vh);\r\n opacity: 0;\r\n }\r\n}\r\n\r\n@keyframes animDropUp {\r\n 0% {\r\n -webkit-transform: translateY(0);\r\n -moz-transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n -o-transform: translateY(0);\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n 100% {\r\n -webkit-transform: translateY(-20vh);\r\n -moz-transform: translateY(-20vh);\r\n -ms-transform: translateY(-20vh);\r\n -o-transform: translateY(-20vh);\r\n transform: translateY(-20vh);\r\n opacity: 0;\r\n }\r\n}\r\n.animDropUp {\r\n -webkit-animation-duration: 0.5s;\r\n animation-duration: 0.5s;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n -webkit-animation-name: animDropUp;\r\n animation-name: animDropUp;\r\n}\r\n\r\n@-webkit-keyframes animGrowShrink {\r\n 0% {\r\n -webkit-transform: scale(1);\r\n -moz-transform: scale(1);\r\n -ms-transform: scale(1);\r\n -o-transform: scale(1);\r\n transform: scale(1);\r\n }\r\n 50% {\r\n -webkit-transform: scale(1.2);\r\n -moz-transform: scale(1.2);\r\n -ms-transform: scale(1.2);\r\n -o-transform: scale(1.2);\r\n transform: scale(1.2);\r\n }\r\n 100% {\r\n -webkit-transform: scale(1);\r\n -moz-transform: scale(1);\r\n -ms-transform: scale(1);\r\n -o-transform: scale(1);\r\n transform: scale(1);\r\n }\r\n}\r\n\r\n@keyframes animGrowShrink {\r\n 0% {\r\n -webkit-transform: scale(1);\r\n -moz-transform: scale(1);\r\n -ms-transform: scale(1);\r\n -o-transform: scale(1);\r\n transform: scale(1);\r\n }\r\n 50% {\r\n -webkit-transform: scale(1.1);\r\n -moz-transform: scale(1.1);\r\n -ms-transform: scale(1.1);\r\n -o-transform: scale(1.1);\r\n transform: scale(1.1);\r\n }\r\n 100% {\r\n -webkit-transform: scale(1);\r\n -moz-transform: scale(1);\r\n -ms-transform: scale(1);\r\n -o-transform: scale(1);\r\n transform: scale(1);\r\n }\r\n}\r\n.animGrowShrink {\r\n -webkit-animation-duration: 0.5s;\r\n animation-duration: 0.5s;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n -webkit-animation-name: animGrowShrink;\r\n animation-name: animGrowShrink;\r\n}\r\n"],"names":[],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"css/webcimes-modal.css","mappings":"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","sources":["webpack://webcimes-modal/./src/css/webcimes-modal.css"],"sourcesContent":["/**\r\n * Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)\r\n * MIT License - https://choosealicense.com/licenses/mit/\r\n * Date: 2023-03-25\r\n */\r\n\r\n/*\r\n-----------------------\r\n WEBCIMES MODAL\r\n-----------------------\r\n*/\r\n\r\n.webcimes-modals,\r\n.webcimes-modals *,\r\n.webcimes-modals *::before,\r\n.webcimes-modals *::after {\r\n -webkit-box-sizing: border-box;\r\n -moz-box-sizing: border-box;\r\n box-sizing: border-box;\r\n}\r\n.webcimes-modals {\r\n --webcimes-modals-background: rgba(0, 0, 0, 0.8);\r\n --webcimes-modals-z-index: 5;\r\n\r\n position: fixed;\r\n background: var(--webcimes-modals-background);\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: var(--webcimes-modals-z-index);\r\n}\r\n.webcimes-modal {\r\n --modal-color: inherit;\r\n --modal-background: #fff;\r\n --modal-border-color: #ddd;\r\n --modal-box-shadow: 1px 1px 3px 0px #444;\r\n --modal-header-padding: 1.25rem 2.5rem;\r\n --modal-body-padding: 1.25rem 2.5rem;\r\n --modal-footer-padding: 1.25rem 2.5rem;\r\n --modal-title-font-size: 1.5rem;\r\n --modal-title-font-weight: 600;\r\n --modal-button-cancel-background: #e5e5e5;\r\n --modal-button-cancel-background-hover: #d0d0d0;\r\n --modal-button-cancel-color: #333;\r\n --modal-button-cancel-color-hover: #000;\r\n --modal-button-confirm-background: #1e88e5;\r\n --modal-button-confirm-background-hover: #1565c0;\r\n --modal-button-confirm-color: #fff;\r\n --modal-button-confirm-color-hover: #fff;\r\n\r\n position: absolute;\r\n border-radius: 0.25rem;\r\n display: flex;\r\n flex-direction: column;\r\n max-width: 90vw;\r\n max-height: 90vh;\r\n overflow: hidden;\r\n color: var(--modal-color);\r\n background: var(--modal-background);\r\n -webkit-box-shadow: var(--modal-box-shadow);\r\n -moz-box-shadow: var(--modal-box-shadow);\r\n -o-box-shadow: var(--modal-box-shadow);\r\n box-shadow: var(--modal-box-shadow);\r\n}\r\n.webcimes-modal__button {\r\n font-family: inherit;\r\n font-size: inherit;\r\n font-weight: inherit;\r\n border: none;\r\n background: none;\r\n}\r\n.webcimes-modal__header {\r\n position: relative;\r\n flex: 0 0 auto;\r\n padding: var(--modal-header-padding);\r\n border-bottom: 1px solid var(--modal-border-color);\r\n}\r\n.webcimes-modal__header--is-movable {\r\n cursor: move;\r\n touch-action: none;\r\n}\r\n.webcimes-modal__title {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n font-weight: var(--modal-title-font-weight);\r\n font-size: var(--modal-title-font-size);\r\n}\r\n.webcimes-modal__close-button {\r\n position: absolute;\r\n height: 1.25rem;\r\n aspect-ratio: 0.625;\r\n right: 1rem;\r\n top: 1rem;\r\n cursor: pointer;\r\n opacity: 1;\r\n padding: 0;\r\n -webkit-transition: opacity 0.6s ease 0s;\r\n -moz-transition: opacity 0.6s ease 0s;\r\n -o-transition: opacity 0.6s ease 0s;\r\n transition: opacity 0.6s ease 0s;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.webcimes-modal__close-button:hover {\r\n opacity: 0.5;\r\n}\r\n.webcimes-modal__close-button svg {\r\n fill: currentColor;\r\n height: 100%;\r\n width: 100%;\r\n}\r\n.webcimes-modal__body {\r\n flex: 1;\r\n overflow: auto;\r\n padding: var(--modal-body-padding);\r\n}\r\n.webcimes-modal__body--is-movable {\r\n cursor: move;\r\n}\r\n.webcimes-modal__footer {\r\n flex: 0 0 auto;\r\n padding: var(--modal-footer-padding);\r\n border-top: 1px solid var(--modal-border-color);\r\n}\r\n.webcimes-modal__footer--is-movable {\r\n cursor: move;\r\n touch-action: none;\r\n}\r\n.webcimes-modal__footer-buttons {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n flex-wrap: wrap;\r\n gap: 0.625rem;\r\n}\r\n.webcimes-modal__footer-button {\r\n max-width: 100%;\r\n flex: 1;\r\n border-radius: 0.188rem;\r\n padding: 0.625rem 1.875rem;\r\n cursor: pointer;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n -webkit-transition:\r\n color 0.6s ease 0s,\r\n background 0.6s ease 0s;\r\n -moz-transition:\r\n color 0.6s ease 0s,\r\n background 0.6s ease 0s;\r\n -o-transition:\r\n color 0.6s ease 0s,\r\n background 0.6s ease 0s;\r\n transition:\r\n color 0.6s ease 0s,\r\n background 0.6s ease 0s;\r\n}\r\n@media (min-width: 640px) {\r\n .webcimes-modal__footer-buttons {\r\n flex-direction: row;\r\n }\r\n .webcimes-modal__footer-button {\r\n flex: 0 0 auto;\r\n }\r\n}\r\n.webcimes-modal__footer-button--cancel {\r\n background: var(--modal-button-cancel-background);\r\n color: var(--modal-button-cancel-color);\r\n}\r\n.webcimes-modal__footer-button--cancel:hover {\r\n background: var(--modal-button-cancel-background-hover);\r\n color: var(--modal-button-cancel-color-hover);\r\n}\r\n.webcimes-modal__footer-button--confirm {\r\n background: var(--modal-button-confirm-background);\r\n color: var(--modal-button-confirm-color);\r\n}\r\n.webcimes-modal__footer-button--confirm:hover {\r\n background: var(--modal-button-confirm-background-hover);\r\n color: var(--modal-button-confirm-color-hover);\r\n}\r\n\r\n/* ANIMATIONS */\r\n\r\n@-webkit-keyframes animFadeIn {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n@keyframes animFadeIn {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n.animFadeIn {\r\n -webkit-animation-duration: 0.5s;\r\n animation-duration: 0.5s;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n -webkit-animation-name: animFadeIn;\r\n animation-name: animFadeIn;\r\n}\r\n\r\n@-webkit-keyframes animFadeOut {\r\n 0% {\r\n opacity: 1;\r\n }\r\n 100% {\r\n opacity: 0;\r\n }\r\n}\r\n@keyframes animFadeOut {\r\n 0% {\r\n opacity: 1;\r\n }\r\n 100% {\r\n opacity: 0;\r\n }\r\n}\r\n.animFadeOut {\r\n -webkit-animation-duration: 0.5s;\r\n animation-duration: 0.5s;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n -webkit-animation-name: animFadeOut;\r\n animation-name: animFadeOut;\r\n}\r\n\r\n@-webkit-keyframes animDropDown {\r\n 0% {\r\n -webkit-transform: translateY(-20vh);\r\n -moz-transform: translateY(-20vh);\r\n -ms-transform: translateY(-20vh);\r\n -o-transform: translateY(-20vh);\r\n transform: translateY(-20vh);\r\n opacity: 0;\r\n }\r\n 100% {\r\n -webkit-transform: translateY(0);\r\n -moz-transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n -o-transform: translateY(0);\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n}\r\n\r\n@keyframes animDropDown {\r\n 0% {\r\n -webkit-transform: translateY(-20vh);\r\n -moz-transform: translateY(-20vh);\r\n -ms-transform: translateY(-20vh);\r\n -o-transform: translateY(-20vh);\r\n transform: translateY(-20vh);\r\n opacity: 0;\r\n }\r\n 100% {\r\n -webkit-transform: translateY(0);\r\n -moz-transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n -o-transform: translateY(0);\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n}\r\n.animDropDown {\r\n -webkit-animation-duration: 0.5s;\r\n animation-duration: 0.5s;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n -webkit-animation-name: animDropDown;\r\n animation-name: animDropDown;\r\n}\r\n\r\n@-webkit-keyframes animDropUp {\r\n 0% {\r\n -webkit-transform: translateY(0);\r\n -moz-transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n -o-transform: translateY(0);\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n 100% {\r\n -webkit-transform: translateY(-20vh);\r\n -moz-transform: translateY(-20vh);\r\n -ms-transform: translateY(-20vh);\r\n -o-transform: translateY(-20vh);\r\n transform: translateY(-20vh);\r\n opacity: 0;\r\n }\r\n}\r\n\r\n@keyframes animDropUp {\r\n 0% {\r\n -webkit-transform: translateY(0);\r\n -moz-transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n -o-transform: translateY(0);\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n 100% {\r\n -webkit-transform: translateY(-20vh);\r\n -moz-transform: translateY(-20vh);\r\n -ms-transform: translateY(-20vh);\r\n -o-transform: translateY(-20vh);\r\n transform: translateY(-20vh);\r\n opacity: 0;\r\n }\r\n}\r\n.animDropUp {\r\n -webkit-animation-duration: 0.5s;\r\n animation-duration: 0.5s;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n -webkit-animation-name: animDropUp;\r\n animation-name: animDropUp;\r\n}\r\n\r\n@-webkit-keyframes animGrowShrink {\r\n 0% {\r\n -webkit-transform: scale(1);\r\n -moz-transform: scale(1);\r\n -ms-transform: scale(1);\r\n -o-transform: scale(1);\r\n transform: scale(1);\r\n }\r\n 50% {\r\n -webkit-transform: scale(1.2);\r\n -moz-transform: scale(1.2);\r\n -ms-transform: scale(1.2);\r\n -o-transform: scale(1.2);\r\n transform: scale(1.2);\r\n }\r\n 100% {\r\n -webkit-transform: scale(1);\r\n -moz-transform: scale(1);\r\n -ms-transform: scale(1);\r\n -o-transform: scale(1);\r\n transform: scale(1);\r\n }\r\n}\r\n\r\n@keyframes animGrowShrink {\r\n 0% {\r\n -webkit-transform: scale(1);\r\n -moz-transform: scale(1);\r\n -ms-transform: scale(1);\r\n -o-transform: scale(1);\r\n transform: scale(1);\r\n }\r\n 50% {\r\n -webkit-transform: scale(1.1);\r\n -moz-transform: scale(1.1);\r\n -ms-transform: scale(1.1);\r\n -o-transform: scale(1.1);\r\n transform: scale(1.1);\r\n }\r\n 100% {\r\n -webkit-transform: scale(1);\r\n -moz-transform: scale(1);\r\n -ms-transform: scale(1);\r\n -o-transform: scale(1);\r\n transform: scale(1);\r\n }\r\n}\r\n.animGrowShrink {\r\n -webkit-animation-duration: 0.5s;\r\n animation-duration: 0.5s;\r\n -webkit-animation-fill-mode: both;\r\n animation-fill-mode: both;\r\n -webkit-animation-name: animGrowShrink;\r\n animation-name: animGrowShrink;\r\n}\r\n"],"names":[],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -38,22 +38,22 @@
|
|
|
38
38
|
--modal-background: #fff;
|
|
39
39
|
--modal-border-color: #ddd;
|
|
40
40
|
--modal-box-shadow: 1px 1px 3px 0px #444;
|
|
41
|
-
--modal-header-padding:
|
|
42
|
-
--modal-body-padding:
|
|
43
|
-
--modal-footer-padding:
|
|
44
|
-
--modal-title-font-size:
|
|
41
|
+
--modal-header-padding: 1.25rem 2.5rem;
|
|
42
|
+
--modal-body-padding: 1.25rem 2.5rem;
|
|
43
|
+
--modal-footer-padding: 1.25rem 2.5rem;
|
|
44
|
+
--modal-title-font-size: 1.5rem;
|
|
45
45
|
--modal-title-font-weight: 600;
|
|
46
|
-
--modal-button-cancel-background:
|
|
47
|
-
--modal-button-cancel-background-hover:
|
|
48
|
-
--modal-button-cancel-color: #
|
|
49
|
-
--modal-button-cancel-color-hover: #
|
|
50
|
-
--modal-button-confirm-background:
|
|
51
|
-
--modal-button-confirm-background-hover:
|
|
46
|
+
--modal-button-cancel-background: #e5e5e5;
|
|
47
|
+
--modal-button-cancel-background-hover: #d0d0d0;
|
|
48
|
+
--modal-button-cancel-color: #333;
|
|
49
|
+
--modal-button-cancel-color-hover: #000;
|
|
50
|
+
--modal-button-confirm-background: #1e88e5;
|
|
51
|
+
--modal-button-confirm-background-hover: #1565c0;
|
|
52
52
|
--modal-button-confirm-color: #fff;
|
|
53
53
|
--modal-button-confirm-color-hover: #fff;
|
|
54
54
|
|
|
55
55
|
position: absolute;
|
|
56
|
-
border-radius:
|
|
56
|
+
border-radius: 0.25rem;
|
|
57
57
|
display: flex;
|
|
58
58
|
flex-direction: column;
|
|
59
59
|
max-width: 90vw;
|
|
@@ -91,10 +91,10 @@
|
|
|
91
91
|
}
|
|
92
92
|
.webcimes-modal__close-button {
|
|
93
93
|
position: absolute;
|
|
94
|
-
height:
|
|
95
|
-
|
|
96
|
-
right:
|
|
97
|
-
top:
|
|
94
|
+
height: 1.25rem;
|
|
95
|
+
aspect-ratio: 0.625;
|
|
96
|
+
right: 1rem;
|
|
97
|
+
top: 1rem;
|
|
98
98
|
cursor: pointer;
|
|
99
99
|
opacity: 1;
|
|
100
100
|
padding: 0;
|
|
@@ -133,15 +133,16 @@
|
|
|
133
133
|
}
|
|
134
134
|
.webcimes-modal__footer-buttons {
|
|
135
135
|
display: flex;
|
|
136
|
-
|
|
136
|
+
flex-direction: column;
|
|
137
|
+
justify-content: flex-end;
|
|
137
138
|
flex-wrap: wrap;
|
|
139
|
+
gap: 0.625rem;
|
|
138
140
|
}
|
|
139
141
|
.webcimes-modal__footer-button {
|
|
140
142
|
max-width: 100%;
|
|
141
|
-
flex:
|
|
142
|
-
border-radius:
|
|
143
|
-
padding:
|
|
144
|
-
margin: 5px;
|
|
143
|
+
flex: 1;
|
|
144
|
+
border-radius: 0.188rem;
|
|
145
|
+
padding: 0.625rem 1.875rem;
|
|
145
146
|
cursor: pointer;
|
|
146
147
|
text-overflow: ellipsis;
|
|
147
148
|
overflow: hidden;
|
|
@@ -158,6 +159,14 @@
|
|
|
158
159
|
color 0.6s ease 0s,
|
|
159
160
|
background 0.6s ease 0s;
|
|
160
161
|
}
|
|
162
|
+
@media (min-width: 640px) {
|
|
163
|
+
.webcimes-modal__footer-buttons {
|
|
164
|
+
flex-direction: row;
|
|
165
|
+
}
|
|
166
|
+
.webcimes-modal__footer-button {
|
|
167
|
+
flex: 0 0 auto;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
161
170
|
.webcimes-modal__footer-button--cancel {
|
|
162
171
|
background: var(--modal-button-cancel-background);
|
|
163
172
|
color: var(--modal-button-cancel-color);
|
package/test/script.js
CHANGED
|
@@ -37,7 +37,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
|
37
37
|
headerHtml: () => {
|
|
38
38
|
const header = document.createElement('div');
|
|
39
39
|
header.innerHTML =
|
|
40
|
-
'<h2>Custom Header</h2><p style="font-size:
|
|
40
|
+
'<h2>Custom Header</h2><p style="font-size: 0.75rem;">With subtitle</p>';
|
|
41
41
|
return header;
|
|
42
42
|
},
|
|
43
43
|
bodyHtml: 'Body with custom header and footer',
|
|
@@ -45,7 +45,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
|
45
45
|
const footer = document.createElement('div');
|
|
46
46
|
footer.style.textAlign = 'center';
|
|
47
47
|
footer.innerHTML =
|
|
48
|
-
'<button class="webcimes-modal__close" style="padding:
|
|
48
|
+
'<button class="webcimes-modal__close" style="padding: 0.625rem 1.25rem;">Close Me</button>';
|
|
49
49
|
return footer;
|
|
50
50
|
},
|
|
51
51
|
showCloseButton: true, // Close button still appears
|