Release 2.1.0

README.txt

@@ -1,5 +1,5 @@
 MDB5
-Version: FREE 2.0.0
+Version: FREE 2.1.0
 
 Documentation:
 https://mdbootstrap.com/docs/standard/

css/mdb.min.css

@@ -1,6 +1,6 @@
 /*!
  * MDB5
- *   Version: FREE 2.0.0
+ *   Version: FREE 2.1.0
  * 
  * 
  *   Copyright: Material Design for Bootstrap

index.html

@@ -30,12 +30,13 @@
             height="150px"
             width="150px"
           />
-          <h5 class="mb-3">Release suprise! 50% OFF MDB 5 PRO</h5>
+          <h5 class="mb-3">Release surprise! 50% OFF MDB 5 PRO</h5>
 
           <p>
             Use this coupon code before the next release to claim the reward.<br />Hurry up & don't
             loose your chance.
           </p>
+
           <p>
             <code class="text-uppercase h1 px-2 rounded bg-dark text-white">MB8XW23V</code>
           </p>
@@ -44,8 +45,10 @@
             onclick="copy('MB8XW23V');toastr.info('Coupon code copied! Use it on the checkout.');"
             target="_blank"
             role="button"
+            id="code-button"
             >CLAIM DISCOUNT</a
           >
+
           <a
             class="btn btn-outline-primary btn-lg"
             href="https://mdbootstrap.com/docs/standard/getting-started/"
@@ -53,6 +56,10 @@
             role="button"
             >START TUTORIAL</a
           >
+          <div class="my-2 alert alert-success" id="code-success" style="display: none;">
+            Copied
+          </div>
+          <p>See <a href="https://mdbootstrap.com/docs/standard/pro/">prices</a></p>
           <h5 class="h1-responsive text-uppercase mt-3">
             the code <span class="font-weight-bold"></span> expires in:<br />
             <span class="font-weight-bold" id="time-counter"></span>
@@ -67,6 +74,16 @@
   <script type="text/javascript" src="js/mdb.min.js"></script>
   <!-- Custom scripts -->
   <script type="text/javascript">
+    var button = document.getElementById('code-button');
+    button.onclick = function () {
+      var div = document.getElementById('code-success');
+      if (div.style.display !== 'none') {
+        div.style.display = 'none';
+      } else {
+        div.style.display = 'block';
+      }
+    };
+
     function copy(text) {
       var textarea = document.createElement('textarea');
       textarea.value = text;
@@ -78,7 +95,7 @@
 
     // Ad counter
     // Set the date we're counting down to
-    var countDownDate = new Date(Date.UTC(2020, 09, 30, 10, 00, 00));
+    var countDownDate = new Date(Date.UTC(2020, 10, 17, 10, 00, 00));
     var counterElement = document.getElementById('time-counter');
 
     // Update the count down every 1 second

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-ui-kit",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "js/mdb.min.js",
   "repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",
   "author": "MDBootstrap",

src/js/bootstrap/src/dom/manipulator.js

@@ -60,10 +60,9 @@ const Manipulator = {
 
   offset(element) {
     const rect = element.getBoundingClientRect();
-
     return {
-      top: rect.top + document.body.scrollTop,
+      top: rect.top + (document.body.scrollTop || document.documentElement.scrollTop),
-      left: rect.left + document.body.scrollLeft,
+      left: rect.left + (document.body.scrollLeft || document.documentElement.scrollLeft),
     };
   },
 

src/js/mdb/util/focusTrap.js

@@ -2,8 +2,9 @@ import SelectorEngine from '../dom/selector-engine';
 import { isVisible } from './index';
 
 class FocusTrap {
-  constructor(element, options = {}) {
+  constructor(element, options = {}, toggler) {
     this._element = element;
+    this._toggler = toggler;
     this._event = options.event || 'blur';
     this._condition = options.condition || (() => true);
     this._selector =
@@ -31,6 +32,10 @@ class FocusTrap {
     this._focusableElements.forEach((element) => {
       element.removeEventListener(this._event, this.handler);
     });
+
+    if (this._toggler) {
+      this._toggler.focus();
+    }
   }
 
   update() {
@@ -40,7 +45,10 @@ class FocusTrap {
 
   _init() {
     const handler = (e) => {
-      if (!this._firstElement || e.key !== 'Tab') return;
+      if (!this._firstElement || e.key !== 'Tab' || this._focusableElements.includes(e.target)) {
+        return;
+      }
+
       e.preventDefault();
       this._firstElement.focus();
 

src/js/mdb/util/keycodes.js

@@ -10,6 +10,8 @@ export const ENTER = 13;
 export const SPACE = 32;
 export const ESCAPE = 27;
 export const TAB = 9;
+export const BACKSPACE = 8;
+export const DELETE = 46;
 export const A = 65;
 export const B = 66;
 export const C = 67;

src/scss/free/_variables.scss

@@ -365,6 +365,8 @@ $box-shadow-3-strong: 0px 6px 11px 0px rgba(0, 0, 0, 0.25), 0px 7px 20px 3px rgb
 $box-shadow-4-strong: 0px 6px 14px 0px rgba(0, 0, 0, 0.25), 0px 10px 30px 4px rgba(0, 0, 0, 0.2);
 $box-shadow-5-strong: 0px 6px 20px 0px rgba(0, 0, 0, 0.25), 0px 12px 40px 5px rgba(0, 0, 0, 0.2);
 
+$box-shadow-3-top: 0 -10px 20px 0 rgba(0, 0, 0, 0.05);
+
 // scss-docs-start light-shadows-values
 $shadows-light: (
   '0': $box-shadow-0,