Update blockquote styles

There are now styles for each variant:

- Regular
- Info
- Success
- Warning
- Danger
This commit is contained in:
Foster Hangdaan 2023-08-03 20:50:31 -04:00
parent 2ca9f3c80f
commit 398ce2fa13
Signed by: foster
GPG key ID: E48D7F49A852F112

View file

@ -97,21 +97,51 @@ .inline {
}
blockquote {
border-left: 2px solid var(--color-green);
padding-left: 1rem;
strong.highlight {
position: relative;
border-radius: 5px;
border: 1px solid var(--color-black);
border-left: 3rem solid var(--color-black);
padding: 1rem;
margin: 1rem 0;
&::before {
position: absolute;
top: 50%;
margin-top: -12px;
left: calc(-0.75rem - 24px);
content: url("https://static.fosterhangdaan.com/icons/tabler-icons/svg/quote.svg");
}
&.info {
&::before {
content: url("https://static.fosterhangdaan.com/icons/tabler-icons/svg/info-circle.svg");
}
color: var(--color-blue);
border-color: var(--color-blue);
}
&.success {
&::before {
content: url("https://static.fosterhangdaan.com/icons/tabler-icons/svg/check.svg");
}
color: var(--color-green);
border-color: var(--color-green);
}
&.warning {
&::before {
content: url("https://static.fosterhangdaan.com/icons/tabler-icons/svg/alert-triangle.svg");
}
&.warn {
border-left-color: var(--color-warn);
strong.highlight {
color: var(--color-warn);
}
border-color: var(--color-warn);
}
&.danger {
border-left-color: var(--color-error);
strong.highlight {
color: var(--color-error);
&::before {
content: url("https://static.fosterhangdaan.com/icons/tabler-icons/svg/circle-x.svg");
}
color: var(--color-error);
border-color: var(--color-error);
}
> p:first-child {
margin-top: 0;
}
> p:last-child {
margin-bottom: 0;
}
}