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 { blockquote {
border-left: 2px solid var(--color-green); position: relative;
padding-left: 1rem; border-radius: 5px;
strong.highlight { border: 1px solid var(--color-black);
color: var(--color-green); 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");
} }
&.warn { &.info {
border-left-color: var(--color-warn); &::before {
strong.highlight { content: url("https://static.fosterhangdaan.com/icons/tabler-icons/svg/info-circle.svg");
color: var(--color-warn);
} }
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");
}
color: var(--color-warn);
border-color: var(--color-warn);
} }
&.danger { &.danger {
border-left-color: var(--color-error); &::before {
strong.highlight { content: url("https://static.fosterhangdaan.com/icons/tabler-icons/svg/circle-x.svg");
color: var(--color-error);
} }
color: var(--color-error);
border-color: var(--color-error);
}
> p:first-child {
margin-top: 0;
}
> p:last-child {
margin-bottom: 0;
} }
} }