diff --git a/app/assets/javascripts/discourse/app/components/sidebar.hbs b/app/assets/javascripts/discourse/app/components/sidebar.hbs index b356cb8d442..02dd1a2c6ae 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar.hbs @@ -6,6 +6,4 @@ {{/if}} - - diff --git a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs index 62778452301..0e39e35a7db 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs @@ -4,7 +4,6 @@
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs index a5aa5c49d52..619d9e13d0a 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs @@ -1,15 +1,14 @@
diff --git a/app/assets/stylesheets/common/base/sidebar-footer.scss b/app/assets/stylesheets/common/base/sidebar-footer.scss index bd6fa717a77..d1bb98b2737 100644 --- a/app/assets/stylesheets/common/base/sidebar-footer.scss +++ b/app/assets/stylesheets/common/base/sidebar-footer.scss @@ -1,19 +1,35 @@ -.sidebar-wrapper { - .sidebar-footer-wrapper { - .sidebar-footer-container { - margin-right: 0.15em; - margin-left: 1em; - } - } -} - .sidebar-footer-wrapper { - border-top: 1.5px solid var(--primary-low); - padding: 0.5em 0 0.5em 0.33em; + box-sizing: border-box; + width: 100%; + margin-top: auto; + padding-top: 1em; + position: sticky; + bottom: 0; .sidebar-footer-container { display: flex; align-items: stretch; + position: relative; + border-top: 1.5px solid var(--primary-low); + background: var(--primary-very-low); + padding: 0.5em 0.8em; + &:before { + // fade to make scroll more apparent + position: absolute; + content: ""; + display: block; + height: 1.5em; + top: calc(-1.5em - 1px); + left: -0.5em; + right: -0.5em; + width: calc(100% + 0.5em); + pointer-events: none; + background: linear-gradient( + to bottom, + transparent, + rgba(var(--primary-very-low-rgb), 1) + ); + } } .sidebar-footer-link { @@ -52,46 +68,3 @@ } } } - -.sidebar-footer-wrapper { - background: var(--primary-very-low); - .desktop-view & { - position: sticky; - bottom: 0; - .sidebar-footer-container { - position: relative; - &:before { - // fade to make scroll more apparent - position: absolute; - content: ""; - display: block; - height: 1.5em; - top: calc(-2em - 1px); - left: -0.5em; - right: -0.5em; - pointer-events: none; - background: linear-gradient( - to bottom, - transparent, - rgba(var(--primary-very-low-rgb), 1) - ); - } - } - } -} - -.hamburger-panel .revamped { - .sidebar-footer-wrapper { - background: var(--secondary); - .sidebar-footer-container { - &:before { - // fade to make scroll more apparent - background: linear-gradient( - to bottom, - transparent, - rgba(var(--secondary-rgb), 1) - ); - } - } - } -} diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss index 72d534c5810..804a18b5396 100644 --- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss +++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss @@ -1,5 +1,5 @@ .sidebar-more-section-links-details { - &:focus, + &:focus-within, &:hover { background: var(--d-sidebar-highlight-color); } @@ -32,7 +32,6 @@ .sidebar-more-section-link-details-content { background-color: var(--secondary); box-shadow: shadow("dropdown"); - border-radius: 5px; margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3); .sidebar-row { diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index 6b781c13d8e..e3d0cbd5949 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -1,6 +1,7 @@ .sidebar-section-link-wrapper { display: flex; align-items: center; + position: relative; .sidebar-section-link { box-sizing: border-box; @@ -13,6 +14,7 @@ &:focus, &:hover { background: var(--d-sidebar-highlight-color); + outline: none; } &.active { @@ -73,12 +75,17 @@ flex-shrink: 0; &.image { + position: absolute; img { border-radius: 50%; width: 20px; aspect-ratio: auto 20 / 20; height: 20px; - margin-right: 0.75em; + margin-right: 0.5em; + } + + + .sidebar-section-link-content-text { + margin-left: calc(20px + 0.5em); } } @@ -122,9 +129,17 @@ color: var(--primary-medium); border: none; background: transparent; - padding: 0.35em 0.5em; + padding: 0 0 0 0.5em; + height: 100%; transition: background-color 0.25s; + &:focus, + .discourse-no-touch & { + &:hover { + color: var(--primary); + } + } + svg { font-size: var(--font-down-1); } diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss index d3befdda717..29915bbf1bf 100644 --- a/app/assets/stylesheets/common/base/sidebar-section.scss +++ b/app/assets/stylesheets/common/base/sidebar-section.scss @@ -1,10 +1,18 @@ .sidebar-section-wrapper { - margin-bottom: 1em; + margin-bottom: 0.5em; .sidebar-section-header-wrapper { display: flex; align-items: stretch; box-sizing: border-box; + padding: 0; + + .discourse-no-touch & { + &:hover, + &:focus-within { + background: var(--d-sidebar-highlight-color); + } + } .select-kit { .btn { @@ -21,23 +29,35 @@ } summary { - padding: 0.25em 0.5em; + height: 100%; + padding: 0 var(--d-sidebar-row-horizontal-padding) 0 + calc(var(--d-sidebar-row-horizontal-padding) / 2); + &:focus, + &:hover { + border-color: transparent; + .d-icon { + color: var(--primary); + } + } } } } .sidebar-section-header { - @include ellipsis; flex: 1 1 auto; text-transform: uppercase; font-weight: bold; font-size: var(--font-1); color: var(--primary); align-items: center; + padding: calc(var(--d-sidebar-row-horizontal-padding) / 2) + calc(var(--d-sidebar-row-horizontal-padding) / 2) + calc(var(--d-sidebar-row-horizontal-padding) / 2) + var(--d-sidebar-row-horizontal-padding); + min-width: 0; &.sidebar-section-header-collapsable { justify-content: flex-start; - padding: 0; &:focus { background: transparent; @@ -48,27 +68,39 @@ .sidebar-section-header-text { font-weight: bold; margin-right: 0.25em; + @include ellipsis; } .sidebar-section-header-caret { + display: block; + width: 1.5em; + margin-left: -1.5em; font-size: var(--font-down-2); + flex: 0 0 auto; } .sidebar-section-header-button { background: none; border: none; - padding: 0.25em 0.5em; + padding: 0 var(--d-sidebar-row-horizontal-padding) 0 + calc(var(--d-sidebar-row-horizontal-padding) / 2); .d-icon { font-size: var(--font-down-1); color: var(--primary-medium); } - &:focus, - &:hover { - background: var(--d-sidebar-highlight-color); + .discourse-no-touch & { + &:hover, + &:focus { + outline: none; + .d-icon { + color: var(--primary); + } + } } } + .select-kit-collection { .texts { font-size: var(--font-0); diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index 4a49a1850c5..366ae8f3cb4 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -6,22 +6,22 @@ .sidebar-wrapper { --d-sidebar-highlight-color: var(--primary-low); - --d-sidebar-row-horizontal-padding: 1.5rem; + // 1.25rem gets text left-aligned with the hamburger icon + --d-sidebar-row-horizontal-padding: 1.25rem; 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)); align-self: start; overflow-y: auto; - background-color: var(--primary-very-low); .sidebar-row { - padding: 0.25rem var(--d-sidebar-row-horizontal-padding); - height: 27px; + padding: 0.33rem var(--d-sidebar-row-horizontal-padding); align-items: center; font-size: var(--font-down-1); } @@ -31,8 +31,7 @@ flex-direction: column; box-sizing: border-box; height: 100%; - width: var(--d-sidebar-width); - padding: 1em 0 0; + padding: 0; overflow-x: hidden; } @@ -47,7 +46,7 @@ // custom scrollbar styling --scrollbarBg: transparent; --scrollbarThumbBg: var(--primary-low); - --scrollbarWidth: 1.2em; + --scrollbarWidth: 1em; scrollbar-color: transparent var(--scrollbarBg); transition: scrollbar-color 0.25s ease-in-out; @@ -56,7 +55,11 @@ &::-webkit-scrollbar-thumb { background-color: transparent; border-radius: calc(var(--scrollbarWidth) / 2); - border: calc(var(--scrollbarWidth) / 4) solid transparent; + background-color: transparent; + } + + &::-webkit-scrollbar-track { + background-color: transparent; } &:hover { @@ -64,24 +67,62 @@ &::-webkit-scrollbar-thumb { background-color: var(--scrollbarThumbBg); - border-color: var(--primary-very-low); } transition-delay: 0s; } &::-webkit-scrollbar { - width: var(--scrollbarWidth); + // 0.5em gives webkit browsers a little space between the scrollbar and the content + width: calc(var(--scrollbarWidth) - 0.45em); } - .composer-open & { - // allows sidebar to scroll to the bottom when the composer is open - margin-bottom: var(--composer-height); - padding-bottom: var(--composer-ipad-padding); - } + // allows sidebar to scroll to the bottom when the composer is open + margin-bottom: var(--composer-height); + padding-bottom: var(--composer-ipad-padding); } .sidebar-sections { + display: flex; + flex-direction: column; + box-sizing: border-box; flex: 1; + padding: 1em 0 0; + max-width: calc(var(--d-sidebar-width) - var(--scrollbarWidth)); + background-color: var(--primary-very-low); + } +} + +.sidebar-hamburger-dropdown { + // note that these apply to mobile and desktop dropdowns + .sidebar-section-wrapper { + .sidebar-section-header-wrapper.sidebar-row { + padding-right: 0; + } + + .sidebar-section-header { + padding: 0; + } + } + + .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) + ); + } + } } } diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss index 40d0ead26f4..3de3460038f 100644 --- a/app/assets/stylesheets/desktop/discourse.scss +++ b/app/assets/stylesheets/desktop/discourse.scss @@ -195,7 +195,7 @@ body.has-sidebar-page { #main-outlet-wrapper { grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr); - gap: 0 2em; + gap: 0 0.5em; padding-left: 0; } } diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss index 9f9c6b901ae..31ffa095ab3 100644 --- a/app/assets/stylesheets/desktop/menu-panel.scss +++ b/app/assets/stylesheets/desktop/menu-panel.scss @@ -37,9 +37,25 @@ color: var(--primary-high); background: var(--tertiary-low); } + + .sidebar-section-header-wrapper .select-kit .btn:hover { + background: transparent; + } + } + + .sidebar-section-link-wrapper + .sidebar-section-link-hover:hover + .sidebar-section-hover-button { + background: transparent; } .sidebar-footer-wrapper { - padding: 0.5em 0 0; + padding: 0; + .sidebar-footer-container { + padding: 0; + &:before { + top: calc(-100% + 2px); + } + } } } diff --git a/app/assets/stylesheets/desktop/sidebar-section.scss b/app/assets/stylesheets/desktop/sidebar-section.scss index cdfe15ac6f5..77891afe882 100644 --- a/app/assets/stylesheets/desktop/sidebar-section.scss +++ b/app/assets/stylesheets/desktop/sidebar-section.scss @@ -1,12 +1,12 @@ #main-outlet-wrapper { - .sidebar-wrapper { + .sidebar-section-wrapper { .sidebar-section-header-button, .sidebar-section-header-caret, .sidebar-section-header-dropdown { .discourse-no-touch & { opacity: 0; transition: opacity 0.25s; - transition-delay: 0.5s; + transition-delay: 0.25s; } } diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss index 3a827e45c4f..5139e1598bd 100644 --- a/app/assets/stylesheets/mobile/menu-panel.scss +++ b/app/assets/stylesheets/mobile/menu-panel.scss @@ -78,4 +78,8 @@ align-items: center; font-size: var(--font-down-1); } + + .sidebar-section-wrapper .sidebar-section-header { + padding: 0; + } } diff --git a/app/assets/stylesheets/mobile/sidebar.scss b/app/assets/stylesheets/mobile/sidebar.scss index 09060dc46ca..6b62a38cb83 100644 --- a/app/assets/stylesheets/mobile/sidebar.scss +++ b/app/assets/stylesheets/mobile/sidebar.scss @@ -12,10 +12,13 @@ } } -.sidebar-wrapper .sidebar-footer-wrapper .sidebar-footer-container { - margin-top: 0.5em; - margin-right: 0; - padding-left: 0.25em; +.sidebar-footer-wrapper { + position: static; + margin-top: 1em; + .sidebar-footer-container { + background: transparent; + padding: 0.5em 0.1em; + } } .sidebar-more-section-links-details