release 4.0.0

README.txt

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

package.json

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

src/js/bootstrap/mdb-prefix/modal.js

@@ -421,10 +421,12 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
   });
 
   // avoid conflict when clicking moddal toggler while another one is open
-  const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR);
+  const allreadyOpenedModals = SelectorEngine.find(OPEN_SELECTOR);
-  if (allReadyOpen) {
+  allreadyOpenedModals.forEach((modal) => {
-    Modal.getInstance(allReadyOpen).hide();
+    if (!modal.classList.contains('modal-non-invasive-show')) {
+      Modal.getInstance(modal).hide();
     }
+  });
 
   const data = Modal.getOrCreateInstance(target);
 

src/scss/free/_list-group.scss

@@ -8,3 +8,36 @@
     transition: 0.5s;
   }
 }
+
+.list-group-light {
+  .list-group-item {
+    padding: 1rem 0;
+    border: 2px solid hsl(0, 0%, 96%);
+  }
+  > .list-group-item {
+    border-width: 0 0 2px;
+    &:last-of-type {
+      border: none;
+    }
+  }
+  .active {
+    border: none;
+    border-radius: 0.5rem;
+    background-color: hsl(217, 88.2%, 90%);
+    color: hsl(217, 88.8%, 35.1%);
+  }
+  .list-group-item-action {
+    &:hover {
+      border-radius: 0.5rem;
+    }
+    &:focus {
+      border-radius: 0.5rem;
+    }
+  }
+}
+
+.list-group-small {
+  .list-group-item {
+    padding: 0.5rem 0;
+  }
+}

src/scss/free/_tables.scss

@@ -38,7 +38,6 @@
   }
   > tbody > tr:hover {
     --#{$variable-prefix}table-accent-bg: transparent;
-    color: var(--#{$variable-prefix}table-hover-color);
     background-color: var(--#{$variable-prefix}table-hover-bg);
   }
 }

src/scss/free/_variables.scss

@@ -287,7 +287,7 @@ $success: #00b74a !default;
 $info: #39c0ed !default;
 $warning: #ffa900 !default;
 $danger: #f93154 !default;
-$light: $gray-50 !default;
+$light: #f9f9f9 !default;
 $dark: $gray-900 !default;
 
 // scss-docs-start theme-colors-map
@@ -1029,7 +1029,8 @@ $table-cell-padding-y: 1rem !default;
 $table-cell-padding-x: 1.4rem !default;
 $table-cell-padding-y-sm: 0.5rem !default;
 $table-cell-padding-x-sm: $table-cell-padding-x !default;
-$table-hover-bg: rgba(0, 0, 0, 0.075) !default;
+$table-striped-bg: rgba(0, 0, 0, 0.02) !default;
+$table-hover-bg: rgba(0, 0, 0, 0.025) !default;
 
 // Select
 $form-select-transition: all 0.2s linear;

src/scss/free/forms/_form-control.scss

@@ -90,6 +90,7 @@
         border-color: $form-notch-div-border-color;
         box-sizing: border-box;
         background: transparent;
+        transition: $input-transition;
       }
       .form-notch-leading {
         left: 0;
@@ -135,34 +136,32 @@
     }
     &:focus ~ .form-notch .form-notch-middle,
     &.active ~ .form-notch .form-notch-middle {
-      border-top: none;
       border-right: none;
       border-left: none;
-      transition: $input-transition;
+      border-top: 1px solid transparent;
     }
     &:focus ~ .form-notch .form-notch-middle {
-      border-bottom: $input-focus-border-width solid;
       border-color: $input-focus-border-color;
+      box-shadow: 0 1px 0 0 $input-focus-border-color;
+      border-top: 1px solid transparent;
     }
     &:focus ~ .form-notch .form-notch-leading,
     &.active ~ .form-notch .form-notch-leading {
       border-right: none;
-      transition: $input-transition;
     }
     &:focus ~ .form-notch .form-notch-leading {
-      border-top: $input-focus-border-width solid $input-focus-border-color;
+      border-color: $input-focus-border-color;
-      border-bottom: $input-focus-border-width solid $input-focus-border-color;
+      box-shadow: -1px 0 0 0 $input-focus-border-color, 0 1px 0 0 $input-focus-border-color,
-      border-left: $input-focus-border-width solid $input-focus-border-color;
+        0 -1px 0 0 $input-focus-border-color;
     }
     &:focus ~ .form-notch .form-notch-trailing,
     &.active ~ .form-notch .form-notch-trailing {
       border-left: none;
-      transition: $input-transition;
     }
     &:focus ~ .form-notch .form-notch-trailing {
-      border-top: $input-focus-border-width solid $input-focus-border-color;
+      border-color: $input-focus-border-color;
-      border-bottom: $input-focus-border-width solid $input-focus-border-color;
+      box-shadow: 1px 0 0 0 $input-focus-border-color, 0 -1px 0 0 $input-focus-border-color,
-      border-right: $input-focus-border-width solid $input-focus-border-color;
+        0 1px 0 0 $input-focus-border-color;
     }
     &:disabled,
     &.disabled,
