New components and other optimizations

* New: Added new component `Toast`.
* New: Upgraded bootstrap css to `5.2.3`.
* Tweak: Optimized JavaScripts.

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+
+#### = 5.2.0 (September 3, 2024) =
+
+* New: Added new component `Toast`.
+* New: Upgraded bootstrap css to `5.2.3`.
+* Tweak: Optimized JavaScripts.
+
+
+
 #### = 5.1.0 (June 11, 2024) =
 
 * New: Added Bootstrap 24-column grid extension (based on SASS).

README.md

@@ -303,7 +303,7 @@ $ sudo npm rebuild node-sass
 	============================================= -->
 
 	<!-- Basic  -->
-	<link rel="stylesheet" href="assets/css/bootstrap.min.css?ver=5.0.2" media="all"/>
+	<link rel="stylesheet" href="assets/css/bootstrap.min.css?ver=5.2.3" media="all"/>
 	<link rel="stylesheet" href="assets/css/video.min.css?ver=7.4.1" media="all"/>
 
 

README_CN.md

@@ -303,7 +303,7 @@ $ npm rebuild node-sass
 	============================================= -->
 
 	<!-- Basic  -->
-	<link rel="stylesheet" href="assets/css/bootstrap.min.css?ver=5.0.2" media="all"/>
+	<link rel="stylesheet" href="assets/css/bootstrap.min.css?ver=5.2.3" media="all"/>
 	<link rel="stylesheet" href="assets/css/video.min.css?ver=7.4.1" media="all"/>
 
 

dist/css/uix-kit.css

@@ -6,9 +6,9 @@
  * ## Project Name        :  Uix Kit
  * ## Project Description :  A free web kits for fast web design and development, compatible with Bootstrap v5.
  * ## Project URL         :  https://uiux.cc
- * ## Version             :  5.1.0
+ * ## Version             :  5.2.0
  * ## Based on            :  Uix Kit (https://github.com/xizon/uix-kit)
- * ## Last Update         :  July 4, 2024
+ * ## Last Update         :  September 3, 2024
  * ## Created by          :  UIUX Lab (https://uiux.cc) ([email protected])
  * ## Released under the MIT license.
  *
@@ -92,43 +92,44 @@
     70.Team Focus
     71.Text effect
     72.Timeline
