@muraldevkit/ui-toolkit 4.57.0 → 4.58.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.
|
@@ -6,20 +6,22 @@
|
|
|
6
6
|
box-shadow: var(--mrl-shadows-lifted);
|
|
7
7
|
color: rgba(var(--mrl-white), 1);
|
|
8
8
|
display: flex;
|
|
9
|
-
gap: var(--mrl-space-inset);
|
|
10
|
-
height: max-content;
|
|
11
9
|
justify-content: space-between;
|
|
12
10
|
max-width: 32rem;
|
|
13
|
-
min-height: var(--mrl-spacing-09);
|
|
14
11
|
min-width: 8.75rem;
|
|
15
|
-
padding: var(--mrl-
|
|
16
|
-
var(--mrl-
|
|
12
|
+
padding: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) var(--mrl-spacing-05)
|
|
13
|
+
calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) var(--mrl-spacing-03);
|
|
17
14
|
pointer-events: auto;
|
|
18
15
|
width: fit-content;
|
|
19
16
|
z-index: $mrl-zIndex-notifications-toast;
|
|
17
|
+
&.has-cta {
|
|
18
|
+
padding: var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-03);
|
|
19
|
+
}
|
|
20
|
+
&.has-avatar {
|
|
21
|
+
padding-left: var(--mrl-spacing-02);
|
|
22
|
+
}
|
|
20
23
|
&.closing {
|
|
21
24
|
animation: fadeout 0.3s forwards;
|
|
22
|
-
padding: 20px;
|
|
23
25
|
}
|
|
24
26
|
@keyframes fadeout {
|
|
25
27
|
from {
|
|
@@ -30,50 +32,59 @@
|
|
|
30
32
|
visibility: hidden;
|
|
31
33
|
}
|
|
32
34
|
}
|
|
33
|
-
.iconWrapper {
|
|
34
|
-
align-items: center;
|
|
35
|
-
display: flex;
|
|
36
|
-
flex-shrink: 0;
|
|
37
|
-
height: var(--mrl-spacing-06);
|
|
38
|
-
}
|
|
39
35
|
.content {
|
|
40
36
|
align-items: center;
|
|
41
37
|
display: flex;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
38
|
+
.iconWrapper {
|
|
39
|
+
align-items: center;
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-shrink: 0;
|
|
42
|
+
height: var(--mrl-spacing-06);
|
|
43
|
+
margin-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
|
|
44
|
+
}
|
|
45
|
+
.avatarWrapper {
|
|
46
|
+
align-items: center;
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-shrink: 0;
|
|
49
|
+
height: var(--mrl-spacing-06);
|
|
50
|
+
margin-right: var(--mrl-spacing-02);
|
|
51
|
+
}
|
|
52
|
+
.textContent {
|
|
53
|
+
font-size: var(--mrl-font-size-03);
|
|
54
|
+
letter-spacing: var(--mrl-letter-spacing-03);
|
|
55
|
+
line-height: var(--mrl-line-height-02);
|
|
56
|
+
}
|
|
57
|
+
.primaryMessage {
|
|
58
|
+
font-family: var(--mrl-heading-font);
|
|
59
|
+
font-weight: var(--mrl-font-weight-04);
|
|
60
|
+
}
|
|
61
|
+
.secondaryMessage {
|
|
62
|
+
font-family: var(--mrl-body-font);
|
|
63
|
+
font-weight: var(--mrl-font-weight-01);
|
|
64
|
+
}
|
|
65
|
+
.link {
|
|
66
|
+
margin-left: var(--mrl-spacing-02);
|
|
67
|
+
}
|
|
57
68
|
}
|
|
58
69
|
.cta-container {
|
|
59
70
|
align-items: center;
|
|
60
71
|
display: flex;
|
|
61
72
|
height: 100%;
|
|
62
73
|
justify-content: center;
|
|
74
|
+
margin-left: calc(var(--mrl-spacing-03) + var(--mrl-spacing-01));
|
|
63
75
|
}
|
|
64
76
|
.cta {
|
|
77
|
+
display: flex;
|
|
78
|
+
gap: var(--mrl-space-inline-sibling);
|
|
65
79
|
vertical-align: middle;
|
|
66
80
|
&--secondary {
|
|
67
81
|
margin-right: var(--mrl-spacing-02);
|
|
68
82
|
}
|
|
69
83
|
&--close {
|
|
70
84
|
margin-left: var(--mrl-spacing-02);
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
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);
|
|
85
|
+
&:only-child {
|
|
86
|
+
margin-left: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
|
|
87
|
+
}
|
|
77
88
|
}
|
|
78
89
|
}
|
|
79
90
|
&.infoNotification {
|
package/dist/styles.css
CHANGED
|
@@ -412,7 +412,7 @@
|
|
|
412
412
|
var(--mrl-spacing-02) + var(--mrl-blockNotification-inline-spacing) + var(--mrl-spacing-08)
|
|
413
413
|
);position:relative}.mrl-blockNotification-message--MdtXZ{align-items:center;max-width:45rem}.mrl-blockNotification-message--MdtXZ h2,.mrl-blockNotification-message--MdtXZ p{display:contents}.mrl-blockNotification-message--MdtXZ h2::after{content:" ";display:contents}.mrl-blockNotification-message--MdtXZ p{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-text);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-text-small)}.mrl-blockNotification-heading--WGPWE{color:var(--mrl-blockNotification-heading-color);display:inline;margin-right:var(--mrl-blockNotification-inline-spacing-message)}
|
|
414
414
|
.mrl-u-focus-wrapper{position:relative}.mrl-blockNotification{border-radius:var(--mrl-blockNotification-radius)}.mrl-blockNotification.mrl-is--transitioning{opacity:0}.mrl-blockNotification.mrl-is--closed{display:none;padding:0}@media(prefers-reduced-motion: no-preference){.mrl-blockNotification.mrl-is--transitioning{margin-top:calc(var(--mrl-blockNotification-height)*-1)}}
|
|
415
|
-
.MrlToast--WHnT9{align-items:center;background-color:rgba(var(--mrl-status-info), 1);border-radius:var(--mrl-border-radius-container);box-shadow:var(--mrl-shadows-lifted);color:rgba(var(--mrl-white), 1);display:flex;
|
|
415
|
+
.MrlToast--WHnT9{align-items:center;background-color:rgba(var(--mrl-status-info), 1);border-radius:var(--mrl-border-radius-container);box-shadow:var(--mrl-shadows-lifted);color:rgba(var(--mrl-white), 1);display:flex;justify-content:space-between;max-width:32rem;min-width:8.75rem;padding:calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) var(--mrl-spacing-05) calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) var(--mrl-spacing-03);pointer-events:auto;width:fit-content;z-index:800}.MrlToast--WHnT9.has-cta--D2bJy{padding:var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-03)}.MrlToast--WHnT9.has-avatar--KFztL{padding-left:var(--mrl-spacing-02)}.MrlToast--WHnT9.closing--ORG1o{animation:fadeout--tteGt .3s forwards}@keyframes fadeout--tteGt{from{opacity:1}to{opacity:0;visibility:hidden}}.MrlToast--WHnT9 .content--PsaqT{align-items:center;display:flex}.MrlToast--WHnT9 .content--PsaqT .iconWrapper--NSYKT{align-items:center;display:flex;flex-shrink:0;height:var(--mrl-spacing-06);margin-right:calc(var(--mrl-spacing-01) + var(--mrl-spacing-02))}.MrlToast--WHnT9 .content--PsaqT .avatarWrapper--TKMkv{align-items:center;display:flex;flex-shrink:0;height:var(--mrl-spacing-06);margin-right:var(--mrl-spacing-02)}.MrlToast--WHnT9 .content--PsaqT .textContent--g9ima{font-size:var(--mrl-font-size-03);letter-spacing:var(--mrl-letter-spacing-03);line-height:var(--mrl-line-height-02)}.MrlToast--WHnT9 .content--PsaqT .primaryMessage--CwHWD{font-family:var(--mrl-heading-font);font-weight:var(--mrl-font-weight-04)}.MrlToast--WHnT9 .content--PsaqT .secondaryMessage--VMVbR{font-family:var(--mrl-body-font);font-weight:var(--mrl-font-weight-01)}.MrlToast--WHnT9 .content--PsaqT .link--Qccyr{margin-left:var(--mrl-spacing-02)}.MrlToast--WHnT9 .cta-container--HMghw{align-items:center;display:flex;height:100%;justify-content:center;margin-left:calc(var(--mrl-spacing-03) + var(--mrl-spacing-01))}.MrlToast--WHnT9 .cta--hhAlS{display:flex;gap:var(--mrl-space-inline-sibling);vertical-align:middle}.MrlToast--WHnT9 .cta--secondary--qRqGT{margin-right:var(--mrl-spacing-02)}.MrlToast--WHnT9 .cta--close--yi8kz{margin-left:var(--mrl-spacing-02)}.MrlToast--WHnT9 .cta--close--yi8kz:only-child{margin-left:calc(var(--mrl-spacing-01) + var(--mrl-spacing-02))}.MrlToast--WHnT9.infoNotification--GObYB{background-color:rgba(var(--mrl-status-info), 1)}.MrlToast--WHnT9.warningNotification--nnWE0{background-color:rgba(var(--mrl-status-warning), 1);color:var(--mrl-color-text)}.MrlToast--WHnT9.successNotification--kirSR{background-color:rgba(var(--mrl-status-success), 1)}.MrlToast--WHnT9.errorNotification--lPM7c{background-color:rgba(var(--mrl-status-error), 1)}.MrlToast--WHnT9.privateNotification--Uzbo_{background-color:rgba(var(--mrl-status-private), 1)}.MrlToast--WHnT9.generalNotification--Qmi6y{background-color:var(--mrl-color-background-inverse);color:var(--mrl-color-text-inverse);max-width:100%}.MrlToast--WHnT9.generalNotification--Qmi6y .secondaryMessage--VMVbR{color:var(--mrl-color-text-inverse-secondary)}.MrlToast--WHnT9.collaboratorNotification--JUtKn{background-color:rgba(0,0,0,0)}.MrlToast--WHnT9.collaboratorNotification--JUtKn .primaryMessage--CwHWD{align-items:center;display:flex;gap:var(--mrl-spacing-04)}.MrlToast--WHnT9.collaboratorNotification--JUtKn.darkCollaborator--sIsI9{color:var(--mrl-color-text)}
|
|
416
416
|
.MrlInlineMessage--QFQ5I{display:flex;font-size:var(--mrl-font-size-03);font-weight:var(--mrl-font-weight-02);margin-top:var(--mrl-spacing-02)}.MrlInlineMessage--QFQ5I:not(.helper--t6Wxz) a{color:inherit}.MrlInlineMessage--QFQ5I.error--dG1GD{color:var(--mrl-color-text-error)}.MrlInlineMessage--QFQ5I.information--FFyzz{color:var(--mrl-color-text-highlight-emph)}.MrlInlineMessage--QFQ5I.information--FFyzz .MrlSvgContainer{color:var(--mrl-color-background-info)}.MrlInlineMessage--QFQ5I.warning--G_zyY{color:var(--mrl-color-text-highlight-emph)}.MrlInlineMessage--QFQ5I.warning--G_zyY .MrlSvgContainer{color:var(--mrl-color-background-warning)}.MrlInlineMessage--QFQ5I.success--nrMdN .MrlSvgContainer{color:var(--mrl-color-text-success)}.MrlInlineMessage--QFQ5I.success--nrMdN .MrlSvgContainer.mrl-link-icon,.MrlInlineMessage--QFQ5I.warning--G_zyY .MrlSvgContainer.mrl-link-icon,.MrlInlineMessage--QFQ5I.information--FFyzz .MrlSvgContainer.mrl-link-icon{color:inherit}.MrlInlineMessage--QFQ5I.helper--t6Wxz{color:var(--mrl-color-text-secondary)}.MrlInlineMessage-icon--Lvzuc{flex-shrink:0;height:var(--mrl-spacing-05);margin-right:var(--mrl-spacing-02);width:var(--mrl-spacing-05)}
|
|
417
417
|
.MrlPagination--fCh2a{display:block}.MrlPaginationList--X6xAc{align-items:center;display:flex;margin:0;padding:0}.MrlPaginationItem--t5fZ8{height:var(--mrl-spacing-06);margin:0;padding:0}.MrlPaginationText--P1M27{display:block;font-size:var(--mrl-font-size-03);padding-top:.1875rem}.MrlPaginationRange--FM225{font-weight:var(--mrl-font-weight-04);padding:0 var(--mrl-spacing-02)}.MrlPaginationDash--mz1xd{font-weight:var(--mrl-font-weight-04)}.MrlPaginationTotal--ogBg5{padding:0 var(--mrl-spacing-02)}
|
|
418
418
|
.mrl-u-focus-wrapper--k6Q_0{position:relative}.primary--Vz5Xk{--mrl-popover-background-color: var(--mrl-color-background);--mrl-popover-text-color: var(--mrl-color-text);--mrl-popover-text-emph-color: var(--mrl-color-text-emph)}.inverse--tA1Uc{--mrl-popover-background-color: var(--mrl-color-background-inverse);--mrl-popover-text-color: var(--mrl-color-text-inverse);--mrl-popover-text-emph-color: var(--mrl-color-text-emph)}.default--kJtD1{--mrl-popover-padding: var(--mrl-spacing-05)}.compact--IsSC7{--mrl-popover-padding: var(--mrl-spacing-04)}.MrlPopover--NHYhK{background:var(--mrl-popover-background-color);border-radius:var(--mrl-border-radius-functional-large);box-shadow:var(--mrl-shadows-raised);color:var(--mrl-popover-text-color);flex-direction:column;max-width:600px;opacity:0;overflow:hidden;pointer-events:auto;position:fixed;z-index:500;z-index:600;filter:drop-shadow(0 0 1px rgba(0, 0, 0, 0.24)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.06))}.MrlPopover--NHYhK a{color:var(--mrl-popover-text-color)}.MrlPopover--submenu--NcjJf{left:97%;position:absolute}.MrlPopover--close--KxF7l{position:absolute;right:4px;top:6px;transition:none}.MrlPopover--close--KxF7l svg{color:var(--mrl-popover-text-color)}.MrlPopover--NHYhK.open--X5O6m{display:flex}.MrlPopover--scrolling--content--xZZhQ{overflow:hidden auto;padding:var(--mrl-popover-padding) calc(var(--mrl-popover-padding) - 4px) var(--mrl-popover-padding) var(--mrl-popover-padding)}.MrlPopover--scrolling--content--xZZhQ .MrlPopover--close--KxF7l{position:absolute;right:8px}.MrlPopover--point--RMoNb{background:var(--mrl-popover-background-color);border-radius:0 2px;height:10px;position:absolute;width:10px;z-index:2}.MrlPopover--point--RMoNb[data-point*=bottom-]{top:-4px;transform:rotate(315deg)}.MrlPopover--point--RMoNb[data-point*=top-]{bottom:-4px;transform:rotate(315deg)}.MrlPopover--point--RMoNb[data-point=bottom-left],.MrlPopover--point--RMoNb[data-point=top-left]{left:14px}.MrlPopover--point--RMoNb[data-point=bottom-right],.MrlPopover--point--RMoNb[data-point=top-right]{right:14px}.MrlPopover--point--RMoNb[data-point=bottom-center],.MrlPopover--point--RMoNb[data-point=top-center]{left:calc(50% - 8px)}.MrlPopover--point--RMoNb[data-point*=left-]{right:-5px;transform:rotate(225deg)}.MrlPopover--point--RMoNb[data-point*=right-]{left:-5px;transform:rotate(45deg)}.MrlPopover--point--RMoNb[data-point=left-center],.MrlPopover--point--RMoNb[data-point=right-center]{top:calc(50% - 8px)}.MrlPopover--point--RMoNb[data-point=left-top],.MrlPopover--point--RMoNb[data-point=right-top]{top:16px}.MrlPopover--point--RMoNb[data-point=left-bottom],.MrlPopover--point--RMoNb[data-point=right-bottom]{bottom:16px}.inverse--tA1Uc .MrlPopover--scrolling--content--xZZhQ::-webkit-scrollbar{background-color:var(--mrl-popover-background-color);border-radius:10px;width:12px}.inverse--tA1Uc .MrlPopover--scrolling--content--xZZhQ::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--mrl-popover-text-color);border:3px solid rgba(0,0,0,0);border-radius:10px;position:relative}
|