/
alert.scss
119 lines (97 loc) · 2.52 KB
/
alert.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
.alert {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
padding: 1rem;
gap: .75rem;
margin-bottom: 1.5rem;
margin-block-end: 1.5rem;
align-items: start;
font-size: .875rem;
border: 1px solid currentColor;
border-radius: var(--border-radius);
&.alert--warning {
background-color: var(--color-rose-25);
color: var(--color-rose-600);
[data-theme="dark"] & {
border: 1px solid var(--color-rose-300);
color: var(--color-rose-300);
background-color: var(--color-rose-900);
}
}
&.alert--important {
background-color: var(--color-warning-25);
color: var(--color-warning-600);
[data-theme="dark"] & {
color: var(--color-warning-300);
border: 1px solid var(--color-warning-300);
background-color: var(--color-warning-900);
}
}
&.alert--tip {
background-color: var(--color-success-25);
color: var(--color-success-600);
[data-theme="dark"] & {
color: var(--color-success-300);
border: 1px solid var(--color-success-300);
background-color: var(--color-success-900);
}
}
}
.alert__icon {
color: inherit;
position: relative;
top: 2px;
offset-block-start: 2px;
}
.alert__text > p {
margin: 0;
}
.alert__type {
display: block;
font-weight: 500;
margin-bottom: .25rem;
margin-block-end: .25rem;
.alert--warning & {
color: var(--color-rose-700);
[data-theme="dark"] & {
color: var(--color-rose-200);
}
}
.alert--important & {
color: var(--color-warning-700);
[data-theme="dark"] & {
color: var(--color-warning-200);
}
}
.alert--tip & {
color: var(--color-success-700);
[data-theme="dark"] & {
color: var(--color-success-200);
}
}
}
.alert__learn-more {
display: block;
font-weight: 500;
margin-top: .75rem;
margin-block-start: .75rem;
.alert--warning & {
color: var(--color-rose-700);
[data-theme="dark"] & {
color: var(--color-rose-200);
}
}
.alert--important & {
color: var(--color-warning-700);
[data-theme="dark"] & {
color: var(--color-warning-200);
}
}
.alert--tip & {
color: var(--color-success-700);
[data-theme="dark"] & {
color: var(--color-success-200);
}
}
}