mirror of
https://github.com/discourse/discourse.git
synced 2024-12-16 01:26:29 +08:00
ab053ac669
Why is this change being made? We've decided that the previous "community" section should look more like a primary section that holds the most important navigation links for the site and the word "community" doesn't quite fit that description. Therefore, we've made the decision to drop the section heading for the community section. As part of removing the section heading, the following changes are made as well: 1. Button to customize the section has been moved to the "footer" of the "More..." section when `navigation_menu` site setting is set to `sidebar`. When `navigation_menu` is set to `header dropdown`, a button to customize the section is shown inline. 2. The section will no longer be collapsable. 3. The title of the section is no longer customisable as it is no longer displayed. As a technical note, we have not dropped any previous customisations of the section's title previously in case we have to bring back the header in the future. 4. The new topic button that was previously present in the header has been removed alongside the header. Admins can add a custom section link to the `/new-topic` route if there would like to make it easier for users to create a new topic in the sidebar.
224 lines
5.1 KiB
SCSS
224 lines
5.1 KiB
SCSS
:root {
|
|
--d-sidebar-section-link-prefix-margin-right: 0.35rem;
|
|
--d-sidebar-section-link-prefix-width: 1.35rem;
|
|
--d-sidebar-section-link-icon-size: 0.8em;
|
|
}
|
|
|
|
.sidebar-section-link-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.sidebar-section-link {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
color: var(--d-sidebar-link-color);
|
|
transition: background-color 0.25s;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
background: var(--d-sidebar-highlight-background);
|
|
outline: none;
|
|
.prefix-text {
|
|
background: var(--d-sidebar-highlight-prefix-background);
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
color: var(--d-sidebar-highlight-color);
|
|
background: var(--d-sidebar-highlight-background);
|
|
|
|
.sidebar-section-link-prefix {
|
|
&.icon {
|
|
color: var(--d-sidebar-highlight-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link-content-badge {
|
|
@include ellipsis;
|
|
padding-left: 0.5em;
|
|
padding-right: 0.1em; // avoids some overflow cropping
|
|
text-align: right;
|
|
color: var(--d-sidebar-link-badge-color);
|
|
font-size: var(--font-down-2);
|
|
font-weight: normal;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.sidebar-section-link-suffix {
|
|
margin-left: 1em;
|
|
font-size: var(--font-down-4);
|
|
&.icon {
|
|
&.urgent svg {
|
|
color: var(--success);
|
|
}
|
|
|
|
&.unread svg {
|
|
color: var(--tertiary-med-or-tertiary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link-content-text {
|
|
@include ellipsis;
|
|
|
|
.emoji {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.badge-wrapper {
|
|
font-size: 100%;
|
|
width: 100%;
|
|
|
|
.category-name {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link-button {
|
|
color: var(--d-sidebar-link-color);
|
|
background-color: var(--secondary);
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
|
|
&:hover {
|
|
color: var(--d-sidebar-link-color);
|
|
background-color: var(--primary-low);
|
|
|
|
.d-icon {
|
|
color: var(--d-sidebar-link-icon-color);
|
|
}
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--d-sidebar-link-icon-color);
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link[data-link-name="personal-messages-sent"],
|
|
.sidebar-section-link[data-link-name="personal-messages-new"],
|
|
.sidebar-section-link[data-link-name="personal-messages-archive"],
|
|
.sidebar-section-link[data-link-name="personal-messages-unread"],
|
|
.sidebar-section-link[data-link-name="group-messages-new"],
|
|
.sidebar-section-link[data-link-name="group-messages-unread"],
|
|
.sidebar-section-link[data-link-name="group-messages-archive"] {
|
|
.sidebar-section-link-content-text {
|
|
margin-left: calc(
|
|
var(--d-sidebar-section-link-prefix-margin-right) +
|
|
var(--d-sidebar-section-link-prefix-width)
|
|
);
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link-review {
|
|
.sidebar-section-link-content-badge {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link-prefix {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
width: var(--d-sidebar-section-link-prefix-width);
|
|
height: var(--d-sidebar-section-link-prefix-width);
|
|
margin-right: var(--d-sidebar-section-link-prefix-margin-right);
|
|
|
|
&.image {
|
|
img {
|
|
border-radius: 100%;
|
|
aspect-ratio: auto 20 / 20;
|
|
width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
|
|
height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
|
|
}
|
|
}
|
|
|
|
&.text {
|
|
text-align: center;
|
|
}
|
|
|
|
&.icon,
|
|
&.span {
|
|
position: relative;
|
|
color: var(--d-sidebar-link-icon-color);
|
|
|
|
svg {
|
|
font-size: var(--d-sidebar-section-link-icon-size);
|
|
}
|
|
|
|
.prefix-badge {
|
|
position: absolute;
|
|
background-color: transparent;
|
|
border-radius: 50%;
|
|
padding: 2px 2px 3px;
|
|
color: var(--d-sidebar-link-color);
|
|
height: 0.5rem;
|
|
width: 0.5rem;
|
|
top: -0.2em;
|
|
right: 0;
|
|
margin-right: -0.2em;
|
|
}
|
|
}
|
|
.prefix-span {
|
|
width: 0.8em;
|
|
height: 0.8em;
|
|
}
|
|
}
|
|
|
|
.prefix-text {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 100%;
|
|
background: var(--d-sidebar-prefix-background);
|
|
width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
|
|
height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
|
|
font-size: var(--font-down-2);
|
|
}
|
|
|
|
.sidebar-section-link-hover {
|
|
margin-left: auto;
|
|
|
|
.sidebar-section-hover-button {
|
|
display: none;
|
|
color: var(--d-sidebar-link-icon-color);
|
|
border: none;
|
|
background: transparent;
|
|
padding: 0 0 0 0.5em;
|
|
height: 100%;
|
|
transition: background-color 0.25s;
|
|
|
|
&:focus,
|
|
.discourse-no-touch & {
|
|
&:hover {
|
|
color: var(--d-sidebar-highlight-color);
|
|
}
|
|
}
|
|
|
|
svg {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.sidebar-section-hover-button {
|
|
background: var(--d-sidebar-highlight-background);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.sidebar-section-hover-button {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|