@muraldevkit/ui-toolkit 2.85.0 → 2.85.1
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.
|
@@ -5,6 +5,13 @@
|
|
|
5
5
|
@use './MrlBlockNotification.variables.scss';
|
|
6
6
|
@use './MrlBlockNotification.mixins.scss' as *;
|
|
7
7
|
$mrl-notification-close-inset: var(--mrl-spacing-02);
|
|
8
|
+
.mrl-blockNotification-icon {
|
|
9
|
+
display: flex;
|
|
10
|
+
min-width: fit-content;
|
|
11
|
+
svg {
|
|
12
|
+
color: var(--mrl-blockNotification-svg-color);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
8
15
|
.mrl-blockNotification {
|
|
9
16
|
@include mrl-block-notification-animate-in;
|
|
10
17
|
align-items: center;
|
|
@@ -18,22 +25,30 @@ $mrl-notification-close-inset: var(--mrl-spacing-02);
|
|
|
18
25
|
padding: var(--mrl-blockNotification-inset-spacing);
|
|
19
26
|
position: relative;
|
|
20
27
|
width: 100%;
|
|
28
|
+
.mrl-blockNotification-close-wrapper {
|
|
29
|
+
position: absolute;
|
|
30
|
+
right: $mrl-notification-close-inset;
|
|
31
|
+
top: 50%;
|
|
32
|
+
transform: translateY(-50%);
|
|
33
|
+
svg {
|
|
34
|
+
color: var(--mrl-blockNotification-color);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
21
37
|
&[data-scope='inline'] {
|
|
22
38
|
display: inline-flex;
|
|
23
39
|
justify-content: start;
|
|
40
|
+
position: relative;
|
|
24
41
|
width: 100%;
|
|
25
42
|
.cta {
|
|
26
43
|
margin: var(--mrl-blockNotification-cta-spacing);
|
|
27
44
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
svg {
|
|
36
|
-
color: var(--mrl-blockNotification-color);
|
|
45
|
+
.mrl-blockNotification-icon {
|
|
46
|
+
align-self: baseline;
|
|
47
|
+
}
|
|
48
|
+
.mrl-blockNotification-close-wrapper {
|
|
49
|
+
position: absolute;
|
|
50
|
+
top: 20px;
|
|
51
|
+
}
|
|
37
52
|
}
|
|
38
53
|
}
|
|
39
54
|
.mrl-blockNotification--dismissible {
|
|
@@ -62,7 +77,3 @@ $mrl-notification-close-inset: var(--mrl-spacing-02);
|
|
|
62
77
|
display: inline;
|
|
63
78
|
margin-right: var(--mrl-blockNotification-inline-spacing-message);
|
|
64
79
|
}
|
|
65
|
-
.mrl-blockNotification-icon {
|
|
66
|
-
display: flex;
|
|
67
|
-
min-width: fit-content;
|
|
68
|
-
}
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
&[data-scope='inline'] {
|
|
17
17
|
--mrl-blockNotification-background: var(--mrl-color-background-info-light);
|
|
18
18
|
--mrl-blockNotification-color: var(--mrl-color-text-info);
|
|
19
|
+
--mrl-blockNotification-svg-color: var(--mrl-color-text-info);
|
|
19
20
|
--mrl-blockNotification-heading-color: var(--mrl-color-text-info);
|
|
20
21
|
}
|
|
21
22
|
}
|
|
@@ -24,6 +25,7 @@
|
|
|
24
25
|
&[data-scope='inline'] {
|
|
25
26
|
--mrl-blockNotification-background: var(--mrl-color-background-error-light);
|
|
26
27
|
--mrl-blockNotification-color: var(--mrl-color-text-error);
|
|
28
|
+
--mrl-blockNotification-svg-color: var(--mrl-color-text-error);
|
|
27
29
|
--mrl-blockNotification-heading-color: var(--mrl-color-text-error);
|
|
28
30
|
}
|
|
29
31
|
}
|
|
@@ -32,6 +34,7 @@
|
|
|
32
34
|
&[data-scope='inline'] {
|
|
33
35
|
--mrl-blockNotification-background: var(--mrl-color-background-success-light);
|
|
34
36
|
--mrl-blockNotification-color: var(--mrl-color-text-success);
|
|
37
|
+
--mrl-blockNotification-svg-color: var(--mrl-color-text-success);
|
|
35
38
|
--mrl-blockNotification-heading-color: var(--mrl-color-text-success);
|
|
36
39
|
}
|
|
37
40
|
}
|
|
@@ -39,13 +42,12 @@
|
|
|
39
42
|
--mrl-blockNotification-background: var(--mrl-color-background-warning);
|
|
40
43
|
--mrl-blockNotification-color: rgba(var(--mrl-gray-90), 1);
|
|
41
44
|
--mrl-blockNotification-heading-color: rgba(var(--mrl-black), 1);
|
|
45
|
+
--mrl-blockNotification-svg-color: rgba(var(--mrl-color-text-warning), 1);
|
|
42
46
|
&[data-scope='inline'] {
|
|
43
47
|
--mrl-blockNotification-background: var(--mrl-color-background-warning-light);
|
|
44
48
|
--mrl-blockNotification-color: var(--mrl-color-text-warning);
|
|
45
49
|
--mrl-blockNotification-heading-color: var(--mrl-color-text-warning);
|
|
46
|
-
svg
|
|
47
|
-
--mrl-blockNotification-color: var(--mrl-color-text-warning);
|
|
48
|
-
}
|
|
50
|
+
--mrl-blockNotification-svg-color: rgba(var(--mrl-status-warning), 1);
|
|
49
51
|
}
|
|
50
52
|
}
|
|
51
53
|
.mrl-blockNotification[data-kind='general'],
|