cauldron/packages/styles/alert.css at develop · dequelabs/cauldron · GitHub

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
:root {
  --alert-warning-background-color: #d93251;
  --alert-warning-header-text-color: #fff;

  --alert-border-color: var(--accent-primary);
  --alert-warning-border-color: var(--accent-error);

  --alert-icon-color: var(--accent-primary);
  --alert-warning-icon-color: var(--accent-error);
}

.cauldron--theme-dark {
  --alert-border-color: var(--accent-info);
  --alert-warning-border-color: var(--accent-danger);

  --alert-icon-color: var(--accent-info);
  --alert-warning-icon-color: var(--accent-danger);
}

.Alert .Dialog__header .Icon {
  padding-right: var(--space-smallest);
  color: var(--alert-icon-color);
}

.Alert .Dialog__inner {
  border: 3px solid var(--alert-border-color);
}

.Alert__warning .Dialog__header .Icon {
  color: var(--alert-warning-icon-color);
}

.Alert__warning .Dialog__inner {
  border: 3px solid var(--alert-warning-border-color);
}

.Alert .Dialog__footer {
  border-top: none;
  padding-top: 0;
  display: flex;
  justify-content: center;
  background-color: transparent;
}

.cauldron--theme-dark .Alert .Dialog__footer {
  border-top: none;
  background: transparent;
}