WordPress/wp-content/themes/twentytwentyone/assets/sass/06-components/comments.scss

293 lines
4.4 KiB
SCSS

/**
* Comments Wrapper
*/
.comments-area {
> * {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
&.show-avatars {
.avatar {
border-radius: 50%;
position: absolute;
top: 10px;
}
.fn {
display: inline-block;
padding-left: 85px;
}
.comment-metadata {
padding: 8px 0 9px 85px;
}
}
}
/**
* Comment Title
*/
.comments-title,
.comment-reply-title {
font-size: var(--heading--font-size-h2);
letter-spacing: var(--heading--letter-spacing-h2);
}
.comment-reply-title {
display: flex;
justify-content: space-between;
small {
a {
font-family: var(--global--font-secondary);
font-size: var(--global--font-size-xs);
font-style: normal;
font-weight: normal;
letter-spacing: normal;
}
}
}
/* Nested comment reply title*/
.comment .comment-respond .comment-reply-title {
font-size: var(--global--font-size-lg);
}
/**
* Comment Lists
*/
.comment-list {
padding-left: 0;
list-style: none;
> li {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
}
.comment-list .children {
list-style: none;
padding-left: 0;
> li {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
}
.comment-list .depth-2,
.comment-list .depth-3 {
@include media(mobile) {
padding-left: calc(4 * var(--global--spacing-horizontal));
}
}
/**
* Comment Meta
*/
.comment-meta {
.comment-author {
line-height: var(--global--line-height-heading);
margin-bottom: calc(0.25 * var(--global--spacing-unit));
@include media(mobile) {
margin-bottom: 0;
padding-right: 0;
}
.fn {
font-family: var(--global--font-secondary);
font-weight: normal;
font-size: var(--global--font-size-lg);
hyphens: auto;
word-wrap: break-word;
word-break: break-word;
}
}
.comment-metadata {
color: var(--global--color-primary);
font-size: var(--global--font-size-xs);
padding: 8px 0 9px 0;
.edit-link {
margin-left: var(--global--spacing-horizontal);
}
}
@include media(mobile) {
margin-right: inherit;
.comment-author {
max-width: inherit;
}
}
}
.reply {
font-size: var(--global--font-size-sm);
line-height: var(--global--line-height-heading);
}
.bypostauthor {
display: block;
}
.says {
display: none;
}
.pingback .url,
.trackback .url {
font-family: var(--global--font-primary);
}
// Comment body
.comment-body {
position: relative;
margin-bottom: calc(1.7 * var(--global--spacing-vertical));
> * {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
.reply {
margin: 0;
}
}
.comment-content {
word-wrap: break-word;
}
// Pingbacks & Trackbacks
.pingback .comment-body,
.trackback .comment-body {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
.comment-respond {
margin-top: var(--global--spacing-vertical);
}
.comment-respond > * {
margin-top: var(--global--spacing-unit);
margin-bottom: var(--global--spacing-unit);
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
&.comment-form {
margin-bottom: var(--global--spacing-vertical);
}
}
}
.comment-author {
padding-top: 3px;
.url {
color: currentColor;
}
}
.comment-form {
display: flex;
flex-wrap: wrap;
> * {
flex-basis: 100%;
}
.comment-notes {
font-size: var(--global--font-size-sm);
}
.comment-form-url,
.comment-form-comment {
width: 100%;
}
.comment-form-author,
.comment-form-email {
flex-basis: 0;
flex-grow: 1;
@include media(mobile-only) {
flex-basis: 100%;
}
}
.comment-form-cookies-consent > label,
.comment-notes {
font-size: var(--global--font-size-xs);
font-weight: normal;
}
}
.comment-form > p {
margin-bottom: var(--global--spacing-unit);
&:first-of-type {
margin-top: 0;
}
&:last-of-type {
margin-bottom: 0;
}
label,
input[type="email"],
input[type="text"],
input[type="url"],
textarea {
display: block;
font-size: var(--global--font-size-sm);
margin-bottom: calc(.5 * var(--global--spacing-unit));
width: 100%;
font-weight: var(--form--label-weight);
}
&.comment-form-cookies-consent {
display: flex;
}
@include media(mobile) {
&.comment-form-author {
margin-right: calc(1.5 * var(--global--spacing-horizontal));
}
&.comment-notes,
&.logged-in-as {
display: block;
}
}
}