Skip to content

Commit

Permalink
New components and other optimizations
Browse files Browse the repository at this point in the history
* New: Added new component `Toast`.
* New: Upgraded bootstrap css to `5.2.3`.
* Tweak: Optimized JavaScripts.
  • Loading branch information
xizon committed Sep 3, 2024
1 parent 28562c1 commit 35a6507
Show file tree
Hide file tree
Showing 268 changed files with 11,369 additions and 7,510 deletions.
9 changes: 9 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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).
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>


Expand Down
2 changes: 1 addition & 1 deletion README_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>


Expand Down
4 changes: 2 additions & 2 deletions dist/css/uix-kit-rtl.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

297 changes: 258 additions & 39 deletions dist/css/uix-kit.css
Original file line number Diff line number Diff line change
Expand Up @@ -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) (uiuxlab@gmail.com)
* ## Released under the MIT license.
*
Expand Down Expand Up @@ -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


*/
Expand Down Expand Up @@ -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 -->
/* ====================================================== */
Expand Down
2 changes: 1 addition & 1 deletion dist/css/uix-kit.css.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/uix-kit.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/uix-kit.min.css.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/js/uix-kit-rtl.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions dist/js/uix-kit-rtl.min.js.LICENSE.txt
Original file line number Diff line number Diff line change
Expand Up @@ -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) (uiuxlab@gmail.com)
* ## Released under the MIT license.
*
Expand Down
Loading

0 comments on commit 35a6507

Please sign in to comment.