Release 1.13.0

mdbootstrap · May 9, 2022 · 2ce6f9b · 2ce6f9b
1 parent e5dbbae
commit 2ce6f9b
Show file tree

Hide file tree

Showing 23 changed files with 214 additions and 1,300 deletions.
diff --git a/README.txt b/README.txt
@@ -1,6 +1,6 @@
 MDB 5 Vue
 
-Version: FREE 1.12.0
+Version: FREE 1.13.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/vue/

diff --git a/css/mdb.dark.min.css b/css/mdb.dark.min.css
diff --git a/css/mdb.dark.min.css.map b/css/mdb.dark.min.css.map
diff --git a/css/mdb.dark.rtl.min.css b/css/mdb.dark.rtl.min.css
diff --git a/css/mdb.min.css b/css/mdb.min.css
diff --git a/css/mdb.min.css.map b/css/mdb.min.css.map
diff --git a/css/mdb.rtl.min.css b/css/mdb.rtl.min.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdb-vue-ui-kit",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "main": "js/mdb.umd.min.js",
   "repository": "https://github.com/mdbootstrap/mdb-vue-ui-kit.git",
   "author": "MDBootstrap",

diff --git a/src/directives/free/mdbOnScroll.js b/src/directives/free/mdbOnScroll.js
@@ -3,7 +3,6 @@ export default {
     if (binding.value === false || !el) return;
 
     const options = binding.value;
-
     let isFirstShow = true;
     let isFirstHide = true;
 
@@ -13,7 +12,7 @@ export default {
       const callback = options.callback || options;
 
       const getOffset = () => {
-        var rect = el.getBoundingClientRect();
+        const rect = el.getBoundingClientRect();
         return rect.top;
       };
 

diff --git a/src/scss/free/_validation.scss b/src/scss/free/_validation.scss
@@ -1,3 +1,101 @@
 .valid-feedback {
   width: auto;
 }
+
+.is-valid {
+  .form-outline {
+    .form-control {
+      ~ .form-label {
+        color: $valid-color;
+      }
+
+      ~ .form-notch .form-notch-leading,
+      ~ .form-notch .form-notch-middle,
+      ~ .form-notch .form-notch-trailing {
+        border-color: $valid-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 $valid-color;
+      }
+      &:focus ~ .form-notch .form-notch-leading {
+        box-shadow: -1px 0 0 0 $valid-color, 0 1px 0 0 $valid-color,
+          0 -1px 0 0 $valid-color;
+      }
+      &:focus ~ .form-notch .form-notch-trailing {
+        box-shadow: 1px 0 0 0 $valid-color, 0 -1px 0 0 $valid-color,
+          0 1px 0 0 $valid-color;
+      }
+
+      &.select-input.focused {
+        & ~ .form-notch .form-notch-leading {
+          box-shadow: -1px 0 0 0 $valid-color, 0 1px 0 0 $valid-color,
+            0 -1px 0 0 $valid-color;
+        }
+
+        & ~ .form-notch .form-notch-middle {
+          box-shadow: 0 1px 0 0 $valid-color;
+          border-top: 1px solid transparent;
+        }
+
+        & ~ .form-notch .form-notch-trailing {
+          box-shadow: 1px 0 0 0 $valid-color, 0 -1px 0 0 $valid-color,
+            0 1px 0 0 $valid-color;
+        }
+      }
+    }
+  }
+}
+
+.is-invalid {
+  .form-outline {
+    .form-control {
+      ~ .form-label {
+        color: $invalid-color;
+      }
+
+      ~ .form-notch .form-notch-leading,
+      ~ .form-notch .form-notch-middle,
+      ~ .form-notch .form-notch-trailing {
+        border-color: $invalid-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 $invalid-color;
+      }
+      &:focus ~ .form-notch .form-notch-leading {
+        box-shadow: -1px 0 0 0 $invalid-color, 0 1px 0 0 $invalid-color,
+          0 -1px 0 0 $invalid-color;
+      }
+      &:focus ~ .form-notch .form-notch-trailing {
+        box-shadow: 1px 0 0 0 $invalid-color, 0 -1px 0 0 $invalid-color,
+          0 1px 0 0 $invalid-color;
+      }
+
+      &.select-input.focused {
+        & ~ .form-notch .form-notch-leading {
+          box-shadow: -1px 0 0 0 $invalid-color, 0 1px 0 0 $invalid-color,
+            0 -1px 0 0 $invalid-color;
+        }
+
+        & ~ .form-notch .form-notch-middle {
+          box-shadow: 0 1px 0 0 $invalid-color;
+          border-top: 1px solid transparent;
+        }
+
+        & ~ .form-notch .form-notch-trailing {
+          box-shadow: 1px 0 0 0 $invalid-color, 0 -1px 0 0 $invalid-color,
+            0 1px 0 0 $invalid-color;
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/free/_variables.scss b/src/scss/free/_variables.scss
@@ -0,0 +1,2 @@
+$valid-color: #00b74a;
+$invalid-color: #f93154;
diff --git a/src/scss/index.free.scss b/src/scss/index.free.scss
@@ -1,6 +1,9 @@
 // MDB Standard Free
 @import "./standard/mdb.free";
 
+// MDB Vue core utils
+@import "./free/variables";
+
 // MDB Vue Free
 @import "./free/checkboxes";
 @import "./free/badges";

diff --git a/src/scss/standard/free/_carousel.scss b/src/scss/standard/free/_carousel.scss
@@ -1,16 +1,16 @@
 .carousel-control-prev-icon {
   &::after {
-    content: "\f053";
+    content: '\f053';
     font-weight: $font-weight-bold;
-    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
+    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
     font-size: 1.7rem;
   }
 }
 .carousel-control-next-icon {
   &::after {
-    content: "\f054";
+    content: '\f054';
     font-weight: $font-weight-bold;
-    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
+    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
     font-size: 1.7rem;
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		$valid-color: #00b74a;
		$invalid-color: #f93154;