j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/attributes.asciidoc

@@ -0,0 +1,118 @@
+// ~/document_base_folder/000_includes
+//  Asciidoc attribute includes:                 attributes.asciidoc
+// -----------------------------------------------------------------------------
+
+// URLs - Internal references and/or sources on the Internet
+// -----------------------------------------------------------------------------
+tag::urls[]
+
+:url-bootstrap--home:                             https://getbootstrap.com/
+:url-bs-doc--components-modal:                    https://getbootstrap.com/docs/4.3/components/modal/
+
+:url-bootswatch--home:                            https://bootswatch.com/
+:url-bootswatch--api:                             https://bootswatch.com/help/#api
+
+:url-mdb--home:                                   https://mdbootstrap.com/
+:url-mdb--bs-modals:                              https://mdbootstrap.com/docs/jquery/modals/basic/
+:url-mdb--bs-modals-legacy:                       https://mdbootstrap.com/legacy/4.3.2/?page=javascript/modals
+
+:url-w3org--css-spec:                             https://www.w3.org/Style/CSS/specs.en.html
+:url-w3schools--css-tutorial:                     https://www.w3schools.com/css/default.asp
+
+:url-fontawesome--home:                           https://fontawesome.com/
+:url-fontawesome--icons:                          https://fontawesome.com/icons?d=gallery
+:url-fontawesome--get-started:                    https://fontawesome.com/get-started
+
+:url-mdi--home:                                   https://materialdesignicons.com/
+:url-mdi-icons--cheatsheet:                       https://cdn.materialdesignicons.com/3.3.92/
+
+:url-iconify--home:                               https://iconify.design/
+:url-iconify--icon-sets:                          https://iconify.design/icon-sets/
+:url-iconify--medical-icons:                      https://iconify.design/icon-sets/medical-icon/
+:url-iconify--brand-icons:                        https://iconify.design/icon-sets/logos/
+
+:url-jekyll-one--core-doc-color-scheme:           https://support.jekyll-one.com/user_guide/core/color_scheme
+
+:url-light-gallery--license:                      http://sachinchoolur.github.io/lightGallery/docs/license.html
+
+:url-material-design-icons--cheatsheet:           https://jekyll.one/pages/public/previewer/mdi_font/
+
+:url-asciidoctor-extensions--lab:                 https://github.com/asciidoctor/asciidoctor-extensions-lab
+:url-asciidoctor-extensions--use-extension:       https://github.com/asciidoctor/asciidoctor-extensions-lab#using-an-extension
+:url-asciidoctor-user-manual--extensions:         http://asciidoctor.org/docs/user-manual/#extensions
+
+:url-roundtrip--data-slider-picker:               /pages/public/learn/roundtrip/data_slider_picker
+:url-roundtrip--image_headers:                    /pages/public/learn/roundtrip/image_header
+:url-roundtrip--readme-first:                     /pages/public/learn/read_me_first/
+:url-roundtrip--present-images:                   /pages/public/learn/roundtrip/present_images/
+:url-roundtrip--present-videos:                   /pages/public/learn/roundtrip/present_videos/
+:url-roundtrip--cards:                            /pages/public/learn/roundtrip/cards/
+:url-roundtrip--typography:                       /pages/public/learn/roundtrip/typography/
+:url-roundtrip--asciidoc-extensions:              /pages/public/learn/roundtrip/asciidoc_extensions/
+:url-roundtrip--extended-modals:                  /pages/public/learn/roundtrip/modals/
+:url-roundtrip--icon-fonts:                       /pages/public/learn/roundtrip/mdi_icon_font/
+:url-roundtrip--responsive-tables:                /pages/public/learn/roundtrip/responsive_tables/
+:url-roundtrip--themes:                           /pages/public/learn/roundtrip/themes/
+:url-roundtrip--quicksearch:                      /pages/public/learn/roundtrip/quicksearch/
+
+:url-github-gist--home:                           https://gist.github.com/
+:url-asciidoc-extensions--gist-example:           https://gist.github.com/mojavelinux/5546622
+
+:url-previewer--theme:                            /pages/public/previewer/current_theme/
+
+:url-fa-icons--previewer:                         https://fontawesome.com/v5.15/icons?d=gallery&p=2
+:url-iconify-icons--previewer:                    https://icon-sets.iconify.design/
+
+:url-kickstarter--web-in-a-day:                   https://jekyll.one/pages/public/learn/kickstarter/web_in_a_day/meet_and_greet/
+
+end::urls[]
+
+
+// FOOTNOTES, global asciidoc attributes (variables)
+// -----------------------------------------------------------------------------
+tag::footnotes[]
+
+:fn-bootstrap-v5--responsive-text:                footnote:[https://getbootstrap.com/docs/5.0/content/typography/#responsive-font-sizes[Supported with Bootstrap V5 · Responsive font sizes, window="_blank"]]
+:fn-mdi-icons--home:                              footnote:[https://materialdesignicons.com/[MDI icons · Home, window="_blank"]]
+
+end::footnotes[]
+
+
+
+// Tags - Asciidoc attributes used internally
+// -----------------------------------------------------------------------------
+tag::tags[]
+end::tags[]
+
+
+// Data - Data elements for Asciidoctor extensions
+// -----------------------------------------------------------------------------
+tag::data[]
+
+:data-images-standalone:                          "assets/images/modules/gallery/old_times/image_02.jpg, GrandPa's 80th Birthday"
+:data-images-group:                               "assets/images/modules/gallery/old_times/image_03.jpg, GrandPa's annual journey, assets/images/modules/gallery/old_times/image_04.jpg, GrandPa's annual journey"
+
+:data-images--themes-menu:                        "assets/images/pages/roundtrip/500_themes/themes-menu-1280x800.jpg, Themes menu (Bootswatch)"
+
+:data-quicksearch-icon:                           "assets/images/pages/roundtrip/600_quicksearch/quicksearch_icon-800x200.jpg, Search button (magnifier) in the quick access area"
+:data-quicksearch-input:                          "assets/images/pages/roundtrip/600_quicksearch/quicksearch_input-800x200.jpg, Input bar for a QuickSearch"
+
+end::data[]
+
+
+// Images - Images from local include/images folder
+// -----------------------------------------------------------------------------
+tag::images[]
+end::images[]
+
+
+// PRODUCTS, local product information (e.g. release)
+// -----------------------------------------------------------------------------
+tag::products[]
+end::products[]
+
+
+// AUTHORS, local author information (e.g. article)
+// -----------------------------------------------------------------------------
+tag::authors[]
+end::authors[]

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/100_gistblock.asciidoc

@@ -0,0 +1,28 @@
+== Github Gist
+
+Code snippets may helpful to support your readers for existing code examples.
+An excellent place for code snippets is Gist at Github. To embed an existing
+gist into your documents, the Asciidoc Extention *Gist block* provides the
+block macro `gist::` to do so.
+
+The following gist snippet is taken from {asciidoc-extensions-gist-example}[this example, window="_blank"]:
+
+[source, prometheus, role="noclip"]
+----
+.Gist title
+gist::git_address[] <1>
+----
+<1> For `git_address`, {github-gist-home}[, window="_blank"] is prepended automatically
+
+.Example of a gist block
+[source, prometheus, role="noclip"]
+----
+.Guard setup to live preview AsciiDoc output
+gist::mojavelinux/5546622[]
+----
+
+[.result]
+====
+.Guard setup to live preview AsciiDoc output
+gist::mojavelinux/5546622[]
+====

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_info.asciidoc

@@ -0,0 +1,14 @@
+// === Bottom Info
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button"
+    class="btn btn-primary"
+    data-bs-toggle="modal"
+    data-bs-target="#frameModalBottomSuccessDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_left_warning.asciidoc

@@ -0,0 +1,11 @@
+// === Bottom Left Warning
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sideModalBLWarningDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_bottom_right_danger.asciidoc

@@ -0,0 +1,11 @@
+// === Bottom Right Danger
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sideModalBRDangerDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_central_success.asciidoc

@@ -0,0 +1,11 @@
+// === Central Success
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#centralModalSuccessDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_full_height_left_info.asciidoc

@@ -0,0 +1,11 @@
+// === Full Height Left Info
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fluidModalLeftInfoDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_full_height_right_success.asciidoc

@@ -0,0 +1,11 @@
+// === Full Height Right Success
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fluidModalRightSuccessDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_table_bs_modal_examples.asciidoc

@@ -0,0 +1,47 @@
+
+.Selected extended BS modal examples
+[cols="6a,3a,3a", options="header", width="100%", role="rtable"]
+|===
+|Postion |Class | Example
+
+|`top`
+|`info`
+|
+include::./410_top_info.asciidoc[]
+
+|`top-right`
+|`success`
+|
+include::./410_top_right_success.asciidoc[]
+
+|`top-left`
+|`info`
+|
+include::./410_top_left_info.asciidoc[]
+
+|`bottom`
+|`info`
+|
+include::./410_bottom_info.asciidoc[]
+
+|`bottom-right`
+|`danger`
+|
+include::./410_bottom_right_danger.asciidoc[]
+
+|`bottom-left`
+|`warning`
+|
+include::./410_bottom_left_warning.asciidoc[]
+
+|`full-height right`
+|`success`
+|
+include::./410_full_height_right_success.asciidoc[]
+
+|`full-height left`
+|`info`
+|
+include::./410_full_height_left_info.asciidoc[]
+
+|===

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_info.asciidoc

@@ -0,0 +1,11 @@
+// === Top Info
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#frameModalTopInfoDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_left_info.asciidoc

@@ -0,0 +1,11 @@
+// === Top Left Info
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sideModalTLInfoDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/410_top_right_success.asciidoc

@@ -0,0 +1,11 @@
+// === Top Right Success
+// Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sideModalTRSuccessDemo">
+    Launch Example
+  </button>
+</div>
+++++

data/lib/starter_web/pages/public/learn/_roundtrip/_includes/documents/419_advanced_modals_demo.asciidoc

@@ -0,0 +1,337 @@
+++++
+<!-- Modal Top Info -->
+<div id="frameModalTopInfoDemo"
+  class="modal fade top"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row px-4">
+          <p class="pt-1 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p>
+        </div>
+        <div class="row px-4">
+          <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Top Info -->
+
+<!-- Side Modal Top Right Success -->
+<div id="sideModalTRSuccessDemo"
+  class="modal fade right"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-side modal-top-right modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check md-green mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Top Right Success -->
+
+<!-- Side Modal Top Left Info -->
+<div id="sideModalTLInfoDemo"
+  class="modal fade left"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-side modal-top-left modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Info</p>
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <img src="/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg" alt="admin-dashboard-bootstrap" class="img-fluid">
+        <div class="text-center">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Top Left Info -->
+
+<!-- Modal Bottom Success-->
+<div id="frameModalBottomSuccessDemo"
+  class="modal fade bottom"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-frame modal-bottom modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!-- Body -->
+      <div class="modal-body">
+        <p class="mt-1 ml-3 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p><div class="row ml-3">
+          <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks<div class="ripple-container"><div class="ripple-decorator ripple-on ripple-out" style="left: 51.4063px; top: 20px; background-color: rgb(1, 211, 107); transform: scale(14.5548);"></div></div></a>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Bottom Success -->
+
+<!-- Side Modal Bottom Right Danger -->
+<div id="sideModalBRDangerDemo"
+  class="modal fade right"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Danger</p>
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3">
+            <p></p>
+            <p class="text-center"><i class="mdi mdi-cart md-gray-600 fa-4x"></i></p>
+          </div>
+          <div class="col-9">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
+            <h2 class="notoc"><span class="badge">v52gs1</span></h2>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Bottom Right Danger -->
+
+<!-- Side Modal Bottom Left Warning -->
+<div id="sideModalBLWarningDemo"
+  class="modal fade left"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-side modal-bottom-left modal-notify modal-warning" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Warning</p>
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3 text-center">
+            <img src="/assets/images/pages/roundtrip/410_bs_modals_extentions/avatar.jpg" alt="avatar.jpg" class="img-fluid z-depth-1-half rounded-circle">
+            <div style="height: 10px"></div>
+            <p class="title mb-0">Jane</p>
+            <p class="text-muted " style="font-size: 13px">Consultant</p>
+          </div>
+          <div class="col-9">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
+            <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Bottom Left Warning -->
+
+<!-- Modal Full Height Right Success Demo -->
+<div id="fluidModalRightSuccessDemo"
+  class="modal fade right"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check md-green mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+        <ul class="list-group">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+            Cras justo odio
+            <span class="badge badge-primary rounded-pill">1</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary rounded-pill">2</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+            Morbi leo risus
+            <span class="badge badge-primary rounded-pill">3</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+            Cras justo odio
+            <span class="badge badge-primary rounded-pill">4</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary rounded-pill">5</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+            Morbi leo risus
+            <span class="badge badge-primary rounded-pill">6</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Full Height Right Success Demo -->
+
+<!-- Modal Full Height Left Info Demo -->
+<div id="fluidModalLeftInfoDemo"
+  class="modal fade left"
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="myModalLabel" aria-hidden="true"
+  data-keyboard="false"
+  data-backdrop="static">
+  <div class="modal-dialog modal-full-height modal-left modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-dark mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check md-green mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+        <ul class="list-group">
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">3</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">4</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">5</span>
+          </li>
+          <li class="list-group-item d-flex justify-content-between align-items-start">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">6</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Full Height Left Info Demo -->
+++++