-    73.Vertical Menu
-    74.WordPress Core ( Do not use prefix "uix-" )
-    75.WordPress Blocks ( Do not use prefix "uix-" )
-    76.3rd Party Plugins
-    77.Badges
-    78.Blended Grid Layout
-    79.Breadcrumbs
-    80.Button
-    81.Cards
-    82.Badges
-    83.Coach Mark
-    84.Content Placeholder Animated
-    85.Dividing Line
-    86.Dotted Line
-    87.Equal-width Columns
-    88.Features
-    89.Footer Templates
-    90.Gallery Grid Layout
-    91.Heading
-    92.Image Animation
-    93.Brands List
-    94.Maintain Aspect Ratio List
-    95.Side by Side List
-    96.Side by Side List With Photo
-    97.Mouse Animation Scroll
-    98.Overlay
-    99.Ribbon
-    100.Separator of Rule With Text
-    101.Shape Animation
-    102.Comments ( Synchronize to WordPress's class name )
-    103.Editing Component
-    104.Striking
-    105.Team Fullwidth (Style using the Side by Side List With Photo module)
-    106.Team Gird
-    107.Testimonials Carousel
-    108.ToolTip
-    109.Wave Background
+    73.Toast
+    74.Vertical Menu
+    75.WordPress Core ( Do not use prefix "uix-" )
+    76.WordPress Blocks ( Do not use prefix "uix-" )
+    77.3rd Party Plugins
+    78.Badges
+    79.Blended Grid Layout
+    80.Breadcrumbs
+    81.Button
+    82.Cards
+    83.Badges
+    84.Coach Mark
+    85.Content Placeholder Animated
+    86.Dividing Line
+    87.Dotted Line
+    88.Equal-width Columns
+    89.Features
+    90.Footer Templates
+    91.Gallery Grid Layout
+    92.Heading
+    93.Image Animation
+    94.Brands List
+    95.Maintain Aspect Ratio List
+    96.Side by Side List
+    97.Side by Side List With Photo
+    98.Mouse Animation Scroll
+    99.Overlay
+    100.Ribbon
+    101.Separator of Rule With Text
+    102.Shape Animation
+    103.Comments ( Synchronize to WordPress's class name )
+    104.Editing Component
+    105.Striking
+    106.Team Fullwidth (Style using the Side by Side List With Photo module)
+    107.Team Gird
+    108.Testimonials Carousel
+    109.ToolTip
+    110.Wave Background
 
 
 */
@@ -15924,6 +15925,224 @@ table.is-horizontal th,
 .uix-timeline__container-wrapper.is-horizontal .uix-timeline__btn.uix-timeline__btn--next:hover {
   margin-right: -0.3125rem;
 }
+/* ======================================================
+   <!-- Toast -->
+/* ====================================================== */
+:root {
+  /* COLOR PALETTE  */
+  --uix-placeholder-text-color: #E6E6E8;
+  --uix-highlight-color1: #CE3A3E;
+  --uix-highlight-color2: #DE510E;
+  --uix-primary-text-color: #212121;
+  --uix-primary-link-color: #474747;
+  --uix-primary-link-hover-color: #212121;
+  --uix-heading-text-color: #212121;
+  --uix-sub-text-color: #AEAEAE;
+  --uix-dividing-line-color: #DCDCDC;
+  --uix-btn-gradient-color1: #CE3A3E;
+  --uix-btn-gradient-color2: #C04645;
+  --uix-btn-gradient-color3: #DE510E;
+  --uix-primary-bg-color: transparent;
+}
+
+.uix-toasts__wrapper {
+  --uix-toast-zindex: 90001;
+  --uix-toast-border-radius: 0.375rem;
+  --uix-toast-offset-top: 35px;
+  --uix-toast-offset-bottom: 15px;
+  --uix-toast-offset-bothsides: 15px;
+  --uix-toast-container-gap: 0.5rem;
+  --uix-toast-container-width: 350px;
+  --uix-toast-progress-height: 5px;
+  --uix-toast-progress-bg: rgba(255,255,255,.6);
+  width: var(--uix-toast-container-width);
+  position: fixed;
+  left: 50%;
+  bottom: 0;
+  z-index: var(--uix-toast-zindex);
+  pointer-events: none;
+  transition: 0.1s ease-in-out;
+  /* cascading divs */
+  /* progress */
+}
+.uix-toasts__wrapper--bottom-left {
+  left: var(--uix-toast-offset-bothsides);
+}
+.uix-toasts__wrapper--bottom-right {
+  left: auto;
+  right: var(--uix-toast-offset-bothsides);
+}
+.uix-toasts__wrapper--bottom-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.uix-toasts__wrapper--top-left {
+  left: var(--uix-toast-offset-bothsides);
+  bottom: auto;
+  top: var(--uix-toast-offset-top);
+}
+.uix-toasts__wrapper--top-right {
+  left: auto;
+  right: var(--uix-toast-offset-bothsides);
+  top: var(--uix-toast-offset-top);
+}
+.uix-toasts__wrapper--top-center {
+  left: 50%;
+  transform: translateX(-50%);
+  top: var(--uix-toast-offset-top);
+}
+.uix-toasts__wrapper--vertical-center {
+  left: 50%;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  margin-top: 5%;
+}
+.uix-toasts__wrapper .uix-toasts {
+  position: relative;
+  width: 100%;
+  bottom: var(--uix-toast-offset-bottom);
+  display: flex;
+  flex-flow: column-reverse nowrap;
+}
+.uix-toasts__wrapper .uix-toasts::before {
+  content: "";
+  top: -80px;
+  bottom: 0;
+  left: -8px;
+  right: -8px;
+  position: absolute;
+  background-color: transparent;
+  pointer-events: none;
+}
+.uix-toasts__wrapper .toast-container {
+  margin-bottom: var(--uix-toast-container-gap);
+}
+.uix-toasts__wrapper .toast-container.auto-anim-switch--initfirst {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+.uix-toasts__wrapper .toast-container.auto-anim-switch--first {
+  animation-name: uix-cssAnim--toast-show-first;
+  animation-duration: 0.3s;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.uix-toasts__wrapper .toast-container.auto-anim-switch:not(.only-one) {
+  animation-name: uix-cssAnim--toast-hide;
+  animation-duration: 0.3s;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.uix-toasts__wrapper .toast-container.only-one.auto-anim-switch {
+  animation-name: uix-cssAnim--toast-hide--onlyone;
+  animation-duration: 0.3s;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.uix-toasts__wrapper.uix-toasts__wrapper--cascading .toast-container {
+  margin-bottom: 0;
+}
+.uix-toasts__wrapper.uix-toasts__wrapper--cascading .uix-toasts:hover .toast-container {
+  transform: perspective(100px) translateZ(0) !important;
+}
+.uix-toasts__wrapper .toast-progress {
+  position: absolute;
+  width: 100%;
+  bottom: 0px;
+  left: 0px;
+  height: var(--uix-toast-progress-height);
+  background: transparent;
+  border-radius: 0 0 var(--uix-toast-border-radius) var(--uix-toast-border-radius);
+  overflow: hidden;
+}
+.uix-toasts__wrapper .toast-progress .progress-bar {
+  background: var(--uix-toast-progress-bg);
+  width: 100%;
+  transition: all 0.1s;
+}
+
+/* Bootstrap toast here */
+.toast-container {
+  width: 100%;
+  height: auto;
+  position: relative;
+  transition: all 0.25s;
+  pointer-events: auto;
+}
+.toast-container [data-close] {
+  background: none;
+}
+.toast-container [data-close]:focus {
+  box-shadow: none;
+}
+.toast-container [data-close] svg {
+  vertical-align: top;
+}
+.toast-container [data-close] svg path {
+  transition: 0.3s ease-in-out;
+}
+.toast-container [data-close]:hover svg path {
+  fill: #f00;
+}
+.toast-container.hide-start {
+  opacity: 0;
+}
+.toast-container.hide-end {
+  display: none;
+}
+
+@keyframes uix-cssAnim--toast-initfirst {
+  0% {
+    transform: translateY(-20px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+}
+@keyframes uix-cssAnim--toast-show-first {
+  0% {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes uix-cssAnim--toast-hide {
+  0% {
+    transform: translateY(-100%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(10px);
+    opacity: 0;
+    /* prevent auto-close's item */
+    display: block;
+  }
+}
+@keyframes uix-cssAnim--toast-hide--onlyone {
+  0% {
+    transform: translateY(-100%);
+    opacity: 1;
+    /* prevent auto-close's item */
+    display: block;
+  }
+  100% {
+    transform: translateY(10px);
+    opacity: 0;
+    /* prevent auto-close's item */
+    display: block;
+  }
+}
 /* ======================================================
    <!-- Vertical Menu -->
 /* ====================================================== */

dist/js/uix-kit-rtl.min.js.LICENSE.txt

@@ -6,9 +6,9 @@
  * ## Project Name        :  Uix Kit
  * ## Project Description :  A free web kits for fast web design and development, compatible with Bootstrap v5.
  * ## Project URL         :  https://uiux.cc
- * ## Version             :  5.1.0
+ * ## Version             :  5.2.0
  * ## Based on            :  Uix Kit (https://github.com/xizon/uix-kit)
- * ## Last Update         :  July 4, 2024
+ * ## Last Update         :  September 3, 2024
  * ## Created by          :  UIUX Lab (https://uiux.cc) ([email protected])
  * ## Released under the MIT license.
  *