You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2022/11/29 14:33:18 UTC

[myfaces-tobago] branch tobago-5.x updated (67811f7527 -> c22d914a65)

This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a change to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


    from 67811f7527 doc: versions (#3466)
     new e9a82860af fix: transition overlay scrollbar
     new c22d914a65 build(theme): rebuild after fixing overlay scrollbar

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 tobago-theme/src/main/scss/_tobago.scss            | 46 ++++++++--------------
 .../src/main/css/tobago.css                        | 24 ++++-------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../src/main/css/tobago.css                        | 24 ++++-------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../src/main/css/tobago.css                        | 24 ++++-------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../tobago-theme-speyside/src/main/css/tobago.css  | 24 ++++-------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../tobago-theme-standard/src/main/css/tobago.css  | 24 ++++-------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../tobago-theme-standard/src/main/js/tobago.js    |  4 +-
 .../src/main/js/tobago.js.map                      |  2 +-
 .../src/main/ts/tobago-behavior.ts                 |  5 ++-
 .../src/main/ts/tobago-file.ts                     |  6 ++-
 .../src/main/ts/tobago-overlay-type.ts             |  6 ++-
 .../src/main/ts/tobago-overlay.ts                  | 39 ++++++++++++++++--
 .../src/main/ts/tobago-page.ts                     |  6 ++-
 28 files changed, 122 insertions(+), 142 deletions(-)
 copy tobago-example/tobago-example-demo/src/main/webapp/content/140-partial/partial.css => tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay-type.ts (90%)


[myfaces-tobago] 02/02: build(theme): rebuild after fixing overlay scrollbar

Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git

commit c22d914a65a59767db0cbb6d486c4996dc96c5b9
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Tue Nov 29 15:00:05 2022 +0100

    build(theme): rebuild after fixing overlay scrollbar
---
 .../src/main/css/tobago.css                        | 24 +++++++---------------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../src/main/css/tobago.css                        | 24 +++++++---------------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../src/main/css/tobago.css                        | 24 +++++++---------------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../tobago-theme-speyside/src/main/css/tobago.css  | 24 +++++++---------------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../tobago-theme-standard/src/main/css/tobago.css  | 24 +++++++---------------
 .../src/main/css/tobago.css.map                    |  2 +-
 .../src/main/css/tobago.min.css                    |  2 +-
 .../src/main/css/tobago.min.css.map                |  2 +-
 .../tobago-theme-standard/src/main/js/tobago.js    |  4 ++--
 .../src/main/js/tobago.js.map                      |  2 +-
 22 files changed, 53 insertions(+), 103 deletions(-)

diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
index 72d362688e..71458fa1c5 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css
@@ -11478,26 +11478,16 @@ span.tobago-out:empty:before {
   color: #ffffff;
 }
 
-/* overlay ----------------------------------------------------------- */
 tobago-overlay {
-  display: table;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 100%;
-  /* TODO: better z-index strategy */
-  z-index: 500; /* less than the bootstrap navbar */
-  opacity: 0.8;
 }
-tobago-overlay > div {
-  background-color: rgba(136, 136, 136, 0.2666666667);
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-  width: 100%;
-  /* TODO: better z-index strategy */
-  z-index: 500; /* less than the bootstrap navbar */
+tobago-overlay.modal-backdrop.show {
+  --bs-backdrop-zindex: 1019;
+  --bs-backdrop-bg: rgba(160, 160, 160, 0.5);
+  opacity: 1;
 }
 
 /* page ----------------------------------------------------------- */
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map
index 947d3c3628..7a478f4dc8 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.s [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.s [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css
index 2f33f0ce0a..37cd5e9662 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#ff00be;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000000;--bs-white:#ffffff;--bs-gray:#777777;--bs-gray-dark:#323232;--bs-gray-100:#f8f9fa;--bs-gray-200:#d0d0d0;--bs-gray-300:#dee2e6;--bs-gray-400:#a0a0a0;--bs-gray-500:#adb5bd;--bs-gray-600:#777777;--bs-gray-700:#495057;--bs-gray-800:#323232;--bs-gray-900:#212529;--bs [...]
+@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#ff00be;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000000;--bs-white:#ffffff;--bs-gray:#777777;--bs-gray-dark:#323232;--bs-gray-100:#f8f9fa;--bs-gray-200:#d0d0d0;--bs-gray-300:#dee2e6;--bs-gray-400:#a0a0a0;--bs-gray-500:#adb5bd;--bs-gray-600:#777777;--bs-gray-700:#495057;--bs-gray-800:#323232;--bs-gray-900:#212529;--bs [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map
index 6ca45491aa..bf087b8e40 100644
--- a/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-charlotteville/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-charlotteville/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,QACZ,WAAY,QACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9 [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-charlotteville/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,QACZ,WAAY,QACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9 [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
index e82621aae6..a71184e669 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css
@@ -11505,26 +11505,16 @@ span.tobago-out:empty:before {
   color: #fff;
 }
 
-/* overlay ----------------------------------------------------------- */
 tobago-overlay {
-  display: table;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 100%;
-  /* TODO: better z-index strategy */
-  z-index: 500; /* less than the bootstrap navbar */
-  opacity: 0.8;
 }
-tobago-overlay > div {
-  background-color: rgba(136, 136, 136, 0.2666666667);
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-  width: 100%;
-  /* TODO: better z-index strategy */
-  z-index: 500; /* less than the bootstrap navbar */
+tobago-overlay.modal-backdrop.show {
+  --bs-backdrop-zindex: 1019;
+  --bs-backdrop-bg: rgba(160, 160, 160, 0.5);
+  opacity: 1;
 }
 
 /* page ----------------------------------------------------------- */
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map
index edadb81f5c..12b3ad4f93 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.s [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.s [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css
index 943a41952f..26f8b1a8f3 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";@font-face{font-family:Amaranth;font-style:normal;font-weight:400;src:url("../fonts/Amaranth-Regular.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:normal;font-weight:700;src:url("../fonts/Amaranth-Bold.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:italic;src:url("../fonts/Amaranth-Italic.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:italic;font-weight:700;src:url("../fonts/Amaranth-BoldItalic.otf") format( [...]
+@charset "UTF-8";@font-face{font-family:Amaranth;font-style:normal;font-weight:400;src:url("../fonts/Amaranth-Regular.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:normal;font-weight:700;src:url("../fonts/Amaranth-Bold.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:italic;src:url("../fonts/Amaranth-Italic.otf") format("opentype")}@font-face{font-family:Amaranth;font-style:italic;font-weight:700;src:url("../fonts/Amaranth-BoldItalic.otf") format( [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map
index 4094fddb14..612a3da763 100644
--- a/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-roxborough/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-roxborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAiCA,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,qCAAqC,mBAE5C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,kCAAkC,mBAEzC,WACE,YAAa,SACb,WAAY,OACZ,IAAK,oCAAoC,mBAE3C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,wCAAwC,mBAE/C,mBACE,YAAa,QAAQ,CAAE,KAAK,CAAE,MAShC,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,QACZ,WAAY,KACZ,UAAW,QACX,eAAgB,QAC [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-roxborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAiCA,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,qCAAqC,mBAE5C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,kCAAkC,mBAEzC,WACE,YAAa,SACb,WAAY,OACZ,IAAK,oCAAoC,mBAE3C,WACE,YAAa,SACb,WAAY,OACZ,YAAa,IACb,IAAK,wCAAwC,mBAE/C,mBACE,YAAa,QAAQ,CAAE,KAAK,CAAE,MAShC,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,QACZ,WAAY,KACZ,UAAW,QACX,eAAgB,QAC [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
index e68008f846..9f4a0a99df 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css
@@ -11479,26 +11479,16 @@ span.tobago-out:empty:before {
   color: #fff;
 }
 
-/* overlay ----------------------------------------------------------- */
 tobago-overlay {
-  display: table;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 100%;
-  /* TODO: better z-index strategy */
-  z-index: 500; /* less than the bootstrap navbar */
-  opacity: 0.8;
 }
-tobago-overlay > div {
-  background-color: rgba(136, 136, 136, 0.2666666667);
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-  width: 100%;
-  /* TODO: better z-index strategy */
-  z-index: 500; /* less than the bootstrap navbar */
+tobago-overlay.modal-backdrop.show {
+  --bs-backdrop-zindex: 1019;
+  --bs-backdrop-bg: rgba(206, 212, 218, 0.5);
+  opacity: 1;
 }
 
 /* page ----------------------------------------------------------- */
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map
index 83b2f81d93..37494696a2 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_ [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_ [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css
index 4eca156f6f..3f2bd013c0 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-prima [...]
+@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-prima [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map
index b13e819823..165209c996 100644
--- a/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-scarborough/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-scarborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,i [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-scarborough/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,i [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
index 6f671f70f9..4a07c5da15 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css
@@ -11204,26 +11204,16 @@ span.tobago-out:empty:before {
   color: #fff;
 }
 
-/* overlay ----------------------------------------------------------- */
 tobago-overlay {
-  display: table;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 100%;
-  /* TODO: better z-index strategy */
-  z-index: 500; /* less than the bootstrap navbar */
-  opacity: 0.8;
 }
-tobago-overlay > div {
-  background-color: rgba(136, 136, 136, 0.2666666667);
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-  width: 100%;
-  /* TODO: better z-index strategy */
-  z-index: 500; /* less than the bootstrap navbar */
+tobago-overlay.modal-backdrop.show {
+  --bs-backdrop-zindex: 1019;
+  --bs-backdrop-bg: rgba(206, 212, 218, 0.5);
+  opacity: 1;
 }
 
 /* page ----------------------------------------------------------- */
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map
index a8204225e1..04c470149a 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_modules/bootstrap/scss/mixins/_lists.scss",".. [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../scss/_custom.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_modules/bootstrap/scss/mixins/_lists.scss",".. [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css
index ddde783d5b..789bb58e16 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:rgb(58, 37, 100);--bs-pink:#d63384;--bs-red:rgb(211, 0, 64);--bs-orange:#d90;--bs-yellow:#ffc107;--bs-green:rgb(29, 163, 50);--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:rgb(120, 140, 148);--bs-gray-dark:#323232;--bs-gray-100:#f7f7f7;--bs-gray-200:#e3e4e5;--bs-gray-300:#d7d7d7;--bs-gray-400:#ced4da;--bs-gray-500:#acacac;--bs-gray-600:rgb(120, 140, 148);--bs-gray-700:#55595c;--bs-gray [...]
+@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:rgb(58, 37, 100);--bs-pink:#d63384;--bs-red:rgb(211, 0, 64);--bs-orange:#d90;--bs-yellow:#ffc107;--bs-green:rgb(29, 163, 50);--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:rgb(120, 140, 148);--bs-gray-dark:#323232;--bs-gray-100:#f7f7f7;--bs-gray-200:#e3e4e5;--bs-gray-300:#d7d7d7;--bs-gray-400:#ced4da;--bs-gray-500:#acacac;--bs-gray-600:rgb(120, 140, 148);--bs-gray-700:#55595c;--bs-gray [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map
index 7a7877e8fe..23b5820532 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-speyside/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-speyside/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,iBACb,UAAW,QACX,SAAU,gBACV,YAAa,KACb,YAAa,QACb,WAAY,iBACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,WAAY,KACZ,UAAW,mBACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,mBACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,gBACd,eAAgB,QAChB,aAAc,iBACd,UAAW,QACX,aAAc,QACd,YAAa,gBACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,EAAE,CAAE,GAC1B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IA [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-speyside/src/main/css/tobago.css"],"names":[],"mappings":"iBAuCA,MACE,UAAW,QACX,YAAa,QACb,YAAa,iBACb,UAAW,QACX,SAAU,gBACV,YAAa,KACb,YAAa,QACb,WAAY,iBACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,WAAY,KACZ,UAAW,mBACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,mBACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,gBACd,eAAgB,QAChB,aAAc,iBACd,UAAW,QACX,aAAc,QACd,YAAa,gBACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,EAAE,CAAE,GAC1B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IA [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
index b6214499e4..c90a0be6c2 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css
@@ -11462,26 +11462,16 @@ span.tobago-out:empty:before {
   color: #fff;
 }
 
-/* overlay ----------------------------------------------------------- */
 tobago-overlay {
-  display: table;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 100%;
-  /* TODO: better z-index strategy */
-  z-index: 500; /* less than the bootstrap navbar */
-  opacity: 0.8;
 }
-tobago-overlay > div {
-  background-color: rgba(136, 136, 136, 0.2666666667);
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-  width: 100%;
-  /* TODO: better z-index strategy */
-  z-index: 500; /* less than the bootstrap navbar */
+tobago-overlay.modal-backdrop.show {
+  --bs-backdrop-zindex: 1019;
+  --bs-backdrop-bg: rgba(206, 212, 218, 0.5);
+  opacity: 1;
 }
 
 /* page ----------------------------------------------------------- */
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map
index f32d759543..10ddf6b36b 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_ [...]
\ No newline at end of file
+{"version":3,"sources":["tobago.css","../scss/tobago-theme.scss","../../../../node_modules/bootstrap/scss/mixins/_banner.scss","../../../../node_modules/bootstrap/scss/_root.scss","../../../../node_modules/bootstrap/scss/vendor/_rfs.scss","../../../../node_modules/bootstrap/scss/_reboot.scss","../../../../node_modules/bootstrap/scss/_variables.scss","../../../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../../../node_modules/bootstrap/scss/_type.scss","../../../../node_ [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css
index 6e8018725f..58298127f0 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-prima [...]
+@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-prima [...]
 /*# sourceMappingURL=tobago.min.css.map */
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map
index c4249a3134..c47376a95c 100644
--- a/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map
+++ b/tobago-theme/tobago-theme-standard/src/main/css/tobago.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["tobago-theme-standard/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,iBAA [...]
\ No newline at end of file
+{"version":3,"sources":["tobago-theme-standard/src/main/css/tobago.css"],"names":[],"mappings":"iBAuBA,MACE,UAAW,QACX,YAAa,QACb,YAAa,QACb,UAAW,QACX,SAAU,QACV,YAAa,QACb,YAAa,QACb,WAAY,QACZ,UAAW,QACX,UAAW,QACX,WAAY,KACZ,WAAY,KACZ,UAAW,QACX,eAAgB,QAChB,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,cAAe,QACf,aAAc,QACd,eAAgB,QAChB,aAAc,QACd,UAAW,QACX,aAAc,QACd,YAAa,QACb,WAAY,QACZ,UAAW,QACX,iBAAkB,EAAE,CAAE,GAAG,CAAE,IAC3B,mBAAoB,GAAG,CAAE,GAAG,CAAE,IAC9B,iBAA [...]
\ No newline at end of file
diff --git a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
index ee0b52b72c..d5d1c728b6 100644
--- a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
+++ b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
@@ -1,8 +1,8 @@
-!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";class e extends HTMLElement{constructor(){super(),this.CssClass={SHOW:"show",COLLAPSE:"collapse",COLLAPSING:"collapsing"},this.toggleButton.addEventListener("click",this.toggleCollapse.bind(this))}connectedCallback(){this.expanded="true"===this.toggleButton.ariaExpanded}toggleCollapse(e){window.clearTimeout(this.timeout),this.expanded?(this.expanded=!1,this.navbarContent.style.height=`${this.navbar [...]
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";class e extends HTMLElement{constructor(){super(),this.CssClass={SHOW:"show",COLLAPSE:"collapse",COLLAPSING:"collapsing"},this.toggleButton.addEventListener("click",this.toggleCollapse.bind(this))}connectedCallback(){this.expanded="true"===this.toggleButton.ariaExpanded}toggleCollapse(e){window.clearTimeout(this.timeout),this.expanded?(this.expanded=!1,this.navbarContent.style.height=`${this.navbar [...]
 /*!
     * Bootstrap v5.2.3 (https://getbootstrap.com/)
     * Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
     * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
     */
-const Me="transitionend",Re=e=>{let t=e.getAttribute("data-bs-target");if(!t||"#"===t){let s=e.getAttribute("href");if(!s||!s.includes("#")&&!s.startsWith("."))return null;s.includes("#")&&!s.startsWith("#")&&(s=`#${s.split("#")[1]}`),t=s&&"#"!==s?s.trim():null}return t},je=e=>{const t=Re(e);return t&&document.querySelector(t)?t:null},He=e=>{const t=Re(e);return t?document.querySelector(t):null},Pe=e=>{e.dispatchEvent(new Event(Me))},Be=e=>!(!e||"object"!=typeof e)&&(void 0!==e.jquery&&( [...]
+const Me="transitionend",Re=e=>{let t=e.getAttribute("data-bs-target");if(!t||"#"===t){let s=e.getAttribute("href");if(!s||!s.includes("#")&&!s.startsWith("."))return null;s.includes("#")&&!s.startsWith("#")&&(s=`#${s.split("#")[1]}`),t=s&&"#"!==s?s.trim():null}return t},je=e=>{const t=Re(e);return t&&document.querySelector(t)?t:null},He=e=>{const t=Re(e);return t?document.querySelector(t):null},Pe=e=>{e.dispatchEvent(new Event(Me))},Be=e=>!(!e||"object"!=typeof e)&&(void 0!==e.jquery&&( [...]
 //# sourceMappingURL=tobago.js.map
diff --git a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map
index 42584a1d8e..7685b3e20a 100644
--- a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map
+++ b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map
@@ -1 +1 @@
-{"version":3,"file":"tobago.js","sources":["../ts/tobago-bar.ts","../../../../node_modules/@popperjs/core/lib/enums.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getNodeName.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getWindow.js","../../../../node_modules/@popperjs/core/lib/dom-utils/instanceOf.js","../../../../node_modules/@popperjs/core/lib/modifiers/applyStyles.js","../../../../node_modules/@popperjs/core/lib/utils/getBasePlacement.js","../../../../node_m [...]
\ No newline at end of file
+{"version":3,"file":"tobago.js","sources":["../ts/tobago-bar.ts","../../../../node_modules/@popperjs/core/lib/enums.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getNodeName.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getWindow.js","../../../../node_modules/@popperjs/core/lib/dom-utils/instanceOf.js","../../../../node_modules/@popperjs/core/lib/modifiers/applyStyles.js","../../../../node_modules/@popperjs/core/lib/utils/getBasePlacement.js","../../../../node_m [...]
\ No newline at end of file


[myfaces-tobago] 01/02: fix: transition overlay scrollbar

Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git

commit e9a82860af920df038cbaa644e459bad43d66006
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon Nov 28 20:44:21 2022 +0100

    fix: transition overlay scrollbar
    
    * remove scrollbar if transition overlay is shown.
    * refactoring
    * other components use the Overlay.htmlText() method to create an overlay
    
    Issue: TOBAGO-2174
---
 tobago-theme/src/main/scss/_tobago.scss            | 46 ++++++++--------------
 .../src/main/ts/tobago-behavior.ts                 |  5 ++-
 .../src/main/ts/tobago-file.ts                     |  6 ++-
 .../src/main/ts/tobago-overlay-type.ts             | 22 +++++++++++
 .../src/main/ts/tobago-overlay.ts                  | 39 ++++++++++++++++--
 .../src/main/ts/tobago-page.ts                     |  6 ++-
 6 files changed, 87 insertions(+), 37 deletions(-)

diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index 939066b768..e75b2f42ea 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -32,15 +32,15 @@ $icon-sort: "\F127";
 $icon-sort-ascending: "\f57a";
 $icon-sort-descending: "\f574";
 $circles: (
-  1: "\f797",
-  2: "\f79d",
-  3: "\f7a3",
-  4: "\f7a9",
-  5: "\f7af",
-  6: "\f7b5",
-  7: "\f7bb",
-  8: "\f7c1",
-  9: "\f7c7"
+    1: "\f797",
+    2: "\f79d",
+    3: "\f7a3",
+    4: "\f7a9",
+    5: "\f7af",
+    6: "\f7b5",
+    7: "\f7bb",
+    8: "\f7c1",
+    9: "\f7c7"
 );
 
 /* non-bootstrap variables --------------------------------------- */
@@ -823,30 +823,16 @@ span.tobago-out:empty:before {
   // was in bs4: color: $table-dark-color;
 }
 
-/* overlay ----------------------------------------------------------- */
-
 tobago-overlay {
-  display: table;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 100%;
-  /* TODO: better z-index strategy */
-  z-index: 500; /* less than the bootstrap navbar */
-  //transition-delay: 1s;
-  //transition-duration: 250ms;
-  //transition-property: opacity;
-  opacity: 0.8;
 
-  > div {
-    background-color: #8884;
-    display: table-cell;
-    text-align: center;
-    vertical-align: middle;
-    width: 100%;
-    /* TODO: better z-index strategy */
-    z-index: 500; /* less than the bootstrap navbar */
+  &.modal-backdrop.show {
+    --#{$prefix}backdrop-zindex: #{$zindex-sticky - 1}; //less than the bootstrap navbar
+    --#{$prefix}backdrop-bg: rgba(#{red($gray-400)}, #{green($gray-400)}, #{blue($gray-400)}, #{$modal-backdrop-opacity});
+    opacity: 1;
   }
 }
 
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-behavior.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-behavior.ts
index 21a5fbf923..69c909d220 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-behavior.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-behavior.ts
@@ -19,6 +19,8 @@ import {Collapse} from "./tobago-popup";
 import {Page} from "./tobago-page";
 import {CollapseOperation} from "./tobago-collapsible-operation";
 import {BehaviorMode} from "./tobago-behavior-mode";
+import {Overlay} from "./tobago-overlay";
+import {OverlayType} from "./tobago-overlay-type";
 
 class Behavior extends HTMLElement {
 
@@ -78,7 +80,8 @@ class Behavior extends HTMLElement {
               } else {
                 id = partialElement.id;
               }
-              partialElement.insertAdjacentHTML("beforeend", `<tobago-overlay for='${id}'></tobago-overlay>`);
+              partialElement.insertAdjacentHTML("beforeend",
+                  Overlay.htmlText(id, OverlayType.wait, Page.page(this).waitOverlayDelayAjax));
             } else {
               console.warn("No element found by id='%s' for overlay!", partialId);
             }
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-file.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-file.ts
index 9154d24a1f..4f9dfeb682 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-file.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-file.ts
@@ -15,6 +15,9 @@
  * limitations under the License.
  */
 
+import {Overlay} from "./tobago-overlay";
+import {OverlayType} from "./tobago-overlay-type";
+
 export class File extends HTMLElement {
 
   constructor() {
@@ -67,8 +70,7 @@ export class File extends HTMLElement {
       if (dropZone) {
         if (dropZone.querySelector("tobago-overlay") == null) {
           console.info("DRAGOVER", event.dataTransfer.items);
-          dropZone.insertAdjacentHTML(
-            "beforeend", `<tobago-overlay for='${dropZone.id}' delay="0" type="drop-zone"></tobago-overlay>`);
+          dropZone.insertAdjacentHTML("beforeend", Overlay.htmlText(dropZone.id, OverlayType.dropZone, 0));
         }
       }
     }
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay-type.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay-type.ts
new file mode 100644
index 0000000000..50afbb7d26
--- /dev/null
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay-type.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export enum OverlayType {
+  dropZone = "drop-zone",
+  error = "error",
+  wait = "wait"
+}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay.ts
index 45b3861264..f3c6e5d540 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-overlay.ts
@@ -20,6 +20,7 @@
  */
 
 import {Page} from "./tobago-page";
+import {OverlayType} from "./tobago-overlay-type";
 
 // XXX issue: if a ajax call is scheduled on the same element, the animation arrow will stacking and not desapearing.
 // XXX issue: "error" is not implemented correctly
@@ -27,6 +28,14 @@ import {Page} from "./tobago-page";
 // XXX todo: check full page transitions
 
 export class Overlay extends HTMLElement {
+  private readonly CssClass = {
+    SHOW: "show",
+    POSITION_RELATIVE: "position-relative"
+  };
+
+  static htmlText(id: string, type: OverlayType, delay: number): string {
+    return `<tobago-overlay type='${type}' for='${id}' delay='${delay}' class='modal-backdrop fade'></tobago-overlay>`;
+  }
 
   constructor() {
     super();
@@ -40,11 +49,13 @@ export class Overlay extends HTMLElement {
     console.log("disconnected from the DOM");
     const forElement = document.getElementById(this.for);
     if (forElement) {
-      forElement.classList.remove("position-relative");
+      forElement.classList.remove(this.CssClass.POSITION_RELATIVE);
     }
+    this.showScrollbar();
   }
 
   render(): void {
+    this.classList.add(this.CssClass.SHOW);
     let icon;
     switch (this.type) {
       case "error":
@@ -60,14 +71,36 @@ export class Overlay extends HTMLElement {
         icon = "";
     }
 
-    this.insertAdjacentHTML("afterbegin", `<div>${icon}</div>`);
+    this.insertAdjacentHTML("afterbegin", icon);
 
     const forElement = document.getElementById(this.for);
     if (forElement) {
-      forElement.classList.add("position-relative");
+      forElement.classList.add(this.CssClass.POSITION_RELATIVE);
+      if (forElement.tagName === "TOBAGO-PAGE") {
+        this.hideScrollbar();
+      } else {
+        this.style.position = "absolute";
+        const boundingClientRect = forElement.getBoundingClientRect();
+        this.style.width = `${boundingClientRect.width}px`;
+        this.style.height = `${boundingClientRect.height}px`;
+      }
     }
   }
 
+  private hideScrollbar() {
+    document.body.style.overflow = "hidden";
+    document.body.style.paddingRight = `${this.scrollbarWidth}px`;
+  }
+
+  private showScrollbar() {
+    document.body.style.overflow = null;
+    document.body.style.paddingRight = null;
+  }
+
+  get scrollbarWidth(): number {
+    return window.innerWidth - document.documentElement.clientWidth;
+  }
+
   get for(): string {
     return this.getAttribute("for");
   }
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-page.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-page.ts
index 2d167530b5..d1857e6893 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-page.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-page.ts
@@ -15,6 +15,9 @@
  * limitations under the License.
  */
 
+import {Overlay} from "./tobago-overlay";
+import {OverlayType} from "./tobago-overlay-type";
+
 export class Page extends HTMLElement {
 
   submitActive = false;
@@ -111,7 +114,8 @@ export class Page extends HTMLElement {
   beforeSubmit(event: Event, decoupled = false): void {
     this.submitActive = true;
     if (!decoupled) {
-      this.body.insertAdjacentHTML("beforeend", `<tobago-overlay for='${this.id}'></tobago-overlay>`);
+      this.body.insertAdjacentHTML("beforeend",
+          Overlay.htmlText(this.id, OverlayType.wait, this.waitOverlayDelayFull));
     }
     console.debug(this.body.querySelector("tobago-overlay"));
   }