2.3.2 (#49)

* Notifications - Add `nv-progress-height` theme variable * Notifications - Fix border radius rtl progress bar * Pkg - Bump 2.3.2 * Notifications - Cleanup progress css * Notifications - Remove unnecessary default theme variables
smastrom · Apr 7, 2024 · 2e5341b · 2e5341b
1 parent bdd5f8b
commit 2e5341b
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 15 deletions.
diff --git a/packages/notivue/Notifications/notifications-progress.css b/packages/notivue/Notifications/notifications-progress.css
@@ -1,11 +1,9 @@
 @media (prefers-reduced-motion: no-preference) {
-   .Notivue__notification {
-      &:has(.Notivue__progress) {
-         border-radius: var(--nv-radius, 0) var(--nv-radius, 0) var(--nv-radius, 0) 0;
+   .Notivue__notification:has(.Notivue__progress) {
+      border-radius: var(--nv-radius, 0) var(--nv-radius, 0) var(--nv-radius, 0) 0;
 
-         & .Notivue__content-message {
-            margin-bottom: 4px;
-         }
+      & .Notivue__content-message {
+         margin-bottom: var(--nv-progress-height, 4px);
       }
    }
 
@@ -14,19 +12,22 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      height: 4px;
+      height: var(--nv-progress-height, 4px);
       background-color: var(--nv-accent);
       animation: Notivue__progress-kf var(--nv-anim-dur) linear forwards;
       transform-origin: left;
       border-radius: 0 var(--nv-radius, 0) var(--nv-radius, 0) 0;
+   }
 
-      @media (prefers-reduced-motion: reduce) {
-         animation: none;
+   [dir='rtl'] {
+      & .Notivue__progress {
+         transform-origin: right;
+         border-radius: var(--nv-radius, 0) 0 0 var(--nv-radius, 0);
       }
-   }
 
-   [dir='rtl'] .Notivue__progress {
-      transform-origin: right;
+      & .Notivue__notification:has(.Notivue__progress) {
+         border-radius: var(--nv-radius, 0) var(--nv-radius, 0) 0 var(--nv-radius, 0);
+      }
    }
 
    @keyframes Notivue__progress-kf {

diff --git a/packages/notivue/Notifications/themes.ts b/packages/notivue/Notifications/themes.ts
@@ -7,7 +7,6 @@ const layout: NotivueTheme = {
    '--nv-icon-size': '1.25rem',
    '--nv-title-size': '0.925rem',
    '--nv-message-size': '0.925rem',
-   '--nv-tip-width': '0px',
    '--nv-y-align': 'center',
 }
 

diff --git a/packages/notivue/Notifications/types.ts b/packages/notivue/Notifications/types.ts
@@ -31,6 +31,7 @@ type ThemeLayoutVars =
    | '--nv-tip-width'
    | '--nv-y-align'
    | '--nv-y-align-has-title'
+   | '--nv-progress-height'
 
 type ThemeGlobalColorsVars =
    | '--nv-global-bg'

diff --git a/packages/notivue/nuxt/module.json b/packages/notivue/nuxt/module.json
@@ -1,5 +1,5 @@
 {
    "name": "notivue/nuxt",
    "configKey": "notivue",
-   "version": "2.3.1"
+   "version": "2.3.2"
 }
diff --git a/packages/notivue/package.json b/packages/notivue/package.json
@@ -1,6 +1,6 @@
 {
    "name": "notivue",
-   "version": "2.3.1",
+   "version": "2.3.2",
    "private": false,
    "description": "Fully-featured toast notification system for Vue and Nuxt",
    "keywords": [