release 4.4.0

README.txt

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

package.json

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

src/js/free/ripple.js

@@ -14,6 +14,7 @@ const NAME = 'ripple';
 const DATA_KEY = 'mdb.ripple';
 const CLASSNAME_RIPPLE = 'ripple-surface';
 const CLASSNAME_RIPPLE_WAVE = 'ripple-wave';
+const CLASSNAME_RIPPLE_WRAPPER = 'input-wrapper';
 const SELECTOR_COMPONENT = ['.btn', '.ripple'];
 
 const CLASSNAME_UNBOUND = 'ripple-surface-unbound';
@@ -70,6 +71,7 @@ class Ripple {
     this._clickHandler = this._createRipple.bind(this);
     this._rippleTimer = null;
     this._isMinWidthSet = false;
+    this._rippleInSpan = false;
 
     this.init();
   }
@@ -103,13 +105,40 @@ class Ripple {
       }
     });
 
+    this._options = this._getConfig();
+
+    if (this._element.tagName.toLowerCase() === 'input') {
+      const parent = this._element.parentNode;
+
+      this._rippleInSpan = true;
+
+      if (parent.tagName.toLowerCase() === 'span' && parent.classList.contains(CLASSNAME_RIPPLE)) {
+        this._element = parent;
+      } else {
+        const shadow = getComputedStyle(this._element).boxShadow;
+
+        const wrapper = document.createElement('span');
+        wrapper.classList.add(CLASSNAME_RIPPLE, CLASSNAME_RIPPLE_WRAPPER);
+
+        Manipulator.addStyle(wrapper, {
+          border: 0,
+          'box-shadow': shadow,
+        });
+
+        // Put element as child
+        parent.replaceChild(wrapper, this._element);
+        wrapper.appendChild(this._element);
+        this._element = wrapper;
+      }
+      this._element.focus();
+    }
+
     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();
     this._createRipple(event);
   }
 
@@ -195,12 +224,25 @@ class Ripple {
             Manipulator.style(this._element, { 'min-width': '' });
             this._isMinWidthSet = false;
           }
+          if (this._rippleInSpan && this._element.classList.contains(CLASSNAME_RIPPLE_WRAPPER)) {
+            this._removeWrapperSpan();
+          } else {
             Manipulator.removeClass(this._element, CLASSNAME_RIPPLE);
           }
         }
+      }
     }, duration);
   }
 
+  _removeWrapperSpan() {
+    const child = this._element.firstChild;
+
+    this._element.replaceWith(child);
+    this._element = child;
+    this._element.focus();
+    this._rippleInSpan = false;
+  }
+
   _durationToMsNumber(time) {
     return Number(time.replace('ms', '').replace('s', '000'));
   }

src/scss/free/_deprecated.scss

@@ -0,0 +1,32 @@
+// To be removed
+
+hr.divider-horizontal:not([size]) {
+  height: 2px;
+}
+
+.divider-horizontal {
+  opacity: 1;
+  background-color: #f5f5f5;
+  height: 2px;
+}
+
+.divider-vertical {
+  opacity: 1;
+  background-color: #f5f5f5;
+  display: inline-block;
+  width: 2px;
+  margin: 0 1rem;
+}
+
+hr.divider-horizontal-blurry {
+  background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 40%), transparent);
+  background-color: transparent;
+}
+
+hr.divider-vertical-blurry {
+  background-image: linear-gradient(180deg, transparent, hsl(0, 0%, 40%), transparent);
+  background-color: transparent;
+  width: 1px;
+  top: 0;
+  right: 0;
+}

src/scss/free/_dropdown.scss

@@ -119,3 +119,11 @@
   border-top: 2px solid $dropdown-divider-bg;
   opacity: 1;
 }
+
+.dropdown-menu {
+  INPUT:not(:-webkit-autofill),
+  SELECT:not(:-webkit-autofill),
+  TEXTAREA:not(:-webkit-autofill) {
+    animation-name: none !important;
+  }
+}

src/scss/free/_navbar.scss

@@ -30,6 +30,7 @@
   position: absolute;
 }
 
+// Navbar themes
 .navbar-light {
   .navbar-toggler-icon {
     background-image: none;

src/scss/free/_ripple.scss

@@ -31,6 +31,10 @@
   @include ripple-variant(white);
 }
 
+.input-wrapper .ripple-wave {
+  @include ripple-variant(white);
+}
+
 @each $color, $value in $theme-colors {
   .ripple-surface-#{$color} {
     .ripple-wave {

src/scss/free/_utilities.scss

@@ -175,33 +175,78 @@ $utilities: map-merge(
   )
 );
 
-hr.divider-horizontal:not([size]) {
+hr:not([size]) {
+  &.hr {
     height: 2px;
-}
-
-.divider-horizontal {
-  opacity: 1;
     background-color: #f5f5f5;
-  height: 2px;
-}
-
-.divider-vertical {
     opacity: 1;
-  background-color: #f5f5f5;
-  display: inline-block;
-  width: 2px;
-  margin: 0 1rem;
-}
 
-hr.divider-horizontal-blurry {
+    &.hr-blurry {
       background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 40%), transparent);
       background-color: transparent;
+      height: 1px;
+      opacity: $hr-opacity;
+    }
+  }
+  &.vr {
+    height: auto;
+  }
 }
 
-hr.divider-vertical-blurry {
+.vr {
+  width: 2px;
+  background-color: #f5f5f5;
+  opacity: 1;
+}
+
+.vr-blurry {
   background-image: linear-gradient(180deg, transparent, hsl(0, 0%, 40%), transparent);
   background-color: transparent;
   width: 1px;
-  top: 0;
-  right: 0;
+  opacity: $hr-opacity;
+}
+
+$utilities: map-merge(
+  $utilities,
+  (
+    'object-fit': (
+      property: object-fit,
+      class: object,
+      values: (
+        cover: cover,
+      ),
+    ),
+  )
+);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    'object-position': (
+      property: object-position,
+      class: object,
+      values: (
+        top: top,
+        center: center,
+        bottom: bottom,
+      ),
+    ),
+  )
+);
+
+@each $name, $color in $theme-colors {
+  .link-#{$name} {
+    transition: color 0.15s;
+  }
+}
+
+.navbar-light .navbar-nav .nav-link.link-grayish,
+.navbar-dark .navbar-nav .nav-link.link-grayish,
+.link-grayish {
+  color: #9fa6b2;
+
+  &:hover,
+  &:focus {
+    color: #798497;
+  }
 }

src/scss/free/_variables.scss

@@ -289,6 +289,7 @@ $warning: #ffa900 !default;
 $danger: #f93154 !default;
 $light: #f9f9f9 !default;
 $dark: $gray-900 !default;
+$grayish: #9fa6b2 !default;
 
 // scss-docs-start theme-colors-map
 $theme-colors: (
@@ -302,6 +303,7 @@ $theme-colors: (
   'dark': $dark,
   'white': $white,
   'black': $black,
+  'grayish': $grayish,
 ) !default;
 // scss-docs-end theme-colors-map