mirror of
https://github.com/discourse/discourse.git
synced 2025-03-09 14:34:35 +00:00
1a5f6aefc7
Before that change, footer of the sidebar was not visible. Footer is very important, especially now, when add custom section button is located there. Also, distance between chat input and keyboard were increased
184 lines
4.0 KiB
SCSS
184 lines
4.0 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;
|
|
--d-sidebar-row-height: 30px;
|
|
// 1.25rem gets text left-aligned with the hamburger icon
|
|
--d-sidebar-row-horizontal-padding: 1.25rem;
|
|
--d-sidebar-row-vertical-padding: 0.33rem;
|
|
--d-sidebar-row-font-size: var(--font-down-1);
|
|
}
|
|
|
|
.sidebar-row {
|
|
box-sizing: border-box;
|
|
height: var(--d-sidebar-row-height);
|
|
padding: var(--d-sidebar-row-vertical-padding)
|
|
var(--d-sidebar-row-horizontal-padding);
|
|
align-items: center;
|
|
font-size: var(--d-sidebar-row-font-size);
|
|
}
|
|
|
|
.sidebar-wrapper {
|
|
display: flex;
|
|
--d-sidebar-highlight-color: var(--primary-low);
|
|
background-color: var(--primary-very-low);
|
|
grid-area: sidebar;
|
|
position: sticky;
|
|
top: var(--header-offset);
|
|
|
|
.footer-nav-ipad & {
|
|
top: calc(var(--header-offset) + var(--footer-nav-height));
|
|
height: calc(100vh - var(--header-offset, 0) - var(--footer-nav-height, 0));
|
|
}
|
|
height: calc(100vh - var(--header-offset, 0));
|
|
align-self: start;
|
|
overflow-y: auto;
|
|
|
|
.sidebar-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
// allows sidebar to scroll to the bottom when the composer is open
|
|
height: calc(100% - var(--composer-height, 0));
|
|
}
|
|
|
|
.sidebar-sections {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
padding: 1.5em 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-color);
|
|
svg {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-hamburger-dropdown {
|
|
.discourse-no-touch & {
|
|
.sidebar-section-wrapper .sidebar-section-header-wrapper:hover,
|
|
.sidebar-section-wrapper .sidebar-section-header-wrapper:focus-within {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.sidebar-footer-wrapper {
|
|
margin-top: 1em;
|
|
.sidebar-footer-container {
|
|
background: var(--secondary);
|
|
&:before {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent,
|
|
rgba(var(--secondary-rgb), 1)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-custom-sections {
|
|
.sidebar-section-wrapper {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
.sidebar-section-form-modal {
|
|
.modal-inner-container {
|
|
width: var(--modal-max-width);
|
|
}
|
|
form {
|
|
margin-bottom: 0;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
}
|
|
input.warning {
|
|
border: 1px solid var(--danger);
|
|
}
|
|
.row-wrapper {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto 2em;
|
|
gap: 1em;
|
|
margin-top: 1em;
|
|
}
|
|
.delete-link {
|
|
height: 1em;
|
|
align-self: end;
|
|
margin-bottom: 0.75em;
|
|
margin-right: 1em;
|
|
}
|
|
.btn-flat.add-link {
|
|
margin-top: 1em;
|
|
margin-left: -0.65em;
|
|
&: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;
|
|
}
|
|
}
|
|
}
|