styling upcoming label

This commit is contained in:
Ella 2023-07-27 16:43:31 -06:00
parent 917e7ce2f0
commit b99df46f7c
2 changed files with 26 additions and 1 deletions

View File

@ -20,7 +20,7 @@ function initializeDecorateTopicTitle(api) {
if (!topic.event_ends_at) {
const upcoming = document.createElement("span");
const startLabel = document.createElement("span");
upcoming.classList.add("event-date", "event-relative-date");
upcoming.classList.add("event-label");
startLabel.dataset.starts_at = topic.event_starts_at;
upcoming.innerText = I18n.t(
"discourse_post_event.topic_title.upcoming"

View File

@ -26,6 +26,31 @@
margin-right: 0.25em;
}
}
.event-label {
display: inline-flex;
align-items: center;
font-size: $font-down-2;
color: var(--primary-low);
border: 1px solid var(--primary-medium);
background: var(--primary-medium);
padding: 0 0.25em;
border-radius: 3px;
vertical-align: middle;
margin-left: 0.25em;
& + .event-date-container .event-date {
margin-left: -2px; // make it flushed with upcoming label
padding-left: 5px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
& + .event-date-container .event-date + & {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
}
.header-title {