dirk-cfx-react 1.0.43 → 1.0.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/index.cjs +7 -4
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +3 -1
- package/dist/components/index.d.ts +3 -1
- package/dist/components/index.js +7 -4
- package/dist/components/index.js.map +1 -1
- package/dist/hooks/index.cjs +1 -0
- package/dist/hooks/index.cjs.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/index.js.map +1 -1
- package/dist/index.cjs +100 -53
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +100 -53
- package/dist/index.js.map +1 -1
- package/dist/providers/index.cjs +104 -40
- package/dist/providers/index.cjs.map +1 -1
- package/dist/providers/index.js +104 -40
- package/dist/providers/index.js.map +1 -1
- package/dist/styles/notify.css +118 -0
- package/package.json +1 -1
- package/src/styles/notify.css +118 -0
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/* Custom Mantine Notification Styles - VH + Mantine Radius */
|
|
2
|
+
|
|
3
|
+
/* Base notification container */
|
|
4
|
+
.mantine-Notification-root {
|
|
5
|
+
background-color: rgba(0, 0, 0, 0.8) !important;
|
|
6
|
+
/* backdrop-filter: blur(1.2vh) !important; */
|
|
7
|
+
border: 0.1vh solid rgba(255, 255, 255, 0.1) !important;
|
|
8
|
+
border-radius: var(--mantine-radius-sm) !important;
|
|
9
|
+
box-shadow: 0 0.3vh 1.2vh rgba(0, 0, 0, 0.4) !important;
|
|
10
|
+
color: #f1f3f5 !important;
|
|
11
|
+
transition: all 0.2s ease !important;
|
|
12
|
+
position: relative; /* required for progress bar */
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Notification title */
|
|
16
|
+
.mantine-Notification-title {
|
|
17
|
+
color: #f8f9fa !important;
|
|
18
|
+
font-weight: 600 !important;
|
|
19
|
+
font-family: 'Akrobat Bold', sans-serif !important;
|
|
20
|
+
font-size: 'var(--mantine-font-size-xs)' !important;
|
|
21
|
+
/* Upper case and letterspacing */
|
|
22
|
+
text-transform: uppercase !important;
|
|
23
|
+
letter-spacing: 0.05em !important;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Notification body/description */
|
|
27
|
+
.mantine-Notification-description {
|
|
28
|
+
color: #ced4da !important;
|
|
29
|
+
opacity: 0.9 !important;
|
|
30
|
+
font-size: 'var(--mantine-font-size-xxs)' !important;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Close button */
|
|
34
|
+
.mantine-Notification-closeButton {
|
|
35
|
+
color: #adb5bd !important;
|
|
36
|
+
background-color: transparent !important;
|
|
37
|
+
border: none !important;
|
|
38
|
+
width: 2vh !important;
|
|
39
|
+
height: 2vh !important;
|
|
40
|
+
border-radius: var(--mantine-radius-xs) !important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.mantine-Notification-closeButton:hover {
|
|
44
|
+
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
45
|
+
color: #f8f9fa !important;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Success notifications */
|
|
49
|
+
.mantine-Notification-root[data-variant="success"] .mantine-Notification-icon {
|
|
50
|
+
color: var(--mantine-color-green-6) !important;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Error notifications */
|
|
54
|
+
.mantine-Notification-root[data-variant="error"] .mantine-Notification-icon {
|
|
55
|
+
color: var(--mantine-color-red-6) !important;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Warning notifications */
|
|
59
|
+
.mantine-Notification-root[data-variant="warning"] .mantine-Notification-icon {
|
|
60
|
+
color: var(--mantine-color-yellow-6) !important;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Info notifications */
|
|
64
|
+
.mantine-Notification-root[data-variant="info"] .mantine-Notification-icon {
|
|
65
|
+
color: var(--mantine-color-blue-6) !important;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Default/Primary notifications */
|
|
69
|
+
.mantine-Notification-root[data-variant="default"] .mantine-Notification-icon,
|
|
70
|
+
.mantine-Notification-root:not([data-variant]) .mantine-Notification-icon {
|
|
71
|
+
color: var(--mantine-primary-color-6) !important;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Loading state */
|
|
75
|
+
.mantine-Notification-root .mantine-Notification-loader {
|
|
76
|
+
color: var(--mantine-primary-color-6) !important;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Hover animation */
|
|
80
|
+
.mantine-Notification-root:hover {
|
|
81
|
+
transform: translateY(-0.2vh) !important;
|
|
82
|
+
box-shadow: 0 1.2vh 4vh rgba(0, 0, 0, 0.5) !important;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Progress bar for auto-close */
|
|
86
|
+
.mantine-Notification-root::after {
|
|
87
|
+
content: '';
|
|
88
|
+
position: absolute;
|
|
89
|
+
bottom: 0;
|
|
90
|
+
left: 0;
|
|
91
|
+
height: 0.3vh;
|
|
92
|
+
background-color: var(--mantine-primary-color-6);
|
|
93
|
+
opacity: 0.5;
|
|
94
|
+
border-radius: 0 0 var(--mantine-radius-sm) var(--mantine-radius-sm);
|
|
95
|
+
animation: notification-progress var(--notification-duration, 5s) linear forwards;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@keyframes notification-progress {
|
|
99
|
+
from {
|
|
100
|
+
width: 100%;
|
|
101
|
+
}
|
|
102
|
+
to {
|
|
103
|
+
width: 0%;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* Remove progress bar for notifications that don't auto-close */
|
|
108
|
+
.mantine-Notification-root[data-auto-close="false"]::after {
|
|
109
|
+
display: none !important;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Notifications container z-index */
|
|
113
|
+
.mantine-NotificationsProvider {
|
|
114
|
+
z-index: 9999 !important;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
package/package.json
CHANGED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/* Custom Mantine Notification Styles - VH + Mantine Radius */
|
|
2
|
+
|
|
3
|
+
/* Base notification container */
|
|
4
|
+
.mantine-Notification-root {
|
|
5
|
+
background-color: rgba(0, 0, 0, 0.8) !important;
|
|
6
|
+
/* backdrop-filter: blur(1.2vh) !important; */
|
|
7
|
+
border: 0.1vh solid rgba(255, 255, 255, 0.1) !important;
|
|
8
|
+
border-radius: var(--mantine-radius-sm) !important;
|
|
9
|
+
box-shadow: 0 0.3vh 1.2vh rgba(0, 0, 0, 0.4) !important;
|
|
10
|
+
color: #f1f3f5 !important;
|
|
11
|
+
transition: all 0.2s ease !important;
|
|
12
|
+
position: relative; /* required for progress bar */
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Notification title */
|
|
16
|
+
.mantine-Notification-title {
|
|
17
|
+
color: #f8f9fa !important;
|
|
18
|
+
font-weight: 600 !important;
|
|
19
|
+
font-family: 'Akrobat Bold', sans-serif !important;
|
|
20
|
+
font-size: 'var(--mantine-font-size-xs)' !important;
|
|
21
|
+
/* Upper case and letterspacing */
|
|
22
|
+
text-transform: uppercase !important;
|
|
23
|
+
letter-spacing: 0.05em !important;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Notification body/description */
|
|
27
|
+
.mantine-Notification-description {
|
|
28
|
+
color: #ced4da !important;
|
|
29
|
+
opacity: 0.9 !important;
|
|
30
|
+
font-size: 'var(--mantine-font-size-xxs)' !important;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Close button */
|
|
34
|
+
.mantine-Notification-closeButton {
|
|
35
|
+
color: #adb5bd !important;
|
|
36
|
+
background-color: transparent !important;
|
|
37
|
+
border: none !important;
|
|
38
|
+
width: 2vh !important;
|
|
39
|
+
height: 2vh !important;
|
|
40
|
+
border-radius: var(--mantine-radius-xs) !important;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.mantine-Notification-closeButton:hover {
|
|
44
|
+
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
45
|
+
color: #f8f9fa !important;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Success notifications */
|
|
49
|
+
.mantine-Notification-root[data-variant="success"] .mantine-Notification-icon {
|
|
50
|
+
color: var(--mantine-color-green-6) !important;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Error notifications */
|
|
54
|
+
.mantine-Notification-root[data-variant="error"] .mantine-Notification-icon {
|
|
55
|
+
color: var(--mantine-color-red-6) !important;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Warning notifications */
|
|
59
|
+
.mantine-Notification-root[data-variant="warning"] .mantine-Notification-icon {
|
|
60
|
+
color: var(--mantine-color-yellow-6) !important;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Info notifications */
|
|
64
|
+
.mantine-Notification-root[data-variant="info"] .mantine-Notification-icon {
|
|
65
|
+
color: var(--mantine-color-blue-6) !important;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Default/Primary notifications */
|
|
69
|
+
.mantine-Notification-root[data-variant="default"] .mantine-Notification-icon,
|
|
70
|
+
.mantine-Notification-root:not([data-variant]) .mantine-Notification-icon {
|
|
71
|
+
color: var(--mantine-primary-color-6) !important;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Loading state */
|
|
75
|
+
.mantine-Notification-root .mantine-Notification-loader {
|
|
76
|
+
color: var(--mantine-primary-color-6) !important;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Hover animation */
|
|
80
|
+
.mantine-Notification-root:hover {
|
|
81
|
+
transform: translateY(-0.2vh) !important;
|
|
82
|
+
box-shadow: 0 1.2vh 4vh rgba(0, 0, 0, 0.5) !important;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Progress bar for auto-close */
|
|
86
|
+
.mantine-Notification-root::after {
|
|
87
|
+
content: '';
|
|
88
|
+
position: absolute;
|
|
89
|
+
bottom: 0;
|
|
90
|
+
left: 0;
|
|
91
|
+
height: 0.3vh;
|
|
92
|
+
background-color: var(--mantine-primary-color-6);
|
|
93
|
+
opacity: 0.5;
|
|
94
|
+
border-radius: 0 0 var(--mantine-radius-sm) var(--mantine-radius-sm);
|
|
95
|
+
animation: notification-progress var(--notification-duration, 5s) linear forwards;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@keyframes notification-progress {
|
|
99
|
+
from {
|
|
100
|
+
width: 100%;
|
|
101
|
+
}
|
|
102
|
+
to {
|
|
103
|
+
width: 0%;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* Remove progress bar for notifications that don't auto-close */
|
|
108
|
+
.mantine-Notification-root[data-auto-close="false"]::after {
|
|
109
|
+
display: none !important;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Notifications container z-index */
|
|
113
|
+
.mantine-NotificationsProvider {
|
|
114
|
+
z-index: 9999 !important;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|