@muraldevkit/ui-toolkit 2.66.1 → 2.67.0
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/notification/MrlBlockNotification/MrlBlockNotification.d.ts +1 -1
- package/dist/components/notification/MrlToast/MrlToast.d.ts +45 -0
- package/dist/components/notification/MrlToast/index.d.ts +1 -0
- package/dist/components/notification/constants.d.ts +1 -1
- package/dist/components/notification/index.d.ts +1 -0
- package/dist/components/svg/config.d.ts +1 -1
- package/dist/components/toast/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/dist/styles/MrlToast/module.scss +111 -0
- package/dist/utils/layers/index.d.ts +11 -7
- package/package.json +1 -1
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
@use '@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
|
|
2
|
+
.MrlToast {
|
|
3
|
+
align-items: center;
|
|
4
|
+
background-color: rgba(var(--mrl-status-info), 1);
|
|
5
|
+
border-radius: var(--mrl-border-radius-container);
|
|
6
|
+
box-shadow: var(--mrl-shadows-lifted);
|
|
7
|
+
color: rgba(var(--mrl-white), 1);
|
|
8
|
+
display: flex;
|
|
9
|
+
gap: var(--mrl-space-inset);
|
|
10
|
+
height: max-content;
|
|
11
|
+
justify-content: space-between;
|
|
12
|
+
max-width: 32rem;
|
|
13
|
+
min-height: var(--mrl-spacing-09);
|
|
14
|
+
min-width: 8.75rem;
|
|
15
|
+
padding: var(--mrl-space-inset-control-small) var(--mrl-spacing-05)
|
|
16
|
+
var(--mrl-space-inset-control-small) var(--mrl-spacing-04);
|
|
17
|
+
pointer-events: auto;
|
|
18
|
+
width: fit-content;
|
|
19
|
+
z-index: $mrl-zIndex-notifications-toast;
|
|
20
|
+
&.closing {
|
|
21
|
+
animation: fadeout 0.3s forwards;
|
|
22
|
+
padding: 20px;
|
|
23
|
+
}
|
|
24
|
+
@keyframes fadeout {
|
|
25
|
+
from {
|
|
26
|
+
opacity: 1;
|
|
27
|
+
}
|
|
28
|
+
to {
|
|
29
|
+
opacity: 0;
|
|
30
|
+
visibility: hidden;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
.iconWrapper {
|
|
34
|
+
align-items: center;
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-shrink: 0;
|
|
37
|
+
height: var(--mrl-spacing-06);
|
|
38
|
+
}
|
|
39
|
+
.content {
|
|
40
|
+
align-items: center;
|
|
41
|
+
display: flex;
|
|
42
|
+
gap: var(--mrl-space-inset);
|
|
43
|
+
}
|
|
44
|
+
.primaryMessage {
|
|
45
|
+
font-family: var(--mrl-heading-font);
|
|
46
|
+
font-size: var(--mrl-font-size-03);
|
|
47
|
+
font-weight: var(--mrl-font-weight-04);
|
|
48
|
+
letter-spacing: var(--mrl-letter-spacing-03);
|
|
49
|
+
line-height: var(--mrl-line-height-08);
|
|
50
|
+
}
|
|
51
|
+
.secondaryMessage {
|
|
52
|
+
font-family: var(--mrl-body-font);
|
|
53
|
+
font-size: var(--mrl-font-size-03);
|
|
54
|
+
font-weight: var(--mrl-font-weight-01);
|
|
55
|
+
letter-spacing: var(--mrl-letter-spacing-03);
|
|
56
|
+
line-height: var(--mrl-line-height-08);
|
|
57
|
+
}
|
|
58
|
+
.cta-container {
|
|
59
|
+
align-items: center;
|
|
60
|
+
display: flex;
|
|
61
|
+
height: 100%;
|
|
62
|
+
justify-content: center;
|
|
63
|
+
}
|
|
64
|
+
.cta {
|
|
65
|
+
vertical-align: middle;
|
|
66
|
+
&--secondary {
|
|
67
|
+
margin-right: var(--mrl-spacing-02);
|
|
68
|
+
}
|
|
69
|
+
&--close {
|
|
70
|
+
margin-left: var(--mrl-spacing-02);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
&.reducedPadding {
|
|
74
|
+
padding: var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-04);
|
|
75
|
+
.content {
|
|
76
|
+
margin-right: var(--mrl-space-inline-sibling);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
&.infoNotification {
|
|
80
|
+
background-color: rgba(var(--mrl-status-info), 1);
|
|
81
|
+
}
|
|
82
|
+
&.warningNotification {
|
|
83
|
+
background-color: rgba(var(--mrl-status-warning), 1);
|
|
84
|
+
color: var(--mrl-color-text);
|
|
85
|
+
}
|
|
86
|
+
&.successNotification {
|
|
87
|
+
background-color: rgba(var(--mrl-status-success), 1);
|
|
88
|
+
}
|
|
89
|
+
&.errorNotification {
|
|
90
|
+
background-color: rgba(var(--mrl-status-error), 1);
|
|
91
|
+
}
|
|
92
|
+
&.privateNotification {
|
|
93
|
+
background-color: rgba(var(--mrl-status-private), 1);
|
|
94
|
+
}
|
|
95
|
+
&.generalNotification {
|
|
96
|
+
background-color: var(--mrl-gray-10);
|
|
97
|
+
color: var(--mrl-color-text);
|
|
98
|
+
max-width: 100%;
|
|
99
|
+
}
|
|
100
|
+
&.collaboratorNotification {
|
|
101
|
+
background-color: transparent;
|
|
102
|
+
.primaryMessage {
|
|
103
|
+
align-items: center;
|
|
104
|
+
display: flex;
|
|
105
|
+
gap: var(--mrl-spacing-04);
|
|
106
|
+
}
|
|
107
|
+
&.darkCollaborator {
|
|
108
|
+
color: var(--mrl-color-text);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
@@ -6,33 +6,37 @@ export declare const PORTAL_LAYERS: {
|
|
|
6
6
|
readonly name: "mrl-root-portal";
|
|
7
7
|
readonly zIndex: 50000;
|
|
8
8
|
};
|
|
9
|
+
readonly TOAST: {
|
|
10
|
+
readonly name: "mrl-toast-portal";
|
|
11
|
+
readonly zIndex: 50001;
|
|
12
|
+
};
|
|
9
13
|
readonly MENU: {
|
|
10
14
|
readonly name: "mrl-menu-portal";
|
|
11
|
-
readonly zIndex:
|
|
15
|
+
readonly zIndex: 50002;
|
|
12
16
|
};
|
|
13
17
|
readonly POPOVER: {
|
|
14
18
|
readonly name: "mrl-popover-portal";
|
|
15
|
-
readonly zIndex:
|
|
19
|
+
readonly zIndex: 50003;
|
|
16
20
|
};
|
|
17
21
|
readonly CALLOUT: {
|
|
18
22
|
readonly name: "mrl-callout-portal";
|
|
19
|
-
readonly zIndex:
|
|
23
|
+
readonly zIndex: 50004;
|
|
20
24
|
};
|
|
21
25
|
readonly MODAL: {
|
|
22
26
|
readonly name: "mrl-modal";
|
|
23
|
-
readonly zIndex:
|
|
27
|
+
readonly zIndex: 50005;
|
|
24
28
|
};
|
|
25
29
|
readonly SELECT: {
|
|
26
30
|
readonly name: "mrl-select-portal";
|
|
27
|
-
readonly zIndex:
|
|
31
|
+
readonly zIndex: 50006;
|
|
28
32
|
};
|
|
29
33
|
readonly TOOLTIP: {
|
|
30
34
|
readonly name: "mrl-tooltip-portal";
|
|
31
|
-
readonly zIndex:
|
|
35
|
+
readonly zIndex: 50007;
|
|
32
36
|
};
|
|
33
37
|
readonly TOP: {
|
|
34
38
|
readonly name: "mrl-top-portal";
|
|
35
|
-
readonly zIndex:
|
|
39
|
+
readonly zIndex: 50008;
|
|
36
40
|
};
|
|
37
41
|
};
|
|
38
42
|
/**
|