mirror of
https://github.com/discourse/discourse.git
synced 2025-02-07 20:08:26 +00: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.
284 lines
6.1 KiB
SCSS
284 lines
6.1 KiB
SCSS
:root {
|
|
--d-sidebar-width: #{$d-sidebar-width};
|
|
@include breakpoint(large) {
|
|
--d-sidebar-width: #{$d-sidebar-narrow-width};
|
|
}
|
|
--d-sidebar-animation-time: 0.25s;
|
|
--d-sidebar-animation-ease: ease-in-out;
|
|
// 1.25rem gets text left-aligned with the hamburger icon
|
|
--d-sidebar-row-horizontal-padding: 1.25rem;
|
|
// ems so height is variable along with font size
|
|
--d-sidebar-row-height: 2.1em;
|
|
|
|
--d-sidebar-background: var(--secondary);
|
|
--d-sidebar-prefix-background: var(
|
|
--primary-low
|
|
); // example: chat participant count
|
|
|
|
--d-sidebar-header-color: var(--primary);
|
|
--d-sidebar-header-icon-color: var(--primary-medium);
|
|
|
|
--d-sidebar-link-color: var(--primary-high);
|
|
--d-sidebar-link-icon-color: var(--primary-500);
|
|
--d-sidebar-link-badge-color: var(--primary-700); // example: new count
|
|
|
|
--d-sidebar-highlight-background: var(--primary-low);
|
|
--d-sidebar-highlight-color: var(--primary-high);
|
|
--d-sidebar-highlight-prefix-background: var(--primary-300);
|
|
--d-sidebar-highlight-hover-background: var(
|
|
--primary-medium
|
|
); // example: hovering a button within a highlighted section
|
|
--d-sidebar-highlight-hover-icon: var(
|
|
--primary-very-low
|
|
); // example: hovering a button within a highlighted section
|
|
}
|
|
|
|
.sidebar-row {
|
|
box-sizing: border-box;
|
|
height: var(--d-sidebar-row-height);
|
|
padding: 0 var(--d-sidebar-row-horizontal-padding);
|
|
align-items: center;
|
|
}
|
|
|
|
.sidebar-wrapper {
|
|
display: flex;
|
|
grid-area: sidebar;
|
|
position: sticky;
|
|
top: var(--header-offset);
|
|
background: var(--d-sidebar-background);
|
|
|
|
@include unselectable;
|
|
|
|
// 1dvh with fallback for old browsers
|
|
--1dvh: 1vh;
|
|
@supports (height: 1dvh) {
|
|
--1dvh: 1dvh;
|
|
}
|
|
|
|
height: calc(
|
|
var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px)
|
|
);
|
|
|
|
align-self: start;
|
|
overflow-y: auto;
|
|
|
|
.sidebar-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0;
|
|
border-right: 1px solid var(--primary-low);
|
|
overflow-x: hidden;
|
|
// allows sidebar to scroll to the bottom when the composer is open
|
|
height: calc(100% - var(--composer-height, 0px));
|
|
}
|
|
|
|
.sidebar-sections {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
padding: 1.35em 0 1em;
|
|
overflow-x: hidden;
|
|
overflow-y: overlay;
|
|
|
|
// custom scrollbar styling
|
|
--scrollbarBg: transparent;
|
|
--scrollbarThumbBg: var(--primary-low);
|
|
--scrollbarWidth: 0.5em;
|
|
|
|
scrollbar-color: transparent var(--scrollbarBg);
|
|
transition: scrollbar-color 0.25s ease-in-out;
|
|
transition-delay: 0.5s;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: var(--scrollbarWidth);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: transparent;
|
|
border-radius: calc(var(--scrollbarWidth) / 2);
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:hover {
|
|
scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg);
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbarThumbBg);
|
|
}
|
|
|
|
transition-delay: 0s;
|
|
}
|
|
}
|
|
.sidebar-footer-wrapper {
|
|
.btn-flat.add-section {
|
|
padding: 0.25em 0.4em;
|
|
&:hover {
|
|
background: var(--d-sidebar-highlight-background);
|
|
svg {
|
|
color: var(--d-sidebar-link-icon-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-section-form-modal {
|
|
.draggable {
|
|
display: flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: var(--primary-medium);
|
|
align-self: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
cursor: move;
|
|
-webkit-user-drag: element;
|
|
user-drag: element;
|
|
}
|
|
.dragging {
|
|
opacity: 0.4;
|
|
}
|
|
.modal-inner-container {
|
|
width: var(--modal-max-width);
|
|
}
|
|
form {
|
|
margin-bottom: 0;
|
|
}
|
|
.input-group input {
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
}
|
|
input.warning {
|
|
border: 1px solid var(--danger);
|
|
}
|
|
.value.warning {
|
|
position: absolute;
|
|
}
|
|
|
|
.sidebar-section-form__input-wrapper {
|
|
margin-bottom: 1em;
|
|
|
|
input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.row-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 2em 4.5em repeat(2, 1fr) 2em;
|
|
padding: 0.55em 0 0.7em;
|
|
-webkit-user-drag: none;
|
|
user-drag: none;
|
|
cursor: default;
|
|
border-top: 2px solid transparent;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -2px;
|
|
|
|
&.header {
|
|
padding-bottom: 0;
|
|
|
|
label {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&.drag-above {
|
|
border-top: 2px solid var(--tertiary);
|
|
}
|
|
&.drag-below {
|
|
border-bottom: 2px solid var(--tertiary);
|
|
}
|
|
.link-icon {
|
|
grid-column: 2;
|
|
}
|
|
&.mark-public-wrapper {
|
|
margin-top: 1em;
|
|
padding-bottom: 0;
|
|
&.-disabled label {
|
|
cursor: not-allowed;
|
|
}
|
|
label {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
.input-group {
|
|
margin: 0 0.5em;
|
|
@include breakpoint(mobile-large) {
|
|
margin: 0 0.25em;
|
|
}
|
|
}
|
|
}
|
|
.btn-flat.add-link {
|
|
margin-top: 0.5em;
|
|
margin-left: -0.5em;
|
|
&:active,
|
|
&:focus {
|
|
background: none;
|
|
}
|
|
svg {
|
|
color: var(--tertiary);
|
|
width: 0.75em;
|
|
height: 0.75em;
|
|
}
|
|
&:hover svg {
|
|
color: var(--tertiary-hover);
|
|
}
|
|
}
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.delete {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.select-kit.multi-select .multi-select-header .formatted-selection {
|
|
display: none;
|
|
}
|
|
.modal-inner-container .select-kit {
|
|
width: 100%;
|
|
height: 100%;
|
|
.select-kit-header {
|
|
height: 100%;
|
|
}
|
|
}
|
|
.select-kit.is-expanded .select-kit-body {
|
|
min-width: 220px;
|
|
}
|
|
.reset-link {
|
|
margin-right: 0;
|
|
.discourse-no-touch & {
|
|
&:hover {
|
|
.d-icon {
|
|
color: var(--tertiary-hover);
|
|
}
|
|
}
|
|
}
|
|
.d-icon {
|
|
font-size: var(--font-down-1);
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
.delete-link {
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
.discourse-no-touch & {
|
|
&:hover {
|
|
.d-icon {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|