@@ -216,14 +215,20 @@
       }
       &:focus ~ .form-notch .form-notch-middle {
         border-color: $form-white-input-focus-border-color;
+        box-shadow: 0 1px 0 0 $form-white-input-focus-border-color;
+        border-top: 1px solid transparent;
       }
       &:focus ~ .form-notch .form-notch-leading {
-        border-top: $input-focus-border-width solid $form-white-input-focus-border-color;
+        border-color: $form-white-input-focus-border-color;
-        border-bottom: $input-focus-border-width solid $form-white-input-focus-border-color;
+        box-shadow: -1px 0 0 0 $form-white-input-focus-border-color,
-        border-left: $input-focus-border-width solid $form-white-input-focus-border-color;
+          0 1px 0 0 $form-white-input-focus-border-color,
+          0 -1px 0 0 $form-white-input-focus-border-color;
       }
       &:focus ~ .form-notch .form-notch-trailing {
         border-color: $form-white-input-focus-border-color;
+        box-shadow: 1px 0 0 0 $form-white-input-focus-border-color,
+          0 -1px 0 0 $form-white-input-focus-border-color,
+          0 1px 0 0 $form-white-input-focus-border-color;
       }
       &::placeholder {
         color: $form-white-placeholder-color;

src/scss/free/forms/_validation.scss

@@ -80,6 +80,35 @@
         ~ .form-notch .form-notch-trailing {
           border-color: $color;
         }
+
+        &:focus ~ .form-notch .form-notch-middle,
+        &.active ~ .form-notch .form-notch-middle {
+          border-top: 1px solid transparent;
+        }
+        &:focus ~ .form-notch .form-notch-middle {
+          box-shadow: 0 1px 0 0 $color;
+        }
+        &:focus ~ .form-notch .form-notch-leading {
+          box-shadow: -1px 0 0 0 $color, 0 1px 0 0 $color, 0 -1px 0 0 $color;
+        }
+        &:focus ~ .form-notch .form-notch-trailing {
+          box-shadow: 1px 0 0 0 $color, 0 -1px 0 0 $color, 0 1px 0 0 $color;
+        }
+
+        &.select-input.focused {
+          & ~ .form-notch .form-notch-leading {
+            box-shadow: -1px 0 0 0 $color, 0 1px 0 0 $color, 0 -1px 0 0 $color;
+          }
+
+          & ~ .form-notch .form-notch-middle {
+            box-shadow: 0 1px 0 0 $color;
+            border-top: 1px solid transparent;
+          }
+
+          & ~ .form-notch .form-notch-trailing {
+            box-shadow: 1px 0 0 0 $color, 0 -1px 0 0 $color, 0 1px 0 0 $color;
+          }
+        }
       }
     }
   }