refactor: improve prompt box layout

When the prompt is inside the list, the icon position is outside the prompt box.

Introduced by fb13e32
This commit is contained in:
Cotes Chung 2022-10-09 05:18:41 +08:00
parent eac3f9b434
commit 1082d041ca
No known key found for this signature in database
GPG key ID: 0D9E54843167A808

View file

@ -91,21 +91,25 @@ blockquote {
color: var(--blockquote-text-color); color: var(--blockquote-text-color);
&[class^="prompt-"] { &[class^="prompt-"] {
display: flex;
border-left: 0; border-left: 0;
border-radius: 6px; border-radius: 6px;
padding: 0.75rem 1.2rem 0.75rem 3rem; padding: 1rem;
color: var(--prompt-text-color); color: var(--prompt-text-color);
&::before { &::before {
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
text-align: center; text-align: center;
width: 1.25rem; width: 1.25rem;
position: absolute; margin-right: 0.75rem;
left: 2.5rem;
} }
p:last-child { > div {
margin-bottom: 0rem; max-width: calc(100% - 2rem);
> :last-child {
margin-bottom: 0;
}
} }
} }
@ -1199,12 +1203,11 @@ $sidebar-display: "sidebar-display";
.post-content { .post-content {
> blockquote[class^=prompt-] { > blockquote[class^=prompt-] {
@include pl-pr(1.25rem);
@include ml-mr(-1.25rem); @include ml-mr(-1.25rem);
border-radius: 0;
&::before { border-radius: 0;
left: 1rem; max-width: none;
}
} }
} }