@uncinq/css-components 1.13.0 → 1.13.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.
- package/css/components/alert.css +42 -0
- package/css/components/banner.css +0 -50
- package/package.json +1 -1
package/css/components/alert.css
CHANGED
|
@@ -33,4 +33,46 @@
|
|
|
33
33
|
align-items: flex-start;
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
|
+
|
|
37
|
+
/* Variants */
|
|
38
|
+
.alert-brand {
|
|
39
|
+
--alert-color-background: var(--color-brand-muted);
|
|
40
|
+
--alert-color-text: var(--color-brand-strong);
|
|
41
|
+
}
|
|
42
|
+
.alert-danger {
|
|
43
|
+
--alert-color-background: var(--color-danger-muted);
|
|
44
|
+
--alert-color-text: var(--color-danger-strong);
|
|
45
|
+
}
|
|
46
|
+
.alert-dark {
|
|
47
|
+
--alert-color-background: var(--color-dark-muted);
|
|
48
|
+
--alert-color-text: var(--color-dark-strong);
|
|
49
|
+
}
|
|
50
|
+
.alert-info {
|
|
51
|
+
--alert-color-background: var(--color-info-muted);
|
|
52
|
+
--alert-color-text: var(--color-info-strong);
|
|
53
|
+
}
|
|
54
|
+
.alert-light {
|
|
55
|
+
--alert-color-background: var(--color-light-muted);
|
|
56
|
+
--alert-color-text: var(--color-light-strong);
|
|
57
|
+
}
|
|
58
|
+
.alert-neutral {
|
|
59
|
+
--alert-color-background: var(--color-neutral-muted);
|
|
60
|
+
--alert-color-text: var(--color-neutral-strong);
|
|
61
|
+
}
|
|
62
|
+
.alert-primary {
|
|
63
|
+
--alert-color-background: var(--color-brand-muted);
|
|
64
|
+
--alert-color-text: var(--color-brand-strong);
|
|
65
|
+
}
|
|
66
|
+
.alert-secondary {
|
|
67
|
+
--alert-color-background: var(--color-neutral-muted);
|
|
68
|
+
--alert-color-text: var(--color-neutral-strong);
|
|
69
|
+
}
|
|
70
|
+
.alert-success {
|
|
71
|
+
--alert-color-background: var(--color-success-muted);
|
|
72
|
+
--alert-color-text: var(--color-success-strong);
|
|
73
|
+
}
|
|
74
|
+
.alert-warning {
|
|
75
|
+
--alert-color-background: var(--color-warning-muted);
|
|
76
|
+
--alert-color-text: var(--color-warning-strong);
|
|
77
|
+
}
|
|
36
78
|
}
|
|
@@ -6,56 +6,6 @@
|
|
|
6
6
|
p {
|
|
7
7
|
margin-block: 0;
|
|
8
8
|
}
|
|
9
|
-
|
|
10
|
-
/* Variants */
|
|
11
|
-
&.alert-accent {
|
|
12
|
-
--alert-color-background: var(--color-accent-strong);
|
|
13
|
-
--alert-color-text: var(--color-accent-muted);
|
|
14
|
-
}
|
|
15
|
-
&.alert-brand {
|
|
16
|
-
--alert-color-background: var(--color-brand-strong);
|
|
17
|
-
--alert-color-text: var(--color-brand-muted);
|
|
18
|
-
}
|
|
19
|
-
&.alert-danger {
|
|
20
|
-
--alert-color-background: var(--color-danger-strong);
|
|
21
|
-
--alert-color-text: var(--color-danger-muted);
|
|
22
|
-
}
|
|
23
|
-
&.alert-dark {
|
|
24
|
-
--alert-color-background: var(--color-dark-strong);
|
|
25
|
-
--alert-color-text: var(--color-dark-muted);
|
|
26
|
-
}
|
|
27
|
-
&.alert-info {
|
|
28
|
-
--alert-color-background: var(--color-info-strong);
|
|
29
|
-
--alert-color-text: var(--color-info-muted);
|
|
30
|
-
}
|
|
31
|
-
&.alert-highlight {
|
|
32
|
-
--alert-color-background: var(--color-highlight-muted);
|
|
33
|
-
--alert-color-text: var(--color-highlight-strong);
|
|
34
|
-
}
|
|
35
|
-
&.alert-light {
|
|
36
|
-
--alert-color-background: var(--color-light-muted);
|
|
37
|
-
--alert-color-text: var(--color-light-strong);
|
|
38
|
-
}
|
|
39
|
-
&.alert-neutral {
|
|
40
|
-
--alert-color-background: var(--color-neutral-strong);
|
|
41
|
-
--alert-color-text: var(--color-neutral-muted);
|
|
42
|
-
}
|
|
43
|
-
&.alert-primary {
|
|
44
|
-
--alert-color-background: var(--color-brand-strong);
|
|
45
|
-
--alert-color-text: var(--color-brand-muted);
|
|
46
|
-
}
|
|
47
|
-
&.alert-secondary {
|
|
48
|
-
--alert-color-background: var(--color-neutral-strong);
|
|
49
|
-
--alert-color-text: var(--color-neutral-muted);
|
|
50
|
-
}
|
|
51
|
-
&.alert-success {
|
|
52
|
-
--alert-color-background: var(--color-success-strong);
|
|
53
|
-
--alert-color-text: var(--color-success-muted);
|
|
54
|
-
}
|
|
55
|
-
&.alert-warning {
|
|
56
|
-
--alert-color-background: var(--color-warning-strong);
|
|
57
|
-
--alert-color-text: var(--color-warning-muted);
|
|
58
|
-
}
|
|
59
9
|
}
|
|
60
10
|
|
|
61
11
|
}
|