From 129475db781f3a9f825402db74825c44a340c675 Mon Sep 17 00:00:00 2001
From: Anderson Carpi <andcarpi@users.noreply.github.com>
Date: Mon, 23 Mar 2020 16:08:57 -0300
Subject: [PATCH] Overlay for tab-panels (#2612)

* Overlay for tab-panels

Don't know if i did it right, double check plz...
There's a way to avoid the use of a overlay-wrapper? i'm not good in css....

* Update navbar.html
---
 build/scss/_miscellaneous.scss | 20 ++++++++++++++++
 pages/UI/navbar.html           | 44 ++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/build/scss/_miscellaneous.scss b/build/scss/_miscellaneous.scss
index 2e2656662..7e3328c34 100644
--- a/build/scss/_miscellaneous.scss
+++ b/build/scss/_miscellaneous.scss
@@ -288,6 +288,26 @@
   }
 }
 
+.tab-pane {
+  // Box overlay for LOADING STATE effect on Tab Panels
+  > .overlay-wrapper {
+    position: relative;
+    > .overlay {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      flex-direction: column;
+      margin-top: -$card-spacer-x;
+      margin-left: -$card-spacer-x;
+      height: calc(100% + 2 * #{$card-spacer-x});
+      width: calc(100% + 2 * #{$card-spacer-x});
+
+      &.dark {
+        color: $white;
+      }
+    }
+  }
+}
+
 // Ribbon
 .ribbon-wrapper {
   height: $ribbon-wrapper-size;
diff --git a/pages/UI/navbar.html b/pages/UI/navbar.html
index a83465d99..143b0475e 100644
--- a/pages/UI/navbar.html
+++ b/pages/UI/navbar.html
@@ -1086,6 +1086,50 @@
             </div>
           </div>
         </div>
+        <div class="row">
+          <div class="col-12">
+            <h4>Nav Tabs Overlay for loading</h4>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12">
+            <div class="card card-primary card-tabs">
+              <div class="card-header p-0 pt-1">
+                <ul class="nav nav-tabs" id="custom-tabs-five-tab" role="tablist">
+                  <li class="nav-item">
+                    <a class="nav-link active" id="custom-tabs-five-overlay-tab" data-toggle="pill" href="#custom-tabs-five-overlay" role="tab" aria-controls="custom-tabs-five-overlay" aria-selected="true">Overlay</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" id="custom-tabs-five-overlay-dark-tab" data-toggle="pill" href="#custom-tabs-five-overlay-dark" role="tab" aria-controls="custom-tabs-five-overlay-dark" aria-selected="false">Overlay Dark</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" id="custom-tabs-five-normal-tab" data-toggle="pill" href="#custom-tabs-five-normal" role="tab" aria-controls="custom-tabs-five-normal" aria-selected="false">Normal Tab</a>
+                  </li>
+                </ul>
+              </div>
+              <div class="card-body">
+                <div class="tab-content" id="custom-tabs-five-tabContent">
+                  <div class="tab-pane fade show active" id="custom-tabs-five-overlay" role="tabpanel" aria-labelledby="custom-tabs-five-overlay-tab">
+                    <div class="overlay-wrapper">
+                      <div class="overlay"><i class="fas fa-3x fa-sync-alt fa-spin"></i><div class="text-bold pt-2">Loading...</div></div>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada lacus ullamcorper dui molestie, sit amet congue quam finibus. Etiam ultricies nunc non magna feugiat commodo. Etiam odio magna, mollis auctor felis vitae, ullamcorper ornare ligula. Proin pellentesque tincidunt nisi, vitae ullamcorper felis aliquam id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin id orci eu lectus blandit suscipit. Phasellus porta, ante et varius ornare, sem enim sollicitudin eros, at commodo leo est vitae lacus. Etiam ut porta sem. Proin porttitor porta nisl, id tempor risus rhoncus quis. In in quam a nibh cursus pulvinar non consequat neque. Mauris lacus elit, condimentum ac condimentum at, semper vitae lectus. Cras lacinia erat eget sapien porta consectetur.
+                    </div>
+                  </div>
+                  <div class="tab-pane fade" id="custom-tabs-five-overlay-dark" role="tabpanel" aria-labelledby="custom-tabs-five-overlay-dark-tab">
+                    <div class="overlay-wrapper">
+                      <div class="overlay dark"><i class="fas fa-3x fa-sync-alt fa-spin"></i><div class="text-bold pt-2">Loading...</div></div>
+                      Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
+                    </div>
+                  </div>
+                  <div class="tab-pane fade" id="custom-tabs-five-normal" role="tabpanel" aria-labelledby="custom-tabs-five-normal-tab">
+                    Mauris tincidunt mi at erat gravida, eget tristique urna bibendum. Mauris pharetra purus ut ligula tempor, et vulputate metus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas sollicitudin, nisi a luctus interdum, nisl ligula placerat mi, quis posuere purus ligula eu lectus. Donec nunc tellus, elementum sit amet ultricies at, posuere nec nunc. Nunc euismod pellentesque diam.
+                  </div>
+                </div>
+              </div>
+              <!-- /.card -->
+            </div>
+          </div>
+        </div>
         <!-- /.row -->
         <div class="card card-primary card-outline">
           <div class="card-header">