From 2aae8d609216f38f7e233f75a3da1d205889840b Mon Sep 17 00:00:00 2001 From: Kris Date: Wed, 24 May 2023 11:00:20 -0400 Subject: [PATCH] UX: increase sidebar font-size (#21704) --- .../common/base/sidebar-custom-section.scss | 15 +++++++-------- .../common/base/sidebar-more-section-links.scss | 4 +--- .../common/base/sidebar-section-link.scss | 12 +++++++----- .../stylesheets/common/base/sidebar-section.scss | 12 ++++++++++-- app/assets/stylesheets/common/base/sidebar.scss | 11 ++++------- .../stylesheets/common/foundation/variables.scss | 2 +- app/assets/stylesheets/desktop/menu-panel.scss | 15 +++++++-------- app/assets/stylesheets/mobile/menu-panel.scss | 10 +++++++--- 8 files changed, 44 insertions(+), 37 deletions(-) diff --git a/app/assets/stylesheets/common/base/sidebar-custom-section.scss b/app/assets/stylesheets/common/base/sidebar-custom-section.scss index 9b945a07298..998ed4e4f7c 100644 --- a/app/assets/stylesheets/common/base/sidebar-custom-section.scss +++ b/app/assets/stylesheets/common/base/sidebar-custom-section.scss @@ -4,14 +4,13 @@ } .sidebar-section-header { position: relative; - } - .d-icon-globe { - position: absolute; - left: -0.75em; - height: 0.75em; - width: 0.75em; - margin-top: 0.15em; - align-items: center; + .d-icon-globe { + position: absolute; + left: -0.75em; + align-self: stretch; + width: 0.6em; + height: 100%; + } } .sidebar-section-link-prefix.icon { 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 44a672f84db..8b75c6cda04 100644 --- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss +++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss @@ -13,9 +13,7 @@ list-style: none; box-sizing: border-box; width: 100%; - padding: var(--d-sidebar-row-vertical-padding) - var(--d-sidebar-row-horizontal-padding); - font-size: var(--d-sidebar-row-font-size); + padding: 0 var(--d-sidebar-row-horizontal-padding); justify-content: left; svg.d-icon { diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index ab8ad4c7418..db265307ad7 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -1,5 +1,5 @@ :root { - --d-sidebar-section-link-prefix-margin-right: 0.4rem; + --d-sidebar-section-link-prefix-margin-right: 0.5rem; --d-sidebar-section-link-prefix-width: 20px; } @@ -35,15 +35,16 @@ .sidebar-section-link-content-badge { @include ellipsis; padding-left: 0.5em; + padding-right: 0.1em; // avoids some overflow cropping text-align: right; - color: var(--primary-high); + color: var(--primary-700); font-size: var(--font-down-1); font-weight: normal; margin-left: auto; } .sidebar-section-link-suffix { - margin-left: 0.25rem; + margin-left: 1em; font-size: var(--font-down-4); color: var(--tertiary-medium); } @@ -119,6 +120,7 @@ background: rgba(var(--primary-rgb), 0.1); width: calc(var(--d-sidebar-section-link-prefix-width) - 2px); height: calc(var(--d-sidebar-section-link-prefix-width) - 2px); + font-size: var(--font-down-1); } } @@ -145,8 +147,8 @@ } } .prefix-span { - width: 0.9em; - height: 0.9em; + width: 0.87em; + height: 0.87em; } } diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss index ca2958351f0..5ae08441a64 100644 --- a/app/assets/stylesheets/common/base/sidebar-section.scss +++ b/app/assets/stylesheets/common/base/sidebar-section.scss @@ -16,10 +16,14 @@ .sidebar-section-header-wrapper { display: flex; + font-size: var(--d-sidebar-section-header-text-font-size); .discourse-no-touch & { &:hover { background: var(--d-sidebar-highlight-color); + .d-icon-globe { + color: var(--primary-medium); + } } } @@ -27,6 +31,10 @@ background: var(--d-sidebar-highlight-color); } + .sidebar-section-header-button { + font-size: var(--font-down-1); + } + .btn.dropdown-select-box-header, .sidebar-section-header-button { .discourse-no-touch & { @@ -86,9 +94,9 @@ } .sidebar-section-header-text { + display: flex; line-height: normal; margin-right: 0.25em; - font-size: var(--d-sidebar-section-header-text-font-size); @include ellipsis; } @@ -133,7 +141,7 @@ } .sidebar-section-content { - padding-bottom: 1em; + padding-bottom: 1.25em; margin: 0; hr { margin: 0em 1.5em; diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index b4e9d22121c..6bd10f9df95 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -5,20 +5,17 @@ } --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); + // ems so height is variable along with font size + --d-sidebar-row-height: 2.15em; } .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); + padding: 0 var(--d-sidebar-row-horizontal-padding); align-items: center; - font-size: var(--d-sidebar-row-font-size); } .sidebar-wrapper { @@ -61,7 +58,7 @@ flex-direction: column; box-sizing: border-box; flex: 1; - padding: 1.5em 0 1em; + padding: 1.35em 0 1em; overflow-x: hidden; overflow-y: overlay; diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss index 6befd666194..a7138b3dad5 100644 --- a/app/assets/stylesheets/common/foundation/variables.scss +++ b/app/assets/stylesheets/common/foundation/variables.scss @@ -17,7 +17,7 @@ $topic-body-width-padding: 11px; $topic-avatar-width: 45px; $reply-area-max-width: 1475px !default; -$d-sidebar-width: 16em !default; +$d-sidebar-width: 17em !default; $d-sidebar-narrow-width: 14em !default; // Brand color variables diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss index 531161eb0a8..4d96b94bc80 100644 --- a/app/assets/stylesheets/desktop/menu-panel.scss +++ b/app/assets/stylesheets/desktop/menu-panel.scss @@ -16,7 +16,7 @@ --d-sidebar-row-height: 30px; // 1.25rem gets text left-aligned with the hamburger icon --d-sidebar-row-horizontal-padding: 0.66rem; - --d-sidebar-row-vertical-padding: 0.33rem; + width: 360px; .panel-body-content { width: 100%; @@ -41,8 +41,13 @@ &.sidebar-section { padding-top: 0.5em; .sidebar-section-header-wrapper { - margin: 0 0 var(--d-sidebar-row-vertical-padding); + margin: 0 0 0.5em; + padding-bottom: 0.25em; border-bottom: 1px solid var(--primary-low); + .d-icon-globe { + font-size: var(--font-down-2); + color: var(--primary-medium); + } } ul { display: grid; @@ -58,12 +63,6 @@ } } - .sidebar-custom-sections .d-icon-globe { - left: -0.9em; - top: 0.35em; - font-size: 0.7em; - } - .sidebar-section-link-wrapper .sidebar-section-link-hover:hover .sidebar-section-hover-button { diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss index 2c9e4ef6f5a..93154974f92 100644 --- a/app/assets/stylesheets/mobile/menu-panel.scss +++ b/app/assets/stylesheets/mobile/menu-panel.scss @@ -16,9 +16,6 @@ .hamburger-panel .revamped { --d-sidebar-row-horizontal-padding: 1rem; --d-sidebar-highlight-color: var(--primary-low); - --d-sidebar-row-font-size: var(--font-0); - --d-sidebar-row-height: 32px; - --d-sidebar-section-header-text-font-size: var(--font-0); box-sizing: border-box; padding: 0; @@ -66,4 +63,11 @@ .sidebar-section-content { padding-bottom: 0; } + + .sidebar-section-header-wrapper { + .d-icon-globe { + color: var(--primary-medium); + font-size: var(--font-down-1); + } + } }