mirror of
https://github.com/discourse/discourse.git
synced 2024-11-29 23:24:56 +08:00
15ff33ae9e
Before, the `back to forum` link was part of experimental admin navigation. It means that the link could be filtered out. Because it is essential navigation, it should not be part of sidebar links and should be moved above the filter.
373 lines
8.1 KiB
SCSS
373 lines
8.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-admin-background: var(--primary-very-low);
|
|
--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;
|
|
}
|
|
&__back-to-forum {
|
|
margin: 0 var(--d-sidebar-row-horizontal-padding) 1em
|
|
var(--d-sidebar-row-horizontal-padding);
|
|
color: var(--d-sidebar-link-color);
|
|
display: flex;
|
|
align-items: center;
|
|
svg {
|
|
margin-right: var(--d-sidebar-section-link-prefix-margin-right);
|
|
height: 0.75em;
|
|
width: 0.75em;
|
|
color: var(--d-sidebar-link-icon-color);
|
|
}
|
|
}
|
|
}
|
|
.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);
|
|
}
|
|
.icon.warning,
|
|
.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;
|
|
}
|
|
|
|
.input-group {
|
|
margin: 0 0.5em;
|
|
@include breakpoint(mobile-large) {
|
|
margin: 0 0.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.always-public-tooltip {
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
.d-modal__footer {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: 0.5em 1em;
|
|
@include breakpoint(mobile-extra-large) {
|
|
grid-template-columns: auto 1fr;
|
|
justify-items: left;
|
|
.mark-public-wrapper {
|
|
grid-row: 1;
|
|
grid-column: 1 / span 2;
|
|
}
|
|
.checkbox-label {
|
|
padding: 0 0 0.5em 0;
|
|
}
|
|
}
|
|
.reset-link,
|
|
.delete {
|
|
margin: 0;
|
|
justify-self: right;
|
|
}
|
|
.mark-public-wrapper {
|
|
&.-disabled label {
|
|
cursor: not-allowed;
|
|
}
|
|
.checkbox-label {
|
|
margin: 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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar__panel-switch-button {
|
|
margin: 1em 1.3em 0 1.3em;
|
|
&:last-of-type {
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
.sidebar-filter {
|
|
margin: 0 var(--d-sidebar-row-horizontal-padding) 0.5em
|
|
var(--d-sidebar-row-horizontal-padding);
|
|
display: flex;
|
|
border: 1px solid var(--primary-400);
|
|
border-radius: var(--d-input-border-radius);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: var(--secondary);
|
|
width: calc(
|
|
var(--d-sidebar-width) - var(--d-sidebar-row-horizontal-padding) * 2
|
|
);
|
|
|
|
&:focus-within {
|
|
border-color: var(--tertiary);
|
|
outline: 2px solid var(--tertiary);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
&__input[type="text"] {
|
|
border: 0;
|
|
margin-bottom: 0;
|
|
width: 50px;
|
|
height: 2em;
|
|
&:focus-within {
|
|
outline: 0;
|
|
}
|
|
width: calc(100% - 2em);
|
|
}
|
|
|
|
&__clear {
|
|
width: 2em;
|
|
height: 2em;
|
|
color: var(--primary-medium);
|
|
background-color: var(--secondary);
|
|
}
|
|
}
|
|
.sidebar-no-results {
|
|
margin: 0.5em var(--d-sidebar-row-horizontal-padding) 0
|
|
var(--d-sidebar-row-horizontal-padding);
|
|
&__title {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.sidebar-no-results {
|
|
display: block;
|
|
}
|
|
.sidebar-section-wrapper + .sidebar-no-results {
|
|
display: none;
|
|
}
|