153 lines
2.7 KiB
SCSS
153 lines
2.7 KiB
SCSS
@use "../citrine/abstracts/functions" as *;
|
|
@use "../citrine/abstracts/mixins" as *;
|
|
@use "../citrine/abstracts/variables" as *;
|
|
|
|
[class^="markdown-alert"] {
|
|
display: flow-root;
|
|
position: relative;
|
|
|
|
&::before {
|
|
margin-inline-start: 1.5rem;
|
|
content: var(--alert-title);
|
|
color: var(--accent-color);
|
|
font-weight: var(--font-weight-semi-bold);
|
|
}
|
|
|
|
&::after {
|
|
@include icon(pseudo);
|
|
--icon: var(--alert-icon);
|
|
position: absolute;
|
|
margin-inline-end: 0.25rem;
|
|
inset-block-start: rpx(1);
|
|
inset-inline-start: 0.75rem;
|
|
color: var(--accent-color);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
& > :first-child {
|
|
margin-block-start: 0.25rem;
|
|
}
|
|
|
|
& > :last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
|
|
.markdown-alert {
|
|
// GitHub flavored alerts
|
|
&-note,
|
|
&-tip,
|
|
&-important,
|
|
&-warning,
|
|
&-caution,
|
|
// Generic colors
|
|
&-red,
|
|
&-orange,
|
|
&-yellow,
|
|
&-green,
|
|
&-blue,
|
|
&-purple {
|
|
@include variables-accent(("light", "common"));
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
@include variables-accent("dark");
|
|
}
|
|
}
|
|
|
|
&-note {
|
|
&::before {
|
|
content: var(--alert-note-title);
|
|
}
|
|
|
|
&::after {
|
|
--icon: var(--icon-info);
|
|
}
|
|
}
|
|
|
|
&-tip {
|
|
&::before {
|
|
content: var(--alert-tip-title);
|
|
}
|
|
|
|
&::after {
|
|
--icon: var(--icon-lightbulb);
|
|
}
|
|
}
|
|
|
|
&-important {
|
|
&::before {
|
|
content: var(--alert-important-title);
|
|
}
|
|
|
|
&::after {
|
|
--icon: var(--icon-warning-diamond);
|
|
}
|
|
}
|
|
|
|
&-warning {
|
|
&::before {
|
|
content: var(--alert-warning-title);
|
|
}
|
|
|
|
&::after {
|
|
--icon: var(--icon-warning);
|
|
}
|
|
}
|
|
|
|
&-caution {
|
|
&::before {
|
|
content: var(--alert-caution-title);
|
|
}
|
|
|
|
&::after {
|
|
--icon: var(--icon-warning-octagon);
|
|
}
|
|
}
|
|
|
|
&-caution,
|
|
&-red {
|
|
--accent-h: var(--red-h);
|
|
--accent-s: var(--red-s);
|
|
--accent-l: var(--red-l);
|
|
--accent-color: var(--red-fg);
|
|
}
|
|
|
|
&-orange {
|
|
--accent-h: var(--orange-h);
|
|
--accent-s: var(--orange-s);
|
|
--accent-l: var(--orange-l);
|
|
--accent-color: var(--orange-fg);
|
|
}
|
|
|
|
&-warning,
|
|
&-yellow {
|
|
--accent-h: var(--yellow-h);
|
|
--accent-s: var(--yellow-s);
|
|
--accent-l: var(--yellow-l);
|
|
--accent-color: var(--yellow-fg);
|
|
}
|
|
|
|
&-tip,
|
|
&-green {
|
|
--accent-h: var(--green-h);
|
|
--accent-s: var(--green-s);
|
|
--accent-l: var(--green-l);
|
|
--accent-color: var(--green-fg);
|
|
}
|
|
|
|
&-note,
|
|
&-blue {
|
|
--accent-h: var(--blue-h);
|
|
--accent-s: var(--blue-s);
|
|
--accent-l: var(--blue-l);
|
|
--accent-color: var(--blue-fg);
|
|
}
|
|
|
|
&-important,
|
|
&-purple {
|
|
--accent-h: var(--purple-h);
|
|
--accent-s: var(--purple-s);
|
|
--accent-l: var(--purple-l);
|
|
--accent-color: var(--purple-fg);
|
|
}
|
|
}
|