Add Overflow docs

Author: ascensus-mdb

en/_mdb5/standard/web/docs/utilities/overflow/data.php

@@ -1,10 +1,10 @@
 <?php
 global $data_var;
 $data_var = array(
-  'main_title' => '[Name]',
-  'seo_title' => '[Name] - Bootstrap 5 & Material Design 2.0',
-  'description' => '[Name] built with the latest Bootstrap 5 & Material Design 2.0. Multiple examples, a user-friendly guide, extensive API, and customization tools',
-  'url' => 'https://mdbootstrap.com/docs/standard/utilities/',
-  'image' => '',
+  'main_title' => 'Overflow',
+  'seo_title' => 'Overflow - Bootstrap 5 & Material Design 2.0',
+  'description' => 'Overflow utilities built with the latest Bootstrap 5 & Material Design 2.0. Multiple examples, a user-friendly guide, extensive api, and customization tools',
+  'url' => 'https://mdbootstrap.com/docs/standard/utilities/overflow/',
+  'image' => 'https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/utilities/overflow/overflow.jpg',
   'video' => 'https://www.youtube.com/watch?v=c9B4TPnak1A',
 );

en/_mdb5/standard/web/docs/utilities/overflow/o-ss.html

@@ -4,15 +4,3 @@
 <li class="nav-item">
   <a class="nav-link" href="#section-basic-example">Basic example</a>
 </li>
-<!-- Subsections (if needed) -->
-<li class="nav-item">
-  <a class="nav-link" href="#section-">Section</a>
-  <ul class="nav flex-column pl-3">
-    <li class="nav-item">
-      <a class="nav-link" href="#subsection-">Subsection</a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#subsection-">Subsection</a>
-    </li>
-  </ul>
-</li>

en/_mdb5/standard/web/docs/utilities/overflow/o.html

@@ -9,7 +9,7 @@ <h2 class="h1 font-weight-bold"><?= $data_var['main_title']; ?></h2>
     <h1 class="h6"><?= $data_var['seo_title']; ?></h1>
 
     <!-- Description -->
-    <p></p>
+    <p>Use these shorthand utilities for quickly configuring how content overflows an element.</p>
   </section>
   <!--Section: Introduction-->
 
@@ -20,21 +20,43 @@ <h1 class="h6"><?= $data_var['seo_title']; ?></h1>
     <!-- Section title -->
     <h2 class="mb-4">Basic example</h2>
 
+    <p>
+      Barebones <code>overflow</code> functionality is provided for two values by default, and they
+      are not responsive.
+    </p>
+
     <!--Section: Demo-->
-    <section class="border p-4 text-center mb-4"></section>
+    <section class="border p-4 d-flex justify-content-center mb-4">
+      <div
+        class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light"
+        style="max-width: 260px; max-height: 100px;"
+      >
+        This is an example of using <code>.overflow-auto</code> on an element with set width and
+        height dimensions. By design, this content will vertically scroll.
+      </div>
+
+      <div class="overflow-hidden p-3 bg-light" style="max-width: 260px; max-height: 100px;">
+        This is an example of using <code>.overflow-hidden</code> on an element with set width and
+        height dimensions.
+      </div>
+    </section>
     <!--Section: Demo-->
 
     <!--Section: Code-->
-    <section>
+    <section class="mb-4">
       <mdbsnippet>
-        <code data-lang="html" data-name="HTML"> </code>
-
-        <code data-lang="css" data-name="CSS"> </code>
-
-        <code data-lang="js" data-name="JavaScript"> </code>
+        <code data-lang="html" data-name="HTML">
+          <div class="overflow-auto">...</div>
+          <div class="overflow-hidden">...</div>
+        </code>
       </mdbsnippet>
     </section>
     <!--Section: Code-->
+
+    <p>
+      Using Sass variables, you may customize the overflow utilities by changing the
+      <code>$overflows</code> variable in <code>_variables.scss</code>.
+    </p>
   </section>
   <!--Section: Basic example-->