1.0.0-alpha4

README.md

@@ -6,9 +6,11 @@
 
 ### Bootstrap 5 & Material Design 2.0 UI KIT
 
-**[>> Get Started](https://mdbootstrap.com/docs/standard/getting-started/installation/)**
+**[>> Get Started in 3 steps](https://mdbootstrap.com/docs/standard/getting-started/installation/)**
 
-**[>> Demo](https://mdbootstrap.com/docs/standard/#demo)**
+**[>> Get Started with Webpack](https://github.com/mdbootstrap/mdb-webpack-starter)**
+
+**[>> MDB 5 Demo](https://mdbootstrap.com/docs/standard/#demo)**
 
 <a href="https://npmcharts.com/compare/mdbootstrap?minimal=true"> <img src="https://img.shields.io/npm/dm/mdbootstrap.svg?label=MDB%20Downloads" alt="Downloads"></a>
 <a href="https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>

README.txt

@@ -1,5 +1,5 @@
 MDB5
-Version: FREE 1.0.0-alpha3
+Version: FREE 1.0.0-alpha4
 
 Documentation:
 https://mdbootstrap.com/docs/standard/

package.json

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

src/js/free/input.js

@@ -77,8 +77,6 @@ class Input {
     this._label = SelectorEngine.findOne('label', this._element);
     if (this._label === null) return;
     this._getLabelWidth();
-
-    if (!this._element.classList.contains('input-group')) return;
     this._getLabelPositionInInputGroup();
   }
 
@@ -92,13 +90,19 @@ class Input {
   }
 
   _getLabelPositionInInputGroup() {
+    this._labelMarginLeft = 0;
+
+    if (!this._element.classList.contains('input-group')) return;
     const input =
       SelectorEngine.findOne('input', this._element) ||
       SelectorEngine.findOne('textarea', this._element);
     const prefix = SelectorEngine.prev(input, '.input-group-text')[0];
-    if (prefix === undefined) return;
+    if (prefix === undefined) {
+      this._labelMarginLeft = 0;
+    } else {
       this._labelMarginLeft = prefix.offsetWidth - 1;
     }
+  }
 
   _applyDivs() {
     const notchWrapper = element('div');
@@ -130,10 +134,27 @@ class Input {
   }
 
   _activate(event) {
-    if (event) this._label = SelectorEngine.findOne('label', event.target.parentNode);
+    this._getElements(event);
+
+    const input = event
+      ? event.target
+      : SelectorEngine.findOne('input', this._element) ||
+        SelectorEngine.findOne('textarea', this._element);
+
+    if (input.value !== '') {
+      Manipulator.addClass(input, 'active');
+    }
+  }
+
+  _getElements(event) {
+    if (event) {
+      this._element = event.target.parentNode;
+      this._label = SelectorEngine.findOne('label', this._element);
+    }
+
     if (event && this._label) {
       const prevLabelWidth = this._labelWidth;
-      this._getLabelWidth();
+      this._getLabelData();
 
       if (prevLabelWidth !== this._labelWidth) {
         this._notchMiddle = SelectorEngine.findOne('.form-notch-middle', event.target.parentNode);
@@ -141,14 +162,6 @@ class Input {
         this._applyNotch();
       }
     }
-
-    const input = event
-      ? event.target
-      : SelectorEngine.findOne('input', this._element) ||
-        SelectorEngine.findOne('textarea', this._element);
-    if (input.value !== '') {
-      Manipulator.addClass(input, 'active');
-    }
   }
 
   _deactivate(event) {
@@ -186,8 +199,46 @@ EventHandler.on(document, 'focus', OUTLINE_TEXTAREA, Input.activate(new Input())
 EventHandler.on(document, 'input', OUTLINE_TEXTAREA, Input.activate(new Input()));
 EventHandler.on(document, 'blur', OUTLINE_TEXTAREA, Input.deactivate(new Input()));
 
-EventHandler.on(window, 'shown.bs.modal', Input.activate(new Input()));
-EventHandler.on(window, 'shown.bs.dropdown', Input.activate(new Input()));
+EventHandler.on(window, 'shown.bs.modal', (e) => {
+  SelectorEngine.find(OUTLINE_INPUT, e.target).forEach((element) => {
+    const instance = Input.getInstance(element.parentNode);
+    if (!instance) return;
+    instance.update();
+  });
+  SelectorEngine.find(OUTLINE_TEXTAREA, e.target).forEach((element) => {
+    const instance = Input.getInstance(element.parentNode);
+    if (!instance) return;
+    instance.update();
+  });
+});
+
+EventHandler.on(window, 'shown.bs.dropdown', (e) => {
+  SelectorEngine.find(OUTLINE_INPUT, e.target).forEach((element) => {
+    const instance = Input.getInstance(element.parentNode);
+    if (!instance) return;
+    instance.update();
+  });
+  SelectorEngine.find(OUTLINE_TEXTAREA, e.target).forEach((element) => {
+    const instance = Input.getInstance(element.parentNode);
+    if (!instance) return;
+    instance.update();
+  });
+});
+
+EventHandler.on(window, 'shown.bs.tab', (e) => {
+  const targetId = e.target.href.split('#')[1];
+  const target = SelectorEngine.findOne(`#${targetId}`);
+  SelectorEngine.find(OUTLINE_INPUT, target).forEach((element) => {
+    const instance = Input.getInstance(element.parentNode);
+    if (!instance) return;
+    instance.update();
+  });
+  SelectorEngine.find(OUTLINE_TEXTAREA, target).forEach((element) => {
+    const instance = Input.getInstance(element.parentNode);
+    if (!instance) return;
+    instance.update();
+  });
+});
 
 // auto-init
 SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).forEach((element) => {

src/js/mdb.free.js

@@ -16,6 +16,12 @@ import Dropdown from './free/dropdown';
 import Treeview from './free/treeview';
 import Ripple from './free/ripple';
 
+// AUTO INIT
+const tooltips = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));
+const popovers = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'));
+if (tooltips.length > 0) tooltips.map((tooltip) => new Tooltip(tooltip));
+if (popovers.length > 0) popovers.map((popover) => new Popover(popover));
+
 export {
   Alert,
   Button,

src/scss/free/_badge.scss

@@ -6,7 +6,7 @@
   min-width: 0;
   padding: 0;
   width: $badge-dot-width;
-  margin-left: $badge-dot-ml;
+  margin-left: -5px;
   &:empty {
     display: inline-block;
   }
@@ -14,6 +14,8 @@
 
 .badge-notification {
   position: absolute;
-  margin-top: $badge-notification-mt;
-  margin-left: $badge-notification-ml;
+  font-size: 0.6rem;
+  margin-top: -0.1rem;
+  margin-left: -0.5rem;
+  padding: 0.2em 0.45em;
 }

src/scss/free/_buttons.scss

@@ -177,38 +177,65 @@
 [class*='btn-outline-'].btn-floating {
   border-radius: 50%;
   padding: 0;
+  position: relative;
 }
 
 .btn-floating {
-  width: 36px;
-  height: 36px;
-
+  width: 37px;
+  height: 37px;
   .fas,
   .far,
   .fab {
-    line-height: 1;
-    padding-right: 1px;
+    width: 37px;
+    line-height: 37px;
   }
 
   &.btn-sm {
     width: 29px;
     height: 29px;
-
     .fas,
     .far,
     .fab {
-      padding-right: 1px;
+      width: 29px;
+      line-height: 29px;
     }
   }
 
   &.btn-lg {
     width: 45px;
     height: 45px;
-
     .fas,
     .far,
     .fab {
-      padding-right: 0;
+      width: 45px;
+      line-height: 45px;
+    }
+  }
+}
+
+[class*='btn-outline-'].btn-floating {
+  .fas,
+  .far,
+  .fab {
+    width: 33px;
+    line-height: 33px;
+  }
+
+  &.btn-sm {
+    .fas,
+    .far,
+    .fab {
+      width: 25px;
+      line-height: 25px;
+    }
+  }
+
+  &.btn-lg {
+    .fas,
+    .far,
+    .fab {
+      width: 41px;
+      line-height: 41px;
     }
   }
 }

src/scss/free/_card.scss

@@ -4,3 +4,11 @@
   border: 0;
   box-shadow: $box-shadow-3;
 }
+
+.card-header {
+  background-color: rgba(255, 255, 255, 0);
+}
+
+.card-footer {
+  background-color: rgba(255, 255, 255, 0);
+}

src/scss/free/_dropdown.scss

@@ -61,16 +61,10 @@
   }
 }
 
-.dropdown-notification {
-  .dropdown-toggle:after {
+.hidden-arrow {
+  &.dropdown-toggle:after {
     display: none;
   }
-  .badge-notification {
-    font-size: 0.6rem;
-    margin-top: -0.1rem;
-    margin-left: -0.5rem;
-    padding: 0.2em 0.45em;
-  }
 }
 
 .dropdown-menu {

src/scss/free/_navbar.scss

@@ -17,3 +17,15 @@
 .navbar-light .navbar-toggler {
   border: 0;
 }
+
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  img {
+    margin-right: 0.25rem;
+  }
+}
+
+.navbar-nav .dropdown-menu {
+  position: absolute;
+}

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

@@ -24,7 +24,6 @@
   &:before {
     content: '';
     position: absolute;
-    z-index: -1;
     box-shadow: 0px 0px 0px 13px transparent;
     border-radius: 50%;
     width: 14px;
@@ -80,9 +79,30 @@
     }
   }
 
+  &:indeterminate {
+    &:focus {
+      &:before {
+        box-shadow: 0px 0px 0px 13px $primary;
+      }
+    }
+  }
+
   &[type='checkbox'] {
     border-radius: 2px;
 
+    &:focus {
+      &:after {
+        content: '';
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        z-index: 1;
+        display: block;
+        border-radius: 0;
+        background-color: #fff;
+      }
+    }
+
     &:checked {
       background-image: none;
       background-color: $primary;
@@ -99,6 +119,32 @@
         border-left: 0;
         margin-left: 4px;
         margin-top: -1px;
+        background-color: transparent;
+      }
+
+      &:focus {
+        background-color: $primary;
+      }
+    }
+
+    &:checked:indeterminate,
+    &:indeterminate {
+      background-image: none;
+      background-color: $primary;
+
+      &:after {
+        display: block;
+        transform: rotate(90deg);
+        border-width: 2px;
+        border-color: #fff;
+        border-width: 2px;
+        width: 2px;
+        height: 14px;
+        border-style: solid;
+        border-top: 0;
+        border-left: 0;
+        margin-left: 6px;
+        margin-top: 0;
       }
 
       &:focus {
@@ -113,7 +159,19 @@
     height: 20px;
 
     &:before {
-      box-shadow: 1px 1px 0px 13px rgba(0, 0, 0, 0.6);
+      width: 16px;
+      height: 16px;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      z-index: 1;
+      display: block;
+      border-radius: 50%;
+      background-color: #fff;
     }
 
     &:checked {
@@ -133,10 +191,6 @@
 
       &:focus {
         background-color: #fff;
-
-        &:before {
-          box-shadow: 1px 1px 0px 13px $primary;
-        }
       }
     }
   }

src/scss/free/forms/_validation.scss

@@ -65,6 +65,32 @@
   }
 }
 
+.form-outline {
+  .form-control {
+    &.is-valid {
+      ~ .form-label {
+        color: $success;
+      }
+      ~ .form-notch .form-notch-leading,
+      ~ .form-notch .form-notch-middle,
+      ~ .form-notch .form-notch-trailing {
+        border-color: $success;
+      }
+    }
+
+    &.is-invalid {
+      ~ .form-label {
+        color: $danger;
+      }
+      ~ .form-notch .form-notch-leading,
+      ~ .form-notch .form-notch-middle,
+      ~ .form-notch .form-notch-trailing {
+        border-color: $danger;
+      }
+    }
+  }
+}
+
 .was-validated .form-check-input.is-valid:checked[type='checkbox']:before {
   border-color: #fff;
 }
@@ -81,6 +107,28 @@
   border-color: $danger;
 }
 
+.form-check-input.is-valid:checked[type='checkbox']:before {
+  border-color: #fff;
+}
+.form-check-input.is-valid:checked[type='checkbox'] {
+  background-color: $success;
+  border-color: $success;
+}
+
+.form-check-input.is-invalid:checked[type='checkbox']:before {
+  border-color: #fff;
+}
+.form-check-input.is-invalid:checked[type='checkbox'] {
+  background-color: $danger;
+  border-color: $danger;
+}
+.form-check-input.is-invalid[type='checkbox']:before {
+  border-color: #fff;
+}
+.form-check-input.is-invalid[type='checkbox'] {
+  border-color: $danger;
+}
+
 .was-validated .form-check-input:valid ~ .form-check-label,
 .form-check-input.is-valid ~ .form-check-label,
 .was-validated .form-check-input:invalid ~ .form-check-label,
@@ -106,6 +154,22 @@
   box-shadow: 0px 0px 0px 13px $danger;
 }
 
+.was-validated .form-check-input:invalid:focus:before {
+  box-shadow: 0px 0px 0px 13px $danger;
+}
+
+.form-check-input.is-valid:checked:focus:before {
+  box-shadow: 0px 0px 0px 13px $success;
+}
+
+.form-check-input.is-invalid:checked:focus:before {
+  box-shadow: 0px 0px 0px 13px $danger;
+}
+
+.form-check-input.is-invalid:focus:before {
+  box-shadow: 0px 0px 0px 13px $danger;
+}
+
 .was-validated .form-check-input[type='checkbox']:checked:valid:focus,
 .form-check-input[type='checkbox'].valid:checked:focus {
   background-color: $success;
@@ -113,13 +177,142 @@
 }
 
 .was-validated .input-group .form-control:invalid,
-.was-validated .input-group .form-control.is-invalid,
+.input-group .form-control.is-invalid,
 .was-validated .input-group .form-control:valid,
-.was-validated .input-group .form-control.is-valid {
+.input-group .form-control.is-valid {
   margin-bottom: 0;
 }
 
 .was-validated .input-group .valid-feedback,
-.was-validated .input-group .invalid-feedback {
+.was-validated .input-group .invalid-feedback,
+.input-group .valid-feedback,
+.input-group .invalid-feedback {
   margin-top: 2.5rem;
 }
+
+.form-file .valid-feedback,
+.form-file .invalid-feedback {
+  margin-top: 0.25rem;
+}
+
+// Valid radio
+
+.was-validated .form-check-input[type='radio']:valid:checked {
+  border-color: $success;
+}
+
+.was-validated .form-check-input[type='radio']:valid:checked:focus:before {
+  box-shadow: 1px 1px 0px 13px $success;
+}
+
+.was-validated .form-check-input[type='radio']:valid:checked {
+  background-color: #fff;
+}
+
+.was-validated .form-check-input[type='radio']:valid:checked:after {
+  border-color: $success;
+  background-color: $success;
+}
+
+.form-check-input[type='radio'].is-valid:checked {
+  border-color: $success;
+}
+
+.form-check-input[type='radio'].is-valid:checked:focus:before {
+  box-shadow: 1px 1px 0px 13px $success;
+}
+
+.form-check-input[type='radio'].is-valid:checked {
+  background-color: #fff;
+}
+
+.form-check-input[type='radio'].is-valid:checked:after {
+  border-color: $success;
+  background-color: $success;
+}
+
+// Invalid radio
+
+.was-validated .form-check-input[type='radio']:invalid:checked {
+  border-color: $danger;
+}
+
+.was-validated .form-check-input[type='radio']:invalid:checked:focus:before {
+  box-shadow: 1px 1px 0px 13px $danger;
+}
+
+.was-validated .form-check-input[type='radio']:invalid:checked {
+  background-color: #fff;
+}
+
+.was-validated .form-check-input[type='radio']:invalid:checked:after {
+  border-color: $danger;
+  background-color: $danger;
+}
+
+.form-check-input[type='radio'].is-invalid:checked {
+  border-color: $danger;
+}
+
+.form-check-input[type='radio'].is-invalid:checked:focus:before {
+  box-shadow: 1px 1px 0px 13px $danger;
+}
+
+.form-check-input[type='radio'].is-invalid:checked {
+  background-color: #fff;
+}
+
+.form-check-input[type='radio'].is-invalid:checked:after {
+  border-color: $danger;
+  background-color: $danger;
+}
+
+.was-validated .form-file-input:invalid:focus ~ .form-file-label,
+.form-file-input.is-invalid:focus ~ .form-file-label,
+.was-validated .form-file-input:valid:focus ~ .form-file-label,
+.form-file-input.is-valid:focus ~ .form-file-label {
+  box-shadow: none;
+}
+
+.was-validated .form-file-input:focus-within ~ .form-file-label {
+  border: none;
+  box-shadow: none;
+}
+
+.was-validated .form-file-input:invalid:focus-within ~ .form-file-label .form-file-text,
+.was-validated .form-file-input:invalid:focus-within ~ .form-file-label .form-file-button,
+.form-file-input.is-invalid:focus-within ~ .form-file-label .form-file-text,
+.form-file-input.is-invalid:focus-within ~ .form-file-label .form-file-button {
+  border-color: $danger;
+}
+
+.was-validated .form-file-input:valid:focus-within ~ .form-file-label .form-file-text,
+.was-validated .form-file-input:valid:focus-within ~ .form-file-label .form-file-button,
+.form-file-input.is-valid:focus-within ~ .form-file-label .form-file-text,
+.form-file-input.is-valid:focus-within ~ .form-file-label .form-file-button {
+  border-color: $success;
+}
+
+.was-validated :invalid ~ .invalid-tooltip,
+.is-invalid ~ .invalid-feedback,
+.is-invalid ~ .invalid-tooltip {
+  border-radius: 0.25rem !important;
+}
+
+.valid-tooltip {
+  color: #fff;
+}
+
+.was-validated .form-file .form-file-input:invalid ~ .form-file-label .form-file-text,
+.was-validated .form-file .form-file-input:invalid ~ .form-file-label .form-file-button {
+  border-color: $danger;
+}
+
+.was-validated .form-file .form-file-input:valid ~ .form-file-label .form-file-text,
+.was-validated .form-file .form-file-input:valid ~ .form-file-label .form-file-button {
+  border-color: $success;
+}
+
+.was-validated .form-file {
+  margin-bottom: 2.5rem;
+}