/
_admonitions.scss
48 lines (41 loc) · 1.35 KB
/
_admonitions.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
// Admonitions
// Structure of these is:
// admonition-class: color "icon-name";
//
// The colors are translated into CSS variables below. The icons are
// used directly in the main declarations to set the `mask-image` in
// the title.
// prettier-ignore
$admonitions: (
// Each of these has an reST directives for it.
"caution": #ff9100 "spark",
"warning": #ff9100 "warning",
"danger": #ff5252 "spark",
"attention": #ff5252 "warning",
"error": #ff5252 "failure",
"hint": #00c852 "question",
"tip": #00c852 "info",
"important": #00bfa5 "flame",
"note": #00b0ff "pencil",
"seealso": #448aff "info",
"admonition-todo": #808080 "pencil"
);
@mixin default-admonition($color, $icon-name) {
--color-admonition-title: #{$color};
--color-admonition-title-background: #{rgba($color, 0.2)};
--icon-admonition-default: var(--icon-#{$icon-name});
}
@mixin default-topic($color, $icon-name) {
--color-topic-title: #{$color};
--color-topic-title-background: #{rgba($color, 0.2)};
--icon-topic-default: var(--icon-#{$icon-name});
}
@mixin admonitions {
@each $name, $values in $admonitions {
--color-admonition-title--#{$name}: #{nth($values, 1)};
--color-admonition-title-background--#{$name}: #{rgba(
nth($values, 1),
0.2
)};
}
}