From 126266863dcc481db11ac1db8eced1309e08af1f Mon Sep 17 00:00:00 2001 From: Kris Date: Tue, 26 Jul 2022 23:16:34 -0400 Subject: [PATCH] UX: sidebar transition and styling adjustments (#17678) --- .../stylesheets/common/base/header.scss | 7 +----- .../stylesheets/common/base/menu-panel.scss | 15 +++-------- .../common/base/sidebar-footer.scss | 25 +++++++++++-------- .../common/base/sidebar-section-link.scss | 3 ++- .../common/base/sidebar-section.scss | 10 +++++--- .../stylesheets/common/base/sidebar.scss | 2 ++ app/assets/stylesheets/desktop/discourse.scss | 4 +-- 7 files changed, 30 insertions(+), 36 deletions(-) diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index 47ccdb85d3d..07cffbaf119 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/app/assets/stylesheets/common/base/header.scss @@ -17,12 +17,7 @@ box-sizing: border-box; width: 100%; height: 100%; - @media (prefers-reduced-motion: no-preference) { - .sidebar-animate & { - transition: padding-left var(--d-sidebar-animation-time) - var(--d-sidebar-animation-ease) !important; // only works with an important... :/ - } - } + .contents { display: flex; align-items: center; diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss index 06366f87229..86a8290f2e2 100644 --- a/app/assets/stylesheets/common/base/menu-panel.scss +++ b/app/assets/stylesheets/common/base/menu-panel.scss @@ -572,6 +572,7 @@ div.menu-links-header { // Sidebar-hamburger hybrid .hamburger-menu.revamped { + --d-sidebar-highlight-color: var(--highlight-medium); width: var(--d-sidebar-width); .panel-body-content { @@ -589,19 +590,9 @@ div.menu-links-header { color: var(--primary-high); background: var(--tertiary-low); } - - .sidebar-section-header-link, - .sidebar-section-header-button, - .sidebar-section-link { - &:hover { - background: var(--highlight-medium); - } - } } - .sidebar-footer-actions-button.btn { - &:hover { - background: var(--highlight-medium); - } + .sidebar-footer-wrapper { + padding: 0.5em 0 0; } } diff --git a/app/assets/stylesheets/common/base/sidebar-footer.scss b/app/assets/stylesheets/common/base/sidebar-footer.scss index 529e05e175b..37bf6c641c5 100644 --- a/app/assets/stylesheets/common/base/sidebar-footer.scss +++ b/app/assets/stylesheets/common/base/sidebar-footer.scss @@ -1,8 +1,8 @@ .sidebar-wrapper { .sidebar-footer-wrapper { .sidebar-footer-container { - margin-left: 1.5em; margin-right: 0.15em; + margin-left: 1em; } } } @@ -13,21 +13,26 @@ .sidebar-footer-container { display: flex; + align-items: stretch; } .sidebar-footer-link { - display: inline-block; + display: inline-flex; + align-items: center; + height: 100%; font-size: var(--font-down-1); color: var(--primary-high); - padding: 0.25em 0; - height: 100%; - - &:not(:first-child):before { - content: "•"; - padding: 0 0.25em; + padding: 0 0.5em; + &:hover, + &:focus { + background: var(--d-sidebar-highlight-color); } } + .sidebar-footer-links-separator { + color: var(--primary-low-mid); + } + .sidebar-footer-actions { margin-left: auto; } @@ -41,9 +46,9 @@ font-size: var(--font-down-1); color: var(--primary-medium); } - + &:focus, &:hover { - background: var(--primary-low); + background: var(--d-sidebar-highlight-color); } } } diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index f45902cc9ca..7abae61ed5f 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -12,8 +12,9 @@ font-size: var(--font-down-1); transition: background-color 0.25s; + &:focus, &:hover { - background: var(--primary-low); + background: var(--d-sidebar-highlight-color); } &.active { diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss index 48c899eb39e..6a4b486542b 100644 --- a/app/assets/stylesheets/common/base/sidebar-section.scss +++ b/app/assets/stylesheets/common/base/sidebar-section.scss @@ -11,8 +11,9 @@ .select-kit { .btn { background: transparent; + &:focus, &:hover { - background: var(--primary-low); + background: var(--d-sidebar-highlight-color); } } .d-icon { @@ -39,9 +40,9 @@ &:visited { color: var(--primary); } - + &:focus, &:hover { - background: var(--primary-low); + background: var(--d-sidebar-highlight-color); } } @@ -55,8 +56,9 @@ color: var(--primary-medium); } + &:focus, &:hover { - background: var(--primary-low); + background: var(--d-sidebar-highlight-color); } } .select-kit-collection { diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index 413084428c9..d5e35c71ad6 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -6,6 +6,8 @@ #main-outlet-wrapper { .sidebar-wrapper { + --d-sidebar-highlight-color: var(--primary-low); + grid-area: sidebar; position: sticky; top: var(--header-offset); diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss index 98a0525d8dc..40d0ead26f4 100644 --- a/app/assets/stylesheets/desktop/discourse.scss +++ b/app/assets/stylesheets/desktop/discourse.scss @@ -192,9 +192,7 @@ body.has-sidebar-page { // increase page max-width to accommodate sidebar width max-width: calc(var(--d-sidebar-width) + var(--d-max-width)); } - .d-header .wrap { - padding-left: 1.85em; - } + #main-outlet-wrapper { grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr); gap: 0 2em;