Release 3.10.1

Author: m.duszak

README.txt

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

css/mdb.min.css

@@ -22,20 +22,12 @@
  <div class="container">
  <div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div class="text-center">
- <img
- class="mb-4"
- src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
- style="width: 250px; height: 90px;"
- />
- <h5 class="mb-3">Thank you for using our product. We're glad you're with us.</h5>
- <p class="mb-3">MDB Team</p>
- <a
- class="btn btn-primary btn-lg"
- href="https://mdbootstrap.com/docs/standard/getting-started/"
- target="_blank"
- role="button"
- >Start MDB tutorial</a
- >
+ <img class="mb-2" src="https://bf-sale.mdbgo.io/bf.png" width="800" height="450">
+ <h2 class="fw-bold">Black Friday Sale</h2>
+ <h5 class="mb-3">Get MDB Pro with discounts <span class="text-danger">up to 95%</span>.</h5>
+ <p class="mb-3 fw-bold"> Hurry up the offer is limited!</p>
+ 
+ <a class="btn btn-black btn-lg mt-2" href="https://mdbootstrap.com/bf/sale/" target="_blank" role="button"> <i class="fas fa-shopping-cart"></i> Get the offer</a>
  </div>
  </div>
  </div>

css/mdb.min.css.map

@@ -1,6 +1,6 @@
 {
  "name": "mdb-ui-kit",
- "version": "3.10.0",
+ "version": "3.10.1",
  "main": "js/mdb.min.js",
  "homepage": "https://mdbootstrap.com/docs/standard/",
  "repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",

index.html

@@ -131,6 +131,7 @@ class Input {
  } else {
  this._getLabelWidth();
  this._getLabelPositionInInputGroup();
+ this._toggleDefaultDatePlaceholder();
  }
  }
 
@@ -166,6 +167,22 @@ class Input {
  });
  }
 
+ _toggleDefaultDatePlaceholder(input = this.input) {
+ const isTypeDate = input.getAttribute('type') === 'date';
+
+ if (!isTypeDate) {
+ return;
+ }
+
+ const isInputFocused = document.activeElement === input;
+
+ if (!isInputFocused && !input.value) {
+ input.style.opacity = 0;
+ } else {
+ input.style.opacity = 1;
+ }
+ }
+
  _showPlaceholder() {
  Manipulator.addClass(this.input, CLASSNAME_PLACEHOLDER_ACTIVE);
  }
@@ -232,6 +249,7 @@ class Input {
  if (input.value !== '') {
  Manipulator.addClass(input, CLASSNAME_ACTIVE);
  }
+ this._toggleDefaultDatePlaceholder(input);
  });
  }
 
@@ -258,9 +276,11 @@ class Input {
 
  _deactivate(event) {
  const input = event ? event.target : this.input;
+
  if (input.value === '') {
  input.classList.remove(CLASSNAME_ACTIVE);
  }
+ this._toggleDefaultDatePlaceholder(input);
  }
 
  static activate(instance) {

js/mdb.min.js

@@ -61,12 +61,15 @@ class Ripple {
  constructor(element, options) {
  this._element = element;
  this._options = this._getConfig(options);
+
  if (this._element) {
  Data.setData(element, DATA_KEY, this);
  Manipulator.addClass(this._element, CLASSNAME_RIPPLE);
  }
 
  this._clickHandler = this._createRipple.bind(this);
+ this._rippleTimer = null;
+ this._isMinWidthSet = false;
 
  this.init();
  }
@@ -100,7 +103,10 @@ class Ripple {
  }
  });
 
- this._element.style.minWidth = `${this._element.offsetWidth}px`;
+ if (!this._element.style.minWidth) {
+ Manipulator.style(this._element, { 'min-width': `${this._element.offsetWidth}px` });
+ this._isMinWidthSet = true;
+ }
 
  Manipulator.addClass(this._element, CLASSNAME_RIPPLE);
  this._options = this._getConfig();
@@ -112,6 +118,10 @@ class Ripple {
  }
 
  _createRipple(event) {
+ if (!Manipulator.hasClass(this._element, CLASSNAME_RIPPLE)) {
+ Manipulator.addClass(this._element, CLASSNAME_RIPPLE);
+ }
+
  const { layerX, layerY } = event;
  const offsetX = layerX;
  const offsetY = layerY;
@@ -164,9 +174,23 @@ class Ripple {
  }
 
  _removeHTMLRipple({ ripple, duration }) {
- setTimeout(() => {
+ if (this._rippleTimer) {
+ clearTimeout(this._rippleTimer);
+ this._rippleTimer = null;
+ }
+ this._rippleTimer = setTimeout(() => {
  if (ripple) {
  ripple.remove();
+ if (this._element) {
+ SelectorEngine.find(`.${CLASSNAME_RIPPLE_WAVE}`, this._element).forEach((rippleEl) => {
+ rippleEl.remove();
+ });
+ if (this._isMinWidthSet) {
+ Manipulator.style(this._element, { 'min-width': '' });
+ this._isMinWidthSet = false;
+ }
+ Manipulator.removeClass(this._element, CLASSNAME_RIPPLE);
+ }
  }
  }, duration);
  }